/* ============================================================
   Airtool — Carbon-inspired stylesheet (Geist + Silver theme)

   THEME CONFIGURABLE FROM website.xml
   -----------------------------------
   <web font="Geist" accent="#525252" accent-hover="#161616">
   build.py injects an inline <style>:root{...}</style> AFTER this
   file, so the values below act as fallbacks; XML wins.

   To revert to the original IBM treatment, set in website.xml:
       font="IBM Plex Sans"  accent="#0f62fe"  accent-hover="#0353e9"
   (see FONTS{} in build.py for the full font registry)
   ============================================================ */

/* ----- Design tokens ----------------------------------------- */
:root {
  /* Type — overridden by build.py per <web font="..."> */
  --font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Carbon greys */
  --c-white:    #ffffff;
  --c-bg:       #ffffff;
  --c-bg-alt:   #f4f4f4;     /* layer-01 */
  --c-bg-soft:  #f9f9f9;
  --c-border:   #e0e0e0;     /* border-subtle-01 */
  --c-border-strong: #c6c6c6;
  --c-text:     #161616;     /* gray-100 */
  --c-text-2:   #393939;     /* gray-90 */
  --c-text-3:   #525252;     /* gray-70 */
  --c-text-4:   #6f6f6f;     /* gray-60 */
  --c-text-inv: #ffffff;

  /* Brand accent — overridden by build.py per <web accent="..."> */
  /* Default theme: Silver/graphite (monochrome).
     IBM Blue alternative was: --c-accent: #0f62fe; --c-accent-hover: #0353e9; */
  --c-accent:        #525252;
  --c-accent-hover:  #161616;
  --c-accent-soft:   rgba(82, 82, 82, 0.08);

  /* Inverse / dark surfaces */
  --c-dark:     #161616;     /* gray-100 */
  --c-dark-2:   #262626;     /* gray-90 */
  --c-dark-3:   #393939;

  /* Layout */
  --nav-h:     48px;
  --promo-h:   40px;
  --sub-h:     48px;

  /* Type scale (Carbon Productive) */
  --fs-body:    0.875rem;    /* 14px */
  --fs-body-2:  1rem;        /* 16px */
  --fs-h1:      3.375rem;    /* 54px */
  --fs-h2:      2.625rem;    /* 42px */
  --fs-h3:      2rem;        /* 32px */
  --fs-h4:      1.75rem;     /* 28px */
  --fs-h5:      1.25rem;     /* 20px */
  --fs-h6:      1rem;
  --fs-eyebrow: 0.875rem;

  /* Motion */
  --t: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

/* ----- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Empty icon containers (no icon="" set in XML) take no space;
   otherwise the flex `gap` pushes the heading right while body
   copy stays flush-left, creating mis-aligned cards. */
.service-icon:empty,
.tier-icon:empty,
.value-icon:empty,
.pillar-icon:empty,
.path-icon:empty,
.strip-icon:empty,
.deployment-icon:empty,
.solution-icon:empty,
.two-col-icon:empty,
.mv-icon:empty,
.dropdown-item-icon:empty { display: none; }
html, body { margin: 0; padding: 0; }

/* Anchor-link scroll: smooth-scroll, with offset so the sticky main nav
   does not cover the target heading. The promo banner adds height when
   present; the offset is conservative for both with and without it. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-2);
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--c-accent); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--c-accent-hover); }
button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--c-text);
}

/* ----- Container --------------------------------------------- */
.section,
.cta-banner {
  padding: 5rem 1.5rem;
}
.section > .section-header,
.section > div:not([class*="grid"]):not([class*="wrap"]):not([class*="list"]):not([class*="blocks"]) {
  /* Match the widest card grid (1584px) so headings line up with
     the left edge of the grid beneath them. */
  max-width: 1584px;
  margin-left: auto;
  margin-right: auto;
}
.section-header {
  /* Match the widest card grid (1584px) so headings align with
     the left edge of the cards beneath them. */
  max-width: 1584px;
  margin: 0 auto 3rem;
  padding: 0;
}
.section-header h2 {
  font-size: var(--fs-h2);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.section-header p {
  margin: 0;
  font-size: 1.125rem;
  color: var(--c-text-3);
  max-width: 680px;
}
/* Section eyebrow — small pill chip rendered above the h2 when @eyebrow
   is set on <pillars>, <comparison>, <callout>, etc. Same visual purpose
   as IBM's chapter chips: a quick categorical marker that gives long
   pages a chapter rhythm without inflating the h2 itself. */
.section-eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: rgba(185, 28, 28, 0.08);
  border-radius: 2px;
}
.section--dark .section-eyebrow {
  color: #ff9b9b;
  background: rgba(255, 107, 107, 0.15);
}

/* ============================================================
   1. Promotional banner (Rising Champions style)
   ============================================================ */
.promo-banner {
  background: var(--c-dark);
  color: var(--c-text-inv);
  height: var(--promo-h);
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}
.promo-banner-inner {
  max-width: 1584px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promo-tag {
  background: var(--c-accent);
  color: #fff;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.promo-text {
  flex: 1;
  color: #f4f4f4;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promo-link {
  color: #fff;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.promo-link:hover {
  color: #fff;
  border-bottom-color: #fff;
}
.promo-arrow {
  display: inline-block;
  transition: transform var(--t);
}
.promo-link:hover .promo-arrow { transform: translateX(2px); }

/* ============================================================
   2. Main navigation
   ============================================================ */
.main-nav {
  position: sticky;
  top: 0;
  z-index: 400;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

/* Full-bleed dark hero pages : the navbar and promo banner stay as
   normal (white / light); the dark hero starts below them in flow,
   and the dark image is contained to the hero section. The navbar
   does NOT inherit the dark colour — it remains the consistent white
   bar across every page. */

/* Prev / Next : page-foot navigation for pages that sit in a sibling
   sequence under the navbar (solution sub-pages mostly). Two cards in
   a row — prev on the left, next on the right — each with a small
   "Previous" / "Next" label, the destination page name, and a chevron.
   When only one direction is available, the other slot is an empty
   spacer so the visible card aligns with its expected edge. */
.prev-next {
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-alt);
  padding: 1.5rem;
}
.prev-next-inner {
  max-width: 1584px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}
.prev-next-spacer { display: block; }
.prev-next-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  text-decoration: none;
  color: var(--c-text);
  transition: border-color 0.18s ease, background-color 0.18s ease;
  min-height: 4.5rem;
}
.prev-next-link:hover {
  border-color: var(--c-accent);
  background: #f7f7f7;
}
.prev-next-link--prev { justify-content: flex-start; text-align: left; }
.prev-next-link--next { justify-content: flex-end;   text-align: right; }
.prev-next-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.prev-next-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-3);
}
.prev-next-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text);
}
.prev-next-arrow {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-text-3);
  transition: color 0.18s ease, transform 0.18s ease;
}
.prev-next-link:hover .prev-next-arrow {
  color: var(--c-accent);
}
.prev-next-link--prev:hover .prev-next-arrow { transform: translateX(-3px); }
.prev-next-link--next:hover .prev-next-arrow { transform: translateX( 3px); }
@media (max-width: 640px) {
  .prev-next-inner { grid-template-columns: 1fr; }
  .prev-next-link--next { justify-content: flex-start; text-align: left; }
  .prev-next-link--prev .prev-next-arrow { order: -1; }
}

/* Breadcrumb : thin band rendered between the navbar and the page
   content (or the hero). White background, small caps "Home / Section
   / Page" with "/" separators, gray text. Renders on every page except
   home (filename = index.html). */
.breadcrumb {
  position: relative;             /* anchor for the mega-menu sub-nav dropdown */
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  padding: 0.75rem 1.5rem;
  font-size: 0.8125rem;
  color: var(--c-text-3);
}
.breadcrumb-list {
  max-width: 1584px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.breadcrumb-item:not(:last-child)::after {
  content: "/";
  color: var(--c-text-3);
  opacity: 0.5;
}
.breadcrumb-item a {
  color: var(--c-text-3);
  text-decoration: none;
}
.breadcrumb-item a:hover {
  color: var(--c-accent);
}
.breadcrumb-current {
  color: var(--c-text);
  font-weight: 500;
}

/* Breadcrumb segment with a dropdown of children (e.g. "ERP ▾" listing
   the six ERP modules). Click toggles .is-open on the .breadcrumb-item--drop;
   click-outside / Escape close it (handled in nav.js). */
.breadcrumb-item--drop {
  position: relative;
}
.breadcrumb-drop-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.breadcrumb-drop-trigger .chevron {
  font-size: 0.75rem;
  line-height: 1;
  color: var(--c-text-3);
  transition: transform 120ms ease;
}
.breadcrumb-item--drop.is-open .breadcrumb-drop-trigger .chevron {
  transform: rotate(180deg);
}
.breadcrumb-drop-trigger:hover { color: var(--c-accent); }
.breadcrumb-drop-trigger:hover .chevron { color: var(--c-accent); }
.breadcrumb-drop-trigger--chevron-only {
  padding: 0 0.15rem;
}
.breadcrumb-current .breadcrumb-drop-label {
  color: var(--c-text);
  font-weight: 500;
}
.breadcrumb-dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 280px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 0.4rem 0;
  display: none;
  z-index: 50;
}
.breadcrumb-item--drop.is-open .breadcrumb-dropdown { display: block; }

