/* =========================================================================
   d.Code Mobility - site.css
   One stylesheet. Tokens -> reset -> base -> layout utilities -> components.
   ========================================================================= */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --navy-950: #0F1229;
  --navy-900: #151936;
  --navy-800: #1B2050;
  --navy-700: #23285A;
  --navy-600: #33397A;
  --navy-100: #E8EAF6;
  --yellow:   #FAC83C;
  --yellow-600: #E0AE1C;
  --paper:    #FFFFFF;
  --mist:     #F4F5FA;
  --line:     #E1E4EF;
  --line-dark: rgba(255,255,255,.10);
  --ink:      #1B2040;
  --ink-2:    #4B5070;
  --muted:    #6A6F8E;
  --on-dark:  #FFFFFF;
  --on-dark-2: rgba(238,243,250,.78);
  --on-dark-3: rgba(238,243,250,.60);
  --ok:  #3DBE78;
  --warn: #F2A93B;
  --bad: #F06A5A;

  --font-display: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, Consolas, monospace;

  --fs-h1: clamp(38px, 5.2vw, 68px);
  --fs-h2: clamp(28px, 3.4vw, 44px);
  --fs-h3: 21px;
  --fs-h4: 17px;
  --fs-lede: 19px;
  --fs-body: 16.5px;
  --fs-small: 14px;
  --fs-eyebrow: 12px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(27,32,64,.06), 0 10px 30px -14px rgba(27,32,64,.20);

  --container-max: 1200px;
  --container-pad: clamp(20px, 4vw, 40px);
  --section-pad: clamp(64px, 8vw, 112px);

  /* ---- Motion system (reveal pass, 2026-09-06). One easing for every enter,
     hover, press and reveal on the site; three durations; one travel
     distance. Nothing bounces (no overshoot in the curve), nothing uses a
     bare keyword easing. Under prefers-reduced-motion every animation and
     reveal is disabled at the bottom of this file. */
  --ease: cubic-bezier(.22, .61, .36, 1);        /* settle: decelerating, no overshoot */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);   /* loops and travelling packets */
  --dur-fast: 180ms;                             /* hover, focus, press, menus */
  --dur-base: 560ms;                             /* reveal, hero entry */
  --dur-slow: 900ms;                             /* film, lines drawing */
  --reveal-y: 18px;                              /* travel distance for enter/reveal */
  --stagger: 70ms;                               /* delay between sibling reveals */
  --motion-fast: var(--dur-fast) var(--ease);

  /* "d." brand mark, outlined + faint, dot at 8% yellow - hero/CTA watermark. */
  /* Faint yellow contour tile for photo placeholders. */
  --contour-mark: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIj48ZyBmaWxsPSJub25lIiBzdHJva2U9IiNGQUM4M0MiIHN0cm9rZS1vcGFjaXR5PSIwLjA2IiBzdHJva2Utd2lkdGg9IjEuNSI+PHBhdGggZD0iTS0yMCA0MCBRNjAgMTAgMTQwIDQwIFQzMDAgNDAiLz48cGF0aCBkPSJNLTIwIDk1IFE2MCA2NSAxNDAgOTUgVDMwMCA5NSIvPjxwYXRoIGQ9Ik0tMjAgMTUwIFE2MCAxMjAgMTQwIDE1MCBUMzAwIDE1MCIvPjxwYXRoIGQ9Ik0tMjAgMjA1IFE2MCAxNzUgMTQwIDIwNSBUMzAwIDIwNSIvPjwvZz48L3N2Zz4=");
}

/* ---- Reset --------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; text-align: inherit; }
a { color: inherit; text-decoration: none; }
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}
.ground-navy :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.device :focus-visible {
  outline-color: #fff;
}

/* ---- Base ----------------------------------------------------------------*/
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: inherit;
  text-wrap: balance;
}
/* Typographic authority (reveal pass): display headlines carry tight,
   size-graded tracking; h3/h4 sit at Archivo 600 (loaded) instead of 500,
   which read thin next to 700 headlines; paragraphs avoid orphans. */
h1, h2 { font-weight: 700; }
h1 { letter-spacing: -0.03em; }
h2 { letter-spacing: -0.025em; }
h3, h4 { font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); line-height: 1.0; }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
h4 { font-size: var(--fs-h4); line-height: 1.4; }
p { max-width: 66ch; text-wrap: pretty; }
li { text-wrap: pretty; }
/* Vertical rhythm between consecutive prose blocks. Margins collapse with
   any component's own margin-bottom (e.g. .prose p), so this only ever
   widens a gap up to its own size - it never stacks on top of one. */
p + p { margin-top: 1em; }
.lede + p, ul + p, p + ul { margin-top: .75em; }
p.lede, .lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  max-width: 58ch;
  color: var(--ink-2);
}
.ground-navy .lede { color: var(--on-dark-2); }
small, .fs-small { font-size: var(--fs-small); }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); }
.ground-navy hr { border-top-color: var(--line-dark); }

.icon { width: 1.25em; height: 1.25em; flex: none; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---- Skip link -------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 1000;
  background: var(--yellow);
  color: var(--navy-700);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  transition: top var(--motion-fast);
}
.skip-link:focus {
  top: 12px;
}

/* ---- Container / sections / grounds ------------------------------------ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
section, .section {
  padding-block: var(--section-pad);
}
.section--tight { padding-block: 22px; }
section + section,
.section + .section {
  border-top: 1px solid var(--line);
}
.ground-navy + .ground-navy,
.ground-mist + .ground-mist {
  border-top-color: var(--line-dark);
}
.ground-navy {
  background: var(--navy-900);
  color: var(--on-dark-2);
  border-top-color: var(--line-dark) !important;
}
.ground-navy h1, .ground-navy h2, .ground-navy h3, .ground-navy h4 { color: var(--on-dark); }
.ground-mist { background: var(--mist); }
.ground-paper { background: var(--paper); }

.ground-dots {
  position: relative;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---- Hero brand motif: ambient glow over the dot ground. The drawn d-mark watermark on the
   CTA bands was removed (owner, 2026-09-21): it was a poor redraw of the real logo. ---- */
.hero-section.ground-dots {
  overflow: hidden;
}
.hero-section.ground-dots { background-image: none; }
.hero-section.ground-dots::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-section.ground-dots::before {
  inset: -15%;
  z-index: -3;
  background: radial-gradient(circle at 20% 25%, rgba(250,200,60,.07), transparent 55%),
              radial-gradient(circle at 80% 75%, rgba(51,57,122,.55), transparent 55%);
  animation: heroGlow 24s var(--ease-in-out) infinite alternate;
}
.hero-section.ground-dots::after {
  content: '';
  position: absolute;
  inset: -15%;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;
  transform: translateY(var(--parallax-y, 0px));
}
@keyframes heroGlow {
  from { transform: translate(-2%, -1%); }
  to { transform: translate(2%, 1%); }
}
@media (max-width: 767px) {
  .hero-section.ground-dots::before { background-image: radial-gradient(circle at 20% 25%, rgba(250,200,60,.07), transparent 55%), radial-gradient(circle at 80% 75%, rgba(51,57,122,.55), transparent 55%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-section.ground-dots::before { animation: none; }
}

/* ---- Grids -------------------------------------------------------------- */
.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: 24px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 16px; }
}

/* 6-column grid so a 5-item product row can rebalance itself: each card
   spans 2 columns (3-up), and when there are exactly five children the
   4th and 5th widen to span 3 each, closing the empty hole in row two.
   The span-2/span-3 rules live ONLY inside the >=1024px query - keeping
   them out of scope below that (rather than resetting them with an
   equal-or-lower-specificity ">*{grid-column:span 1}") means there is no
   specificity fight for the mobile/tablet layout to lose: children simply
   have no grid-column at all there, so they default to auto (span 1). */

/* ---- Reveal --------------------------------------------------------------
   site.js adds .reveal--pending to every .reveal (and to every section
   head, chapter and stage - see reveal() in site.js) once it knows it can
   observe; .reveal--visible lands when the element enters the viewport.
   No JS = nothing is ever hidden. Section heads reveal first, their grid
   children cascade behind them with --stagger between siblings. */
.reveal.reveal--pending {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  will-change: opacity, transform;
}
.reveal.reveal--pending.reveal--visible {
  opacity: 1;
  transform: none;
}
.reveal.reveal--visible { will-change: auto; }

/* ---- Reveal stagger: children of grid/step/tile containers cascade in
   individually instead of fading as one flat block. */
:where(.grid-2, .grid-3, .grid-4, .grid-industries, .steps, .lifecycle, .tiles, .values-row, .case-studies, .fact-strip) {
  &.reveal.reveal--pending { opacity: 1; transform: none; }
  &.reveal.reveal--pending > * {
    opacity: 0;
    transform: translateY(var(--reveal-y));
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  }
  &.reveal.reveal--visible > * { opacity: 1; transform: none; }
  > *:nth-child(2) { transition-delay: calc(var(--stagger) * 1); }
  > *:nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
  > *:nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
  > *:nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
  > *:nth-child(6) { transition-delay: calc(var(--stagger) * 5); }
  > *:nth-child(7) { transition-delay: calc(var(--stagger) * 6); }
  > *:nth-child(8) { transition-delay: calc(var(--stagger) * 7); }
  > *:nth-child(n+9) { transition-delay: calc(var(--stagger) * 8); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.reveal--pending,
  :where(.grid-2, .grid-3, .grid-4, .grid-industries, .steps, .lifecycle, .tiles, .values-row, .case-studies, .fact-strip).reveal.reveal--pending > * {
    opacity: 1; transform: none; transition: none;
  }
}

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: 72px;
  display: flex;
  align-items: center;
  background: rgba(21, 25, 54, .98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line-dark);
  transition: height var(--motion-fast);
}
/* No shade or fade on scroll (owner, 2026-09-21): one ground and border throughout; only the
   height condenses. */
.site-header.is-shrunk { height: 60px; }
.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-right: auto;
}
.logo-img {
  height: 46px;
  width: auto;
  transition: height var(--motion-fast);
}
.site-header.is-shrunk .logo-img { height: 40px; }
.logo--footer .logo-img { height: 56px; }
@media (max-width: 767px) {
  .logo-img { height: 34px; }
}

/* ---- Logo first-load moment: scale + fade in, before the hero stagger.
   Runs ONCE per session (html.is-opening is set by the inline script in
   layout.html only on the first page of a session), so moving between
   pages never replays it. Footer logo never animates. ---------------------- */
.site-header .logo { position: relative; }
html.is-opening .site-header .logo-img {
  opacity: 0;
  transform: scale(.9);
  animation: logoIn var(--dur-base) var(--ease) 0ms forwards;
}
@keyframes logoIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.is-opening .site-header .logo-img { animation: none; opacity: 1; transform: none; }
}

.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Scoped to the direct top-level link chain only (nav > ul > li > a) so
   this never leaks into the mega-panel's own <a> elements, which sit much
   deeper in the DOM (nav > ul > li > .mega-panel > ... > a) but would
   otherwise still match a bare ".primary-nav a" and win on specificity
   over the mega-panel's own light-ground color rules. */
.primary-nav > ul > li > a,
.mega-trigger,
.accordion-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--on-dark-2);
  white-space: nowrap;
  transition: color var(--motion-fast), background var(--motion-fast);
}
.primary-nav > ul > li > a:hover,
.mega-trigger:hover { color: var(--on-dark); background: rgba(255,255,255,.06); }
.primary-nav > ul > li > a[aria-current="page"],
.mega-trigger[aria-current="page"] { color: var(--on-dark); }
.primary-nav > ul > li > a::after,
.mega-trigger::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-fast);
}
.primary-nav > ul > li > a:hover::after,
.mega-trigger:hover::after,
.primary-nav > ul > li > a[aria-current="page"]::after,
.has-mega[data-open="true"] > .mega-trigger::after { transform: scaleX(1); }
.has-mega[data-open="true"] > .mega-trigger { color: var(--on-dark); }
.mega-caret { width: 12px; height: 12px; transition: transform var(--motion-fast); }
.has-mega[data-open="true"] .mega-caret { transform: rotate(45deg); }

/* The item is a link plus a small disclosure button for the panel. The
   button tucks against the link's right padding so the pair still reads as
   one "Products +" item. */
.has-mega { position: relative; display: inline-flex; align-items: center; }
.has-mega > .mega-trigger { padding-right: 4px; }
.has-mega > .mega-trigger::after { right: 4px; }
.mega-toggle {
  width: 28px;
  height: 32px;
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--on-dark-2);
  transition: color var(--motion-fast), background var(--motion-fast);
}
.mega-toggle:hover,
.has-mega[data-open="true"] > .mega-toggle { color: var(--on-dark); background: rgba(255,255,255,.06); }
.mega-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 560px;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 20px;
  z-index: 50;
}
.mega-panel[hidden] { display: none; }
.mega-panel:not([hidden]) { animation: menuIn var(--dur-fast) var(--ease); }
@keyframes menuIn { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.mega-panel-inner { display: flex; flex-direction: column; gap: 12px; }
.mega-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: rgba(250,200,60,.42);
  color: var(--navy-700);
}
.mega-item-icon .icon { width: 20px; height: 20px; }
.mega-panel-viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy-700);
  grid-column: 1 / -1;
  transition: color var(--motion-fast);
}
.mega-panel-viewall:hover { color: var(--navy-600); }
.mega-panel-viewall .icon { width: 14px; height: 14px; }
.mega-aside-title { font-weight: 600; font-size: 14.5px; margin: 0; color: var(--ink); }

/* ---- Wide mega-panels (Industries, Products): five equal columns + a
   narrower aside column. position:fixed (rather than the base .mega-panel's
   absolute-under-the-trigger) so a wide panel centres on the viewport
   instead of the trigger button - the trigger sits left-of-centre in the
   nav, and a panel this wide centred on IT would overflow the left edge of
   the viewport well before 1440px. .site-header's own backdrop-filter gives
   fixed descendants a containing block equal to its own (full-width,
   unpadded) box, so left:50% here still centres on the viewport, not on
   some narrower ancestor. Falls back to the mobile accordion below 1024px,
   where .primary-nav (and these panels) is hidden. Both panels share this
   modifier set so width/padding stay identical - see the Products
   mega-panel in header.html. */
.mega-panel--industries,
.mega-panel--products {
  position: fixed;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100vw - 40px));
  min-width: 0;
  padding: 28px 32px;
}
.site-header.is-shrunk .mega-panel--industries,
.site-header.is-shrunk .mega-panel--products { top: 72px; }
.mega-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 24px;
  align-items: start;
}
.mega-col-head { min-height: 44px; }
.mega-col-title { line-height: 1.25; }
.mega-col-tagline { min-height: 2.8em; }
.mega-col { padding: 0; min-width: 0; }
.mega-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  border-radius: var(--r-sm);
}
.mega-col-head .mega-item-icon { width: 32px; height: 32px; }
.mega-col-head .mega-item-icon .icon { width: 16px; height: 16px; }
.mega-col-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--motion-fast);
}
.mega-col-head:hover .mega-col-title,
.mega-col-head:focus-visible .mega-col-title { color: var(--navy-700); }
.mega-col-tagline {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mega-bullets { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-left: -14px; }
.mega-bullets li { margin: 0; text-align: left; }
.mega-bullets a {
  display: block;
  padding: 6px 0 6px 12px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink-2);
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.mega-bullets a:hover,
.mega-bullets a:focus-visible {
  color: var(--navy-700);
  border-left-color: var(--yellow);
}
.mega-col--aside {
  grid-column: 1 / -1;
  margin-top: 22px;
  padding: 12px 16px;
  background: var(--mist);
  border-radius: var(--r-sm);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
}
.mega-aside-photo.photo { width: 48px; aspect-ratio: 1; min-height: 0; border-radius: 50%; }
.mega-col--aside .mega-aside-title { font-size: 14px; }
.mega-col--aside .btn { width: auto; padding: 0 18px; height: 40px; justify-content: center; }
.mega-aside-platform-link { text-align: right; max-width: 220px; }
.mega-aside-platform-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  justify-content: center;
  transition: color var(--motion-fast);
}
.mega-aside-platform-link .icon { width: 13px; height: 13px; }
.mega-aside-platform-link:hover,
.mega-aside-platform-link:focus-visible { color: var(--navy-700); }
.mega-panel--industries > .mega-panel-viewall,
.mega-panel--products > .mega-panel-viewall {
  margin: 16px 0 0;
  padding-left: 0;
}

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--on-dark);
  border-radius: var(--r-sm);
}

