/* ==========================================================================
   EmerXing Digital — v6 Design System (Momentum)
   --------------------------------------------------------------------------
   Loaded AFTER site-v2.css. Scoped to body[data-concept="momentum"] so the
   other four concepts render exactly as before.

   Design intent: sleek, elegant, technical. One luminous accent instead of
   three competing ones. Restrained neutrals, deliberate spacing, quiet motion.
   Benchmarked against Linear, Stripe, Vercel and Databricks.

   Every text/background pair below is verified >= WCAG AA by
   03-design-system/contrast.py.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   The existing stylesheet reads --navy, --ink, --signal, --cyan etc.
   Remapping those names onto the new palette re-skins every component at once.
   -------------------------------------------------------------------------- */

/* Tokens live on :root, not on the concept selector, because the CMS routes
   never set data-concept — anything scoped to it is inert on the admin
   screens. The legacy-name remap further down stays concept-scoped so the
   other four concepts are untouched. */
:root {
  /* Canvas — near-black navy, not saturated blue */
  --v6-ink-950:#070A14;
  --v6-ink-900:#0B1020;
  --v6-ink-800:#121834;
  --v6-ink-700:#1C2444;

  /* Paper */
  --v6-paper:#FFFFFF;
  --v6-paper-2:#F7F8FB;
  --v6-paper-3:#EFF1F6;
  --v6-line:#E3E7EF;
  --v6-line-strong:#CFD5E2;

  /* Type */
  --v6-text-strong:#0B1020;
  --v6-text:#2C3446;
  --v6-text-muted:#5B6478;
  --v6-on-dark:#EAEEF7;
  --v6-on-dark-muted:#9AA5BF;

  /* Accent — single luminous azure.
     500 = large UI and graphics only (4.28:1 with white)
     600 = anything carrying text (5.87:1 with white) */
  --v6-accent-500:#3B72F5;
  --v6-accent-600:#2A5BD7;
  --v6-accent-700:#1E45A8;
  --v6-accent-300:#8DB0FF;
  --v6-accent-100:#E8EFFE;

  /* Status only — never decoration */
  --v6-positive:#17A673;
  --v6-warn:#A15E0D;

  /* Spacing scale (4px base) */
  --v6-s1:4px;  --v6-s2:8px;  --v6-s3:12px; --v6-s4:16px;
  --v6-s5:24px; --v6-s6:32px; --v6-s7:48px; --v6-s8:64px;
  --v6-s9:96px; --v6-s10:128px;

  /* Radius — subtle, consistent */
  --v6-r-sm:6px; --v6-r-md:10px; --v6-r-lg:16px; --v6-r-xl:22px;

  /* Elevation — soft and low-contrast, not dramatic */
  --v6-e1:0 1px 2px rgba(11,16,32,.06), 0 1px 1px rgba(11,16,32,.04);
  --v6-e2:0 4px 12px rgba(11,16,32,.07), 0 2px 4px rgba(11,16,32,.04);
  --v6-e3:0 12px 32px rgba(11,16,32,.10), 0 4px 8px rgba(11,16,32,.05);
  --v6-e4:0 24px 64px rgba(11,16,32,.13), 0 8px 16px rgba(11,16,32,.06);

}

