/* ═══════════════════════════════════════════════════════════════
   GoEngineer · Digital Design System 2026 — SITE STYLESHEET
   goengineer-dds.css · single file for INDUSTRY + SERVICE pages

   Supersedes: aerospace-defense-industry.css · goengineer-services.css
   Covers: aerospace-defense (and future industry pages) · all nine
   service pages (solidworks-services · solidworks-cad-automation ·
   solidworks-systems-health · pdm-manage-implementation ·
   3dexperience-services · 3dexperience-implementation ·
   3dexperience-migration · catia-enovia-services · plm-services)

   COMPLIANCE REBUILD · 2026-08-15 · ratified by Brand + Product
   Rulings R1–R10 (full text preserved below, LAYER notes inline):
   R1 · --fs-h6 = 0.75rem canonical (p.15/p.30)
   R2 · One canonical quiet elevation set (defined once, below)
   R3 · Display letter-spacing removed everywhere (confirms the
        2026-07-19 direction; PDF p.14 to be updated)
   R4 · Eyebrow/overline ink = --ge-green-dark on light surfaces,
        --ge-green on dark; green-dark also approved as interactive-
        state accent ink. All Bebas overlines at 15px (p.14 spec)
   R5 · Functional overlays permitted (photo scrims, masks, 1px
        grid-line textures); decorative color gradients forbidden
   R6 · Marketing reading-text floor 14px; uppercase tracked
        micro-labels keep component-spec sizes (tags 11 · pills 10.5
        · table headers 10 · numeric index labels 12); data-matrix
        body 12px per p.24
   R7 · Dark surfaces use ONLY the approved p.12 remap: #0E1013 /
        #1A1D22 / #1F2329 · border white@8% (strong white@16%) ·
        text #F5F7F9 / white@65%. Nothing darker than ink·900
   R8 · Alpha tints of token hues ≤25% permitted for chips, rings,
        washes (p.20 focus-ring precedent). No new hues
   R9 · Green button hover = solid green-dark fill; green-light is
        chart/data-viz fill only; ::selection = green + ink·900
   R10· 4px grid enforced; off-ramp sizes snapped (15/17px type →
        14/16; hand shadows → e-tokens; tag chips → p.23 spec)

   R11 · SINGLE-FILE MERGE · 2026-08-15
   The two stylesheets are combined into this one file. Load order
   and collision resolutions:
   - Tokens, base/reset, CTA buttons, and .section-intro are defined
     ONCE in the shared layers below. The services pages previously
     consumed .ge-button-* without defining them — now self-contained
   - Base = the services base (body: white · ink-700 · Open Sans
     1rem; global deep-blue anchors; global H1–H4 ramp; full margin
     reset). Industry sections all paint their own backgrounds, so
     the paper body is retired. QA note: industry-page elements that
     relied on UA default margins or default-inline images should be
     spot-checked once against the global reset
   - COLLISION · .service-card: the industry "Why GoEngineer" card
     is scoped to #services:has(.ind-page-inner) .service-card (its only home). The
     unscoped .service-card remains the services-pages grid cell.
     No markup changes required
   - COLLISION · ALL industry-page id rules (#hero #trust-strip #final-cta
     #faq:has(.ind-page-inner) #capabilities:has(.ind-page-inner) #resources:has(.ind-page-inner) #customer-story:has(.ind-page-inner) #pressures:has(.ind-page-inner) #bridge) are
     scoped with :has(.ind-page-inner), same as #services. Services pages now
     carry their own semantic section ids for in-page anchor nav, and #faq /
     #capabilities:has(.ind-page-inner) were ALREADY colliding before this. No markup changes
     required on the industry page
   - COLLISION · .section-intro: unified to one definition — 1rem /
     1.65 · ink-500 via --text-dim (adapts on dark) · 640px measure
     · s7 bottom margin. Visual change on industry pages: was
     ink-700 / 560px / s8
   - Native CSS @layer is deliberately NOT used: Bootstrap and the
     CMS load unlayered, and unlayered styles beat layered ones —
     layering this file would demote every rule below Bootstrap.
     Ordering + scoping does the job instead
   - DEPLOY: replace both old <link>s with this file, after
     Bootstrap. TinyMCE: content_css: ['…/bootstrap.min.css',
     '…/goengineer-dds.css']. PLM watermark splice point unchanged
     (search ___KEEP_EXISTING_WATERMARK_BASE64___)

   Layer map:
     01 TOKENS · 02 BASE/RESET · 03 CTA BUTTONS · 04 SHARED TYPE ·
     10 INDUSTRY PAGES · 20 SERVICE PAGES · 30 TINYMCE + GRID DIALECT
═══════════════════════════════════════════════════════════════ */

/* ==========================================================================
   01 · DESIGN TOKENS — the contract, defined once (both dialects)
   ========================================================================== */
:root {
  /* primary */
  --ge-green:        #BAD532;
  --ge-green-light:  #D6E87A;   /* chart & data-viz fills only — never a background */
  --ge-green-dark:   #97B220;   /* hover/pressed, checked-control borders, eyebrow ink (R4) */
  --ge-grey:         #98989A;

  /* secondary */
  --ge-indigo:       #171C8F;
  --ge-charcoal:     #555555;
  --ge-cyan:         #00AEEF;

  /* tertiary · use sparingly */
  --ge-deep-blue:    #336D91;   /* text hyperlinks only */
  --ge-iris:         #8984D6;
  --ge-orange:       #F9941B;
  --ge-gold:         #C6AC56;

  /* neutrals · the structural palette */
  --white:           #FFFFFF;
  --paper:           #FAFBFC;
  --ink-50:          #F5F7F9;
  --ink-100:         #ECEEF1;
  --ink-150:         #E1E4E8;
  --ink-200:         #D1D5DA;
  --ink-300:         #A8ADB4;
  --ink-400:         #7A8089;
  --ink-500:         #555B63;
  --ink-700:         #2A2F37;
  --ink-900:         #0E1013;

  /* semantic · state only */
  --sem-success:     #2E7D5B;
  --sem-warning:     #B27514;
  --sem-error:       #B53029;
  --sem-info:        #1E6FB8;

  /* spacing · 4px grid (two alias sets, same scale) */
  --s1: 4px;  --space-1: 4px;   --s2: 8px;  --space-2: 8px;
  --s3: 12px; --space-3: 12px;  --s4: 16px; --space-4: 16px;
  --s5: 24px; --space-5: 24px;  --s6: 32px; --space-6: 32px;
  --s7: 48px; --space-7: 48px;  --s8: 64px; --space-8: 64px;
  --s9: 96px; --space-9: 96px;

  /* radius */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-cta: 5px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-pill: 999px;

  /* elevation · quiet, functional — CANONICAL SET (R2) */
  --e-0: none;
  --e-1: 0 1px 2px rgba(14,16,19,0.05), 0 1px 3px rgba(14,16,19,0.05);
  --e-2: 0 2px 6px rgba(14,16,19,0.08), 0 1px 2px rgba(14,16,19,0.04);
  --e-3: 0 8px 24px rgba(14,16,19,0.12);

  /* motion */
  --m-fast: 120ms;
  --m-base: 200ms;
  --m-slow: 320ms;
  --m-page: 480ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);

  /* type scale */
  --fs-h1: 3rem;      --lh-h1: 1.10;
  --fs-h2: 2.125rem;  --lh-h2: 1.15;
  --fs-h3: 1.5rem;    --lh-h3: 1.20;
  --fs-h4: 1.125rem;  --lh-h4: 1.30;
  --fs-h5: 0.875rem;  --lh-h5: 1.40;
  --fs-h6: 0.75rem;   --lh-h6: 1.45;   /* R1 */
  --fs-body: 0.875rem; --lh-body: 1.55;
  --fs-body-marketing: 1rem;
  --fs-sm: 0.75rem;   --lh-sm: 1.50;
  --fs-xs: 0.6875rem; --lh-xs: 1.45;
  --fs-eyebrow: 15px;                   /* Bebas overline · 15–18px per p.14 (R4) */

  /* type faces (both dialects) */
  --font-display:  'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:     "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-overline: 'Bebas Neue', "Open Sans", sans-serif;
  --ff-display:    var(--font-display);
  --ff-sans:       var(--font-body);
  --ff-overline:   var(--font-overline);

  /* layout */
  --sticky-header: 72px;   /* set to the real rendered header height */

  /* ── SEMANTIC ALIASES (surface roles · remapped by dark sections) ── */
  --bg:            var(--paper);
  --bg-card:       var(--white);
  --bg-card-hover: var(--ink-50);
  --bg-surface:    var(--ink-100);

  --text:          var(--ink-900);
  --text-muted:    var(--ink-700);
  --text-dim:      var(--ink-500);
  --text-caption:  var(--ink-400);

  --border:        var(--ink-150);
  --border-strong: var(--ink-200);

  --accent:        var(--ge-deep-blue);  /* links only */
  --emphasis:      var(--ge-indigo);     /* colored text emphasis */
  --brand:         var(--ge-green);      /* brand fills */
  --eyebrow:       var(--ge-green-dark); /* R4 · flips to --ge-green on dark */

  /* backward-compat aliases (kept neutral so any stray refs stay on-system) */
  --font-mono:     var(--font-overline);
  --accent-dim:    var(--ink-50);
  --accent-border: var(--border);
}

/* ==========================================================================
   02 · BASE / RESET — one base for every page
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--ff-sans); font-size: var(--fs-body-marketing); line-height: var(--lh-body); color: var(--ink-700); background: var(--white); }
img { max-width: 100%; display: block; }
.ge-footer img, .goengineer-navbar img { display: inline-block; }
/* Chrome guard: scoped to .ge-body (the CMS content wrapper) so header/mega-menu
   and footer links are released; :where() keeps specificity at 0-0-1 so nothing
   inside the content area shifts. Matches the navbar/footer img guards above. */
:where(.ge-body) a { color: var(--ge-deep-blue); text-decoration: none; transition: color var(--m-fast) var(--ease-out); }
:where(.ge-body) a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* R9 · green-light is chart-fill only; selection uses brand green */
::selection { background: var(--ge-green); color: var(--ink-900); }
/* Sticky site-header clearance: the main-menu bar is fixed, so in-page anchor
   navigation must stop short of the viewport top or the target hides behind
   the header. scroll-margin-top offsets fragment scrolling WITHOUT affecting
   layout. */
[id] { scroll-margin-top: calc(var(--sticky-header) + var(--s4)); }
/* Accordion panels and tab panes scroll-target BELOW their trigger, so they
   need extra clearance to keep the trigger itself visible */
.service-body, .layer-body, .tab-pane { scroll-margin-top: calc(var(--sticky-header) + var(--s8) + var(--s7)); }
/* The process-track trigger is far taller (64px icon circle + title +
   subtitle + s6 gap ≈ 150px) — panes inside .process-detail need more */
.process-detail .tab-pane { scroll-margin-top: calc(var(--sticky-header) + var(--s9) + var(--s8)); }
/* Heading ramp · Inter Bold 700 for display, Semibold 600 below H2 (R3: no tracking) */
h1 { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-h1); line-height: 1.10; color: var(--ink-900); }
h2 { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.15; color: var(--ink-900); }
h3 { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.20; color: var(--ink-900); }
h4 { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h4); line-height: 1.30; color: var(--ink-900); }
/* bundle.css applies letter-spacing:.1rem to many headers; DDS removed display
   tracking (R3) — force normal on the whole heading ramp. This file loads after
   bundle.css, so this wins. LOST IN THE R11 MERGE — restored 2026-08-16. */
h1,h2,h3,h4,h5,h6,.section-heading,.section-h2,.hero h1,.hero-lg h1,#hero h1{letter-spacing:normal}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   03 · CTA BUTTONS · the four families, defined once (DDS p.19)
   5px radius · Open Sans Semibold · 14px · 10×18 padding.
   ========================================================================== */
[class^="ge-button-"], [class*=" ge-button-"] {
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1;
  border-radius: var(--r-cta);
  padding: 10px 18px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border: 2px solid transparent;
  transition: background var(--m-base) var(--ease-out),
              color var(--m-base) var(--ease-out),
              border-color var(--m-base) var(--ease-out);
}
[class^="ge-button-"]:focus-visible, [class*=" ge-button-"]:focus-visible {
  outline: 2px solid var(--ge-indigo);
  outline-offset: 2px;
}
/* primary · green (black on green, never white) · R9 hover = green-dark fill */
.ge-button-green { background: var(--ge-green); color: var(--ink-900); border-color: var(--ge-green); }
.ge-button-green:hover { background: var(--ge-green-dark); border-color: var(--ge-green-dark); color: var(--ink-900); }
.ge-button-green-outline { background: transparent; color: var(--ink-900); border-color: var(--ge-green); }
.ge-button-green-outline:hover { background: var(--ge-green); border-color: var(--ge-green); color: var(--ink-900); }
/* secondary · dark gray */
.ge-button-dark-gray { background: var(--ge-charcoal); color: var(--white); border-color: var(--ge-charcoal); }
.ge-button-dark-gray:hover { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); }
.ge-button-dark-gray-outline { background: transparent; color: var(--ge-charcoal); border-color: var(--ge-charcoal); }
.ge-button-dark-gray-outline:hover { background: var(--ink-700); color: var(--white); border-color: var(--ink-700); }
/* utility · blue (portal default) · hover shade pending --ge-cyan-dark token */
.ge-button-blue { background: var(--ge-cyan); color: var(--ink-900); border-color: var(--ge-cyan); }
.ge-button-blue:hover { filter: brightness(0.94); }
.ge-button-blue-outline { background: transparent; color: var(--ge-cyan); border-color: var(--ge-cyan); }
.ge-button-blue-outline:hover { background: rgba(0,174,239,0.10); }   /* R8 */
/* promo · red (time-bound only) */
.ge-button-red { background: var(--sem-error); color: var(--white); border-color: var(--sem-error); }
.ge-button-red:hover { filter: brightness(0.94); }
.ge-button-red-outline { background: transparent; color: var(--sem-error); border-color: var(--sem-error); }
.ge-button-red-outline:hover { background: rgba(181,48,41,0.08); }    /* R8 */
/* Primary CTAs go full-width on phones for a bigger tap target */
@media (max-width: 576px) {
  .ge-button-block-sm { display: block; width: 100%; }
}

/* ==========================================================================
   04 · SHARED TYPE · unified section intro (R11)
   1rem / 1.65 · --text-dim (ink-500 on light, adapts on dark) · 640px · s7
   ========================================================================== */
.section-intro {
  font-family: var(--ff-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 640px;
  margin-bottom: var(--s7);
}

/* ██████████████████████████████████████████████████████████████
   10 · INDUSTRY PAGES (aerospace-defense + future industry pages)
   ██████████████████████████████████████████████████████████████ */

/* R11 · card-wrapping anchors keep card styling — the shared base now sets
   global deep-blue links + hover underlines (services convention), which
   industry cards authored as plain divs never needed. If any industry card
   is later wrapped in an <a>, these guards keep it looking like a card. */
a.resource-card, a.resource-card:hover,
a.related-card, a.related-card:hover,
a.pressure-card, a.pressure-card:hover,
a.sub-cap-card, a.sub-cap-card:hover,
a.story-card, a.story-card:hover { color: inherit; text-decoration: none; }
/* ── UTILITY TYPOGRAPHY ────────────────────────────────────── */
.font-display  { font-family: var(--font-display); }
.font-mono     { font-family: var(--font-overline); }
.text-accent   { color: var(--emphasis) !important; }
.text-muted-ge { color: var(--text-muted) !important; }
.text-dim      { color: var(--text-dim) !important; }

/* eyebrow / overline (H5) — Bebas Neue, caps, 15px, +0.14em (R4) */
.section-label {
  font-family: var(--font-overline);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  color: var(--eyebrow);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-3);
  line-height: var(--lh-h5);
}

/* ── SCROLL FADE-IN ────────────────────────────────────────── */
.fade-in-observe {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--m-page) var(--ease-out), transform var(--m-page) var(--ease-out);
}
.fade-in-observe.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── LINKS · in-flow text hyperlinks (Deep Blue, no underline) ─ */
.cap-link {
  color: var(--accent);
  cursor: pointer;
  transition: color var(--m-fast) var(--ease-out);
}
.cap-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Featured highlight for scroll-to target — border pulse, no glow */
@keyframes capFlash {
  0%, 100% { border-color: var(--border); }
  40%, 60% { border-color: var(--ge-green); }
}
.cap-flash { animation: capFlash var(--m-page) var(--ease-out); }