.mobile-nav[hidden] { display: none; }
.mobile-nav {
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--navy-900);
  z-index: 490;
  overflow-y: auto;
  padding: 12px 0 32px;
  animation: fadeIn var(--dur-fast) var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.mobile-nav-list > li {
  opacity: 0;
  transform: translateY(8px);
  animation: heroIn var(--dur-base) var(--ease) forwards;
}
.mobile-nav-list > li:nth-child(1) { animation-delay: 30ms; }
.mobile-nav-list > li:nth-child(2) { animation-delay: 70ms; }
.mobile-nav-list > li:nth-child(3) { animation-delay: 110ms; }
.mobile-nav-list > li:nth-child(4) { animation-delay: 150ms; }
.mobile-nav-list > li:nth-child(5) { animation-delay: 190ms; }
.mobile-nav-list > li:nth-child(6) { animation-delay: 230ms; }
.mobile-nav-list li { border-bottom: 1px solid var(--line-dark); }
.mobile-nav-list > li > a,
.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 var(--container-pad);
  font-size: 16px;
  font-weight: 500;
  color: var(--on-dark);
  width: 100%;
}
.accordion-caret { width: 16px; height: 16px; transition: transform var(--motion-fast); }
.accordion-trigger[aria-expanded="true"] .accordion-caret { transform: rotate(45deg); }
.accordion-panel[hidden] { display: none; }
.accordion-panel { padding: 0 var(--container-pad) 12px calc(var(--container-pad) + 12px); display: flex; flex-direction: column; }
.accordion-panel a {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--on-dark-3);
  font-size: 15px;
}
.accordion-panel a[aria-current="page"] { color: var(--yellow); }
.mobile-nav-list > li > a[aria-current="page"],
.accordion-trigger[aria-current="page"] { color: var(--yellow); }
.mobile-cta { margin: 20px var(--container-pad) 0; }

@media (max-width: 1023px) {
  .primary-nav, .header-actions .btn-primary { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding-inline: 22px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast),
              transform var(--motion-fast), box-shadow var(--motion-fast);
}
.btn-arrow { width: 16px; height: 16px; transition: transform var(--motion-fast); }
.btn:hover .btn-arrow { transform: translateX(4px); }
/* Press language shared by every interactive surface: lift 1px on hover,
   settle on press. Ghost buttons (text + arrow) move the arrow only. */
.btn:not(.btn-ghost):hover { transform: translateY(-1px); }
.btn:not(.btn-ghost):active { transform: translateY(0) scale(.985); transition-duration: 80ms; }

.btn-primary { background: var(--yellow); color: var(--navy-700); }
.btn-primary:hover { background: var(--yellow-600); box-shadow: 0 8px 20px -10px rgba(250,200,60,.7); }

.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--navy-700);
  color: var(--navy-700);
}
.ground-navy .btn-secondary,
.btn-secondary--dark {
  border-color: var(--on-dark);
  color: var(--on-dark);
}
.btn-secondary:hover { background: rgba(35,40,90,.06); }
.ground-navy .btn-secondary:hover,
.btn-secondary--dark:hover { background: rgba(255,255,255,.08); }

.btn-ghost {
  height: auto;
  padding: 0;
  color: var(--navy-700);
  font-weight: 600;
}
.ground-navy .btn-ghost { color: var(--on-dark); }
.btn-ghost:hover .btn-arrow { transform: translateX(3px); }

.btn-sm { height: 40px; padding-inline: 16px; font-size: 14px; }

/* =========================================================================
   Eyebrow / section head
   ========================================================================= */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ground-navy .eyebrow { color: var(--on-dark-3); }
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  flex: none;
}

.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(32px, 4.5vw, 56px); max-width: 720px; }
.section-head h2 { margin: 0; }
.section-head .lede { margin: 0; }
.section-head--center { max-width: 640px; margin-inline: auto; text-align: center; align-items: center; }

/* Two-column body copy (e.g. the SAP integration section) is plain
   stacked block content, not a gapped flex column like .section-head -
   an h2 (margin:0 from the reset) otherwise butts straight against the
   next paragraph. */
.grid-2 h2 + p { margin-top: 16px; }

/* =========================================================================
   Cards / features / product cards / stats
   ========================================================================= */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: #D3D7E6; }
.card--dark:hover { border-color: rgba(255,255,255,.18); }
.card--dark {
  background: var(--navy-800);
  border-color: var(--line-dark);
  color: var(--on-dark-2);
}
.card--dark h3, .card--dark h4, .card--dark h2 { color: var(--on-dark); }
.card--dark .eyebrow { color: var(--on-dark-3); }

.feature { display: flex; flex-direction: column; gap: 14px; }
.icon-tile {
  /* 2026-09-04 (Daniel's pick, option 3a): soft yellow squircle, navy line icon,
     dead-centre. Replaces the navy tile + yellow corner dot everywhere. */
  position: relative;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250,200,60,.42);
  border-radius: 16px;
  color: var(--navy-700);
  flex: none;
  transition: background var(--motion-fast);
}
.icon-tile .icon { width: 24px; height: 24px; }
.card:hover .icon-tile { background: rgba(250,200,60,.62); }
/* On dark grounds the squircle goes translucent and the icon turns yellow. */
.ground-navy .icon-tile,
.card--dark .icon-tile,
.stage .icon-tile,
.designer .icon-tile,
.device .icon-tile {
  background: rgba(250,200,60,.16);
  color: var(--yellow);
}
.card--dark:hover .icon-tile { background: rgba(250,200,60,.26); }
/* Light panels inside dark sections (mega-menu, contact form card) stay navy-on-yellow. */
.mega-panel .icon-tile,
.ground-navy .card:not(.card--dark) .icon-tile { background: rgba(250,200,60,.42); color: var(--navy-700); }
.feature h3, .feature h4 { margin: 0; font-size: var(--fs-h4); }
.feature p { margin: 0; color: var(--ink-2); font-size: 15px; }
.card--dark .feature p { color: var(--on-dark-2); }

.product-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.product-card h3 { margin: 0; }
.product-card p { margin: 0; color: var(--ink-2); font-size: 15px; }
.product-card .checklist { margin: 4px 0 8px; }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 767px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
.stats-row--three { grid-template-columns: repeat(3, 1fr); max-width: 760px; margin-inline: auto; }
@media (max-width: 767px) { .stats-row--three { grid-template-columns: 1fr; gap: 32px; } }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ground-navy .stat-num { color: var(--on-dark); }
.stat-cap {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 26ch;
}
.ground-navy .stat-cap { color: var(--on-dark-2); }

/* =========================================================================
   Steps
   ========================================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.steps li::after {
  content: '';
  position: absolute;
  top: 20px;
  left: calc(50% + 34px);
  right: calc(-50% + 34px);
  border-top: 1.5px dashed rgba(250,200,60,.45);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease) calc(var(--stagger) * 2);
}
.steps li:last-child::after { display: none; }
.steps.reveal--visible li::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .steps li::after { transform: scaleX(1); transition: none; }
}
.step-num {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-700);
  color: var(--on-dark);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 15px;
  flex: none;
}
.steps h3, .steps h4 { margin: 0; font-size: var(--fs-h4); font-weight: 600; line-height: 1.4; }
.steps p { margin: 0; color: var(--ink-2); font-size: 15px; }
.ground-navy .steps p { color: var(--on-dark-2); }

@media (max-width: 1023px) {
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .steps li::after { display: none; }
}

/* =========================================================================
   Checklist
   ========================================================================= */
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  padding-block: 4px;
}
.checklist .icon {
  width: 18px;
  height: 18px;
  color: var(--yellow-600);
  flex: none;
  margin-top: 2px;
}
.ground-navy .checklist .icon { color: var(--yellow); }

/* =========================================================================
   SAP-mono identifiers
   ========================================================================= */
.sap-id {
  font-family: var(--font-mono);
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sap-id::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  flex: none;
}

/* =========================================================================
   Device mock
   ========================================================================= */
.device {
  background: var(--navy-950);
  border-radius: var(--r-lg);
  padding: 10px;
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-1), 0 0 60px rgba(250,200,60,.08);
}
.device-screen {
  background: var(--navy-900);
  border-radius: 12px;
  padding: 16px;
  color: var(--on-dark);
}
.device-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.device-appname { font-size: 13px; font-weight: 600; }
.device-time { font-family: var(--font-mono); font-size: 12px; color: var(--on-dark-3); }
.sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--on-dark-2);
  background: rgba(255,255,255,.06);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}
.sync::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  animation: dotPulse 1.8s var(--ease-in-out) infinite;
}
.sync--off::before { background: var(--muted); animation: none; }

.device-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line-dark);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.device-row:first-of-type { border-top: none; }
.device-row--enter { opacity: 0; transform: translateY(-8px); }
.device-row--exit { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .device-row--enter, .device-row--exit { opacity: 1; transform: none; transition: none; }
}
.device-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.device-row-title { font-size: 13.5px; font-weight: 500; color: var(--on-dark); }
.device-row-meta { font-size: 12px; color: var(--on-dark-3); }

.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  flex: none;
  white-space: nowrap;
}
.chip--ok { background: rgba(61,190,120,.16); color: var(--ok); }
.chip--warn { background: rgba(242,169,59,.16); color: var(--warn); }
.chip--bad { background: rgba(240,106,90,.16); color: var(--bad); }
.chip--neutral { background: rgba(255,255,255,.08); color: var(--on-dark-3); }

.device-foot {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line-dark);
  font-size: 12px;
  color: var(--on-dark-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.device-foot .icon { width: 14px; height: 14px; color: var(--warn); }

/* =========================================================================
   Handset - a rugged-handheld phone frame around the existing .device-screen
   markup. Applied as an extra class alongside .device (e.g.
   class="device handset"), so JS (.device[data-live]) and the .device-screen/
   .device-feed structure underneath are completely unchanged - only the
   outer frame's chrome differs. .handset--tablet is the wider, thinner-bezel
   variant. Both scale down with the viewport rather than a fixed size, so
   mocks stay readable at 390px. ------------------------------------------- */
.handset.device {
  max-width: min(360px, 100%);
  margin-inline: auto;
  padding: 14px 14px 22px;
  border-radius: 28px;
  position: relative;
}
.handset.device::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--navy-600);
}
.handset.device::after {
  content: '';
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 5px;
  border-radius: 3px;
  background: var(--navy-600);
}
.handset.device .device-screen { border-radius: 18px; }
.handset--tablet.device {
  max-width: min(460px, 100%);
  padding: 10px 10px 14px;
  border-radius: 20px;
}
.handset--tablet.device::before { width: 56px; }
.handset--tablet.device::after { display: none; }
.handset--tablet.device .device-screen { border-radius: 12px; }
/* .device--compact (home hero) sets an explicit 292px width for the plain
   card device - narrow this one down further when paired with .handset so
   the hero diagram reads as a distinct, phone-shaped element next to the
   wider card, not two same-sized boxes. */

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { max-width: 66ch; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.ground-navy .faq details { border-bottom-color: var(--line-dark); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: 16.5px;
}

/* FAQ two-column layout: a .section-head immediately followed by .faq,
   both direct children of the same .container, is the pattern every page
   already uses (see /how-it-works/). :has() lets this apply automatically
   with no wrapper markup or extra class - it never matches a section-head
   followed by anything else (steps, grids, etc). Single column below
   1024px; the section-head keeps its normal static, non-sticky layout
   there too, since .container's own gridless flow already stacks them. */
@media (min-width: 1024px) {
  .container:has(> .section-head + .faq) {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: start;
  }
  .container:has(> .section-head + .faq) > .section-head {
    position: sticky;
    top: 96px;
    max-width: none;
    margin-bottom: 0;
  }
  .container:has(> .section-head + .faq) > .faq {
    max-width: 66ch;
  }
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 18px; height: 18px; flex: none; transition: transform var(--motion-fast); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details p { margin-top: 14px; color: var(--ink-2); }
.ground-navy .faq details p { color: var(--on-dark-2); }

/* =========================================================================
   CTA band
   ========================================================================= */
.cta-band { position: relative; z-index: 0; text-align: center; }
.cta-band .container { position: relative; z-index: 1; }
.cta-band .section-head--center { margin-bottom: 32px; }
.cta-band .btn-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =========================================================================
   Strips (partners / platform)
   ========================================================================= */

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  background: var(--navy-950);
  color: var(--on-dark-2);
  padding-block: 56px 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 32px;
}
.footer-col h2, .footer-col h3 {
  font-size: 14px;
  color: var(--on-dark);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 14.5px; color: var(--on-dark-3); transition: color var(--motion-fast); }
.footer-col a:hover { color: var(--on-dark); }
.footer-blurb { font-size: 14.5px; color: var(--on-dark-3); margin: 14px 0 18px; max-width: 40ch; }
/* Contact rows: icon inline with its text, not stacked above it. */
.footer-contact .dc-contact-item a { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact .dc-contact-icon { flex: none; display: inline-flex; margin-top: 3px; }
.footer-contact .dc-contact-icon .icon { width: 16px; height: 16px; }
.footer-maps-link { display: inline-flex; align-items: center; gap: 6px; color: var(--yellow); font-size: 13px; margin-top: 4px; }
.footer-maps-link .icon { width: 12px; height: 12px; }

.footer-legal {
  border-top: 1px solid var(--line-dark);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-legal-text { font-size: 13.5px; color: var(--on-dark-3); margin: 0; }
.footer-legal-text a { color: var(--on-dark-2); }
.footer-legal-text a:hover { color: var(--on-dark); }
.footer-social { display: flex; gap: 4px; }
.social-link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-dark-3);
  border-radius: var(--r-sm);
  transition: color var(--motion-fast), background var(--motion-fast);
}
.social-link .icon { width: 19px; height: 19px; }
.social-link:hover { color: var(--yellow); background: rgba(255,255,255,.06); }

@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col--about { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-legal { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Hero (home + inner pages)
   ========================================================================= */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 22px; max-width: 560px; }
.hero-copy h1 { margin: 0; }
.hero-copy .lede { margin: 0; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.hero-accent { color: var(--yellow); }
.hero-visual { position: relative; }

/* ---- Hero entry: the opening. Hidden only once the inline script in
   layout.html has confirmed this is the FIRST page of the session
   (html.is-opening), so a no-JS visit and every later page in the session
   render the hero immediately. Order: logo (header) -> eyebrow -> h1 ->
   lede -> actions -> visual, every step on the same curve and distance.
   Scrolling during the sequence adds html.opening-skipped, which snaps all
   of it to its end state. */
html.is-opening .hero-copy > .eyebrow,
html.is-opening .hero-copy > h1,
html.is-opening .hero-copy > .lede,
html.is-opening .hero-copy > .hero-actions,
html.is-opening .hero-copy > .fact-strip,
html.is-opening .hero-copy > .spec-row,
html.is-opening .hero-visual {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  animation: heroIn var(--dur-base) var(--ease) forwards;
}
html.is-opening .hero-copy > .eyebrow { animation-delay: 120ms; }
html.is-opening .hero-copy > h1 { animation-delay: 200ms; }
html.is-opening .hero-copy > .lede { animation-delay: 300ms; }
html.is-opening .hero-copy > .hero-actions { animation-delay: 400ms; }
html.is-opening .hero-copy > .fact-strip,
html.is-opening .hero-copy > .spec-row { animation-delay: 500ms; }
html.is-opening .hero-visual { animation-delay: 380ms; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
html.opening-skipped .hero-copy > *,
html.opening-skipped .hero-visual,
html.opening-skipped .site-header .logo-img,
html.opening-skipped .hero-film,
html.opening-skipped .hero-proof,
html.opening-skipped .hero-visual--shots .shot-frame--phone,
html.opening-skipped .cms-hero-settings {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
}
@media (prefers-reduced-motion: reduce) {
  html.is-opening .hero-copy > *, html.is-opening .hero-visual {
    animation: none; opacity: 1; transform: none;
  }
}

@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
}

/* ---- Sync diagram (hero) ------------------------------------------------ */
/* z-index:0, not just position:relative, is required: without it this box
   never forms its own stacking context, so its negative-z-index children
   (photo--bg, the glow/dot-grid layers) escape to the nearest ancestor that
   does - and this element's own background then paints over them. Same for
   .cta-band below. */
.hero-section { position: relative; z-index: 0; padding-top: clamp(48px, 7vw, 88px); }
.hero-section .container { position: relative; z-index: 1; }

.sync-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.sync-line {
  fill: none;
  stroke: rgba(250,200,60,.5);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  stroke-dashoffset: 40;
  opacity: 0;
}
html.is-loaded .sync-line {
  animation: drawLine var(--dur-slow) var(--ease) 900ms forwards;
}
@keyframes drawLine {
  from { stroke-dashoffset: 40; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
.packet { fill: var(--yellow); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .sync-line { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .packet { display: none; }
}
.sync-node {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--yellow), var(--yellow-600));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--navy-900);
  margin-bottom: 34px;
  box-shadow: 0 0 0 10px rgba(250,200,60,.10), 0 0 0 22px rgba(250,200,60,.05);
}
html.is-loaded .sync-node { animation: nodeBreathe 3s var(--ease-in-out) infinite; }
@keyframes nodeBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  html.is-loaded .sync-node { animation: none; }
}
.sync-node-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.sync-node-label { font-family: var(--font-mono); font-size: 12px; opacity: .8; margin-top: 2px; }

.sync-pill {
  position: relative;
  z-index: 1;
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(250,200,60,.10);
  border: 1px solid rgba(250,200,60,.32);
  border-radius: var(--r-pill);
  padding: 10px 18px;
}
.sync-pill-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
  animation: dotPulse 1.8s var(--ease-in-out) infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .sync::before, .sync-pill-dot { animation: none; }
}
.sync-pill strong { display: block; font-size: 13px; color: var(--on-dark); }
.sync-pill small { display: block; font-size: 12px; color: var(--on-dark-3); margin-top: 2px; }

@media (max-width: 1023px) {
  
  .sync-lines { display: none; }
}

/* ---- Hero wordmark watermark: the real logo, huge and faint, replacing
   the old "d." outline mark. Default variant bleeds off the right/bottom
   edge for heroes with no competing right-column visual (e.g. /products/).
   The --left variant sits low-opacity behind the copy column instead, for
   heroes where a device mock or card occupies the right column and a
   right-bleed would visually compete with it (home, the five product
   heroes). Never shown on heroes that already carry a .photo--bg (the
   industry pages) - one photography treatment per hero, not two. --------- */

/* =========================================================================
   Prose pages (privacy / terms)
   ========================================================================= */
.prose { max-width: 66ch; }
.prose h2 { margin-top: 40px; margin-bottom: 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 16px; color: var(--ink-2); }
.prose ul { padding-left: 22px; list-style: disc; margin-bottom: 16px; }
.prose li { margin-bottom: 8px; color: var(--ink-2); }

/* =========================================================================
   Styleguide helper
   ========================================================================= */
.sg-block { margin-bottom: 56px; }
.sg-block h2 { margin-bottom: 16px; }
.sg-sample {
  padding: 32px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.sg-sample--dark { background: var(--navy-900); border-color: var(--line-dark); }
.sg-code {
  background: var(--navy-950);
  color: #cdd3ee;
  padding: 16px 20px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* =========================================================================
   Print
   ========================================================================= */
@media print {
  .site-header, .site-footer, .mobile-nav, .cta-band, .skip-link { display: none; }
  body { color: #000; background: #fff; }
  a { text-decoration: underline; }
  .device { box-shadow: none; border: 1px solid #999; }
}

/* ---- Responsive container tweaks ---------------------------------------- */
@media (max-width: 639px) {
  h1 { line-height: 1.08; }
  .mega-panel { display: none !important; }
}

/* =========================================================================
   Photo component - duotone frame; falls back to a designed placeholder
   when a slot has no <img>. See README.md "Photography".
   ========================================================================= */
.photo {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 320px;
  background: var(--navy-900);
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;
  display: flex;
  align-items: flex-end;
  padding: 24px;
}
.photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--contour-mark);
  background-size: 220px 220px;
  pointer-events: none;
}
.photo img,
.photo video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(1.05);
}
/* Duotone method: the img is desaturated only (no darkening baked into the
   filter beyond a mild contrast/brightness lift). Colourising happens on
   ::before, promoted above the img via z-index and blended with
   mix-blend-mode: color, which recolours luminance without crushing it the
   way multiply alone does. ::after adds a separate, much softer multiply
   layer purely for depth plus the yellow corner highlight. */
.photo:has(img)::before,
.photo:has(video)::before {
  background-image: none;
  background-color: var(--navy-700);
  mix-blend-mode: color;
  opacity: 1;
}
.photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background: linear-gradient(135deg, rgba(250,200,60,.11), transparent 45%), rgba(15,18,41,.22);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.photo:has(img)::after,
.photo:has(video)::after { opacity: 1; }
.photo-caption {
  position: relative;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--on-dark-3);
  margin: 0;
  max-width: 30ch;
}
.photo:has(img) .photo-caption { display: none; }
/* Customer-story photo shows as shot: no duotone (owner, 2026-09-22 - the tint washed the
   coal-section photo out). The tint stays on the other .photo uses. */
.case-band .photo img { filter: none; }
.case-band .photo::before, .case-band .photo::after { display: none; }
/* Compact customer-story card (owner, 2026-09-22): a small 3:2 photo beside the copy, not a
   half-width hero image, so the story closes the page quietly. */
.case-band { padding-block: 48px; }
.case-band .grid-2 { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; max-width: 820px; }
.case-band .photo { min-height: 0; aspect-ratio: 3 / 2; padding: 0; border-radius: var(--r-md); max-width: 220px; }
@media (max-width: 767px) {
  .case-band .grid-2 { grid-template-columns: 1fr; gap: 20px; }
}

/* relative, not static: .photo's own img/::before/::after are position:absolute
   and rely on .photo being their containing block. static removes that -
   the img then positions against the viewport instead (visually just the
   navy placeholder ground, no photo) - a real bug this round's mobile pass
   caught via screenshot review on the home "Why d.Code" section. relative
   still kills the sticky behaviour on mobile, which is all this was for. */

/* Lighter lift for slots whose source photo is itself very dark (headlamp
   in a tunnel, etc.) - brightens the image further and thins the multiply
   depth layer so texture/highlights survive the tint. */
.photo--lift img { filter: grayscale(1) contrast(1.12) brightness(1.35); }
.photo--lift::after { background: linear-gradient(135deg, rgba(250,200,60,.11), transparent 45%), rgba(15,18,41,.10); }
/* Bright, low-contrast sources (e.g. the aerial vehicle yard) need the
   opposite of --lift: pull the photo down so headline contrast holds. */
.photo--bg.photo--deep { opacity: .42; }
.photo--bg.photo--deep img { filter: grayscale(1) contrast(1.15) brightness(.78); }
.photo--bg.photo--deep::after { background: linear-gradient(135deg, rgba(250,200,60,.08), transparent 45%), rgba(15,18,41,.55); }
/* About "Who we are" photo crops toward the crane cage/crew rather than the
   concrete shaft wall that dominates the top of the source frame. */
.page-about .photo img { object-position: 50% 68%; }
/* Home "Why d.Code" photo: home-field.webp (miner's headlamp in a tunnel) is
   too dark in the source to recover with a duotone lift - most of the frame
   is at or near true black, which no CSS filter can bring back. Swapped to
   manufacturing.webp (welder, sparks) for the midtones/texture the duotone
   needs; home-field.webp is left unused in src/assets/img/photos/. */

/* Full-bleed hero background variant: sits behind the hero glow/dot-grid
   layers and the copy, as a visible-but-subordinate photography slot. A
   directional mask keeps the copy on solid navy while the photo reads
   clearly under the device mock; the mask flips to vertical on the stacked
   mobile layout so the photo shows above the headline instead. */
.photo--bg {
  position: absolute;
  inset: 0;
  border-radius: 0;
  min-height: 0;
  padding: 24px;
  opacity: .55;
  z-index: -4;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 60%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 60%);
}
@media (max-width: 1023px) {
  .photo--bg {
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 30%, transparent 45%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 30%, transparent 45%);
  }
}

