/*
 * Innovating Chaos — Crucible and pathway pages
 * Loaded by IC_Pathway_Design on /the-crucible/ and the four pathway pages.
 *
 * Everything here is scoped under `body.ic-page`, which only those five pages
 * carry. No other page on the site can be reached by these rules.
 *
 * `!important` appears where it does because Lettery ships `!important` on the
 * declarations being corrected (`.mil-services-1 .mil-card-1 .mil-cover`) and
 * because Elementor writes per-widget colour rules with higher specificity than
 * any class selector can reach. It is not used anywhere it is not needed.
 */

/* ---------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------------
   Every value below is derived from the site's own Elementor kit (post-2062),
   not chosen alongside it:

     --e-global-color-d2bcc01  #FF6600   accent
     --e-global-color-accent   #EFEAE3   cream
     --e-global-color-e6b7a78  #DACFC1   sand
     --e-global-color-primary  #0B0500   ink
     --e-global-color-text     #7A7A7A   body

   An earlier pass built on #FFA726 and added teal and indigo. #FFA726 was only
   ever the *fallback* in the diagnostic plugin's `var(--e-global-color-d2bcc01,
   #FFA726)` — the kit's real accent is the hotter #FF6600 — and teal and indigo
   have no relationship to a warm cream-and-sand palette. The four pathway hues
   are now all warm, spaced along the same amber-to-rust arc the kit already
   occupies, so they read as one family rather than four imported accents.

   --ic-brand* is constant: the kit accent, on every page and every call to
   action. --ic-hue* is the per-pathway colour, used only on card surfaces,
   numerals, hairlines and rules.

   *-ink is the text-legible form of each hue, measured against the worst
   surface it lands on (Lettery's own sand #DACFC1, not white): orange 5.10:1,
   amber 4.62:1, clay 5.19:1, rust 4.98:1 — all clear of 4.5:1 AA.

   *-ghost is the oversized numeral, held at 1.8-2.3:1 on its own surface:
   present as a device, subordinate to the title, which is the brief.
   ------------------------------------------------------------------------ */
body.ic-page {
  --ic-brand:      #FF6600;   /* kit accent */
  --ic-brand-ink:  #8C3800;   /* its text-legible form, 5.10:1 on sand */
  --ic-brand-lift: #FF8A3D;   /* for dark surfaces only — #FF6600 is 4.48:1 there */
  --ic-brand-soft: #FFEDE0;

  --ic-ink:        #0B0500;   /* kit primary */
  --ic-body:       #5A5751;
  --ic-hairline:   #E4DED5;   /* sand, lightened */
  --ic-paper:      #FFFFFF;
  --ic-paper-warm: #FBF8F4;

  /* Default hue = kit accent. Overridden per pathway below. */
  --ic-hue:        #FF6600;
  --ic-hue-ink:    #8C3800;
  --ic-hue-soft:   #FFEDE0;
  --ic-hue-ghost:  #FF9F5E;
  --ic-hue-edge:   #E4B28B;
}

/* Orange — the kit accent itself. */
body.ic-path--build-beyond-you {
  --ic-hue: #FF6600; --ic-hue-ink: #8C3800;
  --ic-hue-soft: #FFEDE0; --ic-hue-ghost: #FF9F5E; --ic-hue-edge: #E4B28B;
}
/* Amber — the accent turned toward gold. */
body.ic-path--venture-to-value {
  --ic-hue: #C87E06; --ic-hue-ink: #7D4E00;
  --ic-hue-soft: #F8F0E1; --ic-hue-ghost: #DCAE62; --ic-hue-edge: #D5B88D;
}
/* Clay — the sand #DACFC1 taken to full strength. */
body.ic-path--lean-to-leverage {
  --ic-hue: #A9714C; --ic-hue-ink: #6E4830;
  --ic-hue-soft: #F5EEEA; --ic-hue-ghost: #C9A68E; --ic-hue-edge: #CCB5A0;
}
/* Rust — the accent turned toward red. */
body.ic-path--organisation-to-advantage {
  --ic-hue: #B24A2E; --ic-hue-ink: #8C3A24;
  --ic-hue-soft: #F6E9E6; --ic-hue-ghost: #CF8D7B; --ic-hue-edge: #CFAA98;
}

/* ---------------------------------------------------------------------------
   2. The services grid — the "white blurry" sections
   ---------------------------------------------------------------------------
   Lettery sizes each card with an aspect-ratio spacer meant for a cover image
   (`padding-bottom:90%`), then absolutely positions the text over it. With no
   image the spacer is dead height and the gradient meant to darken that image
   washes the page out instead. Collapse the spacer, return the text to normal
   flow, and the card becomes as tall as its content.
   ------------------------------------------------------------------------ */
body.ic-page .mil-services-1 {
  background: var(--ic-paper);
  overflow: visible;
}

/* The empty cover spacer and the wash it carried. */
body.ic-page .mil-services-1 .mil-card-1 .mil-cover {
  display: none !important;
  padding-bottom: 0 !important;
}
body.ic-page .mil-services-1 > .mil-gradient-overlay,
body.ic-page .mil-services-1 > .mil-section-bg,
body.ic-page .mil-services-1 > .mil-just-image {
  display: none !important;
}

/* Bootstrap columns give 4-up, so a five-card row (Build Beyond You) breaks to
   4 + 1 and leaves three empty cells. A grid fits whatever it is given. */
body.ic-page .mil-services-1 > .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: 14px;
  margin: 0;
}

/* `auto-fit` fits as many tracks as the width allows, which is not the same as
   fitting the cards it was given. Six cards in five tracks leaves one alone on
   a second row beside four empty cells — and because the section sits on
   charcoal with a white panel behind the grid, those empty cells read as a
   torn white block rather than as space.
   `:first-child:nth-last-child(n)` is a quantity query: it matches only when
   the row holds exactly n children, so each card count gets a track count that
   divides it. Where :has() is unsupported the auto-fit rule above still
   applies — the layout is imperfect, never broken.

   These are banded by width on purpose. A `:has()` selector outranks a plain
   class selector, so an unbanded quantity query would also win inside the
   narrow-screen media queries below and pin six cards across a phone. */