/* ── HERO ──────────────────────────────────────────────────── */
#hero:has(.ind-page-inner) {
  position: relative;
  min-height: auto;
  display: block;
  overflow: hidden;
  background: var(--bg);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-pill);
  background: var(--bg-card);          /* R7 · token surface, was rgba hand-pick */
  border: 1px solid var(--border);
  margin-bottom: var(--space-6);
}
.hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ge-green);
}
/* R4 · eyebrow snapped to 15px */
.hero-badge-text {
  font-family: var(--font-overline);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--eyebrow);
  text-transform: uppercase;
  transform: translateY(1px);
}
/* R3 · display letter-spacing removed */
#hero:has(.ind-page-inner) h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: var(--lh-h1);
  color: var(--text);
}
.hero-body {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 620px;
  margin: var(--space-6) 0 var(--space-7);
}

/* Entrance animation */
.hero-load { opacity: 0; transform: translateY(24px); transition: opacity var(--m-page) var(--ease-out), transform var(--m-page) var(--ease-out); }
.hero-load.loaded { opacity: 1; transform: translateY(0); }

/* ── HERO TWO-COLUMN ───────────────────────────────────────── */
.hero-inner {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}
.hero-text-col { flex: 0 0 52%; min-width: 0; }
.hero-image-col { flex: 1; min-width: 0; }
.hero-img-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--e-2);
  border: 1px solid var(--border);
  aspect-ratio: 4/3;
}
.hero-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* White badge on the photo keeps light-surface ink regardless of theme */
.hero-img-badge {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-150);
}
.hero-img-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ge-green);
  flex-shrink: 0;
}
/* R4 · eyebrow-class label → 15px; green-dark ink on the white badge */
.hero-img-badge-text {
  font-family: var(--font-overline);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  color: var(--ge-green-dark);
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .hero-inner    { flex-direction: column; gap: var(--space-7); }
  .hero-text-col { flex: 0 0 auto; }
  .hero-img-card { aspect-ratio: 16/9; }
}

/* ── TRUST STRIP ───────────────────────────────────────────── */
#trust-strip:has(.ind-page-inner) {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-6) var(--space-5) var(--space-7);
}
.trust-stats { gap: clamp(4rem, 8vw, 8rem); }
/* Recessed "trusted by" shelf — R7 · approved raised surface + white@8%
   border replace the hand-picked rgba washes. */
.trust-shelf {
  margin-top: var(--space-7);
  padding: var(--space-6) var(--space-7);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.trust-shelf .trust-label { margin-bottom: var(--space-5); }
.trust-shelf .trust-logos { margin-bottom: 0; }
@media (max-width: 576px) {
  /* Keep all three stat call-outs on one row, value + label centered */
  #trust-strip:has(.ind-page-inner) .trust-stats { flex-wrap: nowrap; gap: var(--space-3); }
  #trust-strip:has(.ind-page-inner) .trust-stats > div { flex: 1 1 0; min-width: 0; text-align: center; }
  #trust-strip:has(.ind-page-inner) .stat-value { font-size: 1.75rem; }

  /* Stack the logo above the "trusted by…" line, centered */
  #trust-strip:has(.ind-page-inner) .trust-label { flex-direction: column; gap: var(--space-1); transform: none; text-align: center; }

  /* Logo carousel: arrows flank a swipeable, scroll-snapping track */
  #trust-strip:has(.ind-page-inner) .trust-carousel { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
  #trust-strip:has(.ind-page-inner) .trust-arrow { display: flex; transform: translateY(-5px); }
  #trust-strip:has(.ind-page-inner) .trust-logos {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 8px;
    padding: 0 8px;
    scroll-padding-left: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #trust-strip:has(.ind-page-inner) .trust-logos::-webkit-scrollbar { display: none; }
  /* Tighter shelf on phones so the padded panel doesn't crowd the carousel */
  #trust-strip:has(.ind-page-inner) .trust-shelf { margin-top: var(--space-6); padding: var(--space-5) var(--space-2); }
  #trust-strip:has(.ind-page-inner) .trust-logo-img {
    flex: 0 0 auto;
    /* Two logos per view = half the viewport minus the fixed chrome around them.
       Nested inside .trust-shelf, so its horizontal padding (8) + border (1)
       per side is added to the budget:
       section padding 48 + shelf pad 16 + shelf border 2 + arrows 60 +
       carousel gaps 16 + track padding 16 + logo gap 8 = 166; 50vw - 85
       leaves ~2px per logo of safety so nothing clips. */
    width: calc(50vw - 85px);
    max-width: none;
    height: 22px;
    object-fit: contain;
    scroll-snap-align: start;
  }
  #trust-strip:has(.ind-page-inner) .trust-logo-clone { display: block; }
}
/* R6 · 13px → 14px reading text */
.trust-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-dim);
  margin-bottom: var(--space-6);
  transform: translateX(-12px);
}
.trust-brand {
  height: 22px;
  width: auto;
  flex: 0 0 auto;
  transform: translateY(1px);
}
.trust-tag em {
  color: var(--text);
  margin-right: 0.25em;
}
.trust-carousel { display: block; }
/* R7 · arrow chrome on token surfaces (was rgba hand-picks) */
.trust-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.trust-arrow:hover { background: var(--bg-card-hover); color: var(--text); }
.trust-logo-clone { display: none; }  /* loop clones show only in the mobile carousel */
.trust-logos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  opacity: 0.55;
  margin-bottom: var(--space-4);
}
/* R6 · 13px → 14px */
.trust-logo {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-muted);
  padding: var(--space-2) 0;
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--emphasis);
  display: block;
  text-align: center;
}
/* R6 · fs-sm → 14px reading text */
.stat-label {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-dim);
  margin-top: var(--space-2);
  line-height: 1.3;
  text-align: center;
  display: block;
}

/* ── PRESSURES ─────────────────────────────────────────────── */
#pressures:has(.ind-page-inner) { background: var(--ink-150); padding: var(--space-9) var(--space-5); }
/* Let each card size to its own content so expanding one doesn't stretch its row-mates to match */
#pressures:has(.ind-page-inner) .row { align-items: flex-start; }
.pressure-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background var(--m-base) var(--ease-out), border-color var(--m-base) var(--ease-out);
}
.pressure-card:hover,
.pressure-card.is-open {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
}
.pressure-trigger {
  padding: var(--space-5);
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
}
.pressure-trigger h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-h4);
  color: var(--text);
  margin: 0 0 var(--space-3);
}
.pressure-trigger p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-5);
}
.accordion-icon {
  font-size: 16px;
  color: var(--text-dim);
  transition: transform var(--m-base) var(--ease-out), color var(--m-base) var(--ease-out);
  line-height: 1;
  flex-shrink: 0;
}
.is-open .accordion-icon { color: var(--text); }
.pressure-body {
  padding: 0 var(--space-5);
}
/* Bottom padding only while open, so a collapsed panel leaves no residual gap */
.pressure-card.is-open .pressure-body { padding-bottom: var(--space-5); }
/* R4 · Bebas overline → 15px, green-dark ink on light */
.pressure-sub-label {
  font-family: var(--font-overline);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  color: var(--eyebrow);
  text-transform: uppercase;
  margin: var(--space-5) 0 var(--space-3);
}
.pressure-narrative {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--space-5);
}
/* R6 · fs-sm → 14px */
.pressure-resource {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--accent);
}
.pressure-resource:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Bottom expand affordance — pinned to the card foot, chevron flips when open */
.pressure-expand {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
}
.pressure-expand-chevron {
  font-size: 13px;
  transition: transform var(--m-base) var(--ease-out);
}
.pressure-card.is-open .pressure-expand-chevron { transform: rotate(180deg); }
/* ── PRESSURES · closing summary + CTA ─────────────────────────
   The platform summary line and primary CTA live at the foot of the
   Industry Pressures section. The copy stays subdued and uniform;
   the button is the single focal point. */
.pressures-summary {
  margin-top: var(--space-8);
}
.pressures-summary-text {
  margin: 0 0 var(--space-6);
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--text-muted);
}
/* R12 · removed off-guide ink-900 override; ge-button-dark-gray renders the standard charcoal secondary here (DDS p.19) */

/* ── CAPABILITIES ──────────────────────────────────────────── */
#capabilities:has(.ind-page-inner) {
  background: var(--ink-50);
  padding: var(--space-8) var(--space-5) var(--space-9);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* No intro paragraph here, so give the title more room before the rows */
#capabilities:has(.ind-page-inner) .section-h2 { margin-bottom: var(--space-6); }
.cap-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: background var(--m-base) var(--ease-out), border-color var(--m-base) var(--ease-out);
  margin-bottom: var(--space-1);
  overflow: hidden;
}
.cap-row.is-open { background: var(--bg-card-hover); border-color: var(--border-strong); }
.cap-trigger {
  padding: var(--space-6) var(--space-5);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* R4 · Bebas index → 15px overline size */
.cap-index {
  font-family: var(--font-overline);
  font-size: var(--fs-eyebrow);
  color: var(--text-dim);
  min-width: 28px;
}
.cap-trigger h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-h4);
  color: var(--text);
  margin: 0;
}
.cap-trigger p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-dim);
  margin: var(--space-1) 0 0;
  line-height: var(--lh-body);
}
/* No vertical padding on the animated panel — residual padding would leave a
   gap below the trigger when collapsed (max-height:0 can't shrink padding).
   The inner row carries the open-state bottom spacing instead. */
.cap-body { padding: 0 var(--space-5) 0 var(--space-8); }
.cap-body > .row { margin-bottom: var(--space-5); }
.sub-cap-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-4);
  transition: background var(--m-base) var(--ease-out), border-color var(--m-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sub-cap-card:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
/* Body grows to fill the card; the divider's margin-top:auto then drops the
   product list onto a common bottom baseline across every card in the row. */
.sub-cap-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sub-cap-title {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-h5);
  color: var(--text);
  margin: 0 0 var(--space-2);
}
/* R6 · fs-sm → 14px reading text */
.sub-cap-desc {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-3);
}
/* Hairline rule separates the product list from the description paragraph.
   Scoped to #capabilities and forced with !important so the CMS's global <hr>
   styles can't hide it — Bootstrap dims <hr> to opacity:.25, and some CMS
   themes reset the border or set display:none. */
#capabilities:has(.ind-page-inner) .sub-cap-divider {
  display: block !important;
  width: 100% !important;           /* CMS applies margin-inline:auto, which in this
                                       flex column drops the <hr> to 0 width and hides
                                       it — force full width + zero inline margins */
  height: 0;
  border: 0;
  border-top: 1px solid var(--border-strong) !important;
  opacity: 0.66 !important;
  /* top:auto bottom-anchors the products; left/right MUST be 0 (not auto) so the
     flex item stretches to full width instead of collapsing. */
  margin: auto 0 var(--space-3) !important;
}
/* R6 · fs-sm → 14px */
.sub-cap-tools {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-dim);
  line-height: var(--lh-body);
  margin-bottom: 0;
}
/* Product names link to their product pages; deep-blue + medium weight so they
   read as interactive and stand apart from the muted description. */
.sub-cap-tools a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--m-base) var(--ease-out);
}
.sub-cap-tools a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Consistent action row: holds the link where present, reserved (empty) where
   not, so product lists bottom-align on cards with and without a link.
   R6 · fs-xs → 14px reading text (min-height budget updated to match). */
.sub-cap-foot {
  margin-top: var(--space-3);
  min-height: calc(var(--fs-body) * 1.6);
  display: flex;
  align-items: flex-end;
}
.sub-cap-cta { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; }
/* HubSpot renders a [[hubspot_form_button]] token as a real <button>, which brings
   browser default chrome (grey border, grey fill, padding) — so a token given a
   TEXT-LINK class read as a boxed button. Strip the chrome so modal triggers and
   plain links are visually identical. Applies to any element type. */
button.sub-cap-cta, button.cta-consult {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.sub-cap-cta:hover { text-decoration: underline; text-underline-offset: 2px; }
.cta-product { color: var(--accent); }      /* deep-blue link */
.cta-content { color: var(--accent); }      /* deep-blue link */
.cta-consult { color: var(--accent); }      /* deep-blue link */

/* ── CUSTOMER STORY ────────────────────────────────────────── */
#customer-story:has(.ind-page-inner) { background: var(--bg); padding: var(--space-9) var(--space-5); }
.story-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-7);
  margin-top: var(--space-5);
}
/* R4 · Bebas overline → 15px */
.story-featured-label {
  font-family: var(--font-overline);
  font-size: var(--fs-eyebrow);
  color: var(--eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.story-quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--text);
  margin-bottom: var(--space-4);
  line-height: var(--lh-h3);
}
.story-body {
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--space-5);
}
/* R6 · fs-sm → 14px */
.story-attr { font-size: var(--fs-body); color: var(--text-dim); }
.metric-card {
  background: var(--bg-surface);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  text-align: center;
  margin-bottom: var(--space-3);
}
.metric-value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--emphasis); display: block; }
/* R6 · fs-xs → 14px caption */
.metric-label { font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-dim); margin-top: var(--space-1); display: block; }

/* ── STORY CARD REDESIGN ───────────────────────────────────── */
.story-card-body {
  display: flex;
  flex-direction: row;
  min-height: 400px;
}
.story-card-image-col {
  flex: 0 0 46%;
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.story-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-card-text-col {
  flex: 1;
  padding: var(--space-7);
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.story-inline-metrics {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.story-inline-metric {
  flex: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-3);
  text-align: center;
}
.story-inline-metric .metric-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--emphasis);
  display: block;
}
/* R6 · fs-xs → 14px caption */
.story-inline-metric .metric-label {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-dim);
  margin-top: var(--space-1);
  display: block;
  line-height: 1.25;
}
@media (max-width: 767px) {
  .story-card-body        { flex-direction: column; }
  .story-card-image-col   { flex: 0 0 auto; height: 220px; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .story-card-text-col    { padding: var(--space-6) var(--space-5); }
  .story-inline-metrics   { gap: var(--space-2); }
}

/* ── WHY GOENGINEER / SERVICES ─────────────────────────────── */
#services:has(.ind-page-inner) {
  background: var(--bg-surface);
  padding: var(--space-9) var(--space-5);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.differentiators {
  margin-top: var(--space-8);
  background: var(--bg-card);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  padding: var(--space-6);
  margin-bottom: var(--space-7);
}
.diff-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.diff-icon {
  font-size: 22px;
  color: var(--text-dim);
  margin-bottom: var(--space-3);
}
/* R3 · display letter-spacing removed */
.diff-figure {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: var(--space-1);
}
/* R6 · fs-xs → 14px reading text */
.diff-sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-dim);
  line-height: var(--lh-body);
}
#services:has(.ind-page-inner) .service-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-5);
  height: 100%;
  transition: background var(--m-base) var(--ease-out), border-color var(--m-base) var(--ease-out);
}
#services:has(.ind-page-inner) .service-card:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
/* R11 · cascade guards: the unscoped services-pages .service-card (layer 20)
   carries a ::before green wipe + cursor:pointer. Higher specificity here
   erases both on the industry card, which is not clickable. */
#services:has(.ind-page-inner) .service-card::before { content: none; }
#services:has(.ind-page-inner) .service-card { cursor: default; }
#services:has(.ind-page-inner) .service-card.highlight { border-left: 3px solid var(--ge-green); }
#services:has(.ind-page-inner) .service-card h3 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; color: var(--text); margin-bottom: var(--space-3); }
#services:has(.ind-page-inner) .service-card p  { font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); line-height: var(--lh-body); margin: 0; }

/* ── RESOURCES ─────────────────────────────────────────────── */
#resources:has(.ind-page-inner) { background: var(--bg); padding: var(--space-9) var(--space-5); }
.resource-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-5);
  cursor: pointer;
  transition: background var(--m-base) var(--ease-out), border-color var(--m-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  height: 100%;
}
.resource-card:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
/* R4 · Bebas overline → 15px */
.resource-type { font-family: var(--font-overline); font-size: var(--fs-eyebrow); letter-spacing: 0.14em; color: var(--eyebrow); text-transform: uppercase; }
.resource-title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; color: var(--text); margin: var(--space-3) 0 0; line-height: var(--lh-h4); }
/* R6 · 13px → 14px */
.resource-cta { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; color: var(--accent); margin-top: var(--space-5); }

/* ── FAQ ───────────────────────────────────────────────────── */
#faq:has(.ind-page-inner) {
  background: var(--bg-surface);
  padding: var(--space-9) var(--space-5);
  border-top: 1px solid var(--border);
}
/* Keyed on the accordion attribute, not the page type: the industry page and the
   eight services pages share this component. (Scoping these to
   :has(.ind-page-inner) let the questions fall back to the global h3 size on the
   services pages — the FAQ text jumped. PLM's static card FAQ has no
   [data-accordion] and keeps its own .faq-item h4 rules below.) */