/* ---- Photo thumb: small fixed-ratio crop for card-top imagery (industries
   overview cards). ---------------------------------------------------------*/

/* ---- Photo band: full-bleed landscape strip with a mono caption, used
   between two sections on the industry pages (and reusable elsewhere). No
   .photo:has(img) placeholder logic here - it's always populated. -------- */

/* ---- Field band (home): full-bleed navy section with a background photo
   and three short platform facts. -------------------------------------- */

/* =========================================================================
   Yard map - live movement
   ========================================================================= */
.page-product .yard-bay { transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.page-product .yard-bay--live {
  animation: bayPulse 1.8s var(--ease-in-out) infinite;
}
@keyframes bayPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250,200,60,.55); }
  50% { box-shadow: 0 0 0 6px rgba(250,200,60,0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-product .yard-bay--live { animation: none; }
}

/* =========================================================================
   Round 4: agency-draft harvest - product composites, IM render, barcode
   scan-beam, About hotspot stage, fact strip, small photo/wordmark uses.
   ========================================================================= */

/* ---- Composite illustrations (draft/composite-*.webp) ------------------
   Full-colour marketing illustrations - never duotoned. A soft yellow-dot
   glow sits behind the circular frame, matching the brand motif baked into
   each image; a slow float plus a gentle hover scale keep it alive without
   competing with the copy beside it. */
.composite-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 12px;
}
.composite-wrap::before {
  content: '';
  position: absolute;
  inset: 6%;
  z-index: 0;
  background: radial-gradient(circle, rgba(250,200,60,.32), transparent 68%);
  filter: blur(4px);
  pointer-events: none;
}
.composite {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  transition: transform var(--motion-fast);
}
.composite:hover, .composite:focus-visible { transform: scale(1.015); }
.composite img { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) {
  .composite:hover, .composite:focus-visible { transform: none; }
}

/* Product page "what you get" split: composite left (sticky on desktop),
   feature cards right in a 2-column grid. */
.features-split {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 20px 40px;
  align-items: start;
}
.features-split .composite-wrap { position: sticky; top: 96px; }
.features-split .grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1023px) {
  .features-split { grid-template-columns: 1fr; }
  .features-split .composite-wrap { position: relative; top: 0; max-width: 300px; margin-inline: auto; }
}
@media (max-width: 639px) {
  .features-split .grid-2 { grid-template-columns: 1fr; }
}

/* Products overview card visual: composite sits above the title. VMS has no
   composite, so it gets a circular crop of the yard photo at the same size
   to keep the grid even. */

/* Home hero product cards: a small composite thumbnail top-right. Extra
   top padding reserves room for it so eyebrow/heading/copy never run
   underneath - the thumb sits inside that reserved band, not over text. */

/* ---- IM hero: mock + real device render --------------------------------
   render-im-handset.webp overlaps the bottom-right corner of the .handset
   mock; its laser points up-left into the mock, so it visually "aims" at
   the mock's own scanning row. Hidden below 1024px so mock text stays
   fully readable at narrower widths where there's no room to offset it. */

/* IM hero: keep the live handset at the column's left so the render peeks in
   at the right without covering any row text. */

/* ---- Barcode + scan-beam sweep ------------------------------------------
   A CSS-drawn barcode inside a device-row; deviceLive (site.js) toggles
   .scan-beam-active on the barcode's parent .barcode span before it flips
   the row's chip, then removes the transient state once the chip lands. */

.barcode {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.barcode-bars {
  position: relative;
  display: block;
  width: 64px;
  height: 22px;
  border-radius: 3px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.85) 0 2px, transparent 2px 5px,
      rgba(255,255,255,.85) 5px 6px, transparent 6px 10px,
      rgba(255,255,255,.85) 10px 13px, transparent 13px 15px,
      rgba(255,255,255,.85) 15px 16px, transparent 16px 20px,
      rgba(255,255,255,.85) 20px 22px, transparent 22px 24px);
}
.barcode-bars::after {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(250,200,60,.9) 50%, transparent);
  box-shadow: 0 0 8px 1px rgba(250,200,60,.75);
  opacity: 0;
}
.barcode.scan-beam-active .barcode-bars::after {
  opacity: 1;
  animation: scanSweep 1.1s var(--ease-in-out);
}
@keyframes scanSweep {
  0% { left: -30%; }
  100% { left: 100%; }
}
.barcode-code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-dark-3);
  letter-spacing: .02em;
}
@media (prefers-reduced-motion: reduce) {
  .barcode.scan-beam-active .barcode-bars::after { animation: none; opacity: 0; }
}
@keyframes chipPop {
  0% { transform: scale(.85); opacity: .4; }
  100% { transform: scale(1); opacity: 1; }
}
.chip.chip-pop { animation: chipPop var(--dur-fast) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .chip.chip-pop { animation: none; }
}

/* ---- CMS hero mock progress bar (fill on scroll into view, once) -------- */
.mock-progress { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-dark); }
.mock-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--on-dark-3);
  margin-bottom: 8px;
}
.mock-progress-row strong { color: var(--on-dark); font-family: var(--font-mono); font-weight: 500; }
.mock-progress-track {
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.mock-progress-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--yellow);
  width: 72%;
  transition: width var(--dur-slow) var(--ease);
}
.mock-progress-fill.is-pending { width: 0; }
.mock-progress-fill.is-filled { width: 72%; }
@media (prefers-reduced-motion: reduce) {
  .mock-progress-fill { transition: none; }
}

/* ---- Compact fact strip (About + Products) ------------------------------ */
.fact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fact-item { display: flex; align-items: center; gap: 12px; }
.fact-item .icon-tile { width: 40px; height: 40px; }
.fact-item .icon-tile .icon { width: 20px; height: 20px; }
.fact-text { display: flex; flex-direction: column; font-size: 14px; }
.fact-text strong { font-size: 15px; color: var(--ink); }
.ground-navy .fact-text strong { color: var(--on-dark); }
.fact-text small { color: var(--muted); }
.ground-navy .fact-text small { color: var(--on-dark-3); }
@media (max-width: 639px) { .fact-strip { gap: 18px 24px; } }

/* ---- Legal page wordmark ------------------------------------------------ */
.legal-mark-bar { padding-block: 22px 0; }
.legal-mark { width: 120px; height: auto; display: block; }

/* =========================================================================
   Phase 1 "less is more" additions
   ========================================================================= */

/* -------------------------------------------------------------------------
   Trust wall (home proof strip) - typographic wordmark grid
   ------------------------------------------------------------------------- */
.trusted { }
/* Hairline wall with NO empty cells: a wrapping flex row where every cell
   grows to fill its line (a group of three fills one row of three, nine
   fills six + three stretched). The 1px gap over a --line background draws
   the hairline grid, so no per-cell border arithmetic is needed. */
.wordmark-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 48px;
}
.wordmark-cell {
  flex: 1 1 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: 12px 16px;
  background: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
  transition: color var(--motion-fast), background var(--motion-fast);
}
.wordmark-wall .wordmark-cell:hover { color: var(--ink); background: var(--mist); }
@media (max-width: 639px) {
  .wordmark-cell { flex-basis: 140px; min-height: 64px; font-size: 13px; padding: 10px; }
}

/* -------------------------------------------------------------------------
   Platform scene (home, screen 3) - designer canvas / handset / SAP node,
   joined by dashed sync lines with travelling packets. One JS-driven ~8s
   loop (site.js): a designer node lights, the handset row flips to IN
   The panels hold real product captures (2026-09-22); only the SVG packets move.
   Reduced motion: the packets hide via the existing global rule.
   ------------------------------------------------------------------------- */
.platform-scene {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  max-width: 1040px;
  margin-inline: auto;
}
.platform-scene .sync-lines { z-index: 0; }
.scene-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.scene-panel-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  text-align: center;
  margin: 0;
}
.scene-panel--sap { align-items: center; justify-content: center; }
.scene-sap-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}
.scene-sap-block .sync-node { margin-bottom: 0; }
.posting-log {
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--navy-950);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  min-height: 96px;
}
.posting-log li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-dark-2);
  display: flex;
  align-items: baseline;
  gap: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.posting-log li.is-in { opacity: 1; transform: none; }
.posting-log li::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--yellow);
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .posting-log li { transition: none; }
}
@media (max-width: 1023px) {
  .platform-scene { grid-template-columns: 1fr; max-width: 420px; gap: 40px; }
  .platform-scene .sync-lines { display: none; }
}
@media (max-width: 767px) {
  .scene-panel--designer { display: none; }
}

/* -------------------------------------------------------------------------
   Tiles (home, screen 4) - five equal product tiles, whole tile a link
   ------------------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 28px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-1);
  border-color: #D3D7E6;
}
.tile:active { transform: translateY(-1px); transition-duration: 80ms; }
.tile-thumb {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--navy-900);
}
.tile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile h3 { margin: 0; font-size: 17px; line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; }
.tile p { margin: 0; font-size: 14px; color: var(--muted); }
@media (max-width: 1023px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .tiles > .tile:nth-child(4), .tiles > .tile:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 639px) {
  .tiles { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Tabs (industries) - real ARIA tabs with a hairline underline indicator
   ------------------------------------------------------------------------- */
.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.tab-list [role="tab"] {
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.tab-list [role="tab"]:hover { color: var(--ink); background: var(--mist); }
.tab-panel:not([hidden]) > * { animation: shotIn var(--dur-base) var(--ease); }
@media (prefers-reduced-motion: reduce) { .tab-panel:not([hidden]) > * { animation: none; } }
.tab-list [role="tab"][aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--yellow-600);
}
.tab-panel[hidden] { display: none; }

/* -------------------------------------------------------------------------
   Values row (about) - six words, one line each, not cards
   ------------------------------------------------------------------------- */
.values-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}
.value-item h3 { margin: 0 0 4px; font-size: 17px; }
.value-item p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 767px) {
  .values-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479px) {
  .values-row { grid-template-columns: 1fr; }
}

/* =========================================================================
   Home - Fable's aesthetic pass (2026-09-04)
   Cinematic film hero with an in-hero proof strip; the platform scene as a
   dark stage on a light ground with one continuous sync line behind it.
   ========================================================================= */

