/**
 * Service content blocks (enfx-svc-*).
 *
 * Loaded two ways from one file:
 *  - front end: registered as the blocks' `style` handle, so it only loads on
 *    pages that actually render one of them;
 *  - editor: pulled into the canvas via add_editor_style().
 *
 * Consumes the tokens from tokens.css — no hard-coded brand values.
 */

/* Descriptive copy inside cards and feature-list items. Defined once so the two
   can never drift apart — tune the reading size here.
   Sits just under the 16px body: subordinate to its 17px bold Sora title, but
   still comfortably readable. */
:root { --enfx-svc-text: 15.5px; }

/* ==========================================================================
   Section Head (kicker / heading / intro)
   Its own block (enischal/section-head) so it can open any block — or none.
   It ends flush; the gap to the next block comes from the block gap.
   ========================================================================== */
.enfx-svc-head { margin: 0; }
.enfx-svc-head > :last-child { margin-bottom: 0; }

.enfx-svc-head__title {
  font-family: var(--enfx-f-head);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--enfx-ink);
  margin: 0 0 14px;
}
.enfx-svc-head__intro { margin: 0; }

.enfx-svc-kicker {
  display: inline-block;
  font-family: var(--enfx-f-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--enfx-orange-d);
  margin-bottom: 8px;
}
.enfx-svc-kicker::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--enfx-orange);
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 3px;
}

/* ==========================================================================
   Icon Cards
   ========================================================================== */

/* --- Grid --- */
.enfx-svc-cards__grid { display: grid; gap: 20px; }
/* Grid items default to min-width:auto, so a long word can push the track wider
   than its share and overflow the page. */
.enfx-svc-cards__grid > * { min-width: 0; }
.enfx-svc-cards--cols-2 .enfx-svc-cards__grid { grid-template-columns: repeat(2, 1fr); }
.enfx-svc-cards--cols-3 .enfx-svc-cards__grid { grid-template-columns: repeat(3, 1fr); }
.enfx-svc-cards--cols-4 .enfx-svc-cards__grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 920px) {
  .enfx-svc-cards--cols-3 .enfx-svc-cards__grid,
  .enfx-svc-cards--cols-4 .enfx-svc-cards__grid { grid-template-columns: repeat(2, 1fr); }
}
/* Must repeat the --cols-* selectors: a media query adds no specificity, so a
   bare .enfx-svc-cards__grid rule would lose to the two-class base rules above
   and never collapse. */
@media (max-width: 600px) {
  .enfx-svc-cards--cols-2 .enfx-svc-cards__grid,
  .enfx-svc-cards--cols-3 .enfx-svc-cards__grid,
  .enfx-svc-cards--cols-4 .enfx-svc-cards__grid { grid-template-columns: 1fr; }
}

/* --- Card base (shared by every style) --- */
.enfx-svc-card {
  background: var(--enfx-white);
  border: 1px solid var(--enfx-line);
  border-radius: 12px;
  padding: 22px 24px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.enfx-svc-card__ic {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 10px;
  background: var(--enfx-gold-soft);
  color: var(--enfx-orange-d);
  display: grid;
  place-items: center;
}
/* Font Awesome glyphs are solid, fill-based shapes — the theme's stroke-based
   .enfx-icon defaults would render them as hollow outlines. */
.enfx-svc-card__ic .enfx-fa,
.enfx-svc-card__ic svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }

.enfx-svc-card__title {
  font-family: var(--enfx-f-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--enfx-ink);
  margin: 0 0 5px;
}
.enfx-svc-card__text { font-size: var(--enfx-svc-text); line-height: 1.65; margin: 0; }

/* No icon chosen → collapse the box rather than leave a gap.
   (Excluded for the numbered style, where the box carries the counter.) */
.enfx-svc-cards--accent .enfx-svc-card__ic:empty,
.enfx-svc-cards--icon-top .enfx-svc-card__ic:empty,
.enfx-svc-cards--matrix .enfx-svc-card__ic:empty { display: none; }

/* --- Style: accent-left (Challenges) --- */
.enfx-svc-cards--accent .enfx-svc-card {
  display: flex;
  gap: 16px;
  border-left: 3px solid var(--enfx-orange);
}
.enfx-svc-cards--accent .enfx-svc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -22px rgba(19, 32, 56, .4);
}

