/* ==========================================================================
   Falmera Design System — tokens, base, components, marketing shell
   --------------------------------------------------------------------------
   Opt-in: everything below the token block is scoped to `.fm` (put it on
   <body>). Pages that do not opt in are unaffected, so the existing Ascendra
   pages and the admin dashboard keep their current styling until each page is
   rebuilt. Adjust brand values in the TOKENS block only.
   ========================================================================== */

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  /* Brand palette (starting values from the approved blueprint; tune against
     the approved reference artwork). *-rgb channels allow alpha variants. */
  --fm-sand: #F3C49F;      --fm-sand-rgb: 243 196 159;
  --fm-cream: #FFF1E4;     --fm-cream-rgb: 255 241 228;
  --fm-navy: #10162A;      --fm-navy-rgb: 16 22 42;
  --fm-blue: #086BFF;      --fm-blue-rgb: 8 107 255;
  --fm-violet: #6727E8;    --fm-violet-rgb: 103 39 232;
  --fm-magenta: #C326D9;   --fm-magenta-rgb: 195 38 217;
  --fm-red: #FF3158;       --fm-red-rgb: 255 49 88;

  /* Derived neutrals */
  --fm-cream-soft: #FFF8F1;   /* lightest raised surface */
  --fm-sand-soft: #F8DCC3;    /* gentle band between sand and cream */
  --fm-navy-raised: #1B2340;  /* raised surface on navy */
  --fm-ink-muted: #3E4560;    /* body copy on cream AND sand (AA) */
  --fm-ink-subtle: #5A6078;   /* captions on cream only (AA on cream, not sand) */
  --fm-cream-muted: #D9CCC1;  /* secondary text on navy (AA) */
  --fm-blue-ink: #0A4BC2;     /* blue for small text/links on cream and sand (AA) */

  /* Brand gradient */
  --fm-gradient: linear-gradient(90deg, var(--fm-blue) 0%, var(--fm-violet) 42%, var(--fm-magenta) 68%, var(--fm-red) 100%);
  /* Display-text gradient: deeper stops of the same hues (matches the approved
     reference) so every stop keeps >= 3:1 on cream AND sand. Large text only. */
  --fm-gradient-text: linear-gradient(90deg, #0A5BE0 0%, var(--fm-violet) 40%, #A61FC0 70%, #C4123F 100%);
  /* Lighter stops for gradient text on navy surfaces (>= 3:1 on navy). */
  --fm-gradient-text-on-dark: linear-gradient(90deg, #5C9DFF 0%, #A57BFF 40%, #E46CF5 70%, #FF7A92 100%);
  /* Brand CTA fill: the brand stops, ending on the deep red (#C4123F) used
     for gradient text, so a white label clears 4.5:1 at every point
     (lowest 4.57:1 at magenta). White on --fm-red is only 3.6:1. */
  --fm-gradient-cta: linear-gradient(90deg, var(--fm-blue) 0%, var(--fm-violet) 42%, var(--fm-magenta) 68%, #C4123F 100%);

  /* Semantic roles (light/default surface) */
  --fm-bg: var(--fm-cream);
  --fm-surface: var(--fm-cream-soft);
  --fm-surface-alt: var(--fm-sand);
  --fm-text: var(--fm-navy);
  --fm-text-muted: var(--fm-ink-muted);
  --fm-text-subtle: var(--fm-ink-subtle);
  --fm-border: rgb(var(--fm-navy-rgb) / 0.12);
  --fm-border-strong: rgb(var(--fm-navy-rgb) / 0.28);
  --fm-focus: var(--fm-navy);

  /* Typography — Instrument Sans for display (large and light, slightly
     narrowed), Plus Jakarta Sans for body and UI, IBM Plex Mono for labels,
     numbers and indexes. All SIL OFL. Swap families here; components only
     reference these tokens. */
  --fm-font-display: 'Instrument Sans', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fm-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fm-font-label: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fm-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fm-weight-display: 500;
  --fm-weight-heading: 500;
  --fm-weight-subheading: 600;
  --fm-stretch-display: 95%;

  /* Fluid type scale (min @ 360px → max @ 1440px) */
  --fm-text-xs: 0.75rem;
  --fm-text-sm: 0.875rem;
  --fm-text-base: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --fm-text-lg: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --fm-text-xl: clamp(1.25rem, 1.13rem + 0.56vw, 1.625rem);
  --fm-h3: clamp(1.375rem, 1.2rem + 0.83vw, 1.875rem);
  --fm-h2: clamp(2rem, 1.5rem + 2.222vw, 3.5rem);           /* 32 → 56 */
  --fm-h1: clamp(2.75rem, 1.833rem + 4.074vw, 5.5rem);      /* 44 → 88 */
  --fm-display: clamp(3.5rem, 2.333rem + 5.185vw, 7rem);    /* 56 → 112 */
  --fm-hero: clamp(2.875rem, 1.833rem + 4.63vw, 6rem);      /* 46 → 96 */

  --fm-leading-tight: 1.02;
  --fm-leading-snug: 1.15;
  --fm-leading-body: 1.6;
  --fm-tracking-display: -0.045em;
  --fm-tracking-heading: -0.035em;
  --fm-tracking-label: 0.08em;

  /* Spacing (4px base) */
  --fm-space-1: 0.25rem;  --fm-space-2: 0.5rem;   --fm-space-3: 0.75rem;
  --fm-space-4: 1rem;     --fm-space-5: 1.5rem;   --fm-space-6: 2rem;
  --fm-space-7: 2.5rem;   --fm-space-8: 3rem;     --fm-space-9: 4rem;
  --fm-space-10: 5rem;    --fm-space-11: 6rem;    --fm-space-12: 8rem;
  --fm-section-y: clamp(4rem, 2.67rem + 5.93vw, 8rem);

  /* Layout */
  --fm-container: 1240px;
  --fm-container-narrow: 760px;
  --fm-gutter: clamp(1rem, 0.5rem + 2.22vw, 2.5rem);
  --fm-header-h: 72px;

  /* Shape & depth */
  --fm-radius-sm: 8px;
  --fm-radius-md: 14px;
  --fm-radius-lg: 24px;
  --fm-radius-pill: 999px;
  --fm-shadow-sm: 0 1px 2px rgb(var(--fm-navy-rgb) / 0.06), 0 2px 8px rgb(var(--fm-navy-rgb) / 0.04);
  --fm-shadow-md: 0 2px 6px rgb(var(--fm-navy-rgb) / 0.06), 0 12px 32px rgb(var(--fm-navy-rgb) / 0.08);
  --fm-shadow-lg: 0 4px 12px rgb(var(--fm-navy-rgb) / 0.06), 0 24px 64px rgb(var(--fm-navy-rgb) / 0.12);

  /* Motion */
  --fm-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fm-dur-fast: 160ms;
  --fm-dur: 280ms;
  --fm-dur-slow: 600ms;
}

/* ── BASE (scoped) ──────────────────────────────────────────────────────── */
.fm {
  margin: 0;
  background: var(--fm-bg);
  color: var(--fm-text);
  font-family: var(--fm-font-body);
  font-size: var(--fm-text-base);
  line-height: var(--fm-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Element defaults use :where() (zero specificity) so any component class
   always overrides them. */
.fm *, .fm *::before, .fm *::after { box-sizing: border-box; }
.fm [hidden] { display: none !important; }
:where(.fm) :where(img, svg, video, canvas) { display: block; max-width: 100%; height: auto; }
:where(.fm) :where(h1, h2, h3, h4) {
  margin: 0;
  font-family: var(--fm-font-display);
  font-weight: var(--fm-weight-heading);
  color: var(--fm-text);
  letter-spacing: var(--fm-tracking-display);
  line-height: var(--fm-leading-snug);
  text-wrap: balance;
}
:where(.fm) h1, .fm-h1 { font-size: var(--fm-h1); line-height: var(--fm-leading-tight); font-stretch: var(--fm-stretch-display); }
:where(.fm) h2, .fm-h2 { font-size: var(--fm-h2); line-height: 1.05; letter-spacing: var(--fm-tracking-heading); font-stretch: var(--fm-stretch-display); }
:where(.fm) h3, .fm-h3 { font-size: var(--fm-h3); font-weight: var(--fm-weight-subheading); letter-spacing: -0.02em; }
:where(.fm) h4, .fm-h4 { font-size: var(--fm-text-xl); font-weight: var(--fm-weight-subheading); letter-spacing: -0.01em; }
/* Heading-size utilities: visual size independent of heading level */
.fm-h1, .fm-h2, .fm-h3, .fm-h4 { font-family: var(--fm-font-display); font-weight: var(--fm-weight-heading); color: var(--fm-text); }
.fm-h3, .fm-h4 { font-weight: var(--fm-weight-subheading); }
.fm-h1 { letter-spacing: var(--fm-tracking-display); }
.fm-h2 { letter-spacing: var(--fm-tracking-heading); }
:where(.fm) p { margin: 0; text-wrap: pretty; }
:where(.fm) a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.fm ::selection { background: rgb(var(--fm-violet-rgb) / 0.22); }

/* Visible, consistent focus (navy on light surfaces, cream on navy) */
.fm :focus { outline: none; }
.fm :focus-visible {
  outline: 2px solid var(--fm-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── TYPOGRAPHY HELPERS ─────────────────────────────────────────────────── */
.fm-display { font-size: var(--fm-display); line-height: 0.98; letter-spacing: var(--fm-tracking-display); font-weight: var(--fm-weight-display); font-stretch: var(--fm-stretch-display); }
:where(.fm) h1 { font-weight: var(--fm-weight-display); }
/* Mono accent voice: labels, step indexes, durations, captions. Never body copy. */
.fm-mono { font-family: var(--fm-font-mono); font-size: var(--fm-text-xs); font-weight: 500; letter-spacing: var(--fm-tracking-label); text-transform: uppercase; }
.fm-lead { font-size: var(--fm-text-lg); color: var(--fm-text-muted); max-width: 62ch; }
.fm-muted { color: var(--fm-text-muted); }
.fm-subtle { color: var(--fm-text-subtle); font-size: var(--fm-text-sm); }
.fm-eyebrow {
  display: inline-flex; align-items: center; gap: var(--fm-space-2);
  font-family: var(--fm-font-label);
  font-size: var(--fm-text-xs);
  font-weight: 500;
  letter-spacing: var(--fm-tracking-label);
  text-transform: uppercase;
  color: var(--fm-text);
}
.fm-eyebrow--accent { color: var(--fm-blue-ink); }
.fm-surface-navy .fm-eyebrow--accent { color: #8FB8FF; }
.fm-gradient-text {
  background: var(--fm-gradient-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; /* full gradient on each line */
  color: transparent;
  /* Fallback colour if background-clip:text is unsupported */
  -webkit-text-fill-color: transparent;
}
.fm-surface-navy .fm-gradient-text { background-image: var(--fm-gradient-text-on-dark); }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .fm-gradient-text { color: var(--fm-violet); -webkit-text-fill-color: currentColor; }
}

/* ── LAYOUT ─────────────────────────────────────────────────────────────── */
.fm-container { width: 100%; max-width: calc(var(--fm-container) + 2 * var(--fm-gutter)); margin-inline: auto; padding-inline: var(--fm-gutter); }
.fm-container--narrow { max-width: calc(var(--fm-container-narrow) + 2 * var(--fm-gutter)); }
.fm-section { padding-block: var(--fm-section-y); }
/* In-page anchors (#how, #faq…) land below the sticky header */
.fm main section[id] { scroll-margin-top: var(--fm-header-h); }
.fm-section--tight { padding-block: calc(var(--fm-section-y) * 0.6); }
.fm-stack { display: flex; flex-direction: column; gap: var(--fm-stack-gap, var(--fm-space-5)); }
.fm-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fm-cluster-gap, var(--fm-space-4)); }
.fm-grid { display: grid; gap: var(--fm-grid-gap, var(--fm-space-5)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fm-grid-min, 280px)), 1fr)); }
.fm-section-head { display: flex; flex-direction: column; gap: var(--fm-space-4); max-width: 46rem; margin-bottom: var(--fm-space-9); }

/* Surfaces — each resets the semantic roles so components adapt */
.fm-surface-cream { --fm-bg: var(--fm-cream); background: var(--fm-cream); }
.fm-surface-sand {
  --fm-bg: var(--fm-sand);
  --fm-text-subtle: var(--fm-ink-muted); /* subtle grey fails AA on sand */
  --fm-border: rgb(var(--fm-navy-rgb) / 0.16);
  background: var(--fm-sand);
}
.fm-surface-warm {
  --fm-bg: var(--fm-sand-soft);
  --fm-text-subtle: var(--fm-ink-muted);
  background: linear-gradient(180deg, var(--fm-cream) 0%, var(--fm-sand-soft) 55%, var(--fm-sand) 100%);
}
.fm-surface-navy {
  --fm-bg: var(--fm-navy);
  --fm-surface: var(--fm-navy-raised);
  --fm-text: var(--fm-cream);
  --fm-text-muted: var(--fm-cream-muted);
  --fm-text-subtle: var(--fm-cream-muted);
  --fm-border: rgb(var(--fm-cream-rgb) / 0.14);
  --fm-border-strong: rgb(var(--fm-cream-rgb) / 0.32);
  --fm-focus: var(--fm-cream);
  background: var(--fm-navy);
  color: var(--fm-text);
}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.fm-btn {
  --fm-btn-bg: transparent; --fm-btn-fg: var(--fm-text); --fm-btn-border: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fm-space-2);
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--fm-btn-border);
  border-radius: var(--fm-radius-pill);
  background: var(--fm-btn-bg);
  color: var(--fm-btn-fg);
  font-family: var(--fm-font-body);
  font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: transform var(--fm-dur) var(--fm-ease), box-shadow var(--fm-dur) var(--fm-ease), background-color var(--fm-dur) var(--fm-ease), border-color var(--fm-dur) var(--fm-ease);
}
.fm-btn:hover { transform: translateY(-1px); }
.fm-btn:active { transform: translateY(0); }
.fm-btn[disabled], .fm-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.fm-btn svg { width: 1.125em; height: 1.125em; flex: none; }

