/* ============================================================================
   STRATYLIX — PAGE PATTERNS
   Reusable editorial/internal-page sections shared by the homepage and every
   future capability page. Homepage-only rules live in home.css.
   Depends on brand.css tokens + layout.css primitives.
   ========================================================================== */

/* ---- tonal rhythm --------------------------------------------------------
   Sections alternate tone so the page is not one continuous dark wall. Four
   surfaces total, no per-section one-offs.
   -------------------------------------------------------------------------- */
.sx-section--alt {
  background: var(--surface);
  border-block: 1px solid var(--hairline);
}
.sx-section--deep {
  background:
    radial-gradient(80% 55% at 50% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%),
    var(--surface-inset);
  border-block: 1px solid var(--hairline);
}
.sx-section--signature {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 40%),
    var(--bg);
}
/* The page's one light surface, and its deliberate break in rhythm. It works
   by re-pointing the palette tokens inside its own subtree rather than by
   hard-coding colours on each child, so every component in here — headings,
   muted text, borders, the brand accent — resolves against a light ground with
   no per-component overrides.
   In light mode the page is already #F5F8FB, so a light band would disappear.
   There it shifts to pure white with hairlines instead: still a change of
   surface, just in the only direction left. */
.sx-section--light {
  --bg:           #F4F7FA;
  --surface:      #FFFFFF;
  --surface-2:    #FFFFFF;
  --surface-3:    #EDF2F7;
  --text:         #0B1420;
  --text-muted:   #46586C;   /* 7.4:1 on #F4F7FA */
  --text-subtle:  #5E7186;   /* 4.7:1 */
  --brand:        #0E93B4;
  --brand-ink:    #045971;   /* 7.9:1 on #FFF — brand as text, see brand.css */
  --brand-ink-hover: #046C8C;
  /* This band never re-pointed --border-brand, so a brand-tinted rule inside it
     resolved to the DARK palette's 38%-alpha #35D6EE and all but vanished on a
     white card. The light palette's own value, as in brand.css. */
  --border-brand: rgba(14, 147, 180, 0.40);
  --text-inverse: #0B1420;   /* dark label on a brand fill, as in brand.css  */
  --border:       rgba(11, 20, 32, 0.14);
  --border-strong:rgba(11, 20, 32, 0.24);
  --hairline:     rgba(11, 20, 32, 0.08);
  background: var(--bg);
  color: var(--text);
  border-block: 1px solid var(--hairline);
}
[data-surface="light"] .sx-section--light {
  --bg: #FFFFFF;
  --surface-3: #F0F4F8;
  --hairline: rgba(11, 20, 32, 0.10);
}

/* Clean dark surface — flatter than --alt, so the differentiation rail reads as
   the page settling after the hero rather than as another raised panel. */
.sx-section--why { background: var(--bg); }

/* A band is a section's height without a section's weight: one row of content,
   rules top and bottom, used where a full section would overstate the point. */
.sx-band {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--surface);
  border-block: 1px solid var(--hairline);
}
.sx-band__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-4) var(--sp-6);
}
.sx-band__title {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
}
.sx-band__cta { margin: 0; }

/* Closing CTA: the strongest surface on the page, so the end reads as an end. */
.sx-section--cta {
  background:
    radial-gradient(90% 120% at 50% 100%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 68%),
    var(--surface);
  border-top: 1px solid var(--border-brand);
}

.sx-section-foot { margin-top: var(--sp-7); }
.sx-note {
  margin-top: var(--sp-5);
  max-width: 68ch;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}

/* ---- tag lists (replaces badge-everything) ------------------------------- */
.sx-taglist {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
}
.sx-taglist li {
  padding: 0.22rem 0.62rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.sx-taglist--lg li {
  padding: 0.4rem 0.85rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-color: var(--border);
}

/* ---- positioning rows (editorial, not cards) ----------------------------- */
.sx-posrows { list-style: none; margin: 0; padding: 0; }
.sx-posrow {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--hairline);
}
.sx-posrow:last-child { border-bottom: 1px solid var(--hairline); }
.sx-posrow__num {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand);
  padding-top: 0.35em;
  font-variant-numeric: tabular-nums;
}
.sx-posrow__title { font-size: var(--fs-lg); margin: 0; }
.sx-posrow__text { grid-column: 2; margin: 0; color: var(--text-muted); max-width: 62ch; }

