/* ============================================================================
   BLOCKS — one CSS block per Figma "Content Blocks" component set (15 total)
   ----------------------------------------------------------------------------
   Class names match the Figma component name, kebab-cased (.hero-section,
   .image-text-split, .six-card-grid). Variant classes match Figma variant
   values (--theme-dark, --cards-4x, --image-side-left).

   Blocks are self-contained: no block depends on another block's styles or on
   page context. References css/tokens.css semantic roles only.

   Populated in Phase 3, one block at a time.
   ============================================================================ */

/* ── Block 1 · Hero Section (component set 85:1679) ────────────────────────────
   Variants: Size=Default (85:1678, 1439) / Size=Mobile (85:1677, 427).
   Slots: Title (eyebrow) · Subtitle (H1) · Paragraph · Button Label · Image 590×584.
   Desktop = two EQUAL fractional columns (flex:1 0 0 each), gap 60, text left /
   image right. Below --bp-mobile (768) the columns stack, image on top, centred.
   The eyebrow reuses .section-label; the CTA reuses .buttons (see report/INVENTED). */
.hero-section {                              /* shell (surface + centring + h-padding) via .section */
  border-bottom: var(--border-hairline) solid var(--border-divider);
}
.hero-section__inner {
  padding-block: var(--space-100);            /* 100 top/bottom */
  display: flex;
  align-items: center;
  gap: var(--space-60);                        /* 60 between columns */
}
.hero-section__text {
  flex: 1 0 0;                               /* 1fr — equal to image column */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);                      /* 40 — copy group ↔ CTA */
}
.hero-section__copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-30);                        /* 30 — eyebrow/title/paragraph */
}
.hero-section__title {                       /* Subtitle (H1) slot */
  margin: 0;
  width: 100%;                               /* Figma min-w-full */
  font-family: var(--font-display);
  font-size: var(--size-display);            /* Size=Default 48/58 */
  line-height: var(--lh-display);
  font-weight: var(--wt-display);
  color: var(--text-heading);
}
.hero-section__paragraph {                   /* Paragraph slot (multi-paragraph) */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--lh-body);                       /* blank-line spacing = one body line (27) */
  margin: 0;
}
.hero-section__paragraph p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);               /* 17/27 */
  line-height: var(--lh-body);
  font-weight: var(--wt-body);
  color: var(--text-body);
}
.hero-section__cta { flex: none; }           /* layout hook only — styling stays in .buttons */
.hero-section__media {                       /* Image slot 590×584 */
  flex: 1 0 0;                               /* 1fr — equal to text column */
  min-width: 0;
  aspect-ratio: var(--media-aspect);
  border-radius: var(--radius-media);
  overflow: hidden;
}
.hero-section__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;                       /* DESIGNED — Figma object-contain: letterbox, never crop */
}

@media (max-width: 768px) {                   /* = --bp-mobile (INVENTED) → Size=Mobile */
  .hero-section__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-40);                     /* 40; py 100 stays, h-padding via .section__inner */
  }
  .hero-section__media { order: -1; width: 100%; flex: none; }   /* image on top */
  .hero-section__text { align-items: center; text-align: center; width: 100%; }
  .hero-section__copy { align-items: center; }
  .hero-section__title { font-size: var(--size-h1); line-height: var(--lh-h1); } /* 38/42 */
  .hero-section__cta { width: 100%; justify-content: center; }
  /* Figma mobile hero uses the Section Label VERTICAL variant (icon above text).
     Re-lay the element to its vertical form — same rules as
     .section-label--layout-vertical, applied as composition, no restyle. */
  .hero-section .section-label { flex-direction: column; align-items: center; gap: var(--space-10); }
}

/* ── Block 2 · Page Title Header (component set 85:3876) ───────────────────────
   Simple interior-page header. Variants: Size=Default (85:3875, 1440) /
   Size=Mobile (85:3874, 428). Slots: Title (eyebrow) · Subtitle (H1) · Paragraph.
   No Theme variant — light surface only.
   Size is expressed as a breakpoint (--bp-mobile, INVENTED — the design has no
   breakpoint, only two fixed frames). Desktop = base, mobile = @media override. */
.page-title-header {                                /* shell via .section */
  border-bottom: var(--border-hairline) solid var(--border-divider);  /* #AED5EE */
}
.page-title-header__inner {
  padding-block: var(--space-60);                     /* 60 top/bottom */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-30);
}
.page-title-header__title {                         /* Subtitle (H1) slot */
  margin: 0;
  width: 100%;                                      /* Figma min-w-full — wrap at container, not max-content */
  font-family: var(--font-display);
  font-size: var(--size-display);                   /* Size=Default 48/58 */
  line-height: var(--lh-display);
  font-weight: var(--wt-display);
  color: var(--text-heading);                       /* #122D3C */
}
.page-title-header__paragraph {                     /* Paragraph slot */
  margin: 0;
  width: 100%;                                      /* Figma min-w-full */
  font-family: var(--font-body);
  font-size: var(--size-body);                      /* 17/27 */
  line-height: var(--lh-body);
  font-weight: var(--wt-body);
  color: var(--text-body);                          /* #336887 */
}

