/* =============================================================================
   Five Forces — design system
   =============================================================================
   Palette and type are not invented: the hex values were extracted from the live
   Framer stylesheet (counts in the thousands for the brand blue) and confirmed by
   sampling the rendered page. Comments record where each one came from so a
   future edit does not drift the brand by guesswork.
   ========================================================================== */

/* ---------- Fonts (self-hosted; nothing calls out to Google or Framer) ---- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/roboto-400.425c0713a8.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/roboto-500.5bcc3aa180.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-700.b9d66d1708.woff2') format('woff2');
}

:root {
  /* Brand — #1f5eff is the single most-used colour in the live stylesheet. */
  --ff-blue:        #1f5eff;
  --ff-blue-deep:   #0a2a8a;
  --ff-blue-bright: #007dfc;

  /* The five forces, each with its own accent (matches the live cards). */
  --ff-global:   #1f5eff;
  --ff-society:  #f2ad34;
  --ff-industry: #4b0fb0;
  --ff-human:    #fd3c45;
  --ff-internal: #03a5a1;

  /* Ink */
  --ff-ink:      #071329;
  --ff-body:     #273652;
  --ff-muted:    #5e6d84;
  --ff-faint:    #8f9db4;

  /* Surfaces */
  --ff-bg:        #ffffff;
  --ff-bg-soft:   #fafbff;
  --ff-bg-blue:   #f4f8ff;
  --ff-bg-panel:  #f1f4fa;

  /* Lines */
  --ff-line:        #e3ebf7;
  --ff-line-strong: #dde9ff;
  --ff-line-faint:  #ecedf1;

  /* Elevation — soft, wide, low-opacity: the site's whole visual signature. */
  --ff-shadow-sm: 0 1px 2px rgba(7, 19, 41, .04), 0 4px 12px rgba(7, 19, 41, .04);
  --ff-shadow-md: 0 2px 4px rgba(7, 19, 41, .04), 0 12px 32px rgba(7, 19, 41, .06);
  --ff-shadow-lg: 0 8px 24px rgba(7, 19, 41, .06), 0 24px 64px rgba(31, 94, 255, .08);
  --ff-glow:      0 0 0 1px rgba(0, 125, 252, .08), 0 8px 32px rgba(0, 125, 252, .12);

  /* Geometry */
  --ff-radius-sm: 12px;
  --ff-radius:    20px;
  --ff-radius-lg: 28px;
  --ff-pill:      100px;

  --ff-container: 1240px;
  --ff-narrow:    760px;
  --ff-gutter:    24px;
  --ff-nav-h:     76px;

  --ff-sans: 'Roboto', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---------- Reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ff-nav-h) + 24px); }
body {
  margin: 0;
  background: var(--ff-bg);
  color: var(--ff-body);
  font-family: var(--ff-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }   /* a component's own `display` must never un-hide it */

h1, h2, h3, h4 { color: var(--ff-ink); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }

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

.ff-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ff-blue); color: #fff; padding: 12px 20px; border-radius: 0 0 12px 0;
}
.ff-skip:focus { left: 0; }

/* ---------- Layout ------------------------------------------------------ */
.ff-container { width: 100%; max-width: var(--ff-container); margin-inline: auto; padding-inline: var(--ff-gutter); }
.ff-container--narrow { max-width: var(--ff-narrow); }

.ff-section { padding-block: clamp(56px, 7.5vw, 104px); }
.ff-section--soft { background: var(--ff-bg-soft); }
.ff-section--blue { background: var(--ff-bg-blue); }