/* ---- solution cards ------------------------------------------------------ */
.sx-solgrid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.sx-solcard {
  display: flex; flex-direction: column;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sx-solcard:hover { border-color: var(--border-brand); transform: translateY(-2px); }
.sx-solcard__num {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.1em; color: var(--brand); margin: 0 0 var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.sx-solcard__title { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.sx-solcard__text { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.sx-solcard__link { margin: var(--sp-5) 0 0; font-size: var(--fs-sm); }
.sx-solcard__link a { text-decoration: none; font-weight: 600; }
.sx-solcard__link a:hover { text-decoration: underline; }
.sx-solcard .sx-taglist { margin-top: var(--sp-4); }

/* the signature capability gets weight without shrinking the others */
.sx-solcard--feature {
  border-color: var(--border-brand);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 9%, transparent), transparent 60%),
    var(--surface);
}
.sx-solcard--feature .sx-solcard__title { font-size: var(--fs-lg); }

/* The supporting plate under the grid. It had no rule of its own, so it
   inherited the grid's own 16px gap as its only separation and read as a
   seventh cell rather than as a band beneath the set. Twice the gap is enough
   to break it off without opening a hole in the section. */
.sx-solmedia { margin-top: var(--sp-6); }

/* ---- AI operating model + cards ----------------------------------------- */
.sx-aioperating {
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  margin-bottom: var(--sp-6);
}
/* Inside a media row the card is a grid item, and its own bottom margin is
   subtracted from the area it is asked to stretch into — which stopped it ever
   matching the plate's height. The row supplies the spacing below itself now,
   so the card does not need to. */
.sx-mediarow .sx-aioperating { margin-bottom: 0; }
.sx-aioperating__title { font-size: var(--fs-md); margin: 0 0 var(--sp-5); }
.sx-aioperating__note {
  margin: var(--sp-5) 0 0; max-width: 70ch;
  font-size: var(--fs-sm); color: var(--text-subtle);
}
.sx-layers {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  list-style: none; margin: 0; padding: 0;
  counter-reset: layer;
}
/* The per-layer sentence was removed — each layer is described by the capability
   card that owns it, in the same section. What is left is the model itself, so
   the name now carries the row on its own. */
.sx-layer { padding-top: var(--sp-3); border-top: 2px solid var(--border-brand); }
.sx-layer__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--brand-ink);   /* brand as text — see brand.css */
}

.sx-aigrid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.sx-aicard {
  padding: var(--sp-5);
  border-left: 2px solid var(--border-brand);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.sx-aicard__title { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.sx-aicard__text { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- lifecycle tabs ------------------------------------------------------ */
.sx-lc {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
}
.sx-lc__tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* The six stages were one continuous bar split by hairlines — no gap at all,
     so they read as a segmented strip rather than as six boxes. Spaced and
     inset from the card edge so each stage is its own block. */
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--hairline);
}
/* A chevron between stages, so the row reads PLAN -> SOURCE -> MAKE -> ... as
   an operating flow rather than as six independent tabs. Drawn on the tab's
   own ::after in the gutter of the divider it already had, so it costs no
   markup and disappears with the divider when the row scrolls on mobile. */
.sx-lc__tab { position: relative; }
.sx-lc__tab:not(:last-child)::after {
  content: "";
  position: absolute;
  /* Centred in the gap: half of (gap + its own 8px width). It used to sit on
     the divider and carried a --bg fill to punch a hole in that line; there is
     no line to break any more, so the fill goes too. */
  right: calc((var(--sp-3) + 8px) / -2); top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-top: 1.5px solid var(--border-strong);
  border-right: 1.5px solid var(--border-strong);
  transform: rotate(45deg);
  pointer-events: none;
}
.sx-lc__tab[aria-selected="true"]:not(:last-child)::after {
  border-color: var(--brand);
}
.sx-lc__tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  min-height: 64px;
  padding: var(--sp-4) var(--sp-3);
  /* Same highlight as the featured capability card (.sx-solcard--feature):
     brand-tinted border and the 160deg cyan wash at 9%. */
  border: 1px solid var(--border-brand);
  border-radius: var(--r-sm);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 9%, transparent), transparent 60%),
    var(--surface);
  color: var(--text-muted);
  text-align: start; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* Hover brightens the edge rather than repainting the surface: a flat
   background here would wipe out the wash every other tab is wearing. */
.sx-lc__tab:hover { border-color: var(--brand); color: var(--text); }
.sx-lc__tab:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
.sx-lc__step {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  color: var(--text-subtle); font-variant-numeric: tabular-nums;
}
.sx-lc__name { font-size: var(--fs-sm); font-weight: 650; }
/* The selected stage has to stay obviously ahead of five siblings that now
   carry the same treatment: solid brand edge instead of the 38% one, and just
   over twice the wash, on top of the underline it already had. */
.sx-lc__tab[aria-selected="true"] {
  border-color: var(--brand);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 20%, transparent), transparent 62%),
    var(--surface);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--brand);
}
.sx-lc__tab[aria-selected="true"] .sx-lc__step { color: var(--brand); }
.sx-lc__panel { padding: var(--sp-6); }
.sx-lc__panel:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
.sx-lc__ptitle { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.sx-lc__blurb { margin: 0; max-width: 62ch; color: var(--text-muted); }
.sx-caplist {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
}
.sx-caplist li {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: var(--surface-2);
}

/* ---- orchestrate band ---------------------------------------------------- */
.sx-orchestrate {
  display: grid; gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--border-brand);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 8%, transparent), transparent 65%);
}
.sx-orchestrate h3 { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.sx-orchestrate p { margin: 0; color: var(--text-muted); max-width: 60ch; }
.sx-orchestrate .sx-taglist { margin-top: 0; }

/* ---- enterprise systems diagram ----------------------------------------- */
.sx-esdiagram { display: grid; gap: var(--sp-6); }
.sx-esfig { margin: 0; }
.sx-esfig svg { width: 100%; height: auto; }
.sx-esfig__node rect {
  fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1;
}
.sx-esfig__node--hub rect { stroke: var(--brand); fill: color-mix(in srgb, var(--brand) 12%, var(--surface-2)); }
.sx-esfig__node text {
  fill: var(--text); font-size: 13px; font-weight: 650;
  text-anchor: middle; font-family: var(--font-display);
}
.sx-esfig__flow path { stroke: var(--border-strong); stroke-width: 1.5; fill: none; }
.sx-esfig__plane rect { fill: var(--surface); stroke: var(--border); }
.sx-esfig__plane text {
  fill: var(--text-muted); font-size: 11px; letter-spacing: 0.08em;
  text-anchor: middle; font-family: var(--font-display);
}
.sx-esfig__plane--ai rect { stroke: var(--border-brand); fill: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.sx-esfig__plane--ai text { fill: var(--brand); }

.sx-esrows { display: grid; gap: var(--sp-5); }
.sx-esrow__label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-subtle); margin: 0;
}
.sx-esrow .sx-taglist { margin-top: var(--sp-3); }