/* Mega-menu variant of the breadcrumb dropdown : full-width below the
   breadcrumb strip, multi-column grid of <group> blocks, same visual
   language as the top-level .dropdown-mega. Triggered when the navbar
   entry carries <group>/<featured> data (the deep module catalogue on
   ERP / WMS / industry pages). The breadcrumb-item--mega anchor uses
   position: static so the dropdown can span the full viewport. */
.breadcrumb-item--mega { position: static; }
.breadcrumb-dropdown--mega {
  left: 0;
  right: 0;
  width: 100%;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  background: var(--c-white);
}
.breadcrumb-dropdown--mega .mega-inner {
  max-width: 1584px;
  margin: 0 auto;
  padding: 2rem 1.5rem 2.5rem;
}
.breadcrumb-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}
.breadcrumb-dropdown-item:hover {
  background: var(--c-bg-alt);
  color: var(--c-accent);
}
.breadcrumb-dropdown-item.is-active {
  background: var(--c-bg-alt);
  color: var(--c-accent);
  font-weight: 500;
}
.breadcrumb-dropdown-arrow {
  color: var(--c-text-3);
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}
.breadcrumb-dropdown-item:hover .breadcrumb-dropdown-arrow,
.breadcrumb-dropdown-item.is-active .breadcrumb-dropdown-arrow {
  opacity: 1;
  transform: translateX(2px);
  color: var(--c-accent);
}
.main-nav-inner {
  max-width: 1584px;
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-brand {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--c-text);
  flex-shrink: 0;
  padding-right: 1.5rem;
  border-right: 1px solid var(--c-border);
  height: 100%;
  display: flex;
  align-items: center;
}
.nav-brand:hover { color: var(--c-accent); }

.nav-items {
  display: flex;
  align-items: stretch;
  height: 100%;
  flex: 1;
}
.nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: stretch;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 100%;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.nav-link:hover {
  background: var(--c-bg-alt);
  color: var(--c-text);
}
.nav-link.is-active {
  border-bottom-color: var(--c-accent);
  font-weight: 500;
}
/* The chevron is its own click target: clicking it toggles the mega-menu,
   while clicking the link label navigates to the landing page. The padding
   widens the hit area without disturbing the visual size of the glyph. */
.chevron {
  font-size: 0.875rem;
  color: var(--c-text-3);
  display: inline-block;
  transition: transform var(--t);
  margin-left: 0.15rem;
  padding: 0.25rem 0.35rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
}
.chevron:hover { background: var(--c-bg-2, rgba(0,0,0,0.04)); color: var(--c-text); }
.nav-item--has-dropdown.open .chevron { transform: rotate(180deg); }

/* Dropdown ------------------------------------------------- */
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  padding: 0.25rem 0;
  z-index: 300;
}
/* Open state is an explicit toggle (IBM-style). The chevron click adds
   `.open`; clicking outside the nav, pressing Escape, or clicking an item
   inside removes it. There is no hover-open: that would re-cover the page
   the moment the cursor crosses the nav after the user has navigated. */
.nav-item--has-dropdown.open .dropdown { display: block; }

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--c-text);
  border-left: 2px solid transparent;
  transition: background var(--t), border-color var(--t);
}
.dropdown-item:hover {
  background: var(--c-bg-alt);
  border-left-color: var(--c-accent);
  color: var(--c-text);
}
.dropdown-item-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.dropdown-item-icon {
  font-size: 1.05rem;
  line-height: 1;
}
.dropdown-item-arrow {
  color: var(--c-text-4);
  font-size: 0.95rem;
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity var(--t), transform var(--t);
}
.dropdown-item:hover .dropdown-item-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--c-accent);
}

/* Nav actions ---------------------------------------------- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  height: 100%;
}
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-h);
  height: var(--nav-h);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--c-border);
  color: var(--c-text);
  transition: background var(--t);
}
.nav-icon:hover { background: var(--c-bg-alt); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 1.25rem;
  background: var(--c-accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 400;
  border: 0;
  border-left: 1px solid var(--c-border);
  white-space: nowrap;
  transition: background var(--t);
}
.nav-cta:hover { background: var(--c-accent-hover); color: #fff; }
.nav-mobile-toggle {
  display: none;
  width: var(--nav-h);
  height: var(--nav-h);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--c-border);
  color: var(--c-text);
  align-items: center;
  justify-content: center;
}

/* ----- Mega-menu (multi-column dropdown for category-heavy menus) ----- */
.nav-item--mega { position: static; }   /* allow the dropdown to span the full nav width */
.dropdown-mega {
  display: none;
  position: absolute;
  top: var(--nav-h);
  left: 0;
  right: 0;
  width: 100%;
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  z-index: 300;
  padding: 0;
}
.nav-item--mega.open .dropdown-mega { display: block; }
.mega-inner {
  max-width: 1584px;
  margin: 0 auto;
  padding: 2rem 1.5rem 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 2.5rem;
}
.mega-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem 2rem;
}
.mega-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mega-group-head {
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 0.4rem;
  margin-bottom: 0.4rem;
}
.mega-group-name {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-3);
  text-decoration: none;
}
a.mega-group-name:hover { color: var(--c-accent); }
.mega-group-items {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.6rem 0.45rem 0.5rem;
  margin-left: -0.5rem;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: var(--c-text);
  transition: background var(--t), border-color var(--t);
}
.mega-item:hover {
  background: var(--c-bg-alt);
  border-left-color: var(--c-accent);
  color: var(--c-text);
}
.mega-item-name {
  font-size: 0.875rem;
  font-weight: 500;
}
.mega-item-desc {
  font-size: 0.75rem;
  color: var(--c-text-3);
  line-height: 1.35;
}
.mega-featured {
  background: var(--c-bg-alt);
  border-left: 1px solid var(--c-border);
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mega-featured-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.mega-featured-card {
  display: block;
  background: var(--c-white);
  padding: 1rem 1.1rem 1.25rem;
  border: 1px solid var(--c-border);
  text-decoration: none;
  color: var(--c-text);
  position: relative;
  transition: border-color var(--t);
}
.mega-featured-card:hover { border-color: var(--c-accent); color: var(--c-text); }
.mega-featured-kicker {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.mega-featured-title {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 0.35rem;
  line-height: 1.25;
}
.mega-featured-body {
  display: block;
  font-size: 0.8125rem;
  color: var(--c-text-3);
  line-height: 1.45;
}
.mega-featured-arrow {
  position: absolute;
  bottom: 0.85rem;
  right: 1rem;
  font-size: 1rem;
  color: var(--c-accent);
  transition: transform var(--t);
}
.mega-featured-card:hover .mega-featured-arrow { transform: translateX(3px); }

/* ----- Language switcher (IBM-style globe + dropdown) ----------------- */
.nav-lang { position: relative; display: flex; }
.nav-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1rem;
  height: var(--nav-h);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t);
}
.nav-lang-btn:hover { background: var(--c-bg-alt); }
.nav-lang-code { font-weight: 600; }
.nav-lang-btn .chevron { font-size: 0.75rem; color: var(--c-text-3); }
.nav-lang .dropdown-lang {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  padding: 0.25rem 0;
  z-index: 300;
}
.nav-lang.open .dropdown-lang { display: block; }
.dropdown-lang .dropdown-item-icon {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-text-3);
  border: 1px solid var(--c-border-strong);
  padding: 0.05rem 0.4rem;
  background: var(--c-bg-alt);
  min-width: 1.9rem;
  text-align: center;
  border-radius: 0;
}
.dropdown-lang .dropdown-item.is-active .dropdown-item-icon {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-soft);
}
.dropdown-lang .dropdown-item.is-active {
  background: var(--c-bg-alt);
  border-left-color: var(--c-accent);
}

/* ============================================================
   3. Sub-navigation (solution pages)
   ============================================================ */
.sub-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 190;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
}
.sub-nav-inner {
  max-width: 1584px;
  margin: 0 auto;
  height: var(--sub-h);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.subnav-back {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-text-3);
  text-decoration: none;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.subnav-back:hover { color: var(--c-accent); }
.subnav-divider {
  width: 1px;
  height: 1.25rem;
  background: var(--c-border);
  flex-shrink: 0;
}
.subnav-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-text);
  flex-shrink: 0;
  letter-spacing: -0.005em;
}
.subnav-tabs {
  display: flex;
  align-items: stretch;
  height: 100%;
  margin-left: auto;
}
.subnav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 1rem;
  height: 100%;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--c-text);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.subnav-tab:hover { background: var(--c-bg-alt); color: var(--c-text); }