@media (max-width: 768px) {                          /* = --bp-mobile (INVENTED) */
  .page-title-header__title {                        /* py 60 stays; h-padding via .section__inner */
    font-size: var(--size-h1);                       /* Size=Mobile 38/42 */
    line-height: var(--lh-h1);
  }
}

/* ── Block 3 · Centered Text Section (component set 38:1313) ───────────────────
   Variants: Size=Default/Mobile × Theme=Light/Dark.
     Default Light 76:1550 · Default Dark 38:1312 · Mobile Light 76:1558 · Mobile Dark 38:1311.
   Slots: Title (lead-in = Section Label) · Paragraph (24/30 medium) · Body Text (24/30 bold).
   Light and Dark are LAYOUT-IDENTICAL; Theme is pure colour remap, applied by adding
   .theme-dark to the block. This CSS references roles only — it never branches on theme.
   Desktop is LEFT-aligned (Figma pl-100 pr-417 → 922 measure), mobile is centred.
   (The component name says "Centered" but only the mobile composition is centred.) */
.centered-text-section {                     /* shell via .section */
  border-bottom: var(--border-hairline) solid var(--border-divider);
}
.centered-text-section__inner {
  padding-block: var(--space-100);            /* 100 top/bottom */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-30);                        /* 30 */
}
.centered-text-section__paragraph,
.centered-text-section__body-text {
  width: 100%;
  max-width: var(--measure-prose);            /* 922 left-column measure */
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-h4);                 /* 24/30 */
  line-height: var(--lh-h4);
  color: var(--text-body);                   /* #336887 light → #EFF7FC dark (remap) */
}
.centered-text-section__paragraph {
  display: flex;
  flex-direction: column;
  gap: var(--lh-h4);                         /* blank-line spacing = one line (30) */
  font-weight: var(--wt-h4);                 /* Medium 500 */
}
.centered-text-section__paragraph p { margin: 0; }
.centered-text-section__body-text { font-weight: var(--wt-body-strong); } /* Bold 700 */

@media (max-width: 768px) {                   /* = --bp-mobile (INVENTED) → Size=Mobile: centred */
  .centered-text-section__inner {             /* py 100 stays; h-padding via .section__inner */
    align-items: center;
    text-align: center;
  }
  .centered-text-section__paragraph,
  .centered-text-section__body-text { max-width: none; }
  .centered-text-section .section-label { flex-direction: column; align-items: center; gap: var(--space-10); }
}

/* ── Block 4 · Image + Text Split (component set 85:3387) ──────────────────────
   Variants: Size=Default/Mobile × Image Side=Left/Right × Theme=Light/Dark.
     Default Right Light 85:3388 · Left Light 85:3432 · Right Dark 150:4926 · Mobile 85:3396.
   Slots: Title (eyebrow) · Subtitle (H2) · Paragraph · Button Label · Image 590×584.
   Two equal 1fr columns (like Hero) but H2 title + object-cover image. Image Side flips
   column order; mobile stacks image-on-top for both. Theme = colour remap via .theme-dark
   (block never branches on theme). Shell (surface/centring/h-padding) via .section.
   NOTE: Figma's dark variant tints the eyebrow GS-Jazz and the paragraph GS-Gulf-Blue,
   differing from Block 3's dark eyebrow/paragraph. Kept the shared theme roles
   (--label-accent, --text-body) rather than invent per-block dark colours — see
   DECISIONS_NEEDED.md. */
.image-text-split { border-bottom: var(--border-hairline) solid var(--border-divider); }
.image-text-split__inner {
  padding-block: var(--space-100);           /* 100 top/bottom */
  display: flex;
  align-items: center;
  gap: var(--space-60);                      /* 60 between columns */
}
.image-text-split__text {
  flex: 1 0 0;                               /* 1fr */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);                      /* 40 — copy ↔ CTA */
}
.image-text-split__copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-30);                      /* 30 — eyebrow/title/paragraph */
}
.image-text-split__title {                   /* Subtitle (H2) slot */
  margin: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-h2);                 /* 36/42 SemiBold */
  line-height: var(--lh-h2);
  font-weight: var(--wt-h2);
  color: var(--text-heading);
}
.image-text-split__paragraph {              /* Paragraph slot */
  margin: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-body);               /* 17/27 */
  line-height: var(--lh-body);
  font-weight: var(--wt-body);
  color: var(--text-body);
}
.image-text-split__cta { flex: none; }       /* layout hook — styling stays in .buttons */
.image-text-split__media {                   /* Image slot 590×584 */
  flex: 1 0 0;                               /* 1fr — equal to text column */
  min-width: 0;
  aspect-ratio: var(--media-aspect);
  border-radius: var(--radius-media);
  overflow: hidden;
}
.image-text-split__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                         /* DESIGNED — Figma object-cover (crop to fill) */
}
/* Image Side = Left → image column before text */
.image-text-split--image-side-left .image-text-split__media { order: -1; }