/* ---- Remap the legacy variable names — momentum only ---- */
body[data-concept="momentum"] {
  --navy:var(--v6-ink-900);
  --navy-2:var(--v6-ink-800);
  --navy-3:var(--v6-ink-700);
  --ink:var(--v6-text-strong);
  --muted:var(--v6-text-muted);
  --line:var(--v6-line);
  --paper:var(--v6-paper-2);
  --signal:var(--v6-accent-600);   /* was acid lime #b7ee45 */
  --cyan:var(--v6-accent-300);     /* was #24c4e5 */
  --green:var(--v6-positive);
  --shadow:var(--v6-e4);

  background:var(--v6-paper);
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   The old scale peaked at 92px, which pushed the hero CTA below the fold.
   Tightened to a calmer, more editorial ramp.
   -------------------------------------------------------------------------- */

body[data-concept="momentum"] h1 {
  font-size:clamp(38px, 4.4vw, 64px);
  line-height:1.06;
  letter-spacing:-.028em;
}

body[data-concept="momentum"] h2 {
  font-size:clamp(28px, 2.9vw, 44px);
  line-height:1.12;
  letter-spacing:-.022em;
}

body[data-concept="momentum"] h3 {
  font-size:19px;
  line-height:1.28;
  letter-spacing:-.012em;
}

body[data-concept="momentum"] {
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Eyebrows: smaller, wider, quieter. They were competing with headings. */
body[data-concept="momentum"] .eyebrow {
  margin-bottom:var(--v6-s4);
  color:var(--v6-text-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
}

body[data-concept="momentum"] .eyebrow.cyan,
body[data-concept="momentum"] .section-head-dark .eyebrow {
  color:var(--v6-accent-300);
}

/* Card kickers ("ENGAGEMENT ECOSYSTEM", "DATA BASED ECOSYSTEM") were still
   rendering in the old mint green. On white they also failed AA at 3.1:1;
   accent-700 gives 8.2:1. */
body[data-concept="momentum"] .partner-rail-card small,
body[data-concept="momentum"] .partner-rail-card span,
body[data-concept="momentum"] .partner-rail-card .eyebrow,
body[data-concept="momentum"] .card-index span {
  color:var(--v6-accent-700);
}

body[data-concept="momentum"] .partner-rail-card svg {
  color:var(--v6-accent-600);
}

/* Measure control — long lines are the most common readability failure here. */
body[data-concept="momentum"] .section-head > p,
body[data-concept="momentum"] .hero-copy > p:not(.eyebrow) {
  max-width:62ch;
}

/* --------------------------------------------------------------------------
   3. SURFACES, RADIUS AND BORDERS
   The original mixed 0px and 22px radii arbitrarily. Unified here.
   -------------------------------------------------------------------------- */

body[data-concept="momentum"] .service-card,
body[data-concept="momentum"] .industry-card,
body[data-concept="momentum"] .engagement-grid article,
body[data-concept="momentum"] .resource-grid article,
body[data-concept="momentum"] .challenge-grid article,
body[data-concept="momentum"] .principle-grid article,
body[data-concept="momentum"] .package-card,
body[data-concept="momentum"] .growth-form,
body[data-concept="momentum"] .partner-rail-card,
body[data-concept="momentum"] .industry-rail-card {
  border-radius:var(--v6-r-lg);
}

body[data-concept="momentum"] .button,
body[data-concept="momentum"] .growth-form input,
body[data-concept="momentum"] .growth-form select,
body[data-concept="momentum"] .growth-form textarea {
  border-radius:var(--v6-r-sm);
}

/* Grid-of-cards: replace hairline dividers with real gaps + soft elevation.
   Divider grids read as a spreadsheet; spaced cards read as a product. */
body[data-concept="momentum"] .service-grid,
body[data-concept="momentum"] .industry-grid,
body[data-concept="momentum"] .engagement-grid,
body[data-concept="momentum"] .resource-grid,
body[data-concept="momentum"] .challenge-grid,
body[data-concept="momentum"] .package-grid {
  gap:var(--v6-gap,var(--v6-s4));
  border:0;
  background:transparent;
}

body[data-concept="momentum"] .service-card,
body[data-concept="momentum"] .industry-card,
body[data-concept="momentum"] .engagement-grid article,
body[data-concept="momentum"] .resource-grid article,
body[data-concept="momentum"] .challenge-grid article,
body[data-concept="momentum"] .package-card {
  border:1px solid var(--v6-line);
  box-shadow:var(--v6-e1);
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

body[data-concept="momentum"] .service-card:hover,
body[data-concept="momentum"] .industry-card:hover,
body[data-concept="momentum"] .engagement-grid article:hover,
body[data-concept="momentum"] .resource-grid article:hover {
  border-color:var(--v6-accent-300);
  box-shadow:var(--v6-e3);
  transform:translateY(-2px);
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   --signal is now azure, so anything that previously put dark text on it
   must flip to white. These overrides do that explicitly.
   -------------------------------------------------------------------------- */

body[data-concept="momentum"] .button {
  min-height:48px;
  padding:0 var(--v6-s5);
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}

body[data-concept="momentum"] .button-signal {
  color:#fff;
  background:var(--v6-accent-600);
  box-shadow:var(--v6-e2);
}

body[data-concept="momentum"] .button-signal:hover {
  color:#fff;
  background:var(--v6-accent-700);
  transform:translateY(-1px);
  box-shadow:var(--v6-e3);
}

body[data-concept="momentum"] .button-white {
  color:var(--v6-ink-900);
  background:var(--v6-surface,#fff);
}

body[data-concept="momentum"] .button-navy {
  color:#fff;
  background:var(--v6-ink-900);
}

body[data-concept="momentum"] .button-outline {
  color:inherit;
  border-color:var(--v6-line-strong);
  background:transparent;
}

body[data-concept="momentum"] .button-outline:hover {
  border-color:var(--v6-accent-600);
  color:var(--v6-accent-600);
}

body[data-concept="momentum"] .text-link.signal {
  color:var(--v6-accent-300);
}

/* Focus ring — visible on both canvases */
body[data-concept="momentum"] :where(a,button,input,select,textarea,summary):focus-visible {
  outline:2px solid var(--v6-accent-500);
  outline-offset:3px;
  border-radius:var(--v6-r-sm);
}

/* --------------------------------------------------------------------------
   5. HEADER AND CAMPAIGN BAR
   The lime bar was the loudest element on the page. Now a quiet dark strip.
   -------------------------------------------------------------------------- */

/* Replaces the neon lime bar. A deep azure-to-indigo gradient: reads as a
   colour rather than a dark strip, and sits naturally between the blue hero
   below it and white page sections. White text on the lightest stop of this
   gradient (#2A5BD7) is 5.87:1 — AA at any size. */
body[data-concept="momentum"] .campaign-bar {
  height:38px;
  color:#fff;
  background:linear-gradient(100deg, #1E45A8 0%, #2A5BD7 52%, #3B72F5 100%);
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:12px;
  font-weight:500;
  letter-spacing:.01em;
}

body[data-concept="momentum"] .campaign-bar a {
  color:#fff;
  border-bottom-color:rgba(255,255,255,.55);
  font-weight:600;
}

body[data-concept="momentum"] .campaign-bar a:hover {
  border-bottom-color:#fff;
}

body[data-concept="momentum"] .site-header {
  background:rgba(11,16,32,.88);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

body[data-concept="momentum"] .nav-item > a {
  color:#C7D0E4;
  font-size:13px;
  font-weight:500;
}

body[data-concept="momentum"] .nav-item:hover > a {
  color:#fff;
}

body[data-concept="momentum"] .header-cta {
  font-size:13px;
}

body[data-concept="momentum"] .mega-menu {
  border-top:2px solid var(--v6-accent-500);
  border-radius:0 0 var(--v6-r-lg) var(--v6-r-lg);
  box-shadow:var(--v6-e4);
}

body[data-concept="momentum"] .logo-mark i {
  background:var(--v6-accent-500);
}

body[data-concept="momentum"] .brand-x {
  color:var(--v6-accent-300);
  text-shadow:none;
}

body[data-concept="momentum"] .brand-words small {
  color:var(--v6-on-dark-muted);
}

/* --------------------------------------------------------------------------
   6. HERO
   Was: 92px headline, no CTA above the fold, hard-clipped image.
   -------------------------------------------------------------------------- */

body[data-concept="momentum"] .home-hero {
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(59,114,245,.16), transparent 62%),
    radial-gradient(90% 70% at 8% 100%, rgba(141,176,255,.08), transparent 60%),
    var(--v6-ink-900);
}

body[data-concept="momentum"] .hero-layout {
  min-height:auto;
  gap:var(--v6-s8);
  align-items:center;
  padding-block:var(--v6-s9) var(--v6-s8);
}

body[data-concept="momentum"] .hero-copy > p:not(.eyebrow) {
  color:#B9C4DA;
  font-size:17px;
  line-height:1.62;
}

body[data-concept="momentum"] .hero-media {
  min-height:0;
  border-radius:var(--v6-r-xl);
  overflow:hidden;
  box-shadow:var(--v6-e4);
}

body[data-concept="momentum"] .hero-media:after {
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--v6-r-xl);
}

body[data-concept="momentum"] .hero-media img {
  filter:none;
}

body[data-concept="momentum"] .hero-data-card,
body[data-concept="momentum"] .hero-notification {
  border-radius:var(--v6-r-md);
  box-shadow:var(--v6-e4);
}

body[data-concept="momentum"] .hero-notification {
  color:#fff;
  background:var(--v6-accent-600);
}

body[data-concept="momentum"] .hero-notification small {
  color:#CFDCFF;
}

/* Capability marquee — add edge fades so the clipped ends read as
   intentional rather than as a layout bug. */
body[data-concept="momentum"] .hero-capability-shell,
body[data-concept="momentum"] .industry-rail-shell,
body[data-concept="momentum"] .partner-rail-shell {
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

body[data-concept="momentum"] .capability-strip {
  border-top:1px solid rgba(255,255,255,.09);
}

/* Labels like "Reputation Management" wrapped to two lines and were clipped
   by the strip's fixed 66px height. Auto height + centred wrapping fixes it
   at every label length rather than shortening the copy. */
body[data-concept="momentum"] .capability-strip span,
body[data-concept="momentum"] .hero-capability-track span {
  min-height:0;
  padding:16px 18px;
  color:#A9B5CE;
  border-color:rgba(255,255,255,.07);
  font-size:12px;
  line-height:1.35;
  text-align:center;
  white-space:normal;
}

body[data-concept="momentum"] .capability-strip {
  align-items:stretch;
}

body[data-concept="momentum"] .capability-strip svg,
body[data-concept="momentum"] .hero-capability-track span svg {
  flex:none;
}

body[data-concept="momentum"] .capability-strip svg,
body[data-concept="momentum"] .hero-capability-track span svg {
  color:var(--v6-accent-300);
}

/* --------------------------------------------------------------------------
   7. SECTION RHYTHM
   Consistent vertical spacing; the original mixed 104px and ad-hoc values.
   -------------------------------------------------------------------------- */

/* (superseded by the structural main > section rhythm above) */

/* Section heads — the fix for the four misaligned supporting paragraphs
   ("Choose an industry to see…", "Original EmerXing artwork…", "Follow the
   value path…", "Five visible phases…").

   All 19 section heads come from one sectionHead() helper, so this repairs
   every instance at once.

   The old rule was: two columns, gap:9vw, align-items:end. Two problems.
   A 9vw gap is ~130px at 1440 and grows without limit on wide screens, so the
   paragraph drifted far from the heading it belongs to. And bottom-aligning
   against a heading whose height changes from two to four lines meant the
   paragraph landed at a different height in every section — the inconsistency
   is what made it look unconsidered.

   Now: fixed gap, both columns top-aligned, and the paragraph optically
   aligned to the heading's first baseline. Predictable in every section. */
/* Structural rhythm. Enumerating class names missed sections added after the
   original stylesheet was written (partners-section at 44/64,
   delivery-rhythm-section at 64/64, against a 128/128 baseline elsewhere) —
   which is exactly the uneven banding that shows between the running banners.
   Targeting every top-level section instead means new sections inherit the
   rhythm automatically. */
body[data-concept="momentum"] main > section,
body[data-concept="momentum"] main > div > section {
  padding-block:var(--v6-s9);
}

/* Full-bleed and self-spacing sections opt out. */
body[data-concept="momentum"] main > section.home-hero,
body[data-concept="momentum"] main > section.closing-cta,
body[data-concept="momentum"] main > section.page-hero,
body[data-concept="momentum"] main > section.detail-hero,
body[data-concept="momentum"] main > section.breadcrumb-bar,
body[data-concept="momentum"] main > section.capability-strip {
  padding-block:revert;
}

/* Rails carry their own internal padding, so they need slightly less on the
   section itself — this keeps their optical gap equal to the others. */
body[data-concept="momentum"] main > section.partners-section,
body[data-concept="momentum"] main > section.industries-section {
  padding-block:var(--v6-s8);
}

/* The compliance note was stranded by the section's full bottom padding. */
body[data-concept="momentum"] .partner-publishing-note {
  margin-top:var(--v6-s5);
}

body[data-concept="momentum"] .section-head {
  grid-template-columns:minmax(0,1.05fr) minmax(0,.62fr);
  gap:var(--v6-s8);
  align-items:start;
  margin-bottom:var(--v6-s8);
}

body[data-concept="momentum"] .section-head > p {
  max-width:44ch;
  margin:0;
  /* Drops the paragraph to sit against the heading's first baseline rather
     than floating at the very top of the column. */
  padding-top:10px;
  color:var(--v6-text-muted);
  font-size:16px;
  line-height:1.62;
}

body[data-concept="momentum"] .section-head-dark > p {
  color:#A9B5CE;
}

body[data-concept="momentum"] .section-head h2 {
  max-width:20ch;
}

/* Section heads that carry no supporting copy shouldn't reserve the column. */
body[data-concept="momentum"] .section-head:not(:has(> p)) {
  display:block;
}

body[data-concept="momentum"] .section-head:not(:has(> p)) h2 {
  max-width:26ch;
}

/* Compliance and provenance notes ("No third-party logo or unverified
   partnership claim…") were floating as loose small text. Given a defined
   container so they read as a deliberate footnote. */
body[data-concept="momentum"] .partner-publishing-note,
body[data-concept="momentum"] .commercial-note {
  display:flex;
  align-items:center;
  gap:var(--v6-s3);
  max-width:none;
  margin-top:var(--v6-s6);
  padding:var(--v6-s4) var(--v6-s5);
  color:var(--v6-text-muted);
  background:var(--v6-paper-2);
  border:1px solid var(--v6-line);
  border-radius:var(--v6-r-md);
  font-size:13px;
  text-align:left;
}

body[data-concept="momentum"] .partner-publishing-note svg {
  flex:none;
  color:var(--v6-accent-600);
}

@media (max-width:900px) {
  body[data-concept="momentum"] .section-head {
    grid-template-columns:1fr;
    gap:var(--v6-gap,var(--v6-s4));
  }
  body[data-concept="momentum"] .section-head > p {
    padding-top:0;
    max-width:60ch;
  }
  body[data-concept="momentum"] .section-head h2 {
    max-width:24ch;
  }
}

/* --------------------------------------------------------------------------
   8. OUTCOME CARDS
   Were pastel-tinted (blue / yellow-green / pink / lavender) with large dead
   space under short copy. Now one neutral surface, accent carried by the rail.
   -------------------------------------------------------------------------- */

body[data-concept="momentum"] .outcome-card {
  border-radius:var(--v6-r-lg);
  border:1px solid var(--v6-line);
  background:var(--v6-paper);
  box-shadow:var(--v6-e1);
  overflow:hidden;
}

body[data-concept="momentum"] .outcome-card > p,
body[data-concept="momentum"] .outcome-card > div > p {
  color:var(--v6-text-muted);
}

/* Push the footer link to the bottom so unequal copy lengths stop creating
   ragged whitespace between paragraph and footer. */
body[data-concept="momentum"] .outcome-card > a:last-child,
body[data-concept="momentum"] .outcome-card > footer {
  margin-top:auto;
}

body[data-concept="momentum"] .value-created,
body[data-concept="momentum"] .outcome-card .value-band {
  background:var(--v6-ink-900);
  color:var(--v6-on-dark);
}

/* --------------------------------------------------------------------------
   9. RAILS AND CARDS ON PHOTOGRAPHY
   Industry cards put light text over busy photos. Strengthen the scrim so
   the label and title always clear AA.
   -------------------------------------------------------------------------- */

body[data-concept="momentum"] .industry-rail-card:after {
  inset:0;
  background:linear-gradient(
    to top,
    rgba(7,10,20,.94) 0%,
    rgba(7,10,20,.86) 22%,
    rgba(7,10,20,.45) 48%,
    rgba(7,10,20,.10) 74%,
    rgba(7,10,20,.05) 100%
  );
}

body[data-concept="momentum"] .industry-rail-card h3,
body[data-concept="momentum"] .industry-rail-card strong {
  color:#fff;
  text-shadow:0 1px 12px rgba(7,10,20,.5);
}

body[data-concept="momentum"] .industry-rail-card small,
body[data-concept="momentum"] .industry-rail-card .rail-kicker {
  color:var(--v6-accent-300);
  letter-spacing:.12em;
}

/* Slow the marquees down — 75s was fast enough to fight the reader. */
body[data-concept="momentum"] .industry-rail-track {
  animation-duration:110s;
}

body[data-concept="momentum"] .partner-rail-track {
  animation-duration:95s;
}

/* --------------------------------------------------------------------------
   10. INFOGRAPHICS AND DIAGRAMS
   Recolour the CSS-drawn diagrams onto the single accent and give the
   dashboard mock a credible, modern chart treatment.
   -------------------------------------------------------------------------- */

body[data-concept="momentum"] .connect-core,
body[data-concept="momentum"] .diagram-core {
  color:#fff;
  background:var(--v6-accent-600);
  border-radius:var(--v6-r-md);
}

body[data-concept="momentum"] .diagram-node {
  color:#C7D3EE;
  background:var(--v6-ink-800);
  border:1px solid rgba(141,176,255,.28);
  border-radius:var(--v6-r-sm);
}

body[data-concept="momentum"] .connected > span {
  border-color:rgba(141,176,255,.3);
  background:rgba(59,114,245,.10);
  border-radius:var(--v6-r-sm);
}

body[data-concept="momentum"] .scattered {
  background:var(--v6-paper-3);
}

body[data-concept="momentum"] .scattered > span {
  border-color:var(--v6-line-strong);
  border-radius:var(--v6-r-sm);
}

body[data-concept="momentum"] .broken-line {
  border-top-color:var(--v6-line-strong);
}

body[data-concept="momentum"] .handoff-visual,
body[data-concept="momentum"] .connection-visual,
body[data-concept="momentum"] .sample-dashboard {
  border-radius:var(--v6-r-lg);
  overflow:hidden;
  box-shadow:var(--v6-e3);
}

body[data-concept="momentum"] .sample-dashboard {
  background:var(--v6-ink-800);
}

body[data-concept="momentum"] .sample-chart i {
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg, var(--v6-accent-500), rgba(59,114,245,.35));
}

body[data-concept="momentum"] .sample-head small {
  color:#fff;
  background:var(--v6-accent-600);
  border-radius:var(--v6-r-sm);
}

body[data-concept="momentum"] .stack-list article > span {
  color:var(--v6-accent-700);
  background:var(--v6-accent-100);
  border-radius:var(--v6-r-sm);
}

body[data-concept="momentum"] .group-heading {
  --accent:var(--v6-accent-500);
  border-bottom-width:2px;
}

body[data-concept="momentum"] .group-heading > span {
  color:#fff;
  background:var(--v6-accent-600);
  border-radius:var(--v6-r-md);
}

body[data-concept="momentum"] .service-card {
  --accent:var(--v6-accent-500);
}

body[data-concept="momentum"] .package-icon {
  color:var(--v6-accent-700);
  background:var(--v6-accent-100);
  border-radius:var(--v6-r-md);
}

/* The lime-to-teal gradient banner was the loudest element in the page. */
body[data-concept="momentum"] .learning-loop,
body[data-concept="momentum"] .loop-banner,
body[data-concept="momentum"] .process-note {
  color:var(--v6-on-dark);
  background:linear-gradient(100deg, var(--v6-accent-700), var(--v6-accent-500));
  border-radius:var(--v6-r-lg);
}

/* Process step icons: one accent, tonal variation only. */
body[data-concept="momentum"] .process-step span,
body[data-concept="momentum"] .process-item > span {
  color:#fff;
  background:var(--v6-accent-600);
}

/* --------------------------------------------------------------------------
   11. FORMS
   -------------------------------------------------------------------------- */

body[data-concept="momentum"] .growth-form {
  border:1px solid var(--v6-line);
  border-radius:var(--v6-r-xl);
  box-shadow:var(--v6-e3);
}

body[data-concept="momentum"] .growth-form input,
body[data-concept="momentum"] .growth-form select,
body[data-concept="momentum"] .growth-form textarea {
  border:1px solid var(--v6-line-strong);
  font-size:15px;
}

body[data-concept="momentum"] .growth-form input:focus,
body[data-concept="momentum"] .growth-form select:focus,
body[data-concept="momentum"] .growth-form textarea:focus {
  border-color:var(--v6-accent-500);
  box-shadow:0 0 0 3px rgba(59,114,245,.16);
}

body[data-concept="momentum"] .verification-note,
body[data-concept="momentum"] .form-package-context {
  color:var(--v6-accent-700);
  background:var(--v6-accent-100);
  border-radius:var(--v6-r-md);
}

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */

body[data-concept="momentum"] .site-footer {
  color:var(--v6-on-dark-muted);
  background:var(--v6-ink-950);
}

body[data-concept="momentum"] .site-footer a:hover,
body[data-concept="momentum"] .footer-main a:hover {
  color:var(--v6-accent-300);
}

/* ---- Footer lower zone: social strip + legal bar ----
   Was three stacked full-width bands of near-identical weight, so the eye had
   nothing to hold. Now a clear hierarchy: the social row sits on a slightly
   raised panel, and the legal bar recedes into the deepest surface. */

/* (superseded by the Microsoft-layout .footer-social rule below) */

body[data-concept="momentum"] .footer-social .eyebrow {
  margin:0 0 6px;
  color:var(--v6-accent-300);
  font-size:10px;
  letter-spacing:.15em;
}

body[data-concept="momentum"] .footer-social > div:first-child strong {
  color:#fff;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.015em;
}

/* (superseded — see the later footer rules) */

/* (superseded — see the later footer rules) */

/* Legal bar — quietest line on the page, but still AA (7.67:1). */
/* (superseded — see the later footer rules) */

body[data-concept="momentum"] .footer-bottom > div {
  gap:0;
  flex-wrap:wrap;
  align-items:center;
}

/* Middot separators instead of raw gaps — reads as one considered line. */
body[data-concept="momentum"] .footer-bottom > div > a {
  position:relative;
}

body[data-concept="momentum"] .footer-bottom > div > a:first-child {
  padding-left:0;
}

body[data-concept="momentum"] .footer-bottom > div > a + a:before {
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  transform:translateY(-50%);
}

body[data-concept="momentum"] .footer-bottom > div > a:hover {
  color:#fff;
}

/* Tagline pushed right so the bar reads copyright | links | tagline. */
body[data-concept="momentum"] .footer-bottom > div > span:last-child {
  margin-left:auto;
  padding-left:var(--v6-s5);
  color:#6E7A94;
  font-size:12px;
}

@media (max-width:820px) {
  body[data-concept="momentum"] .footer-social {
    flex-direction:column;
    align-items:flex-start;
    gap:var(--v6-gap,var(--v6-s4));
    padding:var(--v6-card-pad,var(--v6-s5)) 0;
  }
  body[data-concept="momentum"] .footer-bottom > div > span:last-child {
    margin-left:0;
    padding-left:0;
    width:100%;
    margin-top:var(--v6-s2);
  }
  body[data-concept="momentum"] .footer-bottom > div > a:first-child {
    padding-left:0;
  }
}

/* --------------------------------------------------------------------------
   13. CMS ADMIN
   Same system, applied to the authoring surface.
   -------------------------------------------------------------------------- */

.cms-shell {
  background:var(--v6-paper-2);
  color:var(--v6-text);
}

.cms-sidebar,
.login-brand {
  background:var(--v6-ink-900);
}

.cms-sidebar nav button {
  border-radius:var(--v6-r-sm);
  color:#A6B2CB;
  font-size:13px;
}

.cms-sidebar nav button:hover {
  color:#fff;
  background:rgba(255,255,255,.05);
}

.cms-sidebar nav button.active {
  color:#fff;
  background:var(--v6-accent-600);
  font-weight:600;
}

.cms-sidebar nav button.active .icon {
  color:#fff;
}

.cms-sidebar nav button b {
  border-radius:999px;
  color:#fff;
  background:var(--v6-accent-600);
  font-size:10px;
}

.cms-sidebar nav button b.warn {
  background:var(--v6-warn);
}

.cms-welcome {
  border-radius:var(--v6-r-xl);
  background:
    radial-gradient(110% 90% at 82% 4%, rgba(59,114,245,.24), transparent 60%),
    var(--v6-ink-800);
}

.cms-welcome h2 {
  font-size:34px;
}

.cms-welcome h2 em {
  color:var(--v6-accent-300);
  font-style:normal;
}

.cms-welcome .button {
  color:#fff;
  background:var(--v6-accent-600);
}

.cms-stat-grid article {
  border:1px solid var(--v6-line);
  border-top:3px solid var(--v6-line-strong);
  border-radius:var(--v6-r-md);
  box-shadow:var(--v6-e1);
}

.cms-stat-grid article > span {
  color:var(--v6-accent-700);
  background:var(--v6-accent-100);
  border-radius:var(--v6-r-sm);
}

.cms-stat-grid .attention {
  border-top-color:var(--v6-warn);
}

.cms-stat-grid .ready {
  border-top-color:var(--v6-positive);
}

.cms-form-card,
.cms-modal,
.collection-row,
.verification-item {
  border-radius:var(--v6-r-md);
}

.cms-guidance {
  color:var(--v6-accent-700);
  background:var(--v6-accent-100);
  border-radius:var(--v6-r-md);
}

.cms-user > span {
  border-radius:999px;
  color:var(--v6-accent-700);
  background:var(--v6-accent-100);
}

.readiness-badge {
  border-radius:999px;
  color:var(--v6-warn);
  background:#FDF3E3;
}

.readiness-badge.ready {
  color:#0F6B4C;
  background:#E4F6EE;
}

.status-toggle.live i {
  background:var(--v6-positive);
}

.lead-row > span {
  border-radius:var(--v6-r-sm);
  color:var(--v6-accent-700);
  background:var(--v6-accent-100);
}

/* --------------------------------------------------------------------------
   13b. CMS — DRAG-AND-DROP REORDERING AND EXPANDABLE ROWS
   -------------------------------------------------------------------------- */

.collection-hint {
  display:flex;
  align-items:center;
  gap:var(--v6-s2);
  margin:0;
  padding:12px 21px;
  color:var(--v6-accent-700);
  background:var(--v6-accent-100);
  border-block:1px solid var(--v6-line);
  font-size:12px;
}

.collection-hint svg {
  flex:none;
}

/* Row grid gains a leading handle column. */
.collection-head,
.collection-row {
  grid-template-columns:34px 1.25fr 1.5fr 110px 130px;
  align-items:center;
}

.collection-row {
  position:relative;
  border-radius:var(--v6-r-sm);
  transition:background .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.drag-handle {
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  padding:0;
  color:#9AA5BF;
  background:transparent;
  border:0;
  border-radius:var(--v6-r-sm);
  cursor:grab;
}

.drag-handle:hover {
  color:var(--v6-accent-600);
  background:var(--v6-accent-100);
}

.collection-row.dragging {
  opacity:.5;
  background:var(--v6-accent-100);
  box-shadow:var(--v6-e3);
  cursor:grabbing;
}

.collection-row.drop-target {
  box-shadow:inset 0 2px 0 var(--v6-accent-500);
}

.row-expand {
  color:var(--v6-accent-600);
  background:transparent;
  border:1px solid var(--v6-line-strong);
  border-radius:var(--v6-r-sm);
  padding:5px 10px;
  font-size:11px;
  font-weight:600;
}

.row-expand:hover {
  border-color:var(--v6-accent-600);
  background:var(--v6-accent-100);
}

.collection-row.expanded {
  background:var(--v6-paper-2);
  box-shadow:var(--v6-e1);
}

.row-detail {
  grid-column:1/-1;
  margin-top:var(--v6-s3);
  padding:var(--v6-card-pad,var(--v6-s5));
  background:var(--v6-paper);
  border:1px solid var(--v6-line);
  border-radius:var(--v6-r-md);
}

.row-detail-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--v6-gap,var(--v6-s4));
}

.row-detail-field > span {
  display:block;
  margin-bottom:5px;
  color:var(--v6-text-muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.row-detail-field > p {
  margin:0;
  color:var(--v6-text);
  font-size:13px;
  line-height:1.5;
}

.row-detail-field em {
  color:#98A2B6;
}

.row-detail-actions {
  display:flex;
  justify-content:flex-end;
  margin-top:var(--v6-s4);
  padding-top:var(--v6-s4);
  border-top:1px solid var(--v6-line);
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width:1024px) {
  body[data-concept="momentum"] .hero-layout {
    grid-template-columns:1fr;
    gap:var(--v6-s7);
    padding-block:var(--v6-s8) var(--v6-s7);
  }
  body[data-concept="momentum"] .service-grid,
  body[data-concept="momentum"] .industry-grid,
  body[data-concept="momentum"] .engagement-grid,
  body[data-concept="momentum"] .resource-grid,
  body[data-concept="momentum"] .challenge-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body[data-concept="momentum"] .package-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:640px) {
  body[data-concept="momentum"] h1 {
    font-size:clamp(32px, 9vw, 42px);
  }
  body[data-concept="momentum"] h2 {
    font-size:clamp(25px, 7vw, 33px);
  }
  body[data-concept="momentum"] .problem-section,
  body[data-concept="momentum"] .outcome-section,
  body[data-concept="momentum"] .journey-section,
  body[data-concept="momentum"] .industries-section,
  body[data-concept="momentum"] .process-section,
  body[data-concept="momentum"] .why-section,
  body[data-concept="momentum"] .evidence-section,
  body[data-concept="momentum"] .faq-section,
  body[data-concept="momentum"] .solutions-hub,
  body[data-concept="momentum"] .industry-hub {
    padding-block:var(--v6-s8);
  }
  body[data-concept="momentum"] .service-grid,
  body[data-concept="momentum"] .industry-grid,
  body[data-concept="momentum"] .engagement-grid,
  body[data-concept="momentum"] .resource-grid,
  body[data-concept="momentum"] .challenge-grid,
  body[data-concept="momentum"] .package-grid {
    grid-template-columns:1fr;
  }
  /* Comfortable tap targets */
  body[data-concept="momentum"] .button {
    min-height:50px;
    width:100%;
    justify-content:center;
  }
  body[data-concept="momentum"] .button-row .button {
    width:100%;
  }
  /* Collection rows stack; handle and actions stay reachable. */
  .collection-row {
    grid-template-columns:28px 1fr 110px;
    gap:8px;
    padding:14px;
  }
  .collection-row > p {
    grid-column:2/-1;
  }
  .row-actions {
    grid-column:2/-1;
    display:flex;
    gap:8px;
  }
  .row-detail-grid {
    grid-template-columns:1fr;
  }
}

/* --------------------------------------------------------------------------
   15. MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce) {
  body[data-concept="momentum"] *,
  body[data-concept="momentum"] *:before,
  body[data-concept="momentum"] *:after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* CMS sidebar logo — concept-scoped rules are inert on admin routes. */
.cms-sidebar .logo-mark i,
.login-brand .logo-mark i {
  background:var(--v6-accent-500);
}

.cms-sidebar .brand-x,
.login-brand .brand-x {
  color:var(--v6-accent-300);
  text-shadow:none;
}

.cms-sidebar .brand-words small,
.login-brand .brand-words small {
  color:var(--v6-on-dark-muted);
}

/* --------------------------------------------------------------------------
   16. SPECIFICITY BACKSTOPS
   site-v2.css carries concept-scoped rules for these that outrank the earlier
   declarations, so the acid lime survived in the logo mark and brand subtitle.
   Matched specificity here rather than reaching for !important.
   -------------------------------------------------------------------------- */

body[data-concept="momentum"] .brand .logo-mark i,
body[data-concept="momentum"] .brand-dark .logo-mark i,
.cms-sidebar .brand .logo-mark i,
.login-brand .brand .logo-mark i {
  background:var(--v6-accent-500);
}

body[data-concept="momentum"] .brand-dark .brand-words small,
body[data-concept="momentum"] .brand .brand-words small,
.cms-sidebar .brand .brand-words small,
.login-brand .brand .brand-words small {
  color:var(--v6-on-dark-muted);
  border-top-color:transparent;
}

body[data-concept="momentum"] .brand .brand-x,
body[data-concept="momentum"] .brand-dark .brand-x {
  color:var(--v6-accent-300);
  text-shadow:none;
}

/* The four outcome cards were tinted pale blue / green / pink / lavender by
   nth-child rules whose specificity beat the plain .outcome-card override.
   The tints were arbitrary — they encoded nothing and read as decoration.
   One neutral surface; the accent is carried by the icon and index instead. */
body[data-concept="momentum"] .outcome-card:nth-child(1),
body[data-concept="momentum"] .outcome-card:nth-child(2),
body[data-concept="momentum"] .outcome-card:nth-child(3),
body[data-concept="momentum"] .outcome-card:nth-child(4),
body[data-concept="momentum"] .outcome-experience-grid .outcome-experience-card {
  background:var(--v6-paper);
  border:1px solid var(--v6-line);
  box-shadow:var(--v6-e1);
}

body[data-concept="momentum"] .outcome-card svg {
  color:var(--v6-accent-600);
}

body[data-concept="momentum"] .outcome-card .outcome-index,
body[data-concept="momentum"] .outcome-card > span {
  color:var(--v6-text-muted);
}

/* Decorative corner brackets inherited var(--green), which now resolves to the
   status colour. Status hues must never be decoration — moved to the accent. */
body[data-concept="momentum"] .page-hero-mark:before,
body[data-concept="momentum"] .page-hero-mark:after,
body[data-concept="momentum"] .detail-hero-mark:before,
body[data-concept="momentum"] .detail-hero-mark:after {
  border-color:var(--v6-accent-500);
}

body[data-concept="momentum"] .page-hero-mark svg,
body[data-concept="momentum"] .detail-hero-mark svg {
  color:var(--v6-accent-300);
}

/* Featured pricing card kicker was still on the old mint. */
body[data-concept="momentum"] .package-card.featured h2 small,
body[data-concept="momentum"] .package-card.featured .package-card-head b,
body[data-concept="momentum"] .package-card h2 small {
  color:var(--v6-accent-300);
}

body[data-concept="momentum"] .package-card:not(.featured) h2 small {
  color:var(--v6-accent-700);
}

body[data-concept="momentum"] .package-card.featured li svg {
  color:var(--v6-accent-300);
}

/* (Section 17 removed: the 2/3 split was reverted to the running banner;
   its rules are superseded by section 20.) */

/* ==========================================================================
   18. FOOTER — MICROSOFT.COM LAYOUT, EMERXING COLOURS
   Reference (microsoft.com/en-ca): six columns of plain links under small bold headings, then a
   dense single-row legal bar. No cards, no panels, no accent fills — the
   footer recedes completely so the page above it carries all the weight.
   ========================================================================== */

body[data-concept="momentum"] .site-footer {
  color:#B8C2D6;
  background:var(--v6-ink-950);
  border-top:1px solid rgba(255,255,255,.07);
  font-size:12px;
}

/* (superseded — see the later footer rules) */

body[data-concept="momentum"] .footer-main h4 {
  margin-bottom:var(--v6-s3);
  color:#FFFFFF;
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

body[data-concept="momentum"] .footer-main > div:not(.footer-brand) {
  gap:var(--v6-s2);
}

body[data-concept="momentum"] .footer-main > div:not(.footer-brand) a {
  color:#B8C2D6;
  font-size:12px;
  line-height:1.5;
}

body[data-concept="momentum"] .footer-main a:hover,
body[data-concept="momentum"] .site-footer a:hover {
  color:#FFFFFF;
  text-decoration:underline;
}

body[data-concept="momentum"] .footer-brand > p {
  max-width:38ch;
  margin:var(--v6-s4) 0;
  color:#9AA5BF;
  font-size:12.5px;
  line-height:1.6;
}

body[data-concept="momentum"] .footer-brand .brand-words strong {
  color:#FFFFFF;
}

body[data-concept="momentum"] .footer-brand .brand-words small {
  color:#9AA5BF;
}

body[data-concept="momentum"] .footer-brand .brand-x {
  color:var(--v6-accent-300);
}

body[data-concept="momentum"] .footer-brand .logo-mark i {
  background:var(--v6-accent-500);
}

body[data-concept="momentum"] .footer-brand .text-link,
body[data-concept="momentum"] .footer-brand a.button {
  color:var(--v6-accent-300);
  background:transparent;
  box-shadow:none;
  padding:0;
  min-height:0;
  font-size:12.5px;
  font-weight:600;
}

/* Social strip — flattened to plain inline links, Microsoft-style. */
body[data-concept="momentum"] .footer-social {
  margin:0;
  padding:var(--v6-s4) 0;
  background:transparent;
  border:0;
  border-top:1px solid rgba(255,255,255,.07);
  border-radius:0;
  gap:var(--v6-gap,var(--v6-s4));
}

body[data-concept="momentum"] .footer-social .eyebrow {
  color:var(--v6-accent-300);
  font-size:10px;
}

body[data-concept="momentum"] .footer-social > div:first-child strong {
  color:#FFFFFF;
  font-size:13px;
  font-weight:600;
}

body[data-concept="momentum"] .footer-social-links > a,
body[data-concept="momentum"] .social-link-pending {
  min-height:32px;
  padding:6px 10px;
  color:#C7D0E4;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--v6-r-sm);
  font-size:11.5px;
}

body[data-concept="momentum"] .footer-social-links > a:hover {
  color:#FFFFFF;
  background:var(--v6-accent-600);
  border-color:var(--v6-accent-500);
  text-decoration:none;
}

/* Legal bar — 11px, dense, one line where it fits. */
body[data-concept="momentum"] .footer-bottom {
  padding:var(--v6-s4) 0 var(--v6-s6);
  border-top:1px solid rgba(255,255,255,.07);
  color:#9AA5BF;
  font-size:11px;
}

body[data-concept="momentum"] .footer-bottom > span {
  order:2;
  margin-left:auto;
}

body[data-concept="momentum"] .footer-bottom > div {
  order:1;
  gap:0;
}

body[data-concept="momentum"] .footer-bottom > div > a {
  padding:2px 12px;
  color:#9AA5BF;
  font-size:11px;
}

body[data-concept="momentum"] .footer-bottom > div > a:first-child {
  padding-left:0;
}

body[data-concept="momentum"] .footer-bottom > div > a + a:before {
  background:rgba(255,255,255,.22);
}

body[data-concept="momentum"] .footer-bottom > div > a:hover {
  color:#FFFFFF;
}

body[data-concept="momentum"] .footer-bottom > div > span:last-child {
  margin-left:0;
  padding-left:12px;
  color:#8F9AB2;
  font-size:11px;
}

@media (max-width:900px) {
  body[data-concept="momentum"] .footer-main {
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  body[data-concept="momentum"] .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:var(--v6-s3);
  }
  body[data-concept="momentum"] .footer-bottom > span { order:0; margin-left:0; }
}

/* ==========================================================================
   19. DELIVERY RHYTHM — MICROSOFT "FOR BUSINESS" CARD PATTERN
   Photograph on top at a fixed 16:9, then heading, one line of copy and the
   result. Card width matches the ecosystem and service grids so every section
   on the page sits on the same module.
   ========================================================================== */

body[data-concept="momentum"] .delivery-timeline {
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:var(--v6-gap,var(--v6-s4));
  align-items:stretch;
}

body[data-concept="momentum"] .delivery-stage {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--v6-r-lg);
  transition:border-color .22s ease, transform .22s ease, background .22s ease;
}

body[data-concept="momentum"] .delivery-stage:hover {
  background:rgba(255,255,255,.07);
  border-color:var(--v6-accent-500);
  transform:translateY(-3px);
}

body[data-concept="momentum"] .delivery-stage-media {
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--v6-ink-800);
}

body[data-concept="momentum"] .delivery-stage-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}

body[data-concept="momentum"] .delivery-stage:hover .delivery-stage-media img {
  transform:scale(1.05);
}

/* Scrim so the index stays legible over any photograph. */
body[data-concept="momentum"] .delivery-stage-media:after {
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:60%;
  background:linear-gradient(to top, rgba(7,10,20,.85), transparent);
  pointer-events:none;
}

body[data-concept="momentum"] .delivery-stage-index {
  position:absolute;
  z-index:2;
  left:14px;
  bottom:12px;
  color:#fff;
  font:700 11px/1 var(--font-display);
  letter-spacing:.14em;
}

body[data-concept="momentum"] .delivery-stage-body {
  display:flex;
  flex-direction:column;
  gap:var(--v6-s3);
  padding:var(--v6-card-pad,var(--v6-s5));
  flex:1;
}

body[data-concept="momentum"] .delivery-stage-kicker {
  display:flex;
  align-items:center;
  gap:var(--v6-s2);
}

body[data-concept="momentum"] .delivery-stage-kicker svg {
  flex:none;
  color:var(--v6-accent-300);
}

body[data-concept="momentum"] .delivery-stage-kicker small {
  color:#fff;
  font:600 15px/1.25 var(--font-display);
  letter-spacing:-.01em;
  text-transform:none;
}

body[data-concept="momentum"] .delivery-stage p {
  margin:0;
  color:#A9B5CE;
  font-size:13.5px;
  line-height:1.55;
}

body[data-concept="momentum"] .delivery-stage strong {
  display:flex;
  align-items:flex-start;
  gap:var(--v6-s2);
  margin-top:auto;
  padding-top:var(--v6-s4);
  border-top:1px solid rgba(255,255,255,.10);
  color:#DCE4F5;
  font-size:12.5px;
  font-weight:600;
  line-height:1.4;
}

body[data-concept="momentum"] .delivery-stage strong svg {
  flex:none;
  margin-top:2px;
  color:var(--v6-positive);
}

/* Learning-loop note: flattened to a quiet bar, matching the footer's restraint. */
body[data-concept="momentum"] .delivery-loop-note {
  display:flex;
  align-items:center;
  gap:var(--v6-gap,var(--v6-s4));
  margin-top:var(--v6-s6);
  padding:var(--v6-s4) var(--v6-s5);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--v6-r-lg);
  color:#A9B5CE;
  font-size:13.5px;
}

body[data-concept="momentum"] .delivery-loop-note > svg {
  flex:none;
  color:var(--v6-accent-300);
}

body[data-concept="momentum"] .delivery-loop-note strong {
  display:block;
  margin:0 0 3px;
  padding:0;
  border:0;
  color:#fff;
  font-size:14px;
  font-weight:600;
}

body[data-concept="momentum"] .delivery-loop-note a {
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  color:var(--v6-accent-300);
  font-size:13px;
  font-weight:600;
}

body[data-concept="momentum"] .delivery-loop-note a:hover { color:#fff; }

@media (max-width:1100px) {
  body[data-concept="momentum"] .delivery-timeline { grid-template-columns:repeat(3, minmax(0,1fr)); }
}

@media (max-width:820px) {
  body[data-concept="momentum"] .delivery-timeline { grid-template-columns:repeat(2, minmax(0,1fr)); }
  body[data-concept="momentum"] .delivery-loop-note { flex-wrap:wrap; }
  body[data-concept="momentum"] .delivery-loop-note a { margin-left:0; }
}

@media (max-width:560px) {
  body[data-concept="momentum"] .delivery-timeline { grid-template-columns:1fr; }
}

/* ==========================================================================
   20. ECOSYSTEM RUNNING BANNER — ELEGANT CARDS
   The marquee stays (it's the running banner). What changes is the card: the
   infographic now gets a dedicated tinted media panel at a fixed ratio, and
   the text sits below it on a consistent baseline, so every card in the rail
   reads identically as it passes. Card width matches the delivery and service
   grids so the whole page stays on one module.
   ========================================================================== */

body[data-concept="momentum"] .ecosystem-disclaimer {
  display:flex;
  align-items:center;
  gap:var(--v6-s2);
  margin:calc(var(--v6-s6) * -1) 0 var(--v6-s6);
  color:var(--v6-text-muted);
  font-size:12px;
}

body[data-concept="momentum"] .ecosystem-disclaimer svg {
  flex:none;
  color:var(--v6-accent-600);
}

body[data-concept="momentum"] .partner-rail-shell {
  padding:4px 0 8px;
}

body[data-concept="momentum"] .partner-rail-card {
  width:296px;
  height:auto;
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
  background:var(--v6-paper);
  border:1px solid var(--v6-line);
  border-radius:var(--v6-r-lg);
  box-shadow:var(--v6-e1);
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

body[data-concept="momentum"] .partner-rail-card:hover {
  border-color:var(--v6-accent-300);
  box-shadow:var(--v6-e3);
  transform:translateY(-3px);
}

/* Media panel — fixed ratio so the rail never jitters as cards cycle. */
body[data-concept="momentum"] .partner-rail-media {
  aspect-ratio:16/10;
  display:grid;
  place-items:center;
  padding:var(--v6-card-pad,var(--v6-s5));
  background:linear-gradient(160deg, #F4F7FF 0%, #E8EFFE 100%);
  border-bottom:1px solid var(--v6-line);
}

body[data-concept="momentum"] .partner-rail-media img {
  width:auto;
  max-width:118px;
  max-height:100%;
  height:auto;
  display:block;
  animation:ecoFloat 6s ease-in-out infinite;
  transition:transform .3s ease;
}

body[data-concept="momentum"] .partner-rail-card:nth-child(2n) .partner-rail-media img { animation-delay:-1.5s; }
body[data-concept="momentum"] .partner-rail-card:nth-child(3n) .partner-rail-media img { animation-delay:-3s; }
body[data-concept="momentum"] .partner-rail-card:nth-child(4n) .partner-rail-media img { animation-delay:-4.5s; }

body[data-concept="momentum"] .partner-rail-card:hover .partner-rail-media img {
  transform:scale(1.06);
}

/* Text block — equal padding and a pinned footer keep every card aligned. */
body[data-concept="momentum"] .partner-rail-card > div:last-child {
  display:flex;
  flex:1;
  flex-direction:column;
  gap:var(--v6-s2);
  padding:var(--v6-card-pad,var(--v6-s5));
}

body[data-concept="momentum"] .partner-rail-card small {
  color:var(--v6-accent-700);
  font:700 10px/1 var(--font-display);
  letter-spacing:.13em;
  text-transform:uppercase;
}

body[data-concept="momentum"] .partner-rail-card strong {
  color:var(--v6-text-strong);
  font:600 17px/1.28 var(--font-display);
  letter-spacing:-.015em;
}

body[data-concept="momentum"] .partner-rail-card p {
  margin:0;
  min-height:3.1em;
  color:var(--v6-text-muted);
  font-size:13.5px;
  line-height:1.55;
}

body[data-concept="momentum"] .partner-rail-card > div:last-child > span {
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:auto;
  padding-top:var(--v6-s4);
  border-top:1px solid var(--v6-line);
  color:var(--v6-accent-700);
  font-size:11.5px;
  font-weight:600;
}

@media (max-width:640px) {
  body[data-concept="momentum"] .partner-rail-card { width:252px; }
}

/* The social strip is a .wrap element, so it must carry zero horizontal
   padding to sit on the same left edge as the footer columns above it and
   the legal bar below. Two earlier rules were fighting over this. */
body[data-concept="momentum"] .footer-social {
  padding-inline:0;
  justify-content:space-between;
  align-items:center;
}

body[data-concept="momentum"] .footer-social > div:first-child {
  margin:0;
}

/* ==========================================================================
   21. SECTION HEAD ASIDE
   The supporting copy now lives in a wrapper alongside an optional action, so
   a section's CTA sits directly under its own intro instead of being stranded
   after the content below it. Rules that targeted `.section-head > p` are
   re-pointed at the wrapper's paragraph.
   ========================================================================== */

body[data-concept="momentum"] .section-head-aside {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--v6-s5);
  padding-top:10px;
}

body[data-concept="momentum"] .section-head-aside > p {
  max-width:44ch;
  margin:0;
  color:var(--v6-text-muted);
  font-size:16px;
  line-height:1.62;
}

body[data-concept="momentum"] .section-head-dark .section-head-aside > p {
  color:#A9B5CE;
}

body[data-concept="momentum"] .section-head-action {
  flex:none;
  align-self:flex-start;
}

/* The old right-aligned block after the rail is no longer used on the home
   industries section; neutralise its margin where it still appears. */
body[data-concept="momentum"] .section-action {
  margin-top:var(--v6-s6);
}

@media (max-width:900px) {
  body[data-concept="momentum"] .section-head-aside {
    padding-top:0;
    gap:var(--v6-gap,var(--v6-s4));
  }
  body[data-concept="momentum"] .section-head-aside > p {
    max-width:60ch;
  }
}

/* ==========================================================================
   22. SECTION HEAD — TIGHTER, AND RAILS INSIDE THE LAYOUT FRAME
   ========================================================================== */

/* Heads that carry an action were leaving a tall empty band: a short aside
   sat top-aligned against a three-line heading. Bottom-aligning the aside
   closes that gap and puts the CTA next to the content it introduces. */
body[data-concept="momentum"] .section-head-has-action {
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:var(--v6-s7);
  align-items:end;
  margin-bottom:var(--v6-s6);
}

body[data-concept="momentum"] .section-head-has-action .section-head-aside {
  padding-top:0;
  gap:var(--v6-gap,var(--v6-s4));
  padding-bottom:4px;
}

body[data-concept="momentum"] .section-head-has-action h2 {
  max-width:22ch;
  margin-bottom:0;
}

body[data-concept="momentum"] .section-head-has-action .section-head-aside > p {
  max-width:40ch;
}

/* Rails now run inside the layout frame rather than bleeding to the viewport
   edge, so the banner shares the same left and right margin as every other
   section. Rounded and clipped so cards enter and leave cleanly. */
body[data-concept="momentum"] .industry-rail-shell,
body[data-concept="momentum"] .partner-rail-shell,
body[data-concept="momentum"] .hero-capability-shell {
  width:min(1180px, calc(100% - 48px));
  margin-inline:auto;
  border-radius:var(--v6-r-lg);
  overflow:hidden;
}

body[data-concept="momentum"] .industry-rail-track,
body[data-concept="momentum"] .partner-rail-track {
  padding-left:0;
}

/* Fade the frame edges so the loop reads as continuous motion inside the
   container rather than cards being chopped off at a hard border. */
body[data-concept="momentum"] .industry-rail-shell,
body[data-concept="momentum"] .partner-rail-shell {
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}

@media (max-width:900px) {
  body[data-concept="momentum"] .section-head-has-action {
    grid-template-columns:1fr;
    gap:var(--v6-gap,var(--v6-s4));
    align-items:start;
  }
  body[data-concept="momentum"] .industry-rail-shell,
  body[data-concept="momentum"] .partner-rail-shell,
  body[data-concept="momentum"] .hero-capability-shell {
    width:calc(100% - 30px);
  }
}

/* ==========================================================================
   23. ECOSYSTEM CARDS — PHOTOGRAPH + INFOGRAPHIC BADGE
   The card now leads with a real photograph. The original EmerXing artwork
   sits over it as a small white badge, so the infographic is still present
   and the card never reads as a third-party logo placement.
   ========================================================================== */

body[data-concept="momentum"] .partner-rail-media.has-photo {
  position:relative;
  aspect-ratio:16/10;
  padding:0;
  overflow:hidden;
  background:var(--v6-ink-800);
}

body[data-concept="momentum"] .partner-rail-media.has-photo .rail-photo {
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  display:block;
  animation:none;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}

body[data-concept="momentum"] .partner-rail-card:hover .rail-photo {
  transform:scale(1.05);
}

/* Badge holding the infographic. */
body[data-concept="momentum"] .rail-mark {
  position:absolute;
  z-index:2;
  left:14px;
  bottom:14px;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  padding:9px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.75);
  border-radius:var(--v6-r-md);
  box-shadow:0 6px 18px rgba(7,10,20,.28);
}

body[data-concept="momentum"] .rail-mark img {
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  display:block;
  animation:none;
}

/* Scrim keeps the badge readable over light photography. */
body[data-concept="momentum"] .partner-rail-media.has-photo:after {
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:55%;
  background:linear-gradient(to top, rgba(7,10,20,.55), transparent);
  pointer-events:none;
}

@media (max-width:640px) {
  body[data-concept="momentum"] .rail-mark {
    width:48px;
    height:48px;
    left:12px;
    bottom:12px;
  }
}

/* ==========================================================================
   24. UNIFIED CARD MODULE
   One box format everywhere, taken from the "Choose the outcome" cards.
   The original stylesheet gave each section its own arbitrary min-height
   (430 / 395 / 360 / 335 / 280 / 250px) and padding (28 / 26 / 25 / 23 / 20px),
   which is why sections never quite looked like siblings.

   Canonical: 24px padding, 1px hairline, 16px radius, 16px gap, and no fixed
   min-height — grid stretch equalises each row, so cards match without
   inventing empty space when copy is short.
   ========================================================================== */

body[data-concept="momentum"] .outcome-experience-grid,
body[data-concept="momentum"] .outcome-grid,
body[data-concept="momentum"] .service-grid,
body[data-concept="momentum"] .industry-grid,
body[data-concept="momentum"] .engagement-grid,
body[data-concept="momentum"] .resource-grid,
body[data-concept="momentum"] .challenge-grid,
body[data-concept="momentum"] .principle-grid,
body[data-concept="momentum"] .package-grid,
body[data-concept="momentum"] .delivery-timeline {
  gap:var(--v6-gap,var(--v6-s4));
  border:0;
  background:transparent;
  align-items:stretch;
}

body[data-concept="momentum"] .outcome-card,
body[data-concept="momentum"] .outcome-experience-grid .outcome-experience-card,
body[data-concept="momentum"] .service-card,
body[data-concept="momentum"] .industry-card,
body[data-concept="momentum"] .engagement-grid article,
body[data-concept="momentum"] .resource-grid article,
body[data-concept="momentum"] .challenge-grid article,
body[data-concept="momentum"] .principle-grid article,
body[data-concept="momentum"] .package-card,
body[data-concept="momentum"] .partner-rail-card,
body[data-concept="momentum"] .delivery-stage {
  min-height:0;
  display:flex;
  flex-direction:column;
  border-radius:var(--v6-r-lg);
  border:1px solid var(--v6-line);
  border-right-width:1px;
  border-top-width:1px;
}

/* Text padding is uniform; cards with a media panel keep the panel flush. */
body[data-concept="momentum"] .outcome-card,
body[data-concept="momentum"] .outcome-experience-grid .outcome-experience-card,
body[data-concept="momentum"] .service-card,
body[data-concept="momentum"] .industry-card,
body[data-concept="momentum"] .engagement-grid article,
body[data-concept="momentum"] .resource-grid article,
body[data-concept="momentum"] .challenge-grid article,
body[data-concept="momentum"] .principle-grid article,
body[data-concept="momentum"] .package-card {
  padding:var(--v6-card-pad,var(--v6-s5));
}

body[data-concept="momentum"] .partner-rail-card,
body[data-concept="momentum"] .delivery-stage {
  padding:0;
}

/* Cards on the dark canvas keep the module but invert the hairline. */
body[data-concept="momentum"] .delivery-stage {
  border-color:rgba(255,255,255,.10);
}

/* Anything pinned to the bottom of a card stays pinned once min-height is
   removed, so short copy no longer leaves a ragged gap above the footer. */
body[data-concept="momentum"] .outcome-card > a:last-child,
body[data-concept="momentum"] .service-card > a:last-child,
body[data-concept="momentum"] .industry-card > a:last-child,
body[data-concept="momentum"] .engagement-grid article > a:last-child,
body[data-concept="momentum"] .resource-grid article small:last-child,
body[data-concept="momentum"] .package-card > .button {
  margin-top:auto;
}

/* ==========================================================================
   25. FOOTER COLUMN DISTRIBUTION — OPTICAL BALANCE
   repeat(4, 1fr) gave four equal 272px columns. The brand column filled its
   width; the link columns held short items ("FAQs", "CMS"), leaving dead
   space inside the final column. Content therefore stopped short of the right
   edge while sitting flush at the left — reading as an off-centre block even
   though the container itself was perfectly centred.

   Widening the brand column and narrowing the link columns packs the links
   toward the right edge, so the block reads as optically balanced.
   ========================================================================== */

body[data-concept="momentum"] .footer-main {
  /* Brand column absorbs the slack; the three link columns are sized to their
     own content (auto) and separated by one equal gap. Because the grid fills
     the container, the final column's content ends flush against the right
     edge — so the block is both evenly spaced internally and aligned to the
     page's right margin. */
  grid-template-columns:minmax(0,1fr) auto auto auto;
  column-gap:var(--v6-s8);
  row-gap:var(--v6-s6);
  padding-block:var(--v6-s7) var(--v6-s6);
  align-items:start;
}

/* The brand paragraph was capped at 38ch, which left its own column short.
   Let it fill the column it has. */
body[data-concept="momentum"] .footer-brand > p {
  max-width:none;
  padding-right:var(--v6-s7);
}

/* Link columns: push the last one flush to the container's right edge. */
body[data-concept="momentum"] .footer-main > div:last-child {
  justify-self:end;
}

/* Keep the link columns from collapsing to a single cramped word. */
body[data-concept="momentum"] .footer-main > div:not(.footer-brand) {
  min-width:max-content;
}

/* Social strip and legal bar share the container edges exactly. */
body[data-concept="momentum"] .footer-social,
body[data-concept="momentum"] .footer-bottom,
body[data-concept="momentum"] .footer-main {
  padding-inline:0;
  margin-inline:auto;
}

@media (max-width:1024px) {
  body[data-concept="momentum"] .footer-main {
    grid-template-columns:1.4fr 1fr 1fr;
  }
  body[data-concept="momentum"] .footer-brand {
    grid-column:1/-1;
  }
  body[data-concept="momentum"] .footer-brand > p {
    padding-right:0;
    max-width:60ch;
  }
  body[data-concept="momentum"] .footer-main > div:last-child {
    justify-self:start;
  }
}

@media (max-width:640px) {
  body[data-concept="momentum"] .footer-main {
    grid-template-columns:1fr 1fr;
  }
}

/* ---------------------------------------------------------------- 26. MEDIA LIBRARY
   CMS-only. Unscoped by concept, because admin routes never set
   data-concept — the same reason the rest of the CMS rules are unscoped. */

.media-card { padding: var(--v6-s5); }

.media-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 40px 24px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--v6-accent-300); border-radius: var(--v6-r-lg);
  background: var(--v6-accent-100); color: var(--v6-ink-800);
  transition: background .15s ease, border-color .15s ease;
}
.media-dropzone:hover,
.media-dropzone:focus-visible,
.media-dropzone.over { background: #dce8fd; border-color: var(--v6-accent-600); outline: none; }
.media-dropzone strong { font-size: 15px; font-weight: 500; }
.media-dropzone small { font-size: 13px; color: var(--v6-ink-800); opacity: .72; }
.media-dropzone.compact { padding: 20px; }

.media-status { margin: 10px 0 0; font-size: 13px; color: var(--v6-ink-800); opacity: .8; min-height: 18px; }

.media-grid {
  display: grid; gap: 16px; margin-top: 20px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.media-tile {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--v6-line); border-radius: var(--v6-r-lg);
  background: #fff;
}
/* 4:3 keeps rows even regardless of the source aspect ratio, so the grid
   never develops the ragged look that broke alignment elsewhere. */
.media-thumb {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--v6-accent-100);
}
.media-thumb-video {
  display: flex; align-items: center; justify-content: center;
  color: var(--v6-accent-600);
}
.media-tile-body { padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.media-tile-body strong {
  font-size: 13px; font-weight: 500; color: var(--v6-ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.media-tile-body small { font-size: 12px; color: var(--v6-ink-800); opacity: .7; }

.media-tile-tools {
  display: flex; align-items: center; gap: 6px; padding: 0 12px 12px;
}
.media-tile-tools input {
  flex: 1; min-width: 0; font-size: 12px; padding: 6px 8px;
  border: 1px solid var(--v6-line); border-radius: 8px;
}
.media-tile-tools button {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--v6-line); border-radius: 8px;
  background: #fff; color: var(--v6-ink-800); cursor: pointer;
}
.media-tile-tools button:hover { border-color: var(--v6-accent-600); color: var(--v6-accent-600); }
.media-tile-tools [data-delete-media]:hover { border-color: #a32d2d; color: #a32d2d; }

.media-pick {
  margin: 0 12px 12px; padding: 7px 10px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--v6-accent-600); border-radius: 8px;
  background: var(--v6-accent-600); color: #fff;
}
.media-pick:hover { background: var(--v6-accent-500); }

.media-picker { max-width: 860px; }
.media-picker-layer { z-index: 60; }   /* above the item modal it opens from */
.media-grid.picker { max-height: 52vh; overflow-y: auto; }

/* Image field inside the item editor */
.image-field { display: flex; align-items: center; gap: 10px; }
.image-field-preview {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; overflow: hidden;
  border: 1px solid var(--v6-line); border-radius: 10px;
  background: var(--v6-accent-100); color: var(--v6-accent-600);
}
.image-field-preview img { width: 100%; height: 100%; object-fit: cover; }
.image-field [data-image-input] { flex: 1; min-width: 0; }
.image-field button { flex: none; display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 640px) {
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .image-field { flex-wrap: wrap; }
  .image-field [data-image-input] { flex: 1 1 100%; order: 3; }
}

/* ---------------------------------------------------------------- 27. DESIGN PANEL */

.theme-colour, .theme-number {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--v6-line);
}
.theme-colour:last-of-type, .theme-number:last-of-type { border-bottom: 0; }
.theme-colour > span:first-child, .theme-number > span:first-child { display: grid; gap: 2px; }
.theme-colour strong, .theme-number strong { font-size: 14px; font-weight: 500; }
.theme-colour small, .theme-number small { font-size: 12px; color: var(--v6-ink-800); opacity: .7; }

.theme-swatch { display: flex; align-items: center; gap: 8px; flex: none; }
.theme-swatch input[type="color"] {
  width: 40px; height: 34px; padding: 2px; cursor: pointer;
  border: 1px solid var(--v6-line); border-radius: 8px; background: #fff;
}
.theme-swatch input[type="text"] {
  width: 96px; font-family: var(--v6-mono, ui-monospace, monospace); font-size: 13px;
  text-transform: uppercase; padding: 7px 8px;
  border: 1px solid var(--v6-line); border-radius: 8px;
}
.theme-number input, .theme-number select {
  flex: none; width: 128px; padding: 7px 8px; font-size: 13px;
  border: 1px solid var(--v6-line); border-radius: 8px;
}

.theme-warning {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px;
  padding: 16px 18px; border-radius: var(--v6-r-lg);
  background: #fcebeb; border: 1px solid #f09595; color: #501313;
}
.theme-warning strong { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.theme-warning p { margin: 4px 0; font-size: 13px; }
.theme-warning small { display: block; margin-top: 8px; font-size: 12px; opacity: .8; }
.theme-fix {
  font: inherit; font-family: var(--v6-mono, ui-monospace, monospace);
  padding: 2px 7px; cursor: pointer;
  border: 1px solid #a32d2d; border-radius: 6px;
  background: #fff; color: #501313;
}
.theme-fix:hover { background: #a32d2d; color: #fff; }

.section-overrides { margin-top: 20px; }
.section-override {
  display: grid; align-items: end; gap: 12px; padding: 14px 0;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) auto;
  border-bottom: 1px solid var(--v6-line);
}
.section-override:last-of-type { border-bottom: 0; }
.section-override > strong { font-size: 14px; font-weight: 500; padding-bottom: 8px; }
.section-override label { display: grid; gap: 4px; font-size: 12px; color: var(--v6-ink-800); }
.section-override input {
  width: 100%; padding: 7px 8px; font-size: 13px; text-transform: uppercase;
  border: 1px solid var(--v6-line); border-radius: 8px;
}
.section-override input[type="number"] { text-transform: none; }
.section-override [data-section-clear] {
  display: grid; place-items: center; width: 30px; height: 32px; cursor: pointer;
  border: 1px solid var(--v6-line); border-radius: 8px;
  background: #fff; color: var(--v6-ink-800);
}
.section-override [data-section-clear]:hover { border-color: #a32d2d; color: #a32d2d; }
.section-override.has-problem input[data-section-field="text"],
.section-override.has-problem input[data-section-field="background"] { border-color: #a32d2d; }
.section-problem { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #a32d2d; }

@media (max-width: 900px) {
  .section-override { grid-template-columns: 1fr 1fr; }
  .section-override > strong { grid-column: 1 / -1; padding-bottom: 0; }
  .section-override [data-section-clear] { justify-self: start; }
}
@media (max-width: 560px) {
  .theme-colour, .theme-number { flex-direction: column; align-items: flex-start; gap: 8px; }
  .theme-number input, .theme-number select { width: 100%; }
}

/* ---------------------------------------------------------------- 28. RICH TEXT EDITOR */

.rich-label { display: grid; gap: 6px; }
.rich-editor {
  border: 1px solid var(--v6-line); border-radius: 10px; overflow: hidden;
  background: #fff;
}
.rich-editor:focus-within { border-color: var(--v6-accent-600); }

.rich-toolbar {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 6px;
  border-bottom: 1px solid var(--v6-line); background: var(--v6-accent-100);
}
.rich-toolbar button {
  min-width: 30px; height: 28px; padding: 0 8px; cursor: pointer;
  font-size: 13px; line-height: 1;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--v6-ink-900);
}
.rich-toolbar button:hover { background: #fff; border-color: var(--v6-line); }
.rich-toolbar button:focus-visible { outline: 2px solid var(--v6-accent-600); outline-offset: 1px; }
.rich-toolbar button[data-rich-command="bold"] { font-weight: 700; }
.rich-toolbar button[data-rich-command="italic"] { font-style: italic; }

.rich-surface {
  min-height: 110px; max-height: 320px; overflow-y: auto;
  padding: 12px 14px; font-size: 14px; line-height: 1.6;
  color: var(--v6-ink-900);
}
.rich-surface:focus { outline: none; }
.rich-surface p { margin: 0 0 10px; }
.rich-surface p:last-child { margin-bottom: 0; }
.rich-surface h3 { margin: 0 0 8px; font-size: 15px; font-weight: 500; }
.rich-surface ul, .rich-surface ol { margin: 0 0 10px; padding-left: 20px; }
.rich-surface li { margin-bottom: 4px; }
.rich-surface a { color: var(--v6-accent-600); text-decoration: underline; }
.rich-surface:empty::before {
  content: 'Start typing…'; color: var(--v6-ink-800); opacity: .45;
}

/* ---------------------------------------------------------------- 29. CMS-BUILT PAGES */

.custom-page-hero { padding-block: var(--v6-section-y, 96px); }
.custom-page-intro {
  max-width: 62ch; margin-top: 18px;
  font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.86);
}
.custom-page-intro p { margin: 0 0 12px; }
.custom-page-intro p:last-child { margin-bottom: 0; }
.custom-page-intro a { color: var(--v6-accent-300); }

.custom-page-figure { margin-top: 32px; }
.custom-page-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--v6-r-lg); object-fit: cover; max-height: 460px;
}

.custom-page-section { padding-block: var(--v6-section-y, 96px); }
.custom-page-block { display: grid; gap: 32px; align-items: center; }
.custom-page-block.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
.custom-page-block h2 { margin: 0 0 14px; }
.custom-page-body { max-width: 66ch; font-size: 16px; line-height: 1.7; }
.custom-page-body p { margin: 0 0 12px; }
.custom-page-body p:last-child { margin-bottom: 0; }
.custom-page-body ul, .custom-page-body ol { margin: 0 0 12px; padding-left: 22px; }
.custom-page-body li { margin-bottom: 6px; }
.custom-page-block img {
  width: 100%; height: auto; display: block;
  border-radius: var(--v6-r-lg); object-fit: cover;
}

@media (max-width: 900px) {
  .custom-page-block.has-image { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------- 30. THEME WIDTH
   .wrap is defined in site-v2.css. Rather than edit that minified file, the
   theme's content-width token is applied here, scoped to the active concept.
   The fallback is the original value, so removing the theme changes nothing. */
/* The light-surface token. Section backgrounds live in site-v2.css, so they
   are re-pointed here rather than editing that file. Fallbacks are the exact
   current values, so a site with no theme saved renders identically. */
body[data-concept="momentum"],
body[data-concept="momentum"] .white-section {
  background: var(--v6-surface, #fff);
}

body[data-concept="momentum"] .wrap {
  width: min(var(--v6-max-width, 1180px), calc(100% - 48px));
}

/* ---------------------------------------------------------------- 31. PAGE SECTION EDITOR */

.page-sections {
  margin: 20px 0; padding: 16px;
  border: 1px solid var(--v6-line); border-radius: var(--v6-r-lg);
  background: var(--v6-accent-100);
}
.page-sections-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.page-sections-head strong { display: block; font-size: 14px; font-weight: 500; }
.page-sections-head small { font-size: 12px; color: var(--v6-ink-800); opacity: .75; }
.page-sections-empty {
  margin: 0; padding: 14px; font-size: 13px; text-align: center;
  color: var(--v6-ink-800); opacity: .75;
  border: 1px dashed var(--v6-accent-300); border-radius: 10px; background: #fff;
}

.page-section-row {
  display: grid; gap: 10px; margin-bottom: 10px; padding: 12px;
  background: #fff; border: 1px solid var(--v6-line); border-radius: 10px;
}
.page-section-row:last-child { margin-bottom: 0; }
.page-section-row.dragging { opacity: .45; }
.page-section-row.drop-target { border-color: var(--v6-accent-600); box-shadow: 0 0 0 2px var(--v6-accent-100); }

.page-section-head { display: flex; align-items: center; gap: 8px; }
.page-section-head strong { flex: 1; font-size: 13px; font-weight: 500; }
.page-section-grip { display: grid; place-items: center; cursor: grab; color: var(--v6-ink-800); opacity: .55; }
.page-section-grip:active { cursor: grabbing; }

.page-section-tools { display: flex; gap: 4px; }
.page-section-tools button {
  display: grid; place-items: center; width: 26px; height: 26px; cursor: pointer;
  border: 1px solid var(--v6-line); border-radius: 6px; background: #fff; color: var(--v6-ink-800);
}
.page-section-tools button:hover:not(:disabled) { border-color: var(--v6-accent-600); color: var(--v6-accent-600); }
.page-section-tools button:disabled { opacity: .3; cursor: default; }
.page-section-tools [data-section-down] svg { transform: rotate(180deg); }
.page-section-tools [data-section-remove]:hover { border-color: #a32d2d; color: #a32d2d; }

.page-section-row label { display: grid; gap: 4px; font-size: 12px; color: var(--v6-ink-800); }
.page-section-row .rich-surface { min-height: 80px; }

@media (max-width: 640px) {
  .page-sections-head { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------- 32. ROW ACTIONS */

.row-duplicate {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  cursor: pointer; border: 1px solid var(--v6-line); border-radius: 8px;
  background: #fff; color: var(--v6-ink-800);
}
.row-duplicate:hover { border-color: var(--v6-accent-600); color: var(--v6-accent-600); }
.row-duplicate:focus-visible { outline: 2px solid var(--v6-accent-600); outline-offset: 1px; }

/* ---------------------------------------------------------------- 33. REVISION HISTORY */

.revision-list { display: grid; gap: 10px; }
.revision-row {
  display: grid; align-items: center; gap: 14px; padding: 14px 16px;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  border: 1px solid var(--v6-line); border-radius: var(--v6-r-lg); background: #fff;
}
.revision-when { display: grid; gap: 2px; }
.revision-when strong { font-size: 13px; font-weight: 500; }
.revision-when small { font-size: 12px; color: var(--v6-ink-800); opacity: .7; }
.revision-summary { margin: 0; font-size: 14px; color: var(--v6-ink-900); }
.revision-actions { display: flex; gap: 8px; }
.revision-actions .button { padding: 7px 12px; font-size: 13px; }

.revision-diff { max-width: 780px; }
.revision-note { margin: 0 0 14px; font-size: 13px; color: var(--v6-ink-800); opacity: .8; }
.diff-list { display: grid; gap: 10px; max-height: 54vh; overflow-y: auto; margin-bottom: 16px; }
.diff-row {
  padding: 10px 12px; border: 1px solid var(--v6-line); border-radius: 10px;
  background: var(--v6-accent-100);
}
.diff-row strong {
  display: block; margin-bottom: 6px; font-size: 12px; font-weight: 500;
  font-family: var(--v6-mono, ui-monospace, monospace); color: var(--v6-ink-800);
}
.diff-row > div { display: grid; gap: 6px; }
.diff-before, .diff-after {
  padding: 6px 8px; font-size: 13px; border-radius: 6px; word-break: break-word;
}
.diff-before { background: #fcebeb; color: #501313; text-decoration: line-through; opacity: .85; }
.diff-after { background: #e1f5ee; color: #04342c; }

@media (max-width: 820px) {
  .revision-row { grid-template-columns: 1fr; }
  .revision-actions { justify-content: flex-start; }
}

/* --- CMS sidebar: fit every tab, on every screen ------------------------

   The nav demanded 722px of vertical space: a 93px brand block, 44px of
   nav padding, and thirteen buttons at min-height:45px. A 1366x768 laptop
   gives roughly 618px of viewport, so the last three entries — History,
   Inquiries and Launch checks — were rendered, present in the DOM, and
   clipped off the bottom with no way to reach them. Invisible but present
   is the most confusing kind of missing.

   It was survivable at ten items. The CMS update took it to thirteen.

   A scrollbar alone would be treating the symptom: a primary navigation
   should not need scrolling to reach half of itself. So the layout is
   tightened as the viewport gets shorter, and the scrollbar remains only
   as a genuine last resort for very short windows.

   Budget after this change, at the 680px breakpoint:
       brand 56 + padding 20 + (13 x 36) = 544px, inside ~618px.          */

.cms-sidebar {
  /* Last resort, not the mechanism. Reachable at any window size. */
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.25) transparent;
}

.cms-sidebar nav {
  /* A flex child will not shrink below its content height without this, so
     the scrollbar would never appear however overflow is set. */
  min-height:0;
}

/* The default scrollbar is invisible on a dark background — it would look
   broken rather than scrollable. */
.cms-sidebar::-webkit-scrollbar { width:8px; }
.cms-sidebar::-webkit-scrollbar-track { background:transparent; }
.cms-sidebar::-webkit-scrollbar-thumb {
  border-radius:999px;
  background:rgba(255,255,255,.22);
}
.cms-sidebar:hover::-webkit-scrollbar-thumb { background:rgba(255,255,255,.34); }

/* Typical laptop. Trims 143px — enough to fit on a 1366x768 screen. */
@media (max-height:860px) {
  .cms-brand            { min-height:68px; padding:0 20px; }
  .cms-sidebar nav      { padding:12px 12px; }
  .cms-sidebar nav button,
  .cms-sidebar-bottom button,
  .cms-sidebar-bottom a { min-height:39px; }
}

/* Short windows: someone with a browser toolbar stack, or a half-height
   window on a laptop. */
@media (max-height:700px) {
  .cms-brand            { min-height:56px; }
  .cms-sidebar nav      { padding:10px 12px; }
  .cms-sidebar nav button,
  .cms-sidebar-bottom button,
  .cms-sidebar-bottom a { min-height:36px; font-size:12px; gap:10px; }
}

/* Genuinely tiny — a very short window, or a phone in landscape. Labels
   stay visible; only the breathing room goes. */
@media (max-height:580px) {
  .cms-brand            { min-height:48px; }
  .cms-sidebar nav button,
  .cms-sidebar-bottom button,
  .cms-sidebar-bottom a { min-height:32px; font-size:11.5px; }
}