/* Primary: navy fill, gradient halo on hover (white text keeps AAA contrast) */
.fm-btn--primary { --fm-btn-bg: var(--fm-navy); --fm-btn-fg: #FFFFFF; box-shadow: var(--fm-shadow-sm); }
.fm-btn--primary:hover {
  box-shadow:
    -10px 8px 24px -6px rgb(var(--fm-blue-rgb) / 0.35),
    0 10px 28px -6px rgb(var(--fm-violet-rgb) / 0.35),
    10px 8px 24px -6px rgb(var(--fm-red-rgb) / 0.3);
}

/* Brand: gradient CTA with glow (approved reference). Use for the main
   conversion action; keep one per view. */
.fm-btn--brand {
  --fm-btn-fg: #FFFFFF;
  background: var(--fm-gradient-cta);
  border: 0;
  box-shadow:
    -8px 6px 20px -8px rgb(var(--fm-blue-rgb) / 0.55),
    8px 6px 20px -8px rgb(var(--fm-red-rgb) / 0.5);
}
.fm-btn--brand:hover {
  box-shadow:
    -12px 10px 30px -8px rgb(var(--fm-blue-rgb) / 0.6),
    0 12px 32px -8px rgb(var(--fm-violet-rgb) / 0.45),
    12px 10px 30px -8px rgb(var(--fm-red-rgb) / 0.55);
}

/* Secondary: outline */
.fm-btn--secondary { --fm-btn-fg: var(--fm-text); --fm-btn-border: var(--fm-border-strong); }
.fm-btn--secondary:hover { --fm-btn-border: var(--fm-text); background: rgb(var(--fm-navy-rgb) / 0.04); }
.fm-surface-navy .fm-btn--secondary:hover { background: rgb(var(--fm-cream-rgb) / 0.06); }

/* Gradient-border: cream fill, brand gradient edge, navy text */
.fm-btn--gradient {
  --fm-btn-fg: var(--fm-navy);
  border: 2px solid transparent;
  background:
    linear-gradient(var(--fm-cream-soft), var(--fm-cream-soft)) padding-box,
    var(--fm-gradient) border-box;
}
.fm-btn--gradient:hover { box-shadow: var(--fm-shadow-md); }

/* On navy surfaces the primary inverts to cream */
.fm-surface-navy .fm-btn--primary { --fm-btn-bg: var(--fm-cream); --fm-btn-fg: var(--fm-navy); }

.fm-btn--ghost { --fm-btn-fg: var(--fm-text); padding-inline: var(--fm-space-2); min-height: 44px; }
.fm-btn--ghost:hover { transform: none; text-decoration: underline; text-underline-offset: 0.25em; }
.fm-btn--sm { min-height: 40px; padding: 0.5rem 1.125rem; font-size: var(--fm-text-sm); }
.fm-btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: 1.0625rem; }

/* Text link with animated gradient underline */
.fm-link {
  color: var(--fm-text); font-weight: 600; text-decoration: none;
  background: var(--fm-gradient) no-repeat 0 100% / 0% 2px;
  transition: background-size var(--fm-dur) var(--fm-ease);
  padding-bottom: 2px;
}
.fm-link:hover { background-size: 100% 2px; }

/* ── CARDS & CHIPS ──────────────────────────────────────────────────────── */
.fm-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--fm-space-4);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius-lg);
  background: var(--fm-surface);
  box-shadow: var(--fm-shadow-sm);
  transition: transform var(--fm-dur) var(--fm-ease), box-shadow var(--fm-dur) var(--fm-ease), border-color var(--fm-dur) var(--fm-ease);
}
.fm-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--fm-shadow-lg); border-color: var(--fm-border-strong); }
.fm-card--accent::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--fm-radius-lg) var(--fm-radius-lg) 0 0;
  background: var(--fm-gradient);
}
.fm-card__icon {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--fm-radius-md);
  background: rgb(var(--fm-navy-rgb) / 0.06);
  color: var(--fm-violet);
}
.fm-surface-navy .fm-card__icon { background: rgb(var(--fm-cream-rgb) / 0.08); color: var(--fm-cream); }
.fm-card__icon svg { width: 24px; height: 24px; }

.fm-chip {
  display: inline-flex; align-items: center; gap: var(--fm-space-2);
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius-pill);
  background: rgb(var(--fm-cream-rgb) / 0.6);
  font-size: var(--fm-text-sm); font-weight: 500; color: var(--fm-text);
}
.fm-surface-navy .fm-chip { background: rgb(var(--fm-cream-rgb) / 0.06); }
.fm-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fm-gradient); }

.fm-divider { height: 1px; border: 0; background: var(--fm-border); margin: 0; }
.fm-divider--gradient { height: 2px; background: var(--fm-gradient); opacity: 0.8; }