[data-accordion] .faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  transition: border-color var(--m-base) var(--ease-out);
  margin-bottom: var(--space-1);
}
[data-accordion] .faq-item.is-open { border-color: var(--border-strong); }
/* Full-row hit area: the card owned the padding, so only the text line itself was
   clickable and clicks in the padding did nothing. Padding moves to the trigger
   (which fills the closed row) and to the body's children — NOT the body itself,
   whose max-height:0 collapse would still leave the padding as visible height. */
[data-accordion] .faq-item { padding: 0; }
[data-accordion] [data-accordion-trigger] { padding: var(--space-4) var(--space-5); }
[data-accordion] [data-accordion-body] > * { padding-left: var(--space-5); padding-right: var(--space-5); }
[data-accordion] [data-accordion-body] > *:last-child { padding-bottom: var(--space-4); }
[data-accordion] .faq-item h3 { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; color: var(--text); margin: 0; line-height: var(--lh-h5); }
.faq-answer { font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); line-height: var(--lh-body); margin: var(--space-3) 0 var(--space-1); }

/* ── FINAL CTA ─────────────────────────────────────────────── */
#final-cta:has(.ind-page-inner) {
  background: var(--bg-surface);
  padding: var(--space-9) var(--space-5);
  border-top: 1px solid var(--border);
  text-align: center;
}
#final-cta:has(.ind-page-inner) h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: var(--lh-h2); color: var(--text); margin-bottom: var(--space-4); }
#final-cta:has(.ind-page-inner) p  { font-size: 1rem; color: var(--text-muted); line-height: var(--lh-body); margin-bottom: var(--space-7); }

/* ── SECTION HEADINGS ──────────────────────────────────────── */
/* R3 · display letter-spacing removed */
.section-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  line-height: var(--lh-h2);
  color: var(--text);
  margin: var(--space-3) 0;
}

/* ── ELEVATION · shared quiet card shadow (e·1) ────────────── */
.pressure-card,
.cap-row,
.sub-cap-card,
.story-card,
.metric-card,
#services:has(.ind-page-inner) .service-card,
.resource-card,
#faq:has(.ind-page-inner) .faq-item,
.differentiators {
  box-shadow: var(--e-1);
}

.pressure-image {
  display: block;
  width: calc(100% + 2 * var(--space-5));
  max-width: none; /* site base.css sets img{max-width:100%}, which clamps the full-bleed width and misaligns the card images */
  height: 180px;
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-5);
  object-fit: cover;
}

.cap-icon {
  font-size: 20px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.service-flip-card {
  perspective: 1200px;
  height: 300px;
  border-radius: var(--r-lg);
  cursor: pointer;
}
.service-flip-card:focus-visible {
  outline: 2px solid var(--ge-indigo);
  outline-offset: 3px;
}

.service-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform var(--m-page) var(--ease-in-out);
  transform-style: preserve-3d;
}

.service-flip-card:hover .service-flip-inner,
.service-flip-card.is-flipped .service-flip-inner {
  transform: rotateY(180deg);
}

.service-flip-front,
.service-flip-back {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  backface-visibility: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--e-1);
}

.service-flip-front {
  display: flex;
  flex-direction: column;
}

/* Corner affordance so users know the card flips.
   Uses an inline SVG (not Font Awesome) so CMS/icon-font quirks
   can't swap the glyph or throw off centering.
   display:flex is !important so CMS global rules can't strip it.
   R7 · white chip on imagery keeps light-surface tokens. */
.service-flip-indicator {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ge-charcoal);
  border: 1px solid var(--ink-150);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0;
  padding: 0;
  box-sizing: border-box;
}
.service-flip-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.service-flip-back {
  transform: rotateY(180deg);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-flip-back p {
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: var(--lh-body);
  margin: 0;
}

.service-image {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.service-front-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-5);
}

.service-front-content h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 576px) {
  .story-card { padding: var(--space-6) var(--space-5); }
  .cap-body { padding-left: var(--space-5); }
}


/* ═══════════════════════════════════════════════════════════════
   BLENDED LIGHT / DARK THEME  (brand-green accent + dark moments)
   DARK  : hero · trust strip · customer story · final CTA
   LIGHT : pressures · capabilities · services · resources · FAQ

   R7 · Dark sections re-declare ONLY the approved dark-mode remap
   values (DDS p.12). No hand-picked darks; nothing below ink·900.
   The four dark bands share one base surface — separation comes
   from band borders and raised card tones, per "Restraint Is the
   Design". Every descendant component adapts via the tokens.
═══════════════════════════════════════════════════════════════ */

/* Eyebrows — green-dark on light (R4), bright green on dark */
.section-label   { color: var(--eyebrow); }
.hero-badge-text { color: var(--eyebrow); }

/* ── DARK SECTIONS · approved remap only ───────────────────── */
#hero:has(.ind-page-inner),
#trust-strip:has(.ind-page-inner),
#services:has(.ind-page-inner),
#final-cta:has(.ind-page-inner) {
  --bg:            var(--ink-900);            /* #0E1013 · darkest approved surface */
  --bg-surface:    #1A1D22;                   /* surface-raised · p.12 */
  --bg-card:       #1A1D22;                   /* raised card */
  --bg-card-hover: #1F2329;                   /* card · p.12 */
  --text:          var(--ink-50);             /* #F5F7F9 = dark text-primary · p.12 */
  --text-muted:    rgba(255,255,255,0.65);    /* dark text-secondary · p.12 */
  --text-dim:      var(--ink-300);            /* AA-cleared on ink-900 */
  --text-caption:  var(--ink-300);
  --border:        rgba(255,255,255,0.08);    /* dark border · p.12 */
  --border-strong: rgba(255,255,255,0.16);    /* derived · 2× border alpha */
  --eyebrow:       var(--ge-green);           /* bright green pops on dark */
  --emphasis:      var(--ge-green);           /* stat / metric / hero highlight */
  color: var(--ink-50);
  background: var(--bg);
}

/* Customer story now sits on the light rhythm (Why GoEngineer took the dark slot) */
#customer-story:has(.ind-page-inner) .story-card { border: 1px solid var(--border); }

/* ── HERO · full-bleed image (blends into the dark hero) ──────
   R5 · photo-legibility mask + tone filter are functional overlays,
   not decorative gradients. */
.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56%;
  z-index: 0;
  pointer-events: none;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Tame the blown-out sunset highlight so the sun isn't harsh on the eyes */
  filter: brightness(0.66) contrast(0.87) saturate(0.88);
  /* Angled separation — image sits closer to the text at the bottom-left,
     then the diagonal edge rises toward the upper-right. */
  -webkit-mask-image: linear-gradient(106deg, transparent 26%, #000 50%);
          mask-image: linear-gradient(106deg, transparent 26%, #000 50%);
}
@media (max-width: 900px) {
  /* #hero is display:block — .row and .hero-media stack in normal flow */
  .hero-media { position: relative; width: 100%; height: 220px; }
  .hero-media img {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ── TRUST STRIP · logo wall on the dark band ─────────────────
   R7 · the hand-picked --text-dim override is gone; ink-300 from
   the remap already clears AA on ink-900. */
#trust-strip:has(.ind-page-inner) .trust-logos {
  opacity: 1;                 /* logos carry their own opacity */
  flex-wrap: nowrap;          /* keep all eight on one line */
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 577px) and (max-width: 992px) {
  #trust-strip:has(.ind-page-inner) .trust-logos { flex-wrap: wrap; }
}

/* Customer logo wall — swap each text name for <img class="trust-logo-img" src="…" alt="…" />.
   Any transparent-background logo is normalized to a uniform light grey so the row stays
   cohesive on the dark strip. Tune height to match the mockup weight. */
.trust-logo-img {
  max-height: 22px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
  flex: 0 0 auto;
  transition: opacity var(--m-base) var(--ease-out);
}
.trust-logo-img:hover { opacity: 1; }

/* ── CMS EDITOR WRAPPERS · Bootstrap field-editor structure ────
   Matches ge-cms-page-editor > container-fluid > row > col pattern
   used by the in-house CMS. Resets Bootstrap container padding so
   section backgrounds and spacing stay identical to the mockup.
──────────────────────────────────────────────────────────────── */
.ge-cms-page-editor { display: block; }

.ge-cms-page-editor > .container-fluid {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

.ind-page-inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* R10 · raw px snapped to tokens (96/24/64 = s9/s5/s8) */
.ind-page-inner--hero {
  padding: var(--space-9) var(--space-5) var(--space-8);
  position: relative;
  z-index: 1;
}

.ind-page-inner--narrow { max-width: 800px; }
.ind-page-inner--cta    { max-width: 600px; }

/* ██████████████████████████████████████████████████████████████
   20 · SERVICE PAGES (nine pages · Bootstrap 5 + TinyMCE CMS)
   Page requirements: Bootstrap 5 CSS + bootstrap.bundle.js (tabs,
   pills, collapse, modals via data attributes; no custom JS) ·
   Google Fonts: Bebas Neue · Inter 600-800 · Open Sans 300-700 ·
   Font Awesome 6 (PLM page only). This file goes in the <head> of
   live pages AND in TinyMCE content_css (editor rules in layer 30).
   ██████████████████████████████████████████████████████████████ */
/* ==========================================================================
   03 · LAYOUT
   ========================================================================== */
/* Full-bleed layout to match the other service pages — .ge-container is a
   plain wrapper; horizontal rhythm comes from .section / .hero padding. */
.ge-container{width:100%}
.section{padding:var(--s9) var(--s7)}
.section.alt,.section--alt{background:var(--ink-50)}
.section--dark{background:var(--ink-900);color:var(--ink-100)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--white)}
.section--dark p,.section--dark li{color:var(--ink-300)}
.section--tight{padding-top:var(--s7);padding-bottom:var(--s7)}
/* Sections whose content is wrapped in .ge-container drop side padding */
.section--contained{padding-left:0;padding-right:0}
/* ==========================================================================
   04 · TYPOGRAPHY · EYEBROWS & SECTION HEADERS
   R4 · eyebrow ink = green-dark on light, bright green on dark. All Bebas
   overlines run at --fs-eyebrow (15px) per DDS p.14.
   ========================================================================== */
.eyebrow{display:block;font-family:var(--ff-overline);font-size:var(--fs-eyebrow);font-weight:400;color:var(--ge-green-dark);letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s4)}
.section--dark .eyebrow{color:var(--ge-green)}
.section--dark .section-eyebrow{color:var(--ge-green)}
.section--dark .section-intro{color:var(--ink-300)}
.section--dark .fork-note,.section--dark .path-note,.section--dark .tier-note{color:var(--ink-300)}
/* dark-on-dark: the migration-driver band is ink-900 itself; R7 · panel is
   the approved raised surface, not a hand-picked white wash */
.section--dark .migration-driver{background:#1A1D22;border:1px solid var(--ink-700)}
.section-eyebrow{font-family:var(--ff-overline);font-size:var(--fs-eyebrow);font-weight:400;color:var(--ge-green-dark);letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s3)}
.section-heading{font-family:var(--ff-display);font-size:2.125rem;font-weight:700;line-height:1.15;margin-bottom:var(--s3);color:var(--ink-900)}

/* ==========================================================================
   07 · HERO
   Base hero = 64px vertical rhythm, 2.75rem H1.
   .hero-lg      = taller marketing hero (96px top / 64px bottom, 3rem H1).
   .hero--contained = container-based hero (PLM page).
   ========================================================================== */
.hero{position:relative;padding:var(--s8) var(--s7);background:var(--ink-900);overflow:hidden}
.hero-lg{padding:var(--s9) var(--s7) var(--s8)}
.hero h1{font-family:var(--ff-display);font-size:2.75rem;font-weight:700;color:var(--white);line-height:1.10;margin-bottom:var(--s5)}
.hero-lg h1{font-size:3rem}
.hero h1 em{font-style:normal;color:var(--ge-green)}
.hero-content{position:relative;z-index:3;max-width:580px}
/* ink-300 (not ink-400): body-size text on the ink-900 hero must clear AA */
.hero-sub{font-size:16px;line-height:1.65;color:var(--ink-300);max-width:500px;margin-bottom:var(--s6)}
.hero-ctas{display:flex;gap:var(--s3)}
/* CTA row modifier — nested .row holding stacked CTA buttons. Adds a vertical
   gutter so buttons don't touch when columns stack below lg, and centers the
   mixed button/paragraph columns. Author as class="row cta-row". */
.cta-row{--bs-gutter-y:var(--s3);align-items:center}
.cta-row p{margin-bottom:0}
.hero-img-area{position:absolute;top:0;right:0;width:48%;height:100%;z-index:0;overflow:hidden}
/* R5 · functional photo-legibility scrim over imagery — not a decorative
   color gradient. Decorative gradients remain forbidden. */
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,var(--ink-900) 30%,rgba(14,16,19,.7) 60%,rgba(14,16,19,.3) 100%);z-index:1}
/* R5 · 1px grid-line texture (technical grid), R8 · token-hue tint */
.hero-grid{position:absolute;top:0;right:0;width:48%;height:100%;z-index:2;opacity:.04;background-image:linear-gradient(var(--ge-green) 1px,transparent 1px),linear-gradient(90deg,var(--ge-green) 1px,transparent 1px);background-size:var(--s7) var(--s7);clip-path:polygon(12% 0,100% 0,100% 100%,0% 100%)}
/* ==========================================================================
   08 · CRED BAR
   ========================================================================== */
.cred-bar{border-bottom:1px solid var(--ink-150)}
.cred-stat{display:flex;flex-direction:column;justify-content:center;padding-right:var(--s6);margin-right:var(--s6);border-right:1px solid var(--ink-150);height:var(--s7)}
.cred-stat .num{font-family:var(--ff-display);font-size:1.5rem;font-weight:700;line-height:1.10;color:var(--ink-900)}
/* R6 · 12px → 14px reading text */
.cred-stat .label{font-size:14px;color:var(--ink-500);font-weight:500}
/* Structural bar as a table: stats cell | expanding spacer | one cell per
   logo. Tables are native TinyMCE content and survive the builder's save. */
.cred-table{width:100%;border-collapse:collapse}
.cred-table td{border:0;vertical-align:middle;padding:var(--s5) 0;background:transparent}
.cred-stats-cell{white-space:nowrap}
/* inline-flex column: stats sit side by side, number stacked above its label */
.cred-stats-cell .cred-stat{display:inline-flex;flex-direction:column;vertical-align:middle}
/* width:100% makes the spacer swallow ALL slack: stats cluster left at content
   width, logo cells get pushed hard against the right edge */
.cred-spacer-cell{width:100%}
/* min-width keeps these cells incompressible when the spacer claims 100%,
   and the img override frees logos from max-width:100% of a squeezed cell */
.cred-logo-cell{width:132px;min-width:132px;text-align:center;padding-left:var(--s4)}
.cred-logo-cell img{max-width:none}
/* Class-proof positional selectors — identical rules keyed on structure
   alone, in case the CMS strips classes on save. td1=stats, td2=spacer, td3+=logos */
.cred-bar table{width:100%;border-collapse:collapse}
.cred-bar table td{border:0;vertical-align:middle;padding:var(--s5) 0;background:transparent}
.cred-bar td:first-child{white-space:nowrap}
.cred-bar td:first-child .cred-stat{display:inline-flex;flex-direction:column;vertical-align:middle}
.cred-bar td:nth-child(2){width:100%}
.cred-bar td:nth-child(n+3){width:132px;min-width:132px;text-align:center;padding-left:var(--s4)}
.cred-bar td:nth-child(n+3) img{max-width:none}

/* legacy column-variant support · grayscale normalizes PARTNER logos only —
   never applied to GoEngineer's own mark (p.12: no CSS-filter logo inversion) */
.cred-bar img{width:100px;max-width:100%;height:auto;max-height:40px;object-fit:contain;opacity:.75;filter:grayscale(1)}
.cred-bar img:hover{opacity:1}
/* ==========================================================================
   09 · QUOTE BAR
   ========================================================================== */
.quote-bar{padding:var(--s7);background:var(--ink-900);display:flex;align-items:flex-start;gap:var(--s5)}
.quote-line{width:3px;min-height:48px;align-self:stretch;background:var(--ge-green);border-radius:2px;flex-shrink:0}
.quote-content{max-width:720px}
.quote-text{font-size:16px;line-height:1.7;color:var(--ink-300);font-style:italic;margin-bottom:var(--s4)}
/* ink-300 (not ink-500): attribution sits on the ink-900 band and must clear AA */
.quote-attr{font-size:14px;color:var(--ink-300)}
.quote-attr strong{color:var(--ge-green);font-weight:600}
.quote-logo-ph{display:inline-flex;padding:var(--s1) var(--s3);margin-left:var(--s3);vertical-align:middle;border:1px solid var(--ink-700);border-radius:var(--r-sm);font-size:11px;color:var(--ink-500);letter-spacing:.05em;text-transform:uppercase}
/* ==========================================================================
   10 · SERVICE GRID & CARDS
   ========================================================================== */