/* --- Style: icon-top (Solutions) --- */
.enfx-svc-cards--icon-top .enfx-svc-card { padding: 26px 24px; }
.enfx-svc-cards--icon-top .enfx-svc-card__ic {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--enfx-navy);
  color: var(--enfx-white);
  margin-bottom: 16px;
  transition: background-color .25s ease, color .25s ease;
}
.enfx-svc-cards--icon-top .enfx-svc-card__ic .enfx-fa,
.enfx-svc-cards--icon-top .enfx-svc-card__ic svg { width: 24px; height: 24px; }
.enfx-svc-cards--icon-top .enfx-svc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -26px rgba(19, 32, 56, .45);
  border-color: transparent;
}
.enfx-svc-cards--icon-top .enfx-svc-card:hover .enfx-svc-card__ic {
  background: var(--enfx-orange);
  color: var(--enfx-navy-dark);
}

/* --- Style: numbered (Outcomes) — a CSS counter replaces the icon, so the
       child block markup stays identical across all three styles. --- */
.enfx-svc-cards--numbered .enfx-svc-cards__grid { counter-reset: enfx-card; }
.enfx-svc-cards--numbered .enfx-svc-card {
  background: var(--enfx-soft);
  border-color: transparent;
  padding: 26px 24px;
}
.enfx-svc-cards--numbered .enfx-svc-card__ic {
  counter-increment: enfx-card;
  background: none;
  width: auto;
  height: auto;
  margin-bottom: 10px;
  justify-items: start;
}
.enfx-svc-cards--numbered .enfx-svc-card__ic svg { display: none; }
.enfx-svc-cards--numbered .enfx-svc-card__ic::before {
  content: counter(enfx-card, decimal-leading-zero);
  font-family: var(--enfx-f-head);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  color: var(--enfx-orange);
}

/* --- Style: matrix — one framed object, cells divided by hairlines.
       For points that are facets of a single idea rather than separate offers:
       four detached cards say the opposite. The rules are the grid gap showing
       through a line-coloured grid background, so the cross stays crisp at 1px
       and no cell needs borders of its own. Deliberately compact — a small icon
       and a tight card, since these carry one line each. --- */
.enfx-svc-cards--matrix .enfx-svc-cards__grid {
  gap: 1px;
  background: var(--enfx-line);
  border: 1px solid var(--enfx-line);
  border-radius: var(--enfx-radius);
  overflow: hidden;
}
.enfx-svc-cards--matrix .enfx-svc-card {
  border: 0;
  border-radius: 0;
  padding: 24px 22px 26px;
  transition: background-color .25s ease;
}
/* Tint, never lift: nothing should detach from the frame. */
.enfx-svc-cards--matrix .enfx-svc-card:hover { background: var(--enfx-soft); }
.enfx-svc-cards--matrix .enfx-svc-card__ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  margin-bottom: 14px;
  transition: background-color .25s ease, color .25s ease;
}
.enfx-svc-cards--matrix .enfx-svc-card__ic .enfx-fa,
.enfx-svc-cards--matrix .enfx-svc-card__ic svg { width: 17px; height: 17px; }
.enfx-svc-cards--matrix .enfx-svc-card:hover .enfx-svc-card__ic {
  background: var(--enfx-orange);
  color: var(--enfx-navy-dark);
}
.enfx-svc-cards--matrix .enfx-svc-card__title { font-size: 17.5px; margin-bottom: 7px; }
.enfx-svc-cards--matrix .enfx-svc-card__text { font-size: 14.5px; }

/* ==========================================================================
   Checklist — "check" rows or "pill" boxes
   ========================================================================== */

.enfx-svc-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px 34px;
}
.enfx-svc-list__items > * { min-width: 0; }
.enfx-svc-list--cols-1 .enfx-svc-list__items { grid-template-columns: 1fr; }
.enfx-svc-list--cols-2 .enfx-svc-list__items { grid-template-columns: repeat(2, 1fr); }
.enfx-svc-list--cols-3 .enfx-svc-list__items { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 820px) {
  .enfx-svc-list--cols-3 .enfx-svc-list__items { grid-template-columns: repeat(2, 1fr); }
}
/* Same specificity trap as the card grid above. */
@media (max-width: 560px) {
  .enfx-svc-list--cols-1 .enfx-svc-list__items,
  .enfx-svc-list--cols-2 .enfx-svc-list__items,
  .enfx-svc-list--cols-3 .enfx-svc-list__items { grid-template-columns: 1fr; }
}

.enfx-svc-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-family: var(--enfx-f-head);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--enfx-ink);
}
.enfx-svc-list__mark {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
  background: var(--enfx-gold-soft);
  color: var(--enfx-orange-d);
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.enfx-svc-list__mark svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}