/* ---- industries ---------------------------------------------------------- */
.sx-indgrid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.sx-indcard {
  padding: var(--sp-5);
  /* Brand-tinted, like every other block on this page. On a card whose top
     half is a dark photograph the neutral --border all but vanished against
     it; the cyan edge is what actually separates picture from page. */
  border: 1px solid var(--border-brand);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.sx-indcard h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }

/* The whole card is the hit area, but only the sector name is the link. One
   anchor per card keeps the tab order at seven stops and gives each one an
   accessible name that says where it goes; the ::after simply grows its hit
   area to the card. The card needs position:relative for that to land. */
.sx-indcard { position: relative; }
.sx-indcard__link { color: inherit; text-decoration: none; }
.sx-indcard__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}
.sx-indcard:hover { border-color: var(--brand); }
.sx-indcard:hover .sx-indcard__link { color: var(--brand-ink-hover); }
/* Ring the card, not the two words inside it — the hit area is the card, so
   that is what a keyboard user needs to see outlined. */
.sx-indcard__link:focus-visible { outline: none; }
.sx-indcard__link:focus-visible::after { box-shadow: var(--focus-ring-inset); }

/* Section banner on industries.html. Sits between the lede and the detail
   grid, so the eye lands before the reading starts. */
.sx-indbanner { margin: var(--sp-5) 0 var(--sp-6); }
.sx-indcard p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.sx-indcard--feature { border-top: 2px solid var(--brand); }

/* Cards that carry an image. These rules live here, not in components.css:
   pages.css loads later, and `.sx-indcard { padding }` would otherwise win the
   tie at equal specificity and leave the media inset from the card edges.

   The grid stretches every card to the tallest in its row, so a text-led card
   beside an image card was ending in a large void. Making the card a column
   and letting the body grow means the copy sits centred in whatever height the
   row gives it, and the space reads as whitespace instead of as a gap. */
.sx-indcard { display: flex; flex-direction: column; }
.sx-indcard__body { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; }
.sx-indcard--media { padding: 0; overflow: hidden; }
.sx-indcard--media > .sx-media {
  flex: 0 0 auto;
  /* Full-bleed: the card's own edge is the frame, so the media drops its
     border and radius and keeps only the rule that divides picture from copy.
     Brand-tinted to match that edge, so the card reads as one outline rather
     than a cyan box with a grey line across it. */
  border: 0;
  border-radius: 0;
  border-block-end: 1px solid var(--border-brand);
}
.sx-indcard--media > .sx-indcard__body { padding: var(--sp-5); }
/* No phone height cap here any more. The cap existed to stop a 3:2 slot
   running tall on a phone, but the card image is 16:9 now — 188px at 375 and
   232px at 412 — and capping it would crop a frame that is already cropped to
   fit, taking the lockup off the bottom with it. */
.sx-indmore { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
.sx-indmore h3 { font-size: var(--fs-sm); margin: 0; color: var(--text-subtle); }

/* ---- impact -------------------------------------------------------------- */
.sx-impactgrid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.sx-impact {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
}
.sx-impact__tag {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand);
}
.sx-impact__body { margin: 0; }
.sx-impact__body dt {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-subtle);
  margin-top: var(--sp-4);
}
.sx-impact__body dt:first-child { margin-top: 0; }
.sx-impact__body dd {
  margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--text-muted);
}

/* ---- why ----------------------------------------------------------------- */
.sx-whygrid {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.sx-why { padding-top: var(--sp-4); border-top: 2px solid var(--border-brand); }
.sx-why__num {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  color: var(--brand); font-variant-numeric: tabular-nums;
}
.sx-why__title { font-size: var(--fs-md); margin: var(--sp-2) 0 var(--sp-3); }
.sx-why__text { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- careers ------------------------------------------------------------- */
.sx-careers { display: grid; gap: var(--sp-5); align-items: center; }
.sx-careers h2 { margin: var(--sp-3) 0 var(--sp-4); }
.sx-careers p { color: var(--text-muted); max-width: 62ch; margin: 0; }
.sx-careers__cta { margin: 0; }

/* ---- FAQ ----------------------------------------------------------------- */
.sx-faq { border-top: 1px solid var(--hairline); }
.sx-faq h3 { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: normal; }

/* ---- final CTA ----------------------------------------------------------- */
.sx-finalcta { text-align: center; max-width: 68ch; margin-inline: auto; }
.sx-finalcta h2 { margin: var(--sp-3) 0 var(--sp-4); }
.sx-finalcta > p { color: var(--text-muted); }
.sx-contactline {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5);
  list-style: none; margin: var(--sp-7) 0 0; padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-sm);
}
.sx-contactline__k {
  display: block; font-size: var(--fs-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-subtle); margin-bottom: 0.15rem;
}
.sx-contactline a { color: var(--text); text-decoration: none; }
.sx-contactline a:hover { color: var(--brand); text-decoration: underline; }