.services-grid{--bs-gutter-x:1px;--bs-gutter-y:1px;background:var(--ink-150);border:1px solid var(--ink-150);border-radius:var(--r-md);overflow:hidden}
.service-card{background:var(--white);padding:var(--s6) var(--s5);cursor:pointer;position:relative;transition:background var(--m-fast) var(--ease-out)}
/* R13 · hover = ink-900 dark-band flip (p. dark-band rules: ink-900 never #000, text ≥ ink-300).
   Link + icon go brand-green on dark (green-on-dark accent precedent: eyebrows/dark bands);
   deep blue stays the link ink on light surfaces only. */
.service-card:hover{background:var(--ink-900)}
.service-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--ge-green);transition:height var(--m-slow) var(--ease-out)}
.service-card:hover::before{height:100%}
.service-card.link-out::before{background:var(--ge-cyan)}
.card-icon{margin-bottom:var(--s4)}
.card-icon:not(.card-icon--brand) svg{width:var(--s6);height:var(--s6);stroke:var(--ink-300);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--m-fast)}
/* A brand mark (product logo) dropped into a card icon slot: it carries its own
   artwork and must NOT inherit the stroke recolour above, which was repainting
   pasted-in logo SVGs green on hover. One height for every mark also replaces the
   per-logo inline styles that made sizes inconsistent card to card.
   Usage: <div class="card-icon card-icon--brand"><img|svg …></div> */
.card-icon--brand{display:flex;align-items:center;height:var(--s6)}
.card-icon--brand img,.card-icon--brand svg{height:100%;width:auto;max-width:none;stroke:none}
/* R4 · green-dark ratified as interactive-state accent ink */
.service-card:hover .card-icon:not(.card-icon--brand) svg{stroke:var(--ge-green)}
.service-card:hover h3{color:var(--white)}
.service-card:hover p{color:var(--ink-300)}
.service-card h3,.service-card p,.card-link{transition:color var(--m-fast) var(--ease-out)}
.service-card:hover .card-link{color:var(--ge-green)}
.service-card.link-out:hover .card-icon:not(.card-icon--brand) svg{stroke:var(--ge-cyan)}
.service-card.link-out:hover .card-link{color:var(--ge-cyan)}
.service-card h3{font-family:var(--ff-display);font-size:1.125rem;font-weight:600;color:var(--ink-900);margin-bottom:var(--s2);line-height:1.30}
.service-card p{font-size:14px;line-height:1.55;color:var(--ink-500);margin-bottom:var(--s4)}
/* R6 · 12px → 14px */
.card-link{font-size:14px;font-weight:600;color:var(--ge-deep-blue);text-decoration:none;display:inline-flex;align-items:center;gap:var(--s1)}
.service-card.link-out .card-link{color:var(--ge-cyan)}
.card-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
/* ==========================================================================
   11 · FORK · two-path comparison (on-prem/cloud, legacy/platform)
   ========================================================================== */
.fork-container{--bs-gutter-x:1px;--bs-gutter-y:1px;background:var(--ink-150);border:1px solid var(--ink-150);border-radius:var(--r-md);overflow:hidden;margin-top:var(--s7)}
.fork-card{background:var(--white);padding:var(--s6)}
/* tag = DDS p.23 badge spec: sans 700 · 11px · Title Case as authored · 4×8 */
.fork-card .tag{font-family:var(--ff-sans);font-size:var(--fs-xs);font-weight:700;padding:var(--s1) var(--s2);border-radius:var(--r-sm);display:inline-block;margin-bottom:var(--s4)}
.fork-card.onprem .tag,.fork-card.legacy .tag{background:var(--ink-100);color:var(--ink-500)}
.fork-card.cloud .tag,.fork-card.platform .tag{background:rgba(0,174,239,.10);color:var(--ink-900)}
.fork-card h3{font-family:var(--ff-display);font-size:1.125rem;font-weight:600;color:var(--ink-900);margin-bottom:var(--s3)}
.fork-card>p{font-size:14px;line-height:1.55;color:var(--ink-500);margin-bottom:var(--s4)}
.fork-card .when{font-size:14px;font-weight:700;color:var(--ink-900);margin-bottom:var(--s2)}
.fork-card ul{list-style:none;padding:0;margin-bottom:var(--s4)}
.fork-card ul li{font-size:14px;color:var(--ink-500);line-height:1.65;padding-left:var(--s4);position:relative}
.fork-card ul li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ink-300)}
.fork-card .fork-links{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--ink-150)}
/* R6 · 12px → 14px */
.fork-card .fork-links a{display:inline-flex;align-items:center;gap:var(--s1);font-size:14px;font-weight:600;color:var(--ge-deep-blue);text-decoration:none;margin-right:var(--s4);line-height:2.2}
.fork-card .fork-links a:hover{text-decoration:underline;text-underline-offset:2px}
.fork-note{margin-top:var(--s6);padding:var(--s5) var(--s6);background:var(--white);border-radius:var(--r-md);border:1px solid var(--ink-150);border-left:3px solid var(--ge-green)}
.fork-note p{font-size:14px;line-height:1.55;color:var(--ink-500)}
.fork-note strong{color:var(--ink-900);font-weight:700}
.fork-note a{color:var(--ge-deep-blue);font-weight:600;text-decoration:none}
.fork-note a:hover{text-decoration:underline;text-underline-offset:2px}
/* ==========================================================================
   12 · TIER CARDS (pricing / engagement tiers)
   Grid margins are applied per-page with utilities (.u-mt-7 / .u-mb-6).

   MARKUP CONTRACT — .tier-grid is a ROW MODIFIER, not a layout container.
   It sets 1px gutters and paints the ink-150 hairline background; Bootstrap
   supplies the columns. Author it as:
     <div class="row tier-grid">
       <div class="col-12 col-lg-4"><div class="tier-card h-100">…</div></div>
   Without .row + .col-*, the cards stack full-width and their white
   backgrounds fuse into one panel. Same contract as .services-grid,
   .fork-container, .track-grid, .deploy-grid, .source-grid, .dest-grid.
   ========================================================================== */
.tier-grid{--bs-gutter-x:1px;--bs-gutter-y:1px;background:var(--ink-150);border:1px solid var(--ink-150);border-radius:var(--r-md);overflow:hidden}
.tier-card{background:var(--white);padding:var(--s6) var(--s5);display:flex;flex-direction:column}
/* tier-tag = DDS p.23 badge spec — a label, not a button */
.tier-card .tier-tag{font-family:var(--ff-sans);font-size:var(--fs-xs);font-weight:700;padding:var(--s1) var(--s2);border-radius:var(--r-sm);display:inline-block;align-self:flex-start;margin-bottom:var(--s4);background:var(--ink-100);color:var(--ink-500)}
/* featured/highlight tag stays solid brand green + ink-900, per DDS "Recommended" tag */
.tier-card.featured .tier-tag{background:var(--ge-green);color:var(--ink-900)}
.tier-card h3{font-family:var(--ff-display);font-size:1.125rem;font-weight:600;color:var(--ink-900);margin-bottom:var(--s2);line-height:1.30}
.tier-card .tier-tagline{font-size:14px;color:var(--ink-400);font-style:italic;margin-bottom:var(--s4)}
.tier-card .tier-desc{font-size:14px;line-height:1.55;color:var(--ink-500);margin-bottom:var(--s4)}
.tier-card ul{list-style:none;padding:0;flex:1}
.tier-card ul li{font-size:14px;color:var(--ink-500);line-height:1.7;padding-left:var(--s4);position:relative}
.tier-card ul li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ink-300)}
/* R6 · 12px → 14px */
.tier-card .tier-note{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--ink-150);font-size:14px;color:var(--ink-400);line-height:1.55}
/* margin-top:auto pins the CTA to the card floor so buttons align across an
   equal-height row (.h-100). Gap kept as padding so it survives the auto. */
.tier-card .tier-cta{margin-top:auto;padding-top:var(--s5)}
/* ==========================================================================
   13 · METHOD STEPS (numbered vertical list) & PROCESS TRACK (interactive)
   ========================================================================== */
.method-steps{max-width:720px}
.method-step{display:flex;gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--ink-150)}
.method-step:last-child{border-bottom:none}
.method-step .step-marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:var(--s7)}
.method-step .step-num{font-family:var(--ff-display);font-size:14px;font-weight:700;color:var(--ink-300);width:var(--s6);height:var(--s6);border-radius:50%;border:1px solid var(--ink-150);display:flex;align-items:center;justify-content:center}
.method-step .step-line{width:1px;flex:1;background:var(--ink-150);margin-top:var(--s2)}
.method-step:last-child .step-line{display:none}
.method-step h4{font-family:var(--ff-display);font-size:1.125rem;font-weight:600;color:var(--ink-900);margin-bottom:var(--s2)}
.method-step p{font-size:14px;line-height:1.55;color:var(--ink-500)}
.process-track{display:flex;position:relative}
.process-track::before{content:'';position:absolute;top:32px;left:var(--s7);right:var(--s7);height:2px;background:var(--ink-150)}
.process-step{flex:1;position:relative;z-index:1;text-align:center;padding:0 var(--s3);cursor:pointer;user-select:none}
a.process-step,a.process-step:hover{color:inherit;text-decoration:none}
/* Static (non-tabbed) process track — display-only steps: no pointer, no hover states */
.process-track--static .process-step{cursor:default}
/* Static (display-only) tracks: outline circles, each step accented with a
   brand-palette hue (identity use, per the lifecycle icon set precedent) —
   no fill/pointer so they don't read as clickable */
.process-step,.method-steps .method-step{--step-hue:var(--ge-green);--step-ink:var(--ink-900)}
.process-track--static .process-step{--step-hue:var(--ge-green-dark)}
.process-step:nth-child(2),.process-track>li:nth-child(2)>.process-step,.method-steps .method-step:nth-child(2){--step-hue:var(--ge-deep-blue);--step-ink:var(--white)}
.process-step:nth-child(3),.process-track>li:nth-child(3)>.process-step,.method-steps .method-step:nth-child(3){--step-hue:var(--ge-cyan)}
.process-step:nth-child(4),.process-track>li:nth-child(4)>.process-step,.method-steps .method-step:nth-child(4){--step-hue:var(--ge-orange)}
.process-step:nth-child(5),.process-track>li:nth-child(5)>.process-step,.method-steps .method-step:nth-child(5){--step-hue:var(--ge-gold)}
.process-step:nth-child(6),.process-track>li:nth-child(6)>.process-step,.method-steps .method-step:nth-child(6){--step-hue:var(--ge-iris)}
.process-step:nth-child(7),.process-track>li:nth-child(7)>.process-step,.method-steps .method-step:nth-child(7){--step-hue:var(--ge-indigo);--step-ink:var(--white)}
.process-track>li:nth-child(8)>.process-step{--step-hue:var(--ge-green-dark)}
/* method-steps (PDM & Manage) reuse the same hue set on their number + rail */
.method-step .step-num{color:var(--step-hue);border-color:var(--step-hue)}
.method-step .step-line{background:color-mix(in srgb, var(--step-hue) 35%, var(--white))}
.method-step:hover .step-num{background:var(--step-hue);color:var(--step-ink)}
.process-track--static .step-circle{background:var(--white);border-color:var(--step-hue)}
.process-track--static .step-circle svg{stroke:var(--step-hue)}
.process-track--static .step-circle::after{background:var(--step-hue)}
/* Steps whose circle already shows its own number don't get the corner badge too
   (M&A roadmap read "01" twice). Icon-only circles are unaffected. */
.process-track--static .step-circle:has(> span)::after{content:none}
/* ── ROAD VARIANT ────────────────────────────────────────────
   Journey track drawn as a highway: map pins standing on an asphalt band
   with a dashed centre line. Reuses the .process-step / .step-circle /
   .step-title markup of the static track, so this is ONE new class plus
   its own rules — not a parallel component. Numbers live in a <span>
   inside the circle and are counter-rotated so they read upright.
   Used by: mergers-acquisitions-services. */
.process-track--road{position:relative;padding-top:var(--s5);gap:var(--s4)}
.process-track--road::before{content:'';position:absolute;left:0;right:0;top:calc(var(--s5) + var(--s8) * .7 + var(--s2));height:var(--s6);background:var(--ink-900);border-top:2px solid var(--ink-500);border-bottom:2px solid var(--ink-500);z-index:0}
.process-track--road::after{content:'';position:absolute;left:0;right:0;top:calc(var(--s5) + var(--s8) * .7 + var(--s2) + var(--s6) / 2 - 1px);height:2px;background:repeating-linear-gradient(90deg,var(--ge-green) 0 20px,transparent 20px 38px);z-index:1}
.process-track--road .process-step{position:relative;z-index:2}
/* rotate(-45deg) inflates the footprint to 1.414x the width, so the pin is sized
   at 0.7 * --s8 to land back near --s8 once rotated. */
.process-track--road .step-circle{width:calc(var(--s8) * .7);height:calc(var(--s8) * .7);border-radius:50% 50% 50% 0;transform:rotate(-45deg);margin:0 auto calc(var(--s6) + var(--s4));background:var(--white);border:3px solid var(--step-hue);box-shadow:var(--e-2)}
.process-track--road .step-circle>span{display:block;transform:rotate(45deg);font-family:var(--ff-display);font-size:15px;line-height:1;color:var(--ink-900)}
.process-track--road .process-step:hover .step-circle{background:var(--step-hue);border-color:var(--step-hue)}
.process-track--road .process-step[href]{cursor:pointer}
.process-track--road .process-step[href]:hover .step-title{color:var(--ge-green-dark)}
.process-track--road .process-step[href]:focus-visible .step-circle{outline:2px solid var(--ge-green);outline-offset:3px}
.process-track--static .process-step:hover .step-circle{border-color:var(--step-hue);background:var(--white);box-shadow:0 0 0 var(--s1) color-mix(in srgb, var(--step-hue) 18%, transparent)}
.process-track--static .process-step:hover .step-circle svg{stroke:var(--step-hue)}
.process-track--static .process-step:hover .step-title{color:var(--ink-900)}
/* Roadmap section markers (M&A) — pairs each detail section with its pin from
   the road track above, and offers a way back. Hue comes from data-step, reusing
   the same 8-hue set as .process-step so pin N always matches step N. Reusable on
   any numbered-journey page; drop the data-step attr and it falls back to green. */
.roadmap-marker{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.roadmap-marker .section-eyebrow{margin-bottom:0}
.roadmap-pin{--step-hue:var(--ge-green-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--white);border:2px solid var(--step-hue);box-shadow:var(--e-1)}
.roadmap-pin>span{display:block;transform:rotate(45deg);font-family:var(--ff-display);font-size:13px;line-height:1;color:var(--ink-900)}
.roadmap-pin[data-step="2"]{--step-hue:var(--ge-deep-blue)}
.roadmap-pin[data-step="3"]{--step-hue:var(--ge-cyan)}
.roadmap-pin[data-step="4"]{--step-hue:var(--ge-orange)}
.roadmap-pin[data-step="5"]{--step-hue:var(--ge-gold)}
.roadmap-pin[data-step="6"]{--step-hue:var(--ge-iris)}
.roadmap-pin[data-step="7"]{--step-hue:var(--ge-indigo)}
.roadmap-return{margin-top:var(--s5);font-size:14px}
.roadmap-return a{color:var(--ge-green-dark);text-decoration:none;font-weight:600}
.roadmap-return a:hover{text-decoration:underline}
.process-track--static .step-subtitle{line-height:1.5;max-width:210px;margin-left:auto;margin-right:auto}
/* margin-bottom separates the clickable step row from the panel it reveals */
.process-track.nav{flex-wrap:nowrap;padding-left:0;margin-bottom:var(--s7);list-style:none}
.step-circle{width:var(--s8);height:var(--s8);border-radius:50%;background:var(--ge-charcoal);border:2px solid var(--ge-charcoal);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s3);transition:all var(--m-base) var(--ease-out)}
.step-circle svg{width:var(--s5);height:var(--s5);stroke:var(--ink-50);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--m-base)}
/* R13 · charcoal-filled resting circles; active = brand green fill, black icon (black-on-green rule) */
.process-step:hover .step-circle{border-color:var(--ink-900);background:var(--ink-900)}
.process-step.active .step-circle{border-color:var(--step-hue);background:var(--step-hue)}
.process-step.active .step-circle svg{stroke:var(--step-ink)}
/* R8 · token-hue tint ring (focus-ring precedent, p.20) */
.process-step.active .step-circle{box-shadow:0 0 0 var(--s1) color-mix(in srgb, var(--step-hue) 25%, transparent)}
/* step number chip · deep blue (brand secondary), CSS counter so no markup change */
.process-track{counter-reset:ge-step}
.process-step{counter-increment:ge-step}
.step-circle{position:relative}
.step-circle::after{content:counter(ge-step,decimal-leading-zero);position:absolute;top:-6px;right:-10px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--ge-deep-blue);color:var(--white);font-family:var(--ff-display);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;border:2px solid var(--white);transition:background var(--m-base) var(--ease-out)}
.process-step.active .step-circle::after{background:var(--ink-900)}
.step-title{font-family:var(--ff-display);font-size:14px;font-weight:600;color:var(--ink-900);margin-bottom:var(--s1);transition:color var(--m-fast)}
/* R6 · 12px → 14px */
.step-subtitle{font-size:14px;color:var(--ink-400);font-weight:500}
.process-step.active .step-title{color:var(--ge-green-dark)}
.process-detail{margin-top:var(--s6);border-radius:var(--r-md);border:1px solid var(--ink-150);background:var(--white);overflow:hidden}
.process-detail-inner{padding:var(--s6)}
.process-detail-text h3{font-family:var(--ff-display);font-size:1.125rem;font-weight:600;margin-bottom:var(--s3);color:var(--ink-900)}
.process-detail-text p{font-size:14px;line-height:1.55;color:var(--ink-500);margin-bottom:var(--s3)}
/* R4 · Bebas overline 14px → 15px */
.process-detail-text .del-label{font-family:var(--ff-overline);font-size:var(--fs-eyebrow);font-weight:400;color:var(--ge-green-dark);letter-spacing:.12em;text-transform:uppercase;margin:var(--s4) 0 var(--s2)}
.process-detail-text ul{list-style:none;padding:0}
.process-detail-text ul li{font-size:14px;color:var(--ink-500);line-height:1.65;padding-left:var(--s4);position:relative}
.process-detail-text ul li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ink-300)}
/* ==========================================================================
   14 · AFTER GRID · MID CTA · IMAGE BREAK
   ========================================================================== */