/* Pills: the same rows, boxed. */
.enfx-svc-list--pill .enfx-svc-list__items { gap: 12px; }
.enfx-svc-list--pill .enfx-svc-list__item {
  align-items: center;
  background: var(--enfx-soft);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 600;
}
.enfx-svc-list--pill .enfx-svc-list__mark {
  background: none;
  width: 16px;
  height: 16px;
  margin-top: 0;
}
.enfx-svc-list--pill .enfx-svc-list__mark svg { width: 16px; height: 16px; }

/* ==========================================================================
   Panel — a core/Group style variation
   The container version of the soft box: put a Section Head and a list (or
   cards, or chips) inside it and the heading sits *within* the panel, which the
   checklist's own `panel` toggle cannot do.
   ========================================================================== */
.wp-block-group.is-style-enfx-panel {
  background: var(--enfx-soft);
  border: 1px solid var(--enfx-line);
  border-radius: var(--enfx-radius);
  padding: 26px 28px;
}
/* Pills inside a panel need to lift off the panel's own soft background. */
.wp-block-group.is-style-enfx-panel .enfx-svc-list--pill .enfx-svc-list__item {
  background: var(--enfx-white);
}

/* Panel wrapper on the checklist itself — the shorthand for a bare list with no
   heading. For anything with a title, use the Group "Panel" style above. */
.enfx-svc-list--panel {
  background: var(--enfx-soft);
  border: 1px solid var(--enfx-line);
  border-radius: var(--enfx-radius);
  padding: 26px 28px;
}
.enfx-svc-list--panel.enfx-svc-list--pill .enfx-svc-list__item { background: var(--enfx-white); }

/* ==========================================================================
   Feature List — bulleted points with a title and a description
   Every item shares one bullet, supplied by the parent via block context:
   a dot by default, optionally any icon, or a number (which renders as <ol>).
   ========================================================================== */
.enfx-svc-flist__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px 34px;
}
.enfx-svc-flist__items > * { min-width: 0; }
.enfx-svc-flist--cols-1 .enfx-svc-flist__items { grid-template-columns: 1fr; }
.enfx-svc-flist--cols-2 .enfx-svc-flist__items { grid-template-columns: repeat(2, 1fr); }
.enfx-svc-flist--cols-3 .enfx-svc-flist__items { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 920px) {
  .enfx-svc-flist--cols-3 .enfx-svc-flist__items { grid-template-columns: repeat(2, 1fr); }
}
/* Repeat the --cols-* selectors: a media query adds no specificity. */
@media (max-width: 600px) {
  .enfx-svc-flist--cols-1 .enfx-svc-flist__items,
  .enfx-svc-flist--cols-2 .enfx-svc-flist__items,
  .enfx-svc-flist--cols-3 .enfx-svc-flist__items { grid-template-columns: 1fr; }
}

.enfx-svc-flist__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
}
.enfx-svc-flist__mark {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--enfx-orange-d);
  margin-top: 3px;
}
.enfx-svc-flist__mark .enfx-fa,
.enfx-svc-flist__mark svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* No icon chosen → a plain bullet dot. A pseudo-element does not break :empty,
   so this is exactly the "no icon" case. */
.enfx-svc-flist__mark:empty::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--enfx-orange);
}

.enfx-svc-flist__title {
  font-family: var(--enfx-f-head);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--enfx-ink);
  margin: 0 0 4px;
}
.enfx-svc-flist__text { font-size: var(--enfx-svc-text); line-height: 1.65; margin: 0; }

/* --- Bullet: boxed --- */
.enfx-svc-flist--boxed .enfx-svc-flist__mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--enfx-gold-soft);
  margin-top: 1px;
}
.enfx-svc-flist--boxed .enfx-svc-flist__mark .enfx-fa,
.enfx-svc-flist--boxed .enfx-svc-flist__mark svg { width: 14px; height: 14px; }

/* --- Bullet: numbered — the element is an <ol>; the counter is styled here
       so the number matches the theme rather than the browser default. --- */
.enfx-svc-flist--numbered .enfx-svc-flist__items { counter-reset: enfx-flist; }
.enfx-svc-flist--numbered .enfx-svc-flist__mark {
  counter-increment: enfx-flist;
  width: auto;
  min-width: 26px;
  height: auto;
  margin-top: 0;
  justify-items: start;
}
.enfx-svc-flist--numbered .enfx-svc-flist__mark svg { display: none; }
.enfx-svc-flist--numbered .enfx-svc-flist__mark::before {
  content: counter(enfx-flist, decimal-leading-zero);
  /* Undo the bullet-dot shape above — without this the number would sit on top
     of a dot, since that rule also matches an icon-less mark. */
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-family: var(--enfx-f-head);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.35;
  color: var(--enfx-orange);
}