/* ---- Hero: film ---------------------------------------------------------- */
.hero-section--film {
  min-height: min(86vh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.hero-section--film .hero-film-copy {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding-top: clamp(56px, 8vw, 110px);
  padding-bottom: clamp(56px, 8vw, 110px);
}
.hero-film {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero-film img,
.hero-film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%;
  filter: saturate(.6) contrast(1.06) brightness(.82);
}
.hero-film video { z-index: 1; }
/* Copy sits on solid navy at the left; the footage breathes at the right. */
.hero-film::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, var(--navy-900) 0%, var(--navy-900) 34%, rgba(21,25,54,.72) 56%, rgba(21,25,54,.30) 78%, rgba(21,25,54,.18) 100%),
    linear-gradient(180deg, rgba(21,25,54,.55) 0%, transparent 22%, transparent 70%, rgba(21,25,54,.85) 100%);
}
/* the section's own dot grid stays above the film but should not fight it */
.hero-section--film.ground-dots::after { opacity: .5; }
.page-home .hero-section--film h1 {
  font-size: clamp(44px, 6vw, 84px);
  line-height: .98;
  letter-spacing: -.03em;
  max-width: 11ch;
}
.page-home .hero-section--film .hero-copy { max-width: 760px; gap: 26px; margin: 0; }
.page-home .hero-section--film .hero-actions { margin-top: 4px; }
.page-home .hero-section--film .btn-ghost { color: var(--on-dark); }

.page-home .hero-section--film .spec-row {
  display: flex;
  grid-template-columns: none;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 8px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,.14);
  max-width: 640px;
  list-style: none;
}
.spec-row li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  white-space: nowrap;
}
.spec-row li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
}
/* ---- The home opening (once per session, under 1.2s, scroll to skip) --
   0ms logo, 120 eyebrow, 200 h1, 400 button, 500 spec row; the film fades
   and settles from a 4% zoom over the whole sequence; the proof strip is
   the last thing to land at ~1.1s. */
html.is-opening .page-home .hero-film {
  opacity: 0;
  transform: scale(1.04);
  animation: filmIn 1100ms var(--ease) 0ms forwards;
}
@keyframes filmIn { to { opacity: 1; transform: none; } }
html.is-opening .page-home .hero-proof {
  opacity: 0;
  transform: translateY(10px);
  animation: heroIn var(--dur-base) var(--ease) 640ms forwards;
}
@media (prefers-reduced-motion: reduce) {
  html.is-opening .page-home .hero-film,
  html.is-opening .page-home .hero-proof { animation: none; opacity: 1; transform: none; }
}

/* ---- Hero: proof strip along the bottom edge ----------------------------- */
.hero-proof {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(15,18,41,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-proof-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.hero-proof-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  white-space: nowrap;
  flex: none;
}
.hero-proof-list {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  overflow: hidden;
}
/* One row, always: drop names from the right as the strip narrows rather
   than letting the list wrap under "Trusted by". */
@media (max-width: 1399px) { .hero-proof-list li:nth-child(n+6) { display: none; } }
@media (max-width: 1199px) { .hero-proof-list li:nth-child(n+5) { display: none; } }
.hero-proof-list li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.hero-proof-list li + li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--yellow);
  opacity: .8;
  margin: 0 16px;
}
.hero-proof-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--yellow);
  white-space: nowrap;
}
.hero-proof-more:hover .btn-arrow { transform: translateX(4px); }
@media (max-width: 1023px) {
  .hero-proof-list li:nth-child(n+4) { display: none; }
}
@media (max-width: 767px) {
  .hero-section--film { min-height: 0; }
  /* Phone: let the film show through at the top (eyebrow sits over it) and
     deepen to solid navy behind the headline and button. */
  .hero-film img { object-position: 60% 35%; }
  .hero-film::after {
    background: linear-gradient(180deg, rgba(21,25,54,.40) 0%, rgba(21,25,54,.72) 30%, rgba(21,25,54,.92) 55%, var(--navy-900) 100%);
  }
  .hero-section--film .hero-film-copy { padding-top: clamp(120px, 34vw, 170px); }
  .hero-proof-inner { flex-wrap: wrap; gap: 10px 16px; }
  .hero-proof-list { flex-wrap: wrap; flex-basis: 100%; }
  .hero-proof-list li:nth-child(n+4) { display: none; }
  .hero-proof-list li + li::before { margin: 0 10px; }
}

/* ---- Section head with an action at the right ---------------------------- */
.section-head--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
}
.section-head--row > div { display: flex; flex-direction: column; gap: 12px; }
.section-head-action { margin-bottom: 6px; }
@media (max-width: 767px) {
  .section-head--row { grid-template-columns: 1fr; align-items: start; }
}

/* ---- The stage: a dark card on the light ground -------------------------- */
.stage {
  position: relative;
  z-index: 0;
  margin-top: 40px;
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-lg);
  background: var(--navy-950);
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-1), 0 40px 80px -40px rgba(21,25,54,.55);
  overflow: hidden;
}
.stage.ground-dots { background-image: none; }
.stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 18% 50%, rgba(250,200,60,.08), transparent 60%),
    radial-gradient(50% 70% at 84% 50%, rgba(51,57,122,.6), transparent 65%),
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: auto, auto, 24px 24px;
}
.stage .platform-scene {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
  max-width: none;
}
.stage .platform-scene .sync-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
}
.stage .platform-scene .sync-line { stroke: rgba(250,200,60,.75); stroke-width: 2; stroke-dasharray: 7 9; fill: none; filter: drop-shadow(0 0 6px rgba(250,200,60,.45)); }
.stage .platform-scene .packet { r: 5; filter: drop-shadow(0 0 8px rgba(250,200,60,.9)); }
.stage .scene-panel { display: contents; }
.stage .scene-panel-label { grid-row: 1; align-self: end; margin-bottom: -6px; position: relative; z-index: 1; }
.stage .scene-panel > :not(.scene-panel-label) { grid-row: 2; align-self: center; position: relative; z-index: 1; width: 100%; }
.stage .platform-scene { grid-template-rows: auto 1fr; row-gap: 18px; }
.stage .scene-panel-label { color: var(--on-dark-3); text-align: left; }
.stage .stage .stage .stage .stage .stage .stage .stage .stage .stage .stage .stage .stage .scene-panel--sap { align-items: stretch; }
/* Real screens in the scene (owner, 2026-09-22): the Flow Designer capture in a browser window,
   a tablet capture in the shot frame; the SAP column keeps the S/4HANA badge and three facts. */
.stage .scene-shot { width: 100%; }
.stage .scene-panel--device .scene-shot { width: 230px; max-width: 100%; margin-inline: auto; }
.stage .scene-shot .win-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage .scene-sap-block { align-items: center; gap: 22px; }
.stage .posting-log { max-width: none; width: 100%; min-height: 0; background: var(--navy-900); }
.stage .sync-node-label { font-family: var(--font-mono); font-size: 12px; opacity: .8; margin-top: 2px; display: block; }
@media (max-width: 1023px) {
  .stage .scene-panel { display: flex; flex-direction: column; gap: 12px; }
  .stage .scene-panel-label, .stage .scene-panel > :not(.scene-panel-label) { grid-row: auto; align-self: stretch; margin-bottom: 0; }
  .stage .platform-scene { grid-template-columns: 1fr; grid-template-rows: none; max-width: 440px; margin-inline: auto; gap: 40px; }
  .stage .platform-scene .sync-lines { display: none; }
  .stage .scene-panel-label { text-align: center; }
}

/* ---- Tiles: larger thumbs ------------------------------------------------- */
.tile-thumb { width: 104px; height: 104px; box-shadow: 0 0 0 6px rgba(250,200,60,.10); transition: transform var(--motion-fast); }
.tile:hover .tile-thumb { transform: scale(1.04); }

/* =========================================================================
   Real product screens (2026-09-04) - frames + tabbed screen viewer
   ========================================================================= */
.shot-frame {
  margin: 0;
  background: var(--navy-950);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 10px;
  box-shadow: var(--shadow-1), 0 30px 70px -30px rgba(15,18,41,.7), 0 0 0 1px rgba(250,200,60,.06);
}
.shot-frame img { display: block; width: 100%; height: auto; border-radius: 13px; }
.shot-frame--tablet { position: relative; }
.shot-frame--tablet::before {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  width: 44px; height: 3px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(255,255,255,.14);
}
.shot-frame--phone {
  width: 200px;
  padding: 8px;
  border-radius: 28px;
}
.shot-frame--phone img { border-radius: 20px; }

/* Hero composition: tablet with a phone overlapping its bottom-right corner */
.hero-visual--shots { position: relative; padding: 0 40px 56px 0; }
.hero-visual--shots .shot-frame--tablet { width: 100%; }
.hero-visual--shots .shot-frame--phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 186px;
  z-index: 2;
  box-shadow: var(--shadow-1), 0 30px 60px -20px rgba(15,18,41,.85);
}
html.is-opening .hero-visual--shots .shot-frame--phone { opacity: 0; transform: translateY(var(--reveal-y)); animation: heroIn var(--dur-base) var(--ease) 620ms forwards; }
@media (max-width: 1023px) {
  .hero-visual--shots { padding: 0; }
  .hero-visual--shots .shot-frame--phone { display: none; }
}

/* Screen viewer: vertical tabs on the left, one active screen on the right */
.screen-viewer {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 32px;
  margin-top: 40px;
  align-items: start;
}
.screen-tabs { display: flex; flex-direction: column; gap: 6px; }
.screen-tab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 16px 18px 16px 20px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  color: var(--ink);
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.screen-tab:hover { background: var(--paper); border-color: var(--line); }
.screen-tab:active { transform: scale(.995); }
.screen-tab[aria-selected="true"] {
  background: var(--paper);
  border-color: var(--line);
  border-left-color: var(--yellow);
  box-shadow: var(--shadow-1);
}
.screen-tab-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.screen-tab-sub { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.screen-stage { position: relative; min-width: 0; }
.screen-panel { position: relative; padding: 0 0 48px 0; }
.screen-panel .shot-frame--phone {
  position: absolute;
  right: -12px;
  bottom: 0;
  width: 172px;
  z-index: 2;
}
.screen-panel:not([hidden]) > * { animation: shotIn var(--dur-base) var(--ease); }
.screen-panel:not([hidden]) > .shot-frame--phone { animation-delay: 60ms; animation-fill-mode: backwards; }
@keyframes shotIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .screen-panel:not([hidden]) > * { animation: none; }
  html.is-opening .hero-visual--shots .shot-frame--phone { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 1023px) {
  .screen-viewer { grid-template-columns: 1fr; gap: 20px; }
  .screen-tabs { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; scrollbar-width: thin; }
  .screen-tab { flex: 0 0 min(250px, 74vw); border-left: 1px solid transparent; border-bottom: 3px solid transparent; }
  .screen-tab[aria-selected="true"] { border-left-color: var(--line); border-bottom-color: var(--yellow); }
  .screen-panel { padding-bottom: 0; }
  .screen-panel .shot-frame--phone { display: none; }
}
@media (min-width: 1024px) {
  .hero:has(.hero-visual--shots) { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 40px; }
}

/* Base spec-row (was scoped to the home hero only) */
.spec-row { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 8px 0 0; padding: 0; list-style: none; }
.spec-row li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-2); white-space: nowrap; }
.spec-row li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); flex: none; }

/* =========================================================================
   Mock tablet screen (reveal pass, 2026-09-06) - a designed placeholder for
   products whose real screens do not exist yet (IM, AT, VMS plugins are
   not built). Sits inside the same .shot-frame--tablet as a real screenshot
   so the page structure is identical to PM/CMS; swap the figure's inner
   markup for an <img> when the screen arrives. Drawn in the device-mock
   language (spec motif 2): navy screen, SAP-mono identifiers, status chips,
   a detail pane. The mono [CONFIRM: screenshot] tag is for the owner.
   ========================================================================= */
.mock-screen {
  position: relative;
  aspect-ratio: 1600 / 795;
  background: var(--navy-900);
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  border-radius: 13px;
  color: var(--on-dark);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-dark);
  background: rgba(15,18,41,.6);
}
.mock-bar .device-appname { font-size: 13px; }
.mock-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
}
.mock-list { padding: 4px 18px; border-right: 1px solid var(--line-dark); overflow: hidden; }
.mock-list .device-row { padding: 10px 0; }
.mock-list .device-row-title { font-size: 13px; }
.mock-list .device-row-meta { font-size: 12px; }
.mock-list .sap-id { font-size: 12.5px; }
.mock-detail { padding: 16px 20px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mock-detail .sap-id { font-size: 13px; color: var(--on-dark); }
.mock-detail-title { font-size: 14px; font-weight: 600; color: var(--on-dark); margin: 0; }
.mock-fields { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12.5px; }
.mock-fields dt { color: var(--on-dark-3); }
.mock-fields dd { margin: 0; font-family: var(--font-mono); color: var(--on-dark-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-line { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); }
.mock-line--short { width: 55%; }
.mock-action {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding-inline: 16px;
  border-radius: var(--r-pill);
  background: var(--yellow);
  color: var(--navy-700);
  font-weight: 600;
  font-size: 13px;
}
.mock-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--on-dark-3);
  background: rgba(15,18,41,.7);
  border: 1px dashed rgba(250,200,60,.4);
  border-radius: var(--r-sm);
  padding: 4px 8px;
}
@media (max-width: 767px) {
  .mock-screen { aspect-ratio: auto; }
  .mock-body { grid-template-columns: 1fr; }
  .mock-list { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .mock-bar { flex-wrap: wrap; }
  .mock-tag { order: 3; flex-basis: 100%; margin-left: 0; text-align: left; }
}

/* =========================================================================
   Fonts: metric-matched fallbacks (reveal pass). The Google Fonts stylesheet
   is loaded non-blocking (layout.html: preload + media=print swap), so the
   first paint uses these local faces; size-adjust keeps line breaks close
   enough that the swap to Archivo / Plex does not shift layout.
   ========================================================================= */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial");
  font-weight: 500 700;
  size-adjust: 106%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Sans Fallback";
  src: local("Arial");
  font-weight: 400 600;
  size-adjust: 101%;
  ascent-override: 102%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Mono Fallback";
  src: local("Courier New");
  font-weight: 400 500;
  size-adjust: 100%;
  ascent-override: 102%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* ---- Print: keep the footer's contact details, drop navigation and asks. */
@media print {
  .site-footer { display: block !important; background: #fff; color: #000; padding: 24px 0 0; border-top: 1px solid #999; }
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 12px; padding-bottom: 12px; }
  .site-footer .footer-col:not(.footer-col--about), .site-footer .footer-social, .site-footer .logo { display: none; }
  .site-footer .footer-blurb, .site-footer .footer-col a, .site-footer .footer-legal-text, .site-footer .dc-contact-text { color: #000 !important; }
  .site-footer .footer-maps-link { display: none; }
  .site-footer .footer-legal { border-top: 0; padding-top: 0; }
  .hero-film, .hero-film video, .ground-dots::after, .cta-band { display: none !important; }
  .ground-navy { background: #fff !important; color: #000 !important; }
  .ground-navy h1, .ground-navy h2, .ground-navy h3, .ground-navy .lede, .ground-navy .eyebrow { color: #000 !important; }
  .hero-accent { color: #000 !important; }
  .reveal.reveal--pending { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   Reduced motion, globally and last. Every per-component rule above already
   opts out, but the cascade can be out-specificity'd by an entry rule (the
   hero sequence is one example). This guard makes the outcome certain:
   animations land on their final frame in 1ms, transitions are instant,
   loops run once. Nothing on the site is hidden behind motion.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* Compact product medallions shared with the Products overview and landing
   tiles. Square, on a white chip so the light medallion art reads on both the
   white mega panel and the dark mobile nav; contained, never cropped. */
.mega-col-head .product-menu-icon,
.product-menu-icon {
  display:inline-flex; flex:none; width:56px; height:56px;
  overflow:hidden; border-radius:12px; background:#fff;
}
.product-menu-icon img { display:block; width:100%; height:100%; object-fit:contain; }
#mobile-products .mobile-product-link { display:flex; align-items:center; gap:12px; }
#mobile-products .product-menu-icon { width:48px; height:48px; }

/* Matching product illustrations on the landing page. */
.tile-thumb.tile-thumb--product {
  width:132px; height:88px; border-radius:12px;
  background:#0F1229; box-shadow:none; overflow:hidden;
}
.tile-thumb--product img { object-fit:cover; filter:none; }

/* ---- page: pages-a.css ---- */
/* =========================================================================
   pages-a.css - page-specific styles for / (home) and /about/.
   Owner: Pages-A. Every selector is scoped under .page-home or .page-about
   (the body_class set by each page's front matter) - nothing here should
   leak onto other pages. Most Phase 1 additions (platform-scene, tiles,
   wordmark-wall, values-row) are generic components in site.css since they
   are single-instance but follow the same pattern as .designer/.device-
   family already living unscoped in pages-platform.css.
   ========================================================================= */

/* ---- Home hero: film sits full-bleed behind the copy, no right-column
   visual any more (the SAP/device diagram moved into the platform scene). */
.page-home .hero-copy { max-width: 640px; }

/* ---- Home "one case study" band: standard .photo + copy grid on a light
   ground (kept off navy deliberately - the platform scene right before it
   is already navy, and the ask/CTA right after it is always navy, so this
   stays light to avoid three dark sections running together). */
.page-home .case-band-copy { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.page-home .case-band-copy h3 { margin-top: 4px; }
.page-home .case-band-copy .btn-ghost { margin-top: 12px; }
.page-home .case-band-copy .case-fact { margin: 0; font-size: 15px; color: var(--ink-2); }

/* ---- Home tiles: composite/photo thumbnail sizing consistent with the
   product cards used elsewhere. */
.page-home .tile-thumb img { filter: none; }
.page-home .tile-thumb--composite { background: none; }
.page-home .tile-thumb--composite img { object-fit: contain; }

/* ---- About: vision and mission as two quiet columns on mist (reveal pass).
   The navy cards they replaced sat directly above the navy CTA band. */
.page-about .vision-mission { gap: 48px; }
.page-about .vision-mission h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; margin: 10px 0 12px; max-width: 18ch; }
.page-about .vision-mission p:not(.eyebrow) { color: var(--ink-2); }

/* About shares the landing page full-bleed film and navy gradient. */
.page-about .hero-section--film .hero-copy { max-width: 640px; }

/* ---- page: pages-b.css ---- */
/* =========================================================================
   pages-b.css - page-specific styles for the five product pages
   (Count My Stock, Asset Tagging, Inventory Management, Vehicle Management,
   Plant Maintenance). Every selector is scoped under .page-product so it
   never leaks onto shared components on other page types.
   Concatenated after site.css - relies on tokens defined there.
   ========================================================================= */

/* ---- Design-delta override: stat captions are plain body text, 14px,
   never mono (site.css .stat-cap predates this decision). ------------------ */
.page-product .stat-cap {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
}

/* =========================================================================
   Device mock extras: progress bar (Count My Stock) and offline sync tweaks.
   ========================================================================= */
.page-product .mock-progress { margin-top: 4px; }
.page-product .mock-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--on-dark-3);
  margin-bottom: 6px;
}
.page-product .mock-progress-row strong { color: var(--on-dark); font-weight: 600; }
.page-product .mock-progress-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.page-product .mock-progress-fill {
  height: 100%;
  background: var(--yellow);
  border-radius: var(--r-pill);
}

/* =========================================================================
   Mono chip row (Asset Tagging: tagging technology per asset class;
   Count My Stock: ERP integration marks).
   ========================================================================= */
.page-product .chip-mono-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.page-product .chip-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy-700);
  background: var(--navy-100);
  border-radius: var(--r-sm);
  padding: 4px 10px;
}

/* =========================================================================
   Yard map (Vehicle Management differentiator).
   ========================================================================= */
.page-product .yard-map-wrap {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: start;
}
.page-product .yard-map {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--navy-950);
  border-radius: var(--r-lg);
  padding: 20px;
  border: 1px solid var(--line-dark);
}
.page-product .yard-zone { display: flex; flex-direction: column; gap: 8px; }
.page-product .yard-zone-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-dark-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-product .yard-bays {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.page-product .yard-bay {
  aspect-ratio: 1;
  border-radius: 4px;
  border: 1px solid var(--line-dark);
  background: transparent;
}
.page-product .yard-bay--occupied { background: var(--navy-600); border-color: var(--navy-600); }
.page-product .yard-bay--live { background: var(--yellow); border-color: var(--yellow); }
.page-product .yard-bay--flag { background: rgba(240,106,90,.30); border-color: var(--bad); }

.page-product .yard-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.page-product .yard-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--on-dark-3);
}
.page-product .yard-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex: none;
  border: 1px solid var(--line-dark);
}
.page-product .yard-legend-swatch--occupied { background: var(--navy-600); }
.page-product .yard-legend-swatch--empty { background: transparent; }
.page-product .yard-legend-swatch--live { background: var(--yellow); border-color: var(--yellow); }
.page-product .yard-legend-swatch--flag { background: rgba(240,106,90,.30); border-color: var(--bad); }