/* ── FORMS ──────────────────────────────────────────────────────────────── */
.fm-field { display: flex; flex-direction: column; gap: var(--fm-space-2); }
.fm-label { font-size: var(--fm-text-sm); font-weight: 600; color: var(--fm-text); }
.fm-hint { font-size: var(--fm-text-sm); color: var(--fm-text-muted); }
.fm-input, .fm-select, .fm-textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--fm-border-strong);
  border-radius: var(--fm-radius-md);
  background: var(--fm-cream-soft);
  color: var(--fm-navy);
  font: inherit; font-size: 1rem; /* >= 16px prevents iOS zoom */
  transition: border-color var(--fm-dur-fast) ease, box-shadow var(--fm-dur-fast) ease;
}
.fm-textarea { min-height: 140px; resize: vertical; }
.fm-input::placeholder, .fm-textarea::placeholder { color: var(--fm-ink-subtle); opacity: 1; }
.fm-input:hover, .fm-select:hover, .fm-textarea:hover { border-color: var(--fm-navy); }
.fm .fm-input:focus-visible, .fm .fm-select:focus-visible, .fm .fm-textarea:focus-visible {
  outline: none; border-color: var(--fm-blue);
  box-shadow: 0 0 0 3px rgb(var(--fm-blue-rgb) / 0.28);
}
.fm-input[aria-invalid="true"], .fm-textarea[aria-invalid="true"], .fm-select[aria-invalid="true"] { border-color: #C4123A; }
.fm-error { font-size: var(--fm-text-sm); font-weight: 500; color: #B0102F; }

/* ── SHELL: skip link, header frame, footer ─────────────────────────────── */
.fm-skip-link {
  position: absolute; left: var(--fm-space-4); top: -100px; z-index: 1000;
  padding: var(--fm-space-3) var(--fm-space-5);
  border-radius: var(--fm-radius-pill);
  background: var(--fm-navy); color: #FFFFFF; font-weight: 600; text-decoration: none;
}
.fm-skip-link:focus { top: var(--fm-space-4); }
.fm-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Header frame. Navigation content and mobile menu behaviour arrive in
   Phase 04; this provides the sticky bar, logo slot and action slot. */
.fm-header {
  position: sticky; top: 0; z-index: 100;
  background: rgb(var(--fm-cream-rgb) / 0.86);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fm-dur) ease, background-color var(--fm-dur) ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .fm-header { -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); }
}
.fm-header.is-scrolled { border-bottom-color: var(--fm-border); }
.fm-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--fm-space-5); min-height: var(--fm-header-h); }
.fm-header__nav { display: flex; align-items: center; gap: var(--fm-space-6); }
.fm-header__actions { display: flex; align-items: center; gap: var(--fm-space-3); }

/* Logo slot. Renders the approved asset unchanged: no filters, recolouring
   or blend modes are ever applied to .fm-logo img. Height only. */
.fm-logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--fm-text); flex: none; }
.fm-logo img { height: var(--fm-logo-h, 32px); width: auto; }
/* Wordmark stays in the body face so the text logo does not change with the display font */
.fm-logo__fallback { font-family: var(--fm-font-body); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.03em; }

.fm-footer { padding-block: var(--fm-space-10) var(--fm-space-7); }
.fm-footer__top {
  display: grid; gap: var(--fm-space-8);
  grid-template-columns: 1fr;
  padding-bottom: var(--fm-space-9);
  border-bottom: 1px solid var(--fm-border);
}
@media (min-width: 768px) { .fm-footer__top { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.fm-footer__brand { display: flex; flex-direction: column; gap: var(--fm-space-5); max-width: 22rem; }
.fm-footer__heading {
  margin: 0 0 var(--fm-space-4);
  font-family: var(--fm-font-label); font-size: var(--fm-text-xs); font-weight: 500;
  letter-spacing: var(--fm-tracking-label); text-transform: uppercase;
  color: var(--fm-text-muted);
}
.fm-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fm-space-3); }
.fm-footer__list a { color: var(--fm-text); text-decoration: none; font-size: var(--fm-text-sm); }
.fm-footer__list a:hover { text-decoration: underline; }
.fm-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--fm-space-4);
  padding-top: var(--fm-space-6);
  font-size: var(--fm-text-sm); color: var(--fm-text-muted);
}

/* ── NAVIGATION ─────────────────────────────────────────────────────────── */
/* Desktop links show from 1024px; below that a disclosure menu is used. */
.fm-nav { display: none; }
.fm-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(1.25rem, 0.5rem + 1.6vw, 2.5rem); }
.fm-nav__link {
  position: relative; display: inline-block;
  padding-block: 0.5rem;
  color: var(--fm-text); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
}
.fm-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--fm-gradient);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--fm-dur) var(--fm-ease);
}
.fm-nav__link:hover::after, .fm-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.fm-nav__link[aria-current="page"] { font-weight: 700; }
.fm-login-link { color: var(--fm-text); font-size: 0.9375rem; font-weight: 600; text-decoration: none; padding: 0.5rem 0.25rem; }
.fm-login-link:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.fm-header__actions .fm-login-link { display: none; }

.fm-nav-toggle {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--fm-border-strong); border-radius: var(--fm-radius-pill);
  background: transparent; color: var(--fm-text); cursor: pointer;
}
.fm-nav-toggle__bars { position: relative; width: 18px; height: 12px; }
.fm-nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--fm-dur) var(--fm-ease), opacity var(--fm-dur-fast) ease, top var(--fm-dur) var(--fm-ease);
}
.fm-nav-toggle__bars span:nth-child(1) { top: 0; }
.fm-nav-toggle__bars span:nth-child(2) { top: 5px; }
.fm-nav-toggle__bars span:nth-child(3) { top: 10px; }
.fm-nav-toggle[aria-expanded="true"] .fm-nav-toggle__bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.fm-nav-toggle[aria-expanded="true"] .fm-nav-toggle__bars span:nth-child(2) { opacity: 0; }
.fm-nav-toggle[aria-expanded="true"] .fm-nav-toggle__bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

/* Mobile/tablet menu panel: drops below the sticky header; page scroll is never locked */
.fm-mobile-nav {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - var(--fm-header-h));
  max-height: calc(100dvh - var(--fm-header-h));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--fm-cream-soft);
  border-bottom: 1px solid var(--fm-border);
  box-shadow: var(--fm-shadow-lg);
}
.fm-mobile-nav__inner { display: flex; flex-direction: column; gap: var(--fm-space-5); padding-block: var(--fm-space-5) var(--fm-space-7); }
.fm-mobile-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fm-mobile-nav__list a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: var(--fm-space-3) 0;
  border-bottom: 1px solid var(--fm-border);
  color: var(--fm-text); font-size: 1.125rem; font-weight: 600; text-decoration: none;
}
.fm-mobile-nav__list a[aria-current="page"] { color: var(--fm-blue-ink); }
.fm-mobile-nav__actions { display: flex; flex-direction: column; gap: var(--fm-space-3); }
.fm-mobile-nav__actions .fm-btn { width: 100%; }

@media (min-width: 1024px) {
  .fm-nav { display: block; }
  .fm-nav-toggle, .fm-mobile-nav { display: none !important; }
  .fm-header__actions .fm-login-link { display: inline-block; }
}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.fm-hero {
  position: relative;
  padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) clamp(3.5rem, 2rem + 5vw, 6.5rem);
  background: linear-gradient(180deg, var(--fm-cream), var(--fm-sand-soft));
  --fm-text-subtle: var(--fm-ink-muted);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .fm-hero {
    background:
      linear-gradient(100deg, rgb(var(--fm-cream-rgb) / 0.96) 0%, rgb(var(--fm-cream-rgb) / 0.82) 26%, rgb(var(--fm-cream-rgb) / 0.12) 52%, transparent 66%),
      linear-gradient(0deg, var(--fm-sand-soft) 0%, transparent 18%),
      url("../assets/img/hero/hero-v2-1600.webp") center / cover no-repeat;
  }
}
.fm-hero__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); align-items: center; }
.fm-hero__copy { display: flex; flex-direction: column; gap: var(--fm-space-5); max-width: 44rem; }
.fm-hero__title { font-size: var(--fm-hero); line-height: 0.98; letter-spacing: -0.038em; font-weight: var(--fm-weight-display); font-stretch: var(--fm-stretch-display); }
.fm-hero__lead { font-size: var(--fm-text-lg); color: var(--fm-text-muted); max-width: 34rem; }
.fm-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--fm-space-3); padding-top: var(--fm-space-2); }
.fm-hero__benefits {
  list-style: none; margin: 0; padding: var(--fm-space-5) 0 0;
  display: grid; gap: var(--fm-space-4); grid-template-columns: 1fr;
}
@media (min-width: 560px) { .fm-hero__benefits { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--fm-space-7); } }
.fm-benefit { display: flex; align-items: center; gap: var(--fm-space-3); }
.fm-benefit svg { width: 28px; height: 28px; flex: none; color: var(--fm-violet); }
.fm-benefit strong { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--fm-text); line-height: 1.3; }
.fm-benefit span { display: block; font-size: var(--fm-text-sm); color: var(--fm-text-muted); line-height: 1.4; }

/* Reserve the sculpture area on desktop and show its square crop on mobile. */
.fm-hero__visual {
  position: relative; width: 100%; max-width: 640px; margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.fm-hero__visual > picture { position: absolute; inset: 0; }
.fm-hero__visual img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--fm-radius-lg); }
@media (max-width: 1023px) { .fm-hero__visual { max-width: 460px; } }
@media (min-width: 1024px) {
  .fm-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .fm-hero__visual > picture { display: none; }
}

/* Video dialog (only reachable when a real video source is configured) */
.fm-video-dialog { width: min(960px, calc(100vw - 2 * var(--fm-gutter))); padding: 0; border: 0; border-radius: var(--fm-radius-lg); background: var(--fm-navy); box-shadow: var(--fm-shadow-lg); }
.fm-video-dialog::backdrop { background: rgb(var(--fm-navy-rgb) / 0.72); }
.fm-video-dialog video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.fm-video-dialog__close { position: absolute; top: var(--fm-space-3); right: var(--fm-space-3); z-index: 1; }