/* ==========================================================================
   Tag chips
   ========================================================================== */
.enfx-svc-tags__list { display: flex; flex-wrap: wrap; gap: 11px; }
.enfx-svc-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--enfx-gold-soft);
  color: var(--enfx-orange-d);
  border-radius: 50px;
  padding: 10px 18px;
  font-family: var(--enfx-f-head);
  font-weight: 600;
  font-size: 14px;
  transition: background-color .2s ease, color .2s ease;
}
.enfx-svc-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.enfx-svc-tag:hover { background: var(--enfx-orange); color: var(--enfx-navy-dark); }

/* On a dark ground the light-ground chip — orange-dark on 12% orange — drops
   far below usable contrast, so the fill lifts and the text goes light. Keyed
   off the ancestor rather than an attribute, the same way the Section Head flip
   works, so chips adapt to whatever band they are dropped into. */
.has-navy-background-color .enfx-svc-tag,
.enfx-svc-cta--navy .enfx-svc-tag {
  background: rgba(232, 160, 32, .15);
  color: var(--enfx-orange-light);
}
.has-navy-background-color .enfx-svc-tag:hover,
.enfx-svc-cta--navy .enfx-svc-tag:hover {
  background: var(--enfx-orange);
  color: var(--enfx-navy-dark);
}

/* ==========================================================================
   Callout
   ========================================================================== */
.enfx-svc-callout {
  border-radius: 0 12px 12px 0;
  padding: 22px 26px;
}
.enfx-svc-callout > *:first-child { margin-top: 0; }
.enfx-svc-callout > *:last-child { margin-bottom: 0; }

.enfx-svc-callout--soft {
  background: var(--enfx-soft);
  border-left: 4px solid var(--enfx-orange);
}
.enfx-svc-callout--navy {
  background: var(--enfx-navy);
  border-left: 4px solid var(--enfx-orange);
  color: var(--enfx-gray-light);
}
.enfx-svc-callout--navy :where(h1, h2, h3, h4, h5, h6) { color: var(--enfx-white); }

/* ==========================================================================
   Process Rail — connected stages
   Each stage is a panel led by an icon badge, and draws the rail segment across
   the gap to its right; :last-child draws none. Because every segment spans a
   full gap it meets both panels, which is what makes it read as one continuous
   rail — anything that stops short of the edges reads as debris floating in the
   gap instead.
   The stages brighten toward the last one, keyed off :first-child /
   :nth-last-child(2) / :last-child rather than fixed positions, so the items
   stay identical and the progression still lands at 2, 3 or 4 columns.
   ========================================================================== */

/* The gap and the rail width are one measurement — change them together or the
   rail overshoots the next panel or falls short of it. */
.enfx-svc-rail { --enfx-rail-gap: 52px; }

.enfx-svc-rail__items {
  display: grid;
  gap: var(--enfx-rail-gap);
  counter-reset: enfx-rail;
}
.enfx-svc-rail__items > * { min-width: 0; }
.enfx-svc-rail--cols-2 .enfx-svc-rail__items { grid-template-columns: repeat(2, 1fr); }
.enfx-svc-rail--cols-3 .enfx-svc-rail__items { grid-template-columns: repeat(3, 1fr); }
.enfx-svc-rail--cols-4 .enfx-svc-rail__items { grid-template-columns: repeat(4, 1fr); }

.enfx-svc-rail__stage { position: relative; }

/* --- Panel --- */
.enfx-svc-rail__body {
  height: 100%;
  border-radius: var(--enfx-radius);
  padding: 26px 26px 28px;
  background: var(--enfx-soft);
  border: 1px solid var(--enfx-line);
  transition: transform .25s ease, box-shadow .25s ease;
}
.enfx-svc-rail__stage:last-child .enfx-svc-rail__body {
  background: var(--enfx-gold-soft);
  border-color: rgba(232, 160, 32, .4);
}
.enfx-svc-rail__stage:hover .enfx-svc-rail__body {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -28px rgba(19, 32, 56, .45);
}

/* --- Header: badge inline with the number and label.
       The badge belongs inside its panel: floated above on a stub it reads as a
       lollipop over the card rather than part of it. --- */