.page-product .yard-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.page-product .yard-checklist { margin-top: 18px; }

@media (max-width: 1023px) {
  .page-product .yard-map-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .page-product .yard-bays { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Task list -> work instruction story (2026-09-04) ------------------- */
.page-pm .auth-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.page-pm .auth-copy { display: flex; flex-direction: column; gap: 14px; }
.page-pm .auth-copy h2 { max-width: 14ch; }
.page-pm .auth-copy .chapter-points { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.page-pm .auth-copy .chapter-points li { position: relative; padding-left: 20px; font-size: 15px; color: var(--ink-2); }
.page-pm .auth-copy .chapter-points li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.page-pm .auth-shot { margin: 0; max-width: 420px; justify-self: center; }
@media (max-width: 1023px) {
}

/* Execution rating card */
.page-pm .auth-card { background: var(--navy-950); border: 1px solid rgba(255,255,255,.10); border-radius: 22px; padding: 26px 28px; color: var(--on-dark-2); max-width: 420px; justify-self: center; width: 100%; box-shadow: var(--shadow-1), 0 0 60px rgba(250,200,60,.08); }
.page-pm .auth-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.page-pm .auth-head .sap-id { color: var(--on-dark); font-size: 13px; }
.page-pm .auth-score { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 16px; }
.page-pm .auth-num { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 1; color: var(--yellow); letter-spacing: -.03em; }
.page-pm .auth-num small { font-size: 26px; margin-left: 2px; }
.page-pm .auth-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); }
.page-pm .auth-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.page-pm .auth-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.page-pm .auth-rows li b { font-family: var(--font-mono); font-weight: 500; color: var(--on-dark); }
.page-pm .auth-foot { margin-top: 16px; font-size: 13.5px; color: var(--on-dark-2); }
.page-pm .auth-star { color: var(--yellow); }

/* ---- Count My Stock: real screens + shake-to-count demo (2026-09-04) ---- */
.page-cms .cms-hero { padding: 0 60px 70px 0; }
.page-cms .cms-hero-win { max-width: 460px; margin-inline: auto; }
.page-cms .cms-hero-settings { position: absolute; right: 0; bottom: 0; width: 200px; padding: 6px; border-radius: 16px; box-shadow: var(--shadow-1), 0 30px 60px -20px rgba(15,18,41,.85); z-index: 2; }
.page-cms .cms-hero-settings img { border-radius: 11px; }
html.is-opening .page-cms .cms-hero-settings { opacity: 0; transform: translateY(var(--reveal-y)); animation: heroIn var(--dur-base) var(--ease) 620ms forwards; }
@media (prefers-reduced-motion: reduce) { html.is-opening .page-cms .cms-hero-settings { animation: none; opacity: 1; transform: none; } }
.page-cms .cms-pair { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 36px; align-items: center; }
.page-cms .cms-pair--settings { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.page-cms .cms-settings-shot { margin: 0; padding: 8px; border-radius: 18px; }
.page-cms .cms-settings-shot img { border-radius: 12px; }
.page-cms .cms-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.page-cms .cms-points li { position: relative; padding-left: 22px; font-size: 16px; color: var(--ink-2); }
.page-cms .cms-points li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }

/* Shake demo */
.page-cms .shake-demo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; }
.page-cms .shake-phone {
  position: relative; width: 250px; margin-inline: auto; padding: 12px; border-radius: 34px;
  background: var(--navy-950); border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-1), 0 30px 60px -25px rgba(15,18,41,.8);
  transform-origin: 50% 80%;
}
.page-cms .shake-demo.is-shaking .shake-phone { animation: pointNod 560ms cubic-bezier(.3,.1,.2,1); }
@keyframes pointNod {
  0% { transform: rotate(0) translate(0, 0); }
  40% { transform: rotate(-7deg) translate(6px, -10px); }
  100% { transform: rotate(0) translate(0, 0); }
}
.page-cms .shake-hold {
  position: absolute; left: 236px; bottom: 176px; z-index: 3;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--navy-900); color: #fff; padding: 4px 9px; border-radius: 999px; opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.page-cms .shake-demo.is-holding .shake-hold { opacity: 1; }