@media (min-width: 1200px) {
  /* One row per step sequence: 01 → 06 reads as one journey. */
  body.ic-page .mil-services-1 > .row:has(> *:first-child:nth-last-child(6)) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  body.ic-page .mil-services-1 > .row:has(> *:first-child:nth-last-child(5)) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  body.ic-page .mil-services-1 > .row:has(> *:first-child:nth-last-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* Six splits 3+3 and four splits 2+2, both clean. Five cannot divide either
     way; three columns leaves it 3+2, which is the smallest remainder. */
  body.ic-page .mil-services-1 > .row:has(> *:first-child:nth-last-child(6)),
  body.ic-page .mil-services-1 > .row:has(> *:first-child:nth-last-child(5)),
  body.ic-page .mil-services-1 > .row:has(> *:first-child:nth-last-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body.ic-page .mil-services-1 > .row:has(> *:first-child:nth-last-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
body.ic-page .mil-services-1 > .row > [class*="col-"] {
  flex: none;
  width: 100%;
  max-width: none;
  padding: 0;
}

/* ---------------------------------------------------------------------------
   3. The card
   ------------------------------------------------------------------------ */
/* Flex column so the tinted panel below stretches to the tallest card in the
   row. Without this a card with less copy tints only as far as its text and
   leaves bare white beneath it. */
body.ic-page .mil-services-1 .mil-card-1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ic-paper);
  /* Hairline carrying a trace of the card's hue, rather than a stripe across
     the top of it. Falls back to the neutral hairline where color-mix is not
     understood. */
  border: 1px solid var(--ic-hairline) !important;
  border-color: color-mix(in srgb, var(--ic-card, var(--ic-hue)) 26%, #E9E5DF) !important;
  /* A single pixel of light along the top edge. This is what gives the card a
     surface instead of a fill — it is the detail the coloured bar was standing
     in for. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
  transition: box-shadow .35s cubic-bezier(0, 0, .3642, 1),
              transform  .35s cubic-bezier(0, 0, .3642, 1),
              border-color .35s ease;
}

/* Text back into normal flow. `.mil-inside` pins it to the collapsed spacer;
   `.mil-between` then spreads two children across a height that no longer
   exists. */
body.ic-page .mil-services-1 .mil-card-1 .mil-overlay {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  height: auto !important;
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start !important;
  gap: 18px;
  padding: 28px 24px 30px !important;
  /* Flat fill first, for engines without color-mix. */
  background: var(--ic-card-soft, var(--ic-hue-soft)) !important;
  /* Then the same fill with the hue gathered softly at the top and released by
     just under half way down. It reads as depth rather than decoration, which
     a 3px rule across the top never can — and it keeps the colour doing the
     work instead of a line drawn over it. Mixed against the surface, never
     against `transparent`, which resolves through black and muddies the tint. */
  background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--ic-card, var(--ic-hue)) 15%, var(--ic-card-soft, var(--ic-hue-soft))) 0,
                var(--ic-card-soft, var(--ic-hue-soft)) 46%
              ) !important;
}

/* Lettery hides the description until hover by translating it out of the card
   and fading it. main.js also toggles `mil-active` on the whole set, which is
   what leaves the four Crucible cards sitting at four different heights. With
   the card sized by its content there is nothing to reveal — show everything,
   always, at one height. */
body.ic-page .mil-services-1 .mil-card-1 .mil-top-hidden,
body.ic-page .mil-services-1 .mil-card-1 .mil-bottom-hidden,
body.ic-page .mil-services-1 .mil-card-1 .mil-bottom-part-hidden,
body.ic-page .mil-services-1 .mil-card-1 .mil-hidden-part {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* The dark hover fill, in all three states Lettery sets it from. Repeats the
   gradient rather than flattening it, or the wash would vanish on hover. */
body.ic-page .mil-services-1 .mil-card-1.mil-complex-hover .mil-overlay,
body.ic-page .mil-services-1 .mil-card-1:hover.mil-complex-hover .mil-overlay,
body.ic-page .mil-services-1 .mil-card-1.mil-active.mil-complex-hover .mil-overlay {
  background: var(--ic-card-soft, var(--ic-hue-soft)) !important;
  background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--ic-card, var(--ic-hue)) 15%, var(--ic-card-soft, var(--ic-hue-soft))) 0,
                var(--ic-card-soft, var(--ic-hue-soft)) 46%
              ) !important;
}

/* Highlight on hover — this is what replaces the click the cards used to
   pretend to offer. The hue deepens at the edge and the card lifts; the inset
   highlight is carried through so the top edge does not go flat mid-transition. */
body.ic-page .mil-services-1 .mil-card-1:hover {
  transform: translateY(-4px);
  border-color: var(--ic-card-edge, var(--ic-hue-edge)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75),
              0 22px 42px -24px rgba(22, 32, 42, .38);
}

/* A card with nowhere to go must not present itself as clickable. The
   `:not([href])` only matches because the PHP filter removed the empty href —
   if that filter is ever disabled these rules simply stop applying rather than
   leaving a link styled as though it were inert. */
body.ic-page .mil-services-1 a.mil-overlay:not([href]) {
  cursor: default;
  text-decoration: none;
}

/* Card typography. Lettery's `mil-light` / `mil-softened-40` assume a dark
   surface; these cards are now light. */
body.ic-page .mil-services-1 .mil-card-1 h5,
body.ic-page .mil-services-1 .mil-card-1 .mil-light {
  color: var(--ic-ink) !important;
  margin-bottom: 10px !important;
  font-size: 19px;
  line-height: 1.3;
}
body.ic-page .mil-services-1 .mil-card-1 p {
  color: var(--ic-body) !important;
  font-size: 14.5px;
  line-height: 1.62;
  margin: 0;
}

/* The Terio device: an oversized tinted numeral instead of a faint grey one. */
body.ic-page .mil-services-1 .mil-card-1 .mil-text-lg {
  color: var(--ic-card-ghost, var(--ic-hue-ghost)) !important;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  opacity: 1 !important;
}
body.ic-page .mil-services-1 .mil-card-1 .mil-icon {
  width: 38px !important;
}
body.ic-page .mil-services-1 .mil-card-1 .mil-icon img {
  width: 100%;
  height: auto;
}

/* The swapped-in marks draw with `currentColor`, so each takes the colour of
   the card it sits in rather than every icon on the site being one baked-in
   orange. Set on the holder because the <svg> inherits from it. */