.ff-eyebrow {
  display: inline-block;
  padding: 8px 20px;
  border-radius: var(--ff-pill);
  background: #fff;
  border: 1px solid var(--ff-line);
  box-shadow: var(--ff-shadow-sm);
  color: var(--ff-muted);
  font-size: 14px;
  line-height: 1.2;
}
.ff-section-head { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.ff-section-title { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.06; letter-spacing: -.03em; margin-block: 20px 14px; }
.ff-accent { color: var(--ff-blue); }
.ff-accent-soft { color: #c7d6ff; }
.ff-lede { color: var(--ff-muted); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; max-width: 62ch; margin-inline: auto; }
.ff-section-head .ff-lede { margin-inline: auto; }

/* ---------- Buttons ----------------------------------------------------- */
.ff-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: var(--ff-pill);
  font-size: 16px; font-weight: 500; line-height: 1;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.ff-btn:hover { transform: translateY(-1px); }
.ff-btn--primary { background: var(--ff-blue); color: #fff; box-shadow: 0 6px 20px rgba(31, 94, 255, .28); }
.ff-btn--primary:hover { background: #1550ec; box-shadow: 0 10px 28px rgba(31, 94, 255, .34); }
.ff-btn--teal { background: var(--ff-internal); color: #fff; box-shadow: 0 6px 20px rgba(3, 165, 161, .28); }
.ff-btn--teal:hover { background: #02918e; box-shadow: 0 10px 28px rgba(3, 165, 161, .34); }
.ff-btn--ghost {
  background: #fff; color: var(--ff-blue);
  border-color: var(--ff-line-strong); box-shadow: var(--ff-shadow-sm);
}
.ff-btn--ghost:hover { box-shadow: var(--ff-glow); }

/* ---------- Cards ------------------------------------------------------- */
.ff-card {
  background: #fff;
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-sm);
  padding: 28px;
  transition: transform .18s ease, box-shadow .18s ease;
}
/* A card link must be block-level: as an inline <a> its border and padding paint per line box, which left only the
   left arcs of each card over the first letters of its text in the article list. */
a.ff-card { display: block; color: inherit; }
a.ff-card:hover { transform: translateY(-3px); box-shadow: var(--ff-shadow-md); }

/* =============================================================================
   NAVIGATION
   =============================================================================
   Structure and behaviour are a port of the Sapience floating nav
   (~/s/website/assets/sapience-nav.html) — fixed centred pill, hover/focus
   flyouts, hamburger sheet — re-skinned light for this site's white canvas.
   ========================================================================== */
.ff-nav {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 50;
  display: flex; align-items: center; gap: 28px;
  width: calc(100% - 32px); max-width: 1180px;
  padding: 12px 14px 12px 28px;
  border-radius: 65px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(227, 235, 247, .9);
  box-shadow: 0 2px 8px rgba(7, 19, 41, .04), 0 12px 40px rgba(31, 94, 255, .10);
}
.ff-brand { display: flex; align-items: center; flex: 0 0 auto; }
.ff-brand svg { height: 22px; width: auto; }

.ff-nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.ff-nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ff-body); font-size: 15.5px; line-height: 1.2;
  transition: color .15s ease;
}
.ff-nav-link:hover { color: var(--ff-blue); }
.ff-dd-caret { width: 11px; height: 11px; transition: transform .18s ease; }
.ff-dd:hover .ff-dd-caret, .ff-dd:focus-within .ff-dd-caret { transform: rotate(180deg); }

.ff-nav-cta {
  flex: 0 0 auto;
  padding: 11px 22px; border-radius: var(--ff-pill);
  background: #fff; color: var(--ff-ink);
  border: 1px solid var(--ff-line-strong);
  font-size: 15.5px; line-height: 1;
  box-shadow: 0 2px 10px rgba(31, 94, 255, .10);
  transition: box-shadow .16s ease, color .16s ease;
}
.ff-nav-cta:hover { color: var(--ff-blue); box-shadow: var(--ff-glow); }

/* --- Flyout panels --- */
.ff-dd { position: relative; }
/* Invisible bridge so the pointer can travel from trigger to panel without the
   panel closing in the gap — the same trick the Sapience nav uses. */
.ff-dd::before { content: ""; position: absolute; left: -14px; right: -14px; top: -14px; bottom: -14px; }
.ff-dd-panel {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translate(-50%, -6px);
  display: flex; align-items: stretch;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius);
  box-shadow: 0 12px 44px rgba(7, 19, 41, .12);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.ff-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.ff-dd:hover > .ff-dd-panel,
.ff-dd:focus-within > .ff-dd-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.ff-dd-col { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px; min-width: 220px; }
.ff-dd-col + .ff-dd-col { border-left: 1px solid var(--ff-line); min-width: 170px; }
.ff-dd-head {
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ff-faint); margin-bottom: 2px;
}
.ff-dd-item { font-size: 15px; color: var(--ff-body); transition: color .14s ease; }
.ff-dd-item:hover { color: var(--ff-blue); }

/* --- Hamburger + mobile sheet --- */
.ff-nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--ff-pill);
  background: #fff; border: 1px solid var(--ff-line-strong); cursor: pointer;
}
.ff-nav-toggle span, .ff-nav-toggle span::before, .ff-nav-toggle span::after {
  display: block; width: 17px; height: 1.6px; background: var(--ff-ink); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
.ff-nav-toggle span { position: relative; }
.ff-nav-toggle span::before { content: ""; position: absolute; top: -5.5px; left: 0; }
.ff-nav-toggle span::after  { content: ""; position: absolute; top: 5.5px;  left: 0; }
.ff-nav-toggle[aria-expanded="true"] span { background: transparent; }
.ff-nav-toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.ff-nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

.ff-mobile-menu {
  display: none; position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  z-index: 49; flex-direction: column; gap: 2px;
  width: calc(100% - 32px); max-width: 460px;
  max-height: calc(100dvh - 100px); overflow-y: auto;
  padding: 12px; border-radius: var(--ff-radius);
  background: rgba(255, 255, 255, .98);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--ff-line);
  box-shadow: 0 16px 48px rgba(7, 19, 41, .14);
}
.ff-mobile-menu.open { display: flex; }
.ff-mobile-menu a {
  font-size: 16px; color: var(--ff-ink); padding: 13px 16px; border-radius: 14px;
  transition: background .15s ease;
}
.ff-mobile-menu a:hover { background: var(--ff-bg-blue); }
.ff-mm-head {
  padding: 14px 16px 4px; font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ff-faint);
}
.ff-mobile-menu a.ff-mm-sub { padding: 9px 16px 9px 28px; font-size: 14.5px; color: var(--ff-muted); }
.ff-mm-divider { height: 1px; background: var(--ff-line); margin: 8px 4px; }
.ff-mobile-menu a.ff-mm-cta {
  background: var(--ff-blue); color: #fff; text-align: center; font-weight: 500; margin-top: 4px;
}
.ff-mobile-menu a.ff-mm-cta:hover { background: #1550ec; }

@media (max-width: 1080px) {
  .ff-nav-links, .ff-nav-cta { display: none; }
  .ff-nav-toggle { display: flex; margin-left: auto; }
  .ff-nav { padding: 10px 12px 10px 20px; gap: 12px; }
}
@media (min-width: 1081px) { .ff-mobile-menu { display: none !important; } }

/* ---------- Footer ------------------------------------------------------ */
.ff-footer { border-top: 1px solid var(--ff-line); background: var(--ff-bg-soft); margin-top: 0; }
.ff-footer-inner {
  width: 100%; max-width: var(--ff-container); margin-inline: auto;
  padding: 56px var(--ff-gutter) 32px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.ff-footer-brand svg { height: 26px; width: auto; }
.ff-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.ff-footer-links a { color: var(--ff-body); font-size: 16px; transition: color .15s ease; }
.ff-footer-links a:hover { color: var(--ff-blue); }
.ff-footer-base {
  width: 100%; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--ff-line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ff-copyright { color: var(--ff-faint); font-size: 14px; }
.ff-footer-badges { display: flex; align-items: center; gap: 10px; }
.ff-badge {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--ff-pill); background: #fff;
  border: 1px solid var(--ff-line); box-shadow: var(--ff-shadow-sm);
  transition: box-shadow .16s ease, transform .16s ease;
}
.ff-badge:hover { transform: translateY(-2px); box-shadow: var(--ff-glow); }
.ff-badge svg { width: 20px; height: 20px; }

/* ---------- Page + article shells --------------------------------------- */
.ff-page-head, .ff-article-head { padding-top: calc(var(--ff-nav-h) + 56px); padding-bottom: 28px; text-align: center; }
.ff-page-title { font-size: clamp(34px, 5vw, 56px); margin-block: 18px 16px; }
.ff-article-head { text-align: left; }
.ff-article-title { font-size: clamp(30px, 4.4vw, 46px); margin-block: 14px 12px; }
.ff-article-meta { color: var(--ff-faint); font-size: 14.5px; }
.ff-backlink {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ff-muted); font-size: 14.5px; margin-bottom: 18px;
  transition: color .15s ease;
}
.ff-backlink:hover { color: var(--ff-blue); }

/* ---------- Prose (article bodies) -------------------------------------- */
.ff-prose { padding-bottom: 72px; font-size: 17.5px; line-height: 1.75; color: var(--ff-body); }
.ff-prose > * + * { margin-top: 1.15em; }
.ff-prose h2 { font-size: clamp(24px, 3vw, 31px); margin-top: 2em; }
.ff-prose h3 { font-size: clamp(19px, 2.2vw, 23px); margin-top: 1.7em; }
.ff-prose h4 { font-size: 18px; margin-top: 1.5em; }
.ff-prose a { color: var(--ff-blue); text-decoration: underline; text-underline-offset: 3px; }
.ff-prose a:hover { color: var(--ff-blue-deep); }
.ff-prose strong { color: var(--ff-ink); font-weight: 700; }
.ff-prose ul, .ff-prose ol { padding-left: 1.3em; }
.ff-prose ul { list-style: disc; }
.ff-prose ol { list-style: decimal; }
.ff-prose li + li { margin-top: .45em; }
.ff-prose li::marker { color: var(--ff-faint); }
.ff-prose blockquote {
  margin-inline: 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--ff-blue); color: var(--ff-ink); font-size: 19px;
}
.ff-prose img { border-radius: var(--ff-radius); box-shadow: var(--ff-shadow-sm); margin-block: 1.6em; }
.ff-prose hr { border: 0; border-top: 1px solid var(--ff-line); margin-block: 2.4em; }
.ff-prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.ff-prose th, .ff-prose td { padding: 11px 14px; border-bottom: 1px solid var(--ff-line); text-align: left; }
.ff-prose th { color: var(--ff-ink); font-weight: 700; background: var(--ff-bg-soft); }
.ff-prose code {
  background: var(--ff-bg-panel); padding: .15em .4em; border-radius: 6px; font-size: .92em;
}