.page-cms .shake-demo.is-holding .shake-tally { box-shadow: 0 0 0 6px rgba(250,200,60,.35), 0 10px 30px -10px rgba(250,200,60,.9); }
.page-cms .shake-demo.is-holding .shake-tally::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(250,200,60,.5); animation: holdRing 1.4s var(--ease) infinite; }
@keyframes holdRing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }
.page-cms .shake-screen { position: relative; background: #fff; border-radius: 24px; padding: 0 0 24px; overflow: hidden; font-family: var(--font-body); color: #1b2040; min-height: 420px; }
.page-cms .shake-top { display: flex; align-items: center; gap: 10px; background: #112a52; color: #fff; padding: 12px 14px; font-weight: 600; font-size: 14px; }
.page-cms .shake-brand { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.page-cms .shake-brand::after { content: '.'; color: var(--yellow); }
.page-cms .shake-title { font-size: 14px; font-weight: 600; margin: 18px 16px 10px; }
.page-cms .shake-chip { display: inline-block; margin: 0 16px 14px; background: #112a52; color: #fff; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 6px; }
.page-cms .shake-field { margin: 0 16px 10px; border: 1px solid #cfd3e0; border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.page-cms .shake-label { font-size: 12px; color: #6a6f8e; }
.page-cms .shake-val { font-size: 13px; color: #1b2040; }
.page-cms .shake-submit { margin: 8px 16px 0; background: #e4e6ee; color: #8a8fa8; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 10px; border-radius: 4px; }
.page-cms .shake-tally {
  position: absolute; right: -34px; bottom: 34px; width: 120px; height: 120px; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 10px 30px -10px rgba(250,200,60,.9);
  display: grid; place-items: center;
}
.page-cms .shake-count {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #1b2040;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(27,32,64,.25);
}
.page-cms .shake-count.is-pop { animation: tallyPop var(--dur-base) var(--ease); }
@keyframes tallyPop { 0% { transform: translateY(-50%) scale(1); } 40% { transform: translateY(-50%) scale(1.35); background: #fff3c4; } 100% { transform: translateY(-50%) scale(1); } }
.page-cms .shake-plus { position: absolute; left: 68px; top: 38px; font-size: 20px; font-weight: 700; color: #1b2040; }
.page-cms .shake-minus { position: absolute; left: 6px; top: 86px; font-size: 18px; color: #1b2040; opacity: .6; }
.page-cms .shake-bump { position: absolute; right: 30px; bottom: 150px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-700); opacity: 0; pointer-events: none; }
.page-cms .shake-demo.is-counted .shake-bump { animation: bumpUp var(--dur-slow) var(--ease); }
@keyframes bumpUp { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }
.page-cms .shake-speech {
  position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: var(--navy-900); color: #fff; font-family: var(--font-mono); font-size: 13px; white-space: nowrap;
  box-shadow: var(--shadow-1); opacity: .0; transition: opacity var(--dur-fast) var(--ease);
}
.page-cms .shake-demo { position: relative; }
.page-cms .shake-demo .shake-speech { left: 150px; bottom: 6px; transform: none; }
.page-cms .shake-demo.is-counted .shake-speech { opacity: 1; }
.page-cms .shake-demo.is-holding .shake-speech { opacity: 1; }
.page-cms .shake-speech-icon { color: var(--yellow); }
.page-cms .shake-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.page-cms .shake-notes li { position: relative; padding-left: 22px; font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.page-cms .shake-notes li b { color: var(--ink); font-weight: 600; }
.page-cms .shake-notes li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
@media (prefers-reduced-motion: reduce) {
  .page-cms .shake-demo.is-shaking .shake-phone, .page-cms .shake-count.is-pop, .page-cms .shake-demo.is-counted .shake-bump, .page-cms .shake-demo.is-holding .shake-tally::after { animation: none; }
  .page-cms .shake-speech { opacity: 1; }
}
@media (max-width: 1023px) {
  .page-cms .cms-hero { padding: 0; }
  .page-cms .cms-hero-settings { display: none; }
  .page-cms .cms-pair, .page-cms .cms-pair--settings, .page-cms .shake-demo { grid-template-columns: 1fr; }
  .page-cms .shake-demo .shake-speech { position: static; margin: 14px auto 0; display: inline-flex; }
  .page-cms .shake-hold { display: none; }
  .page-cms .shake-phone { margin-bottom: 8px; }
}

/* ---- Measured on every job (recorded-by-default facts) ------------------ */
.page-pm .measured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.page-pm .measured-item { padding-top: 16px; border-top: 1px solid var(--line); }
.page-pm .measured-label {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-pm .measured-item p:not(.measured-label) { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.page-pm .measured-foot { margin: 32px 0 0; font-size: 14.5px; color: var(--muted); }
@media (max-width: 1023px) {
  .page-pm .measured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .page-pm .measured-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- PM execution rating section now sits on navy (cadence fix, reveal pass) -- */
.page-pm #execution-rating .chapter-points li { color: var(--on-dark-2); }
.page-pm #execution-rating .auth-card { background: var(--navy-950); }
.page-pm .auth-copy .lede-secondary { font-size: 15.5px; color: var(--on-dark-3); max-width: 58ch; }
.page-pm .auth-legend { margin: 4px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--on-dark-3); }

/* ---- The baseline: section dwell strip (2026-09-14) ---------------------- */
.page-pm .baseline-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.page-pm .baseline-copy { display: flex; flex-direction: column; gap: 14px; }
.page-pm .baseline-visual { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.page-pm .dwell-strip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px 14px;
}
.page-pm .dwell-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.page-pm .dwell-header-v { color: var(--ink); font-weight: 500; }
.page-pm .dwell-header-usual { color: var(--ink); }
.page-pm .dwell-header-planned { color: var(--navy-700); }
.page-pm .dwell-header-slack { margin-left: auto; }
.page-pm .dwell-svg-mount { min-height: 190px; }
.page-pm .dwell-svg-mount svg { display: block; width: 100%; height: auto; overflow: visible; }
.page-pm .dwell-svg-mount text {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}
.page-pm .dwell-svg-mount .dwell-label { font-family: var(--font-body); font-size: 12.5px; font-variant-numeric: normal; fill: var(--ink-2); }
.page-pm .dwell-svg-mount .dwell-median { fill: var(--ink); font-weight: 500; }
.page-pm .dwell-svg-mount .dwell-note { fill: var(--muted); }
.page-pm .dwell-caption { margin: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.page-pm .baseline-foot { margin: 28px 0 0; font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 1023px) {
  .page-pm .baseline-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 639px) {
  .page-pm .dwell-header-slack { margin-left: 0; }
  .page-pm .dwell-strip { padding: 14px 14px 12px; }
}

/* Real materials management screens in a rugged scanner shell. */
.page-im .im-scanner { width:min(100%,290px); margin:0 auto; padding:12px 14px 10px; border:3px solid #47505b; border-radius:30px; background:linear-gradient(110deg,#303944,#111820 45%,#27313b); box-shadow:inset 0 0 0 4px #10151b,0 20px 45px rgba(0,0,0,.22); position:relative; }
.page-im .im-scanner::before { content:''; position:absolute; width:5px; height:52px; background:#FAC83C; right:-6px; top:100px; border-radius:0 4px 4px 0; }
.page-im .im-scanner-head { height:24px; display:flex; align-items:center; justify-content:center; gap:14px; }
.page-im .im-scanner-head span { width:62px; height:5px; border-radius:6px; background:#080c12; }
.page-im .im-scanner-head i { width:6px; height:6px; border-radius:50%; background:#668291; }
.page-im .im-scanner-screen { overflow:hidden; border:2px solid #080d14; border-radius:7px; background:#fff; }
.page-im .im-scanner-screen img { display:block; width:100%; height:auto; filter:none; }
.page-im .im-screen--binning { aspect-ratio:473 / 946; position:relative; }
.page-im .im-screen--binning img { position:absolute; top:-4.02%; left:0; width:100%; max-width:none; }
.page-im .im-scanner-base { height:31px; display:flex; align-items:center; justify-content:center; gap:16px; }
.page-im .im-scanner-base span { width:27px; height:5px; background:#414c57; border-radius:4px; }
.page-im .im-scanner-base b { width:33px; height:12px; border:1px solid #75652d; border-radius:5px; background:#242a30; }
.page-im .screen-stage { min-width:0; display:flex; justify-content:center; align-items:flex-start; padding:24px; }
.page-im .screen-panel { width:100%; }
.page-im .screen-panel[hidden] { display:none; }
@media(max-width:600px) { .page-im .screen-stage { padding:18px 8px; } .page-im .hero-visual { min-width:0; } }

/* ---- page: pages-c.css ---- */
/* =========================================================================
   Pages-C: /industries/ - one page, five tabs (Phase 1 "less is more" cut).
   Owner: Pages-C. Selectors scoped to .page-industries only.
   ========================================================================= */

/* ---- Hero: right-column visual cluster (kept from the previous overview
   hero; the hero background is now a duotoned film, see .hero-film in
   site.css, applied via .photo.photo--bg on the hero markup itself). ------ */
.page-industries .industry-cluster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 20px;
}
.page-industries .industry-cluster > li:nth-child(4) {
  margin-top: 44px;
}
.page-industries .industry-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  transition: transform var(--motion-fast), border-color var(--motion-fast);
}
.page-industries .industry-tile:hover,
.page-industries .industry-tile:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .28);
}
.page-industries .industry-tile-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.page-industries .industry-tile-name {
  font-weight: 500;
  font-size: 16px;
  color: var(--on-dark);
}
.page-industries .industry-tile-tagline {
  font-size: 13px;
  line-height: 1.35;
  color: var(--on-dark-3);
}
@media (max-width: 1023px) {
  .page-industries .industry-cluster {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 14px;
  }
  .page-industries .industry-cluster > li:nth-child(4) {
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .page-industries .industry-cluster { display: none; }
}

/* ---- Tab panel layout: copy left, 16:9 photo right ---------------------- */
.page-industries .industry-panel-grid { align-items: center; }
.page-industries .industry-photo {
  aspect-ratio: 16 / 9;
  min-height: 0;
}
.page-industries .industry-note {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 15px;
}
.page-industries .fit-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 0;
}
.page-industries .fit-list li { font-size: 15px; color: var(--ink-2); }
.page-industries .fit-list a {
  font-weight: 600;
  color: var(--navy-700);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
.page-industries .fit-list a:hover { text-decoration-color: var(--navy-700); }
@media (max-width: 899px) {
  .page-industries .industry-panel-grid { grid-template-columns: 1fr; }
  .page-industries .industry-photo { order: -1; }
}

/* ---- page: pages-customers.css ---- */
/* =========================================================================
   pages-customers.css - customer wall on /about/ (the standalone /customers/
   page was folded into About; /customers/ is now a redirect stub). Selectors
   scoped under .page-about. Reuses .wordmark-wall / .wordmark-cell (site.css)
   but overrides the shared flat, stretch-to-fill hairline grid with a compact,
   uniform tile grid that matches the site's .card treatment.
   (Worth a `git mv` to pages-about.css when convenient - content is bundled
   regardless of filename.)
   ========================================================================= */

.page-about .wall-group { margin-bottom: 32px; }
.page-about .wall-group:last-child { margin-bottom: 0; }
.page-about .wall-group > .eyebrow { margin-bottom: 14px; }

/* Compact, uniform customer tiles. A fixed-column grid keeps every cell the
   same width, so a partial last row no longer stretches its few names across
   the whole row. Border + radius + hover lift match .card for consistency. */
.page-about .wordmark-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 0;
}
.page-about .wordmark-cell {
  flex: none;
  min-height: 62px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink-2);
  text-align: center;
  font-size: 14px;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast),
              border-color var(--motion-fast), color var(--motion-fast);
}
.page-about .wordmark-wall .wordmark-cell:hover {
  color: var(--ink);
  background: var(--paper);
  border-color: #D3D7E6;
  transform: translateY(-3px);
  box-shadow: var(--shadow-1);
}
@media (max-width: 1023px) {
  .page-about .wordmark-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 639px) {
  .page-about .wordmark-wall { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .page-about .wordmark-cell { min-height: 56px; padding: 10px 12px; }
}

/* Deployment intro: two columns - copy left, globe illustration right. The
   globe PNG has a white ground that blends into .ground-paper, so it carries
   no frame, border, card or shadow. Kept modest in size so it supports the
   copy without pushing the customer list down. On mobile the copy stacks
   first and the globe second (natural DOM order), then the customer list. */
.page-about .deploy-intro {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.page-about .deploy-intro-copy { display: flex; flex-direction: column; gap: 16px; }
.page-about .deploy-intro-copy h2,
.page-about .deploy-intro-copy .lede { margin: 0; }
.page-about .deploy-intro-globe img {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-inline: auto;
}
.page-about .deploy-select {
  margin: 0 0 22px;
  color: var(--ink-2);
  font-size: 15px;
}
@media (max-width: 767px) {
  .page-about .deploy-intro { grid-template-columns: 1fr; gap: 20px; }
  .page-about .deploy-intro-globe img { max-width: 360px; }
}

/* About hero film: motion + full colour were requested for this banner, so
   the hero image departs from the site's default duotone - the mining-aerial
   clip plays in real colour inside the rounded photo frame. site.js swaps the
   poster for an autoplaying muted loop on capable devices; phones, reduced
   motion and Save-Data keep the colour poster. Scoped to the About hero only,
   so every other .photo keeps the house duotone treatment. */
.page-about .hero .hero-photo--film img,
.page-about .hero .hero-photo--film video {
  filter: saturate(1.06) contrast(1.02);
}
.page-about .hero .hero-photo--film:has(img)::before,
.page-about .hero .hero-photo--film:has(video)::before { background: none; opacity: 0; }
.page-about .hero .hero-photo--film::after { display: none; }

/* ---- page: pages-d.css ---- */
/* =========================================================================
   pages-d.css
   Page-specific styles for /products/, /contact/, /privacy-policy/,
   /terms-of-use/ and /404.html (Pages-D). Every selector is scoped under
   the page's body_class so this file cannot leak into other pages.

   NOTE (see final report): as of this writing, src/layout.html links only
   /css/site.css and build.py copies src/css/** as a static tree without
   concatenating or linking src/css/pages/*.css into the page <head>. This
   file therefore has NO EFFECT on the built output until the Foundation
   agent wires up that concatenation/link. Written here per instructions
   so it is ready the moment that lands.
   ========================================================================= */

/* -------------------------------------------------------------------------
   /products/ - capability fact strip
   ------------------------------------------------------------------------- */
.page-products .fact-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
.page-products .fact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.page-products .fact-item .icon-tile {
  width: 36px;
  height: 36px;
  flex: none;
}
.page-products .fact-item .icon-tile .icon { width: 18px; height: 18px; }
.page-products .fact-text { display: flex; flex-direction: column; gap: 3px; }
.page-products .fact-text strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.page-products .fact-text small {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
@media (max-width: 1023px) {
  .page-products .fact-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 639px) {
  .page-products .fact-strip { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
}

/* -------------------------------------------------------------------------
   /products/ - five product chapters (alternating visual/copy band per
   product). "Less is more" cut: replaces the five-card grid and the
   "one platform" split with this. Visual column reuses the generic
   .composite-wrap/.composite illustration, or .photo for VMS's yard shot.
   ------------------------------------------------------------------------- */
.page-products .chapter-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 20px 48px;
  align-items: center;
}
.page-products .chapter-grid--r { grid-template-columns: 1fr minmax(280px, 420px); }
.page-products .chapter-grid--r .chapter-visual { order: 2; }
.page-products .chapter-grid--r .chapter-copy { order: 1; }
.page-products .chapter-copy > p { margin-bottom: 18px; }
.page-products .chapter-copy .checklist { margin-bottom: 24px; }
.page-products .chapter-visual .photo { min-height: 260px; }
@media (max-width: 1023px) {
  .page-products .chapter-grid,
  .page-products .chapter-grid--r { grid-template-columns: 1fr; }
  .page-products .chapter-grid .chapter-visual,
  .page-products .chapter-grid--r .chapter-visual {
    order: -1;
    max-width: 360px;
    margin-inline: auto;
  }
}

/* -------------------------------------------------------------------------
   /contact/ - two-column layout: form card + aside
   ------------------------------------------------------------------------- */
.page-contact .contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: start;
}
.page-contact .contact-form-card h2 { margin-bottom: 22px; }

/* ---- Booking card (above the form) --------------------------------------- */
.page-contact .booking {
  margin-bottom: 24px;
  padding: 24px;
  background: var(--navy-800);
  border-radius: var(--r-md);
  color: var(--on-dark-2);
}
.page-contact .booking h2 { color: var(--on-dark); margin: 0 0 8px; font-size: var(--fs-h3); }
.page-contact .booking p { margin: 0 0 18px; }
.page-contact .booking-embed { display: flex; flex-direction: column; gap: 10px; }
.page-contact .contact-aside { display: flex; flex-direction: column; gap: 24px; }
.page-contact .contact-aside h3 { margin-bottom: 18px; }
@media (max-width: 899px) {
  .page-contact .contact-grid { grid-template-columns: 1fr; }
}

/* ---- Form controls ------------------------------------------------------ */
.page-contact form { display: flex; flex-direction: column; gap: 18px; }
.page-contact .form-row { display: flex; gap: 16px; }
.page-contact .form-row .field { flex: 1 1 0; }
@media (max-width: 479px) {
  .page-contact .form-row { flex-direction: column; gap: 18px; }
}
.page-contact .field { display: flex; flex-direction: column; gap: 8px; }
.page-contact label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.page-contact .req-mark { font-weight: 400; color: var(--muted); font-size: 13px; }
.page-contact input[type="text"],
.page-contact input[type="email"],
.page-contact input[type="tel"],
.page-contact select,
.page-contact textarea {
  height: 48px;
  padding-inline: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 16px;
  transition: border-color var(--motion-fast);
}
.page-contact textarea { height: auto; padding-block: 12px; resize: vertical; }
.page-contact input:hover,
.page-contact select:hover,
.page-contact textarea:hover { border-color: var(--muted); }
.page-contact input:focus-visible,
.page-contact select:focus-visible,
.page-contact textarea:focus-visible {
  border-color: var(--navy-700);
  box-shadow: 0 0 0 4px rgba(250,200,60,.20);
}
/* :user-invalid (not :invalid) so empty required fields don't show red
   before the visitor has interacted with or attempted to submit the form. */
.page-contact input:user-invalid,
.page-contact select:user-invalid,
.page-contact textarea:user-invalid { border-color: var(--bad); }

.page-contact .field--consent { margin-top: 4px; }
.page-contact .consent-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  min-height: 44px;
  cursor: pointer;
}
.page-contact .consent-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--navy-700);
}
.page-contact .field-error {
  font-size: 13px;
  color: var(--bad);
  margin: 0;
}
.page-contact .form-success {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px;
}
.page-contact .form-success h3 { margin-bottom: 8px; }
.page-contact .form-success p { margin: 0; color: var(--ink-2); }
.page-contact .form-error {
  background: rgba(240,106,90,.08);
  border: 1px solid var(--bad);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink);
}
.page-contact button[type="submit"] { align-self: flex-start; margin-top: 4px; }

/* ---- Contact details list ------------------------------------------------ */
.page-contact .contact-details-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.page-contact .contact-details-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; }
.page-contact .contact-details-list .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--yellow); }
.page-contact .contact-details-list a { text-decoration: none; }
.page-contact .contact-details-list a:hover { text-decoration: underline; }
.page-contact .external-link { display: inline-flex; align-items: center; gap: 8px; }
.page-contact .external-link .icon { width: 15px; height: 15px; }

/* Links on the navy "Contact details" card render via .btn-ghost's default
   navy-on-light colour (this card isn't inside a .ground-navy section, so
   the .ground-navy .btn-ghost override never applies) - near-invisible on
   the dark card. Match the footer's maps link: yellow, underline on hover,
   white focus ring on dark. */
.page-contact .card--dark a {
  color: var(--yellow);
}
.page-contact .card--dark a:hover { text-decoration: underline; }
.page-contact .card--dark a:focus-visible { outline-color: #fff; }

/* ---- Vertical steps ("What happens next") -------------------------------- */
.page-contact .steps-vertical { display: flex; flex-direction: column; gap: 24px; }
.page-contact .steps-vertical li {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.page-contact .steps-vertical li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 40px;
  left: 19px;
  bottom: -24px;
  border-left: 1px dashed rgba(250,200,60,.5);
}
.page-contact .steps-vertical .step-num { flex: none; width: 40px; height: 40px; }
.page-contact .steps-vertical h4 { margin: 0 0 4px; }
.page-contact .steps-vertical p { margin: 0; color: var(--ink-2); font-size: 14.5px; }

/* -------------------------------------------------------------------------
   Legal pages (/privacy-policy/, /terms-of-use/)
   ------------------------------------------------------------------------- */
.page-legal .updated {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 32px;
}

/* -------------------------------------------------------------------------
   /404.html
   ------------------------------------------------------------------------- */
.page-404 .not-found-section { padding-block: clamp(80px, 14vw, 140px); }
.page-404 .not-found-actions { margin-bottom: 20px; }
.page-404 .btn-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- page: pages-home.css ---- */
/* =========================================================================
   pages-home.css - /(home). Scoped under .page-home.
   ========================================================================= */

/* Hero banner: a slow, continuous Ken Burns drift so the banner never reads as
   a static image. It animates the film's media (both the <video> and the
   poster <img>), so there is motion on first paint, while the video is still
   loading, and on devices that only ever show the poster. The one-time filmIn
   entrance (site.css) animates the .hero-film container, a different element,
   so the two compose without fighting. Disabled under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .page-home .hero-film img,
  .page-home .hero-film video {
    animation: homeHeroKenBurns 26s var(--ease-in-out) infinite alternate;
    transform-origin: 62% 45%;
    will-change: transform;
  }
}
@keyframes homeHeroKenBurns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12) translate3d(-1.6%, -1%, 0); }
}

/* Product tiles: show the whole circular product medallion, not a cropped
   circle. The medallion art (products/*-medallion.webp) is square, transparent
   and built for a white backdrop, so the thumb is a large square with no crop,
   no ring and no fill - it sits directly on the light tile.
   The medallion fills most of its 1200px frame, so prominence comes from a
   bigger thumb rather than a tighter crop: at 294px it reads ~75% larger than
   before. Five no longer fit in one row at that size, so the tiles centre and
   wrap (3 + 2) instead of shrinking. */
.page-home .tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px 24px;
}
/* Frameless: the medallion carries the tile, so drop the card border, radius
   and padding - just the art and its label sit on the light section. */
.page-home .tiles > .tile {
  flex: 0 1 300px;
  max-width: 320px;
  padding: 0;
  border: none;
  border-radius: 0;
}
.page-home .tiles > .tile:hover,
.page-home .tiles > .tile:focus-visible {
  box-shadow: none;
  border-color: transparent;
  transform: translateY(-4px);
}
/* Matched to the products-page medallion size (264px). */
.page-home .tile-thumb--product {
  width: 264px;
  height: 264px;
  max-width: 100%;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.page-home .tile-thumb--product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 639px) {
  .page-home .tiles > .tile { flex-basis: 264px; }
  .page-home .tile-thumb--product { width: 264px; height: 264px; }
}

/* ---- page: pages-platform.css ---- */
/* =========================================================================
   pages-platform.css
   Page-specific styles for /platform/ (.page-platform), the home hook
   section that reuses a compact Flow Designer mock (.page-home
   .platform-hook), and the small "Explore the platform" CTA appended to
   /how-it-works/'s platform strip (.page-how). Every selector is scoped
   under a body_class so this file cannot leak into other pages. Shared,
   already-generic components (.card, .feature, .checklist, .chip, .device,
   .sync-line/.packet, .grid-2/3/4, .stat, .steps, .cta-band, .faq) are
   reused as-is from site.css wherever the design allows it.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero fact strip (four items)
   ------------------------------------------------------------------------- */
.page-platform .fact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.page-platform .fact-item { display: flex; align-items: flex-start; gap: 12px; }
.page-platform .fact-item .icon-tile { width: 40px; height: 40px; flex: none; }
.page-platform .fact-text { display: flex; flex-direction: column; gap: 3px; }
.page-platform .fact-text strong { font-size: 14.5px; font-weight: 600; color: var(--on-dark); }
.page-platform .fact-text small { font-size: 13px; color: var(--on-dark-3); line-height: 1.4; }
@media (max-width: 1023px) {
  .page-platform .fact-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .page-platform .fact-strip { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Hero layout: full-width copy block, signature mock beneath it
   ------------------------------------------------------------------------- */
.page-platform .hero-copy { max-width: 680px; margin-inline: auto; text-align: center; gap: 20px; }
.page-platform .hero-copy .lede { max-width: 620px; margin-inline: auto; }
.page-platform .hero-actions { justify-content: center; }

/* =========================================================================
   Mock A - Flow Designer (.designer)
   ========================================================================= */
.designer {
  background: var(--navy-950);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-1), 0 0 60px rgba(250,200,60,.08);
  overflow: hidden;
}
.designer-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-dark);
  background: rgba(255,255,255,.02);
}
.designer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-dark); flex: none; }
.designer-dot:nth-child(1) { background: var(--bad); opacity: .6; }
.designer-dot:nth-child(2) { background: var(--warn); opacity: .6; }
.designer-dot:nth-child(3) { background: var(--ok); opacity: .6; }
.designer-url {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-dark-3);
  background: rgba(255,255,255,.05);
  border-radius: var(--r-pill);
  padding: 5px 14px;
}
.designer-canvas {
  position: relative;
  padding: 32px 28px;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  overflow: hidden;
}
.designer-nodes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  grid-template-rows: auto auto;
  gap: 40px 24px;
}
.designer-node {
  position: relative;
  z-index: 1;
  background: var(--navy-800);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.designer-node:not(.designer-node--ghost) {
  opacity: 0;
  transform: translateY(10px);
}
html.is-loaded .designer-node:not(.designer-node--ghost) {
  animation: designerNodeIn var(--dur-base) var(--ease) forwards;
}
.designer-node:nth-child(1) { animation-delay: 200ms; }
.designer-node:nth-child(2) { animation-delay: 380ms; }
.designer-node:nth-child(3) { animation-delay: 560ms; }
.designer-node:nth-child(4) { animation-delay: 740ms; }
.designer-node:nth-child(5) { animation-delay: 920ms; }
@keyframes designerNodeIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .designer-node:not(.designer-node--ghost) { opacity: 1; transform: none; animation: none; }
}
.designer-node .icon-tile { width: 28px; height: 28px; }
.designer-node .icon-tile .icon { width: 14px; height: 14px; }
.designer-node-title { font-size: 13px; font-weight: 600; color: var(--on-dark); }
.designer-node-bind {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-dark-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.designer-node-bind::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--yellow);
  flex: none;
}
.designer-node .chip { align-self: flex-start; }
.designer-node--ghost { border-style: dashed; opacity: 0; transform: translateY(10px); }
html.is-loaded .designer-node--ghost.is-in {
  animation: designerGhostIn var(--dur-base) var(--ease) forwards;
}
@keyframes designerGhostIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .designer-node--ghost { opacity: 1; transform: none; }
}

/* The "QM hold" connector is added by the copilot, later than the initial
   staggered draw - it must not join the global auto-draw at 900ms. */
.sync-line.designer-line--ghost { opacity: 0; animation: none !important; }
.sync-line.designer-line--ghost.is-in {
  animation: drawLine var(--dur-slow) var(--ease) forwards !important;
}
@media (prefers-reduced-motion: reduce) {
  .sync-line.designer-line--ghost { opacity: 1; stroke-dashoffset: 0; }
}

.designer-copilot {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(250,200,60,.08);
  border: 1px solid rgba(250,200,60,.28);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--on-dark-2);
  min-height: 20px;
}
.designer-copilot .icon { color: var(--yellow); width: 16px; height: 16px; flex: none; }
.designer-caret {
  display: inline-block;
  width: 2px;
  height: 13px;
  background: var(--yellow);
  margin-left: 1px;
  animation: caretBlink 900ms step-end infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .designer-caret { animation: none; } }

@media (max-width: 899px) {
  .designer-nodes { grid-template-columns: 1fr; gap: 16px; }
  .designer-canvas .sync-lines { display: none; }
}

/* =========================================================================
   Mock B - Device family (.device-family)
   ========================================================================= */
.device-family-wrap { margin-top: 48px; }
.device-family {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 32px;
}
.df-frame { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.df-caption { font-family: var(--font-mono); font-size: 12px; color: var(--on-dark-3); }
.df-frame--browser .device { width: 320px; max-width: 100%; }
.df-frame--browser .device-screen { height: 200px; }
.df-frame--tablet .handset--tablet.device { max-width: 200px; }
.df-frame--phone .handset.device:not(.handset--tablet) { max-width: 120px; padding: 10px 10px 16px; }
.df-frame--rugged .handset.device:not(.handset--tablet) { max-width: 110px; padding: 9px 9px 15px; border-radius: 20px; }
.df-frame--rugged .handset.device::before { width: 34px; }
.df-frame--rugged .handset.device::after { width: 46px; }
.df-frame--phone .df-label,
.df-frame--rugged .df-label { font-size: 12px; }
@media (max-width: 767px) {
  .device-family { gap: 24px 16px; }
}

/* =========================================================================
   Mock C - Sync pipeline (.sync-pipeline)
   ========================================================================= */
/* Self-contained navy panel, like .device/.designer - the dashed yellow
   connector lines and the toggle's on-dark styling are only ever correct on
   navy, so the mock carries its own dark ground rather than depending on
   the section it sits in (here, ground-mist). */
.sync-pipeline {
  max-width: 880px;
  margin-inline: auto;
  background: var(--navy-950);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-1), 0 0 60px rgba(250,200,60,.08);
  padding: 40px 32px 32px;
}
.sync-pipeline-row {
  position: relative;
  display: grid;
  grid-template-columns: 280px 1fr 1fr 1fr;
  align-items: center;
  gap: 8px;
  min-height: 180px;
}
.sync-pipeline .sync-lines { z-index: 0; }
.sp-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.sp-node--device { align-items: stretch; }
.sp-node--device .device { width: 100%; max-width: 280px; margin-inline: auto; }
.sync-pipeline .sap-id, .sync-pipeline .device-row-id { white-space: nowrap; }
.sp-node--device .device-screen { padding: 12px; }
.sp-topbar-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sp-queue-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-dark-2);
  background: rgba(255,255,255,.07);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}