.subnav-tab.is-active {
  border-bottom-color: var(--c-accent);
  font-weight: 500;
}
.subnav-tab .chevron { font-size: 0.8rem; color: var(--c-text-3); }

.subnav-item--drop { position: relative; display: flex; }
.subnav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 320px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  padding: 0.25rem 0;
  z-index: 300;
}
.subnav-item--drop.open .subnav-dropdown { display: block; }

.subnav-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--c-text);
  border-left: 2px solid transparent;
  transition: background var(--t), border-color var(--t);
}
.subnav-dropdown-item:hover {
  background: var(--c-bg-alt);
  border-left-color: var(--c-accent);
  color: var(--c-text);
}
.subnav-dropdown-item.is-active {
  background: var(--c-bg-alt);
  border-left-color: var(--c-accent);
  font-weight: 500;
}
.subnav-dropdown-arrow {
  color: var(--c-text-4);
  font-size: 0.95rem;
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity var(--t), transform var(--t);
}
.subnav-dropdown-item:hover .subnav-dropdown-arrow,
.subnav-dropdown-item.is-active .subnav-dropdown-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--c-accent);
}

/* ============================================================
   4. Buttons
   ============================================================ */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  min-width: 12rem;
  padding: 0.875rem 1rem 0.875rem 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn-primary::after,
.btn-secondary::after,
.btn-secondary--light::after {
  content: '→';
  font-size: 1rem;
  margin-left: auto;
  transition: transform var(--t);
}
.btn-primary:hover::after,
.btn-secondary:hover::after,
.btn-secondary--light:hover::after { transform: translateX(3px); }

.btn-primary {
  background: var(--c-accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--c-accent-hover);
  color: #fff;
}
.btn-secondary {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-text);
}
.btn-secondary:hover {
  background: var(--c-text);
  color: #fff;
}
.btn-secondary--light {
  background: transparent;
  color: #fff;
  border-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  min-width: 12rem;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: 0;
  transition: background var(--t), color var(--t);
}
.btn-secondary--light:hover {
  background: #fff;
  color: var(--c-text);
}

/* ============================================================
   5. Hero
   ============================================================ */
.hero {
  background: var(--c-white);
  padding: 5rem 1.5rem 6rem;
  border-bottom: 1px solid var(--c-border);
}
/* Hero positioning context — needed so the absolute-positioned
   bg-pending placeholder anchors against the hero rather than the
   viewport. Pointer-events rules are scoped to .aw-designer-on
   (see below) so they only fire when Design mode reveals the
   placeholder. */
.hero-bg-pending {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;            /* hidden by default — surfaces only when Design mode is active */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background:
    repeating-linear-gradient(45deg,
      rgba(15, 98, 254, 0.12) 0,
      rgba(15, 98, 254, 0.12) 14px,
      rgba(15, 98, 254, 0.22) 14px,
      rgba(15, 98, 254, 0.22) 28px);
  border: 3px dashed rgba(15, 98, 254, 0.7);
  outline: 2px solid rgba(15, 98, 254, 0.15);
  outline-offset: -10px;
  transition: background var(--t), border-color var(--t);
}
.hero-bg-pending:hover {
  background:
    repeating-linear-gradient(45deg,
      rgba(15, 98, 254, 0.18) 0,
      rgba(15, 98, 254, 0.18) 14px,
      rgba(15, 98, 254, 0.30) 14px,
      rgba(15, 98, 254, 0.30) 28px);
  border-color: rgba(15, 98, 254, 1);
}
.hero-bg-pending-card {
  position: absolute;
  top: 1rem;
  right: 1rem;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 98, 254, 0.35);
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  color: var(--c-text);
}
.hero-bg-pending-icon {
  font-size: 1.4rem;
}
.hero-bg-pending-title {
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: -0.005em;
  color: #0f62fe;
}
.hero-bg-pending-hint {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--c-text-3);
}
.hero-bg-pending-hint code {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  background: rgba(0, 0, 0, 0.05);
  padding: 0.05rem 0.25rem;
  border-radius: 2px;
}
.hero-bg-pending-spec {
  margin-top: 0.25rem;
  padding-top: 0.45rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--c-text-4);
}
.hero-bg-pending-spec strong { color: var(--c-text-2); font-weight: 600; }

/* Missing-file full-bleed hero. Source XML has a <media type="image"
   src="..."/> child but the file is gone on disk. SiteRenderer
   strips the <media> and back-fills data-aw-original-shape="media"
   so the XSL can render this shape (not the contained right-column
   one). Visible in production so the operator notices ; clickable
   only in editor mode. */
.hero--bg-missing { position: relative; padding: 5rem 1.5rem 6rem; }
/* The overlay is editor-only. Production builds (with editor-mode=
   false) don't reach this XSL branch ; editor-mode builds emit the
   markup but hide it until Design mode is toggled on. */
.hero-bg-missing-overlay { display: none; }
.aw-designer-on .hero--bg-missing .hero-bg-missing-overlay,
/* Specificity bump : the generic .aw-designer-on .aw-designer-target--bg
   rule sets position:relative, which would collapse our inset:0
   overlay to zero height. The two-class chain wins. */
.aw-designer-on .hero--bg-missing .hero-bg-missing-overlay.aw-designer-target--bg {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 0;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg,
      rgba(220, 38, 38, 0.06) 0,
      rgba(220, 38, 38, 0.06) 14px,
      rgba(220, 38, 38, 0.14) 14px,
      rgba(220, 38, 38, 0.14) 28px);
  border: 2px dashed rgba(220, 38, 38, 0.45);
  pointer-events: auto;
  cursor: pointer;
}
.hero-bg-missing-card {
  position: absolute;
  top: 1rem;
  right: 1rem;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(220, 38, 38, 0.5);
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.hero-bg-missing-icon { font-size: 1.2rem; color: #c2410c; }
.hero-bg-missing-title {
  font-weight: 600;
  font-size: 0.88rem;
  color: #c2410c;
}
.hero-bg-missing-path {
  display: inline-block;
  padding: 0.35rem 0.55rem;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  background: rgba(194, 65, 12, 0.08);
  border: 1px solid rgba(194, 65, 12, 0.3);
  border-radius: 3px;
  word-break: break-all;
  color: #1f1f1f;
}
.hero-bg-missing-hint {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--c-text-3);
}
.hero-bg-missing-hint code {
  font-family: ui-monospace, monospace;
  font-size: 0.68rem;
  background: rgba(0, 0, 0, 0.05);
  padding: 0.05rem 0.25rem;
  border-radius: 2px;
}
/* In design mode, sharpen the missing-overlay and make it clickable
   so the operator can open the same modal as on populated heroes. */
.aw-designer-on .hero-bg-missing-overlay { pointer-events: auto; cursor: pointer; }
.aw-designer-on .hero-bg-missing-overlay:hover {
  background:
    repeating-linear-gradient(45deg,
      rgba(220, 38, 38, 0.10) 0,
      rgba(220, 38, 38, 0.10) 14px,
      rgba(220, 38, 38, 0.20) 14px,
      rgba(220, 38, 38, 0.20) 28px);
  border-color: rgba(220, 38, 38, 0.8);
}
.aw-designer-on .hero--bg-missing .hero-inner { pointer-events: none; }
.aw-designer-on .hero--bg-missing .hero-inner .hero-text,
.aw-designer-on .hero--bg-missing .hero-inner a,
.aw-designer-on .hero--bg-missing .hero-inner button { pointer-events: auto; }

/* Reveal the bg-pending placeholder only when Design mode is on
   (the .aw-designer-on class is added to <html> by designer.js's
   setActive). Editor-mode builds emit the markup ; visibility is
   the operator's explicit opt-in via the head-bar toggle. */
.aw-designer-on .hero-bg-pending { display: flex; }
.aw-designer-on .hero:has(.hero-bg-pending) { position: relative; }
.aw-designer-on .hero:has(.hero-bg-pending) .hero-inner { pointer-events: none; }
.aw-designer-on .hero:has(.hero-bg-pending) .hero-inner .hero-text,
.aw-designer-on .hero:has(.hero-bg-pending) .hero-inner a,
.aw-designer-on .hero:has(.hero-bg-pending) .hero-inner button { pointer-events: auto; }

/* "Edit hero" pill — sits in the top-right corner of every hero
   that already has an image. Click opens the bg modal so the
   operator can swap the image, change the layout (right ↔ full)
   or paste a video URL. Editor-mode only ; hidden when not auth'd. */
.hero { position: relative; }
.hero-edit-pill {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: rgba(15, 98, 254, 0.95);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: 600 0.7rem/1 ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15, 98, 254, 0.35);
  transition: background var(--t), transform var(--t);
}
.hero-edit-pill:hover {
  background: #0353e9;
  transform: translateY(-1px);
}
.hero-edit-pill-icon { font-size: 0.95rem; }
.hero-edit-pill-label { white-space: nowrap; }
.hero--media-embed .hero-edit-pill,
.hero--media-video .hero-edit-pill { z-index: 6; }
.hero-inner {
  max-width: 1584px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
/* Text-only hero (no image / no media): single-column, wider text block,
   composed restraint rather than half-width-with-empty-right. */
.hero:not(.hero--media) .hero-inner:not(:has(.hero-image)) {
  grid-template-columns: 1fr;
}
.hero:not(.hero--media) .hero-inner:not(:has(.hero-image)) .hero-text {
  max-width: 920px;
}
.hero-text { max-width: 720px; }
.hero-eyebrow {
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  color: var(--c-text-3);
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background: var(--c-accent);
}
.hero h1 {
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 1.5rem;
}
.hero .subtitle {
  font-size: 1.125rem;
  color: var(--c-text-3);
  line-height: 1.5;
  margin: 0 0 2rem;
  max-width: 580px;
}
.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.hero-btns .btn-primary,
.hero-btns .btn-secondary { margin-right: 1px; }

/* ============================================================
   Image zoom / lightbox
   ============================================================
   Public feature : every content image gets cursor:zoom-in plus
   a small expand widget in the bottom-right on hover. Click opens
   a full-screen lightbox. Wired up by nav.js initImageZoom.
   ============================================================ */
img.aw-zoomable { cursor: zoom-in; }
.aw-has-zoom { position: relative; }
.aw-zoom-hint {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 15, 0.65);
  color: #fff;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  z-index: 5;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.aw-has-zoom:hover .aw-zoom-hint { opacity: 1; }
.aw-zoom-hint:hover { background: rgba(15, 15, 15, 0.9); }
/* Hide the corner hint when the designer overlay is in design mode
   so its outline + label don't fight with the zoom widget. */
html.aw-designer-on .aw-zoom-hint { display: none; }

.aw-zoom {
  position: fixed; inset: 0; z-index: 99999;
  display: none; align-items: center; justify-content: center;
}
.aw-zoom.show { display: flex; }
.aw-zoom-bg {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.92);
  cursor: zoom-out;
}
.aw-zoom-img {
  position: relative;
  max-width: 95vw; max-height: 92vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  background: #0d0d0d;
}
.aw-zoom-close {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255, 255, 255, 0.12);
  color: #fff; border: 0;
  width: 2.5rem; height: 2.5rem;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.aw-zoom-close:hover { background: rgba(255, 255, 255, 0.22); }