/* ---- legal --------------------------------------------------------------- */
.sx-section--legalhero { padding-block: clamp(3rem, 6vw, 5rem) var(--sp-6); }
.sx-legal__eff { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-subtle); }
.sx-legal h2 { font-size: var(--fs-lg); margin-top: var(--sp-7); }
.sx-legal h3 { font-size: var(--fs-md); margin-top: var(--sp-6); }
.sx-legal p, .sx-legal li { color: var(--text-muted); }
.sx-legal ul, .sx-legal ol { margin: var(--sp-4) 0; padding-inline-start: var(--sp-5); }
.sx-legal li + li { margin-top: var(--sp-2); }
.sx-legal a { color: var(--brand-ink); }

.sx-notice {
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--gold);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.sx-notice__label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold);
}
.sx-notice p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 899.98px) {
  /* Lifecycle tabs become a horizontal scroller, then panels stack below.
     No content is hidden — every capability list stays in the DOM. */
  .sx-lc__tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .sx-lc__tab { flex: 0 0 auto; min-width: 8.5rem; scroll-snap-align: start; }
  .sx-lc__panel { padding: var(--sp-5); }
  .sx-posrow { grid-template-columns: 2.5rem minmax(0, 1fr); }
}

@media (min-width: 900px) {
  .sx-esdiagram { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .sx-orchestrate { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
  .sx-careers { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-7); }
}

@media (min-width: 1040px) {
  .sx-posrow { grid-template-columns: 4rem minmax(0, 22ch) minmax(0, 1fr); align-items: baseline; }
  .sx-posrow__text { grid-column: 3; }
}

/* ============================================================================
   CAPABILITY DESTINATION PATTERNS  (solutions / ai-automation /
   supply-chain-operations). Added in Big Build 4. Reused across all three.
   ========================================================================== */

/* ---- page hero ----------------------------------------------------------- */
/* Heroes were sized entirely by their own copy, so height ranged from 292px on
   a legal page to 943px on Industries — the same section reading as a different
   component on every page. They now share a floor and centre their content, so
   a short hero and a long one both present as a full opening rather than as a
   band that happens to be whatever tall.

   svh, not vh: on mobile, vh is the tallest viewport, so a 100vh hero is cut
   off by the browser chrome until the user scrolls. svh is the smallest, which
   is the one that is always visible. The vh line is the fallback for engines
   without svh. */
.sx-phero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 78vh;
  min-height: min(78svh, 860px);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: clip;
  border-bottom: 1px solid var(--hairline);
}
.sx-phero > .sx-container { width: 100%; }
.sx-phero > * { position: relative; z-index: 1; }
.sx-phero h1 { margin-top: var(--sp-4); max-width: 20ch; }
.sx-phero__lede {
  margin-top: var(--sp-5); max-width: 64ch;
  font-size: var(--fs-md); color: var(--text-muted);
}
.sx-phero__actions { margin-top: var(--sp-6); }

/* breadcrumb */
.sx-crumbs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-xs); color: var(--text-subtle);
}
.sx-crumbs a { color: var(--text-subtle); text-decoration: none; }
.sx-crumbs a:hover { color: var(--brand); text-decoration: underline; }
.sx-crumbs li + li::before { content: "/"; margin-inline-end: var(--sp-2); opacity: .5; }

/* ---- capability navigator ------------------------------------------------ */
.sx-navigator {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin-top: var(--sp-7); padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
  list-style: none;
}
.sx-navigator a {
  display: flex; align-items: baseline; gap: var(--sp-3);
  min-height: 44px; padding: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-muted); text-decoration: none;
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.sx-navigator a:hover { border-color: var(--border-brand); color: var(--text); background: var(--surface); }
.sx-navigator__num {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  color: var(--brand); font-variant-numeric: tabular-nums; flex: 0 0 auto;
}

/* ---- editorial capability block ------------------------------------------ */
/* Alternating text/visual rows — the antidote to seven identical cards. */
.sx-cap { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--hairline); }
.sx-cap:first-of-type { border-top: 0; }
.sx-cap__grid { display: grid; gap: var(--sp-6); }
.sx-cap__eyebrow {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
  margin: 0 0 var(--sp-3);
}
.sx-cap__eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.sx-cap h2 { font-size: var(--fs-xl); margin: 0 0 var(--sp-4); }
.sx-cap__lede { margin: 0 0 var(--sp-5); color: var(--text-muted); max-width: 62ch; }
.sx-cap__body p { color: var(--text-muted); max-width: 64ch; margin: 0; }
.sx-cap__body h3 { margin: 0; font-size: var(--fs-md); }
/* Element selectors, not the owl pattern: `*` has zero specificity, so
   `.sx-cap__body > * + *` would lose to `.sx-cap__body p` above. */
