/* ============================================================
   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)
   ============================================================ */

/* ============================================================
   Self-hosted web fonts (Geist + Inter)
   ------------------------------------------------------------
   Files live under assets/shared/fonts/{geist,inter}/ and the
   SiteRenderer copies them to /assets/fonts/... in the built
   output, alongside this stylesheet. Self-hosting removes the
   third-party fonts.googleapis.com / fonts.gstatic.com origins,
   closes the SRI gap (security-004) and lets the CSP drop both
   Google Fonts entries from style-src / font-src.

   Both font families are SIL OFL 1.1 — redistributable.
       Geist : github.com/vercel/geist-font
       Inter : github.com/rsms/inter

   font-display: swap matches the previous Google Fonts query
   parameter — the fallback in --font-sans paints immediately
   and swaps in the web font once it loads.
   ============================================================ */

/* Geist — used by airtool.io. Weights : 300 / 400 / 500 / 600 / 700. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/geist/Geist-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/geist/Geist-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/geist/Geist-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/geist/Geist-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/geist/Geist-Bold.woff2') format('woff2');
}

/* Inter — used by deister.io / deister.es. Weights : 300 / 400 / 500 / 600 / 700. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/inter/Inter-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter/Inter-Bold.woff2') format('woff2');
}

/* ----- 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;
  max-height: calc(100vh - var(--nav-h) - 1rem);
  overflow-y: auto;
}
.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);
  /* Site-wide hero baseline. Every variant (.hero, .hero--dark,
     .hero--media-video, .hero--media-embed) sits at the same floor
     so heights are uniform across pages regardless of which media
     shape the hero carries. Heroes whose content genuinely exceeds
     680px still grow naturally. See note on .hero--media-video. */
  min-height: 680px;
  display: flex;
  align-items: center;
}
.hero > .hero-inner { width: 100%; }
/* 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;
  /* Site-wide hero baseline — see .hero. */
  min-height: 680px;
  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 sized to absorb the longest title + subtitle combination
     across the four section-overview heroes (home, platform, solutions,
     modernisation) so they all settle at the same baseline regardless
     of word count. The previous 640px floor was reached by short-title
     pages but exceeded by long-title ones — producing a visible step
     between sections. 680px puts every overview hero on the floor at
     typical desktop widths. Heroes with text content beyond this
     still grow naturally. */
  min-height: 680px;
  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;
  /* Site-wide hero baseline — see .hero. */
  min-height: 680px;
  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);
  /* Re-state color : the global `a:hover` rule at line 103 sets
     color to var(--c-accent-hover), which would equal the
     background here and render the text invisible. */
  color: var(--c-white);
}
.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;
}
.card-title-link {
  color: inherit;
  text-decoration: none;
}
.card-title-link:hover { color: var(--c-accent); }

/* Blog post — per-article page rendered from <news-grid>/<article>.
   The body is the prose payload of the source XML element ; the
   layout mirrors the long-form modernisation pages (single column,
   reading-width measure). */
.blog-post {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}
.blog-post-header { margin-bottom: 2rem; }
.blog-post-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--c-text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.blog-post-header h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}
.blog-post-lede {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--c-text-2);
  margin: 1.5rem 0 0;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.blog-post-body {
  margin-top: 2.5rem;
}
.blog-post-body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--c-text-2);
  margin: 0 0 1.25rem;
}
.blog-post-body h2 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 1rem;
  color: var(--c-text-1);
}
.blog-post-body h3 {
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 2rem 0 0.75rem;
  color: var(--c-text-1);
}
.blog-post-body ul,
.blog-post-body ol {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
}
.blog-post-body li {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--c-text-2);
  margin-bottom: 0.5rem;
}
.blog-post-body li > strong:first-child {
  color: var(--c-text-1);
  font-weight: 600;
}
.blog-post-body code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--c-bg-alt);
  border-radius: 3px;
  color: var(--c-text-1);
}
.blog-post-body pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  background: var(--c-bg-alt);
  padding: 1rem 1.25rem;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0 0 1.5rem;
  line-height: 1.5;
}
.blog-post-body pre code {
  padding: 0;
  background: transparent;
  font-size: inherit;
}
.blog-post-link a,
.blog-post-back a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-accent);
  text-decoration: none;
}
.blog-post-link { margin-top: 2.5rem; }
.blog-post-back { margin-top: 2rem; font-size: 0.875rem; }
.card-preview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   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; }

/* ============================================================
   Locale-conditional nav gating
   ------------------------------------------------------------
   The pre-paint script in layout.xsl <head> sets
   <html data-locale="pk|pe|co"> from URL prefix or cookie. CSS
   rules below hide brand surfaces that the locale's commercial
   mandate does not sell, across the entire deister.io session
   (top nav + footer + any future data-nav-key carriers).

   PK : the Islamabad office sells Airtool (platform, Apps,
   technical services, legacy replacement). Axional is NOT sold
   from PK ; hide it from PK visitors on every page.
   ============================================================ */
html[data-locale="pk"] .nav-item[data-nav-key="Axional"],
html[data-locale="pk"] .footer-col[data-nav-key="Axional"] {
  display: none !important;
}

/* ============================================================
   Geo-router override banner
   ------------------------------------------------------------
   Closes risk §C.3 #8 of the 2026-05-15 review. Shown ONLY when
   the pre-paint script detects the visitor arrived via a country
   URL prefix (/pe/, /co/, /pk/) and sets <html data-locale-prefix>.
   On any deeper page the banner stays hidden (cookie remembers
   the locale for nav-gating purposes, but the chrome stops
   nagging the user once they've left the country home).

   Click on the override link writes deister_locale=default and
   reloads to /, giving the visitor the canonical home.
   ============================================================ */
.locale-override-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem 1rem;
  font-size: 13px;
  background: #f4f4f4;
  color: #393939;
  border-bottom: 1px solid #e0e0e0;
}
html[data-locale-prefix] .locale-override-banner { display: flex; }
.locale-override-banner [data-locale-text] { display: none; }
html[data-locale-prefix="pe"] .locale-override-banner [data-locale-text="pe"],
html[data-locale-prefix="co"] .locale-override-banner [data-locale-text="co"],
html[data-locale-prefix="pk"] .locale-override-banner [data-locale-text="pk"] {
  display: inline;
}
.locale-override-link {
  color: #0f62fe;
  text-decoration: none;
  font-weight: 500;
}
.locale-override-link:hover { text-decoration: underline; }

/* ============================================================
   FAQ accordion (<details>/<summary>)
   The visible body that pairs with the FAQPage JSON-LD emitted
   in layout.xsl ; both read from the same <question> source so
   the SERP eligibility (answer present in rendered DOM) holds.
   ============================================================ */
.section--faq { background: var(--c-bg); }
.faq-list {
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--c-border);
}
.faq-item {
  border-bottom: 1px solid var(--c-border);
}
.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--c-text);
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q-text { flex: 1 1 auto; }
.faq-q-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--c-text-3);
  transition: transform 120ms ease;
}
.faq-item[open] .faq-q-icon { transform: rotate(45deg); }
.faq-a {
  padding: 0 0 1.5rem;
  max-width: 760px;
}
.faq-a p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-text-2);
}
.faq-q:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}


/* per-site theme — injected by SiteRenderer */
:root { --font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --c-accent: #0067AD; --c-accent-hover: #00456B; }