.enfx-svc-rail__head { display: flex; align-items: center; gap: 15px; }
.enfx-svc-rail__ic {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--enfx-gold-soft);
  color: var(--enfx-orange-d);
  border: 2px solid transparent;
  display: grid;
  place-items: center;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.enfx-svc-rail__ic:empty { display: none; }
.enfx-svc-rail__ic .enfx-fa,
.enfx-svc-rail__ic svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.enfx-svc-rail__stage:last-child .enfx-svc-rail__ic {
  background: var(--enfx-orange);
  color: var(--enfx-navy-dark);
  border-color: var(--enfx-orange);
  box-shadow: 0 0 0 7px rgba(232, 160, 32, .12);
}

.enfx-svc-rail__heading { min-width: 0; }
/* The word comes from the block (so it stays translatable and can read Stage /
   Step / Phase); only the digits are the counter, so no stage has to know its
   own position. The word is its own element rather than a leading space in the
   counter's content, which would otherwise be left stranded when the label is
   empty. */
.enfx-svc-rail__no {
  counter-increment: enfx-rail;
  font-family: var(--enfx-f-head);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--enfx-orange-d);
  margin-bottom: 5px;
}
.enfx-svc-rail__word { margin-right: .42em; }
.enfx-svc-rail__no::after { content: counter(enfx-rail, decimal-leading-zero); }
.enfx-svc-rail__label {
  font-family: var(--enfx-f-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--enfx-ink);
  margin: 0;
}

/* --- Points --- */
.enfx-svc-rail__caps {
  list-style: none;
  margin: 20px 0 0;
  padding: 19px 0 0;
  display: grid;
  gap: 11px;
  border-top: 1px solid var(--enfx-line);
}
.enfx-svc-rail__cap {
  display: flex;
  gap: 10px;
  margin: 0;
  font-family: var(--enfx-f-head);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
  color: var(--enfx-ink);
}
.enfx-svc-rail__cap::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--enfx-orange);
  margin-top: 8px;
}
.enfx-svc-rail__stage:last-child .enfx-svc-rail__caps { border-top-color: rgba(232, 160, 32, .32); }

/* --- The rail itself. 53px centres the 2px line on the 56px badge (26px of
       panel padding + half the badge). --- */
.enfx-svc-rail__stage:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 53px;
  left: 100%;
  width: var(--enfx-rail-gap);
  height: 2px;
  background: linear-gradient(90deg, rgba(232, 160, 32, .22), var(--enfx-rail-to));
}
.enfx-svc-rail__stage { --enfx-rail-to: rgba(232, 160, 32, .6); }
.enfx-svc-rail__stage:nth-last-child(2) { --enfx-rail-to: var(--enfx-orange); }

/* --- On a navy band the panels invert: translucent glass instead of soft, and
       light text. Keyed off the ancestor rather than an attribute, so the block
       adapts to whatever band it is dropped into. --- */