.mid-cta{display:flex;align-items:center;justify-content:space-between;padding:var(--s5) var(--s6);border:1px solid var(--ink-150);border-radius:var(--r-md);background:var(--white)}
.mid-cta p{font-size:14px;color:var(--ink-500);line-height:1.55;max-width:480px}
.mid-cta p strong{color:var(--ink-900);font-weight:600}
.img-break{width:100%;height:240px;background:var(--ink-700);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--s2)}
.img-break-lg{height:280px}
/* ==========================================================================
   15 · MODAL SKIN — applied to Bootstrap 5 modals carrying the .ge-modal class
   Markup: <div class="modal fade ge-modal">…  Behavior comes from bootstrap.js.
   ========================================================================== */
.modal.ge-modal .modal-dialog{max-width:640px}
.modal.ge-modal .modal-content{border:none;border-radius:var(--r-lg);box-shadow:var(--e-3)}
.modal.ge-modal .modal-header{border-bottom:none;padding:var(--s6) var(--s6) 0;align-items:flex-start}
.modal.ge-modal .modal-title{font-family:var(--ff-display);font-size:1.5rem;font-weight:700;color:var(--ink-900);line-height:1.2;padding-right:var(--s5)}
.modal.ge-modal .modal-body{padding:var(--s4) var(--s6) var(--s6)}
.modal.ge-modal .modal-body p{font-size:14px;line-height:1.55;color:var(--ink-500);margin-bottom:var(--s4)}
/* R4 · Bebas overline 14px → 15px */
.modal.ge-modal .modal-body .scope-label{font-family:var(--ff-overline);font-size:var(--fs-eyebrow);font-weight:400;color:var(--ge-green-dark);letter-spacing:.12em;text-transform:uppercase;margin:var(--s5) 0 var(--s2)}
.modal.ge-modal .modal-body ul{list-style:none;padding:0;margin-bottom:var(--s4)}
.modal.ge-modal .modal-body ul li{font-size:14px;color:var(--ink-500);line-height:1.7;padding-left:var(--s4);position:relative}
.modal.ge-modal .modal-body ul li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ink-300)}
.modal.ge-modal .ge-modal-cta{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--ink-150)}
.modal.ge-modal .modal-body a{color:var(--ge-deep-blue);text-decoration:none;font-weight:600}
.modal.ge-modal .modal-body a:hover{text-decoration:underline;text-underline-offset:2px}
.modal.ge-modal .modal-body a.ge-button-green{color:var(--ink-900);text-decoration:none}
.modal.ge-modal .modal-body a.ge-button-green:hover{text-decoration:none}
/* ==========================================================================
   16 · FOOTER CTA SECTION (dark)
   ========================================================================== */
/* R5 · ::before is a 1px grid-line texture (technical grid), R8 tint */
.cta-section{padding:var(--s9) var(--s7);background:var(--ink-900);position:relative;overflow:hidden;text-align:center}
.cta-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(186,213,50,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(186,213,50,.03) 1px,transparent 1px);background-size:var(--s7) var(--s7)}
.cta-inner{position:relative;z-index:1;max-width:520px;margin:0 auto}
.cta-inner .eyebrow{margin-bottom:var(--s4)}
.cta-inner h2{font-family:var(--ff-display);font-size:2.125rem;font-weight:700;color:var(--white);line-height:1.15;margin-bottom:var(--s4)}
.cta-inner h2 em{font-style:normal;color:var(--ge-green)}
/* dark-band text at ink-300 minimum for AA on ink-900
   R10 · 15px → 16px marketing body */
.cta-sub{font-size:16px;line-height:1.65;color:var(--ink-300);margin-bottom:var(--s6);max-width:440px;margin-left:auto;margin-right:auto}
.cta-btn-group{display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
/* R10 · 15px label → 14px per DDS p.19 button spec; padding stays 12×32 on-scale */
.cta-btn-lg{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s6);background:var(--ge-green);color:var(--ink-900);font-family:var(--ff-sans);font-size:14px;font-weight:600;border:none;border-radius:var(--r-cta);cursor:pointer;transition:background var(--m-fast) var(--ease-out);text-decoration:none}
.cta-btn-lg:hover{background:var(--ge-green-dark);text-decoration:none}
.cta-divider{display:flex;align-items:center;gap:var(--s3);color:var(--ink-300);font-size:12px;font-weight:500;width:200px}
.cta-divider::before,.cta-divider::after{content:'';flex:1;height:1px;background:var(--ink-700)}
.cta-phone{font-size:14px;color:var(--ink-300);text-decoration:none;font-weight:500;transition:color var(--m-fast)}
.cta-phone:hover{color:var(--ge-green)}
/* R6 · 12px → 14px */
.cta-reassurance{margin-top:var(--s5);font-size:14px;color:var(--ink-300)}
/* ==========================================================================
   17 · UTILITIES · 4px scale margins used for per-page rhythm
   ========================================================================== */
.u-mt-6{margin-top:var(--s6)}
.u-mt-7{margin-top:var(--s7)}
.u-mb-6{margin-bottom:var(--s6)}
/* ==========================================================================
   18 · SPLIT LAYOUT · shared across pages
   Tall narrow blocks (collapse accordions, method steps, scenario lists) sit
   in a col-lg-7; a sticky image aside rides in the col-lg-5 so the section
   doesn't read as half-empty. Below lg the aside stacks under the content.
   Used on: CAD Automation, PDM & Manage, 3DX Implementation, 3DX Migration.
   ========================================================================== */
.services-split{--bs-gutter-x:var(--s7);--bs-gutter-y:var(--s6)}
.service-aside{position:sticky;top:var(--sticky-header)}
.service-aside__img{width:100%;border-radius:var(--r-md);border:1px solid var(--ink-150);object-fit:cover}
/* ==========================================================================
   PAGE · SOLIDWORKS SERVICES
   ========================================================================== */
.fork-card.onprem .tag{background:var(--ink-100);color:var(--ink-500)}
.fork-card.cloud .tag{background:rgba(0,174,239,.10);color:var(--ink-900)}
.fork-card.onprem ul li::before{background:var(--ink-300)}
.fork-card.cloud ul li::before{background:var(--ink-300)}
.fork-card.onprem .fork-links a{color:var(--ge-deep-blue)}
.fork-card.cloud .fork-links a{color:var(--ge-deep-blue)}
/* ==========================================================================
   PAGE · 3DEXPERIENCE SERVICES
   ========================================================================== */
.breadcrumb{padding:var(--s3) var(--s7);background:var(--paper);border-bottom:1px solid var(--ink-150);font-size:14px;color:var(--ink-400)}
.breadcrumb a{color:var(--ge-deep-blue);text-decoration:none;font-weight:500}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:2px}
.breadcrumb span.sep{margin:0 var(--s2);color:var(--ink-300)}
.team-flag{background:rgba(178,117,20,.08);border:1px solid rgba(178,117,20,.35);border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin:var(--s3) 0;font-size:14px;color:var(--ink-700);line-height:1.5}
.team-flag strong{font-weight:700}
.deploy-grid .blueprint-card{border:0;border-top:3px solid var(--ge-green);border-radius:0;padding:var(--s6);height:100%}
.deploy-grid{--bs-gutter-x:1px;--bs-gutter-y:1px;background:var(--ink-150);border:1px solid var(--ink-150);border-radius:var(--r-md);overflow:hidden;margin-top:var(--s7)}
/* tag = DDS p.23 badge spec */
.blueprint-card .tag{font-family:var(--ff-sans);font-size:var(--fs-xs);font-weight:700;padding:var(--s1) var(--s2);border-radius:var(--r-sm);display:inline-block;margin-bottom:var(--s4)}
.blueprint-card.onprem .tag{background:var(--ink-100);color:var(--ink-500)}
.blueprint-card.cloud .tag{background:rgba(0,174,239,.10);color:var(--ink-900)}
.blueprint-card h3{font-family:var(--ff-display);font-size:1.125rem;font-weight:600;color:var(--ink-900);margin-bottom:var(--s3)}
.blueprint-card>p{font-size:14px;line-height:1.55;color:var(--ink-500);margin-bottom:var(--s4)}
.blueprint-card ul{list-style:none;padding:0}
.blueprint-card ul li{font-size:14px;color:var(--ink-500);line-height:1.7;padding-left:var(--s4);position:relative}
.blueprint-card ul li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ink-300)}
.path-note{margin-top:var(--s5);padding:var(--s5) var(--s6);background:var(--white);border-radius:var(--r-md);border:1px solid var(--ink-150);border-left:3px solid var(--ge-green)}
.path-note p{font-size:14px;line-height:1.55;color:var(--ink-500)}
.path-note strong{color:var(--ink-900);font-weight:600}
.path-note a{color:var(--ge-deep-blue);font-weight:600;text-decoration:none}
.path-note a:hover{text-decoration:underline;text-underline-offset:2px}
.related-grid{--bs-gutter-x:var(--s4);--bs-gutter-y:var(--s4);margin-top:var(--s7)}
.related-card{padding:var(--s5) var(--s4);border:1px solid var(--ink-150);border-radius:var(--r-md);background:var(--white);transition:border-color var(--m-fast) var(--ease-out)}
.related-card:hover{border-color:var(--ge-green)}
a.related-card{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%}
a.related-card .link{margin-top:var(--s4)}
.related-card h4{font-family:var(--ff-display);font-size:14px;font-weight:600;color:var(--ink-900);margin-bottom:var(--s2)}
/* R6 · 12px → 14px */
.related-card p{font-size:14px;line-height:1.55;color:var(--ink-500);margin-bottom:var(--s3)}
.related-card .link{font-size:14px;font-weight:600;color:var(--ge-deep-blue);text-decoration:none}
.related-card .link:hover{text-decoration:underline;text-underline-offset:2px}
/* ==========================================================================
   PAGE · CATIA & ENOVIA SERVICES
   ========================================================================== */
/* ==========================================================================
   PAGE · 3DEXPERIENCE IMPLEMENTATION
   ========================================================================== */
.prose{max-width:720px}
.prose p{font-size:16px;line-height:1.65;color:var(--ink-700);margin-bottom:var(--s4)}
.prose p.secondary{color:var(--ink-500)}
.jumpstart{border:1px solid var(--ge-green);border-radius:var(--r-md);overflow:hidden}
.jumpstart-header{display:flex;align-items:center;gap:var(--s4);padding:var(--s5) var(--s6);background:var(--paper);border-bottom:1px solid var(--ink-150)}
/* js-badge = DDS tag micro-label (11px uppercase tracked, R6) — tinted, not
   button-styled, so it can't be mistaken for a CTA */
.js-badge{font-family:var(--ff-sans);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ge-green-dark);background:color-mix(in srgb, var(--ge-green) 18%, var(--white));border:1px solid var(--ge-green);padding:3px var(--s2);border-radius:var(--r-sm)}
.jumpstart-header .js-title{font-family:var(--ff-display);font-size:1.125rem;font-weight:700;color:var(--ink-900)}
.jumpstart-body{padding:var(--s5) var(--s6);display:flex;gap:var(--s7)}
.jumpstart-desc{flex:1}
.jumpstart-desc p{font-size:14px;line-height:1.55;color:var(--ink-500);margin-bottom:var(--s4)}
.jumpstart-desc ul{list-style:none;padding:0;margin-bottom:var(--s4)}
.jumpstart-desc ul li{font-size:14px;color:var(--ink-500);line-height:1.7;padding-left:var(--s4);position:relative}
.jumpstart-desc ul li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ink-300)}
/* R4 · Bebas overline 14px → 15px */
.jumpstart-desc .scope-label{font-family:var(--ff-overline);font-size:var(--fs-eyebrow);font-weight:400;color:var(--ge-green-dark);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s2)}
/* R6 · 12px → 14px */
.jumpstart-cta{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:var(--s3);min-width:200px}
.jumpstart-cta .js-note{font-size:14px;color:var(--ink-400);text-align:right;max-width:200px;line-height:1.5}
.layer-list{max-width:800px}
.layer-item{border:1px solid var(--ink-150);border-radius:var(--r-md);margin-bottom:var(--s3);overflow:hidden;transition:border-color var(--m-fast) var(--ease-out)}
.layer-item:hover{border-color:var(--ink-200)}
.layer-item:has(.layer-header[aria-expanded="true"]){border-color:var(--ge-green)}
a.layer-header,a.layer-header:hover{color:inherit;text-decoration:none}
.layer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--s5);cursor:pointer;user-select:none;background:var(--white);transition:background var(--m-fast)}
.layer-header[aria-expanded="true"]{background:var(--paper)}
.layer-header .layer-info{flex:1}
/* numeric index label — micro-label exception, stays 12px */
.layer-header .layer-num{font-family:var(--ff-display);font-size:12px;font-weight:700;color:var(--ink-300);margin-bottom:var(--s1)}
.layer-header h3{font-family:var(--ff-display);font-size:1.125rem;font-weight:600;color:var(--ink-900);line-height:1.30}
.layer-header .layer-brief{font-size:14px;color:var(--ink-400);margin-top:var(--s1)}
.layer-header .toggle{width:var(--s5);height:var(--s5);display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;border:1px solid var(--ink-150);transition:all var(--m-fast) var(--ease-out);margin-left:var(--s4)}
.layer-header[aria-expanded="true"] .toggle{border-color:var(--ge-green);background:var(--ge-green)}
.toggle svg{width:14px;height:14px;stroke:var(--ink-400);fill:none;stroke-width:2;transition:all var(--m-fast)}
.layer-header[aria-expanded="true"] .toggle svg{stroke:var(--ink-900);transform:rotate(180deg)}
/* open/close height handled by Bootstrap .collapse */
.layer-body-inner{padding:0 var(--s5) var(--s5)}
.layer-body-inner p{font-size:14px;line-height:1.55;color:var(--ink-500);margin-bottom:var(--s3)}
.layer-body-inner ul{list-style:none;padding:0;margin-bottom:var(--s4)}
.layer-body-inner ul li{font-size:14px;color:var(--ink-500);line-height:1.7;padding-left:var(--s4);position:relative}
.layer-body-inner ul li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ink-300)}
/* R4 · Bebas overline 14px → 15px */
.layer-body-inner .scope-label{font-family:var(--ff-overline);font-size:var(--fs-eyebrow);font-weight:400;color:var(--ge-green-dark);letter-spacing:.12em;text-transform:uppercase;margin:var(--s4) 0 var(--s2)}
/* Scenario rows with a leading icon chip. Same 36px chip anatomy as
   .blueprint-card__icon so the two components read as one family. */