/* ---------- Closing CTA band -------------------------------------------- */
.ff-cta-band { padding-block: clamp(48px, 7vw, 96px); }
.ff-cta-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg);
  background:
    radial-gradient(120% 140% at 0% 100%, rgba(31, 94, 255, .14) 0%, rgba(31, 94, 255, 0) 55%),
    #fff;
  box-shadow: var(--ff-shadow-md);
  padding: clamp(48px, 7vw, 88px) 32px;
  text-align: center;
}
.ff-cta-title { font-size: clamp(28px, 4vw, 44px); }
.ff-cta-copy { color: var(--ff-muted); margin-block: 16px 28px; }

/* ---------- Article / resource index lists ------------------------------ */
/* A row per article: a hatched placeholder thumbnail, the title and the date, as on Framer (no excerpt). */
.ff-index-list { display: grid; gap: 20px; padding-bottom: 72px; }
a.ff-index-row { display: flex; align-items: center; gap: 28px; color: var(--ff-ink); }
.ff-index-thumb {
  flex: none; width: 178px; aspect-ratio: 178 / 100; border-radius: 14px; border: 1px solid #dcdcdc;
  background: repeating-linear-gradient(135deg, #e4e4e4 0 9px, #f1f1f1 9px 10px);
}
.ff-index-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ff-index-text h2 { font-size: 17px; font-weight: 600; letter-spacing: 0; }
a.ff-index-row:hover h2 { color: var(--ff-blue); }
.ff-index-date { color: var(--ff-faint); font-size: 15px; }
/* /resources: the larger rows, the date above the title */
.ff-index-list--feature a.ff-index-row { gap: 30px; }
.ff-index-list--feature .ff-index-thumb { width: min(400px, 50%); aspect-ratio: 400 / 220; border-radius: 16px; }
.ff-index-list--feature .ff-index-text { gap: 14px; }
.ff-index-list--feature .ff-index-text h2 { font-size: clamp(22px, 2.4vw, 28px); }
.ff-index-list--feature .ff-index-date { order: -1; }

/* The ALL / AI / USE CASE chips beside the /resources title: shown as Framer showed them, with nothing behind them. */
.ff-index-headrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ff-index-headrow .ff-page-title { margin-block: 0; }
.ff-chips { display: flex; align-items: center; gap: 6px; }
.ff-chip { padding: 7px 24px; border-radius: 999px; font-size: 15px; letter-spacing: .08em; color: var(--ff-muted); }
.ff-chip.is-active { background: #eef0f6; color: var(--ff-body); }
.ff-chips-search { display: inline-flex; margin-right: 10px; color: var(--ff-ink); }
.ff-chips-search svg { width: 26px; height: 26px; }

/* Framer kept separate copy per screen size. Two lines, each element on one side only:
   phones (<= 809px): .ff-only-phone / .ff-only-desktop (the /audit-1 card words);
   tablets and phones (<= 1199px): .ff-narrow / .ff-wide (the /forces wheel, the /audit-1 "Start Audit" link). */
.ff-only-phone, .ff-narrow { display: none; }
@media (max-width: 1199px) {
  .ff-wide { display: none !important; }
  .ff-narrow { display: revert; }
}
@media (max-width: 809px) {
  .ff-only-desktop { display: none !important; }
  .ff-only-phone { display: revert; }
}

/* ---------- Typeform embed ---------------------------------------------- */
.ff-typeform-shell { padding-top: calc(var(--ff-nav-h) + 32px); padding-bottom: 56px; }
.ff-typeform {
  width: 100%; height: min(76vh, 720px); min-height: 520px;
  border: 1px solid var(--ff-line); border-radius: var(--ff-radius);
  overflow: hidden; box-shadow: var(--ff-shadow-md); background: #fff;
}
.ff-typeform iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 640px) {
  :root { --ff-gutter: 18px; }
  body { font-size: 16px; }
  a.ff-index-row, .ff-index-list--feature a.ff-index-row { gap: 20px; }
  .ff-index-thumb, .ff-index-list--feature .ff-index-thumb { width: 45%; }
  .ff-index-list--feature .ff-index-text h2 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* =============================================================================
   WORDMARK — "5 FORCES"
   =============================================================================
   The live site draws the "5" as a bespoke vector and sets "FORCES" as live text
   in Orbitron 900. Reproduced the same way (not as one flat image) so it stays
   sharp at every size and inherits its colour from context.
   ========================================================================== */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/orbitron-900.ce87e6a1b1.woff2') format('woff2');
}

.ff-wordmark { display: inline-flex; align-items: center; gap: .34em; color: var(--ff-ink); line-height: 1; }
.ff-wordmark-mark { height: 1.12em; width: auto; flex: 0 0 auto; }
.ff-wordmark-mark path { fill: currentColor; }
.ff-wordmark-text {
  font-family: 'Orbitron', var(--ff-sans);
  font-weight: 900;
  font-size: 1em;
  letter-spacing: .06em;
}
.ff-brand .ff-wordmark { font-size: 21px; }
.ff-footer-brand .ff-wordmark { font-size: 25px; }
.ff-nav-link.is-current { color: var(--ff-blue); }

/* =============================================================================
   HOME — HERO
   ========================================================================== */
.ff-hero { padding-top: calc(var(--ff-nav-h) + 60px); padding-bottom: clamp(64px, 7vw, 104px); overflow: hidden; }
.ff-hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.ff-hero-title { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -.035em; margin-block: 22px 20px; }
.ff-hero-lede { margin-inline: 0; max-width: 52ch; }
/* One main button, and the organization assessment as a text link under it (#1010 B1). */
.ff-hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 30px; }

.ff-hero-steps { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; margin-top: 36px; }
.ff-hero-step { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 116px; position: relative; }
.ff-hero-step + .ff-hero-step::before {
  content: ""; position: absolute; left: -18px; top: 22px; width: 18px;
  border-top: 2px dashed var(--ff-line-strong);
}
.ff-hero-step-num {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--ff-pill);
  background: #fff; border: 1.5px solid var(--ff-line-strong); color: var(--ff-blue);
  font-weight: 700; font-size: 15px; box-shadow: var(--ff-glow);
}
.ff-hero-step-label { text-align: center; font-size: 14px; font-weight: 500; color: var(--ff-ink); line-height: 1.3; }