.sync-pipeline .sync-node {
  width: 76px;
  height: 76px;
  margin-bottom: 0;
  box-shadow: 0 0 0 8px rgba(250,200,60,.08);
}
.sync-pipeline .sync-node-name { font-size: 13px; }
.sync-pipeline .device-row { padding: 8px 0; }
.sync-pipeline .device-row-title { font-size: 12.5px; }
.sync-pipeline .device-row-meta { font-size: 12px; }

.sp-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 28px auto 0;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-dark);
  background: rgba(255,255,255,.04);
  color: var(--on-dark);
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.sp-toggle::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.sp-toggle:hover { background: rgba(255,255,255,.08); }
.sp-toggle[aria-pressed="true"] { border-color: rgba(240,106,90,.5); background: rgba(240,106,90,.10); }
.sp-toggle[aria-pressed="true"]::before { background: var(--bad); }

@media (max-width: 767px) {
  .sync-pipeline-row { grid-template-columns: 1fr; justify-items: center; gap: 32px; }
  .sync-pipeline .sync-lines { display: none; }
}

/* =========================================================================
   Section 5 - SAP checklist, two columns
   ========================================================================= */
.page-platform .checklist--cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 24px;
}
@media (max-width: 639px) {
  .page-platform .checklist--cols { grid-template-columns: 1fr; }
}

/* =========================================================================
   Section 8 - IT spec sheet
   ========================================================================= */
.spec-sheet {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 4px 24px;
}
.spec-sheet .spec-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.spec-sheet .spec-row:first-child { border-top: none; }
.spec-label {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.spec-label .icon { width: 15px; height: 15px; color: var(--navy-700); flex: none; }
.spec-value { font-size: 14.5px; color: var(--ink); margin: 0; }
@media (max-width: 639px) {
  .spec-sheet .spec-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- Fable's pass (2026-09-04): devices as a stage --------------------- */
.page-platform .stage--devices { padding-bottom: 28px; }
.page-platform .stage--devices .device-family {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: nowrap;
  position: relative;
  z-index: 1;
}
.page-platform .df-frame { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.page-platform .df-caption { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-3); }
.page-platform .df-frame--tablet .handset--tablet.device { width: 300px; max-width: 100%; }
.page-platform .df-frame--phone .handset.device:not(.handset--tablet) { width: 200px; max-width: 100%; }
.page-platform .df-frame--phone .device-row-title { display: none; }
.page-platform .df-frame--phone .chip { display: none; }
.page-platform .df-frame--phone .device-row { padding: 12px 0; }
.page-platform .df-facts {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  margin: 36px 0 0; padding: 22px 0 0; list-style: none;
  border-top: 1px solid rgba(255,255,255,.10);
}
.page-platform .df-facts li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-2); }
.page-platform .df-facts li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.page-platform .cta-proof { margin-top: 18px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--on-dark-3); }
.page-platform .cta-proof a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) {
  .page-platform .stage--devices .device-family { flex-wrap: wrap; align-items: flex-end; }
}
@media (max-width: 767px) {
  .page-platform .df-frame--tablet { display: none; }
}
.page-platform .df-frame--browser .device-screen, .page-platform .df-web { height: auto; }

/* =========================================================================
   Platform rebuilt around the real Flow Designer (2026-09-04)
   ========================================================================= */
.page-platform .hero-section--platform { padding-bottom: 0; }
.page-platform .hero-copy--center { max-width: 820px; margin-inline: auto; text-align: center; align-items: center; }
.page-platform .hero-copy--center .lede { max-width: 66ch; margin-inline: auto; }
.page-platform .hero-copy--center .hero-actions { justify-content: center; }
.page-platform .spec-row--center { justify-content: center; border-top: 0; padding-top: 4px; max-width: none; }
.page-platform .hero-shot { position: relative; z-index: 1; margin-top: 44px; padding-bottom: clamp(48px, 6vw, 80px); }
.page-platform .statement { padding-top: var(--section-pad); }
.page-platform .statement h2 { max-width: 24ch; }
.page-platform .statement .lede { margin-top: 18px; max-width: 66ch; }

/* Window frame for designer screenshots */
.win {
  margin: 0;
  background: var(--navy-950);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-1), 0 40px 90px -40px rgba(15,18,41,.75);
}
.win-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; }
.win-bar > span:not(.win-title) { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.win-bar > span:nth-child(1) { background: #f06a5a; } .win-bar > span:nth-child(2) { background: #f2a93b; } .win-bar > span:nth-child(3) { background: #3dbe78; }
.win-title { margin-left: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--on-dark-3); }
.win img { display: block; width: 100%; height: auto; }
.win--hero { max-width: 1120px; margin-inline: auto; }

/* Chapters: copy + one real screen, alternating */
.page-platform .chapter { padding-block: clamp(48px, 6vw, 80px); }
.page-platform .chapter + .chapter { border-top: 1px solid var(--line); }
.page-platform .chapter-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.page-platform .chapter--flip .chapter-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); }
.page-platform .chapter--flip .chapter-copy { order: 2; }
.page-platform .chapter-copy { display: flex; flex-direction: column; gap: 14px; }
.page-platform .chapter-copy h2 { max-width: 16ch; }
.page-platform .chapter-copy .lede { font-size: 17px; }
.page-platform .chapter-points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.page-platform .chapter-points li { position: relative; padding-left: 20px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.page-platform .chapter-points li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.page-platform .chapter-tag { margin: 10px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.page-platform .chapter-visual .win { transition: transform var(--motion-fast); }
.page-platform .chapter:nth-of-type(odd) { background: var(--paper); }
.page-platform .chapter:nth-of-type(even) { background: var(--mist); }

/* Real-render device family */
.page-platform .device-family--real .df-frame--browser .win { width: 560px; max-width: 100%; }
.page-platform .device-family--real .df-frame--tablet .shot-frame--tablet { width: 300px; max-width: 100%; }
.page-platform .device-family--real .df-frame--phone .shot-frame--phone { width: 150px; }
.page-platform .device-family--real .shot-frame { margin: 0; }
.page-platform .ops-steps { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line-dark); }
.page-platform .ops-steps .eyebrow { margin-bottom: 20px; }

@media (max-width: 1023px) {
  .page-platform .chapter-grid, .page-platform .chapter--flip .chapter-grid { grid-template-columns: 1fr; }
  .page-platform .chapter--flip .chapter-copy { order: 0; }
  .page-platform .device-family--real .df-frame--browser .win { width: 100%; }
}
.page-platform .spec-row--center li { margin: 0 14px; }
.page-platform .spec-row--center { gap: 10px 0; }

/* ---- page: pages-products.css ---- */
/* Products overview: light medallion cards - each product shown as its
   circular medallion on a clean light ground, with the copy below. The
   medallion art (src/assets/img/products/*-medallion.webp) is transparent and
   built for a white backdrop, so the media area is white and the whole card
   reads light, in contrast to the navy hero above it. */
.page-products .product-tiles { display:grid; grid-template-columns:1fr; gap:22px; }

/* Frameless: no card border, background or box - the medallion and its copy
   sit directly on the light section. */
.page-products .product-tile {
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:stretch;
  border-radius:0; background:transparent; color:var(--ink); border:none;
  transition:transform var(--dur-base) var(--ease);
}

/* Media: medallion centred on a white ground, consistent height across every
   card width (contain letterboxes with white, which is seamless here). */
.page-products .product-tile-media.photo {
  display:grid; place-items:center;
  padding:6px 20px 6px; background:transparent;
  border-radius:0; overflow:visible;
  transition:transform 1.1s var(--ease);
}
.page-products .product-tile-media.photo::before,
.page-products .product-tile-media.photo::after { display:none; }
.page-products .product-tile-media.photo img {
  width:auto; height:auto; max-width:100%; max-height:264px;
  object-fit:contain; object-position:center; filter:none; opacity:1;
}

.page-products .product-tile-copy { display:flex; flex-direction:column; gap:12px; padding:8px 28px 28px; width:100%; }
.page-products .product-tile-copy h3 { margin:0; color:var(--ink); font-size:clamp(23px,2.1vw,30px); line-height:1.15; }
.page-products .product-tile-desc { color:var(--ink-2); font-size:15px; line-height:1.55; max-width:48ch; }
.page-products .product-tile-link { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); color:var(--ink); font-size:14px; font-weight:600; }
.page-products .product-tile-link .btn-arrow { width:32px; height:32px; padding:7px; flex-shrink:0; color:var(--navy-950); border:1px solid rgba(15,18,41,.18); border-radius:50%; transition:transform var(--dur-base) var(--ease),background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease); }

.page-products .product-tile:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; }
.page-products .product-tile:hover,
.page-products .product-tile:focus-visible { transform:translateY(-6px); border-color:transparent; box-shadow:none; }
.page-products .product-tile:hover .product-tile-media,
.page-products .product-tile:focus-visible .product-tile-media { transform:scale(1.03); }
.page-products .product-tile:hover .btn-arrow,
.page-products .product-tile:focus-visible .btn-arrow { transform:translateX(3px); background:rgba(250,200,60,.22); border-color:rgba(250,200,60,.7); }