body.ic-page .mil-services-1 .mil-card-1 .mil-icon:has(.ic-card-icon) {
  color: var(--ic-card, var(--ic-hue));
  width: 38px !important;
}
body.ic-page .mil-services-1 .mil-card-1 .ic-card-icon {
  display: block;
  width: 100%;
  height: auto;
}

/* The marks are stroke drawings, and several plugins on this site ship a blunt
   `svg { fill: currentColor }` — Safe SVG's `.safe-svg-cover svg` among them.
   A CSS declaration beats the `fill="none"` presentation attribute on the tag,
   so every closed path fills in and the icons render as solid blobs. Assert it
   here instead of hoping to out-specify whichever plugin is loaded, then hand
   fill back to the few elements that genuinely ask for it. */
body.ic-page .ic-card-icon,
body.ic-page .ic-card-icon * {
  fill: none !important;
  stroke: currentColor;
}
body.ic-page .ic-card-icon [fill="currentColor"] {
  fill: currentColor !important;
  stroke: none;
}

/* ---------------------------------------------------------------------------
   3b. The second card row on Build Beyond You
   ---------------------------------------------------------------------------
   That page runs five cards and then four, in the same hue with the same
   treatment — nine cards in one look, and the most repetitive page of the
   five. The two rows are saying different things: the first is the process
   (Mine → Scale), the second is what you end up holding (a methodology, a
   buyer, an offer, evidence). Give the second the outline treatment so the
   page has two kinds of block rather than one block twice.

   `:has()` picks the second services widget without depending on an Elementor
   element id; where it is unsupported both rows keep the filled treatment,
   which is today's state. */
body.ic-path--build-beyond-you
  .elementor-top-section:has(.mil-services-1) ~ .elementor-top-section .mil-services-1 .mil-card-1 .mil-overlay {
  background: var(--ic-paper) !important;
}
body.ic-path--build-beyond-you
  .elementor-top-section:has(.mil-services-1) ~ .elementor-top-section .mil-services-1 .mil-card-1 {
  border-color: var(--ic-hue-edge) !important;
  box-shadow: none;
}
/* Outline cards carry the hue on a short rule under the title instead of in
   the fill, so the two rows differ by structure rather than only by shade. */
body.ic-path--build-beyond-you
  .elementor-top-section:has(.mil-services-1) ~ .elementor-top-section .mil-services-1 .mil-card-1 h5::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin: 12px 0 2px;
  background: var(--ic-hue);
}

/* ---------------------------------------------------------------------------
   4. Per-card hue on the Crucible
   ---------------------------------------------------------------------------
   The four process steps carry the same four hues the four pathway pages use,
   so the colour language is consistent across the section and the pages it
   leads to. On the pathway pages every card holds that page's own hue, which
   is what --ic-hue already resolves to.
   ------------------------------------------------------------------------ */
body.ic-path--crucible .mil-services-1 > .row > *:nth-child(4n + 1) {
  --ic-card: #FF6600; --ic-card-soft: #FFEDE0;
  --ic-card-ghost: #FF9F5E; --ic-card-edge: #E4B28B;
}
body.ic-path--crucible .mil-services-1 > .row > *:nth-child(4n + 2) {
  --ic-card: #C87E06; --ic-card-soft: #F8F0E1;
  --ic-card-ghost: #DCAE62; --ic-card-edge: #D5B88D;
}
body.ic-path--crucible .mil-services-1 > .row > *:nth-child(4n + 3) {
  --ic-card: #A9714C; --ic-card-soft: #F5EEEA;
  --ic-card-ghost: #C9A68E; --ic-card-edge: #CCB5A0;
}
body.ic-path--crucible .mil-services-1 > .row > *:nth-child(4n + 4) {
  --ic-card: #B24A2E; --ic-card-soft: #F6E9E6;
  --ic-card-ghost: #CF8D7B; --ic-card-edge: #CFAA98;
}

/* ---------------------------------------------------------------------------
   5. Section rhythm and headings
   ---------------------------------------------------------------------------
   Terio's `.gap` is 120px top and bottom with alternating surfaces. The pages
   currently run one continuous tone, which is the other half of why they read
   as flat. Alternate white and a warm off-white so each band is legible as a
   separate thought.
   ------------------------------------------------------------------------ */
/* The Elementor documents already alternate section backgrounds — cream,
   lavender, warm — and those rules outrank anything a class selector here can
   write. What made the pages read as one flat slab was the two services
   sections in the middle of that sequence, which were charcoal behind a white
   wash. With those now on white the rhythm reads on its own, so there is
   deliberately no section-background rule here to fight Elementor over. */

/* Kicker: `Who this is for`, `Where the crucible leads`. Terio sets these in
   the accent colour above the heading; Lettery ships them at 60% grey. */
body.ic-page .mil-link.mil-softened-60,
body.ic-page .mil-link.mil-softened-50 {
  color: var(--ic-hue-ink) !important;
  font-weight: 600;
  letter-spacing: .16em;
  opacity: 1 !important;
}

/* Heading, with Terio's short rule beneath it.
   Deliberately no `color` here. The theme already renders these at #0B0500,
   which is right on every light band, and setting an ink colour blanket-style
   also hit the one dark band on the site and pushed an already-failing
   heading from 1.54:1 to 1.25:1. Colour for that band is handled below, by
   the band itself rather than by every heading on the site. */
body.ic-page .mil-title-el {
  letter-spacing: -.01em;
}
body.ic-page .mil-title-el::after {
  content: "";
  display: block;
  width: 62px;
  height: 3px;
  margin-top: 22px;
  background: var(--ic-hue);
}

/* ---- The one dark band on the site -----------------------------------------
   `Where the Crucible leads / One gateway. Three pathways.` sits on charcoal.
   Its heading has always rendered at #0B0500 there — 1.54:1, effectively
   invisible, and visible as such in the page's own screenshots. Nothing in the
   markup marks the band as dark: no `mil-light`, no modifier class, only an
   Elementor background on a generated element id that would not survive the
   section being rebuilt. What is stable about it is what it contains — this is
   the band that holds the pathway cards — so that is what selects it.

   If `:has()` is unavailable the rules are dropped and the band returns to its
   previous state. That is the pre-existing bug, not a new one. */