html.aw-zoom-open { overflow: hidden; }

/* Canonical screen-capture ratio.
   Every image-bearing surface inherits 16:9 + object-fit:cover so
   off-spec uploads still frame consistently. The validator on
   /admin/asset rejects uploads outside 16:9 ±2%, but we keep the
   CSS guard so a pre-existing off-ratio file does not blow rows. */
.hero-image { width: 100%; }
.hero-image-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  max-height: 540px;
  display: block;
  border-radius: 4px;
}

/* Contained YouTube / Vimeo embed in the hero-image right column.
   Same poster-first lazy pattern as .feature-row-image--embed —
   16:9 frame, cover-fit poster, centred Play button, click-or-Enter
   to swap in the iframe (see nav.js). */
.hero-image--embed {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-height: 540px;
  cursor: pointer;
  background: #0d0d0d;
  border-radius: 4px;
  overflow: hidden;
}
.hero-image-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero-image-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), transform var(--t);
}
.hero-image-play:hover {
  background: var(--c-accent);
  transform: translate(-50%, -50%) scale(1.05);
}
.hero-image-play-icon { line-height: 1; padding-left: 3px; }
.hero-image-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 4;
}

/* Image slot placeholder */
.img-slot {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--c-text-4);
}
.img-slot-icon { font-size: 2.5rem; }
.img-slot-label { font-size: 0.875rem; font-weight: 500; text-align: center; max-width: 80%; }
/* State subtitle inside an image-slot — distinguishes "no image
   referenced yet" from "image referenced but file missing on disk".
   Editor-mode only ; production output omits the .img-slot-state
   and .img-slot-path / .img-slot-hint nodes. */
.img-slot-state {
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
  max-width: 84%;
  color: var(--c-text-3);
}
.img-slot-state strong { color: var(--c-text-2); font-weight: 600; }
.img-slot-state--missing strong { color: #c2410c; }
.img-slot-state--empty   strong { color: var(--c-text-2); }
.img-slot-path {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.35rem 0.6rem;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  color: #1f1f1f;
  background: rgba(194, 65, 12, 0.08);
  border: 1px solid rgba(194, 65, 12, 0.3);
  border-radius: 3px;
  word-break: break-all;
  max-width: 88%;
  text-align: center;
}
.img-slot-hint {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--c-text-4);
  text-align: center;
  max-width: 84%;
}
/* Dev footnote inside placeholders — visible only when the page was
   rendered with editor-mode='true'. The XSL hides this on production
   builds. Subdued tone so it doesn't compete with the label. */
.img-slot-spec {
  margin-top: 1rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--c-text-4);
  background: rgba(0, 0, 0, 0.04);
  border: 1px dashed var(--c-border);
  border-radius: 3px;
  text-align: center;
  max-width: 80%;
}
.img-slot-spec strong { color: var(--c-text-2); font-weight: 600; }
.img-slot--hero {
  aspect-ratio: 16 / 9;
}
/* Square variant used by team-grid headshot placeholders. The
   parent .team-card-photo already fixes 1:1, so the slot just
   fills it edge-to-edge ; the aspect-ratio override prevents the
   default 16:9 from forcing the slot taller than the frame. */
.img-slot--square {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  padding: 0.75rem;
  gap: 0.45rem;
}
.img-slot--square .img-slot-icon { font-size: 1.6rem; }
.img-slot--square .img-slot-label {
  font-size: 0.72rem;
  line-height: 1.3;
  max-width: 92%;
}
.img-slot--square .img-slot-spec {
  margin-top: 0.45rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.6rem;
  line-height: 1.35;
  max-width: 92%;
}

/* ----- Hero with dark background image (Services-style layout) -----
   .hero--dark inherits the BASE .hero layout — block display, the
   base .hero-inner grid, hero-text in column 1. The ONLY differences
   are visual : background colour is dark, optional background-image
   set via inline style on the section, text colour is white, an
   atmospheric gradient overlay sits over the image to keep text
   legible. The layout is identical to Services / About / any
   text-only hero on the site — no flex, no grid override. */
.hero--dark {
  position: relative;
  background-color: var(--c-dark);
  background-size: cover;
  background-position: center;
  color: #fff;
  min-height: 560px;
  border-bottom: 0;
  overflow: hidden;
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.hero--dark::before {
  /* Dark atmospheric overlay over the background image so the text
     stays legible regardless of the underlying image's brightness. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15,23,42,0.78) 0%, rgba(15,23,42,0.45) 60%, rgba(15,23,42,0.15) 100%),
    linear-gradient(180deg, rgba(15,23,42,0.10) 0%, rgba(15,23,42,0.50) 100%);
  pointer-events: none;
  z-index: 0;
}

/* hero--solid : dark theme without a background image. The solid
   --c-dark colour stands alone ; suppress the atmospheric overlay
   that the image-backed variant uses to keep text legible. Used by
   the split-hero pattern where the right column carries an image
   container, not a full-bleed background. The image-slot placeholder
   on the right also gets a lighter card colour so it reads against
   the dark surface. */
.hero--dark.hero--solid::before { display: none; }
.hero--dark.hero--solid .img-slot--hero {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}
.hero--dark.hero--solid .img-slot--hero .img-slot-label {
  color: rgba(255,255,255,0.85);
}
.hero--dark .hero-inner {
  position: relative;
  z-index: 1;
}
.hero--dark h1,
.hero--dark .subtitle,
.hero--dark .hero-eyebrow {
  color: #fff;
}
.hero--dark .subtitle { color: rgba(255,255,255,0.85); }
.hero--dark .hero-eyebrow { color: #fff; }
.hero--dark .hero-eyebrow::before { background: var(--c-accent); }
.hero--dark .btn-secondary {
  background: transparent;
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}
.hero--dark .btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}

/* ----- Hero with full-bleed video (cinematic marquee) -------------
   For <media type="video"> only. The flex layout with align-items:
   flex-start keeps the existing behaviour for video heroes (homepage
   marquee). New image heroes go through .hero--dark above. */
.hero--media-video {
  position: relative;
  background: var(--c-dark);
  color: #fff;
  padding: 7rem 1.5rem 9rem;
  min-height: 560px;
  border-bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media-video,
.hero-media-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-media-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(22,22,22,0.85) 0%, rgba(22,22,22,0.55) 55%, rgba(22,22,22,0.25) 100%),
    linear-gradient(180deg, rgba(22,22,22,0.10) 0%, rgba(22,22,22,0.55) 100%);
}
.hero--media-video .hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1584px;
  margin: 0 auto;
  /* Video heros use the cinematic-marquee register : hero-text spans
     the full inner width and reads centered against the video. This
     is the Apple / Tesla / Microsoft Azure homepage pattern — the
     home is a "marquee" surface, distinct from the left-aligned grid
     used on every interior page (which uses the default .hero-inner
     1fr 1fr split). To bring video heros into uniform-grid alignment
     instead, set display:grid + grid-template-columns:1fr 1fr here. */
}
.hero--media-video h1,
.hero--media-video .subtitle,
.hero--media-video .hero-eyebrow { color: #fff; }
.hero--media-video .subtitle { color: rgba(255,255,255,0.85); }
.hero--media-video .hero-eyebrow::before { background: var(--c-accent); }
/* Secondary CTA on a video-backed hero needs the same white-on-
   transparent treatment as .hero--dark — the default .btn-secondary
   has dark text that disappears against the video backdrop. */
.hero--media-video .btn-secondary {
  background: transparent;
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}
.hero--media-video .btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}