/* ── SERVICES ───────────────────────────────────────────────────────────── */
.fm-services-grid { display: grid; gap: var(--fm-space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .fm-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fm-services-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fm-service-card { --fm-service-card-padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); padding: var(--fm-service-card-padding); gap: var(--fm-space-3); text-decoration: none; color: inherit; height: 100%; }
.fm-service-card__image {
  display: block; width: calc(100% + 2 * var(--fm-service-card-padding)); max-width: none; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  margin: calc(-1 * var(--fm-service-card-padding)) calc(-1 * var(--fm-service-card-padding)) var(--fm-space-2);
  border-radius: calc(var(--fm-radius-lg) - 1px) calc(var(--fm-radius-lg) - 1px) 0 0;
}
.fm-service-card h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
.fm-service-card p { font-size: var(--fm-text-sm); color: var(--fm-text-muted); flex: 1; }
.fm-service-card__icon { --fm-icon-color: var(--fm-blue); color: var(--fm-icon-color); }
.fm-service-card__icon svg { width: 36px; height: 36px; }
.fm-arrow-ring {
  display: inline-grid; place-items: center; width: 40px; height: 40px; margin-top: var(--fm-space-2);
  border: 1.5px solid currentColor; border-radius: 50%;
  color: var(--fm-icon-color, var(--fm-blue));
  transition: transform var(--fm-dur) var(--fm-ease), background-color var(--fm-dur) var(--fm-ease), color var(--fm-dur) var(--fm-ease);
}
.fm-arrow-ring svg { width: 18px; height: 18px; }
.fm-service-card:hover .fm-arrow-ring { transform: translateX(4px); }
.fm-tone-blue { --fm-icon-color: #0A5BE0; }
.fm-tone-violet { --fm-icon-color: var(--fm-violet); }
.fm-tone-magenta { --fm-icon-color: #A61FC0; }
.fm-tone-red { --fm-icon-color: #C4123F; }

.fm-integrations { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fm-space-3); margin-top: var(--fm-space-7); }
.fm-integrations__label { font-weight: 600; margin-right: var(--fm-space-2); }

/* Detail rows on the services page: media + copy, alternating on desktop */
.fm-service-detail { scroll-margin-top: calc(var(--fm-header-h) + 1rem); }
.fm-service-detail__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 960px) {
  .fm-service-detail__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fm-service-detail--reverse .fm-service-detail__media { order: 2; }
}
.fm-service-detail__copy { display: flex; flex-direction: column; gap: var(--fm-space-5); }
.fm-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fm-space-3); }
.fm-checklist li { position: relative; padding-left: 2rem; color: var(--fm-text); }
.fm-checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--fm-gradient);
}

/* Media frame: fixed aspect ratio so images never shift layout. */
.fm-media {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: var(--fm-media-ratio, 3 / 2);
  border-radius: var(--fm-radius-lg);
  background: var(--fm-sand-soft);
  box-shadow: var(--fm-shadow-md);
}
.fm-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Placeholder shown until the approved image exists (pending generation) */
.fm-media__placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--fm-space-5);
  background:
    radial-gradient(70% 60% at 70% 30%, rgb(var(--fm-violet-rgb) / 0.18), transparent 70%),
    radial-gradient(60% 60% at 20% 80%, rgb(var(--fm-blue-rgb) / 0.14), transparent 70%),
    linear-gradient(135deg, var(--fm-cream-soft), var(--fm-sand));
  color: var(--fm-ink-muted); font-size: var(--fm-text-sm); font-weight: 600; text-align: center;
}

.fm-page-hero { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); background: linear-gradient(180deg, var(--fm-cream) 0%, var(--fm-sand-soft) 100%); }
.fm-page-hero__copy { display: flex; flex-direction: column; gap: var(--fm-space-5); max-width: 48rem; }
.fm-jump-links { display: flex; flex-wrap: wrap; gap: var(--fm-space-2); padding-top: var(--fm-space-2); }
.fm-jump-links a { text-decoration: none; }
.fm-jump-links a:hover { border-color: var(--fm-text); }

.fm-cta-band { position: relative; overflow: hidden; border-radius: var(--fm-radius-lg); padding: clamp(2rem, 1.2rem + 3vw, 4rem); display: grid; gap: var(--fm-space-5); align-items: center; }
@media (min-width: 900px) { .fm-cta-band { grid-template-columns: 1fr auto; } }
/* Brand rule along the bottom edge of the closing CTA */
.fm-cta-band--rule::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--fm-gradient); }
.fm-cta-band__copy { display: flex; flex-direction: column; gap: var(--fm-space-4); max-width: 40rem; }

/* ── SECTION RAIL ───────────────────────────────────────────────────────
   Every section opens on a hairline carrying its mono name in a 240px
   label column (no numbers: services and steps already carry their own); the statement sits in the content column. The
   column matches .fm-phase so labels line up down the How It Works page.
   --bare is the label row alone (above split feature sections). */
.fm-rail {
  position: relative; display: grid; gap: var(--fm-space-4) var(--fm-space-8);
  margin: 0 0 clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top: var(--fm-space-5);
}
.fm-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fm-border-strong); transform-origin: left; }
.fm-rail__label {
  margin: 0; display: flex; align-items: baseline; gap: var(--fm-space-3);
  font-family: var(--fm-font-mono); font-size: var(--fm-text-xs); font-weight: 500;
  letter-spacing: var(--fm-tracking-label); text-transform: uppercase; color: var(--fm-blue-ink);
}
.fm-surface-navy .fm-rail__label { color: #8FB8FF; }
.fm-rail__main { display: flex; flex-direction: column; gap: var(--fm-space-4); max-width: 46rem; }
.fm-rail__aside { justify-self: start; }
.fm-rail--bare { display: block; }
@media (min-width: 1024px) {
  .fm-rail { grid-template-columns: 240px minmax(0, 1fr) auto; }
  .fm-rail__label { padding-top: 0.875rem; }
  .fm-rail--bare .fm-rail__label { padding-top: 0; }
  .fm-rail__aside { align-self: end; }
  .fm-rail-offset { margin-left: calc(240px + var(--fm-space-8)); }
}
@media (prefers-reduced-motion: no-preference) {
  .fm-js .fm-rail[data-reveal]::before { transform: scaleX(0); transition: transform var(--fm-dur-slow) var(--fm-ease) 120ms; }
  .fm-js .fm-rail[data-reveal].is-revealed::before { transform: none; }
}

/* ── ABOUT PAGE ─────────────────────────────────────────────────────────── */
.fm-body-copy { margin: 0; font-size: var(--fm-text-base); color: var(--fm-text-muted); max-width: 68ch; }
.fm-section--flush-top { padding-top: 0; }
/* Facts row: words, not numbers, so the value sits smaller than a stat */
.fm-stats.fm-stats--facts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 36rem; }
.fm-stats.fm-stats--facts dd { hyphens: manual; overflow-wrap: normal; }
/* About hero: copy takes more of the row so the headline sets in three lines */
@media (min-width: 1024px) { .fm-hero-split.fm-hero-split--copy-wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); } }
.fm-stats.fm-stats--facts dd { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; }
/* Mission and vision as two large statements on navy */
.fm-statements { display: grid; gap: var(--fm-space-8) clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 900px) { .fm-statements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fm-statement { display: flex; flex-direction: column; gap: var(--fm-space-4); }
.fm-statement__label {
  font-family: var(--fm-font-mono); font-size: var(--fm-text-xs); font-weight: 500; font-stretch: normal;
  letter-spacing: var(--fm-tracking-label); text-transform: uppercase; line-height: 1.4; color: var(--fm-text);
}
.fm-statement__text {
  margin: 0; font-family: var(--fm-font-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; color: var(--fm-text); text-wrap: pretty;
}
/* Values as hairline rows (no cards) */
.fm-values { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fm-border-strong); }
.fm-values li { display: grid; gap: var(--fm-space-2) var(--fm-space-6); padding-block: var(--fm-space-5); border-bottom: 1px solid var(--fm-border-strong); }
@media (min-width: 768px) { .fm-values li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: baseline; } }
.fm-values h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 2rem); font-weight: var(--fm-weight-heading); letter-spacing: -0.03em; font-stretch: var(--fm-stretch-display); }
.fm-values p { color: var(--fm-text-muted); max-width: 52ch; }

/* ── SHARED SECTION PIECES (home completion + How It Works) ─────────────── */
.fm-eyebrow--rule::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--fm-gradient); flex: none; }
.fm-section-head--split { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--fm-space-5) var(--fm-space-8); max-width: none; }
.fm-section-head--split > div { display: flex; flex-direction: column; gap: var(--fm-space-4); max-width: 46rem; }
.fm-section-head--center { align-items: center; text-align: center; margin-inline: auto; }
.fm-surface-soft-sand { --fm-bg: var(--fm-sand-soft); --fm-text-subtle: var(--fm-ink-muted); background: var(--fm-sand-soft); }
.fm-surface-fade { --fm-text-subtle: var(--fm-ink-muted); background: linear-gradient(180deg, var(--fm-cream) 0%, var(--fm-sand-soft) 100%); }

/* Arrow link with a gradient underline sweep */
.fm-link-cta {
  display: inline-flex; align-items: center; gap: var(--fm-space-2); min-height: 44px;
  color: var(--fm-text); font-weight: 600; text-decoration: none;
  background: var(--fm-gradient) no-repeat 0 calc(100% - 8px) / 0% 2px;
  transition: background-size var(--fm-dur) var(--fm-ease);
}
.fm-link-cta svg { width: 18px; height: 18px; flex: none; transition: transform var(--fm-dur) var(--fm-ease); }
.fm-link-cta:hover { background-size: 100% 2px; }
.fm-link-cta:hover svg { transform: translateX(4px); }