.sx-cap__body p + p,
.sx-cap__body p + ol,
.sx-cap__body p + ul,
.sx-cap__body ol + p,
.sx-cap__body ul + p,
.sx-cap__body p + h3,
.sx-cap__body ol + h3,
.sx-cap__body h3 + ol,
.sx-cap__body h3 + p { margin-top: var(--sp-4); }
.sx-cap__body p + h3,
.sx-cap__body ol + h3 { margin-top: var(--sp-6); }
.sx-cap__aside {
  padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); align-self: start;
}
.sx-cap__aside h3 {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-subtle); margin: 0 0 var(--sp-4);
}
.sx-cap__aside + .sx-cap__aside { margin-top: var(--sp-4); }

/* two-column capability list inside an aside */
.sx-caps2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px,100%), 1fr));
  gap: var(--sp-2) var(--sp-4);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.sx-caps2 li { padding-left: 1em; position: relative; }
.sx-caps2 li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--brand); opacity: .8;
}

/* ---- process flow (ASSESS -> ARCHITECT -> ...) --------------------------- */
.sx-flow {
  display: flex; flex-wrap: wrap;
  /* 8px, with an arrow marker straddling each seam, left these reading as one
     segmented bar rather than as six steps. Matched to the card grid's own
     gap so a row of steps is spaced like a row of cards. */
  gap: var(--sp-4);
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  counter-reset: flowstep;
}
.sx-flow li {
  position: relative; flex: 1 1 auto; min-width: 8rem;
  padding: var(--sp-3) var(--sp-4);
  /* Same highlight as the featured capability card (.sx-solcard--feature):
     brand-tinted border, and the 160deg cyan wash off the top-left corner at
     the same 9%. */
  border: 1px solid var(--border-brand); border-radius: var(--r-sm);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 9%, transparent), transparent 60%),
    var(--surface);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
}
.sx-flow li::after {
  content: "";
  position: absolute;
  /* Centred in the gap rather than hung off the box edge: half the gap out,
     and the translate carries its own half-width back. */
  inset-inline-end: calc(var(--sp-4) / -2); top: 50%;
  width: 0; height: 0; transform: translate(50%, -50%);
  border-block: 5px solid transparent;
  border-inline-start: 6px solid var(--border-brand);
}
.sx-flow li:last-child::after { display: none; }
.sx-flow small { display: block; margin-top: .3rem; font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); }