body.ic-path--crucible .elementor-top-section:has(.ic-path) .mil-title-el {
  color: #fff;                       /* 12.6:1 on #263238 */
}
body.ic-path--crucible .elementor-top-section:has(.ic-path) .mil-link.mil-softened-60,
body.ic-path--crucible .elementor-top-section:has(.ic-path) .mil-link.mil-softened-50 {
  color: var(--ic-brand-lift) !important; /* 5.61:1 — #FF6600 is 4.48:1 here */
}
body.ic-path--crucible .elementor-top-section:has(.ic-path) .mil-title-el::after {
  background: var(--ic-brand-lift);
}

/* The footer is dark too, but it was never in scope: its kicker is theme-styled
   white and its headings carry no rule. Put both back the way the theme has
   them so the section rules above cannot bleed into it. */
body.ic-page .mil-footer-1 .mil-link.mil-softened-60,
body.ic-page .mil-footer-1 .mil-link.mil-softened-50 {
  color: rgba(255, 255, 255, .6) !important;
  letter-spacing: normal;
  font-weight: 400;
}
body.ic-page .mil-footer-1 .mil-title-el::after {
  display: none;
}

/* ---- Hero descriptor ------------------------------------------------------
   The paragraph beside each hero h1 — "For founders, startups, side ventures
   …" — is the one line that says who the page is for, and Lettery renders it at
   #92989B on the charcoal hero: 4.39:1 at 19px regular, just under the 4.5:1
   AA floor (19px only counts as large text when bold). Lifting it two steps
   clears it at 5.01:1 without making it compete with the headline.

   Scoped to the hero: `.mil-text-lg` is also the card numeral class, which is
   meant to sit quietly at ~2:1 and must not be dragged up with it. */
body.ic-page .mil-hero-1 .mil-text-lg,
body.ic-page .mil-hero-1 .mil-softened-40 {
  color: #9DA3A6;
}

/* ---- Hero label -----------------------------------------------------------
   `Innovating Chaos · Venture-to-Value` is the only thing above the headline
   that says which pathway this is, and it ships at 11px in a colour close to
   the background — so the page opens without ever naming its own subject. It
   is not a contrast failure (6.5:1); it is simply too quiet to do its job.
   Given more size, weight and a short accent rule, the page announces what it
   is before the headline has to. */
body.ic-page .mil-hero-1 .mil-suptitle,
body.ic-page .mil-hero-1 .mil-link.mil-accent {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--ic-brand-lift) !important;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--ic-brand-lift);
}

/* ---------------------------------------------------------------------------
   6. Buttons
   ---------------------------------------------------------------------------
   Terio's outline button with a 45° fill that wipes in on hover. The brand
   orange, not the pathway hue: the action is the same action on every page.
   ------------------------------------------------------------------------ */
body.ic-page .mil-button {
  background-image: linear-gradient(45deg, var(--ic-brand) 50%, transparent 50%);
  background-position: 100%;
  background-size: 400%;
  border: 1px solid var(--ic-brand);
  color: var(--ic-brand-ink) !important;
  transition: background-position .5s ease-in-out, color .35s ease;
}
body.ic-page .mil-button:hover {
  background-position: 0;
  color: var(--ic-ink) !important;
}

/* ---------------------------------------------------------------------------
   7. The Crucible pathway cards
   ---------------------------------------------------------------------------
   These are hand-authored in an Elementor HTML widget and already work. They
   sit on a dark band and were built for it, so the frosted treatment stays —
   what changes is that each card now carries the hue of the page it leads to,
   which is the only signal currently missing from them.
   ------------------------------------------------------------------------ */