/* Service cards: arrow always sits on the card's bottom edge */
.fm-service-card .fm-arrow-ring { margin-top: auto; }

/* Services index (home): numbered rows. Phones and tablets show each row's
   art inline; desktop shows one shared preview that follows hover/focus. */
.fm-service-showcase { display: grid; gap: var(--fm-space-7); align-items: start; }
.fm-service-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fm-border-strong); }
.fm-service-index li { border-bottom: 1px solid var(--fm-border-strong); }
.fm-service-row {
  position: relative; display: grid; align-items: center; column-gap: var(--fm-space-4); row-gap: 2px;
  grid-template-columns: 88px minmax(0, 1fr) 40px;
  grid-template-areas: "thumb num arrow" "thumb body arrow";
  min-height: 88px; padding: var(--fm-space-4) 0;
  color: var(--fm-text); text-decoration: none;
}
.fm-service-row__thumb { grid-area: thumb; width: 88px; height: 88px; object-fit: cover; border-radius: var(--fm-radius-md); }
.fm-service-row__num { grid-area: num; align-self: end; font-family: var(--fm-font-mono); font-size: var(--fm-text-xs); font-weight: 500; letter-spacing: var(--fm-tracking-label); color: var(--fm-text-muted); }
.fm-service-row__body { grid-area: body; align-self: start; display: flex; flex-direction: column; gap: var(--fm-space-1); min-width: 0; transition: transform var(--fm-dur) var(--fm-ease); }
.fm-service-row__title { margin: 0; font-family: var(--fm-font-display); font-size: clamp(1.25rem, 1rem + 1.25vw, 2.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; font-stretch: var(--fm-stretch-display); }
.fm-service-row__text { font-size: var(--fm-text-sm); line-height: 1.5; color: var(--fm-text-muted); max-width: 44ch; }
.fm-service-row .fm-arrow-ring { grid-area: arrow; margin: 0; }
.fm-service-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--fm-gradient); transform: scaleX(0); transform-origin: left;
  transition: transform var(--fm-dur) var(--fm-ease);
}
.fm-service-row:hover .fm-arrow-ring { transform: translateX(4px); }
.fm-service-preview { display: none; }

@media (min-width: 1024px) {
  .fm-service-showcase { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 1rem + 3vw, 5rem); }
  .fm-service-row {
    grid-template-columns: 56px minmax(0, 1fr) 40px;
    grid-template-areas: "num body arrow";
    align-items: start; column-gap: var(--fm-space-5);
    padding: var(--fm-space-6) 0;
  }
  .fm-service-row__thumb { display: none; }
  .fm-service-row__num { align-self: start; padding-top: 0.6em; transition: color var(--fm-dur-fast) var(--fm-ease); }
  .fm-service-row .fm-arrow-ring { align-self: center; }
  .fm-service-row.is-active::after { transform: scaleX(1); }
  .fm-service-row.is-active .fm-service-row__body { transform: translateX(8px); }
  .fm-service-row.is-active .fm-service-row__num { color: var(--fm-icon-color, var(--fm-blue-ink)); }
  .fm-service-row.is-active .fm-arrow-ring { transform: translateX(4px); background: var(--fm-cream-soft); }

  .fm-service-preview {
    display: block; position: sticky; top: calc(var(--fm-header-h) + var(--fm-space-5));
    aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--fm-radius-lg);
    background: var(--fm-sand-soft); box-shadow: var(--fm-shadow-md);
  }
  .fm-service-preview img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.03);
    transition: opacity var(--fm-dur-slow) var(--fm-ease), transform var(--fm-dur-slow) var(--fm-ease);
  }
  .fm-service-preview img.is-active { opacity: 1; transform: none; }
}

/* Integrations band (home) */
.fm-integrations-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fm-space-4) var(--fm-space-6);
  margin-top: var(--fm-space-7); padding: var(--fm-space-5) var(--fm-space-6);
  border-radius: var(--fm-radius-lg); background: var(--fm-sand-soft);
}
.fm-integrations-band__label { margin: 0; font-size: 0.9375rem; font-weight: 700; }
.fm-integrations-band__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--fm-space-2) var(--fm-space-5); font-size: var(--fm-text-sm); font-weight: 600; }
.fm-integrations-band__list li { display: flex; align-items: center; gap: var(--fm-space-2); }
.fm-integrations-band__list svg { width: 18px; height: 18px; color: var(--fm-violet); flex: none; }
.fm-integrations-band .fm-link { color: var(--fm-blue-ink); }

/* How it works summary (home) */
.fm-steps-summary { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fm-space-5); grid-template-columns: 1fr; counter-reset: fm-step; }
@media (min-width: 720px) { .fm-steps-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .fm-steps-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fm-steps-summary::before { content: ""; position: absolute; top: 19px; left: 20px; right: 20px; height: 2px; border-radius: 2px; background: var(--fm-gradient); opacity: 0.6; }
}
.fm-steps-summary li { position: relative; display: flex; flex-direction: column; gap: var(--fm-space-4); }
.fm-step-num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--fm-navy); color: var(--fm-cream); font-family: var(--fm-font-mono); font-size: 0.875rem; font-weight: 500;
}
.fm-step-num--brand { background: linear-gradient(135deg, var(--fm-blue), var(--fm-violet) 60%, var(--fm-magenta)); color: #FFFFFF; }
.fm-steps-summary .fm-card { flex: 1; gap: var(--fm-space-2); padding: var(--fm-space-5); box-shadow: none; }
.fm-steps-summary h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
.fm-steps-summary p { font-size: 0.9375rem; color: var(--fm-text-muted); }

/* Two-column feature split (receptionist, why) */
.fm-split { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); align-items: center; }
@media (min-width: 960px) { .fm-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.fm-split--why { align-items: start; }
@media (min-width: 960px) { .fm-split--why { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.fm-split__copy { display: flex; flex-direction: column; gap: var(--fm-space-5); max-width: 36rem; }
.fm-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fm-space-3); }
.fm-ticks li { display: flex; align-items: flex-start; gap: var(--fm-space-3); }
.fm-ticks svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--fm-violet); }
.fm-surface-navy .fm-ticks svg { color: #8FB8FF; }

/* Example call card (AI receptionist) */
.fm-call {
  display: flex; flex-direction: column; gap: var(--fm-space-4); width: 100%; max-width: 560px; margin-inline: auto;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--fm-radius-lg);
  background: var(--fm-navy-raised); border: 1px solid var(--fm-border); box-shadow: 0 24px 64px rgb(0 0 0 / 0.35);
}
.fm-call__head { display: flex; align-items: center; justify-content: space-between; gap: var(--fm-space-3); padding-bottom: var(--fm-space-4); border-bottom: 1px solid var(--fm-border); }
.fm-call__who { display: flex; align-items: center; gap: var(--fm-space-3); line-height: 1.3; }
.fm-call__who strong { display: block; font-size: 0.9375rem; }
.fm-call__who span { font-size: 0.8125rem; color: var(--fm-text-muted); }
.fm-call__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--fm-blue), var(--fm-violet) 55%, var(--fm-magenta)); color: #FFFFFF; flex: none; }
.fm-call__icon svg { width: 20px; height: 20px; }
.fm-call__live { display: inline-flex; align-items: center; gap: var(--fm-space-2); padding: 4px 12px; border-radius: var(--fm-radius-pill); border: 1px solid rgb(95 211 160 / 0.6); color: #5FD3A0; font-size: 0.8125rem; font-weight: 600; }
.fm-call__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: fm-pulse 1.6s var(--fm-ease) infinite; }
@keyframes fm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.fm-call__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fm-space-3); font-size: 0.9375rem; line-height: 1.5; }
.fm-call__line { align-self: flex-start; max-width: 85%; padding: 12px 16px; border-radius: 14px 14px 14px 4px; background: rgb(var(--fm-cream-rgb) / 0.08); }
.fm-call__line--agent { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: rgb(var(--fm-violet-rgb) / 0.35); }
.fm-call__line b { display: block; font-size: 0.75rem; font-weight: 600; color: var(--fm-text-muted); }
.fm-call__results { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--fm-space-2); }
.fm-call__results li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--fm-radius-pill); background: rgb(var(--fm-cream-rgb) / 0.08); font-size: 0.8125rem; font-weight: 600; }
.fm-call__results svg { width: 14px; height: 14px; color: #5FD3A0; }

/* Feature cards with an icon well (why Falmera, commitments) */
.fm-feature-grid { display: grid; gap: var(--fm-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.fm-feature { gap: var(--fm-space-3); box-shadow: none; }
.fm-feature h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
.fm-feature p { font-size: 0.9375rem; color: var(--fm-text-muted); }
.fm-feature--row { flex-direction: row; align-items: flex-start; gap: var(--fm-space-4); }
.fm-feature--row > div { display: flex; flex-direction: column; gap: var(--fm-space-2); }
.fm-feature .fm-card__icon { background: var(--fm-sand-soft); color: var(--fm-icon-color, var(--fm-violet)); flex: none; }

/* FAQ: native details/summary, one open at a time via name="" */
.fm-faq { border-top: 1px solid var(--fm-border-strong); }
.fm-faq details { border-bottom: 1px solid var(--fm-border-strong); }
.fm-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fm-space-5);
  min-height: 72px; padding: var(--fm-space-4) 0; cursor: pointer; list-style: none;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); font-weight: 700; color: var(--fm-text);
  transition: color var(--fm-dur-fast) var(--fm-ease);
}
.fm-faq summary::-webkit-details-marker { display: none; }
.fm-faq summary:hover { color: var(--fm-blue-ink); }
.fm-faq__icon {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--fm-border-strong); color: var(--fm-text);
  transition: transform var(--fm-dur) var(--fm-ease), background-color var(--fm-dur) var(--fm-ease), color var(--fm-dur) var(--fm-ease);
}
.fm-faq__icon svg { width: 16px; height: 16px; }
.fm-faq details[open] .fm-faq__icon { transform: rotate(180deg); background: var(--fm-navy); border-color: var(--fm-navy); color: var(--fm-cream); }
.fm-faq details p { margin: 0; padding: 0 3.5rem var(--fm-space-5) 0; color: var(--fm-text-muted); }