@media (min-width:640px) {
  .page-products .product-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-products .product-tile:last-child { grid-column:1/-1; }
}
@media (min-width:1024px) {
  .page-products .product-tiles { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .page-products .product-tile { grid-column:span 2; }
  .page-products .product-tile:nth-child(-n+2) { grid-column:span 3; }
  .page-products .product-tile:last-child { grid-column:span 2; }
}
@media (prefers-reduced-motion:reduce) {
  .page-products .product-tile,
  .page-products .product-tile-media,
  .page-products .product-tile-media img,
  .page-products .product-tile .btn-arrow { animation:none; transition:none; transform:none; }
}

/* Products hero film in fuller colour, to match the About banner (the shared
   .hero-film default is muted saturate .6 / brightness .82 for the home page).
   The .hero-film::after gradient still keeps the copy on solid navy at the
   left, so warming the footage on the right does not affect text contrast. */
.page-products .hero-film img,
.page-products .hero-film video {
  filter: saturate(1.05) contrast(1.04) brightness(.98);
}

/* ---- page: pages-z-consistency.css ---- */
/* Shared visual rules: brand banners, product discovery and real screens. */
:root { --r-card:16px; }
main h1, main h2 { text-wrap:balance; }
main .lede { max-width:56ch; }
main > section:not(.hero-section):not(.section--tight) { padding-block:clamp(56px,6vw,88px); }
.hero-section--film { min-height:640px; }
.hero-section--film .hero-film-copy { padding-block:88px; }
.hero-section--film .hero-copy { max-width:660px; }
.hero-section--film h1, .page-home .hero-section--film h1 { font-size:clamp(38px,4.5vw,64px); line-height:1.08; letter-spacing:-.035em; }
.page-product .hero-section { padding-block:72px; }
.page-product .hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; }
.page-product .hero-copy { max-width:560px; }
.page-product .hero h1 { font-size:clamp(36px,3.8vw,54px); line-height:1.12; letter-spacing:-.03em; }
.page-product .hero .lede { font-size:18px; line-height:1.6; max-width:46ch; }
.page-product .hero-visual { min-width:0; width:100%; }
.page-product .hero-visual > .product-hero-art { display:block; width:100%; border-radius:20px; }
.page-product .ground-dots::after { opacity:.22; }
.page-product .product-art-panel { overflow:hidden; border-radius:16px; background:#0F1229; }
.page-product .product-art-panel img { display:block; width:100%; height:auto; filter:none; }
.page-product .screen-stage { border-radius:20px; background:rgba(21,25,54,.035); padding:24px; }
.workflow-caption { font-size:14px; color:var(--muted); }
.page-products .product-tiles { grid-template-columns:repeat(6,minmax(0,1fr)); }
.page-products .product-tile, .page-products .product-tile:nth-child(-n+2), .page-products .product-tile:last-child { grid-column:span 2; min-height:430px; border-radius:16px; }
.page-products .product-tile:nth-child(4) { grid-column:2 / span 2; }
.page-products .product-tile-copy { min-height:220px; padding:24px; }
.page-products .product-tile-copy h2 { font-size:25px; }
.page-products .product-tile-desc { flex:1; }
.tile { border-radius:16px; }
/* Product medallions: large, square and frameless, matched to the products
   page (264px). This file loads last, so it is the authoritative size. */
.tile-thumb.tile-thumb--product { width:264px; height:264px; background:transparent; overflow:visible; border-radius:0; box-shadow:none; }
.tile-thumb.tile-thumb--product img { width:100%; height:100%; object-fit:contain; }
.mega-panel--products { border-radius:16px; }
.mega-col-title { text-transform:none; letter-spacing:0; font-size:14px; }
.page-contact .hero-section--film { min-height:390px; }
.page-contact .hero-section--film .hero-film-copy { padding-block:64px; }
.page-contact .enquiry-card { padding:36px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.page-contact .enquiry-card h2 { font-size:clamp(28px,3vw,40px); margin:0; }
.page-contact .enquiry-card p { margin:0; }
.page-contact .contact-note { font-size:14px; color:var(--muted); }
.page-contact .contact-note a { text-decoration:underline; }
.im-workflow-picker { grid-column:1/-1; display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.im-workflow-picker label { font-weight:600; }
.im-workflow-picker select { padding:12px 36px 12px 14px; border:1px solid var(--line); border-radius:8px; background:white; color:var(--ink); font:inherit; }
.page-im .screen-tab[hidden] { display:none; }
@media(max-width:1023px) {
 .page-product .hero { gap:32px; }
 .page-products .product-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .page-products .product-tile, .page-products .product-tile:nth-child(-n+2), .page-products .product-tile:nth-child(4), .page-products .product-tile:last-child { grid-column:auto; }
}
@media(max-width:767px) {
 .hero-section--film { min-height:0; }
 .hero-section--film .hero-film-copy { padding-block:64px; }
 .page-product .hero { grid-template-columns:1fr; }
 .page-product .hero-section { padding-block:48px; }
 .page-product .hero h1 { font-size:38px; }
 .page-product .hero-visual { max-width:520px; margin-inline:auto; }
 .page-product .screen-tabs { flex-direction:column; overflow:visible; }
 .page-product .screen-tab { flex:auto; min-width:0; width:100%; }
 .page-product .screen-stage { padding:16px; }
 .page-contact .hero-section--film { min-height:0; }
 .page-contact .enquiry-card { padding:24px; }
 .im-workflow-picker { flex-direction:column; align-items:stretch; gap:8px; }
}
@media(max-width:599px) {
 .page-products .product-tiles { grid-template-columns:1fr; }
 .page-products .product-tile { min-height:430px; }
}
@media(prefers-reduced-motion:reduce) { .product-tile, .tile, .tile-thumb { animation:none!important; transition:none!important; transform:none!important; } }

@media(min-width:1024px) {
 .page-product .hero-section { min-height:620px; display:flex; align-items:center; }
 .page-product .hero-section > .container { width:100%; }
 .page-products .product-tile-copy { height:220px; }
}

/* MC3300x captures: hide remote desktop chrome, retain the actual app. */
.page-im .im-screen--count { aspect-ratio:568 / 946; position:relative; }
.page-im .im-screen--count img { position:absolute; top:-4.02%; left:0; width:100%; max-width:none; }

/* Keep the Contact sculpture crisp and visible within the short banner. */
.page-contact .hero-film img, .page-contact .hero-film video { object-fit:cover; object-position:center 48%; filter:none; }
.page-contact .hero-film::after { background:linear-gradient(90deg,#151936 0%,rgba(21,25,54,.94) 27%,rgba(21,25,54,.3) 57%,rgba(21,25,54,.05) 100%); }

/* One banner size across all marketing pages, with stable uncropped artwork. */
body main > .hero-section {
 height:640px; min-height:640px; max-height:none; padding:40px 0;
 display:flex; flex-direction:column; justify-content:center; box-sizing:border-box;
}
body main > .hero-section > .container { width:100%; }
body main > .hero-section .hero-film-copy { padding-block:0; flex:0 1 auto; }
body main > .hero-section .hero-visual { max-height:540px; }
body main > .hero-section .im-scanner { width:245px; }
.page-about .hero-film, .page-contact .hero-film { background:#151936; }
.page-about .hero-film img, .page-about .hero-film video,
.page-contact .hero-film img, .page-contact .hero-film video {
 object-fit:contain; object-position:right center; filter:none; transform:none; animation:none;
}
.page-platform .platform-preview .hero-shot { margin-top:0; padding-bottom:0; }
@media(max-width:767px) {
 body main > .hero-section { height:900px; min-height:900px; padding-block:36px; }
 body main > .hero-section .hero { gap:24px; }
 body main > .hero-section .hero-copy { gap:18px; }
 body main > .hero-section .hero-visual { max-height:420px; }
 body main > .hero-section .im-scanner { width:190px; }
 body main > .hero-section .cms-hero-win { max-width:290px; }
 body main > .hero-section h1 { font-size:36px; }
}

/* Reference-inspired Products film: fixed framing, original aspect ratio. */
.page-products .hero-film img, .page-products .hero-film video { object-fit:cover; object-position:center; filter:none; animation:none; transform:none; }
.page-products .hero-film::after { background:linear-gradient(90deg,#151936 0%,rgba(21,25,54,.94) 25%,rgba(21,25,54,.6) 48%,rgba(21,25,54,.12) 80%); }

.page-about .hero-film img, .page-about .hero-film video { object-fit:cover; object-position:center; filter:none; animation:none; transform:none; }
.page-about .hero-film::after { background:linear-gradient(90deg,#151936 0%,rgba(21,25,54,.94) 25%,rgba(21,25,54,.6) 48%,rgba(21,25,54,.12) 80%); }

.page-contact .hero-film img, .page-contact .hero-film video { object-fit:cover; object-position:center; filter:none; animation:none; transform:none; }
.page-contact .hero-film::after { background:linear-gradient(90deg,#151936 0%,rgba(21,25,54,.94) 25%,rgba(21,25,54,.6) 48%,rgba(21,25,54,.12) 80%); }
.page-products .hero-film img, .page-products .hero-film video { object-fit:contain; object-position:right center; background:#151936; }

/* Refined Products banner, continuous edge-to-edge composition. */
.page-products .hero-film img, .page-products .hero-film video { object-fit:cover; object-position:center; filter:none; transform:none; animation:none; }
.page-products .hero-film::after { background:linear-gradient(90deg,#151936 0%,rgba(21,25,54,.94) 22%,rgba(21,25,54,.75) 42%,rgba(21,25,54,.15) 72%,transparent 100%); }

/* Animate the connection overlay while preserving the original globe pixels. */
.page-about .deploy-intro-globe { position:relative; width:100%; max-width:440px; margin-inline:auto; }
.page-about .deployment-motion { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.deployment-route { fill:none; stroke:#e9b52d; stroke-width:3; stroke-linecap:round; stroke-dasharray:10 100; animation:deploymentTravel 7s linear infinite; }
.deployment-pulse { fill:rgba(250,200,60,.22); stroke:#e9b52d; stroke-width:2; transform-box:fill-box; transform-origin:center; animation:deploymentPulse 3s var(--ease-in-out) infinite; }
.deployment-pulse--second { animation-delay:1s; }
.deployment-pulse--third { animation-delay:2s; }
@keyframes deploymentTravel { to { stroke-dashoffset:-660; } }
@keyframes deploymentPulse { 0%,100% { transform:scale(.65); opacity:.35; } 50% { transform:scale(1.65); opacity:.9; } }
@media(max-width:767px) { .page-about .deploy-intro-globe { max-width:360px; } }
@media(prefers-reduced-motion:reduce) { .deployment-route,.deployment-pulse { animation:none; } .deployment-route { stroke-dasharray:none; opacity:.45; } }

/* Full-width landing film with the same continuous shading as Products. */
.page-home .hero-film { background:#151936; }
.page-home .hero-film img,.page-home .hero-film video { object-fit:cover; object-position:center; filter:none; transform:none; animation:none; }
.page-home .hero-film::after { background:linear-gradient(90deg,#151936 0%,rgba(21,25,54,.94) 22%,rgba(21,25,54,.75) 42%,rgba(21,25,54,.15) 72%,transparent 100%); }

/* Inventory: concise process overview with optional real-screen detail. */
.page-im .im-modern-hero{background:radial-gradient(ellipse at 85% 50%,#303963 0%,#151936 65%);overflow:hidden}
.page-im .im-overview-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.page-im .im-overview-art img{width:100%;height:auto;max-height:390px;object-fit:contain;border-radius:24px}
.page-im .im-overview-art p{font:12px var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:#e8eaf6}
/* Inventory hero now uses the landing page's cinematic film hero; match its
   slow Ken Burns drift on the footage (keyframe defined in pages-home.css). */
@media(prefers-reduced-motion:no-preference){
  .page-im .hero-film img,
  .page-im .hero-film video{animation:homeHeroKenBurns 26s var(--ease-in-out) infinite alternate;transform-origin:62% 45%;will-change:transform}
}
.page-im .im-editorial-head{max-width:760px;margin-bottom:48px}
.page-im .im-editorial-head h2{margin-bottom:20px;max-width:24ch}
.page-im .im-editorial-head>p:last-child{max-width:62ch;color:#4b5070;font-size:18px}
.page-im .im-process-line{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0;list-style:none;margin:0}
.page-im .im-process-line li{border-top:2px solid #23285a;padding:28px 24px 0 0;position:relative}
.page-im .im-process-line li:before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:#23285a}
.page-im .im-index{font:12px monospace;letter-spacing:.08em;color:#6a6f8e}
.page-im .im-process-line h3{margin:20px 0 14px;font-size:25px;letter-spacing:-.03em}
.page-im .im-process-line p{font-size:16px;color:#4b5070;line-height:1.65}
.page-im .im-process-detail{display:block;margin-top:24px;font-size:12px;line-height:1.7;color:#4b5070}
.page-im .im-control-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:80px}
.page-im .im-control-layout h2{margin-bottom:22px}.page-im .im-control-layout p{color:#4b5070}
.page-im .im-control-list article{display:flex;gap:24px;padding:24px 0;border-top:1px solid #d9dce8}
.page-im .im-control-list article>span{font:12px monospace;color:#6a6f8e;padding-top:6px}
.page-im .im-control-list h3{margin-bottom:8px}.page-im .im-control-list p{margin:0}
.page-im .im-screen-library{border-top:1px solid #d9dce8;border-bottom:1px solid #d9dce8}
.page-im .im-screen-library>summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:26px 0;font-size:20px;font-weight:600;list-style:none}
.page-im .im-screen-library>summary::-webkit-details-marker{display:none}
.page-im .im-screen-library[open]>summary span{transform:rotate(45deg)}
.page-im .im-library-body{padding:20px 0 32px}.page-im .cta-band h2{margin-bottom:18px}.page-im .cta-band .btn{margin-top:18px}
@media(max-width:900px){.page-im .im-process-line{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}.page-im .im-control-layout{gap:36px}}
@media(max-width:600px){.page-im .im-process-line{grid-template-columns:1fr;gap:32px}.page-im .im-process-line li{padding-right:0}.page-im .im-control-layout{grid-template-columns:1fr;gap:26px}.page-im .im-overview-art img{max-height:280px}.page-im .im-editorial-head{margin-bottom:36px}.page-im .im-process-detail{margin-top:14px}}

/* Responsive inventory process diagram. */
.page-im .im-flow-map{margin:0;padding:36px;background:#151936;color:white;border-radius:20px}
.page-im .im-flow-map figcaption{font-size:14px;color:#d4d9ec;margin-bottom:24px}
.page-im .im-sap-spine{display:flex;align-items:center;justify-content:center;gap:20px;border:1px solid #59617f;border-radius:8px;padding:18px;position:relative;margin-bottom:38px}
.page-im .im-sap-spine strong{color:#fac83c;font-size:20px}.page-im .im-sap-spine span{font-size:14px;color:#d4d9ec}
.page-im .im-flow-nodes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;list-style:none;padding:0;margin:0}
.page-im .im-flow-nodes>li{background:#232a4a;padding:22px 18px;border:1px solid #48516f;border-radius:10px;position:relative;min-width:0}
.page-im .im-flow-nodes>li:before{content:"";position:absolute;left:50%;top:-39px;height:38px;border-left:1px dashed #7b849f}
.page-im .im-flow-nodes>li:not(:last-child):after{content:"\2192";position:absolute;right:-23px;top:54px;color:#fac83c;font-size:23px}
.page-im .im-flow-number{font:13px monospace;color:#fac83c}.page-im .im-flow-nodes h3{color:white;font-size:21px;margin:16px 0 10px;line-height:1.25}
.page-im .im-flow-nodes p{font-size:14px;line-height:1.6;color:#d4d9ec;margin:0}.page-im .im-flow-nodes details{margin-top:20px}.page-im .im-flow-nodes summary{cursor:pointer;font-size:13px;color:#fac83c}.page-im .im-flow-nodes details p{margin-top:12px}
.page-im .im-flow-support{display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap;border-top:1px solid #48516f;margin-top:28px;padding-top:24px;font-size:14px}.page-im .im-flow-support>span{color:#b8c0da;font-size:12px}.page-im .im-flow-support a{color:white;text-underline-offset:5px}
@media(max-width:767px){.page-im .im-flow-map{padding:24px 20px}.page-im .im-sap-spine{flex-direction:column;gap:6px;margin-bottom:28px;text-align:center}.page-im .im-flow-nodes{grid-template-columns:1fr;gap:30px}.page-im .im-flow-nodes>li:before{display:none}.page-im .im-flow-nodes>li:not(:last-child):after{content:"\2193";right:50%;top:auto;bottom:-29px}.page-im .im-flow-support{gap:16px;justify-content:flex-start}.page-im .im-flow-support>span{width:100%}}

/* Asset identification film: full-width, matching the inventory banner. */
.page-at .hero-film img,.page-at .hero-film video{object-fit:cover;object-position:center;filter:none;transform:none;animation:none}
.page-at .hero-film::after{background:linear-gradient(90deg,#151936 0%,rgba(21,25,54,.94) 22%,rgba(21,25,54,.75) 42%,rgba(21,25,54,.15) 72%,transparent 100%)}

/* Vehicle depot film: full-width, matching the inventory banner. */
.page-vms .hero-film img,.page-vms .hero-film video{object-fit:cover;object-position:center;filter:none;transform:none;animation:none}
.page-vms .hero-film::after{background:linear-gradient(90deg,#151936 0%,rgba(21,25,54,.94) 22%,rgba(21,25,54,.75) 42%,rgba(21,25,54,.15) 72%,transparent 100%)}

/* Retail stocktaking film: full-width, matching the inventory banner. */
.page-cms .hero-film img,.page-cms .hero-film video{object-fit:cover;object-position:center;filter:none;transform:none;animation:none}
.page-cms .hero-film::after{background:linear-gradient(90deg,#151936 0%,rgba(21,25,54,.94) 22%,rgba(21,25,54,.75) 42%,rgba(21,25,54,.15) 72%,transparent 100%)}

/* Plant maintenance film: full-width, matching the inventory banner. */
.page-pm .hero-film img,.page-pm .hero-film video{object-fit:cover;object-position:center;filter:none;transform:none;animation:none}
.page-pm .hero-film::after{background:linear-gradient(90deg,#151936 0%,rgba(21,25,54,.94) 22%,rgba(21,25,54,.75) 42%,rgba(21,25,54,.15) 72%,transparent 100%)}

/* Material routing diagram supplied by the owner, redrawn as sharp vector artwork. */
.page-im .im-material-flow{max-width:920px;margin:0 auto}.page-im .im-material-flow img{display:block;width:100%;height:auto}.page-im .im-material-flow figcaption{font-size:14px;line-height:1.7;color:#4b5070;margin-top:18px}.page-im .im-material-flow figcaption a{display:inline-block;text-underline-offset:4px}
.page-im .im-diagram-scroll{overflow-x:auto;border-radius:24px}.page-im .im-diagram-scroll:focus-visible{outline:3px solid #fac83c;outline-offset:4px}@media(max-width:767px){.page-im .im-material-flow img{min-width:800px}}

/* A concise value-led view of materials management. */
.page-im .im-value-story{display:grid;grid-template-columns:1fr 1.15fr;gap:40px 64px;padding:48px;background:#151936;border-radius:24px;color:white}
.page-im .im-value-intro>.eyebrow{color:#fac83c;font-size:12px}.page-im .im-value-intro h3{font-size:clamp(28px,3vw,40px);line-height:1.15;letter-spacing:-.03em;color:white;margin:22px 0}.page-im .im-value-intro p{color:#c9d0e5;max-width:32ch}.page-im .im-value-intro a{display:inline-block;margin-top:18px;color:#fac83c;text-underline-offset:5px}
.page-im .im-value-steps{list-style:none;margin:0;padding:0}.page-im .im-value-steps li{position:relative;display:flex;gap:20px;padding:0 0 28px}.page-im .im-value-steps li:last-child{padding-bottom:0}.page-im .im-value-steps li:not(:last-child):before{content:"";position:absolute;left:23px;top:48px;bottom:0;border-left:1px solid #525e81}.page-im .im-value-symbol{flex:0 0 48px;height:48px;border:1px solid #66718f;border-radius:50%;display:grid;place-items:center;font:14px monospace;color:#fac83c}.page-im .im-value-steps h3{color:white;font-size:21px;margin:2px 0 8px}.page-im .im-value-steps p{color:#c9d0e5;font-size:15px;line-height:1.6;margin:0}
.page-im .im-value-foundation{grid-column:1/-1;border-top:1px solid #475170;padding-top:24px;display:flex;justify-content:space-between;gap:18px;font-size:14px}.page-im .im-value-foundation strong{color:#fac83c}.page-im .im-value-foundation span{color:#c9d0e5}
@media(max-width:767px){.page-im .im-value-story{grid-template-columns:1fr;padding:28px 24px;gap:32px}.page-im .im-value-foundation{flex-direction:column;gap:8px}}

/* Platform banner: smooth baked-in zoom, no additional CSS transforms. */
.page-platform .hero-film img,.page-platform .hero-film video{object-fit:cover;object-position:center;filter:none;transform:none;animation:none}
.page-platform .hero-film::after{background:linear-gradient(90deg,#151936 0%,rgba(21,25,54,.94) 22%,rgba(21,25,54,.75) 42%,rgba(21,25,54,.15) 72%,transparent 100%)}
.page-platform .hero-section .spec-row{flex-wrap:wrap;gap:10px 18px}