/* ---- vertical relationship chain (DEMAND -> SUPPLY -> ...) --------------- */
.sx-chain { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.sx-chain li {
  position: relative; padding: var(--sp-3) 0 var(--sp-3) var(--sp-6);
  border-left: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.sx-chain li::before {
  content: ""; position: absolute; left: -4.5px; top: 1.25rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--brand);
}
.sx-chain li:last-child { border-left-color: transparent; }
.sx-chain b { color: var(--text); font-weight: 650; display: block; }

/* ---- system relationship pill row (ERP <-> WMS <-> ...) ------------------ */
.sx-rel {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  font-size: var(--fs-sm);
}
.sx-rel li {
  padding: .35rem .8rem; border: 1px solid var(--border-brand);
  border-radius: var(--r-sm); color: var(--text);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.sx-rel li[data-sep]::after { content: none; }
.sx-rel__link { color: var(--text-subtle); padding-inline: 2px; }

/* ---- agent lifecycle ----------------------------------------------------- */
.sx-agentflow {
  display: grid; gap: var(--sp-3);
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  counter-reset: af;
}
.sx-agentflow li {
  display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-left: 2px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface);
}
.sx-agentflow li::before {
  counter-increment: af; content: counter(af, decimal-leading-zero);
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  color: var(--brand); padding-top: .15em;
}
.sx-agentflow b { display: block; font-size: var(--fs-sm); color: var(--text); }
.sx-agentflow span { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: .2rem; }

/* ---- lifecycle stage section (supply chain) ------------------------------ */
.sx-stage { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--hairline); }
.sx-stage__head { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.sx-stage__badge {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  color: var(--brand-ink); border: 1px solid var(--border-brand);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.sx-stage h2 { font-size: var(--fs-xl); margin: 0; }
.sx-stage__lede { margin: var(--sp-4) 0 0; color: var(--text-muted); max-width: 66ch; }
.sx-stage__grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }

/* ---- system architecture (supply chain) --------------------------------- */
.sx-arch { margin: 0; }
.sx-arch svg { width: 100%; height: auto; }
.sx-arch__node rect { fill: var(--surface-2); stroke: var(--border-strong); }
.sx-arch__node--key rect { stroke: var(--brand); fill: color-mix(in srgb, var(--brand) 12%, var(--surface-2)); }
.sx-arch__node text {
  fill: var(--text); font-family: var(--font-display); font-size: 12px;
  font-weight: 650; text-anchor: middle;
}
.sx-arch__plane rect { fill: var(--surface); stroke: var(--border); }
.sx-arch__plane--ai rect { stroke: var(--border-brand); fill: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.sx-arch__plane text {
  fill: var(--text-muted); font-family: var(--font-display); font-size: 10px;
  letter-spacing: .09em; text-anchor: middle;
}
.sx-arch__plane--ai text { fill: var(--brand); }
.sx-arch__flow path { stroke: var(--border-strong); stroke-width: 1.4; fill: none; }
.sx-arch__flow--live path { stroke: var(--brand); opacity: .5; stroke-dasharray: 5 7; }

/* Mobile alternative to the wide diagram — a readable stacked layer list.
   Both are in the DOM; only one is shown, so nothing is hidden from crawlers
   that isn't also stated in prose. */
.sx-arch-stack { display: grid; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.sx-arch-stack li {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface);
}
.sx-arch-stack b { display: block; font-size: var(--fs-sm); color: var(--text); }
.sx-arch-stack span { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: .15rem; }
.sx-arch-stack li[data-layer="ai"] { border-color: var(--border-brand); }

/* ---- outcome band -------------------------------------------------------- */
.sx-outcomes {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr));
  margin-top: var(--sp-6); padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
  list-style: none;
}
.sx-outcomes h3 { font-size: var(--fs-sm); margin: 0 0 var(--sp-2); color: var(--brand-ink); }
.sx-outcomes p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- cross-link band ----------------------------------------------------- */
.sx-crosslinks {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(260px,100%), 1fr));
}
.sx-crosslink {
  display: block; padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sx-crosslink:hover { border-color: var(--border-brand); transform: translateY(-2px); }
.sx-crosslink b { display: block; font-size: var(--fs-md); color: var(--text); margin-bottom: var(--sp-2); }
.sx-crosslink span { display: block; font-size: var(--fs-sm); color: var(--text-muted); }
.sx-crosslink em { display: block; margin-top: var(--sp-3); font-style: normal; font-size: var(--fs-sm); color: var(--brand-ink); font-weight: 600; }

/* ---- responsive ---------------------------------------------------------- */
.sx-arch-mobile { display: block; }
.sx-arch-desktop { display: none; }

@media (min-width: 900px) {
  .sx-cap__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .sx-cap--reverse .sx-cap__grid > :first-child { order: 2; }
  .sx-stage__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .sx-arch-mobile { display: none; }
  .sx-arch-desktop { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-arch__flow--live path { stroke-dasharray: none; animation: none; }
  .sx-crosslink:hover { transform: none; }
}

/* ============================================================================
   BIG BUILD 5 — Industries, Case Studies, About, Careers, Contact
   ========================================================================== */

/* ---- industry editorial rows -------------------------------------------- */
.sx-ind { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--hairline); }
.sx-ind__head { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.sx-ind__num {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
  color: var(--brand); font-variant-numeric: tabular-nums;
}
.sx-ind h2 { font-size: var(--fs-lg); margin: 0; }
.sx-ind__grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-4); }
.sx-ind__body p { color: var(--text-muted); margin: 0; max-width: 64ch; }
.sx-ind__body p + p { margin-top: var(--sp-4); }
.sx-ind__systems {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.sx-ind__systems dt {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-subtle); margin-bottom: var(--sp-2);
}
.sx-ind__systems dd { margin: 0; }

/* depth marker: which industries have substantiated depth vs capability-led */
.sx-depth {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .2rem .6rem; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .03em;
  border: 1px solid var(--border); color: var(--text-subtle);
}
.sx-depth--core { border-color: var(--border-brand); color: var(--brand-ink);
  background: color-mix(in srgb, var(--brand) 8%, transparent); }

/* ---- outcome / engagement records --------------------------------------- */
.sx-record {
  padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
}
.sx-record__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}
.sx-record h2, .sx-record h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-4); }
.sx-record dl { margin: 0; }
.sx-record dt {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-subtle); margin-top: var(--sp-4);
}
.sx-record dt:first-of-type { margin-top: 0; }
.sx-record dd { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.sx-record__foot {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline); font-size: var(--fs-sm);
}
.sx-record__foot a { text-decoration: none; font-weight: 600; }
.sx-record__foot a:hover { text-decoration: underline; }
.sx-recordgrid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(330px,100%), 1fr));
}

/* ---- disclosure notice (publishability, scope caveats) ------------------- */
.sx-callout {
  padding: var(--sp-5);
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface);
  margin-bottom: var(--sp-6);
}
.sx-callout p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); max-width: 72ch; }
.sx-callout p + p { margin-top: var(--sp-3); }

/* ---- about: principles --------------------------------------------------- */
.sx-principles {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(260px,100%), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.sx-principle { padding-top: var(--sp-4); border-top: 2px solid var(--border-brand); }
.sx-principle h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.sx-principle p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- careers: job list --------------------------------------------------- */
.sx-jobs { display: grid; gap: var(--sp-4); }
.sx-job {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.sx-job__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--sp-3);
  width: 100%; min-height: 56px;
  padding: var(--sp-5);
  text-align: start; color: var(--text);
}
.sx-job__head:hover { background: var(--surface-2); }
.sx-job__head:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
.sx-job__title { font-size: var(--fs-md); font-weight: 650; margin: 0; }
.sx-job__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  font-size: var(--fs-xs); color: var(--text-subtle);
}
.sx-job__body { padding: 0 var(--sp-5) var(--sp-5); }
.sx-job__body[hidden] { display: none; }
.sx-job__body h3 {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-subtle);
  margin: var(--sp-5) 0 var(--sp-3);
}
.sx-job__body > p { margin: 0; color: var(--text-muted); max-width: 68ch; }
.sx-job__body ul { margin: 0; padding-inline-start: var(--sp-5); }
.sx-job__body li { color: var(--text-muted); font-size: var(--fs-sm); }
.sx-job__body li + li { margin-top: var(--sp-2); }
.sx-job__apply { margin-top: var(--sp-5); }