/* Image-free variant (--no-media) — INVENTED, see INVENTED.md. The 63 service
   sub-topics have no photography and reusing one photo 63 times would read as
   broken, so the media column is dropped and the text is capped at the prose
   measure and centred (rather than stretched full-bleed, which wrecks line
   length). Layout only — colour/type stay in the shared rules above. */
.image-text-split--no-media .image-text-split__media { display: none; }
.image-text-split--no-media .image-text-split__inner { justify-content: center; }
.image-text-split--no-media .image-text-split__text {
  flex: 0 1 var(--measure-prose);            /* stop the 1fr stretch so max-width takes hold */
  max-width: var(--measure-prose);           /* 922 — readable measure for text blocks */
}

@media (max-width: 768px) {                   /* = --bp-mobile → Size=Mobile: stack, image on top */
  .image-text-split__inner { flex-direction: column; align-items: center; }
  .image-text-split__media { order: -1; width: 100%; flex: none; }   /* image on top (both sides) */
  .image-text-split__text { align-items: center; text-align: center; width: 100%; }
  .image-text-split__copy { align-items: center; }
  .image-text-split__cta { width: 100%; justify-content: center; }
  .image-text-split .section-label { flex-direction: column; align-items: center; gap: var(--space-10); }
}

/* ── Block 5 · Six Card Grid (component set 85:1762) ───────────────────────────
   Variants: Size=Default/Mobile × Cards=3x/4x × Theme=Light/Dark.
     3x Light 85:1761 · 4x Light 128:4412 · 3x Dark 146:4914 · Mobile Light 85:1760.
   Slots: Title (eyebrow) · Title (H2) · Subheader · per card: Number · Card Title · Card Body.
   Centred header + a CSS grid of cards (3x=3 cols/6 cards, 4x=4 cols/8 cards, mobile=1).
   Cards use --surface-card (theme-aware). Theme via .theme-dark (no theme branch); shell
   via .section. NOTE: Figma's dark eyebrow is GS-Jazz (like Block 4) — kept --label-accent
   (renders GS-Light-Blue). See DECISIONS_NEEDED.md. */
.six-card-grid { border-bottom: var(--border-hairline) solid var(--border-divider); }
.six-card-grid__inner {
  padding-block: var(--space-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-60);                      /* 60 header ↔ grid */
}
.six-card-grid__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-30);                      /* 30 eyebrow/title/subheader */
  text-align: center;
}
.six-card-grid__title {                      /* H2 */
  margin: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  font-weight: var(--wt-h2);
  color: var(--text-heading);
}
.six-card-grid__subheader {
  margin: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: var(--wt-body);
  color: var(--text-heading);                /* #122D3C light → white dark */
}
.six-card-grid__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* Cards=3x default. minmax(0,…) lets
                                                         tracks shrink so long card titles wrap
                                                         instead of forcing an overflow. */
  gap: var(--space-30);
}
.six-card-grid--cards-4x .six-card-grid__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Undesigned 769–1024 band (INVENTED breakpoint — see INVENTED.md): 3/4 tracks get
   too narrow for the card titles here, so step to 2 columns before the ≤768 single
   column. Without this, cards either overflow the row or break titles mid-word. */
@media (max-width: 1024px) {
  .six-card-grid__grid,
  .six-card-grid--cards-4x .six-card-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.six-card-grid__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);                      /* 20 inside card */
  padding: var(--space-30);
  background: var(--surface-card);           /* #EFF7FC light / #336887 dark */
  border-radius: var(--radius-control);
}
.six-card-grid__number {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: var(--wt-body);
  color: var(--accent-secondary-light);      /* #4BBEB9 both themes */
}
.six-card-grid__card-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-h4);                 /* 24/30 Medium */
  line-height: var(--lh-h4);
  font-weight: var(--wt-h4);
  color: var(--text-heading);
  overflow-wrap: break-word;                 /* safety: never overflow a shrunk track */
}
.six-card-grid__card-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: var(--wt-body);
  color: var(--text-heading);                /* #122D3C light → white dark */
  overflow-wrap: break-word;
}
/* Card-as-link (sibling-services grid on service pages) — INVENTED interaction, see
   INVENTED.md. Strip the global anchor underline from the whole card; signal the
   link by underlining only the title on hover, and keep a keyboard focus ring. */
a.six-card-grid__card { text-decoration: none; }
a.six-card-grid__card:hover .six-card-grid__card-title { text-decoration: underline; }
a.six-card-grid__card:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
@media (max-width: 768px) {                   /* = --bp-mobile → single column; eyebrow HORIZONTAL (85:1760) */
  .six-card-grid__grid,
  .six-card-grid--cards-4x .six-card-grid__grid { grid-template-columns: 1fr; }
}

/* ── Block 6 · Icon Feature Grid (component set 85:1883) ───────────────────────
   Variants: Size=Default/Mobile × Theme=Light/Dark. 138:4914 DL · 85:1882 DD · 138:4928 mob.
   Slots: Title (eyebrow) · Title (H2) · Paragraph · per item ×6: Headline · Description.
   LEFT-aligned header + a 2-col grid (row-gap 60 / col-gap 30) of .bullet-point-items
   (Style=w/Text). Items reuse the element: light theme → --colorway-dark bullets,
   dark theme → .theme-dark + --colorway-light bullets. Shell via .section.
   NOTE: Figma dark eyebrow here is GS-Jazz-Dark (teal) — a 3rd dark-eyebrow value across
   blocks; kept --label-accent. See DECISIONS_NEEDED.md. */