.scenario-item{display:flex;gap:var(--s4)}
.scenario-item__icon{width:36px;height:36px;border-radius:var(--r-sm);background:var(--ink-50);display:flex;align-items:center;justify-content:center;color:var(--ge-charcoal);font-size:16px;flex-shrink:0}
.scenario-item__body{flex:1;min-width:0}
.scenario-list{max-width:720px}
.scenario-item{padding:var(--s5) 0;border-bottom:1px solid var(--ink-150)}
.scenario-item:last-child{border-bottom:none}
.scenario-item h4{font-family:var(--ff-display);font-size:1.125rem;font-weight:600;color:var(--ink-900);margin-bottom:var(--s2)}
.scenario-item p{font-size:14px;line-height:1.55;color:var(--ink-500)}
.scenario-item a{color:var(--ge-deep-blue);font-weight:600;text-decoration:none}
.scenario-item a:hover{text-decoration:underline;text-underline-offset:2px}
/* ==========================================================================
   PAGE · 3DEXPERIENCE MIGRATION
   ========================================================================== */
.source-grid{--bs-gutter-x:1px;--bs-gutter-y:1px;background:var(--ink-150);border:1px solid var(--ink-150);border-radius:var(--r-md);overflow:hidden}
.source-card{background:var(--white);padding:var(--s5)}
.source-card h3{font-family:var(--ff-display);font-size:1rem;font-weight:600;color:var(--ink-900);margin-bottom:var(--s2)}
.source-card>p{font-size:14px;line-height:1.55;color:var(--ink-500)}
.migrate-grid{--bs-gutter-x:var(--s5);--bs-gutter-y:var(--s5);margin-top:var(--s7)}
.migrate-col h3{font-family:var(--ff-display);font-size:1.125rem;font-weight:600;color:var(--ink-900);margin-bottom:var(--s4)}
.migrate-col ul{list-style:none;padding:0}
.migrate-col ul li{font-size:14px;color:var(--ink-500);line-height:1.7;padding-left:var(--s4);position:relative;margin-bottom:var(--s1)}
.migrate-col ul li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--ink-300)}
.dest-grid{--bs-gutter-x:1px;--bs-gutter-y:1px;background:var(--ink-150);border:1px solid var(--ink-150);border-radius:var(--r-md);overflow:hidden;margin-top:var(--s7)}
.dest-card{background:var(--white);padding:var(--s6)}
/* tag = DDS p.23 badge spec */
.dest-card .tag{font-family:var(--ff-sans);font-size:var(--fs-xs);font-weight:700;padding:var(--s1) var(--s2);border-radius:var(--r-sm);display:inline-block;margin-bottom:var(--s4)}
.dest-card.onprem .tag{background:var(--ink-100);color:var(--ink-500)}
.dest-card.cloud .tag{background:rgba(0,174,239,.10);color:var(--ink-900)}
.dest-card h3{font-family:var(--ff-display);font-size:1.125rem;font-weight:600;color:var(--ink-900);margin-bottom:var(--s3)}
.dest-card>p{font-size:14px;line-height:1.55;color:var(--ink-500);margin-bottom:var(--s4)}
.dest-card ul{list-style:none;padding:0}
.dest-card ul li{font-size:14px;color:var(--ink-500);line-height:1.7;padding-left:var(--s4);position:relative}
.dest-card ul li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ink-300)}
.pricing-section{padding:var(--s8) var(--s7);background:var(--ink-900);border-top:3px solid var(--ge-green)}
.pricing-inner{display:flex;align-items:center;gap:var(--s7);max-width:900px}
.pricing-content{flex:1}
.pricing-content h3{font-family:var(--ff-display);font-size:1.5rem;font-weight:600;color:var(--white);margin-bottom:var(--s3)}
/* ink-300 for AA on the ink-900 band */
.pricing-content p{font-size:14px;line-height:1.55;color:var(--ink-300)}
.pricing-figure{text-align:right;flex-shrink:0}
.pricing-figure .price{font-family:var(--ff-display);font-size:2.125rem;font-weight:700;color:var(--ge-green)}
/* R6 · 12px → 14px */
.pricing-figure .price-label{font-size:14px;color:var(--ink-300);margin-top:var(--s1);max-width:200px}
/* ==========================================================================
   PAGE · PDM & MANAGE IMPLEMENTATION
   ========================================================================== */
.ge-breadcrumb{padding:var(--s3) var(--s7);background:var(--paper);border-bottom:1px solid var(--ink-150);font-size:14px;color:var(--ink-400)}
.ge-breadcrumb a{color:var(--ge-deep-blue);text-decoration:none;font-weight:500}
.ge-breadcrumb a:hover{text-decoration:underline;text-underline-offset:2px}
.ge-breadcrumb span{margin:0 var(--s2);color:var(--ink-300)}
.back-link{display:inline-flex;align-items:center;gap:var(--s2);font-size:14px;font-weight:600;color:var(--ge-deep-blue);text-decoration:none;margin-bottom:var(--s7)}
.back-link:hover{text-decoration:underline;text-underline-offset:2px}
.migration-driver{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);padding:var(--s5) var(--s6);background:var(--ink-900);border-radius:var(--r-md);margin-bottom:var(--s4)}
.migration-driver-content{max-width:520px}
.migration-driver-content h4{font-family:var(--ff-display);font-size:1rem;font-weight:700;color:var(--white);margin-bottom:var(--s2);line-height:1.30}
/* ink-300 for AA on the ink-900 panel */
.migration-driver-content p{font-size:14px;line-height:1.55;color:var(--ink-300)}
/* 10×18 = DDS p.19 button geometry */
.migration-driver a.driver-link{display:inline-flex;align-items:center;gap:var(--s2);padding:10px 18px;background:var(--ge-green);color:var(--ink-900);font-family:var(--ff-sans);font-size:14px;font-weight:600;border-radius:var(--r-cta);text-decoration:none;white-space:nowrap;flex-shrink:0;transition:background var(--m-fast) var(--ease-out)}
.migration-driver a.driver-link:hover{background:var(--ge-green-dark)}
/* The panel is a non-wrapping flex row and .driver-link is nowrap, so below
   ~992px the copy column collapsed and the CTA overflowed the panel. Stack it
   at the same boundary the hero image uses. */
@media (max-width: 991.98px){
  .migration-driver{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .migration-driver-content{max-width:none}
  /* the label is nowrap and, as a column flex item, sized to max-content (270px),
     so it still bled past the panel at 360–375px. Full-width + wrapping label
     bounds it and gives a bigger tap target. */
  .migration-driver a.driver-link{white-space:normal;max-width:100%;align-self:stretch;justify-content:center;text-align:center}
}
/* ==========================================================================
   PAGE · SOLIDWORKS CAD AUTOMATION
   ========================================================================== */
.service-list{max-width:800px}
.service-item{border:1px solid var(--ink-150);border-radius:var(--r-md);margin-bottom:var(--s3);overflow:hidden;transition:border-color var(--m-fast) var(--ease-out)}
.service-item:hover{border-color:var(--ink-200)}
.service-item:has(.service-header[aria-expanded="true"]){border-color:var(--ge-green)}
a.service-header,a.service-header:hover{color:inherit;text-decoration:none}
.service-header{display:flex;align-items:center;justify-content:space-between;padding:var(--s5) var(--s5);cursor:pointer;user-select:none;background:var(--white);transition:background var(--m-fast)}
.service-header[aria-expanded="true"]{background:var(--paper)}
.service-header h3{font-family:var(--ff-display);font-size:1.125rem;font-weight:600;color:var(--ink-900);line-height:1.30}
.service-header .service-brief{font-size:14px;color:var(--ink-400);margin-top:var(--s1)}
.service-header .toggle{width:var(--s5);height:var(--s5);display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;border:1px solid var(--ink-150);transition:all var(--m-fast) var(--ease-out)}
.service-header[aria-expanded="true"] .toggle{border-color:var(--ge-green);background:var(--ge-green)}
.service-header[aria-expanded="true"] .toggle svg{stroke:var(--ink-900);transform:rotate(180deg)}
/* open/close height handled by Bootstrap .collapse */
.service-body-inner{padding:0 var(--s5) var(--s5)}
.service-body-inner p{font-size:14px;line-height:1.55;color:var(--ink-500);margin-bottom:var(--s3)}
.service-body-inner ul{list-style:none;padding:0;margin-bottom:var(--s4)}
.service-body-inner ul li{font-size:14px;color:var(--ink-500);line-height:1.7;padding-left:var(--s4);position:relative}
.service-body-inner ul li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ink-300)}
/* R4 · Bebas overline 14px → 15px */
.service-body-inner .scope-label{font-family:var(--ff-overline);font-size:var(--fs-eyebrow);font-weight:400;color:var(--ge-green-dark);letter-spacing:.12em;text-transform:uppercase;margin:var(--s4) 0 var(--s2)}
.method-cards{--bs-gutter-x:var(--s3);--bs-gutter-y:var(--s3);margin-top:var(--s7)}
.method-card{padding:var(--s5) var(--s4);border:1px solid var(--ink-150);border-radius:var(--r-md);background:var(--white);text-align:center;transition:border-color var(--m-fast) var(--ease-out)}
.method-card:hover{border-color:var(--ge-green)}
.method-card .step-icon{margin-bottom:var(--s3)}
.method-card .step-icon svg{width:var(--s6);height:var(--s6);stroke:var(--ink-300);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--m-fast)}
/* R4 · green-dark as interactive-state accent ink */
.method-card:hover .step-icon svg{stroke:var(--ge-green-dark)}
.method-card .step-num{font-family:var(--ff-display);font-size:14px;font-weight:700;color:var(--ink-300);margin-bottom:var(--s2)}
.method-card h4{font-family:var(--ff-display);font-size:14px;font-weight:600;color:var(--ink-900);margin-bottom:var(--s2)}
/* R6 · 12px → 14px */
.method-card p{font-size:14px;line-height:1.5;color:var(--ink-500)}
/* ==========================================================================
   PAGE · SOLIDWORKS SYSTEMS HEALTH CHECKS
   ========================================================================== */
/* Engagement-tiers band — darkened product-screenshot background that follows
   the selected track tab (pure CSS via :has(); flat ink-900 fallback).
   SWAP POINT: replace the two data-URI placeholders with hosted screenshots
   (CAD screenshot for #track-cad, PDM screenshot for #track-pdm). */
.section--tiers{position:relative;background:var(--ink-900)}
.section--tiers::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(14,16,19,.9),rgba(14,16,19,.9)),url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'%3E%3Crect width='100%25' height='100%25' fill='%231C232B'/%3E%3Ctext x='50%25' y='50%25' fill='%23555B63' font-family='Arial' font-size='48' text-anchor='middle'%3EReplace: CAD screenshot background%3C/text%3E%3C/svg%3E");background-size:cover;background-position:center}
.section--tiers:has(#track-pdm.active)::before{background-image:linear-gradient(rgba(14,16,19,.9),rgba(14,16,19,.9)),url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'%3E%3Crect width='100%25' height='100%25' fill='%23161D26'/%3E%3Ctext x='50%25' y='50%25' fill='%23555B63' font-family='Arial' font-size='48' text-anchor='middle'%3EReplace: PDM screenshot background%3C/text%3E%3C/svg%3E")}
.section--tiers > .row{position:relative;z-index:1}
.track-grid{--bs-gutter-x:1px;--bs-gutter-y:1px;background:var(--ink-150);border:1px solid var(--ink-150);border-radius:var(--r-md);overflow:hidden}
.audit-card{background:var(--white);padding:var(--s6)}
.audit-card .track-icon{margin-bottom:var(--s4)}
.audit-card .track-icon svg{width:var(--s6);height:var(--s6);stroke:var(--ink-300);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.audit-card h3{font-family:var(--ff-display);font-size:1.125rem;font-weight:600;color:var(--ink-900);margin-bottom:var(--s3);line-height:1.30}
.track-img{background:var(--ink-100);border-radius:var(--r-sm);height:180px;margin-bottom:var(--s5);display:flex;align-items:center;justify-content:center;overflow:hidden}
.audit-card > p{font-size:14px;line-height:1.55;color:var(--ink-500);margin-bottom:var(--s4)}
/* R4 · Bebas overline 14px → 15px */
.audit-card .scope-label{font-family:var(--ff-overline);font-size:var(--fs-eyebrow);font-weight:400;color:var(--ge-green-dark);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s2)}
.audit-card ul{list-style:none;padding:0;margin-bottom:var(--s4)}
.audit-card ul li{font-size:14px;color:var(--ink-500);line-height:1.7;padding-left:var(--s4);position:relative}
.audit-card ul li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ink-300)}
.track-note{margin-top:var(--s5);padding:var(--s4) var(--s5);background:var(--paper);border-radius:var(--r-md);border:1px solid var(--ink-150);font-size:14px;line-height:1.55;color:var(--ink-500)}
.track-note strong{color:var(--ink-900);font-weight:600}
/* H6 sub-group label per DDS p.15: Open Sans Bold 700 · --fs-h6 (12px) */
.tier-track-label{font-family:var(--ff-sans);font-size:var(--fs-h6);font-weight:700;color:var(--ink-400);text-transform:uppercase;letter-spacing:.06em;margin:0 0 var(--s2)}
.tier-track{margin-top:var(--s3)}
.tier-track:first-child{margin-top:var(--s2)}
.track-toggle.nav{flex-wrap:nowrap;padding:var(--s1);margin-bottom:var(--s5);list-style:none}
.track-toggle{display:flex;gap:var(--s1);margin-bottom:var(--s5);background:var(--ink-100);border-radius:var(--r-cta);padding:var(--s1);width:fit-content}
/* icon sits inline with the label, not stacked above it */
.track-toggle button{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--ff-sans);font-size:14px;font-weight:600;padding:var(--s2) var(--s4);border:none;border-radius:var(--r-sm);background:transparent;color:var(--ink-400);cursor:pointer;transition:all var(--m-fast) var(--ease-out)}
/* R10 · hand-rolled shadow → e-1 token */
.track-toggle button.active{background:var(--white);color:var(--ink-900);box-shadow:var(--e-1)}
.track-toggle button:hover:not(.active){color:var(--ink-700)}
/* brand marks in the toggle: one height here instead of per-element width/height
   attrs, so mismatched source assets (1000px vs 256px) render identically */
.track-toggle button img{height:20px;width:auto;max-width:none;flex-shrink:0}
/* ==========================================================================
   PAGE · PLM SERVICES
   ========================================================================== */
/* Blueprint deliverables — Bootstrap row/col conversion of the old inline
   display:grid block (which could not collapse on mobile). Row modifier +
   card component per the GRID DIALECT contract. */
.blueprint-grid{--bs-gutter-x:var(--space-5);--bs-gutter-y:var(--space-5);margin-bottom:var(--space-7)}
.blueprint-card{background:var(--white);border:1px solid var(--ink-150);border-top:3px solid var(--ge-green);border-radius:var(--r-md);padding:var(--space-5)}
.blueprint-card__icon{width:36px;height:36px;border-radius:var(--r-sm);background:var(--ink-50);display:flex;align-items:center;justify-content:center;color:var(--ge-charcoal);font-size:16px;margin-bottom:var(--space-3)}
.blueprint-card h3,.blueprint-card h4{font-family:var(--ff-display);font-weight:600;font-size:1rem;color:var(--ink-900);margin-bottom:var(--space-2)}
.blueprint-card p{font-size:14px;color:var(--ink-500);line-height:1.55}
/* ── MIGRATE COLUMNS ─────────────────────────────────────────
   Two-column "what's included / what's optional" comparison. */
.migrate-col{background:var(--white);border:1px solid var(--ink-150);border-radius:var(--r-md);padding:var(--s6)}
.migrate-col--addon{border-top:3px solid var(--ge-green)}
.migrate-col h3{font-family:var(--ff-display);font-size:1.125rem;font-weight:600;color:var(--ink-900);margin-bottom:var(--s3)}
.migrate-col__caption{font-size:14px;color:var(--ink-400);margin-bottom:var(--s4)}
.migrate-group-label{font-family:var(--ff-overline);font-size:var(--fs-eyebrow);font-weight:400;color:var(--ge-green-dark);letter-spacing:.12em;text-transform:uppercase;margin:var(--s4) 0 var(--s2)}
.migrate-col ul{list-style:none;padding:0}
.migrate-col ul li{font-size:14px;color:var(--ink-500);line-height:1.7;padding-left:var(--s4);position:relative}
.migrate-col ul li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ink-300)}

/* ── JUMPSTART SIDEBAR ───────────────────────────────────────
   Sidebar variant of the JumpStart panel: narrow card with a collapsible
   "what's included" body, for sitting beside prose rather than spanning
   full width. Shares the .js-badge micro-label with the wide variant. */