.has-navy-background-color .enfx-svc-rail__body {
  background: rgba(255, 255, 255, .065);
  border-color: rgba(255, 255, 255, .15);
}
.has-navy-background-color .enfx-svc-rail__stage:first-child .enfx-svc-rail__body {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .09);
}
.has-navy-background-color .enfx-svc-rail__stage:last-child .enfx-svc-rail__body {
  background: rgba(232, 160, 32, .1);
  border-color: rgba(232, 160, 32, .4);
}
.has-navy-background-color .enfx-svc-rail__ic {
  background: var(--enfx-navy-dark);
  color: var(--enfx-orange);
  border-color: rgba(232, 160, 32, .45);
}
.has-navy-background-color .enfx-svc-rail__stage:first-child .enfx-svc-rail__ic {
  border-color: rgba(232, 160, 32, .3);
}
.has-navy-background-color .enfx-svc-rail__stage:last-child .enfx-svc-rail__ic {
  background: var(--enfx-orange);
  color: var(--enfx-navy-dark);
  border-color: var(--enfx-orange);
}
.has-navy-background-color .enfx-svc-rail__no { color: var(--enfx-orange); }
.has-navy-background-color .enfx-svc-rail__label { color: var(--enfx-white); }
.has-navy-background-color .enfx-svc-rail__caps { border-top-color: rgba(255, 255, 255, .13); }
.has-navy-background-color .enfx-svc-rail__cap { color: #c9d4e2; }
.has-navy-background-color .enfx-svc-rail__stage:last-child .enfx-svc-rail__cap { color: #f4e8d4; }
.has-navy-background-color .enfx-svc-rail__stage:hover .enfx-svc-rail__body { box-shadow: none; }

@media (max-width: 860px) {
  /* Stacked: the rail turns down the badge's centre line, still meeting both
     panels top and bottom. Only the gradient axis changes. */
  .enfx-svc-rail--cols-2 .enfx-svc-rail__items,
  .enfx-svc-rail--cols-3 .enfx-svc-rail__items,
  .enfx-svc-rail--cols-4 .enfx-svc-rail__items { grid-template-columns: 1fr; }

  .enfx-svc-rail__stage:not(:last-child)::before {
    top: 100%;
    left: 53px;
    width: 2px;
    height: var(--enfx-rail-gap);
    background: linear-gradient(180deg, rgba(232, 160, 32, .22), var(--enfx-rail-to));
  }
}

/* ==========================================================================
   Section Head on a dark ground
   The title hard-codes the ink colour, so a Section Head dropped into a navy
   group would render near-black on navy. General rather than page-specific:
   this is what lets any block section sit on a navy band.
   ========================================================================== */
.has-navy-background-color .enfx-svc-head__title,
.enfx-svc-cta--navy .enfx-svc-head__title { color: var(--enfx-white); }
.has-navy-background-color .enfx-svc-kicker,
.enfx-svc-cta--navy .enfx-svc-kicker { color: var(--enfx-orange-light); }
.has-navy-background-color .enfx-svc-head__intro,
.enfx-svc-cta--navy .enfx-svc-head__intro { color: var(--enfx-gray-light); }

/* ==========================================================================
   CTA Card — a closing call to action
   A container block: the heading is still a Section Head and the action still
   core/buttons, so this owns only the card, the tone and the split.
   ========================================================================== */
.enfx-svc-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--enfx-radius-lg);
  padding: 44px 52px;
}

/* The split is CSS, not two markup slots: the message takes the slack, the
   buttons never shrink, and the two stack themselves once the message can no
   longer hold its 340px. */
.enfx-svc-cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.enfx-svc-cta__inner > * { min-width: 0; margin: 0; }
.enfx-svc-cta__inner > .enfx-svc-head,
.enfx-svc-cta__inner > p { flex: 1 1 340px; }
.enfx-svc-cta__inner > .wp-block-buttons { flex: none; }

/* Chips take their own full-width line beneath the message and the action.
   Flex collects items into lines in *order-modified* document order, so
   ordering the action ahead of the chips is what keeps the action up on the
   first line beside the message — without it the chips' 100% basis would push
   the action down onto a third line of its own. */
.enfx-svc-cta__inner > .wp-block-buttons { order: 1; }
.enfx-svc-cta__inner > .enfx-svc-tags { order: 2; flex: 1 1 100%; }

.enfx-svc-cta--soft {
  background: var(--enfx-soft);
  border: 1px solid var(--enfx-line);
}

.enfx-svc-cta--navy {
  background:
    radial-gradient(700px 260px at 12% 0%, rgba(232, 160, 32, .13), transparent 60%),
    var(--enfx-navy);
}
/* Faint ring in the corner, echoing the home page's CTA box. */
.enfx-svc-cta--navy::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 30px solid rgba(232, 160, 32, .08);
}
.enfx-svc-cta--navy p { color: var(--enfx-gray-light); }

@media (max-width: 640px) {
  .enfx-svc-cta { padding: 34px 26px; }
}

/* ==========================================================================
   Lead paragraph — a core/paragraph style variation
   ========================================================================== */
.is-style-enfx-lead {
  font-size: 19px;
  line-height: 1.7;
  color: var(--enfx-ink);
}

/* ==========================================================================
   Editor-only affordances
   ========================================================================== */
.enfx-svc-tags__empty { color: var(--enfx-gray-muted); font-style: italic; margin-top: 14px; }

/* The icon picker reuses the tab / search / grid / swatch styles from
   admin.css. Only the floating layer differs: wp.components.Dropdown supplies
   it here (the sidebar would clip the picker's own .enfx-faicon__pop), so the
   panel just needs its own width. */
.enfx-faicon__dropdown .enfx-faicon__panel { width: 320px; max-width: 84vw; padding: 10px; }
.enfx-faicon__dropdown .enfx-faicon__grid { grid-template-columns: repeat(6, 1fr); }
.enfx-faicon__dropdown .enfx-faicon__search { box-sizing: border-box; }

/* The trigger sits in a sidebar panel, not a meta box — let it fill the width. */
.enfx-faicon .enfx-faicon__trigger { max-width: none; }