.icon-feature-grid { border-bottom: var(--border-hairline) solid var(--border-divider); }
.icon-feature-grid__inner {
  padding-block: var(--space-100);
  display: flex;
  flex-direction: column;
  align-items: flex-start;                   /* header + grid left-aligned */
  gap: var(--space-60);
}
.icon-feature-grid__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-30);
}
.icon-feature-grid__title {                  /* H2 */
  margin: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  font-weight: var(--wt-h2);
  color: var(--text-heading);
}
.icon-feature-grid__paragraph {
  margin: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: var(--wt-body);
  color: var(--text-body);
}
.icon-feature-grid__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);     /* 2 columns, 6 items */
  column-gap: var(--space-30);
  row-gap: var(--space-60);
}
@media (max-width: 768px) {                   /* = --bp-mobile → single column */
  .icon-feature-grid__grid { grid-template-columns: 1fr; row-gap: var(--space-30); }
  .icon-feature-grid .section-label { flex-direction: column; align-items: center; gap: var(--space-10); }
}

/* ── Block 11 · CTA / Two Button (component set 38:1174) ───────────────────────
   Variants: Size=Default/Mobile × Theme=Light/Dark. 38:1173 DL · 138:5411 DD · 38:1172 mobL.
   Slots: Title (eyebrow) · Subtitle (H2) · Paragraph (H4 24/30) · Button Primary · Button Secondary.
   Centred content capped at --measure-cta. Two buttons reuse .buttons; the secondary flips
   per theme in MARKUP — light .buttons--style-secondary, dark .buttons--style-white-line (Figma
   uses a filled-white button on light, an outline on dark). Shell via .section; mobile stacks
   buttons full-width. NOTE: dark paragraph is GS-Gulf-Blue in Figma; kept --text-body (see
   DECISIONS_NEEDED.md). */
.cta-two-button { border-bottom: var(--border-hairline) solid var(--border-divider); }
.cta-two-button__inner {
  padding-block: var(--space-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-60);
}
.cta-two-button__header {
  width: 100%;
  max-width: var(--measure-cta);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-30);
  text-align: center;
}
.cta-two-button__title {                     /* Subtitle (H2) */
  margin: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  font-weight: var(--wt-h2);
  color: var(--text-heading);
}
.cta-two-button__paragraph {                 /* Paragraph (H4 24/30) */
  margin: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-h4);
  line-height: var(--lh-h4);
  font-weight: var(--wt-h4);
  color: var(--text-body);
}
.cta-two-button__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-30);
}
@media (max-width: 768px) {                   /* = --bp-mobile → buttons stack full-width */
  .cta-two-button__buttons { flex-direction: column; align-items: stretch; width: 100%; }
  .cta-two-button__buttons .buttons { width: 100%; }
  .cta-two-button .section-label { flex-direction: column; align-items: center; gap: var(--space-10); }
}


/* ── Block 7 · Checklist Grid (component set 113:7056) ─────────────────────────
   Variants: Size=Default/Mobile × Theme=Light/Dark. 138:4700 DL · 113:7055 DD.
   Slots: Title (eyebrow) · Section_A_Title (H2) · Section_A_Intro (paragraph) ·
   10 item Headlines (2 cols × 5, checkmark-only bullets) · Closing Statement (ul) · Button.
   Reuses .bullet-point-items --style-headline (light→colorway-dark, dark→colorway-light) and
   .buttons. Shell via .section; mobile → 1 col. NOTE: Figma light button is navy (GS-Dark-Blue);
   used .buttons--style-primary (blue) to avoid a new theme-aware button colour. See DECISIONS. */
.checklist-grid { border-bottom: var(--border-hairline) solid var(--border-divider); }
.checklist-grid__inner {
  padding-block: var(--space-100);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-60);
}
.checklist-grid__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-30);
}
.checklist-grid__title {
  margin: 0; width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-h2); line-height: var(--lh-h2); font-weight: var(--wt-h2);
  color: var(--text-heading);
}
.checklist-grid__intro {
  margin: 0; width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-body); line-height: var(--lh-body); font-weight: var(--wt-body);
  color: var(--text-body);
}
.checklist-grid__columns {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-60);
  align-items: start;
}
.checklist-grid__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-30);
}
.checklist-grid__closing {
  width: 100%;
  border-top: var(--border-hairline) solid var(--border-divider);
  padding-top: var(--space-30);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-30);
}
.checklist-grid__list {
  margin: 0;
  padding-left: var(--space-30);
  list-style: disc;
  font-family: var(--font-body);
  font-size: var(--size-lead); line-height: var(--lh-lead); font-weight: var(--wt-lead);
  color: var(--text-body);
  text-transform: capitalize;
}
.checklist-grid__list li { margin: 0; }
@media (max-width: 768px) {
  /* Size=Mobile (138:4721): 10 items in ONE column, eyebrow stays HORIZONTAL. */
  .checklist-grid__columns { grid-template-columns: 1fr; gap: var(--space-30); }
}