.jumpstart-sidebar{background:var(--white);border:1px solid var(--ink-150);border-radius:var(--r-md);padding:var(--s6);position:relative;overflow:hidden}
.jumpstart-sidebar .js-bar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--ge-green)}
.jumpstart-sidebar .js-qualifier{font-size:12px;font-weight:600;color:var(--ink-400);margin:var(--s3) 0 var(--s2)}
.jumpstart-sidebar .js-heading{font-family:var(--ff-display);font-size:1.125rem;font-weight:700;color:var(--ink-900);margin-bottom:var(--s3);line-height:1.25}
.jumpstart-sidebar .js-body{font-size:14px;line-height:1.6;color:var(--ink-500);margin-bottom:var(--s4)}
.jumpstart-sidebar .js-toggle{display:inline-flex;align-items:center;gap:var(--s2);background:none;border:none;padding:0;font-family:var(--ff-sans);font-size:14px;font-weight:600;color:var(--ge-deep-blue);cursor:pointer}
.jumpstart-sidebar .js-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform var(--m-fast) var(--ease-out)}
.jumpstart-sidebar .js-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.jumpstart-sidebar .js-expandable{display:none}
.jumpstart-sidebar .js-expandable.is-open{display:block}
.jumpstart-sidebar .js-divider{border:0;border-top:1px solid var(--ink-150);margin:var(--s4) 0}
.jumpstart-sidebar ul{list-style:none;padding:0}
.jumpstart-sidebar ul li{font-size:14px;color:var(--ink-500);line-height:1.7;padding-left:var(--s4);position:relative}
.jumpstart-sidebar ul li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ink-300)}
.jumpstart-sidebar .js-cta-btn{margin-top:var(--s4)}
/* icon slot accepts an <img>, a Font Awesome <i>, or an inline stroke svg */
.blueprint-card__icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* >>> SPLICE POINT — replace ___KEEP_EXISTING_WATERMARK_BASE64___ with the
   full base64 payload from your current file's .hero--watermark::after rule
   (everything between "base64," and the closing quote). One find-and-replace.
   Better long-term: swap the whole url(...) for the hosted cube-watermark
   asset per DDS p.6 and delete the blob. <<< */
.hero--watermark::after{content:'';position:absolute;bottom:-60px;right:-40px;width:340px;height:340px;background-image:url("data:image/png;base64,___KEEP_EXISTING_WATERMARK_BASE64___");background-size:contain;background-repeat:no-repeat;opacity:0.06;pointer-events:none}
.hero__inner{--bs-gutter-x:var(--space-8);--bs-gutter-y:var(--space-8);align-items:start}
.hero__content{padding-top:var(--space-6)}
.hero__content h1{max-width:580px}
/* same measure cap as .hero-content on the other pages
   R10 · 1.0625rem off-ramp → 1rem marketing body */
.hero__sub{color:var(--ink-300);font-size:1rem;line-height:1.6;max-width:520px;margin-bottom:var(--space-6)}
.hero__ctas{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-7)}
/* R7 · hairline snapped to the approved white@8% */
.hero__stats{display:flex;gap:var(--space-7);border-top:1px solid rgba(255,255,255,0.08);padding-top:var(--space-5)}
.hero__stat{text-align:left}
.hero__stat-number{font-family:var(--ff-display);font-weight:700;font-size:2rem;color:var(--white);line-height:1.1}
.hero__stat-label{font-size:14px;color:var(--ink-300);margin-top:var(--space-1)}
/* R7 · approved raised surface replaces the hand-picked white wash */
.hero__badge-card{background:#1A1D22;border:1px solid rgba(255,255,255,0.08);border-radius:var(--r-md);padding:var(--space-5)}
.hero__badge-card .badge-label{font-size:12px;font-weight:600;color:var(--ink-300);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-4)}
.hero__badge-item{display:flex;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid rgba(255,255,255,0.08)}
.hero__badge-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
/* R8 · token-hue tint chip */
.hero__badge-icon{flex-shrink:0;width:36px;height:36px;border-radius:var(--r-sm);background:rgba(186,213,50,0.12);display:flex;align-items:center;justify-content:center;color:var(--ge-green);font-size:16px}
.hero__badge-text h4{color:var(--white);font-family:var(--ff-sans);font-weight:600;font-size:14px;margin-bottom:2px}
.hero__badge-text p{color:var(--ink-300);font-size:14px;line-height:1.4}
.trust-bar{padding:var(--space-5) 0;border-bottom:1px solid var(--ink-150);background:var(--white)}
.trust-bar__inner{display:flex;align-items:center;gap:var(--space-7)}
.trust-bar__label{font-size:12px;font-weight:600;color:var(--ink-400);text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap;flex-shrink:0}
.trust-bar__logos{display:flex;align-items:center;gap:var(--space-6);flex-wrap:nowrap;overflow:hidden;opacity:0.45}
.trust-bar__logos span{font-family:var(--ff-sans);font-weight:700;font-size:12px;color:var(--ink-700);letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}
/* R8 · semantic-hue tint border; R10 · hover shadow → e-2 token */
.risk-card{display:flex;gap:var(--space-4);padding:var(--space-4);background:var(--white);border:1px solid rgba(178, 117, 20, 0.15);border-radius:var(--r-md);transition:box-shadow var(--m-base) var(--ease-out)}
.risk-card:hover{box-shadow:var(--e-2)}
.risk-card__icon{flex-shrink:0;width:40px;height:40px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:18px}
.risk-card__icon--warning{background:rgba(178,117,20,0.08);color:var(--sem-warning)}
.risk-card__icon--error{background:rgba(181,48,41,0.08);color:var(--sem-error)}
.risk-card__icon--info{background:rgba(30,111,184,0.08);color:var(--sem-info)}
.risk-card h4{font-family:var(--ff-sans);font-weight:600;font-size:14px;margin-bottom:var(--space-1)}
.risk-card p{font-size:14px;color:var(--ink-500);line-height:1.5}
.methodology__phases{--bs-gutter-x:var(--space-5);--bs-gutter-y:var(--space-5);position:relative}
.methodology__phases::before{content:'';position:absolute;top:48px;left:calc(12.5% + 12px);right:calc(12.5% + 12px);height:2px;background:var(--ink-200)}
.phase-card{background:var(--white);border:1px solid var(--ink-150);border-top:3px solid var(--ge-green);border-radius:var(--r-md);padding:var(--space-5);position:relative}
.phase-card__number{width:40px;height:40px;border-radius:50%;background:var(--ge-green);color:var(--ink-900);font-family:var(--ff-display);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4);position:relative;z-index:1}
.phase-card h3{font-size:1.125rem;margin-bottom:var(--space-2)}
/* R10 · duration chip restyled to the p.23 tag spec: 11px Bold, 4×8, radius sm */
.phase-card__duration{font-family:var(--ff-sans);font-size:var(--fs-xs);font-weight:700;color:var(--ge-charcoal);background:var(--ink-50);display:inline-block;padding:var(--s1) var(--s2);border-radius:var(--r-sm);margin-bottom:var(--space-3)}
.phase-card p{font-size:14px;color:var(--ink-500);margin-bottom:var(--space-3)}
.phase-card__deliverables{font-size:14px;color:var(--ink-700);font-weight:600;margin-bottom:var(--space-2)}
.phase-card ul{list-style:none;padding:0}
.phase-card ul li{font-size:14px;color:var(--ink-500);padding:var(--space-1) 0;padding-left:var(--space-4);position:relative}
.phase-card ul li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--ge-green)}
.tracks__grid{--bs-gutter-x:var(--space-5);--bs-gutter-y:var(--space-5);margin-top:var(--space-6)}
.track-card{border:1px solid var(--ink-150);border-radius:var(--r-md);overflow:hidden;background:var(--white);transition:box-shadow var(--m-base) var(--ease-out)}
.track-card:hover{box-shadow:var(--e-2)}
.track-card__header{padding:var(--space-5);border-bottom:1px solid var(--ink-150)}
/* tag = DDS p.23 spec · R8 token-hue tints */
.track-card__tag{display:inline-block;font-family:var(--ff-sans);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:var(--s1) var(--s2);border-radius:var(--r-sm);margin-bottom:var(--space-3)}
.track-card--midmarket .track-card__tag{background:rgba(186,213,50,0.15);color:var(--ink-900)}
.track-card--enterprise .track-card__tag{background:rgba(23,28,143,0.08);color:var(--ge-indigo)}
.track-card__header h3{margin-bottom:var(--space-2)}
.track-card__header p{font-size:14px;color:var(--ink-500)}
.track-card__body{padding:var(--space-5)}
.track-card__detail{display:flex;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4)}
.track-card__detail:last-child{margin-bottom:0}
.track-card__detail-icon{flex-shrink:0;width:24px;height:24px;color:var(--ge-green);display:flex;align-items:center;justify-content:center;font-size:14px;margin-top:1px}
.track-card__detail-text{font-size:14px;color:var(--ink-700)}
.track-card__detail-text strong{font-weight:600;color:var(--ink-900)}
.track-card__footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--ink-150);background:var(--ink-50)}
.assessment__text{min-width:0;overflow:hidden}
.assessment__text h2{margin-bottom:var(--space-4)}
.assessment__text > p{color:var(--ink-500);margin-bottom:var(--space-5)}
/* R6 note · data-matrix body runs 12px per the p.24 comparison-matrix
   anatomy (component spec — exempt from the marketing reading floor) */
.maturity-table{width:100%;border-collapse:collapse;font-size:12px}
.maturity-table th{background:var(--ink-50);color:var(--ink-500);font-weight:600;text-transform:uppercase;font-size:10px;/* per DDS table anatomy: header label 10px */ letter-spacing: 0.06em;padding:var(--space-2) var(--space-3);text-align:left;border-bottom:1px solid var(--ink-200)}
.maturity-table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--ink-150);color:var(--ink-700);vertical-align:top}
.maturity-table tr:nth-child(even) td{background:var(--ink-50)}
.maturity-table td:first-child{font-weight:600;color:var(--ink-900);white-space:nowrap}
.assessment__sidebar{background:var(--ink-900);border-radius:var(--r-md);padding:var(--space-6);color:var(--ink-100);position:sticky;top:var(--sticky-header)}
.assessment__sidebar h3{color:var(--white);margin-bottom:var(--space-5)}
.deliverable-item{display:flex;gap:var(--space-3);margin-bottom:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid rgba(255,255,255,0.08)}
.deliverable-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
/* R8 · token-hue tint chip */
.deliverable-item__icon{flex-shrink:0;width:32px;height:32px;border-radius:var(--r-sm);background:rgba(186,213,50,0.12);display:flex;align-items:center;justify-content:center;color:var(--ge-green);font-size:14px}
.deliverable-item h4{color:var(--white);font-family:var(--ff-sans);font-weight:600;font-size:14px;margin-bottom:2px}
/* ink-300 for AA on the ink-900 sidebar */
.deliverable-item p{color:var(--ink-300);font-size:14px;line-height:1.45}
/* R8 · token-hue tint wash */
.assessment__sidebar .ownership-note{margin-top:var(--space-5);padding:var(--space-3);background:rgba(186,213,50,0.06);border-left:3px solid var(--ge-green);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:14px;color:var(--ink-300);line-height:1.5}
.case-study__media{background:var(--ink-100);border-radius:var(--r-md);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:var(--ink-400);font-size:14px;font-style:italic}
.case-study__text h3{margin-bottom:var(--space-3)}
.case-study__metric-row{display:flex;gap:var(--space-6);margin:var(--space-5) 0}
.case-study__metric{text-align:left}
.case-study__metric-number{font-family:var(--ff-display);font-weight:700;font-size:1.75rem;color:var(--ink-900);line-height:1.1}
/* R6 · 12px → 14px */
.case-study__metric-label{font-size:14px;color:var(--ink-500);margin-top:2px}
.case-study__quote{font-size:14px;color:var(--ink-500);font-style:italic;border-left:3px solid var(--ge-green);padding-left:var(--space-4);margin-top:var(--space-5)}
.case-study__quote cite{display:block;font-style:normal;font-weight:600;color:var(--ink-700);margin-top:var(--space-2)}
.cta-form{background:var(--white);border-radius:var(--r-md);padding:var(--space-6)}
/* PLM's inline HubSpot embed inside the centered final CTA (HubSpot injects its
   own .hs-form-* field styling, so no field rules are needed here) */
.cta-inner .cta-form{max-width:520px;margin:var(--s6) auto 0;text-align:left}
.cta-form h3{margin-bottom:var(--space-5)}
.faq-item{padding:var(--space-4);border:1px solid var(--ink-150);border-radius:var(--r-md)}

.faq-item h4{font-family:var(--ff-sans);font-weight:600;font-size:14px;color:var(--ink-900);margin-bottom:var(--space-2);display:flex;align-items:flex-start;gap:var(--space-2)}
.faq-item h4 i{color:var(--ge-green);font-size:12px;margin-top:3px;flex-shrink:0}
.faq-item p{font-size:14px;color:var(--ink-500);line-height:1.55;padding-left:calc(12px + var(--space-2))}
/* ==========================================================================
   RESPONSIVE
   ----------------------------------------------------------------------------
   Column stacking is handled by the Bootstrap col-* breakpoints in the page
   markup, NOT here. These blocks only adjust padding, type scale, flex
   direction, and decorative elements that don't survive narrow viewports.
   ========================================================================== */
@media (max-width: 960px){
  .hero__badge-card{display:none}
  .methodology__phases::before{display:none}
}
@media (max-width: 600px){
  h1,.h1{font-size:2.25rem}
  h2,.h2{font-size:1.625rem}
  .section{padding:var(--space-7) 0}
  .hero{padding:var(--space-7) 0}
  .hero__stats{flex-direction:column;gap:var(--space-4)}
}
@media (max-width: 1024px){
  /* cred bar collapses to the stats cluster only — the customer-logo cells and
     the elastic spacer are dropped, not the content grids. Positional selectors
     are scoped away from the brand/stats layout, which stacks instead (see the
     mobile stacking rules further down). */
  .cred-logo-cell:not(.cred-brand-cell),.cred-spacer-cell{display:none}
  .cred-bar tr:has(.cred-logo-cell:not(.cred-brand-cell)) td:nth-child(n+2){display:none}
  .cred-bar tr td.cred-stats-cell:nth-child(n){display:block}
}
/* The hero text column is col-md-12 (full width) below 992px, so the 48%
   absolutely-positioned image must disappear at the SAME boundary — hiding it
   only at 768px left a 769–991px band where the two overlapped. */