/* ----- Hero with YouTube/Vimeo embed (lazy poster + click-to-load) ----
   Layout matches .hero--media-video, but the background is a poster
   image until the visitor clicks. nav.js swaps the <img> for an
   <iframe> on click — saves the ~600KB player SDK on first paint.   */
.hero--media-embed { composes: .hero--media-video; }
.hero--media-embed,
.hero--media-embed.hero {
  position: relative;
  background: var(--c-dark);
  color: #fff;
  padding: 7rem 1.5rem 9rem;
  min-height: 560px;
  border-bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}
.hero-media--embed { cursor: pointer; }
/* hero-inner sits at z-index:3 over the embed media, so clicks on the
   empty area between the text and the play button would land on
   hero-inner — the play button (z-index:2 inside hero-media) would be
   unreachable. Let pointer events fall through hero-inner by default
   and re-enable them on its interactive children so the CTAs, links
   and headings still respond. */
.hero--media-embed .hero-inner { pointer-events: none; }
.hero--media-embed .hero-inner .hero-text,
.hero--media-embed .hero-inner a,
.hero--media-embed .hero-inner button,
.hero--media-embed .hero-inner .btn-primary,
.hero--media-embed .hero-inner .btn-secondary { pointer-events: auto; }
.hero-media-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-media-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), transform var(--t);
}
.hero-media-play:hover {
  background: var(--c-accent);
  transform: translate(-50%, -50%) scale(1.05);
}
.hero-media-play-icon { line-height: 1; padding-left: 4px; }
.hero-media--embed .hero-media-overlay { z-index: 1; }
.hero--media-embed .hero-inner {
  position: relative;
  z-index: 3;
  max-width: 1584px;
  margin: 0 auto;
}
.hero--media-embed h1,
.hero--media-embed .subtitle,
.hero--media-embed .hero-eyebrow { color: #fff; }
.hero--media-embed .subtitle { color: rgba(255,255,255,0.85); }
.hero--media-embed .hero-eyebrow::before { background: var(--c-accent); }
.hero-media-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 4;
}
/* Buttons over media: white-on-transparent secondary */
.hero--media .btn-secondary {
  color: #fff;
  border-color: #fff;
}
.hero--media .btn-secondary:hover {
  background: #fff;
  color: var(--c-text);
}

/* ============================================================
   6. Strip cards (homepage four-up)
   ============================================================ */
.section--strip { background: var(--c-bg-alt); }
.strip-grid {
  max-width: 1584px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-border);
}
.strip-card {
  background: var(--c-white);
  padding: 2rem 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  transition: background-color 0.18s ease;
}
/* Card hover : the card itself does not move. An accent-coloured 2px
   border traces around the card on hover, drawn INSIDE the card's
   bounds (box-sizing: border-box on the absolutely-positioned pseudo,
   inset: 0). The clip-path expands from a zero-width strip at x=0 to
   the full rectangle — visible order is left edge first, top + bottom
   sweeping right, right edge arrives last. Card background tints to
   a very light gray at the same time. Same effect for .pillar-card. */
.strip-card::before,
.pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 2px solid var(--c-accent);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  pointer-events: none;
  transition: clip-path 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.strip-card:hover,
.pillar-card:hover {
  background-color: #f7f7f7;
}
.strip-card:hover::before,
.pillar-card:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
/* Strip-card icon : inline SVG, accent-coloured, sits above the title.
   The :empty rule above hides this container entirely when no <svg> child
   is emitted, so cards without an icon collapse to title + body cleanly. */
.strip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--c-accent);
}
.strip-icon svg { width: 100%; height: 100%; }

/* Strip-card badge : alternate to .strip-icon when a third-party-
   issued visual mark (certifier badge, partner logo) is referenced
   via <item @image="...">. Sized to read as a real badge tile, not
   a stroke icon. Locked-aspect container; img fills via contain. */
.strip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  margin-bottom: 0.75rem;
}
.strip-badge img { width: 100%; height: 100%; object-fit: contain; }
.strip-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.strip-card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--c-text-3);
  line-height: 1.45;
}

/* ============================================================
   7. Solutions / applications grid
   ============================================================ */
.solutions-grid {
  max-width: 1584px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
}

/* ------- team-grid : grouped grid of headshot cards ------- */
.section--team-grid { padding: 4rem 1.5rem; }
.team-group {
  max-width: 1584px;
  margin: 0 auto 3.5rem;
}
.team-group:last-child { margin-bottom: 0; }
.team-group-title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 0.25rem;
  color: var(--c-text);
}
.team-group-subtitle {
  font-size: 0.9375rem;
  color: var(--c-text-3);
  margin: 0 0 1.5rem;
  max-width: 720px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}
.team-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
}
.team-card-photo {
  aspect-ratio: 1 / 1;
  background: var(--c-bg-alt);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-card-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg,
      var(--c-bg-alt) 0,
      var(--c-bg-alt) 12px,
      var(--c-bg-soft) 12px,
      var(--c-bg-soft) 24px);
}
/* In editor mode the placeholder hosts a full-frame img-slot that
   carries its own surface. Drop the diagonal-stripe background so it
   doesn't bleed through the slot's lighter fill. */
.team-card-photo-placeholder:has(.img-slot--square) {
  background: none;
}
/* Editor-mode click affordance : the placeholder is a clickable
   target, so make the cursor explicit. The outline / "add image"
   label is added by designer.js's --insert class. */
.team-card-photo-placeholder[data-aw-insert] {
  cursor: pointer;
}
.team-card-photo-icon {
  font-size: 3rem;
  color: var(--c-text-4);
  opacity: 0.6;
}
.team-card-body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.team-card-name {
  font-size: 1.0625rem;
  font-weight: 500;
  margin: 0;
  color: var(--c-text);
  letter-spacing: -0.005em;
}
.team-card-role {
  font-size: 0.875rem;
  color: var(--c-accent);
  margin: 0 0 0.5rem;
  font-weight: 500;
}
.team-card-bio {
  font-size: 0.875rem;
  color: var(--c-text-3);
  margin: 0;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .team-group { margin-bottom: 2.5rem; }
}

/* ------- pricing-table : vertical-columns pricing cards ------- */
.section--pricing-table { padding: 3rem 1.5rem; }
.pricing-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.pricing-card {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: 2.25rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.pricing-card--highlight {
  border: 2px solid var(--c-accent);
  padding: 2.25rem 1.6875rem 1.6875rem;
}
.pricing-card--selectable {
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t);
}
/* In a selectable group, the red highlight border only paints on the
   card the user has currently selected. The "Recommended" badge still
   renders on the @highlight card, but the border belongs to selection,
   not recommendation. Otherwise two cards look selected at once. */
.pricing-card--selectable.pricing-card--highlight:not(.is-selected) {
  border: 1px solid var(--c-border);
  padding: 2.25rem 1.75rem 1.75rem;
}
.pricing-card--selectable:hover { border-color: var(--c-accent); }
.pricing-card--selectable:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.pricing-card--selectable.is-selected {
  border: 2px solid var(--c-accent);
  padding: 2.25rem 1.6875rem 1.6875rem;
  box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.08);
}
.pricing-card-radio {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 20px;
  height: 20px;
  border: 2px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-white);
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
  pointer-events: none;
}
.pricing-card--selectable:hover .pricing-card-radio { border-color: var(--c-accent); }
.pricing-card--selectable.is-selected .pricing-card-radio {
  background: var(--c-accent);
  border-color: var(--c-accent);
  box-shadow: inset 0 0 0 3px var(--c-white);
}
.pricing-card-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
}
.pricing-card-head { display: flex; flex-direction: column; gap: 0.25rem; }
.pricing-plan-name {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--c-text);
}
.pricing-plan-desc {
  font-size: 0.875rem;
  color: var(--c-text-3);
  margin: 0;
}
.pricing-card-price {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.pricing-price {
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--c-text);
}
.pricing-unit {
  font-size: 0.875rem;
  color: var(--c-text-3);
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--c-text);
}
.pricing-features li {
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.45;
}
.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-accent);
  font-weight: 600;
}
.pricing-cta {
  margin-top: auto;
  display: inline-block;
  text-align: center;
  padding: 0.75rem 1.25rem;
  background: var(--c-text);
  color: var(--c-white);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: background var(--t);
}
.pricing-card--highlight .pricing-cta {
  background: var(--c-accent);
}
.pricing-cta:hover { background: var(--c-accent-hover); color: var(--c-white); }
@media (max-width: 720px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card { padding: 1.75rem 1.5rem; }
}