/* ---- forms --------------------------------------------------------------- */
.sx-formwrap {
  display: grid; gap: var(--sp-7);
}
.sx-form {
  display: grid; gap: var(--sp-5);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface);
}
.sx-form__row { display: grid; gap: var(--sp-5); }
.sx-form__legend {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-subtle);
  padding: 0; margin-bottom: var(--sp-4);
}
.sx-form fieldset { border: 0; padding: 0; margin: 0; }
.sx-form__note { margin: 0; font-size: var(--fs-xs); color: var(--text-subtle); }
.sx-form__note a { color: var(--brand-ink); }

.sx-contactinfo { display: grid; gap: var(--sp-5); align-content: start; }
.sx-contactinfo dl { margin: 0; display: grid; gap: var(--sp-4); }
.sx-contactinfo dt {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-subtle);
}
.sx-contactinfo dd { margin: var(--sp-1) 0 0; font-size: var(--fs-base); color: var(--text); }
.sx-contactinfo dd a { color: var(--text); text-decoration: none; }
.sx-contactinfo dd a:hover { color: var(--brand); text-decoration: underline; }

/* ---- responsive ---------------------------------------------------------- */
@media (min-width: 768px) {
  .sx-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .sx-ind__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .sx-formwrap { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
}


/* Moved here from home.css. The founder block renders on BOTH index.html and
   about.html, but home.css is only loaded on the homepage — so the circular
   portrait silently stayed square on the one page built around it. */
/* ---- founder ------------------------------------------------------------- */
.sx-founder {
  display: grid; gap: var(--sp-6);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
}
/* Circular portrait. aspect-ratio guarantees a true circle even if the source
   file is not square, and object-fit keeps the face centred instead of
   squashing it. The ring is drawn with box-shadow rather than border so it
   cannot nudge the circle off-centre. */
.sx-founder__media {
  margin: 0;
  width: min(200px, 56%);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--border),
              0 0 0 6px color-mix(in srgb, var(--brand) 12%, transparent),
              var(--elev-2);
}
.sx-founder__media picture { display: block; width: 100%; height: 100%; }
.sx-founder__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-founder__copy h3 { font-size: var(--fs-lg); margin: 0 0 var(--sp-4); }
.sx-founder__copy p { color: var(--text-muted); margin: 0; max-width: 62ch; }
/* Three paragraphs with margin:0 ran together as one wall of text. */
.sx-founder__copy p + p { margin-top: var(--sp-4); }
/* The name used to sit under the biography as a caption in --text-subtle. It
   now opens the column, so it is a byline: it has to carry more weight than the
   prose beneath it, not less. */
.sx-founder__name {
  margin: 0 0 var(--sp-5) !important;
  font-size: var(--fs-md);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text) !important;
}

/* Also moved from home.css with the block above — without it the portrait and
   the copy stayed stacked on about.html at every width. */
@media (min-width: 900px) {
  .sx-founder { grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
  .sx-founder__media { width: 240px; }
}


/* Moved here from home.css: the hero backdrop is now shared by the homepage
   hero, the page hero on the eight capability/company pages, and the legal
   hero. home.css only loads on the homepage, so it could not live there. */
/* Hero backdrop, three layers bottom-to-top:
     1. the wireframe video   — motion and depth
     2. a scrim               — guarantees text contrast over any frame
     3. two brand washes      — puts the cyan/indigo back on top

   The video replaced the CSS grid pattern that used to live here; running both
   gave two competing meshes. It is decorative: muted, looping, no audio track
   at all, and it never becomes a control. */
.sx-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.sx-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
}
/* The footage is white lines on black. On a light surface it is inverted
   rather than swapped for a second encode — the source is greyscale, so
   inverting is exact and costs no extra download. */
[data-surface="light"] .sx-hero__video { filter: invert(1); opacity: .22; }