/* How It Works page */
.fm-hero-split { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); align-items: center; }
@media (min-width: 1024px) { .fm-hero-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.fm-hero-split__media { margin: 0; overflow: hidden; border-radius: var(--fm-radius-lg); box-shadow: var(--fm-shadow-md); aspect-ratio: 4 / 3; background: var(--fm-sand-soft); }
.fm-hero-split__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.fm-stats { margin: 0; display: grid; gap: var(--fm-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.fm-stat { display: flex; flex-direction: column-reverse; gap: 4px; padding: var(--fm-space-5); border-radius: 20px; background: var(--fm-cream-soft); border: 1px solid var(--fm-border); }
.fm-stat dt { font-family: var(--fm-font-mono); font-size: var(--fm-text-xs); font-weight: 500; letter-spacing: var(--fm-tracking-label); text-transform: uppercase; color: var(--fm-text-muted); line-height: 1.4; }
.fm-stat dd { margin: 0; font-family: var(--fm-font-display); font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); line-height: 1; font-weight: 400; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

.fm-phases { display: flex; flex-direction: column; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.fm-phase { display: grid; gap: var(--fm-space-5) var(--fm-space-8); }
@media (min-width: 1024px) { .fm-phase { grid-template-columns: 240px minmax(0, 1fr); } }
.fm-phase__label { display: flex; flex-direction: column; gap: var(--fm-space-2); }
.fm-phase__label span { font-family: var(--fm-font-mono); font-size: var(--fm-text-xs); font-weight: 500; letter-spacing: var(--fm-tracking-label); text-transform: uppercase; color: var(--fm-text-muted); }
.fm-phase__label h3 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); letter-spacing: -0.02em; }
.fm-phase__label::after { content: ""; width: 64px; height: 3px; border-radius: 3px; background: var(--fm-phase-rule, var(--fm-gradient)); }
.fm-phase__steps { display: grid; gap: var(--fm-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.fm-phase__steps--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.fm-step-card { gap: var(--fm-space-3); }
.fm-step-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--fm-space-3); }
.fm-step-card__num { font-family: var(--fm-font-mono); font-size: 0.875rem; font-weight: 500; letter-spacing: var(--fm-tracking-label); color: var(--fm-icon-color, var(--fm-blue-ink)); }
.fm-step-card h4 { font-size: 1.375rem; letter-spacing: -0.015em; }
.fm-step-card p { font-size: 0.9375rem; color: var(--fm-text-muted); }
.fm-step-card ul { margin: 4px 0 0; padding-left: 1.125rem; font-size: var(--fm-text-sm); color: var(--fm-text-muted); }
.fm-step-aside { display: flex; flex-direction: column; justify-content: center; gap: var(--fm-space-3); padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); border-radius: var(--fm-radius-lg); }
.fm-step-aside--dashed { border: 1.5px dashed var(--fm-border-strong); }
.fm-step-aside--sand { background: var(--fm-sand-soft); justify-content: flex-start; }
.fm-step-aside h4 { font-size: 1rem; }
.fm-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border-radius: var(--fm-radius-pill); background: var(--fm-sand-soft); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }

/* ── CONTACT PAGE ───────────────────────────────────────────────────────
   Next steps + details on the left, one form card with two tabs on the
   right. Both forms stay in the DOM; tabs only toggle [hidden]. */
/* Focus and anchor scrolling stop below the sticky header (WCAG 2.4.11) */
html:has(.fm-contact) { scroll-padding-top: calc(var(--fm-header-h) + var(--fm-space-4)); }
.fm-contact-hero { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.fm-contact-section { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.fm-contact { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); align-items: start; }
@media (min-width: 1024px) {
  .fm-contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 1rem + 4vw, 5.5rem); }
  .fm-contact__aside { position: sticky; top: calc(var(--fm-header-h) + var(--fm-space-6)); }
}
/* Form first on phones/tablets: the main action is above the fold */
@media (max-width: 1023px) { .fm-contact__main { order: -1; } }
.fm-contact__aside { display: flex; flex-direction: column; gap: var(--fm-space-7); }
.fm-contact__heading {
  margin: 0 0 var(--fm-space-5);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); font-weight: var(--fm-weight-heading);
  letter-spacing: -0.03em; font-stretch: var(--fm-stretch-display);
}

/* Numbered next steps as hairline rows */
.fm-next-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fm-border-strong); }
.fm-next-steps li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--fm-space-4);
  padding-block: var(--fm-space-5); border-bottom: 1px solid var(--fm-border-strong);
}
.fm-next-steps__num {
  padding-top: 0.3em;
  font-family: var(--fm-font-mono); font-size: var(--fm-text-xs); font-weight: 500;
  letter-spacing: var(--fm-tracking-label); color: var(--fm-blue-ink);
}
.fm-next-steps h3 { font-family: var(--fm-font-body); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }
.fm-next-steps p { margin-top: var(--fm-space-1); font-size: 0.9375rem; color: var(--fm-text-muted); }

/* Business details */
.fm-contact-details { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fm-space-3); }
.fm-contact-details > div { display: flex; flex-direction: column; gap: var(--fm-space-1); padding: var(--fm-space-4) var(--fm-space-5); border-radius: var(--fm-radius-md); background: var(--fm-cream-soft); border: 1px solid var(--fm-border); }
.fm-contact-details dt { font-family: var(--fm-font-mono); font-size: var(--fm-text-xs); font-weight: 500; letter-spacing: var(--fm-tracking-label); text-transform: uppercase; color: var(--fm-text-muted); }
.fm-contact-details dd { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--fm-text); }

.fm-contact-quote { display: flex; flex-direction: column; gap: var(--fm-space-2); padding-top: var(--fm-space-5); border-top: 1px solid var(--fm-border-strong); }
.fm-contact-quote__title { font-weight: 700; color: var(--fm-text); }
.fm-contact-quote__text { font-size: 0.9375rem; color: var(--fm-text-muted); }
.fm-contact-quote .fm-link-cta { align-self: flex-start; }

/* Form card */
.fm-form-card {
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg);
  background: var(--fm-cream-soft);
  box-shadow: var(--fm-shadow-lg);
}

/* Tabs: a segmented control. Selected = navy fill; focus ring from .fm :focus-visible */
.fm-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--fm-radius-pill); background: rgb(var(--fm-navy-rgb) / 0.06); }
.fm-tabs__tab {
  min-height: 48px; padding: 0.5rem 1rem;
  border: 0; border-radius: var(--fm-radius-pill); background: transparent;
  color: var(--fm-ink-muted); font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; transition: background-color var(--fm-dur) var(--fm-ease), color var(--fm-dur) var(--fm-ease), box-shadow var(--fm-dur) var(--fm-ease);
}
.fm-tabs__tab:hover { color: var(--fm-navy); background: rgb(var(--fm-navy-rgb) / 0.05); }
.fm-tabs__tab[aria-selected="true"] { background: var(--fm-navy); color: var(--fm-cream); box-shadow: var(--fm-shadow-sm); }
.fm .fm-tabs__tab:focus-visible { outline-offset: 2px; border-radius: var(--fm-radius-pill); }
.fm-tabs__panel { padding-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.fm .fm-tabs__panel:focus-visible { outline-offset: 6px; border-radius: var(--fm-radius-md); }

.fm-form-card__intro { display: flex; flex-direction: column; gap: var(--fm-space-2); margin-bottom: var(--fm-space-6); }
.fm-form-card__title { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); font-weight: var(--fm-weight-heading); letter-spacing: -0.025em; }
.fm-form-card__text { font-size: 0.9375rem; color: var(--fm-text-muted); max-width: 52ch; }
.fm-req-note { display: inline-block; }
.fm-req { color: #B0102F; font-weight: 700; }

.fm-form__grid { display: grid; gap: var(--fm-space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .fm-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fm-form__full { grid-column: 1 / -1; }
.fm-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 2.75rem;
  background: var(--fm-cream-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310162A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 18px;
}
.fm-select option { color: var(--fm-navy); }
.fm-form .fm-error { margin: 0; }
/* Spam honeypot: off-screen and out of the tab order; people never see it */
.fm-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.fm-form__actions { display: flex; flex-direction: column; gap: var(--fm-space-3); margin-top: var(--fm-space-6); }
.fm-form__submit { width: 100%; }
.fm-form__submit.is-loading svg { display: none; }
.fm-form__submit.is-loading::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.35); border-top-color: #FFFFFF;
  animation: fm-spin 0.8s linear infinite;
}
.fm-btn.fm-form__submit[disabled] { opacity: 0.75; cursor: progress; }
@keyframes fm-spin { to { transform: rotate(360deg); } }
.fm-form__note { font-size: var(--fm-text-sm); color: var(--fm-text-muted); text-align: center; }

/* Submission error: stays until dismissed or replaced by a new attempt */
.fm-form__status { margin-top: var(--fm-space-5); }
.fm-form__status--error {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fm-space-4);
  padding: var(--fm-space-4) var(--fm-space-5);
  border: 1px solid rgb(196 18 58 / 0.4); border-radius: var(--fm-radius-md);
  background: #FFF0F1; color: #8F0D26; font-size: 0.9375rem; font-weight: 500;
}
.fm-form__dismiss {
  flex: none; min-height: 32px; padding: 0 0.75rem;
  border: 1px solid currentColor; border-radius: var(--fm-radius-pill); background: transparent;
  color: inherit; font: inherit; font-size: var(--fm-text-sm); font-weight: 600; cursor: pointer;
}