/* pricing-footer : shared CTA band rendered below the plan cards
   when the plans are not independently purchasable. */
.pricing-footer {
  max-width: 1280px;
  margin: 2rem auto 0;
  padding: 1.75rem 1.5rem;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}
.pricing-footer-note {
  font-size: 0.9375rem;
  color: var(--c-text-3);
  margin: 0;
  max-width: 720px;
  line-height: 1.5;
}
.pricing-footer-btns {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pricing-footer-cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.pricing-footer-cta--primary {
  background: var(--c-accent);
  color: var(--c-white);
  border: 1px solid var(--c-accent);
}
.pricing-footer-cta--primary:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
}
.pricing-footer-cta--secondary {
  background: var(--c-white);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.pricing-footer-cta--secondary:hover {
  border-color: var(--c-text);
  color: var(--c-text);
}

.solution-card {
  background: var(--c-white);
  padding: 2rem 1.5rem 2.5rem;
  color: var(--c-text);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background var(--t);
  border-bottom: 4px solid transparent;
}
.solution-card:hover {
  background: var(--c-bg-soft);
  color: var(--c-text);
  border-bottom-color: var(--c-accent);
}
.solution-icon { font-size: 1.75rem; }
.solution-card h3 {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.solution-card p {
  font-size: 0.9375rem;
  color: var(--c-text-3);
  margin: 0 0 1rem;
  line-height: 1.45;
}
.solution-cta {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap var(--t);
}
.solution-card:hover .solution-cta { gap: 0.75rem; }

/* ============================================================
   8. Comparison table
   ============================================================ */
.section--comparison { background: var(--c-bg); }
.comparison-wrap {
  max-width: 1280px;
  margin: 0 auto;
  overflow-x: auto;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.comparison-table th,
.comparison-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.comparison-table thead th {
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-3);
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border-strong);
}
.comparison-table tbody th.row-label {
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-bg-alt);
  width: 18%;
}
.comparison-table th.hl,
.comparison-table td.hl {
  background: var(--c-accent-soft);
  color: var(--c-text);
  font-weight: 500;
  border-left: 1px solid var(--c-accent);
  border-right: 1px solid var(--c-accent);
}
.comparison-table thead th.hl {
  background: var(--c-accent);
  color: #fff;
  border-bottom: 2px solid var(--c-accent);
}
.comparison-table tbody tr:last-child td.hl,
.comparison-table tbody tr:last-child th.hl {
  border-bottom: 1px solid var(--c-accent);
}
/* Row hover : the entire row gets a soft tint across all columns so the
   eye scans horizontally. The highlight column keeps its emphasis on top
   of the hover tint. */
.comparison-table tbody tr:hover td,
.comparison-table tbody tr:hover th.row-label {
  background: var(--c-bg-alt);
}
.comparison-table tbody tr:hover td.hl {
  background: var(--c-accent-soft);
  filter: brightness(0.96);
}

/* ============================================================
   9. Pillars
   ============================================================ */
.pillars-grid {
  max-width: 1584px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-border);
}
.pillar-card {
  background: var(--c-white);
  padding: 2rem 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  transition: background-color 0.18s ease;
}
/* Hover effect for .pillar-card is the shared trace-border rule
   defined alongside .strip-card above. */
/* Pillar-card icon : inline SVG, slightly smaller than strip-icon, same
   accent colour. Hidden by :empty rule when no <svg> is emitted. */
.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--c-accent);
}
.pillar-icon svg { width: 100%; height: 100%; }

/* Pillar-card badge : sibling of .pillar-icon for licensed third-party
   visual marks (certifier badges, partner logos) referenced via
   <pillar @image="...">. Same purpose as .strip-badge, slightly
   smaller to match the pillar card's tighter rhythm. */
.pillar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin-bottom: 0.5rem;
}
.pillar-badge img { width: 100%; height: 100%; object-fit: contain; }
.pillar-card h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.005em; }
.pillar-card p { font-size: 0.9375rem; color: var(--c-text-3); margin: 0; line-height: 1.45; }

/* ============================================================
   10. Feature rows
   ============================================================ */
.feature-rows-list {
  max-width: 1584px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.feature-row--reverse .feature-row-text { order: 2; }
.feature-row--reverse .feature-row-image { order: 1; }
.feature-row-text h3 {
  font-size: var(--fs-h3);
  font-weight: 300;
  margin-bottom: 1rem;
  letter-spacing: -0.015em;
}
.feature-row-text p {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--c-text-3);
  line-height: 1.55;
}
/* Per-feature eyebrow chip — same visual as .section-eyebrow but
   slightly tighter for use inside a feature-row text block. */
.feature-row-eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: rgba(185, 28, 28, 0.08);
  border-radius: 2px;
}
/* Bulleted capabilities under the feature paragraph. Each <bullet>
   may carry a @title (rendered bold, em-dash separator) plus a body
   sentence. Card-style readable list, not a tight chip grid. */
.feature-row-bullets {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.feature-row-bullets li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  color: var(--c-text-2);
  line-height: 1.5;
}
.feature-row-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.6rem;
  height: 2px;
  background: var(--c-accent);
}
.feature-row-bullets li strong {
  color: var(--c-text);
  font-weight: 600;
}
/* Inline <img> inside feature-rows : same 16:9 frame as everything
   else, capped so a tall upload cannot blow the row out of layout. */
.feature-row-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  max-height: 540px;
}

/* "Pending" image placeholder slot — explicit visual that says
   "screenshot goes here". Held in place to preserve the
   alternating left/right rhythm of the feature-row list. */
.feature-row-image--pending .img-slot {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--c-bg-alt);
  border: 1px dashed var(--c-border-strong);
  border-radius: 4px;
  color: var(--c-text-4);
}

/* Lazy YouTube / Vimeo embed inside a feature-row. Mirrors the hero
   poster-first pattern : a 16:9 frame with the provider's thumbnail
   as a cover image, a centred Play button, and click-or-Enter to
   swap in the iframe (see nav.js). The same shape and proportions
   as the inline <img> case so the alternating left/right rhythm of
   feature-rows-list stays intact. */
.feature-row-image--embed {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-height: 540px;
  cursor: pointer;
  background: #0d0d0d;
  border-radius: 4px;
  overflow: hidden;
}
.feature-row-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.feature-row-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), transform var(--t);
}
.feature-row-play:hover {
  background: var(--c-accent);
  transform: translate(-50%, -50%) scale(1.05);
}
.feature-row-play-icon { line-height: 1; padding-left: 3px; }
.feature-row-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 4;
}
.feature-row-image--video .feature-row-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  background: #000;
  max-height: 540px;
}

/* ============================================================
   11. Adoption paths
   ============================================================ */
.adoption-grid {
  max-width: 1584px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
}
.path-card {
  background: var(--c-white);
  padding: 2rem 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.path-icon { font-size: 1.75rem; }
.path-card h3 { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.005em; }
.path-card p { font-size: 0.9375rem; color: var(--c-text-3); margin: 0 0 1rem; line-height: 1.45; }
.path-cta {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-accent);
  cursor: pointer;
}

/* ============================================================
   12. Two-col
   ============================================================ */
.two-col-grid {
  max-width: 1584px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-border);
}
.two-col-card {
  background: var(--c-white);
  padding: 2.5rem;
}
.two-col-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border);
}
.two-col-icon { font-size: 1.5rem; }
.two-col-header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.two-col-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.two-col-item h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.two-col-item p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--c-text-3);
  line-height: 1.45;
}

/* ============================================================
   13. Steps
   ============================================================ */
.steps-list {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 4rem;
}
.step-item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.step-num {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--c-accent);
  letter-spacing: -0.02em;
  line-height: 1;
  min-width: 4rem;
}
.step-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  letter-spacing: -0.005em;
}
.step-content p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--c-text-3);
  line-height: 1.5;
}

/* ============================================================
   14. Deployment models
   ============================================================ */
.deployment-grid {
  max-width: 1584px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-border);
}
.deployment-card {
  background: var(--c-white);
  padding: 2rem 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.deployment-icon { font-size: 1.5rem; }
.deployment-card h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.005em; }
.deployment-card p { font-size: 0.9375rem; color: var(--c-text-3); margin: 0; line-height: 1.45; }