@media (max-width: 991.98px){
  .hero-img-area,.hero-grid{display:none}
  /* 8 pins + titles need ~990px; below that the band can't span wrapped rows */
  .process-track--road{flex-wrap:wrap}
  .process-track--road::before,.process-track--road::after{display:none}
  .process-track--road .step-circle{margin-bottom:var(--s4)}
}
@media (max-width: 768px){
  .process-track,.process-track.nav{flex-wrap:wrap;gap:var(--s4)}
  /* .track-toggle is width:fit-content, so the services hub's 3 brand-logo
     buttons made it 443px wide in a 297px column and scrolled the whole page.
     Cap it and let the buttons wrap; toggles that already fit are unaffected. */
  .track-toggle{max-width:100%;flex-wrap:wrap}
  .track-toggle.nav{flex-wrap:wrap}
  .process-step{flex:1 1 40%}
  .mid-cta{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .hero,.hero-lg{padding:var(--s7) var(--s5)}
  .hero h1,.hero-lg h1{font-size:2.25rem}
  .section-heading{font-size:1.625rem}
  .section{padding:var(--s7) var(--s5)}
  .section--contained{padding-left:0;padding-right:0}
  .cred-bar{padding:0 var(--s5)}
  .cred-stat{height:auto;border-right:none;margin-right:var(--s4);padding-right:var(--s4)}
  /* connector line only — it can't track the steps once they wrap */
  .process-track::before{display:none}
  .quote-bar{padding:var(--s5)}
  .cta-section{padding:var(--s7) var(--s5)}
}
/* ==========================================================================
   BOOTSTRAP-NATIVE ADDITIONS
   Cards/steps/headers that act as Bootstrap triggers are anchors — keep them
   looking like the components they are, plus real <img> placeholder styling.
   ========================================================================== */
a.service-card,a.service-card:hover{color:inherit;text-decoration:none;display:block}
.layer-body,.service-body{overflow:hidden}
.hero-img{width:100%;height:100%;object-fit:cover;clip-path:polygon(12% 0,100% 0,100% 100%,0% 100%)}
img.img-break{object-fit:cover;display:block}
img.track-img{object-fit:cover;width:100%}
.case-study__img{width:100%;height:100%;object-fit:cover;display:block}
/* Before/after image slider (CMS "ba-slider" snippet — CAD Translation Services,
   reusable on any page). Its script sizes .resize img to the FULL container width
   in px so the underlying image is cropped, not squashed; the global
   img{max-width:100%} above clamps that to the .resize half-width and breaks the
   effect. Freeing the clamp is the whole fix — the snippet owns everything else. */
.ba-slider .resize img{max-width:none}

/* ============================================================================
   TINYMCE EDITOR SUPPORT (single-file setup)
   ----------------------------------------------------------------------------
   TinyMCE renders content inside an iframe whose <body> carries the class
   .mce-content-body — that class never exists on the live site, so every rule
   below is inert in production and active only inside the editor.

   TinyMCE config needs only this one file (plus Bootstrap if your CMS loads
   it in the editor):
     content_css: ['/path/bootstrap.min.css', '/path/goengineer-dds.css']

   Purpose: Bootstrap hides resting-state content (collapsed accordions,
   inactive tab panes, modals). These overrides make all of it visible and
   editable in the WYSIWYG.
   ========================================================================== */

/* Show every accordion body, expanded or not */
.mce-content-body .collapse:not(.show){display:block !important}
.mce-content-body .collapsing{height:auto !important;transition:none !important}

/* Show every tab/pill pane, stacked, with a divider between panes */
.mce-content-body .tab-pane{display:block !important;opacity:1 !important}
.mce-content-body .tab-pane + .tab-pane{border-top:1px dashed var(--ink-200);margin-top:var(--s4);padding-top:var(--s4)}

/* Render modals inline (normally display:none + fixed overlay) */
.mce-content-body .modal{display:block !important;position:static !important;opacity:1 !important;margin:var(--s6) 0;border:2px dashed var(--ink-200);border-radius:var(--r-lg);padding:var(--s4)}
.mce-content-body .modal::before{content:'Pop-up content (opens as a modal on the live page)';display:block;font:600 11px/1.4 "Open Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);margin-bottom:var(--s3)}
.mce-content-body .modal-dialog{max-width:640px;margin:0;transform:none !important}
.mce-content-body .modal-backdrop{display:none !important}

/* Kill motion + sticky behavior inside the editor */
.mce-content-body *{transition:none !important;animation:none !important}
.mce-content-body [style*="position: sticky"],.mce-content-body [style*="position:sticky"]{position:static !important}

/* Decorative hero layers shouldn't intercept clicks while editing */
.mce-content-body .hero-overlay,.mce-content-body .hero-grid{pointer-events:none}

/* Collapsed-by-default triggers get their expanded look for context */
.mce-content-body .layer-header,.mce-content-body .service-header{background:var(--white)}

/* ============================================================================
   GRID DIALECT (single source of truth)
   ----------------------------------------------------------------------------
   All layout runs on the CMS page-builder skeleton: container-fluid > row >
   full-breakpoint columns. Grid wrapper classes above are row modifiers only —
   they set gutters (fused card grids get 1px hairlines over the wrapper
   background) and chrome; Bootstrap's .row/.col-* provide the layout itself.

   Nothing in this file sets display:grid. If a card group renders as a single
   stacked block instead of columns, the cause is missing .row / .col-* in the
   markup, not a missing rule here.

   Row modifiers (must be authored as class="row {modifier}"):
     1px fused hairline grids · .services-grid .fork-container .tier-grid
       .track-grid .deploy-grid .source-grid .dest-grid
     gutter grids · .after-grid .related-grid .blueprint-grid .migrate-grid
       .method-cards .services-split .tracks__grid .why__grid .faq__grid
       .problem__grid .problem__risks .methodology__phases .assessment__grid
       .case-study .form-row .hero__inner .cta-section__inner
   ========================================================================== */
.row > [class*="col"] > .h-100{height:100%}
/* Content measure: band backgrounds run full-bleed, but their rows cap at
   1360px and center, pulling content toward the middle on wide screens */
.container-fluid.section > .row,.container-fluid.section--tight > .row,
.container-fluid.hero > .row,.container-fluid.hero-lg > .row,
.container-fluid.quote-bar > .row,
.container-fluid.cta-section > .row{max-width:1360px;margin-left:auto;margin-right:auto}
/* The credibility bar deliberately breaks the measure: stats left, client
   logos right, spanning wide for contrast against the centered content */
.container-fluid.cred-bar > .row{max-width:none}

/* Band side padding — s8 (64px) base, s9 (96px) on wide screens, s5 (24px) mobile */
.container-fluid.section{padding:var(--s9) var(--s8)}
.container-fluid.section--tight{padding:var(--s7) var(--s8)}
.container-fluid.hero{padding:var(--s8) var(--s8)}
.container-fluid.hero-lg{padding:var(--s9) var(--s8) var(--s8)}
.container-fluid.cred-bar{padding:0 var(--s8)}
.container-fluid.quote-bar{padding:var(--s7) var(--s8)}
.container-fluid.cta-section{padding:var(--s9) var(--s8)}
@media (min-width: 1600px){
  .container-fluid.section,.container-fluid.section--tight,.container-fluid.hero,
  .container-fluid.hero-lg,.container-fluid.cred-bar,.container-fluid.quote-bar,
  .container-fluid.cta-section{padding-left:var(--s9);padding-right:var(--s9)}
}
@media (max-width: 768px){
  .container-fluid.section,.container-fluid.section--tight,.container-fluid.hero,
  .container-fluid.hero-lg,.container-fluid.cred-bar,.container-fluid.quote-bar,
  .container-fluid.cta-section{padding-left:var(--s5);padding-right:var(--s5)}
}
/* Band wells: the column is now the flex container the band element used to be.
   (The dialect inserts row > col between the band and its children.) */
.quote-bar [class*="col-"]{display:flex;align-items:flex-start;gap:var(--s5)}

/* ── QUOTE BAR · headshot column (placeholder until CMS supplies photos) ── */
.quote-bar .row{--bs-gutter-x:var(--s7)}
.quote-photo-col{display:flex;justify-content:center}
.quote-photo,.quote-photo-ph{width:120px;height:120px;border-radius:50%;flex-shrink:0}
.quote-photo{object-fit:cover;display:block}
.quote-photo-ph{border:2px dashed var(--ink-500);color:var(--ink-400);display:flex;align-items:center;justify-content:center;font:600 11px/1 var(--ff-sans);letter-spacing:.08em;text-transform:uppercase}
@media (max-width: 768px){
  .quote-photo-col{margin-bottom:var(--s5)}
  .quote-photo,.quote-photo-ph{width:88px;height:88px}
}

/* ── WHY GOENGINEER · product-lifecycle digital thread (interactive, ink-900 band) ── */
.thread-band{padding:var(--space-4) 0 0}
.thread-rail{position:relative;display:flex;margin:0 0 var(--space-7)}
.thread-rail::before{content:'';position:absolute;top:31px;left:6.25%;right:6.25%;height:2px;background:var(--ink-700)}
.thread-progress{position:absolute;top:31px;left:6.25%;height:2px;background:var(--ge-green);transition:width .5s var(--ease-out);box-shadow:0 0 12px rgba(186,213,50,.55)}
.thread-node{position:relative;z-index:1;background:none;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);flex:1 1 0;min-width:0}
.thread-dot{width:64px;height:64px;border-radius:50%;background:var(--ink-900);border:2px solid var(--ink-700);display:flex;align-items:center;justify-content:center;transition:border-color var(--m-base) var(--ease-out),box-shadow var(--m-base) var(--ease-out),transform var(--m-base) var(--ease-out)}
.thread-dot img{width:30px;height:30px;max-width:none;filter:grayscale(1) brightness(2.2);opacity:.55;transition:filter var(--m-base) var(--ease-out),opacity var(--m-base) var(--ease-out)}
.thread-node:hover .thread-dot{border-color:var(--ink-300)}
.thread-node.passed .thread-dot{border-color:var(--ge-green)}
.thread-node.passed .thread-dot img,.thread-node.active .thread-dot img{filter:none;opacity:1}
.thread-node.active .thread-dot{border-color:var(--ge-green);box-shadow:0 0 0 6px rgba(186,213,50,.18),0 0 24px rgba(186,213,50,.35);transform:scale(1.12)}
.thread-label{font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--ink-400);text-align:center;max-width:100%;padding:0 6px;line-height:1.35;transition:color var(--m-base) var(--ease-out)}
.thread-node.active .thread-label{color:var(--white)}
.thread-node.passed .thread-label{color:var(--ink-300)}
.thread-stage{position:relative;min-height:200px}
.thread-panel{position:absolute;inset:0;display:flex;gap:var(--space-6);align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid var(--ink-700);border-radius:var(--r-md);padding:var(--space-6);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.thread-panel.active{opacity:1;transform:none;pointer-events:auto}
.thread-panel-icon{width:88px;height:88px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.thread-panel-icon img{width:64px;height:64px;max-width:none;filter:drop-shadow(0 0 1px rgba(255,255,255,.4))}
.thread-panel-num{font-family:var(--font-overline);font-size:var(--fs-eyebrow);letter-spacing:.14em;color:var(--ge-green);text-transform:uppercase}
.thread-panel h3{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--white);margin:4px 0 2px}
.thread-panel-sub{font-size:14px;font-weight:600;color:var(--ink-300);margin:0 0 var(--space-3)}
.thread-panel-body{font-size:15px;line-height:1.7;color:var(--ink-300);margin:0}
.thread-play{margin-top:var(--space-5);background:none;border:1px solid var(--ink-700);border-radius:var(--r-cta);color:var(--ink-300);font:600 12px/1 var(--font-body);padding:8px 14px;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;transition:border-color var(--m-fast) var(--ease-out),color var(--m-fast) var(--ease-out)}
.thread-play:hover{border-color:var(--ink-300);color:var(--white)}
@media (max-width: 992px){
  .thread-rail{flex-wrap:wrap;gap:var(--space-5);justify-content:flex-start}
  .thread-rail::before,.thread-progress{display:none}
  .thread-node{flex:1 1 22%}
  .thread-stage{min-height:0}
  .thread-panel{position:static;display:none}
  .thread-panel.active{display:flex;flex-direction:column;gap:var(--space-5)}
}
@media (prefers-reduced-motion: reduce){.thread-dot,.thread-panel,.thread-progress{transition:none}}

/* ── HERO TRUST ROW · customer logos under hero CTAs; brand logo + stats in cred bar ── */
.hero-trust{margin-top:var(--s7);max-width:520px}
.hero-trust-label{display:block;font:600 11px/1 var(--ff-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400);margin-bottom:var(--s3)}
.hero-trust .trust-carousel{display:flex;align-items:center;gap:var(--s2)}
.hero-trust .trust-logos{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:var(--s6);overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.hero-trust .trust-logos::-webkit-scrollbar{display:none}
.hero-trust .trust-logo-img{height:26px;max-height:26px;width:auto;flex-shrink:0;filter:brightness(0) invert(1);opacity:.55}
.hero-trust .trust-arrow{display:none;background:none;border:1px solid var(--ink-700);border-radius:var(--r-sm);color:var(--ink-300);width:28px;height:28px;cursor:pointer;font-size:16px;line-height:1;flex-shrink:0}
.cred-brand-cell img{display:inline-block;height:30px;width:auto;max-height:none}
/* BRAND CELL = identity use, full color. One mark per page (GoEngineer, SOLIDWORKS,
   3DEXPERIENCE or CATIA), so colour reads as ownership, not as a partner wall — and
   it keeps p.12 (no CSS-filter treatment of GoEngineer's own mark). The grayscale
   normalization above still governs the CUSTOMER logo cells, which must stay uniform. */
.cred-brand-cell img,
.cred-brand-cell img:hover{filter:none;opacity:1}
/* Every DS/GoEngineer brand asset ships on a padded canvas, so the mark never
   sits on the page gutter. All four assets are 300px-tall canvases rendered at
   height:30px (1:10), so a baked-in inset scales to the SAME CSS px on each —
   px is the correct unit here, NOT a percentage of width (that would correct each
   asset by a different amount). Desktop only: at <=768px the cell centers, where
   any pull would fight the centered stats. Only the leading mark moves, so the
   multi-logo row keeps its gap. Delete once trimmed assets are hosted. */
@media (min-width: 769px){
  .cred-brand-cell>img,
  .cred-brand-cell .cred-brand-logos img:first-child{transform:translateX(-20px)}
}
/* width contract: brand fixed, spacer absorbs slack, stats keep intrinsic row width */
.cred-bar td.cred-brand-cell{width:220px;min-width:220px;max-width:220px}
/* neutralize the legacy percentage/width games (spacer 100%, nth-child 132px) that
   made the auto-layout table expand past 100% and overflow the page */
.cred-bar td.cred-spacer-cell{width:auto}
.cred-bar td.cred-stats-cell{white-space:nowrap;width:auto;min-width:0;padding-left:0;text-align:right}
.cred-stats-cell .cred-stat{display:inline-flex;flex-direction:column;white-space:normal;text-align:left}
/* the last stat's trailing divider+spacing pushed the cluster past the content edge */
.cred-stats-cell .cred-stat:last-child{margin-right:0;padding-right:0;border-right:none}
.container-fluid.cred-bar > .row{max-width:1360px;margin-left:auto;margin-right:auto}
/* Mobile: the strip stacks (brand row above stats row) instead of dropping the
   brand logo and the stat labels — bare numbers carry no meaning. */
@media (max-width: 1200px){
  .cred-bar table,.cred-bar tbody,.cred-bar tr{display:block}
  .cred-bar td.cred-brand-cell{display:block;width:auto;min-width:0;max-width:none;padding:var(--s4) 0 0;text-align:left}
  .cred-bar td.cred-spacer-cell{display:none}
  .cred-bar td.cred-stats-cell{display:block;white-space:normal;text-align:left;padding:var(--s4) 0}
  .cred-stats-cell .cred-stat{display:inline-flex;margin-right:var(--s5);padding-right:var(--s5)}
}
@media (max-width: 1024px){
  .cred-stats-cell .cred-stat{margin-right:var(--s4);padding-right:var(--s4)}
}
@media (max-width: 768px){
  .hero-trust .trust-arrow{display:block}
  .hero-trust .trust-logos{gap:var(--s5)}
  .cred-stats-cell .cred-stat{margin-right:var(--s3);padding-right:var(--s3)}
  .cred-stats-cell .cred-stat .label{font-size:12px}
  /* narrow phones: the stats stack one per line — center brand + stats together */
  .cred-bar td.cred-brand-cell,
  .cred-bar tr td.cred-stats-cell:nth-child(n){text-align:center}
  .cred-stats-cell .cred-stat{text-align:center;margin-right:0;padding-right:0;border-right:none}
  /* full width so short stats can't share a line with the next one */
  .cred-stats-cell .cred-stat{display:flex;width:100%;margin-bottom:var(--s4)}
  .cred-stats-cell .cred-stat:last-child{margin-bottom:0}
}

/* ── COMPARE TABLE · in-house vs consulting (retemplated services pages) ── */
.compare-table{width:100%;border-collapse:collapse;font-size:14px}
.compare-table th{font-family:var(--ff-display);font-size:14px;font-weight:600;color:var(--ink-900);text-align:left;padding:var(--s4);background:var(--ink-50);border:1px solid var(--ink-150)}
.compare-table td{padding:var(--s4);border:1px solid var(--ink-150);color:var(--ink-500);line-height:1.55;vertical-align:top}
.compare-table td:first-child{font-weight:600;color:var(--ink-900);white-space:nowrap}
/* GoEngineer column = ink-900 dark band, brand-green header, light body text (dark-band rules) */
.compare-table .compare-hl{background:var(--ink-900);color:var(--ink-300);border-color:var(--ink-700)}
.compare-table th.compare-hl{background:var(--ink-900);color:var(--ge-green);border-color:var(--ink-700)}

/* cred strip brand cell may hold several product logos side by side;
   logos scale down as count grows so the cell never crowds the stats */
.cred-brand-cell .cred-brand-logos{display:inline-flex;align-items:center;gap:var(--s5)}
.cred-brand-cell .cred-brand-logos img{height:30px;width:auto;max-height:none;display:block}
.cred-brand-cell .cred-brand-logos img:first-child:nth-last-child(2),
.cred-brand-cell .cred-brand-logos img:first-child:nth-last-child(2) ~ img{height:24px}
.cred-brand-cell .cred-brand-logos img:first-child:nth-last-child(n+3),
.cred-brand-cell .cred-brand-logos img:first-child:nth-last-child(n+3) ~ img{height:20px}
.cred-brand-cell .cred-brand-logos img:first-child:nth-last-child(n+2){max-width:140px;object-fit:contain}
@media (max-width: 1400px){
  .cred-brand-cell .cred-brand-logos{gap:var(--s4)}
  .cred-brand-cell .cred-brand-logos img:first-child:nth-last-child(n+2),
  .cred-brand-cell .cred-brand-logos img:first-child:nth-last-child(n+2) ~ img{height:20px;max-width:120px}
}