/* Confirmed submission */
.fm-form-success { display: flex; flex-direction: column; align-items: center; gap: var(--fm-space-4); padding: var(--fm-space-8) var(--fm-space-4); text-align: center; }
.fm-form-success__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--fm-gradient-cta); color: #FFFFFF; }
.fm-form-success__icon svg { width: 26px; height: 26px; }
.fm-form-success .fm-form-card__text { max-width: 40ch; }

/* Reassurance row */
.fm-assurance { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fm-space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .fm-assurance { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fm-space-7); } }
.fm-assurance li { display: flex; align-items: flex-start; gap: var(--fm-space-4); padding-top: var(--fm-space-5); border-top: 1px solid var(--fm-border-strong); }
.fm-assurance svg { width: 28px; height: 28px; flex: none; color: var(--fm-violet); }
.fm-assurance h3 { font-family: var(--fm-font-body); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.fm-assurance p { margin-top: var(--fm-space-1); font-size: 0.9375rem; color: var(--fm-text-muted); }

/* ── QUOTE PAGE ─────────────────────────────────────────────────────────
   Pricing is rendered from the catalog by js/quote-page.mjs; these rules
   only lay it out. Reuses the tab control, form card and form fields. */
html:has(.fm-pricing) { scroll-padding-top: calc(var(--fm-header-h) + var(--fm-space-4)); }
.fm-quote-hero { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.fm-tabs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 479px) { .fm-tabs--3 .fm-tabs__tab { padding-inline: 0.375rem; font-size: 0.875rem; } }
.fm-pricing { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.fm-pricing__head { display: flex; flex-direction: column; gap: var(--fm-space-2); margin-bottom: var(--fm-space-6); }
.fm-pricing__title { font-size: var(--fm-h2); line-height: 1.05; letter-spacing: var(--fm-tracking-heading); font-stretch: var(--fm-stretch-display); }
.fm-pricing__status { padding: var(--fm-space-5); border: 1px dashed var(--fm-border-strong); border-radius: var(--fm-radius-md); color: var(--fm-text-muted); }
.fm-pricing__status.is-error { border-style: solid; border-color: rgb(196 18 58 / 0.4); background: #FFF0F1; color: #8F0D26; }
.fm-pricing__tabs { max-width: 640px; }
.fm-pricing__panel { display: flex; flex-direction: column; gap: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.fm .fm-pricing__panel:focus-visible { outline-offset: 6px; border-radius: var(--fm-radius-md); }
.fm-pricing__intro { display: flex; flex-direction: column; gap: var(--fm-space-2); max-width: 46rem; }
.fm-pricing__subtitle { font-size: var(--fm-h3); font-weight: var(--fm-weight-heading); letter-spacing: -0.025em; }

/* Plan cards */
.fm-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fm-space-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .fm-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fm-plan {
  display: flex; flex-direction: column; gap: var(--fm-space-4);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg);
  background: var(--fm-cream-soft); box-shadow: var(--fm-shadow-sm);
}
.fm-plan__name { font-family: var(--fm-font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.fm-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin: 0; }
.fm-plan__amount { font-family: var(--fm-font-display); font-size: clamp(2.25rem, 1.9rem + 1.2vw, 2.875rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--fm-text); }
.fm-plan__price--sm .fm-plan__amount { font-size: 1.75rem; }
.fm-plan__unit { font-size: var(--fm-text-sm); font-weight: 600; color: var(--fm-text-muted); }
.fm-plan__facts { margin: 0; border-top: 1px solid var(--fm-border-strong); }
.fm-plan__facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--fm-space-4); padding-block: var(--fm-space-3); border-bottom: 1px solid var(--fm-border); }
.fm-plan__facts dt { font-size: var(--fm-text-sm); color: var(--fm-text-muted); }
.fm-plan__facts dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.fm-plan__cta { margin-top: auto; width: 100%; }

/* Founding client offer */
.fm-founding {
  position: relative; display: grid; gap: var(--fm-space-6); align-items: center;
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); overflow: hidden;
  border-radius: var(--fm-radius-lg); background: var(--fm-cream-soft); border: 1px solid var(--fm-border);
}
.fm-founding::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fm-gradient); }
@media (min-width: 900px) { .fm-founding { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.fm-founding__copy { display: flex; flex-direction: column; gap: var(--fm-space-3); }
.fm-founding__title { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); font-weight: var(--fm-weight-heading); letter-spacing: -0.025em; }
.fm-founding__copy p { color: var(--fm-text-muted); }
.fm-founding__terms { font-size: var(--fm-text-sm); }
.fm-founding__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fm-founding__table th, .fm-founding__table td { padding: var(--fm-space-3) var(--fm-space-2); border-bottom: 1px solid var(--fm-border); text-align: right; }
.fm-founding__table th:first-child { text-align: left; }
.fm-founding__table thead th { font-family: var(--fm-font-mono); font-size: var(--fm-text-xs); font-weight: 500; letter-spacing: var(--fm-tracking-label); text-transform: uppercase; color: var(--fm-text-muted); border-bottom-color: var(--fm-border-strong); }
.fm-founding__table tbody th { font-weight: 600; }
.fm-founding__standard { color: var(--fm-text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }

/* Minutes calculator */
.fm-calc { display: flex; flex-direction: column; gap: var(--fm-space-5); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); border-radius: var(--fm-radius-lg); background: var(--fm-cream-soft); border: 1px solid var(--fm-border); }
.fm-calc__intro { display: flex; flex-direction: column; gap: var(--fm-space-2); }
.fm-calc__form { max-width: 34rem; }
.fm-calc__row { display: flex; flex-wrap: wrap; gap: var(--fm-space-3); }
.fm-calc__row .fm-input { flex: 1 1 12rem; width: auto; }
.fm-calc__heading { font-weight: 700; }
.fm-calc__results:empty { display: none; }
.fm-calc__list { list-style: none; margin: var(--fm-space-3) 0 0; padding: 0; display: grid; gap: var(--fm-space-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .fm-calc__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fm-calc__item { display: flex; flex-direction: column; gap: var(--fm-space-2); padding: var(--fm-space-5); border-radius: var(--fm-radius-md); border: 1px solid var(--fm-border-strong); background: var(--fm-cream); }
.fm-calc__item.is-lowest { border: 2px solid var(--fm-blue-ink); }
.fm-calc__plan { font-weight: 700; }
.fm-calc__total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin: 0; }
.fm-calc__total > span:first-child { font-family: var(--fm-font-display); font-size: 2rem; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fm-calc__breakdown { font-size: var(--fm-text-sm); color: var(--fm-text-muted); font-variant-numeric: tabular-nums; }
.fm-calc__badge { align-self: flex-start; padding: 2px 10px; border-radius: var(--fm-radius-pill); background: var(--fm-navy); color: var(--fm-cream); font-size: 0.8125rem; font-weight: 600; }
.fm-calc__notes { margin: 0; padding-left: 1.125rem; display: grid; gap: var(--fm-space-1); font-size: var(--fm-text-sm); color: var(--fm-text-muted); }

/* Website Foundation */
.fm-package { display: grid; gap: var(--fm-space-6); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); border-radius: var(--fm-radius-lg); background: var(--fm-cream-soft); border: 1px solid var(--fm-border); box-shadow: var(--fm-shadow-sm); }
@media (min-width: 900px) { .fm-package { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--fm-space-8); } }
.fm-package__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fm-space-4); }
.fm-package__name { font-size: var(--fm-h3); font-weight: var(--fm-weight-heading); letter-spacing: -0.025em; }
.fm-package__side { display: flex; flex-direction: column; gap: var(--fm-space-4); }
.fm-package__label { font-family: var(--fm-font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.fm-package__addon { display: flex; flex-direction: column; gap: var(--fm-space-2); padding-top: var(--fm-space-5); border-top: 1px solid var(--fm-border-strong); }
.fm-package__addon p:last-child { font-size: var(--fm-text-sm); color: var(--fm-text-muted); }

/* Custom services */
.fm-custom { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fm-space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .fm-custom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fm-custom__item { display: flex; flex-direction: column; justify-content: space-between; gap: var(--fm-space-4); padding: var(--fm-space-6); border-radius: var(--fm-radius-lg); background: var(--fm-cream-soft); border: 1px solid var(--fm-border); }
.fm-custom__name { font-family: var(--fm-font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
.fm-custom__price { margin-top: var(--fm-space-1); font-family: var(--fm-font-mono); font-size: var(--fm-text-xs); font-weight: 500; letter-spacing: var(--fm-tracking-label); text-transform: uppercase; color: var(--fm-blue-ink); }
.fm-custom__text { margin-top: var(--fm-space-2); font-size: 0.9375rem; color: var(--fm-text-muted); }
.fm-custom__cta { align-self: flex-start; padding-inline: 0; }

/* Quote request */
.fm-quote-request__grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: start; }
@media (min-width: 1024px) { .fm-quote-request__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .fm-quote-request__copy { position: sticky; top: calc(var(--fm-header-h) + var(--fm-space-6)); } }
.fm-quote-request__copy { display: flex; flex-direction: column; gap: var(--fm-space-4); }
.fm-form__notice { margin: 0 0 var(--fm-space-5); padding: var(--fm-space-4) var(--fm-space-5); border-radius: var(--fm-radius-md); background: var(--fm-sand-soft); color: var(--fm-navy); font-size: 0.9375rem; }
.fm-form__notice a, .fm-form__status a { color: var(--fm-blue-ink); font-weight: 600; }
.fm-form__status--info {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fm-space-4);
  padding: var(--fm-space-4) var(--fm-space-5); border: 1px solid var(--fm-border-strong); border-radius: var(--fm-radius-md);
  background: var(--fm-sand-soft); color: var(--fm-navy); font-size: 0.9375rem; font-weight: 500;
}
.fm-check { display: flex; align-items: flex-start; gap: var(--fm-space-3); cursor: pointer; font-size: 0.9375rem; font-weight: 600; color: var(--fm-text); }
.fm-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--fm-navy); }
.fm-quote-faq__title { margin-bottom: var(--fm-space-6); }

/* Scroll reveal: only when JS is running and motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .fm-js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--fm-dur-slow) var(--fm-ease), transform var(--fm-dur-slow) var(--fm-ease); transition-delay: var(--fm-reveal-delay, 0ms); }
  .fm-js [data-reveal].is-revealed { opacity: 1; transform: none; }
}

/* ── MOTION PREFERENCES ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fm *, .fm *::before, .fm *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fm-btn:hover, .fm-card--interactive:hover { transform: none; }
}

/* Legacy deep-link aliases (e.g. services.html#ai, #crm, #mobile) */
.fm-anchor-alias { display: block; height: 0; scroll-margin-top: calc(var(--fm-header-h) + 1rem); }

/* ── OUR WORK HERO (projects.html) ─────────────────────────────────────────
   Carl's approved reference (2026-10-14). The copy is real HTML; the artwork is an
   artwork-only frame (scripts/prepare-work-hero-frame.mjs) with an optional Seedance
   loop on top (js/falmera-work-hero.js). On wide screens the copy is placed in
   container units of the 16:9 stage so it lands where the reference puts it; smaller
   screens stack the copy above the artwork. */
.fm-work-hero {
  position: relative; background: var(--fm-cream); overflow: clip;
}
.fm-work-hero__stage { position: relative; container-type: inline-size; max-width: 2400px; margin-inline: auto; }
.fm-work-hero__art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.fm-work-hero__art > img, .fm-work-hero__art > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.fm-work-hero__art > video { opacity: 0; transition: opacity 900ms var(--fm-ease); }
.fm-work-hero__art.is-playing > video { opacity: 1; }
.fm-work-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.fm-work-hero__title { margin: 0; font-family: var(--fm-font-display); font-weight: 600; color: var(--fm-navy); letter-spacing: -0.055em; line-height: 0.84; }
.fm-work-hero__title span { display: block; }
.fm-work-hero__title .fm-gradient-text { display: inline; padding-right: 0.04em; }
.fm-work-hero__lead { margin: 0; color: #3A3F55; line-height: 1.32; }
.fm-work-hero__chips .fm-chip { background: rgb(var(--fm-cream-rgb) / 0.72); border-color: rgb(16 22 42 / 0.08); box-shadow: 0 6px 18px -10px rgb(103 39 232 / 0.35); color: var(--fm-navy); }
.fm-work-hero__chips .fm-chip:hover { border-color: var(--fm-navy); }
.fm-work-hero__note { margin: 0; padding: var(--fm-space-2) var(--fm-space-4) var(--fm-space-5); text-align: center; font-size: var(--fm-text-xs); color: var(--fm-text-subtle); }

/* Wide screens: the reference composition. Art starts under the translucent header. */
@media (min-width: 1280px) {
  .fm-work-hero { margin-top: calc(-1 * min(var(--fm-header-h), 4.3vw)); }
  .fm-work-hero__copy { position: absolute; z-index: 1; top: 5.75cqi; left: 32.6cqi; width: 42cqi; gap: 0; }
  .fm-work-hero__copy .fm-eyebrow { font-size: max(11px, 0.72cqi); letter-spacing: 0.2em; margin-bottom: 0.72cqi; }
  .fm-work-hero__title { font-size: 5.25cqi; }
  .fm-work-hero__lead { margin-top: 0.8cqi; font-size: max(15px, 1.19cqi); line-height: 1.3; max-width: 39.6cqi; }
  .fm-work-hero__chips { margin-top: 1.1cqi; gap: 0.85cqi; padding: 0; }
  .fm-work-hero__chips .fm-chip { font-size: max(12px, 0.84cqi); font-weight: 450; padding: 0.42cqi 0.86cqi; }
  /* The header sits directly on the artwork until the page scrolls, as in the reference */
  .fm:has(.fm-work-hero) .fm-header:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  @media (min-width: 2400px) {
    .fm-work-hero__art { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
  }
}

/* Tablets and phones: copy first, then the artwork with its empty upper sky tucked under it */
@media (max-width: 1279.98px) {
  .fm-work-hero__copy { position: relative; z-index: 1; gap: var(--fm-space-4); padding: clamp(2.5rem, 1.5rem + 4vw, 4rem) var(--fm-gutter, 1.25rem) 0; max-width: 46rem; margin-inline: auto; }
  .fm-work-hero__title { font-size: clamp(2.6rem, 1.4rem + 5.2vw, 4.75rem); }
  .fm-work-hero__lead { font-size: var(--fm-text-lg); }
  .fm-work-hero__art { margin-top: -14cqi; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%); mask-image: linear-gradient(180deg, transparent, #000 14%); }
}
@media (max-width: 759.98px) {
  /* Zoom in a little (135% wide, centred) and crop the empty sky, keeping all three panels */
  .fm-work-hero__art { aspect-ratio: 2; margin-top: 0; }
  .fm-work-hero__art > img, .fm-work-hero__art > video { inset: auto; left: -17.5%; top: -46%; width: 135%; height: auto; aspect-ratio: 16 / 9; }
}

/* Entrance and scroll depth, only where motion is welcome. Transform-only so the poster
   still paints immediately (no opacity on the largest image). */
@media (prefers-reduced-motion: no-preference) {
  .fm-js .fm-work-hero__art > img { animation: fm-work-rise 1.1s var(--fm-ease) both; }
  @keyframes fm-work-rise { from { transform: translateY(2.5%) scale(1.015); } to { transform: none; } }
  @supports (animation-timeline: view()) {
    @media (min-width: 1280px) {
      .fm-work-hero__art { animation: fm-work-depth linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
      @keyframes fm-work-depth { to { transform: translateY(9%); } }
    }
  }
}

/* ── CLIENT PROPOSAL (proposal.html) ───────────────────────────────────────
   Private proposal page from the Proposal Builder (2026-10-14). */
.fm-proposal-dates { margin: 0; font-size: var(--fm-text-sm); color: var(--fm-text-muted); }
.fm-proposal-banner { margin: 0; padding: var(--fm-space-4) var(--fm-space-5); border-radius: var(--fm-radius-md); background: var(--fm-sand-soft); color: var(--fm-navy); font-weight: 600; max-width: 46rem; }
.fm-proposal-banner[data-state="accepted"] { background: #E3F6EC; color: #0F5132; }
.fm-proposal-text { white-space: pre-line; }
.fm-proposal-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fm-space-4); }
.fm-proposal-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--fm-space-5); align-items: start; padding: var(--fm-space-5); border-radius: var(--fm-radius-lg); background: rgb(var(--fm-cream-rgb) / 0.75); border: 1px solid var(--fm-border); }
.fm-proposal-line > div { display: grid; gap: var(--fm-space-2); }
.fm-proposal-line p { margin: 0; }
.fm-proposal-service { color: var(--fm-blue-ink); }
.fm-proposal-price { margin: 0; display: grid; gap: 4px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fm-proposal-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fm-space-4); margin: var(--fm-space-6) 0 0; }
.fm-proposal-sum > div { padding: var(--fm-space-5); border-radius: var(--fm-radius-lg); background: var(--fm-navy); color: var(--fm-cream); }
.fm-proposal-sum dt { font-size: var(--fm-text-sm); opacity: 0.8; }
.fm-proposal-sum dd { margin: var(--fm-space-2) 0 0; font-family: var(--fm-font-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fm-proposal-fine { margin-top: var(--fm-space-3); font-size: var(--fm-text-sm); }
.fm-proposal-respond { display: grid; gap: var(--fm-space-4); max-width: 40rem; }
.fm-proposal-form { display: grid; gap: var(--fm-space-3); }
.fm-proposal-form label, .fm-proposal-decline label { font-weight: 600; font-size: var(--fm-text-sm); }
.fm-proposal-form input:not([type=checkbox]), .fm-proposal-decline textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--fm-border-strong); border-radius: var(--fm-radius-md); background: #fff; font: inherit; color: var(--fm-text); }
.fm-proposal-check { display: flex; gap: var(--fm-space-3); align-items: flex-start; font-weight: 500 !important; line-height: 1.5; }
.fm-proposal-check input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--fm-navy); }
.fm-proposal-form .fm-btn { justify-self: start; }
.fm-proposal-message { margin: 0; min-height: 1.5em; font-size: var(--fm-text-sm); color: var(--fm-text-muted); }
.fm-proposal-decline summary { cursor: pointer; font-weight: 600; }
.fm-proposal-decline form { display: grid; gap: var(--fm-space-3); margin-top: var(--fm-space-4); }
.fm-proposal-decline .fm-btn { justify-self: start; }
@media (max-width: 640px) {
  .fm-proposal-line { grid-template-columns: minmax(0, 1fr); }
  .fm-proposal-price { text-align: left; }
  .fm-proposal-sum { grid-template-columns: minmax(0, 1fr); }
}