/* ============================================================
   15. Service list / partner tiers / values / mv
   ============================================================ */
.service-grid,
.partner-tiers,
.values-grid {
  max-width: 1584px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
}
.values-grid { grid-template-columns: repeat(4, 1fr); }
.service-card,
.tier-card,
.value-card {
  background: var(--c-white);
  padding: 2rem 1.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.service-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}
.service-icon,
.tier-icon,
.value-icon { font-size: 1.5rem; }
.service-card h3,
.tier-card h3,
.value-card h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.005em; }
.service-card p,
.tier-card p,
.value-card p { font-size: 0.9375rem; color: var(--c-text-3); margin: 0; line-height: 1.45; }

/* check-lists */
.tab-checks {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.tab-checks li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--c-text-2);
}
.tab-checks li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.45rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--c-accent);
}

/* checks section on application pages */
.section--checks {
  background: var(--c-bg-alt);
  padding: 4rem 1.5rem;
}
.checks-wrap {
  max-width: 1280px;
  margin: 0 auto;
}
.checks-wrap .tab-checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 3rem;
}
.checks-wrap .tab-checks li {
  font-size: 1rem;
  padding-left: 1.75rem;
}
.checks-wrap .tab-checks li::before {
  width: 0.6rem;
  height: 0.6rem;
  top: 0.5rem;
}

/* ============================================================
   16. Story
   ============================================================ */
.section--story { background: var(--c-bg-alt); }
.story-section {
  max-width: 880px;
  margin: 0 auto;
}
.story-section h2 {
  font-size: var(--fs-h2);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}