/* ── Block 8 · Numbered Steps (component set 128:4106) ─────────────────────────
   Variants: Size=Default/Mobile × Theme=Light/Dark. 128:4105 DL · 138:5248 DD.
   Slots: Title (eyebrow) · Subheader (H2) · per step ×4: Number · Step Title · Lead · Detail.
   Header (border-b) + 4 step rows (border-b each): [Number | Step Title 1fr | Lead+Detail 1fr].
   No section-level divider (Figma border-0). Number = --surface-accent; all step text =
   --text-heading (→white on dark). Borders --border-divider. Shell via .section; mobile stacks
   each step to a column (inferred — mobile variant not extracted). */
.numbered-steps__inner {
  padding-block: var(--space-100);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-60);
}
.numbered-steps__header {
  width: 100%;
  border-bottom: var(--border-hairline) solid var(--border-divider);
  padding-bottom: var(--space-50);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-30);
}
.numbered-steps__title {
  margin: 0; width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-h2); line-height: var(--lh-h2); font-weight: var(--wt-h2);
  color: var(--text-heading);
}
.numbered-steps__step {
  width: 100%;
  border-bottom: var(--border-hairline) solid var(--border-divider);
  padding-bottom: var(--space-50);
  display: flex;
  gap: var(--space-30);
  align-items: flex-start;
}
.numbered-steps__number {
  flex: none;
  font-family: var(--font-body);
  font-size: var(--size-h3); line-height: var(--lh-h3); font-weight: var(--wt-h3);
  color: var(--surface-accent);              /* #58AADB both themes */
}
.numbered-steps__step-title {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-h2); line-height: var(--lh-h2); font-weight: var(--wt-h2);
  color: var(--text-heading);
}
.numbered-steps__step-text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.numbered-steps__lead {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-h4); line-height: var(--lh-h4); font-weight: var(--wt-h4);
  color: var(--text-heading);
}
.numbered-steps__detail {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-small); line-height: var(--lh-small); font-weight: var(--wt-small);
  color: var(--text-heading);
}
@media (max-width: 768px) {
  /* Size=Mobile (128:4104): each step stacks (Number/Title/Text) at gap 30; eyebrow HORIZONTAL. */
  .numbered-steps__step { flex-direction: column; gap: var(--space-30); }
}

/* ── Block 12 · CTA / Single Button (component set 38:1247) ────────────────────
   Variant: Size only (no Theme). 38:1246 Default · 38:1245 Mobile.
   Slots: Subtitle (H2) · Paragraph (H4 24/30) · Button Label.
   A sky band: bg = --surface-accent (GS-Light-Blue — the role this token is named for), text left
   (--text-heading), one white button right (.buttons--style-secondary). Reuses .section for
   centring + h-padding but OVERRIDES the shell bg. Mobile stacks (inferred). */
.cta-single-button {
  background: var(--surface-accent);         /* overrides .section white */
  border-bottom: var(--border-hairline) solid var(--border-divider);
}
.cta-single-button__inner {
  padding-block: var(--space-200);           /* 200 */
  display: flex;
  align-items: center;
  gap: var(--space-60);
}
.cta-single-button__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-30);
}
.cta-single-button__title {
  margin: 0; width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-h2); line-height: var(--lh-h2); font-weight: var(--wt-h2);
  color: var(--text-heading);
}
.cta-single-button__paragraph {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-30);
}
.cta-single-button__paragraph p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-h4); line-height: var(--lh-h4); font-weight: var(--wt-h4);
  color: var(--text-heading);
}
.cta-single-button__cta { flex: none; }
@media (max-width: 768px) {
  /* Size=Mobile (38:1245): CENTRED text, gap 60, py 100, full-width button. */
  .cta-single-button__inner { flex-direction: column; align-items: center; gap: var(--space-60); padding-block: var(--space-100); }
  .cta-single-button__text { align-items: center; text-align: center; }
  .cta-single-button__cta { width: 100%; justify-content: center; }
}

/* ── Block 9 · Intro + Side Bullet List (component set 135:5641) ───────────────
   Variants: Size=Default/Mobile × Theme=Light/Dark. 135:5640 DL · 138:5317 DD.
   Slots: Title (eyebrow) · Section_A_Title (H2) · Section_A_Intro · Button · 5×(Headline·Description).
   Two 1fr columns: left intro+CTA, right 5 REUSED .bullet-point-items --style-no-icon.
   Light→colorway-dark; dark→colorway-light. Shell via .section; mobile stacks. */