body.ic-path--crucible .ic-path__grid > *:nth-child(1) { --ic-card: #FF8A3D; }
body.ic-path--crucible .ic-path__grid > *:nth-child(2) { --ic-card: #E39A45; }
body.ic-path--crucible .ic-path__grid > *:nth-child(3) { --ic-card: #C79070; }
body.ic-path--crucible .ic-path__grid > *:nth-child(4) { --ic-card: #D0705A; }

body.ic-path--crucible .ic-path__card {
  border-color: color-mix(in srgb, var(--ic-card) 34%, transparent);
}
body.ic-path--crucible .ic-path__card:hover {
  border-color: color-mix(in srgb, var(--ic-card) 66%, transparent);
}
body.ic-path--crucible .ic-path__bar {
  background: linear-gradient(90deg, var(--ic-card), transparent);
}
body.ic-path--crucible .ic-path__tag {
  color: var(--ic-card);
  border-color: color-mix(in srgb, var(--ic-card) 42%, transparent);
  background: color-mix(in srgb, var(--ic-card) 12%, transparent);
}
body.ic-path--crucible .ic-path__link {
  color: var(--ic-card);
  border-color: color-mix(in srgb, var(--ic-card) 40%, transparent);
  background: color-mix(in srgb, var(--ic-card) 10%, transparent);
}
body.ic-path--crucible .ic-path__link:hover {
  background: color-mix(in srgb, var(--ic-card) 22%, transparent);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   8. Narrow screens
   ------------------------------------------------------------------------ */
/* A five-card row (Build Beyond You, Venture-to-Value) drops to four columns
   at around 1100px and leaves one card alone on a second row. Narrowing the
   track keeps all five together down to tablet width, below which two columns
   is the honest layout. */
@media (max-width: 1199px) {
  body.ic-page .mil-services-1 > .row {
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  }
}
@media (max-width: 991px) {
  body.ic-page .mil-services-1 > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Phones ---------------------------------------------------------------
   Measured on a 390px screen before touching any of this:

     hero h1     48px on 48px leading  ->  6 lines, 288px tall
     hero total  1128px                ->  1.34 screens before any content
     lead copy   19px

   The headline is set for a desktop measure and never reduced, so a phone gets
   six lines of it at full size and has to scroll a whole screen past the hero
   to reach the page. Nothing here is a contrast problem — the h1 is white at
   13.16:1 — it is purely scale. At 32px the same sentence sets in four lines
   and the hero comes back under one screen.

   The theme sets these with high specificity, hence !important. */
@media (max-width: 767px) {

  body.ic-page .mil-hero-1 h1 {
    font-size: 32px !important;
    line-height: 1.14 !important;
    letter-spacing: -.01em;
  }
  body.ic-page .mil-hero-1 .mil-text-lg {
    font-size: 16.5px !important;
    line-height: 1.55 !important;
  }
  body.ic-page .mil-hero-1 .mil-suptitle,
  body.ic-page .mil-hero-1 .mil-link.mil-accent {
    font-size: 11.5px;
    letter-spacing: .16em;
    padding-bottom: 8px;
  }
  /* 100px of padding above a headline that already fills the screen. */
  body.ic-page .mil-hero-1 {
    padding-top: 56px !important;
    padding-bottom: 40px !important;
  }
  /* Section rhythm is built for desktop; on a phone it is mostly empty space. */
  body.ic-page .elementor-top-section > .elementor-container {
    padding-top: 0;
    padding-bottom: 0;
  }
  body.ic-page .mil-title-el {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    line-height: 1.2 !important;
  }
  body.ic-page .mil-title-el::after {
    margin-top: 14px;
  }

  body.ic-page .mil-services-1 > .row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.ic-page .mil-services-1 .mil-card-1 .mil-overlay {
    padding: 22px 20px 24px !important;
  }
  body.ic-page .mil-title-el::after {
    margin-top: 16px;
  }
}

/* ---------------------------------------------------------------------------
   9. Dark mode
   ---------------------------------------------------------------------------
   This site has no dark mode. There is no `prefers-color-scheme` rule in the
   theme, the Elementor kit or any page, and no toggle. That is exactly why the
   obvious version of this is dangerous: styling only the cards would leave a
   dark-mode reader with dark cards sitting on a page that stayed cream, which
   is worse than no dark mode at all.

   So this inverts the whole of these five pages — section backgrounds, body
   copy, headings, cards, rules and numerals — rather than the parts this
   stylesheet happens to own. Within a pathway page the result is coherent.

   WHAT IS STILL LIGHT
   -------------------
   The other pages on the site. A reader in dark mode gets dark pathway pages
   and a light home page until the same pass is done there, and that pass has
   to be done per Elementor section: the section backgrounds are per-section
   hex values (rgb(250,247,242), rgb(244,241,250), rgb(255,244,230)), not the
   kit's global colours, so there is no variable to flip.

   If that mixed state is not wanted yet, this whole block is one line to
   disable and nothing else changes:

       add_filter( 'ic_dark_mode_enabled', '__return_false' );

   Contrast on every value below is measured against the surface it lands on:
   headings 15.0:1, body 8.0:1, and each hue ink 4.7-5.2:1 on its own card.
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {

  body.ic-page.ic-dark-ok {
    --ic-ink:        #F2EFEA;
    --ic-body:       #A9B2B7;
    --ic-hairline:   #33404A;
    --ic-paper:      #141C21;
    --ic-paper-warm: #1B2529;
    --ic-brand-ink:  #FF8A3D;
  }

  body.ic-dark-ok.ic-path--build-beyond-you {
    --ic-hue-ink: #FF751A; --ic-hue-soft: #39312A;
    --ic-hue-ghost: #A64E13; --ic-hue-edge: #4B3A2A;
  }
  body.ic-dark-ok.ic-path--venture-to-value {
    --ic-hue-ink: #D39838; --ic-hue-soft: #32342B;
    --ic-hue-ghost: #845D17; --ic-hue-edge: #43412C;
  }
  body.ic-dark-ok.ic-path--lean-to-leverage {
    --ic-hue-ink: #C39C82; --ic-hue-soft: #2F3333;
    --ic-hue-ghost: #725541; --ic-hue-edge: #3E4038;
  }
  body.ic-dark-ok.ic-path--organisation-to-advantage {
    --ic-hue-ink: #D19282; --ic-hue-soft: #302E30;
    --ic-hue-edge: #423637; --ic-hue-ghost: #783D2F;
  }

  /* Sections. Elementor writes these per-element, so they need !important to
     reach. Alternating two charcoals keeps the band rhythm that stops the page
     reading as one slab — the same job the cream and lavender do in light. */
  body.ic-page.ic-dark-ok .elementor-top-section {
    background-color: var(--ic-paper) !important;
  }
  body.ic-page.ic-dark-ok .elementor-top-section:nth-of-type(even) {
    background-color: var(--ic-paper-warm) !important;
  }
  body.ic-page.ic-dark-ok,
  body.ic-page.ic-dark-ok .mil-content {
    background-color: var(--ic-paper) !important;
  }

  /* Type. */
  body.ic-page.ic-dark-ok .mil-title-el,
  body.ic-page.ic-dark-ok h1, body.ic-page.ic-dark-ok h2,
  body.ic-page.ic-dark-ok h3, body.ic-page.ic-dark-ok h5 {
    color: var(--ic-ink) !important;
  }
  body.ic-page.ic-dark-ok .mil-text,
  body.ic-page.ic-dark-ok .mil-text p,
  body.ic-page.ic-dark-ok .elementor-widget-text-editor {
    color: var(--ic-body) !important;
  }

  /* Cards. The tokens above already carry the dark surfaces, so the card rules
     in section 3 resolve correctly without being restated — only the two that
     name a literal colour need it. */
  body.ic-page.ic-dark-ok .mil-services-1 {
    background: var(--ic-paper) !important;
  }
  body.ic-page.ic-dark-ok .mil-services-1 .mil-card-1 {
    background: var(--ic-paper);
    border-color: var(--ic-card-edge, var(--ic-hue-edge)) !important;
    /* The inset white highlight reads as a scuff on a dark surface. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  body.ic-page.ic-dark-ok .mil-services-1 .mil-card-1:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
                0 22px 42px -24px rgba(0, 0, 0, .8);
  }
  body.ic-page.ic-dark-ok .mil-services-1 .mil-card-1 h5,
  body.ic-page.ic-dark-ok .mil-services-1 .mil-card-1 .mil-light {
    color: var(--ic-ink) !important;
  }
  body.ic-page.ic-dark-ok .mil-services-1 .mil-card-1 p {
    color: var(--ic-body) !important;
  }
  /* The outlined second row on Build Beyond You. */
  body.ic-dark-ok.ic-path--build-beyond-you
    .elementor-top-section:has(.mil-services-1) ~ .elementor-top-section .mil-services-1 .mil-card-1 .mil-overlay {
    background: var(--ic-paper) !important;
  }

  /* The artwork is drawn on cream paper and cannot invert. Take the glare off
     it so it does not sit on the page like a lightbox. */
  body.ic-page.ic-dark-ok .mil-just-image img {
    filter: brightness(.88) saturate(.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ic-page .mil-services-1 .mil-card-1,
  body.ic-page .mil-button {
    transition: none !important;
  }
  body.ic-page .mil-services-1 .mil-card-1:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   10. Self-selection block
   ---------------------------------------------------------------------------
   Sits before the final call to action on the four pathway pages. Rendered by
   IC_Pathway_Crosslinks; see that file for why this exists rather than a
   reordering of the sections.

   Deliberately quieter than the page's own cards: it is an escape hatch, not a
   competing offer. Hairline cards on the warm surface, no fill, hue only on the
   rule and the arrow.
   ------------------------------------------------------------------------ */
body.ic-page .ic-xlink {
  padding: clamp(48px, 6vw, 78px) 0 clamp(40px, 5vw, 62px);
  background: var(--ic-paper-warm);
  border-top: 1px solid var(--ic-hairline);
}
body.ic-page .ic-xlink > * {
  max-width: 1310px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 34px);
}
body.ic-page .ic-xlink__kicker {
  margin: 0 0 10px;
  color: var(--ic-hue-ink);
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
body.ic-page .ic-xlink__heading {
  margin: 0 0 30px;
  color: var(--ic-ink);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}
body.ic-page .ic-xlink__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
body.ic-page .ic-xlink__card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  background: var(--ic-paper);
  border: 1px solid var(--ic-hairline);
  text-decoration: none !important;
  transition: border-color .3s ease, transform .3s cubic-bezier(0, 0, .3642, 1);
}
body.ic-page .ic-xlink__card:hover {
  transform: translateY(-3px);
  border-color: var(--ic-hue-edge);
}
body.ic-page .ic-xlink__tag {
  color: var(--ic-body);
  font-family: "Outfit", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.ic-page .ic-xlink__title {
  margin: 9px 0 7px;
  color: var(--ic-ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}
body.ic-page .ic-xlink__text {
  flex: 1 1 auto;
  color: var(--ic-body);
  font-size: 13.5px;
  line-height: 1.55;
}
body.ic-page .ic-xlink__go {
  margin-top: 16px;
  color: var(--ic-hue-ink);
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}
body.ic-page .ic-xlink__foot {
  margin: 26px 0 0;
  color: var(--ic-body);
  font-size: 14.5px;
}
body.ic-page .ic-xlink__foot a {
  color: var(--ic-hue-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 991px) {
  body.ic-page .ic-xlink__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body.ic-page .ic-xlink__grid { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
  body.ic-page.ic-dark-ok .ic-xlink {
    background: var(--ic-paper-warm);
    border-top-color: var(--ic-hairline);
  }
  body.ic-page.ic-dark-ok .ic-xlink__card {
    background: var(--ic-paper);
    border-color: var(--ic-hairline);
  }
}

/* ---------------------------------------------------------------------------
   11. The empty testimonial carousel
   ---------------------------------------------------------------------------
   Every pathway page carries a testimonial-carousel widget that renders ~9KB of
   markup and no visible text — it has never been populated. It contributes
   nothing, occupies vertical space, and puts empty slide and pagination nodes
   in the accessibility tree.

   Hidden rather than removed: removing it means editing five Elementor
   documents, and the moment a real testimonial is added the widget should come
   back on its own. `:not(:has())` means this rule stops applying the instant
   the widget has any content — so adding a testimonial in Elementor is all it
   takes, with no code change here.
   ------------------------------------------------------------------------ */
body.ic-page .elementor-widget-testimonial-carousel:not(:has(.swiper-slide)):not(:has(p)) {
  display: none;
}
/* =========================================================================
   BUILD BEYOND YOU — framework models  (added v1.7.0)
   Five-stage method, operating architecture, engagement ladder, fit.
   Scoped under .bby. Markup lives in the page (wp:html block).
   Source of truth: design/prototypes/build-beyond-you-FRAMEWORK-VISUAL-v2.html
   ========================================================================= */
/* ==========================================================================
   Build Beyond You — framework models, v2 "depth pass"
   Fixes the flatness: adds a hero, an elevation system, drawn-in geometry,
   decorative offset planes and grid-breaking overlap.

   Brand is fixed and non-negotiable here:
     accent #FF6600 · charcoal #263238 · Lato + Outfit · square geometry
     chaos-to-clarity via controlled lines — never a decorative colour gradient
   Everything is scoped under .bby so it cannot leak into the Lettery theme.
   ========================================================================== */
.bby{
  --accent:#FF6600;
  --accent-deep:#D95500;
  --charcoal:#263238;
  --charcoal-lift:#2F3C43;
  --ink:#1a2227;
  --body:#5C6468;
  --muted:#92989B;
  --line:#E4E6E7;
  --paper:#FFFFFF;
  --wash:#F4F5F5;
  --onDarkBody:#A8B2B7;
  --onDarkLine:rgba(255,255,255,.14);
  /* elevation — the main fix for "flat" */
  --e1:0 1px 2px rgba(38,50,56,.05), 0 2px 8px rgba(38,50,56,.05);
  --e2:0 2px 4px rgba(38,50,56,.06), 0 10px 24px rgba(38,50,56,.08);
  --e3:0 4px 8px rgba(38,50,56,.07), 0 20px 44px rgba(38,50,56,.12);
  font-family:"Lato",sans-serif;color:var(--body);line-height:1.7;font-size:17px;
  -webkit-font-smoothing:antialiased;
}
.bby *{box-sizing:border-box}
.bby .wrap{max-width:1120px;margin:0 auto;padding:0 28px;position:relative}
.bby section{padding:clamp(64px,9vw,116px) 0;position:relative}
.bby .eyebrow{
  font-family:"Outfit",sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin:0 0 18px;display:flex;align-items:center;gap:12px;
}
.bby .eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.bby .sec-dark .eyebrow::after{background:var(--onDarkLine)}
.bby h2.bby-h{
  font-family:"Lato",sans-serif;font-weight:900;color:var(--ink);
  font-size:clamp(28px,3.6vw,44px);line-height:1.08;letter-spacing:-.02em;margin:0 0 14px;
}
.bby .sec-dark h2.bby-h{color:#fff}
.bby .lede{font-size:19px;line-height:1.6;color:var(--body);max-width:62ch;margin:0 0 8px}
.bby .sec-dark .lede{color:var(--onDarkBody)}
.bby .sec-dark{background:var(--charcoal);position:relative;overflow:hidden;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* ---------- HERO — the part that was missing entirely ---------- */
.bby .hero{
  background:var(--charcoal);position:relative;overflow:hidden;
  padding:clamp(80px,11vw,140px) 0 clamp(64px,9vw,112px);margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
/* chaos → clarity: a field of rules that condense and brighten left-to-right.
   Two layered fields at different pitches = depth without a colour gradient. */
.bby .hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.11) 0 1px,transparent 1px 34px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 78%);
          mask-image:linear-gradient(90deg,transparent,#000 78%);
}
.bby .hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 11px);
  -webkit-mask-image:linear-gradient(90deg,#000 4%,transparent 62%);
          mask-image:linear-gradient(90deg,#000 4%,transparent 62%);
}
.bby .hero .wrap{z-index:2}
.bby .hero-inner{max-width:780px;position:relative}
/* accent plane behind the type — creates a lit surface, not a flat field */
.bby .hero-plane{
  position:absolute;left:-40px;top:-38px;width:190px;height:190px;
  border:1px solid rgba(255,255,255,.13);border-left:3px solid var(--accent);
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 70%);
  pointer-events:none;
}
.bby .hero h1{
  font-family:"Lato",sans-serif;font-weight:900;color:#fff;
  font-size:clamp(34px,5.4vw,66px);line-height:1.03;letter-spacing:-.028em;margin:0 0 20px;
  text-wrap:balance;
}
.bby .hero h1 em{font-style:normal;color:var(--accent);position:relative;white-space:nowrap}
.bby .hero .desc{
  font-size:clamp(17px,1.7vw,21px);color:#fff;opacity:.92;font-weight:300;
  border-left:2px solid var(--accent);padding-left:18px;margin:0 0 22px;max-width:56ch;
}
.bby .hero .sub{color:var(--onDarkBody);max-width:58ch;margin:0 0 34px;font-size:16.5px}
.bby .cta{display:flex;flex-wrap:wrap;gap:13px}
.bby .btn{
  font-family:"Outfit",sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;padding:17px 30px;display:inline-block;
  border:1px solid var(--accent);background:var(--accent);color:#160800;
  box-shadow:0 8px 22px rgba(255,102,0,.24);
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.bby .btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,102,0,.34);background:var(--accent-deep);border-color:var(--accent-deep)}
.bby .btn.ghost{background:transparent;color:#fff;box-shadow:none}
.bby .btn.ghost:hover{background:rgba(255,255,255,.06);border-color:var(--accent);transform:translateY(-2px)}
/* the five stages previewed as a strip, tying hero to method */
.bby .hero-strip{display:flex;gap:0;margin-top:clamp(44px,6vw,72px);border-top:1px solid var(--onDarkLine);position:relative;z-index:2}
.bby .hero-strip span{
  flex:1;font-family:"Outfit",sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding:16px 0 0;border-top:2px solid transparent;
  margin-top:-1px;transition:color .25s ease,border-color .25s ease;
}
.bby .hero-strip span:first-child{color:#fff;border-top-color:var(--accent)}
@media(max-width:760px){.bby .hero-strip{flex-wrap:wrap;gap:0 18px}.bby .hero-strip span{flex:0 0 auto}}

/* ---------- 01 · the shift ---------- */
.bby .shift{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,4vw,56px);align-items:center;margin-top:52px}
.bby .shift-col{position:relative}
.bby .shift-col h3{font-family:"Outfit",sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin:0 0 20px;color:var(--muted)}
.bby .shift-col.to h3{color:var(--accent)}
/* decorative offset plane behind the ordered stack — depth by layering */
.bby .shift-col.to::before{
  content:"";position:absolute;left:14px;top:34px;right:-14px;bottom:-14px;
  border:1px solid var(--line);background:var(--wash);z-index:0;
}
.bby .frag{
  border:1px solid var(--line);background:var(--paper);padding:13px 16px;font-size:15px;
  color:var(--muted);margin-bottom:9px;box-shadow:var(--e1);position:relative;
}
.bby .frag:nth-child(2){transform:translateX(14px) rotate(-.55deg)}
.bby .frag:nth-child(3){transform:translateX(-8px) rotate(.65deg)}
.bby .frag:nth-child(4){transform:translateX(20px) rotate(-.4deg)}
.bby .frag:nth-child(5){transform:translateX(4px) rotate(.45deg)}
.bby .ord{
  border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--paper);
  padding:13px 16px;font-size:15px;color:var(--ink);font-weight:700;margin-bottom:9px;
  box-shadow:var(--e2);position:relative;z-index:1;
  transition:transform .26s ease, box-shadow .26s ease;
}
.bby .ord:hover{transform:translateX(4px);box-shadow:var(--e3)}
.bby .shift-arrow{
  font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);writing-mode:vertical-rl;text-orientation:mixed;
  display:flex;align-items:center;gap:14px;font-weight:600;
}
.bby .shift-arrow::before,.bby .shift-arrow::after{content:"";width:1px;height:38px;background:var(--accent);opacity:.45}
@media(max-width:820px){
  .bby .shift{grid-template-columns:1fr;gap:26px}
  .bby .shift-arrow{writing-mode:horizontal-tb;justify-content:center}
  .bby .shift-arrow::before,.bby .shift-arrow::after{width:38px;height:1px}
  .bby .frag{transform:none !important}
  .bby .shift-col.to::before{display:none}
}

/* ---------- 02 · the method, with a rail that draws itself ---------- */
.bby .method{margin-top:56px;position:relative}
.bby .railsvg{position:absolute;left:0;top:23px;width:100%;height:2px;overflow:visible;z-index:0}
.bby .railsvg line{stroke:rgba(255,255,255,.3);stroke-width:1;stroke-dasharray:1400;stroke-dashoffset:1400}
.bby.is-ready .railsvg.drawn line{animation:bbyDraw 1.5s cubic-bezier(.25,.7,.3,1) forwards}
@keyframes bbyDraw{to{stroke-dashoffset:0}}
.bby .rail{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;z-index:1}
.bby .stage{position:relative;padding:0 18px 0 0}
.bby .node{
  width:14px;height:14px;background:var(--accent);position:relative;z-index:2;margin:16px 0 26px;
  box-shadow:0 0 0 5px rgba(255,102,0,.16), 0 6px 14px rgba(0,0,0,.3);
}
.bby .num{font-family:"Outfit",sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:9px}
.bby .stage h4{font-family:"Lato",sans-serif;font-weight:900;font-size:21px;color:#fff;margin:0 0 9px;letter-spacing:-.01em}
.bby .stage p{font-size:14.5px;line-height:1.62;color:var(--onDarkBody);margin:0 0 16px}
.bby .out{
  font-family:"Outfit",sans-serif;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:var(--charcoal-lift);border:1px solid var(--onDarkLine);
  border-left:2px solid var(--accent);padding:8px 11px;display:block;
  box-shadow:0 6px 16px rgba(0,0,0,.26);transition:transform .24s ease,box-shadow .24s ease;
}
.bby .stage:hover .out{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.38)}
.bby .out span{display:block;color:var(--muted);font-size:9px;letter-spacing:.16em;margin-bottom:3px}
@media(max-width:1000px){.bby .rail{grid-template-columns:repeat(3,1fr);row-gap:44px}.bby .railsvg{display:none}}
@media(max-width:620px){.bby .rail{grid-template-columns:1fr;row-gap:34px}.bby .stage{padding-right:0;border-left:1px solid var(--onDarkLine);padding-left:20px}.bby .node{margin:0 0 16px -27px}}

/* ---------- 03 · operating architecture, as a real stack ---------- */
.bby .stack{margin-top:52px;display:flex;flex-direction:column;gap:6px}
.bby .layer{
  display:grid;grid-template-columns:44px 1fr auto;gap:20px;align-items:center;
  border:1px solid var(--line);background:var(--paper);padding:18px 22px;
  transition:border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
/* elevation ramps with the stack — the higher the layer, the more it lifts */
.bby .layer:nth-child(1){margin-right:min(21%,190px);box-shadow:var(--e1)}
.bby .layer:nth-child(2){margin-right:min(16.8%,152px);box-shadow:var(--e1)}
.bby .layer:nth-child(3){margin-right:min(12.6%,114px);box-shadow:var(--e2)}
.bby .layer:nth-child(4){margin-right:min(8.4%,76px);box-shadow:var(--e2)}
.bby .layer:nth-child(5){margin-right:min(4.2%,38px);box-shadow:var(--e3)}
.bby .layer:nth-child(6){border-left:3px solid var(--accent);box-shadow:var(--e3)}
.bby .layer:hover{border-color:var(--accent);transform:translateX(6px)}
.bby .layer .lv{font-family:"Outfit",sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--accent)}
.bby .layer .nm{font-weight:700;color:var(--ink);font-size:16px}
.bby .layer .ds{color:var(--muted);font-size:14px;text-align:right;font-family:"Outfit",sans-serif}
@media(max-width:760px){.bby .layer{grid-template-columns:38px 1fr;row-gap:5px;margin-right:0 !important}.bby .layer .ds{grid-column:2;text-align:left;font-size:13px}}

/* ---------- 04 · engagement ladder ---------- */
.bby .ladder{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:end}
.bby .rung{
  border:1px solid var(--onDarkLine);padding:28px 25px;background:var(--charcoal-lift);
  display:flex;flex-direction:column;justify-content:flex-end;position:relative;
  box-shadow:0 10px 26px rgba(0,0,0,.24);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.bby .rung:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,0,0,.36);border-color:rgba(255,255,255,.24)}
.bby .rung:nth-child(1){min-height:250px}
.bby .rung:nth-child(2){min-height:292px}
.bby .rung:nth-child(3){min-height:334px;border-color:var(--accent);box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 0 1px rgba(255,102,0,.24)}
.bby .rung .step{font-family:"Outfit",sans-serif;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:14px}
.bby .rung h4{font-family:"Lato",sans-serif;font-weight:900;font-size:22px;color:#fff;margin:0 0 12px}
.bby .rung .q{color:#fff;font-size:15px;margin:0 0 14px;font-style:italic;opacity:.95}
.bby .rung p{font-size:14.5px;color:var(--onDarkBody);margin:0}
@media(max-width:820px){.bby .ladder{grid-template-columns:1fr}.bby .rung{min-height:0 !important}}

/* ---------- 05 · fit ---------- */
.bby .fit{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);box-shadow:var(--e2);background:var(--paper)}
.bby .fit-col{padding:34px 32px}
.bby .fit-col+.fit-col{border-left:1px solid var(--line);background:var(--wash)}
.bby .fit-col h4{font-family:"Outfit",sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin:0 0 20px}
.bby .fit-col.yes h4{color:var(--accent)}
.bby .fit-col.no h4{color:var(--muted)}
.bby .fit-col ul{list-style:none;margin:0;padding:0}
.bby .fit-col li{padding:0 0 12px 22px;position:relative;font-size:15.5px;color:var(--ink)}
.bby .fit-col.no li{color:var(--body)}
.bby .fit-col.yes li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--accent);box-shadow:0 2px 5px rgba(255,102,0,.4)}
.bby .fit-col.no li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:1px;background:var(--muted)}
@media(max-width:760px){.bby .fit{grid-template-columns:1fr}.bby .fit-col+.fit-col{border-left:0;border-top:1px solid var(--line)}}

/* ---------- reveal ---------- */
.bby [data-rise]{opacity:0;transform:translateY(18px)}
.bby.is-ready [data-rise]{animation:bbyRise .64s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes bbyRise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .bby [data-rise]{opacity:1;transform:none}
  .bby.is-ready [data-rise]{animation:none}
  .bby .railsvg line{stroke-dashoffset:0}
  .bby.is-ready .railsvg.drawn line{animation:none}
  .bby .layer:hover,.bby .rung:hover,.bby .ord:hover,.bby .btn:hover{transform:none}
}