.story-section p {
  font-size: 1.125rem;
  color: var(--c-text-2);
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

/* ============================================================
   17. Mission / vision blocks
   ============================================================ */
.mission-vision-blocks {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-border);
}
.mv-card {
  background: var(--c-white);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mv-card--mission {
  background: var(--c-accent);
  color: #fff;
}
.mv-card--mission * { color: #fff; }
.mv-card--vision { background: var(--c-dark); color: #fff; }
.mv-card--vision * { color: #fff; }
.mv-icon { font-size: 1.75rem; }
.mv-type {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.mv-card h3 {
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.mv-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.95;
}

/* ============================================================
   18. News / blog grids
   ============================================================ */
.news-grid,
.blog-grid {
  max-width: 1584px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-border);
}
.news-card,
.blog-card {
  background: var(--c-white);
  padding: 2rem 1.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Card image — used by event-style news cards. Negative margins
   so the image stretches to the card edges; aspect ratio fixed so
   different image sizes don't make the grid uneven. */
.card-image {
  margin: -2rem -1.75rem 0.5rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-alt);
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--c-text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card-category { color: var(--c-accent); font-weight: 600; }
.news-card h3,
.blog-card h3 {
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.card-author {
  font-size: 0.8125rem;
  color: var(--c-text-3);
  margin: 0;
}
.news-card p,
.blog-card p { font-size: 0.9375rem; color: var(--c-text-3); margin: 0; line-height: 1.5; }
.card-read-more {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ============================================================
   19. CTA banner
   ============================================================ */
.cta-banner {
  background: var(--c-dark);
  color: #fff;
  padding: 5rem 1.5rem;
}
.cta-inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: left;
}
.cta-inner h2 {
  color: #fff;
  font-size: var(--fs-h2);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  max-width: 800px;
}
.cta-inner p {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 2.5rem;
  max-width: 640px;
  line-height: 1.5;
}
.cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.cta-btns .btn-primary,
.cta-btns .btn-secondary--light { margin-right: 1px; }

/* ============================================================
   20. Footer
   ============================================================ */
footer {
  background: var(--c-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: 4rem 1.5rem 2rem;
}
.footer-top {
  max-width: 1584px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-top--no-about {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.footer-about {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer-brand {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.footer-tagline {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin: 0;
  max-width: 280px;
}
.footer-col h5 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer-col a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--t);
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  max-width: 1584px;
  margin: 2rem auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.footer-bottom a:hover { color: #fff; }

/* ============================================================
   21. Responsive
   ============================================================ */
@media (max-width: 1024px) {
  :root { --fs-h1: 2.5rem; --fs-h2: 2rem; }
  .hero-inner,
  .feature-row,
  .two-col-grid,
  .mission-vision-blocks { grid-template-columns: 1fr; }
  .feature-row--reverse .feature-row-text,
  .feature-row--reverse .feature-row-image { order: initial; }
  .strip-grid,
  .pillars-grid,
  .deployment-grid,
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .solutions-grid,
  .adoption-grid,
  .service-grid,
  .partner-tiers,
  .news-grid,
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-list { grid-template-columns: 1fr; gap: 2rem; }
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --fs-h1: 2rem; --fs-h2: 1.75rem; --fs-h3: 1.5rem; }
  .promo-banner { display: none; }
  .nav-items { display: none; }
  .nav-mobile-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .nav-icon { display: none; }
  .nav-items.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--c-white);
    border-bottom: 1px solid var(--c-border);
    height: auto;
    align-items: stretch;
    padding: 0.5rem 0;
  }
  .nav-items.mobile-open .nav-item { height: auto; }
  .nav-items.mobile-open .nav-link {
    height: auto;
    padding: 0.875rem 1.5rem;
  }
  .strip-grid,
  .solutions-grid,
  .pillars-grid,
  .adoption-grid,
  .deployment-grid,
  .service-grid,
  .partner-tiers,
  .values-grid,
  .news-grid,
  .blog-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .checks-wrap .tab-checks { grid-template-columns: 1fr; }
  .section,
  .cta-banner,
  .hero { padding: 3rem 1rem; }
  .hero { padding-bottom: 4rem; }
  .sub-nav-inner { padding: 0 1rem; gap: 0.5rem; overflow-x: auto; }
  .subnav-back { display: none; }
}

/* ============================================================
   22. Tabs section (Maximo-style features)
   ============================================================ */
.section--tabs { background: var(--c-bg); }
/* Scoped tabs eyebrow — accent bar + label style, lives only inside the
   Maximo-style tabs section. The global pill .section-eyebrow above is
   the default everywhere else. */
.section--tabs .section-eyebrow {
  font-size: 0.875rem;
  color: var(--c-accent);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  text-transform: none;
  border-radius: 0;
}
.section--tabs .section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background: var(--c-accent);
}
.tabs-wrap {
  max-width: 1280px;
  margin: 0 auto;
}
/* Carbon-style pill tabs : each tab is a self-contained button with
   a subtle border. Active state fills with the brand accent and
   white text. The strip stays on a single row at all viewport widths ;
   prev/next chevrons (.tab-nav-arrow) scroll the row when it does
   not fit. Arrows hide themselves entirely when the row already fits
   on screen — nothing to scroll, so the controls would be noise. */
.tab-nav-shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 0.5rem;
}
.tab-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0.5rem 0;
  flex: 1 1 auto;
  min-width: 0;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-nav-arrow {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text-3);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.tab-nav-arrow:hover:not([disabled]) {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.tab-nav-arrow[disabled] { opacity: 0.3; cursor: not-allowed; }
.tab-btn {
  flex: 0 0 auto;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  padding: 0.65rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.tab-btn:hover {
  border-color: var(--c-text-3);
  color: var(--c-text);
  background: var(--c-bg);
}
.tab-btn.is-active {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  font-weight: 600;
}
.tab-btn.is-active:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
}
.tab-panels { padding-top: 3rem; }
/* Image-led layout : title at the top, the screenshot as the primary
   visual centerpiece, the body copy and CTA as a smaller footer beneath.
   Single-column stack at every viewport ; the image fills the column. */
.tab-panel {
  display: none;
  max-width: 1280px;
  margin: 0 auto;
}
.tab-panel.is-active { display: block; }
.tab-panel-head {
  text-align: center;
  margin-bottom: 1.75rem;
}
.tab-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.tab-panel-head h3 {
  font-size: 1.625rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.tab-panel-image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  box-shadow: 0 12px 40px rgba(22, 22, 22, 0.08);
}
.tab-panel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tab-panel-foot {
  max-width: 880px;
  margin: 1.75rem auto 0;
  text-align: center;
}
.tab-panel-foot p {
  font-size: 0.9375rem;
  color: var(--c-text-3);
  line-height: 1.6;
  margin: 0 0 1rem;
}
.tab-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-accent);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.tab-link:hover { border-bottom-color: var(--c-accent); }

/* ============================================================
   23. Stats band
   ============================================================ */
.section--stats {
  background: var(--c-bg-alt);
  padding: 5rem 1.5rem;
}
.section--stats .section-header { margin-bottom: 3rem; }
.stats-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-border);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.stat-card {
  background: var(--c-bg-alt);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.stat-value {
  font-size: 3.5rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--c-accent);
  line-height: 1;
}
.stat-label {
  font-size: 0.9375rem;
  color: var(--c-text-3);
  line-height: 1.4;
}

/* ============================================================
   24. Industries grid
   ============================================================ */
.industries-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.industry-card {
  background: var(--c-white);
  padding: 1.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: default;
  transition: background var(--t), color var(--t);
}
.industry-card:hover {
  background: var(--c-text);
  color: #fff;
}
.industry-name {
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.industry-arrow {
  color: var(--c-text-4);
  transition: color var(--t), transform var(--t);
}
.industry-card:hover .industry-arrow {
  color: #fff;
  transform: translateX(4px);
}

/* ============================================================
   25. Trusted by + logo strip
   ============================================================ */
.section--trusted {
  background: var(--c-bg);
  padding: 5rem 1.5rem;
  text-align: center;
}
.section--trusted .section-header { text-align: center; max-width: 880px; }
.section--trusted .section-header h2 {
  margin-left: auto;
  margin-right: auto;
}
.trusted-quote {
  max-width: 880px;
  margin: 0 auto 3rem;
  padding: 0;
}
.trusted-quote p {
  /* Use the configured body font — was 'IBM Plex Serif' when the
     theme was IBM Plex; Geist (or any sans theme) keeps the quote
     visually distinct via size + light weight instead of genre. */
  font-family: var(--font-sans);
  font-size: 1.625rem;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--c-text);
  margin: 0 0 1.25rem;
}
.trusted-quote p::before {
  content: '\201C';   /* opening curly quote */
  margin-right: 0.1em;
  color: var(--c-accent);
}
.trusted-quote p::after {
  content: '\201D';   /* closing curly quote */
  margin-left: 0.05em;
  color: var(--c-accent);
}
.trusted-quote cite {
  font-size: 0.875rem;
  font-style: normal;
  color: var(--c-text-3);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.logo-strip {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--c-border);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.logo-strip-item {
  background: var(--c-white);
  padding: 2rem 0.75rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--c-text-4);
  font-family: var(--font-sans);
  transition: color var(--t);
}
.logo-strip-item:hover { color: var(--c-text); }

/* ============================================================
   Carousel : prev/next slider (image + copy + optional byline)
   ============================================================ */
.section--carousel { background: var(--c-bg-alt); }
.carousel {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.carousel-track {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
}
.carousel-slide {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}
.carousel-slide.is-active { display: grid; }
.carousel-slide-image {
  background: var(--c-bg-alt);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.carousel-slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.carousel-slide-text {
  padding: 2.5rem 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.carousel-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 1rem;
}
.carousel-slide-text h3 {
  font-size: 1.625rem;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 1rem;
}
.carousel-slide-text p {
  margin: 0;
  font-size: 1rem;
  color: var(--c-text-3);
  line-height: 1.55;
}
.carousel-byline {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-border);
}
.carousel-author {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-text);
}
.carousel-role {
  display: block;
  font-size: 0.8125rem;
  color: var(--c-text-3);
  margin-top: 0.15rem;
}
.carousel-controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1rem;
  padding: 0.75rem 0.25rem 0;
}
.carousel-prev,
.carousel-next {
  background: var(--c-white);
  color: var(--c-text);
  border: 1px solid var(--c-text);
  width: 2.5rem;
  height: 2.5rem;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), color var(--t);
}
.carousel-prev:hover,
.carousel-next:hover {
  background: var(--c-text);
  color: var(--c-white);
}
.carousel-prev:disabled,
.carousel-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.carousel-counter {
  font-family: ui-monospace, monospace;
  font-size: 0.875rem;
  color: var(--c-text-3);
  letter-spacing: 0.05em;
}
.carousel-current { color: var(--c-text); font-weight: 600; }

@media (max-width: 720px) {
  .carousel-slide { grid-template-columns: 1fr; }
  .carousel-slide-text { padding: 1.5rem; }
  .carousel-slide-text h3 { font-size: 1.25rem; }
}

/* ============================================================
   26. Body offset class for sticky sub-nav
   ============================================================ */

/* Tab section responsive — the image-led layout is single-column at
   every viewport, so only typography needs to shrink on small screens. */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .stat-value { font-size: 2.75rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: 1fr; }
  .logo-strip { grid-template-columns: repeat(2, 1fr); }
  .trusted-quote p { font-size: 1.125rem; }
  .tab-panel-head h3 { font-size: 1.375rem; }
}

/* ============================================================
   27. Form section (contact / discovery-call / customer request)
   ============================================================ */
.section--form { background: var(--c-bg); }
.form-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.contact-form {
  display: block;
  margin-top: 2rem;
  padding: 2rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  position: relative;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1rem;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.form-row--full { grid-column: 1 / -1; }
.form-row label {
  font-size: .85rem;
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: .005em;
}
.form-req { color: var(--c-accent); font-weight: 600; }
.form-row input,
.form-row textarea,
.form-row select {
  font: inherit;
  font-size: .95rem;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: .65rem .8rem;
  outline: 0;
  transition: border-color var(--t), box-shadow var(--t);
  width: 100%;
  border-radius: 0;
}
.form-row textarea {
  resize: vertical;
  min-height: 7rem;
  font-family: inherit;
  line-height: 1.55;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 25%, transparent);
}
.form-row input[aria-invalid="true"],
.form-row textarea[aria-invalid="true"],
.form-row select[aria-invalid="true"] {
  border-color: #c93b3b;
  box-shadow: 0 0 0 2px rgba(201, 59, 59, .18);
}
.form-help {
  font-size: .75rem;
  color: var(--c-text-3);
}
.form-privacy {
  margin: 1.25rem 0 0;
  font-size: .8rem;
  color: var(--c-text-3);
  line-height: 1.5;
}
.form-actions {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.form-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  border: 0;
  background: var(--c-dark);
  color: var(--c-text-inv);
  cursor: pointer;
  transition: filter var(--t), background var(--t);
}
.form-submit:hover:not(:disabled) { filter: brightness(1.18); }
.form-submit:disabled { opacity: .55; cursor: not-allowed; }
.form-submit.is-busy .form-submit-label { opacity: .4; }
.form-submit-spinner {
  display: none;
  width: .9rem;
  height: .9rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: form-spin 0.7s linear infinite;
}
.form-submit.is-busy .form-submit-spinner { display: inline-block; }
@keyframes form-spin { to { transform: rotate(360deg); } }
.form-status {
  margin: 0;
  font-size: .85rem;
  color: var(--c-text-3);
}
.form-status.is-ok    { color: #1f6f3a; }
.form-status.is-error { color: #c93b3b; }
.contact-form.is-sent .form-grid,
.contact-form.is-sent .form-actions .form-submit,
.contact-form.is-sent .form-privacy { display: none; }

/* Honeypot : visually hidden but still focusable by bots that ignore CSS. */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 1.5rem; }
}

/* ============================================================
   28. Callout (stat band) and section tone utilities
   ============================================================

   <callout> renders a tinted full-width band with one or more
   oversized number + short caption pairs. Use it to pull a fact
   out of inline prose and give it visual emphasis — seven OLTP
   engines, eighteen microservices, forty-namespace standard
   library, etc.

   Section-tone utility classes (applied via tone="tinted|dark"
   on any section element that opts into them — strip, pillars,
   story, callout) give the page chapters. .section--tinted is
   light-grey; .section--dark is carbon black with white text.
   Inner cards (.strip-card, .pillar-card) and icon colours get
   inverted automatically on .section--dark surfaces.
   ============================================================ */

.section--callout {
  padding: 5rem 1.5rem;
}
.section--callout .section-header {
  text-align: center;
  margin-bottom: 3rem;
}
.callout-stats {
  max-width: 1584px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 2rem;
}
.callout-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}
.callout-number {
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-accent);
}
.callout-caption {
  font-size: 1rem;
  color: var(--c-text-2);
  line-height: 1.4;
}
@media (max-width: 1024px) {
  .callout-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .callout-stats { grid-template-columns: 1fr; gap: 2rem; }
  .callout-number { font-size: 3.5rem; }
}

/* ----- Tone utility classes ------------------------------ */

.section--tinted { background: var(--c-bg-alt); }

.section--dark {
  background: #161616;
  color: #f4f4f4;
}
.section--dark h2,
.section--dark h3,
.section--dark .section-header p,
.section--dark .section-subtitle,
.section--dark .callout-caption,
.section--dark .story-section p,
.section--dark .strip-card h3,
.section--dark .pillar-card h3 { color: #f4f4f4; }
.section--dark .strip-card p,
.section--dark .pillar-card p { color: #c6c6c6; }
.section--dark .callout-number { color: #ff6b6b; }
.section--dark .strip-card,
.section--dark .pillar-card {
  background: #262626;
  border-color: #393939;
}
.section--dark .strip-icon,
.section--dark .pillar-icon { color: #f4f4f4; }