/* --- Hero copy: one orchestrated entrance (with the living model beside it) --- */
.ff-js .ff-intro { animation: ff-rise .7s cubic-bezier(.22, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * 80ms + 60ms); }
@keyframes ff-rise { from { opacity: 0; transform: translateY(18px); } }

/* The quiet text link beside a main button (the hero, /thank-you). */
.ff-hero-link, .ff-next-step-link {
  color: var(--ff-blue); font-weight: 500;
  text-decoration: underline; text-decoration-color: rgba(31, 94, 255, .32); text-underline-offset: 5px;
}
.ff-hero-link:hover, .ff-next-step-link:hover { text-decoration-color: var(--ff-blue); }
.ff-hero-link { font-size: 15.5px; transition: text-decoration-color .15s ease; }
.ff-hero-step-badge {
  position: absolute; top: -5px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--ff-pill); background: var(--ff-blue); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px #fff;
}

/* =============================================================================
   HOME — THE LIVING MODEL (partials/living-model.html, assets/js/living-model.js)
   =============================================================================
   Before the script runs (or without it) the cards are a plain grid, finished. The script adds .is-staged
   (absolute layout on a scaled stage), .is-armed (the hidden "before" states; never under reduced motion),
   then .is-in / .is-done / .is-on as the story plays, and .is-live once it has. Hidden states use opacity and
   transform only, so a card's measured height never changes while it animates.
   ========================================================================== */