.intro-side-bullet-list { border-bottom: var(--border-hairline) solid var(--border-divider); }
.intro-side-bullet-list__inner {
  padding-block: var(--space-100);
  display: flex;
  align-items: center;
  gap: var(--space-60);
}
.intro-side-bullet-list__intro,
.intro-side-bullet-list__list {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-30);
}
.intro-side-bullet-list__title {
  margin: 0; width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-h2); line-height: var(--lh-h2); font-weight: var(--wt-h2);
  color: var(--text-heading);
}
.intro-side-bullet-list__text {
  margin: 0; width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-body); line-height: var(--lh-body); font-weight: var(--wt-body);
  color: var(--text-body);
}
.intro-side-bullet-list__cta { flex: none; }
@media (max-width: 768px) {
  /* Size=Mobile (135:5639): intro stacks above the list; button stays AUTO width;
     eyebrow HORIZONTAL. */
  .intro-side-bullet-list__inner { flex-direction: column; align-items: flex-start; }
}

/* ── Block 10 · Comparison Table (component set 85:2081) ───────────────────────
   Variants: Size=Default/Mobile × Theme=Light/Dark. 138:5092 DL · 85:2080 DD · 138:5142 mobL.
   Slots: Title (eyebrow) · Subheader (H2) · Paragraph · per column: Label · Headline · 6 Points.
   Centred header + a 2-column comparison (con / pro), each a card of Label + Headline + 6
   icon-and-text points (border-separated). Content capped at --measure-cta (Figma px-207).
   Cards are THEME-IMMUNE (fixed --surface-con/-pro/--text-on-card); only the section bg and
   header text follow .theme-dark. Mobile stacks the two cards; eyebrow stays HORIZONTAL.
   NOTE: dark cards drop the shadow in Figma; kept --shadow-control both (faint, negligible). */
.comparison-table__inner {
  padding-block: var(--space-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-60);
}
.comparison-table__header {
  width: 100%;
  max-width: var(--measure-cta);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-30);
  text-align: center;
}
.comparison-table__title {
  margin: 0; width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-h2); line-height: var(--lh-h2); font-weight: var(--wt-h2);
  color: var(--text-heading);
}
.comparison-table__intro {
  margin: 0; width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-body); line-height: var(--lh-body); font-weight: var(--wt-body);
  color: var(--text-body);
}
.comparison-table__columns {
  width: 100%;
  max-width: var(--measure-cta);
  display: flex;
  align-items: stretch;                       /* equal-height cards */
  gap: var(--space-30);
}
.comparison-table__col {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-30);
  padding: var(--space-30);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-control);
}
.comparison-table__col--con { background: var(--surface-con); }
.comparison-table__col--pro { background: var(--surface-pro); }
.comparison-table__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body); line-height: var(--lh-body); font-weight: var(--wt-body);
}
.comparison-table__col--con .comparison-table__label { color: var(--accent-secondary); }       /* #338783 */
.comparison-table__col--pro .comparison-table__label { color: var(--accent-secondary-light); }  /* #4BBEB9 */
.comparison-table__headline {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-h4); line-height: var(--lh-h4); font-weight: var(--wt-h4);
  color: var(--text-on-card);
}
.comparison-table__point {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  border-bottom: var(--border-hairline) solid var(--text-muted);
  padding-bottom: var(--space-20);
}
.comparison-table__point-icon { width: var(--icon); height: var(--icon); flex: none; }
.comparison-table__point-text {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body); line-height: var(--lh-body); font-weight: var(--wt-body);
  color: var(--text-on-card);
}
@media (max-width: 768px) {                    /* Size=Mobile (138:5142): stack the two cards; eyebrow horizontal */
  .comparison-table__columns { flex-direction: column; }
}

/* ── Block 15 · Pricing Tier Cards (component set 107:5666) ────────────────────
   Variants: Size=Default (107:5665) / Size=Mobile (107:5664). NO Theme variant —
   this block is single-theme (always light on a #EFF7FC tint), like the Comparison
   Table cards, so it uses the FIXED surface/text tokens (--surface-con/-pro,
   --text-on-card), never the theme-aware ones.
   Slots: Title (eyebrow) · Section Headline (H2) · Description · per tier ×4:
     Tier Name · Price · /month · Description · Best For · Key Focus Areas Label ·
     6 Focus Items · Button Label.
   Centred header (horizontal eyebrow 9:1956) + a row of 4 equal cards. Desktop:
   flex row, each card flex:1, buttons bottom-aligned (margin-top:auto → equal
   heights via align-items:stretch). Mobile: cards stack full-width. Card 3 is the
   featured tier (Figma gives only it a 5px drop-shadow → --shadow-card). */