.sx-hero__bg::before {          /* scrim */
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.sx-hero__bg::after {           /* brand washes, above the footage */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 46% at 18% 22%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 72%),
    radial-gradient(38% 40% at 88% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
}

/* The page and legal heroes reuse .sx-hero__bg, so they need the same
   positioning context, and the backdrop must sit UNDER the content —
   `.sx-phero > *` otherwise lifts every direct child to z-index 1. */
/* Legal pages get the same treatment at a smaller scale: a full-height opening
   for "Cookie Policy" would be theatre, but 292px read as an accident. */
.sx-phero, .sx-section--legalhero { position: relative; overflow: clip; }
.sx-section--legalhero {
  display: flex;
  align-items: center;
  min-height: 42vh;
  min-height: min(42svh, 420px);
}
.sx-section--legalhero > .sx-container { width: 100%; }
.sx-phero > .sx-hero__bg,
.sx-section--legalhero > .sx-hero__bg { z-index: 0; }
.sx-section--legalhero > .sx-container { position: relative; z-index: 1; }

/* ---- SEO destination pages ------------------------------------------------
   Editorial, narrow measure, generous rhythm. No cards for prose — these pages
   are read, not scanned.
   -------------------------------------------------------------------------- */
.sx-seolist { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.sx-seolist li {
  position: relative; padding-inline-start: var(--sp-5);
  font-size: var(--fs-sm); line-height: 1.65; color: var(--text-muted);
}
.sx-seolist li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .7;
}
.sx-seolist strong { color: var(--text); font-weight: 650; }

.sx-deflist { margin: var(--sp-5) 0 0; display: grid; gap: 0; }
.sx-defrow {
  display: grid; gap: var(--sp-1);
  padding-block: var(--sp-4); border-top: 1px solid var(--hairline);
}
.sx-defrow:first-child { border-top: 0; padding-block-start: 0; }
.sx-defrow dt {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 650;
  color: var(--text);
}
.sx-defrow dd { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-muted); }
@media (min-width: 720px) {
  .sx-defrow { grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr); gap: var(--sp-5); }
}

/* related links */
.sx-rel { list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(260px,100%),1fr)); }
.sx-rel a {
  display: block; height: 100%; padding: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sx-rel a:hover { border-color: var(--border-brand); background: var(--surface-2); }
.sx-rel__t { display: block; font-weight: 650; color: var(--text); margin-bottom: var(--sp-1); }
.sx-rel__d { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.55; }



/* ---- impact cases (light section) -----------------------------------------
   Six cases, two across from 680px up: 2 x 3, not 3 x 2. Three across was
   right when each card carried one condensed summary line; with Challenge and
   Approach spelled out it leaves a ~28ch measure, which is a column of broken
   words rather than a readable paragraph.

   Each card is a <dl> of three named facets. The OUTCOME is the payload — it
   is the only approved claim on the card — so it is the only thing here that
   is emphasised: pinned to the foot with margin-top:auto so the six line up
   across the grid whatever the copy length above them, bled to the card edges,
   and given the cyan rule and a 7% tint. Challenge and Approach stay quiet.

   --case-pad is a handle, not decoration: the outcome band cancels the card's
   padding with negative margins, so the two must always agree. Changing the
   padding at a breakpoint changes both.
   -------------------------------------------------------------------------- */
.sx-outcomegrid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--sp-6);
}
@media (min-width: 680px) { .sx-outcomegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sx-outcome {
  --case-pad: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--case-pad);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.sx-outcome__tag {
  margin: 0;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--brand-ink);   /* brand as text — see brand.css */
}

/* The three facets. flex:1 so the outcome's margin-top:auto has room to push
   against, which is what lines the bands up across a row. */
.sx-outcome__facets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 auto;
  margin: 0;
}
.sx-outcome__facet dt {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-subtle);
}
.sx-outcome__facet dd {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* The outcome band. Negative margins cancel --case-pad on three sides so it
   meets the card's edges; the bottom corners are rounded to the card's radius
   less its 1px border, or the fill shows outside the stroke. */
.sx-outcome__facet--result {
  margin: auto calc(var(--case-pad) * -1) calc(var(--case-pad) * -1);
  padding: var(--sp-4) var(--case-pad);
  border-top: 1px solid var(--border-brand);
  border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
  background: color-mix(in srgb, var(--brand) 7%, transparent);
}
.sx-outcome__facet--result dt { color: var(--brand-ink); }
.sx-outcome__facet--result dd {
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}

/* Card padding on phones. sp-5 is right on a desktop grid and generous when the
   same cards are a single stacked column: twenty-six of them on the homepage,
   each paying 24px top and bottom. */
@media (max-width: 640px) {
  .sx-solcard { padding: var(--sp-4); }
  .sx-outcome { --case-pad: var(--sp-4); }
  .sx-section-head { margin-bottom: var(--sp-5); }
}


/* ---- credentials ----------------------------------------------------------
   These were .sx-taglist chips. Chips work for one- and two-word tags, which is
   what the list used to hold; the approved set includes full clauses ("8+ years
   across supply chain, operations, project management, and client delivery"),
   and a chip that wraps to three lines stops reading as a chip. A two-column
   checklist holds long and short entries side by side without either looking
   broken. */
.sx-creds {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}
.sx-creds__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.sx-creds__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 760px) {
  .sx-creds__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sx-creds__list li {
  position: relative;
  padding-inline-start: 1.6em;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}
/* A check drawn from two borders: no icon font, no extra element, and it
   inherits the brand colour like every other accent on the page. */
.sx-creds__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.15em;
  top: 0.42em;
  width: 0.42em; height: 0.72em;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
}

/* An editorial surface: calmer than the technology sections, and enough of a
   panel that the block reads as considered rather than as loose text. */
.sx-founder {
  padding: var(--sp-6);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
}
@media (min-width: 900px) { .sx-founder { padding: var(--sp-7); } }