.ff-lm { position: relative; min-width: 0; }
.ff-lm::before {   /* the blueprint dots the model sits on */
  content: ""; position: absolute; inset: -48px -64px; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(31, 94, 255, .17) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
          mask-image: radial-gradient(closest-side, #000 35%, transparent);
}
.ff-lm-stage { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ff-lm-card--compare { grid-column: 1 / -1; }
.ff-lm:not(.is-staged) .ff-lm-radar { max-width: 340px; margin-inline: auto; }
.ff-lm-lines, .ff-lm-halo, .ff-lm-hint { display: none; }
/* With JavaScript on its way: keep the room, and show the plain grid anyway if the script never arrives. */
.ff-js .ff-lm:not(.is-staged) { min-height: 600px; }
.ff-js .ff-lm:not(.is-staged) .ff-lm-stage { opacity: 0; animation: ff-lm-failsafe .3s 2.5s forwards; }
@keyframes ff-lm-failsafe { to { opacity: 1; } }

.ff-lm.is-staged .ff-lm-stage { display: block; position: absolute; top: 0; transform-origin: 0 0; }
.ff-lm.is-staged .ff-lm-card { position: absolute; }
.ff-lm.is-staged .ff-lm-lines { display: block; position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ff-lm.is-staged .ff-lm-halo {
  display: block; position: absolute; left: 50%; top: 46%; width: 560px; height: 560px; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(31, 94, 255, .13), rgba(31, 94, 255, 0));
}

.ff-lm-card {
  background: #fff; border: 1px solid var(--ff-line); border-radius: 18px;
  padding: 16px 18px 18px; font-size: 12.5px; line-height: 1.45; color: var(--ff-body);
  box-shadow: 0 1px 2px rgba(7, 19, 41, .05), 0 22px 44px -18px rgba(16, 42, 110, .24);
  -webkit-user-select: none; user-select: none;
  transition: opacity .5s cubic-bezier(.22, .9, .3, 1), transform .55s cubic-bezier(.22, .9, .3, 1),
              box-shadow .2s ease, scale .2s ease;
}
.ff-lm-card p { margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .ff-lm.is-staged .ff-lm-card { cursor: grab; }
  .ff-lm.is-staged .ff-lm-card:hover { box-shadow: 0 1px 2px rgba(7, 19, 41, .05), 0 28px 56px -18px rgba(16, 42, 110, .32); }
  .ff-lm.is-staged .ff-lm-hint {
    display: block; position: absolute; left: 0; right: 0; top: calc(100% + 18px);
    text-align: center; font-size: 13px; color: var(--ff-faint); transition: opacity .6s ease;
  }
  .ff-lm.is-armed:not(.is-live) .ff-lm-hint { opacity: 0; }
}
.ff-lm-card.is-dragging {
  cursor: grabbing; scale: 1.035;
  box-shadow: 0 2px 4px rgba(7, 19, 41, .06), 0 40px 70px -20px rgba(16, 42, 110, .38);
}
.ff-lm-grabbing, .ff-lm-grabbing * { cursor: grabbing !important; }
.ff-lm.is-armed .ff-lm-card:not(.is-in) { opacity: 0; transform: translateY(14px) scale(.97); }

.ff-lm-head { display: flex; align-items: center; gap: 10px; }
.ff-lm-icon {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: var(--ff-bg-blue); color: var(--ff-blue);
}
.ff-lm-kicker { font-size: 11.5px; color: var(--ff-faint); line-height: 1.3; }
.ff-lm-title { font-size: 15px; font-weight: 700; color: var(--ff-ink); line-height: 1.2; letter-spacing: -.01em; }

/* Survey cards: the count fills to 100%, the bar fills with it, the questions tick off. */
.ff-lm-score { display: flex; align-items: baseline; gap: 2px; margin-top: 14px; font-weight: 700; color: var(--ff-ink); }
.ff-lm-count { font-variant-numeric: tabular-nums; }
.ff-lm-score .ff-lm-count { font-size: 34px; line-height: 1; letter-spacing: -.03em; }
.ff-lm-unit { font-size: 16px; color: var(--ff-muted); }
.ff-lm-done {
  margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--ff-pill); background: #e7f7ed; color: #15803d;
  font-size: 11px; font-weight: 500; transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.ff-lm-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ff-lm.is-armed .ff-lm-card:not(.is-done) .ff-lm-done { opacity: 0; transform: scale(.7); }
.ff-lm-bar { display: block; height: 6px; margin: 10px 0 14px; border-radius: 6px; background: #eef2fb; overflow: hidden; }
.ff-lm-bar-fill {
  display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%;
  background: linear-gradient(90deg, #79a5ff, var(--ff-blue));
}
.ff-lm.is-armed .ff-lm-card:not(.is-done) .ff-lm-bar-fill { transform: scaleX(0); }
.ff-lm-questions { display: grid; gap: 7px; }
.ff-lm-questions li { display: flex; align-items: center; gap: 8px; color: var(--ff-muted); font-size: 12.5px; line-height: 1.3; }
.ff-lm-check {
  flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px;
  background: var(--ff-blue); color: #fff; transition: background .2s ease;
}
.ff-lm-check svg { stroke-width: 3.2; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.ff-lm.is-armed .ff-lm-questions li:not(.is-on) .ff-lm-check { background: #eef2fb; }
.ff-lm.is-armed .ff-lm-questions li:not(.is-on) .ff-lm-check svg { transform: scale(0); }

/* Profile: the rows arrive one by one and the archetype spins through all six before it lands. */
.ff-lm-rows { display: grid; margin: 12px 0 0; }
.ff-lm-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--ff-line-faint);
}
.ff-lm-row > * { transition: opacity .4s ease, transform .5s cubic-bezier(.22, .9, .3, 1); }
/* Waiting for both assessments: the empty rows keep their dividers and a light sweep runs across them. */
.ff-lm.is-armed .ff-lm-row:not(.is-on) > * { opacity: 0; transform: translateX(-8px); }
.ff-lm.is-armed .ff-lm-card--profile:not(.is-done) .ff-lm-rows {
  background: linear-gradient(100deg, transparent 30%, rgba(31, 94, 255, .08) 50%, transparent 70%) 0 0 / 250% 100%;
  animation: ff-lm-sweep 1.4s linear infinite;
}
@keyframes ff-lm-sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.ff-lm-row-icon {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--ff-bg-panel); color: var(--ff-muted);
}
.ff-lm-row dt { font-size: 13px; font-weight: 500; color: var(--ff-ink); line-height: 1.25; }
.ff-lm-row dt small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ff-faint); }
.ff-lm-pill {
  margin: 0; padding: 4px 11px; border-radius: var(--ff-pill); background: var(--ff-bg-blue); color: var(--ff-blue);
  font-size: 11.5px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ff-lm-pill--warn { background: #fff3dc; color: #b45309; }
.ff-lm-pill.is-landed { animation: ff-lm-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ff-lm-pop { from { transform: scale(.82); } }

/* Compare: the two shapes draw themselves, the gap fills in, readiness counts up, the results arrive. */
.ff-lm-head--split .ff-lm-readiness { margin-left: auto; text-align: right; font-weight: 700; color: var(--ff-blue); line-height: 1; }
.ff-lm-readiness .ff-lm-count { font-size: 28px; letter-spacing: -.03em; }
.ff-lm-readiness small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 400; color: var(--ff-faint); }
.ff-lm-radar { width: 100%; height: auto; margin: 8px 0 2px; overflow: visible; }
.ff-lm-grid { fill: none; stroke: var(--ff-line); stroke-width: 1.2; }
.ff-lm-grid--outer { fill: var(--ff-bg-soft); }
.ff-lm-gapzone { fill: rgba(242, 173, 52, .22); transition: opacity .6s ease 1s; }
.ff-lm-poly {
  stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.2s cubic-bezier(.65, 0, .35, 1), fill-opacity .6s ease .9s;
}
.ff-lm-poly--you { stroke: var(--ff-blue); fill: var(--ff-blue); fill-opacity: .13; }
.ff-lm-poly--org { stroke: var(--ff-society); fill: var(--ff-society); fill-opacity: .12; transition-delay: .25s, 1.1s; }
.ff-lm.is-armed .ff-lm-card:not(.is-done) .ff-lm-poly { stroke-dashoffset: 100; fill-opacity: 0; }
.ff-lm.is-armed .ff-lm-card:not(.is-done) .ff-lm-gapzone { opacity: 0; }
.ff-lm-axis { font: 500 16px var(--ff-sans); fill: var(--ff-muted); }
.ff-lm-legend { text-align: center; font-size: 11.5px; color: var(--ff-muted); }
.ff-lm-key { display: inline-block; vertical-align: middle; width: 14px; height: 3px; margin: 0 6px 1px 14px; border-radius: 2px; }
.ff-lm-key:first-child { margin-left: 0; }
.ff-lm-key--1 { background: var(--ff-blue); }
.ff-lm-key--2 { background: var(--ff-society); }
.ff-lm-key--3 { width: 9px; height: 9px; background: rgba(242, 173, 52, .45); }
.ff-lm-results { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 12px; }
.ff-lm-result {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 12px; font-size: 11px; line-height: 1.3;
  transition: opacity .45s ease 1.2s, transform .55s cubic-bezier(.22, .9, .3, 1) 1.2s;
}
.ff-lm-result + .ff-lm-arrow + .ff-lm-result { transition-delay: 1.45s; }
.ff-lm-result strong { font-size: 12.5px; color: var(--ff-ink); }
.ff-lm-result small { font-size: 11.5px; color: var(--ff-muted); }
.ff-lm-result--amber { background: #fff8e8; }
.ff-lm-result--blue { background: #eff5ff; }
.ff-lm.is-armed .ff-lm-card:not(.is-done) .ff-lm-result { opacity: 0; transform: translateY(8px); }
.ff-lm-arrow { color: var(--ff-faint); display: grid; }
.ff-lm.is-live .ff-lm-arrow { animation: ff-lm-nudge 1.8s ease-in-out infinite; }
@keyframes ff-lm-nudge { 50% { transform: translateX(4px); } }

/* The lines: a soft glow, a quiet base, and a gradient dash that flows from card to card. */
.ff-lm-link { transition: opacity .3s ease; }
.ff-lm-link:not(.is-on) { opacity: 0; }
.ff-lm-link path { fill: none; stroke-linecap: round; }
.ff-lm-link-glow { stroke: rgba(31, 94, 255, .10); stroke-width: 10; opacity: 0; transition: opacity .6s ease; }
.ff-lm-link-base { stroke: #c9d8ff; stroke-width: 2; }
.ff-lm-link-dash { stroke: url(#ffLmFlow); stroke-width: 2.4; stroke-dasharray: 6 16; opacity: 0; transition: opacity .6s ease; }
.ff-lm-link.is-flowing .ff-lm-link-glow, .ff-lm-link.is-flowing .ff-lm-link-dash { opacity: 1; }
.ff-lm.is-live .ff-lm-link-dash { animation: ff-lm-flow 7s linear infinite; }
@keyframes ff-lm-flow { to { stroke-dashoffset: -220; } }
.ff-lm-pulse { fill: #fff; stroke: var(--ff-blue); stroke-width: 2.5; opacity: 0; filter: drop-shadow(0 0 6px rgba(31, 94, 255, .6)); }
.ff-lm.is-paused .ff-lm-link-dash, .ff-lm.is-paused .ff-lm-arrow { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ff-lm-link-dash, .ff-lm-arrow, .ff-lm-pill.is-landed { animation: none !important; }
}

/* Under 1100px the model goes under the copy, at full width, so it never squeezes into a column. */
@media (max-width: 1100px) {
  .ff-hero-grid { grid-template-columns: 1fr; }
  .ff-lm { margin-top: 20px; }
}
@media (max-width: 560px) {
  .ff-js .ff-lm:not(.is-staged) { min-height: 820px; }
}

/* =============================================================================
   HOME — THE FIVE FORCES GRID
   =============================================================================
   Desktop mirrors the live layout: four outer forces in the corners with Force 5
   (Internal Pressures) spanning the centre column, because Internal is the one
   the other four act upon. Collapses to a single column on narrow screens.
   ========================================================================== */
.ff-force-word { font-weight: 500; }
.ff-force-word--global   { color: var(--ff-global); }
.ff-force-word--society  { color: var(--ff-society); }
.ff-force-word--industry { color: var(--ff-industry); }
.ff-force-word--human    { color: var(--ff-human); }
.ff-force-word--internal { color: var(--ff-internal); }

.ff-forces-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ff-force-card {
  position: relative; z-index: 1; overflow: hidden;
  background: #fff; border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius); box-shadow: var(--ff-shadow-sm);
  padding: 26px; min-height: 220px;
  transition: transform .18s ease, box-shadow .2s ease, opacity .25s ease, filter .25s ease;
}
.ff-force-card:hover { transform: translateY(-3px); box-shadow: var(--ff-shadow-md); }
.ff-force-card--pos1 { grid-column: 1; grid-row: 1; }   /* Global   — top left */
.ff-force-card--pos2 { grid-column: 3; grid-row: 1; }   /* Society  — top right */
.ff-force-card--pos3 { grid-column: 1; grid-row: 2; }   /* Industry — bottom left */
.ff-force-card--pos4 { grid-column: 3; grid-row: 2; }   /* Human    — bottom right */
.ff-force-card--core { grid-column: 2; grid-row: 1 / span 2; }

.ff-force-texture {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55; pointer-events: none;
}
.ff-force-body { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.ff-force-badge {
  align-self: flex-start; order: -1;
  padding: 5px 12px; border-radius: var(--ff-pill);
  font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.ff-force-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--ff-pill); border: 1px solid currentColor; }
.ff-force-name { font-size: clamp(22px, 2.6vw, 28px); }
.ff-force-copy { color: var(--ff-muted); font-size: 15px; max-width: 44ch; }
.ff-force-arrow {
  margin-top: auto; display: grid; place-items: center; width: 38px; height: 26px;
  border-radius: var(--ff-pill); background: #fff; border: 1px solid var(--ff-line);
  box-shadow: var(--ff-shadow-sm);
}

/* Per-force tinting: the badge, icon ring, name and arrow all take the accent. */
.ff-force-card--global   { --accent: var(--ff-global);   --accent-bg: #eff5ff; }
.ff-force-card--society  { --accent: var(--ff-society);  --accent-bg: #fff8e8; }
.ff-force-card--industry { --accent: var(--ff-industry); --accent-bg: #f4eeff; }
.ff-force-card--human    { --accent: var(--ff-human);    --accent-bg: #fff0f1; }
.ff-force-card--internal { --accent: var(--ff-internal); --accent-bg: #e7f7f5; }
.ff-force-card .ff-force-badge { background: var(--accent-bg); color: var(--accent); }
.ff-force-card .ff-force-icon  { color: var(--accent); background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 26%, transparent); }
.ff-force-card .ff-force-name  { color: var(--accent); }
.ff-force-card .ff-force-arrow { color: var(--accent); }

.ff-capabilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin-top: 4px; }
.ff-capability {
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  padding: 13px 8px; border-radius: 14px;
  background: #fff; border: 1px solid var(--ff-line);
  font-size: 11.5px; font-weight: 500; color: var(--ff-ink); line-height: 1.25;
}
.ff-capability svg { color: var(--accent); }
.ff-dimensions {
  display: grid; gap: 3px; text-align: center; margin-top: 6px;
  padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--ff-line);
  font-size: 13.5px; font-weight: 700; color: var(--ff-ink);
}

/* --- The force map (assets/js/force-map.js): a wire from each outer force into the core, in its colour.
   The wires draw in once; pointing at a force (or its name in the sentence above) lights its wire, sets the
   core's ring to that colour and steps the other forces back. Wires only in the 3-column layout. --- */
@media (min-width: 1001px) { .ff-forces-grid { column-gap: 56px; } }
.ff-fm-lines { display: none; }
.ff-forces-grid.is-wired .ff-fm-lines {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none;
}
.ff-fm-wire path { fill: none; stroke: var(--wire); stroke-linecap: round; }
.ff-fm-trace {
  stroke-opacity: .38; stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s cubic-bezier(.65, 0, .35, 1) calc(var(--wire-i) * 150ms), stroke-opacity .25s ease, stroke-width .25s ease;
}
.ff-fm-flow { stroke-width: 3; stroke-dasharray: 2 6; opacity: 0; transition: opacity .25s ease; }
.ff-fm-port { fill: #fff; stroke: var(--wire); stroke-width: 2; transition: opacity .3s ease calc(var(--wire-i) * 150ms + .8s); }
.ff-forces-grid.is-armed:not(.is-drawn) .ff-fm-trace { stroke-dashoffset: 100; }
.ff-forces-grid.is-armed:not(.is-drawn) .ff-fm-port { opacity: 0; }
.ff-fm-wire.is-focus .ff-fm-trace { stroke-opacity: .9; stroke-width: 2.5; }
.ff-fm-wire.is-focus .ff-fm-flow { opacity: 1; animation: ff-fm-flow .6s linear infinite; }
@keyframes ff-fm-flow { to { stroke-dashoffset: -16; } }
.ff-forces-grid[data-focus] .ff-force-card[data-force]:not(.is-focus) { opacity: .5; filter: saturate(.55); }
.ff-force-card.is-focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), var(--ff-shadow-md); }
.ff-forces-grid[data-focus] .ff-force-card--core {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 55%, transparent), 0 22px 54px -16px color-mix(in srgb, var(--focus) 45%, transparent);
}
.ff-force-word { border-radius: 4px; text-decoration: underline 2px transparent; text-underline-offset: 5px; transition: text-decoration-color .2s ease; }
.ff-force-word.is-focus { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .ff-fm-flow { animation: none !important; } }

@media (max-width: 1000px) {
  .ff-forces-grid { grid-template-columns: 1fr 1fr; }
  .ff-force-card--pos1, .ff-force-card--pos2, .ff-force-card--pos3, .ff-force-card--pos4 { grid-column: auto; grid-row: auto; }
  .ff-force-card--core { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 620px) { .ff-forces-grid { grid-template-columns: 1fr; } }

/* =============================================================================
   HOME — ARCHETYPES · STEPS · GAP · FAQ
   ========================================================================== */
/* Two per row on desktop, matching the live layout. */
.ff-archetype-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .ff-archetype-grid { grid-template-columns: 1fr; } }
.ff-archetype { display: flex; align-items: center; gap: 20px; }
.ff-archetype-figure { width: 58px; height: auto; flex: 0 0 auto; opacity: .9; }
.ff-archetype-name { font-size: 20px; }
.ff-archetype-trait { color: var(--ff-blue); font-size: 14px; font-weight: 500; margin-top: 5px; }
/* Each card links to its archetype page (#1104 C1, D1): `a.ff-card` is block-level, so the flex row is restated. */
.ff-archetype-grid > li { display: flex; }
a.ff-card.ff-archetype { display: flex; flex: 1; }
.ff-archetype-more { text-align: center; margin-top: 28px; }
/* /thank-you: the six archetypes under "While you wait" (#1104 D1). */
.ff-thankyou-archetypes { margin-top: 56px; }
.ff-thankyou-archetypes .ff-lede { margin-bottom: 24px; }
.ff-thankyou-archetypes .ff-archetype-grid { text-align: left; }
/* A page that shows "Powered by Sapience" beside its own small line (/canvas, #1104 E1). */
.ff-page-eyebrows { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.ff-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.ff-step-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 30px 28px 60px; border-radius: var(--ff-radius);
  border: 1px solid var(--ff-line); box-shadow: var(--ff-shadow-sm); background: #fff;
}
.ff-step-card--1 { background: linear-gradient(170deg, #f4f8ff 0%, #fff 62%); }
.ff-step-card--2 { background: linear-gradient(170deg, #fdf3ff 0%, #fff 62%); }
.ff-step-card--3 { background: linear-gradient(170deg, #eefaf2 0%, #fff 62%); }
.ff-step-title { font-size: 24px; }
.ff-step-body { color: var(--ff-muted); font-size: 15.5px; }
.ff-step-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-step-pills li {
  padding: 7px 15px; border-radius: var(--ff-pill); background: #fff;
  border: 1px solid var(--ff-line); font-size: 13px; color: var(--ff-body);
}
.ff-step-cta { align-self: flex-start; }
.ff-step-num { position: absolute; right: 26px; bottom: 22px; font-size: 26px; font-weight: 700; color: var(--ff-ink); }

/* Three per row on desktop (matching the live layout's 3 + 3), not auto-fit —
   auto-fit gave a lopsided 4 + 2 at container width. */
.ff-gap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .ff-gap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ff-gap-grid { grid-template-columns: 1fr; } }
.ff-gap-card { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 34px 22px; }
.ff-gap-icon {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: var(--ff-pill);
  color: var(--ff-blue-bright); background: var(--ff-bg-blue);
  box-shadow: 0 0 0 8px rgba(0, 125, 252, .05);
}
.ff-gap-name { font-size: 19px; }

.ff-faq { border: 1px solid var(--ff-line); border-radius: var(--ff-radius); background: #fff; box-shadow: var(--ff-shadow-sm); overflow: hidden; }
.ff-faq-item + .ff-faq-item { border-top: 1px solid var(--ff-line); }
.ff-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 26px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--ff-ink); font-size: 16px;
}
.ff-faq-q::-webkit-details-marker { display: none; }
.ff-faq-q::after { content: "+"; color: var(--ff-faint); font-size: 22px; font-weight: 400; line-height: 1; transition: transform .2s ease; }
.ff-faq-item[open] .ff-faq-q::after { content: "−"; color: var(--ff-blue); }
.ff-faq-a { padding: 0 26px 22px; color: var(--ff-muted); font-size: 15.5px; }

/* =============================================================================
   INNER PAGES — audit · assessment · contact · centered
   ========================================================================== */
.ff-page-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.ff-page-head + .ff-container .ff-prose { padding-top: 8px; }

.ff-audit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 20px; padding-bottom: 80px; }
a.ff-audit-card { display: flex; flex-direction: column; gap: 14px; padding: 34px 30px; }
.ff-audit-card-img { width: min(100%, 233px); height: auto; margin: 0 auto 6px; filter: grayscale(1); }  /* grey, as on Framer */
.ff-audit-card-title { font-size: 23px; }
.ff-audit-card-body { color: var(--ff-muted); font-size: 15.5px; }
.ff-audit-card-cta { color: var(--ff-blue); font-size: 17px; }
@media (max-width: 1199px) {  /* Framer's tablet cards: stacked, no illustration, left-aligned, with a "Start Audit" link */
  .ff-audit-grid { grid-template-columns: 1fr; max-width: 800px; }
  .ff-audit-card-img { display: none; }
  a.ff-audit-card { padding: 22px 24px; }
  .ff-audit-card-title { font-size: 20px; }
}
@media (max-width: 809px) {  /* ... and on phones the text is centred */
  .ff-audit-card { text-align: center; }
}

.ff-assessment-head { text-align: center; margin-bottom: 28px; }
.ff-assessment-title { font-size: clamp(28px, 4vw, 42px); margin-bottom: 12px; }
.ff-assessment-head .ff-eyebrow { margin-bottom: 14px; }   /* "Powered by Sapience" above the heading (#1104 E1) */
.ff-assessment-sibling { text-align: center; margin-top: 22px; }
.ff-assessment-sibling a { color: var(--ff-blue); font-size: 15px; }

.ff-centered-shell { padding-top: calc(var(--ff-nav-h) + 90px); padding-bottom: 110px; text-align: center; }
.ff-centered-actions { margin-top: 30px; }

.ff-contact-shell { padding-bottom: 88px; }
.ff-contact-card { padding: clamp(28px, 4vw, 44px); }
.ff-contact-heading { font-size: 23px; margin-bottom: 24px; }
.ff-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ff-field { display: flex; flex-direction: column; gap: 7px; }
.ff-field--wide, .ff-form-actions { grid-column: 1 / -1; }
.ff-label { font-size: 14px; font-weight: 500; color: var(--ff-ink); }
.ff-label span { color: var(--ff-human); }
.ff-input {
  font: inherit; font-size: 15.5px; color: var(--ff-ink);
  padding: 12px 15px; border-radius: 13px;
  border: 1px solid var(--ff-line-strong); background: var(--ff-bg-soft);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ff-input:focus { outline: none; background: #fff; border-color: var(--ff-blue); box-shadow: 0 0 0 3px rgba(31, 94, 255, .14); }
.ff-input:user-invalid { border-color: var(--ff-human); }
textarea.ff-input { resize: vertical; min-height: 130px; }
.ff-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ff-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.ff-form-status { font-size: 14.5px; color: var(--ff-muted); }
.ff-form-status.is-ok { color: #16a34a; }
.ff-form-status.is-error { color: var(--ff-human); }
@media (max-width: 640px) { .ff-form { grid-template-columns: 1fr; } }
/* Sent: the confirmation takes the form's place (#1010 C2). */
.ff-form-sent {
  display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-radius: 16px;
  background: #eefaf2; color: #14532d; font-size: 17px; font-weight: 500; line-height: 1.45;
}
.ff-form-sent:focus { outline: none; }
.ff-form-sent-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #16a34a; color: #fff; }

/* The privacy line under each form and assessment (#1010 D4). */
.ff-consent { margin-top: 18px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--ff-faint); }
.ff-consent a { color: var(--ff-blue); text-decoration: underline; text-underline-offset: 3px; }
.ff-form .ff-consent { grid-column: 1 / -1; margin-top: 0; text-align: left; }

/* /thank-you: what to do while the report is written (#1010 C1). */
.ff-next-step { margin-top: 44px; padding: clamp(26px, 4vw, 40px); text-align: left; }
.ff-next-step-title { font-size: 24px; margin-bottom: 10px; }
.ff-next-step p { color: var(--ff-muted); }
.ff-next-step .ff-next-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 22px; }

/* Scroll reveals (assets/js/reveal.js). Nothing hides until the script has marked <html class="ff-reveal">,
   and a printed page shows every section, revealed or not. */
@media not print {
  .ff-reveal [data-reveal], .ff-reveal [data-reveal-item] {
    transition: opacity .6s ease-out, transform .7s cubic-bezier(.22, .9, .3, 1);
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
  }
  .ff-reveal [data-reveal]:not(.is-revealed), .ff-reveal [data-reveal-item]:not(.is-revealed) { opacity: 0; transform: translateY(18px); }
}

/* Narrow screens: keep the three hero steps on ONE row so the dashed connectors
   between them still join adjacent steps. Wrapping left them dangling. */
@media (max-width: 620px) {
  .ff-hero-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
  .ff-hero-step { width: auto; }
  .ff-hero-step + .ff-hero-step::before { left: -14px; width: 14px; top: 20px; }
  .ff-hero-step-num { width: 40px; height: 40px; font-size: 14px; }
  .ff-hero-step-label { font-size: 12.5px; }
}

/* ---------- Page banner image (about, canvas) --------------------------- */
.ff-banner { max-width: calc(1000px + 2 * var(--ff-gutter)); margin-block: 8px 44px; }
.ff-banner img { display: block; width: 100%; height: auto; border-radius: 22px; }

/* ---------- Previous / next article ------------------------------------- */
.ff-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; max-width: 1000px; padding-bottom: 72px; font-weight: 500; }
.ff-pager a { color: var(--ff-blue); }
.ff-pager a:hover { text-decoration: underline; }
.ff-pager-next { margin-left: auto; text-align: right; }

/* ---------- The Five Forces model wheel (/forces) ----------------------- */
/* Desktop: a 2x2 grid of force boxes with the wheel centred over it, as on Framer. Under 900px the wheel sits on
   top and the boxes stack below it. Force accent colours are the wheel's own (they differ from the card accents). */
.ff-wheel-section { padding-block: clamp(40px, 6vw, 96px) clamp(56px, 8vw, 112px); }
.ff-wheel-head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.ff-wheel-title { font-size: clamp(30px, 4.6vw, 54px); margin-block: 20px 16px; color: #36445e; }
.ff-wheel-head .ff-lede { max-width: 80ch; color: #36445e; }
.ff-wheel-head .ff-lede strong { color: #2b3a55; }

.ff-wheel {
  --wheel-green: #2ea64f; --wheel-purple: #7c3fc9; --wheel-amber: #f5b400; --wheel-red: #e5392f;
  border: 1px solid var(--ff-line); border-radius: 56px; padding: clamp(14px, 1.8vw, 26px);
  background: linear-gradient(180deg, #fdfdf8, #fcf8fd); box-shadow: var(--ff-shadow-sm);
}
.ff-wheel-grid {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px);
  aspect-ratio: 1.72;
}
.ff-wheel-force {
  background: #fff; border: 1px solid var(--ff-line); border-radius: clamp(24px, 3vw, 40px);
  padding: clamp(18px, 2.4vw, 34px); display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
}
.ff-wheel-force--global, .ff-wheel-force--society { padding-right: 47%; }
.ff-wheel-force--industry, .ff-wheel-force--human { padding-left: 47%; }
.ff-wheel-force--society, .ff-wheel-force--human { flex-direction: column-reverse; }
.ff-wheel-force-name { display: flex; align-items: center; gap: 12px; font-size: clamp(20px, 2.3vw, 30px); letter-spacing: 0; white-space: nowrap; color: inherit; }  /* inherit the box's force colour; the global h3 rule would make it ink */
.ff-wheel-force-name .ff-icon { flex: none; width: clamp(26px, 2.8vw, 38px); height: auto; }
.ff-wheel-force--industry .ff-wheel-force-name, .ff-wheel-force--human .ff-wheel-force-name { justify-content: flex-end; }
.ff-wheel-force--global { color: var(--wheel-green); }
.ff-wheel-force--industry { color: var(--wheel-purple); }
.ff-wheel-force--society { color: var(--wheel-amber); }
.ff-wheel-force--human { color: var(--wheel-red); }
.ff-wheel-items { display: grid; gap: clamp(8px, 1.1vw, 16px); color: #1f2b40; font-size: clamp(13px, 1.25vw, 17px); }
.ff-wheel-items li { position: relative; padding-left: 18px; line-height: 1.3; }
.ff-wheel-items li::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: #36445e; }

.ff-wheel-dial {
  position: absolute; left: 50%; top: 50%; width: 50%; transform: translate(-50%, -50%); overflow: visible;
  filter: drop-shadow(0 10px 24px rgba(20, 30, 60, .10));
}
.ff-wheel-seg { stroke: #d9dde8; stroke-width: 1.5; }
.ff-wheel-label { font: 700 17px/1.2 Roboto, system-ui, sans-serif; fill: #1c2740; }
.ff-wheel-hub-ring { fill: #eef2fb; stroke: #dbe3f3; stroke-width: 2; }
.ff-wheel-hub { fill: #fff; }
.ff-wheel-badge { fill: #1a73ff; }
.ff-wheel-badge-text { font: 700 13px Roboto, system-ui, sans-serif; fill: #fff; }
.ff-wheel-core-name { font: 500 17px Roboto, system-ui, sans-serif; fill: #1a73ff; }
.ff-wheel-core-strategy { font: 700 22px Roboto, system-ui, sans-serif; fill: #1c2740; }
.ff-wheel-core-dim { font: 700 11px Roboto, system-ui, sans-serif; fill: #1c2740; }

/* Framer's tablet and phone wheel (<= 1199px): one small dial in a card, the four force names in its corners (other
   wording, no lists), "AI Strategy" alone in the hub. The words for this side are `phone_*` in the page data. */
@media (max-width: 1199px) {
  .ff-wheel { max-width: 380px; margin-inline: auto; padding: 10px; border-radius: 28px; }
  .ff-wheel-grid { display: block; aspect-ratio: auto; }
  .ff-wheel-dial { position: static; transform: none; width: 100%; max-width: none; margin: 0; filter: none; }
  .ff-wheel-label { font-size: 21px; }
  .ff-wheel-core-label { font-size: 18px; }
  .ff-wheel-force {
    position: absolute; z-index: 1; width: 38%; padding: 6px 8px; background: none; border: 0; border-radius: 0;
  }
  .ff-wheel-force--global { top: 0; left: 0; }
  .ff-wheel-force--industry { top: 0; right: 0; text-align: right; }
  .ff-wheel-force--society { bottom: 0; left: 0; }
  .ff-wheel-force--human { bottom: 0; right: 0; text-align: right; }
  .ff-wheel-force-name { display: block; font-size: 12px; font-weight: 700; line-height: 1.25; white-space: normal; }
  .ff-wheel-force-name .ff-icon { display: none; }
}