.pricing-tier-cards { border-bottom: var(--border-hairline) solid var(--border-divider); }
.pricing-tier-cards__inner {
  background: var(--surface-con);              /* #EFF7FC tint — fixed (single-theme) */
  padding-block: var(--space-100);
  display: flex;
  flex-direction: column;
  gap: var(--space-60);                        /* 60 header ↔ cards */
}
.pricing-tier-cards__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-30);                        /* 30 eyebrow/headline/description */
  text-align: center;
}
.pricing-tier-cards__title {                   /* Section Headline — H2 */
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-h2); line-height: var(--lh-h2); font-weight: var(--wt-h2);
  color: var(--text-heading);
}
.pricing-tier-cards__description {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body); line-height: var(--lh-body); font-weight: var(--wt-body);
  color: var(--text-heading);                  /* #122D3C — headline colour, not body blue */
}
.pricing-tier-cards__row {
  display: flex;
  align-items: stretch;                        /* equal-height cards */
  gap: var(--space-30);
}
.pricing-tier-cards__card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-30);                        /* 30 body ↔ button (min; grows on desktop) */
  padding: var(--space-30);
  background: var(--surface-pro);              /* #FFFFFF — fixed */
  border-radius: var(--radius-control);
}
.pricing-tier-cards__card--featured { box-shadow: var(--shadow-card); }  /* Figma shadows only card 3 */
.pricing-tier-cards__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);                        /* 20 between tier blocks */
}
.pricing-tier-cards__tier {                    /* tier name + price group */
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.pricing-tier-cards__tier-name {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body); line-height: var(--lh-body); font-weight: var(--wt-body);
  color: var(--accent-secondary);              /* #338783 — fixed teal */
}
.pricing-tier-cards__price {
  display: flex;
  align-items: baseline;
  gap: var(--text-link-gap);                   /* 4 */
  color: var(--text-on-card);                  /* #122D3C */
}
.pricing-tier-cards__price-amount {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-h3); line-height: var(--lh-h3); font-weight: var(--wt-h3);  /* 30/36 Medium */
}
.pricing-tier-cards__price-unit {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body); line-height: var(--lh-body); font-weight: var(--wt-body);
}
.pricing-tier-cards__divider {
  border: 0;
  border-top: var(--border-hairline) solid var(--border-divider);  /* #AED5EE hairline */
  margin: 0;
  width: 100%;
}
.pricing-tier-cards__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  margin: 0;
}
.pricing-tier-cards__desc,
.pricing-tier-cards__best-for {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-small); line-height: var(--lh-small); font-weight: var(--wt-small);
  color: var(--text-on-card);
}
.pricing-tier-cards__desc { opacity: 0.8; }    /* Figma: first paragraph at 80% */
.pricing-tier-cards__focus {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.pricing-tier-cards__focus-label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-caption); line-height: var(--lh-caption); font-weight: var(--wt-body-strong);
  color: var(--text-on-card);
}
.pricing-tier-cards__focus-item {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-caption); line-height: var(--lh-caption); font-weight: var(--wt-caption);
  color: var(--text-on-card);
  /* Items WRAP; they do not truncate. Figma's node forced a single line with an ellipsis, but at
     the designed 1440 width no item exceeds its box so the ellipsis never fired — it only truncated
     real service names in the undesigned 769–1439 band (e.g. "Client Success Suppo…" at ~1000px).
     Wrapping loses no content and is pixel-identical at 1440. (The single-line clip properties were
     removed entirely — they existed only to support the ellipsis.) */
}
.pricing-tier-cards__button {
  width: 100%;                                 /* full-width in card (composition) */
  margin-top: auto;                            /* pin to card bottom on desktop */
}
@media (max-width: 768px) {                    /* Size=Mobile (107:5664): stack cards full-width */
  .pricing-tier-cards__row { flex-direction: column; }
  .pricing-tier-cards__button { margin-top: 0; }  /* auto-height cards: use the 30 gap, not stretch */
}

/* ── Block 13 · Lead Capture Form (component set 38:945) ───────────────────────
   Variants: Size=Default (38:944) / Size=Mobile (38:943). No Theme variant → single-
   theme (white section). Two columns: LEFT intro (eyebrow · H2 · H4 lead · 3 supporting
   "checklist" paragraphs), RIGHT form card. Mobile stacks the two columns.
   Slots (spec §3): Title · Subtitle (H2) · Paragraph · 3 Supporting Paragraphs ·
   Button Label · Fields Name/Email/Phone/Message/File Upload.
   Fields REUSE the Single Elements: .text-field, .message-field, .file-upload-dropzone,
   .check-buttons, .buttons.
   *** DESIGN vs SPEC DISCREPANCY (logged in DECISIONS_NEEDED.md + INVENTED.md): the
   designed component has NO File Upload — it has a consent checkbox instead. The spec
   schema lists File Upload. Per the explicit instruction, the File Upload Dropzone UI is
   built (after Message) and WIRED TO NOTHING (file input has no name → never submitted;
   real capture needs object storage = a backend change, not done here). ***
   MARKUP/STYLING ONLY — no backend wiring in this task. */
.lead-capture-form { border-bottom: var(--border-hairline) solid var(--border-divider); }
.lead-capture-form__inner {
  padding-block: var(--space-100);
  display: flex;
  align-items: center;                         /* Figma items-center: short intro centres beside the taller form */
  gap: var(--space-30);
}
.lead-capture-form__intro {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-30);
}
.lead-capture-form__title {                    /* Subtitle — H2 */
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-h2); line-height: var(--lh-h2); font-weight: var(--wt-h2);
  color: var(--text-heading);
}
.lead-capture-form__lead {                     /* Paragraph — H4 (24/30 Medium) */
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-h4); line-height: var(--lh-h4); font-weight: var(--wt-h4);
  color: var(--text-body);                     /* #336887 */
}
.lead-capture-form__checklist {                /* 3 Supporting Paragraphs */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);                        /* Default 10 (mobile → 20) */
}
.lead-capture-form__check { display: flex; align-items: center; gap: var(--space-10); }
.lead-capture-form__check-icon { width: var(--icon); height: var(--icon); flex: none; }
.lead-capture-form__check-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body); line-height: var(--lh-body); font-weight: var(--wt-body);
  color: var(--text-heading);                  /* #122D3C */
}
.lead-capture-form__form {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-30);
  padding: var(--space-20);
  background: var(--surface-con);              /* #EFF7FC tint — fixed (single-theme) */
  border: var(--border-hairline) solid var(--border-divider);  /* #AED5EE */
  border-radius: var(--radius-control);
}
.lead-capture-form__submit { width: 100%; }    /* full-width primary (composition) */
.lead-capture-form__hp {                       /* honeypot — off-screen, not display:none (bots skip hidden) */
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.lead-capture-form__status {                   /* submit status / error message (js/lead.js writes here) */
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-small); line-height: var(--lh-small);
  color: var(--state-error);                   /* only shown on error text; empty otherwise */
}
.lead-capture-form__status:empty { display: none; }
@media (max-width: 768px) {                    /* Size=Mobile (38:943): stack columns; checklist gap 20 */
  .lead-capture-form__inner { flex-direction: column; align-items: stretch; }
  .lead-capture-form__checklist { gap: var(--space-20); }
}

/* ── Block 14 · Blog Post Grid (component set 85:3602) ─────────────────────────
   Variants: Size=Default (85:3601) / Size=Mobile (85:3600). No Theme variant →
   single-theme (white section). Category tabs + a grid of 9 cards + pagination.
   Slots (spec §3): Category Tabs (All Posts, Development, Company Updates, White
   Papers, Industry Insights) · per card ×9: Date · Title · Description · Read More
   · Image 353×198 (16:9).
   Desktop: 3-col card grid (Figma is 393px flex-wrap = 3 across); mobile: 1 col.
   Pagination REUSES the .pagination Single Element. Tabs + pagination are visual
   only — filtering/paging needs JS or a backend (NOT implemented; see INVENTED.md).
   The stray #F04C3A on the active page node is the undocumented "WW-Orange" (0px,
   invisible) — ignored; the visible active colour is #58AADB (--surface-accent). */
.blog-post-grid { border-bottom: var(--border-hairline) solid var(--border-divider); }
.blog-post-grid__inner {
  padding-top: var(--space-60);
  padding-bottom: var(--space-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);                        /* 40 between tabs / cards / pagination */
}
.blog-post-grid__categories {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-20);
}
.blog-post-grid__tab {
  padding: var(--space-10);
  background: none;
  border: 0;
  border-bottom: var(--border-hairline) solid var(--border-divider);  /* #AED5EE inactive */
  font-family: var(--font-body);
  font-size: var(--size-lead); line-height: var(--lh-lead); font-weight: var(--wt-lead);
  text-transform: capitalize;
  color: var(--text-muted);                    /* #AED5EE inactive */
  cursor: pointer;
}
.blog-post-grid__tab--active {
  color: var(--text-body);                     /* #336887 active */
  border-bottom-color: var(--accent-primary);  /* #336887 active */
}
.blog-post-grid__tab:hover { color: var(--text-body); }              /* INVENTED */
.blog-post-grid__tab:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.blog-post-grid__cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);       /* Figma 393px × 3 across */
  gap: var(--space-30);
}
.blog-post-grid__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-20);
  background: var(--surface);
  border: var(--border-hairline) solid var(--border-divider);  /* #AED5EE */
  border-radius: var(--radius-control);
}
.blog-post-grid__card-image {
  width: 100%;
  aspect-ratio: 16 / 9;                         /* 353×198 (Figma 160/90) */
  overflow: hidden;
}
.blog-post-grid__card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-post-grid__card-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-30);
  text-align: center;
}
.blog-post-grid__date {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-caption); line-height: var(--lh-caption); font-weight: var(--wt-caption);
  color: var(--text-heading);                  /* #122D3C */
}
.blog-post-grid__card-body { display: flex; flex-direction: column; gap: var(--space-20); }
.blog-post-grid__card-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-h4); line-height: var(--lh-h4); font-weight: var(--wt-h4);  /* 24/30 Medium */
  color: var(--text-heading);
}
.blog-post-grid__card-desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-small); line-height: var(--lh-small); font-weight: var(--wt-small);
  color: var(--text-heading);
}
.blog-post-grid__read-more {
  font-family: var(--font-body);
  font-size: var(--size-body-alt); line-height: var(--lh-body-alt); /* 16 (Read More is one line) */
  text-transform: capitalize;
  color: var(--surface-accent);                /* #58AADB */
  text-decoration: underline;
}
.blog-post-grid__read-more:hover { text-decoration: none; }          /* INVENTED */
@media (max-width: 768px) {                    /* Size=Mobile (85:3600): 1-col cards, gap 40 */
  .blog-post-grid__cards { grid-template-columns: 1fr; gap: var(--space-40); }
}