/* =====================================================================
   JPS-iQ Solutions Group — Group Site
   Stylesheet v1.0 (rebuild 2026-04)

   Brand color:  #1A77B3
   Type:         system-native font stack (deliberate choice — see
                 --ff-sans below; no third-party webfont license required)
   ===================================================================== */

/* ---------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------- */
:root {
  /* Brand */
  --c-brand:        #1A77B3;
  --c-brand-700:    #155E8E;
  --c-brand-800:    #11456A;
  --c-brand-50:     #EAF3FA;
  --c-brand-100:    #D3E6F4;

  /* Neutrals */
  --c-ink:          #0B1B2B;   /* deep navy — primary text */
  --c-ink-2:        #2A3B4D;   /* muted body */
  --c-ink-3:        #5A6B7D;   /* meta / labels */
  --c-line:         #E2E8EE;   /* hairlines */
  --c-bg:           #FFFFFF;
  --c-bg-alt:       #F5F8FB;
  --c-bg-deep:      #0B1B2B;   /* dark sections */
  --c-bg-deep-2:    #0F2438;

  /* Type */
  /* System-native font stack — deliberate choice, no third-party webfont license required */
  --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
             Helvetica, Arial, sans-serif;

  /* Scale */
  --fs-xs:   0.8125rem;  /* 13 */
  --fs-sm:   0.9375rem;  /* 15 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.375rem;   /* 22 */
  --fs-xl:   1.75rem;    /* 28 */
  --fs-2xl:  clamp(1.875rem, 2vw + 1rem, 2.625rem);
  --fs-3xl:  clamp(2.25rem, 3vw + 1rem, 3.5rem);
  --fs-4xl:  clamp(2.75rem, 4.5vw + 1rem, 5rem);

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6.5rem;
  --s-10: 9rem;

  /* Layout */
  --max-w: 1440px;
  --radius: 16px;
  --radius-sm: 10px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur:  300ms;
}

/* ---------------------------------------------------------------------
   Reset / base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--c-brand); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--c-brand-700); }
button { font: inherit; cursor: pointer; }
:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
@media (min-width: 768px) { .container { padding: 0 var(--s-6); } }
@media (min-width: 1024px) { .container { padding: 0 var(--s-7); } }

.section { padding: var(--s-9) 0; }
@media (min-width: 1024px) { .section { padding: var(--s-10) 0; } }
.section--tight { padding: var(--s-8) 0; }
.section--alt { background: var(--c-bg-alt); }
.section--deep { background: var(--c-bg-deep); color: #fff; }
.section--deep h1, .section--deep h2, .section--deep h3 { color: #fff; }
.section--deep p { color: rgba(255,255,255,0.78); }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 var(--s-4);
}
.section--deep .eyebrow { color: #67B7E5; }

h1, h2, h3, h4 {
  font-family: var(--ff-sans);
  color: var(--c-ink);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0 0 var(--s-5);
}
h1 { font-size: var(--fs-4xl); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-3xl); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--s-4); color: var(--c-ink-2); font-size: var(--fs-md); }
.lead { font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem); color: var(--c-ink-2); }
.kicker { font-size: var(--fs-sm); color: var(--c-ink-3); }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.875rem 1.375rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  transition: transform var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn--primary {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
}
.btn--primary:hover { background: var(--c-brand-700); border-color: var(--c-brand-700); color: #fff; transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line);
}
.btn--ghost:hover { border-color: var(--c-brand); color: var(--c-brand); }
.section--deep .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.25); }
.section--deep .btn--ghost:hover { border-color: #fff; color: #fff; }
.btn--lg { padding: 1.05rem 1.75rem; font-size: var(--fs-base); }

/* ---------------------------------------------------------------------
   Header / Nav
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.site-header.is-scrolled {
  border-color: var(--c-line);
  background: rgba(255,255,255,0.96);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: var(--s-5);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-ink);
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
}
.brand-mark {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--c-brand);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0;
}
.brand-name { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name strong { font-weight: 600; color: var(--c-ink); }
.brand-name span  { font-size: var(--fs-xs); color: var(--c-ink-3); font-weight: 500; }

.nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--s-6);
  align-items: center;
}
.nav-links a {
  color: var(--c-ink-2);
  font-weight: 500;
  font-size: var(--fs-sm);
}
.nav-links a:hover { color: var(--c-brand); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 2px;
  background: #fff;
}
.lang-switch a {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  color: var(--c-ink-3);
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.lang-switch a.is-active {
  background: var(--c-brand);
  color: #fff;
}
.lang-switch a:not(.is-active):hover { color: var(--c-brand); }

.nav-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 1px solid var(--c-line);
  background: #fff;
  color: var(--c-ink);
}
.nav-toggle:hover { border-color: var(--c-brand); color: var(--c-brand); }

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
}

/* Mobile drawer */
/* Row 2 — secondary, dezente Story-/In-Page-Navigation der aktuellen Seite.
   Bewusst visuell leichter als Zeile 1 (kleiner, gedeckte Farbe, duenner Trenner). */
.story-nav-wrap { display: none; }
@media (min-width: 1024px) {
  .story-nav-wrap {
    display: block;
    border-top: 1px solid var(--c-line);
    background: var(--c-bg-alt);
  }
}
.story-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: 44px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.story-nav::-webkit-scrollbar { display: none; }
.story-nav > li { flex-shrink: 0; }
.story-nav a {
  color: var(--c-ink-3);
  font-weight: 500;
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.story-nav a:hover { color: var(--c-brand); }

:root { --header-h: 76px; }
.nav-drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: #fff;
  z-index: 49;
  padding: var(--s-6) var(--s-5);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  border-top: 1px solid var(--c-line);
  overflow-y: auto;
}
.nav-drawer.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-drawer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.nav-drawer a { display: block; padding: var(--s-3) 0; font-size: var(--fs-md); color: var(--c-ink); font-weight: 500; border-bottom: 1px solid var(--c-line); }
.nav-drawer .btn { margin-top: var(--s-5); width: 100%; justify-content: center; }
@media (min-width: 1024px) { .nav-drawer { display: none; } }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: var(--s-9) 0 var(--s-9);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(26,119,179,0.12), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(26,119,179,0.08), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--c-bg-alt) 100%);
  overflow: hidden;
}
@media (min-width: 1024px) { .hero { padding: var(--s-10) 0 var(--s-10); } }

.hero-grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-9); }
}
.hero h1 {
  margin-top: var(--s-3);
  max-width: 18ch;
}
.hero .lead {
  max-width: 52ch;
  margin-bottom: var(--s-7);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero-meta {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-6);
}
.hero-meta div { font-size: var(--fs-sm); color: var(--c-ink-3); }
.hero-meta strong {
  display: block;
  font-size: var(--fs-lg);
  color: var(--c-ink);
  font-weight: 600;
  margin-bottom: 2px;
}

/* Hero visual: layered glass card */
.hero-visual {
  position: relative;
  aspect-ratio: 5 / 6;
  max-width: 520px;
  margin-left: auto;
  border-radius: 24px;
  background:
    linear-gradient(160deg, #11456A 0%, #1A77B3 60%, #67B7E5 100%);
  box-shadow:
    0 30px 60px -20px rgba(11,27,43,0.35),
    0 8px 20px -10px rgba(11,27,43,0.25);
  overflow: hidden;
  color: #fff;
  padding: var(--s-7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-visual::before {
  content: "";
  position: absolute; inset: -40% -10% auto auto;
  width: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255,255,255,0.35), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.hero-visual::after {
  content: "";
  position: absolute; left: -20%; bottom: -30%;
  width: 80%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255,255,255,0.2), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.hv-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.hv-quote {
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.6rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #fff;
  margin: var(--s-5) 0 var(--s-6);
}
.hv-attrib { font-size: var(--fs-sm); color: rgba(255,255,255,0.85); }
.hv-attrib strong { color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------------
   Trust strip
   --------------------------------------------------------------------- */
.trust {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: var(--s-6) 0;
  background: #fff;
}
.trust-row {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 768px) { .trust-row { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-7); } }
.trust-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  font-weight: 600;
}
.trust-marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6) var(--s-7);
  align-items: center;
}
.trust-marks .mark {
  display: inline-flex;
  align-items: center; gap: var(--s-2);
  color: var(--c-ink-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-bg-alt);
}
.trust-marks .mark::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--c-brand);
}

/* ---------------------------------------------------------------------
   Pillars
   --------------------------------------------------------------------- */
.pillars {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
.pillar {
  padding: var(--s-7) var(--s-6);
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--c-line);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pillar:hover {
  transform: translateY(-2px);
  border-color: var(--c-brand-100);
  box-shadow: 0 12px 30px -16px rgba(11,27,43,0.18);
}
.pillar-num {
  display: inline-flex;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--c-brand-50);
  color: var(--c-brand);
  font-weight: 700;
  align-items: center; justify-content: center;
  margin-bottom: var(--s-5);
  font-size: var(--fs-sm);
}
.pillar h3 { margin-bottom: var(--s-3); color: var(--c-ink); }
.pillar p { margin: 0; font-size: var(--fs-base); color: var(--c-ink); }

/* Section heading layout */
.section-head {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--s-8);
  max-width: 880px;
}
@media (min-width: 1024px) {
  .section-head { grid-template-columns: minmax(0, 1fr); }
}
.section-head .lead { max-width: 56ch; }

/* ---------------------------------------------------------------------
   Method (Strategy → Systems → Operations)
   --------------------------------------------------------------------- */
.method {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) { .method { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.method-step {
  padding: var(--s-7) var(--s-6);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  position: relative;
}
.method-step .num {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #67B7E5;
  font-weight: 600;
  margin-bottom: var(--s-4);
}
.method-step h3 { color: #fff; margin-bottom: var(--s-3); font-size: var(--fs-lg); }
.method-step p { color: rgba(255,255,255,0.78); font-size: var(--fs-base); margin: 0; }

/* ---------------------------------------------------------------------
   Business Units
   --------------------------------------------------------------------- */
.bu-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .bu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bu {
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-6);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.bu::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--c-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.bu:hover {
  border-color: var(--c-brand-100);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(11,27,43,0.18);
}
.bu:hover::after { transform: scaleX(1); }
.bu-tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: var(--s-3);
}
.bu h3 { margin-bottom: var(--s-3); font-size: var(--fs-xl); }
.bu p { margin-bottom: var(--s-5); font-size: var(--fs-base); color: var(--c-ink-2); }
.bu-meta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}
.bu-meta .arrow {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  color: var(--c-brand);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bu:hover .bu-meta .arrow {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
}

/* ---------------------------------------------------------------------
   Industries
   --------------------------------------------------------------------- */
.industries {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .industries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .industries { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.industry {
  padding: var(--s-6);
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--c-line);
  display: flex; flex-direction: column; gap: var(--s-3);
  min-height: 180px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.industry:hover { border-color: var(--c-brand); background: var(--c-brand-50); }
.industry .ico {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--c-brand-50);
  color: var(--c-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--fs-sm);
}
.industry h4 { font-size: var(--fs-md); margin: 0; }
.industry p { font-size: var(--fs-sm); margin: 0; color: var(--c-ink-3); }

/* ---------------------------------------------------------------------
   Founder
   --------------------------------------------------------------------- */
.founder {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 1024px) {
  .founder { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-9); }
}
.founder-card {
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: #fff;
  padding: var(--s-7);
  text-align: center;
}
.founder-photo {
  width: 140px; height: 140px;
  border-radius: 999px;
  margin: 0 auto var(--s-5);
  background: linear-gradient(160deg, #11456A 0%, #1A77B3 100%);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.02em;
}
.founder-card h3 { font-size: var(--fs-lg); margin-bottom: var(--s-1); }
.founder-card .role { font-size: var(--fs-sm); color: var(--c-ink-3); margin: 0 0 var(--s-5); }
.founder-card .linkedin {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--c-line);
}
.founder-card .linkedin:hover { border-color: var(--c-brand); }
.founder-quote {
  font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--c-ink);
  position: relative;
  padding-left: var(--s-6);
}
.founder-quote::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--c-brand);
  border-radius: 2px;
}

/* ---------------------------------------------------------------------
   Insights
   --------------------------------------------------------------------- */
.insights {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) { .insights { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.insight {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  text-decoration: none;
  color: inherit;
}
.insight:hover {
  border-color: var(--c-brand-100);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -18px rgba(11,27,43,0.16);
}
.insight .topic {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: var(--s-3);
}
.insight h4 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.insight p { font-size: var(--fs-base); color: var(--c-ink-2); margin: 0 0 var(--s-5); }
.insight .meta {
  margin-top: auto;
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
  display: flex; justify-content: space-between; align-items: center;
}

/* ---------------------------------------------------------------------
   Final CTA
   --------------------------------------------------------------------- */
.cta-final {
  background: linear-gradient(135deg, #0B1B2B 0%, #11456A 60%, #1A77B3 120%);
  color: #fff;
  border-radius: 24px;
  padding: var(--s-9) var(--s-7);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute; inset: -30% -10% auto auto;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255,255,255,0.18), transparent 70%);
  filter: blur(16px);
}
.cta-final h2 { color: #fff; max-width: 22ch; margin: 0 auto var(--s-5); }
.cta-final p { color: rgba(255,255,255,0.85); max-width: 56ch; margin: 0 auto var(--s-7); }
.cta-final-actions { display: inline-flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer {
  background: #0B1B2B;
  color: rgba(255,255,255,0.78);
  padding: var(--s-9) 0 var(--s-7);
  margin-top: var(--s-9);
}
.footer-grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); } }
.footer-grid h5 {
  color: #fff;
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 var(--s-4);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.footer-grid a { color: rgba(255,255,255,0.78); font-size: var(--fs-sm); }
.footer-grid a:hover { color: #fff; }
.footer-brand p { color: rgba(255,255,255,0.7); font-size: var(--fs-sm); max-width: 38ch; }
.footer-legal {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.6);
}
.footer-legal a { color: rgba(255,255,255,0.7); }
.footer-legal a:hover { color: #fff; }
.footer-entities {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-6);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.6);
}
@media (min-width: 768px) { .footer-entities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer-entities strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------
   Reveal on scroll (progressive enhancement)
   --------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------
   Utility
   --------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-brand); color: #fff;
  padding: 0.6rem 1rem; border-radius: 0 0 8px 8px;
  z-index: 100;
}
.skip-link:focus { left: 12px; }

/* =====================================================================
   BU-specific extensions (NetSuite and shared BU components)
   ===================================================================== */

/* BU header — extends base brand block with unit tag */
.brand-bu {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-brand);
  background: var(--c-brand-50);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-left: 0.35rem;
}
.brand-parent {
  display: none;
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  margin-left: var(--s-4);
  padding-left: var(--s-4);
  border-left: 1px solid var(--c-line);
}
.brand-parent a { color: var(--c-ink-3); font-weight: 500; }
.brand-parent a:hover { color: var(--c-brand); }
@media (min-width: 768px) { .brand-parent { display: inline-flex; align-items: center; gap: 0.35rem; } }

/* Hero — partner-badge treatment inside hero */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.4rem 0.8rem 0.4rem 0.4rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: #fff;
  margin-bottom: var(--s-5);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.hero-badge .dot {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--c-brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
}

/* Capabilities / Approach 2-col split */
.split {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-9); }
}
.split-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.split-list li {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.split-list li:hover { border-color: var(--c-brand-100); box-shadow: 0 10px 26px -16px rgba(11,27,43,0.16); }
.split-list .tag {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--c-brand-50);
  color: var(--c-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}
.split-list .tag.mono { background: var(--c-ink); color: #fff; }
.split-list h4 { margin: 0 0 0.25rem; font-size: var(--fs-md); }
.split-list p  { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-3); }

/* Method 4-step (used when we need four nodes instead of three) */
.method-4 {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .method-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .method-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.method-4 .method-step { padding: var(--s-6) var(--s-5); }
.method-4 .method-step h3 { font-size: var(--fs-md); }

/* Manufacturing feature — dark contrast block */
.feature-block {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr);
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(26,119,179,0.22), transparent 60%),
    linear-gradient(150deg, #0B1B2B 0%, #11456A 100%);
  color: #fff;
  padding: var(--s-8) var(--s-7);
  border-radius: 24px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .feature-block { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: var(--s-9) var(--s-9); gap: var(--s-9); }
}
.feature-block h2, .feature-block h3 { color: #fff; }
.feature-block p { color: rgba(255,255,255,0.82); }
.feature-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #67B7E5;
  background: rgba(26,119,179,0.22);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  margin-bottom: var(--s-4);
}
.feature-bullets {
  list-style: none; padding: 0; margin: var(--s-5) 0 0;
  display: grid; gap: var(--s-3);
}
.feature-bullets li {
  position: relative;
  padding-left: 1.75rem;
  color: rgba(255,255,255,0.88);
  font-size: var(--fs-base);
}
.feature-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--c-brand);
  box-shadow: 0 0 0 4px rgba(26,119,179,0.25);
}
.feature-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  padding: var(--s-6);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
}
.feature-metrics strong {
  display: block;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}
.feature-metrics span {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.75);
}

/* Partner logo grid — no bitmap logos, typographic lockups with accent ring */
.partner-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .partner-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.partner {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-5);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  min-height: 120px;
}
.partner:hover {
  border-color: var(--c-brand-100);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(11,27,43,0.16);
}
.partner-name {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  line-height: 1.2;
}
.partner-role {
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.partner-badge-dot {
  width: 8px; height: 8px;
  background: var(--c-brand);
  border-radius: 999px;
  margin-bottom: 0.35rem;
}

/* Differentiation row */
.diff-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) { .diff-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.diff-card {
  padding: var(--s-7) var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: #fff;
  position: relative;
  overflow: hidden;
}
.diff-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--c-brand);
}
.diff-card h4 { font-size: var(--fs-md); margin: 0 0 var(--s-3); }
.diff-card p { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-3); }

/* Breadcrumb back to group */
.bu-crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.bu-crumb a {
  color: var(--c-ink-3);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.bu-crumb a:hover { color: var(--c-brand); border-color: var(--c-brand); }

/* =====================================================================
   OPCON-specific components (stages, signals, recovery grid)
   ===================================================================== */

/* Stage grid — three escalating stages (Rescue → Stabilize → Enable) */
.stages {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
  counter-reset: stage;
}
@media (min-width: 1024px) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }

.stage {
  position: relative;
  padding: var(--s-7) var(--s-6) var(--s-6);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.stage::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 4px;
  background: var(--c-brand);
}
.stage:hover {
  border-color: var(--c-brand-100);
  box-shadow: 0 22px 48px -28px rgba(11,27,43,0.2);
  transform: translateY(-2px);
}
.stage .stage-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.stage .stage-num {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--c-brand-50);
  color: var(--c-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.stage .stage-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-brand);
}
.stage h3 { font-size: var(--fs-lg); margin: 0 0 var(--s-3); }
.stage p  { margin: 0 0 var(--s-4); color: var(--c-ink-3); }
.stage ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px dashed var(--c-line);
  padding-top: var(--s-4);
  display: grid;
  gap: var(--s-2);
}
.stage ul li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}
.stage ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--c-brand);
}

/* Stage-1 (Rescue) — darker / more urgent treatment */
.stage.stage--rescue::before { background: linear-gradient(90deg, #E03131 0%, #1A77B3 100%); }
.stage.stage--rescue .stage-num { background: rgba(224,49,49,0.1); color: #C92A2A; }
.stage.stage--rescue .stage-label { color: #C92A2A; }

/* Signals / red flags grid — "this is your situation" */
.signals {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .signals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .signals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.signal {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-5) var(--s-5);
  background: #fff;
  border: 1px solid var(--c-line);
  border-left: 3px solid #E03131;
  border-radius: var(--radius);
}
.signal .signal-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(224,49,49,0.08);
  color: #C92A2A;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--fs-md);
}
.signal h4 { margin: 0 0 0.25rem; font-size: var(--fs-md); }
.signal p  { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-3); }

/* Outcomes row — hero-metric look, but reusable standalone */
.outcomes {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--s-6);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
@media (min-width: 768px) { .outcomes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.outcome strong {
  display: block;
  font-size: clamp(1.5rem, 1.6vw + 0.6rem, 2rem);
  color: var(--c-ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.15rem;
}
.outcome span {
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}

/* =====================================================================
   Microsoft-specific components (two-platform grid, segment tags)
   ===================================================================== */

/* Two-platform card grid — BC (Mid-Market) / F&SCM (Enterprise) */
.platforms {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) { .platforms { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); } }

.platform-card {
  position: relative;
  padding: var(--s-7) var(--s-6) var(--s-6);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.platform-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 4px;
  background: var(--c-brand);
}
.platform-card:hover {
  border-color: var(--c-brand-100);
  box-shadow: 0 22px 48px -28px rgba(11,27,43,0.2);
  transform: translateY(-2px);
}
.platform-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.platform-mark {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--c-brand-50);
  color: var(--c-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.platform-head strong {
  display: block;
  font-size: var(--fs-md);
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.platform-head .platform-segment {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  margin-top: 0.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.platform-card h3 { font-size: var(--fs-lg); margin: 0; line-height: 1.25; }
.platform-card > p { margin: 0; color: var(--c-ink-3); }
.platform-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-2);
}
.platform-card ul li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}
.platform-card ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--c-brand);
}
.platform-footnote {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px dashed var(--c-line);
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  letter-spacing: 0.04em;
}
.platform-footnote strong { color: var(--c-ink); letter-spacing: 0; }


/* === Master-brand logo (JPS-iQ) — added for launch === */
.brand-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 260px;
}
.brand-logo--footer {
  height: 52px;
  max-width: 280px;
}
.brand-name--hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* override legacy .brand-mark sizing for BU pages that still fall back on text */
.brand .brand-mark + .brand-name { margin-left: 0.75rem; }



/* === Hero partner-credential strip (launch) === */
.hero-partner {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(11, 27, 43, 0.05);
}
.hero-partner img {
  display: block;
  height: 40px;
  width: auto;
}
.hero-partner .hp-label {
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}



/* =========================================================================
   LAUNCH FIX PATCH — applied across all BU sites
   ========================================================================= */

/* --- 1. Contact-box ghost buttons on dark gradient --- */
.cta-final .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.04);
}
.cta-final .btn--ghost:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.10);
}
.cta-final .eyebrow { color: #A6D6F0 !important; }

/* --- 2. Header compactness — prevent brand-block wrapping --- */
.site-header .nav { gap: var(--s-5); }
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%; flex-shrink: 0; }
.site-header .brand-logo {
  height: 40px;
  width: auto;
  max-width: 180px;
  flex-shrink: 0;
}
.site-header .brand-name {
  min-width: 0;
  flex-shrink: 1;
}
.site-header .brand-name strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 320px;
}
/* Logo itself already says 'JPS-iQ SOLUTIONS' → entity sub-line and
   'part of JPS-iQ Solutions Group' are redundant in the HEADER.
   Both remain visible in the footer and imprint. */
.site-header .brand-name > span { display: none !important; }
.site-header .brand-parent     { display: none !important; }

@media (max-width: 900px) {
  .site-header .brand-name { display: none; }
  .site-header .brand-logo { height: 36px; max-width: 160px; }
}

/* --- 3. Hero partner strip — own row, cleaner styling --- */
.hero-partner {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.9rem;
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(11, 27, 43, 0.05);
}
.hero-partner img {
  display: block;
  height: 36px;
  width: auto;
  max-height: 36px;
}
/* Hide the redundant 'PARTNER PROOF' label — the logo is self-explanatory */
.hero-partner .hp-label { display: none; }

/* Ensure hero-badge and hero-partner stack instead of sitting side-by-side */
.hero-badge + .hero-partner,
.hero-partner { display: flex; width: max-content; max-width: 100%; }

/* =========================================================================
   TRUST-STRIP chip-based (aligned with group homepage pattern)
   ========================================================================= */
.trust-row--logo {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}
@media (min-width: 900px) {
  .trust-row--logo {
    flex-direction: row;
    align-items: center;
    gap: var(--s-6);
    flex-wrap: wrap;
  }
}
.trust-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  align-items: center;
}
.trust-claims {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  align-items: stretch;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 10px 16px;
  background: #ffffff;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(11, 27, 43, 0.04);
}
.trust-chip img { display: block; height: 40px; width: auto; max-width: 200px; object-fit: contain; }
.trust-claim {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  min-height: 64px;
  justify-content: center;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  line-height: 1.3;
}
.trust-claim strong {
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.trust-claim--hi {
  background: #0B1B2B;
  border-color: #0B1B2B;
  color: rgba(255, 255, 255, 0.78);
}
.trust-claim--hi strong { color: #fff; }
@media (max-width: 640px) {
  .trust-chip { height: 54px; padding: 8px 12px; }
  .trust-chip img { height: 32px; max-width: 150px; }
  .trust-claim { min-height: 54px; }
}

/* =========================================================================
   PARTNER ECOSYSTEM — logo/wordmark grid (aligned with NetSuite pattern)
   ========================================================================= */
.partner-grid--logo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px)  { .partner-grid--logo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .partner-grid--logo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.partner--logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  min-height: 148px;
  text-align: center;
  transition: border-color var(--dur) var(--ease),
              box-shadow    var(--dur) var(--ease),
              transform     var(--dur) var(--ease);
}
.partner--logo:hover {
  border-color: var(--c-brand-100);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(11, 27, 43, 0.16);
}
.partner--logo .partner__logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: none;
}
.partner--logo .partner__wordmark {
  font-size: var(--fs-md);
  line-height: 1.2;
  color: var(--c-ink);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.partner--logo .partner__cat {
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--c-ink-3);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 0.15rem;
}


/* ============================================================
   MICROSOFT — Product tiles (BC / F&O / Power BI)
   ============================================================ */
.product-tiles{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--s-4);
  margin-top:var(--s-5);
}
@media (max-width: 960px){
  .product-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .product-tiles{ grid-template-columns:minmax(0, 1fr); }
}

.product-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:var(--s-5);
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 36px -16px rgba(15,32,57,0.22);
  border-color:rgba(26,119,179,0.45);
}
.product-tile--lead{
  border-color:rgba(26,119,179,0.45);
  box-shadow:0 10px 30px -18px rgba(26,119,179,0.25);
}
.product-tile--accent{
  border-color:rgba(242,182,21,0.55);
  background:linear-gradient(180deg,#fff 0%,#fffaf0 100%);
}

.product-tile__tag{
  display:inline-block;
  align-self:flex-start;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--c-brand);
  background:rgba(26,119,179,0.08);
  padding:.3rem .6rem;
  border-radius:999px;
}
.product-tile__tag--soft{
  color:#64748B;
  background:rgba(100,116,139,0.1);
}
.product-tile__tag--accent{
  color:#B4820F;
  background:rgba(242,182,21,0.18);
}

.product-tile__logo-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:60px;
  padding:var(--s-2) 0;
}
.product-tile__logo{
  max-height:48px;
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

.product-tile h3{
  font-size:var(--fs-lg);
  line-height:1.25;
  margin:0;
  color:var(--c-ink);
}
.product-tile p{
  color:var(--c-ink-soft,#4B5563);
  font-size:var(--fs-sm);
  margin:0;
  flex:1;
}
.product-tile__cta{
  display:inline-block;
  margin-top:var(--s-2);
  font-weight:600;
  font-size:var(--fs-sm);
  color:var(--c-brand);
  text-decoration:none;
}
.product-tile__cta:hover{
  text-decoration:underline;
}

.product-tiles__note{
  margin-top:var(--s-4);
  font-size:var(--fs-sm);
  color:var(--c-ink-soft,#4B5563);
  font-style:italic;
  text-align:center;
}

/* ============================================================
   MICROSOFT — Platform flag (Lead / Supported)
   ============================================================ */
.platform-head{ position:relative; }
.platform-flag{
  position:absolute;
  top:0;
  right:0;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  background:var(--c-brand);
  padding:.3rem .65rem;
  border-radius:999px;
}
.platform-flag--soft{
  color:#64748B;
  background:rgba(100,116,139,0.15);
}
.platform-flag--rescue{
  color:#fff;
  background:#B91C1C;
  box-shadow:0 2px 10px -2px rgba(185,28,28,0.35);
}
.platform-card--lead{
  border-color:rgba(26,119,179,0.45);
  box-shadow:0 10px 30px -18px rgba(26,119,179,0.25);
}
.platform-card--rescue{
  border-color:rgba(185,28,28,0.35);
  box-shadow:0 10px 30px -18px rgba(185,28,28,0.22);
}

/* ============================================================
   MICROSOFT — Modern Workspace grid
   ============================================================ */
.workspace-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--s-3);
  margin-top:var(--s-5);
}
@media (max-width: 960px){
  .workspace-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .workspace-grid{ grid-template-columns:minmax(0, 1fr); }
}
.workspace-card{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  padding:var(--s-4);
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
}
.workspace-card__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.04em;
  color:#fff;
  background:var(--c-brand);
  border-radius:10px;
}
.workspace-card h4{
  margin:var(--s-1) 0 0;
  font-size:var(--fs-md);
  color:var(--c-ink);
}
.workspace-card p{
  margin:0;
  font-size:var(--fs-sm);
  color:var(--c-ink-soft,#4B5563);
}
.workspace-note{
  margin-top:var(--s-5);
  padding:var(--s-4);
  background:rgba(26,119,179,0.06);
  border-left:3px solid var(--c-brand);
  border-radius:6px;
  font-size:var(--fs-sm);
  color:var(--c-ink-soft,#4B5563);
}
.workspace-note strong{
  color:var(--c-ink);
  display:block;
  margin-bottom:.25rem;
}

/* ==========================================================================
   Template v1 — Universal Components (ported from NetSuite, adapted to Microsoft tokens)
   Gilt BU-übergreifend. Bitte parallel in allen BU-Stylesheets halten.
   ========================================================================== */

/* --- Mid-CTA Band ---------------------------------------------------------
   Schmaler, vollflächiger Zwischen-CTA — zwischen Sektionen eingesetzt.
   ------------------------------------------------------------------------- */
.mid-cta {
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-bg-deep) 100%);
  color: #fff;
  padding: var(--s-7) 0;
}
.mid-cta .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  text-align: center;
}
.mid-cta-text {
  color: #fff;
  font-size: 1.15rem;
  line-height: 1.5;
  font-weight: 500;
  max-width: 56ch;
  margin: 0;
}
.mid-cta .btn--primary {
  background: #fff;
  color: var(--c-bg-deep);
  border-color: #fff;
}
.mid-cta .btn--primary:hover {
  background: rgba(255,255,255,0.9);
  color: var(--c-bg-deep);
  border-color: rgba(255,255,255,0.9);
}
@media (min-width: 760px) {
  .mid-cta { padding: var(--s-8) 0; }
  .mid-cta .container { flex-wrap: nowrap; justify-content: space-between; text-align: left; gap: var(--s-7); }
  .mid-cta-text { text-align: left; }
}

/* --- Why JPS-iQ — 2x2 Grid -----------------------------------------------
   Differenzierungs-Block pro BU-Seite. Vier Karten mit Titel + Fließtext.
   ------------------------------------------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
}
@media (min-width: 760px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}
.why-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: var(--s-6);
  box-shadow: 0 1px 2px rgba(10,40,80,0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.why-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10,40,80,0.06);
  border-color: #C8D9EA;
}
.why-card h3 {
  font-size: 1.18rem;
  margin: 0 0 0.6rem 0;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.why-card p {
  margin: 0;
  color: #334E70;
  font-size: 0.98rem;
  line-height: 1.6;
}

/* --- Trust — Partner Stack (Hero-Unterzeile: Core + Partner-Ring) ---------
   3 Karten: Categoria + Logo/Wordmark. Ersetzt das Vorgänger-Äquivalent 1:1.
   ------------------------------------------------------------------------- */
.trust--stack {
  padding: 2.5rem 0 2rem;
  background: #F7FAFC;
  border-top: 1px solid rgba(10,40,80,0.06);
  border-bottom: 1px solid rgba(10,40,80,0.06);
}
.trust-stack-head {
  max-width: 760px;
  margin: 0 auto 1.5rem;
  text-align: center;
}
.trust-stack-title {
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.trust-stack-sub {
  font-size: 0.95rem;
  color: rgba(10,40,80,0.65);
  margin: 0;
  line-height: 1.55;
}
.partner-stack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
  align-items: stretch;
  max-width: 820px;
  margin: 0 auto;
}
.partner-stack-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 120px;
  padding: 1.1rem 0.9rem;
  background: #fff;
  border: 1px solid rgba(10,40,80,0.10);
  border-radius: 14px;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.partner-stack-card:hover {
  transform: translateY(-2px);
  border-color: rgba(26,119,179,0.28);
  box-shadow: 0 10px 24px rgba(10,40,80,0.08);
}
.partner-stack-card img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 140px;
  max-height: 34px;
  object-fit: contain;
}
.partner-stack-wordmark {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.partner-stack-cat {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(10,40,80,0.58);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.partner-stack-card--core {
  background: linear-gradient(180deg,#F0F7FC 0%,#E3F0F9 100%);
  border-color: rgba(26,119,179,0.28);
  box-shadow: 0 4px 14px rgba(26,119,179,0.08);
}
.partner-stack-card--core .partner-stack-cat {
  color: var(--c-brand);
}
.partner-stack-card--missing {
  background: #fff;
}
@media (max-width: 560px) {
  .partner-stack-grid { grid-template-columns: minmax(0, 1fr); max-width: 360px; }
}

/* --- FAQ — Accordion -----------------------------------------------------
   Harte FAQs pro BU: Was ist die Lösung? Warum JPS-iQ? Was macht uns anders?
   Universal + 1-2 BU-spezifische Fragen. HTML5 <details>/<summary>.
   ------------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: 0.85rem;
  margin-top: var(--s-7);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.faq-item[open] {
  border-color: rgba(26,119,179,0.28);
  box-shadow: 0 4px 14px rgba(10,40,80,0.06);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.5rem;
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--c-ink);
  display: flex;
  align-items: center;
  gap: 1rem;
  line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  margin-left: auto;
  font-size: 1.4rem;
  color: var(--c-brand);
  transition: transform 180ms ease;
  line-height: 1;
  flex-shrink: 0;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item summary:hover { color: var(--c-brand); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: 12px;
}
.faq-body {
  padding: 0 1.5rem 1.3rem 1.5rem;
  color: #334E70;
  line-height: 1.65;
  font-size: 0.98rem;
}
.faq-body p { margin: 0 0 0.8rem 0; }
.faq-body p:last-child { margin-bottom: 0; }

/* ============================================================
 * Long-word overflow safety (DE compound words)
 * Added: 2026-04-30 — fixes Skalierungspfad / Schatten-Tools etc.
 * Applies safe word-break + hyphenation to elements that use
 * large or fixed-width typography. Conservative: only breaks
 * when a word would otherwise overflow.
 * Hyphens disabled 2026-08-08: browser dictionary-based hyphens
 * produced wrong breaks on brand terms and English loanwords
 * (e.g. "SuiteSuc-cess", "Ma-nufacturing"). overflow-wrap still
 * prevents container overflow.
 * ============================================================ */
.feature-metrics strong,
.feature-metrics span,
.hero h1,
.section-head h2,
.feature-block h2,
.cta-final h2,
.industry h4,
.why-card h3,
.pillar h3,
.method-step h3,
.split-list h4,
.hero-meta strong,
.brand-name strong,
.brand-name span,
.bu-crumb,
.feature-badge,
.hero-badge,
.eyebrow,
.service-card h3,
.service-card__tag,
.platform-card__name {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

/* ============================================================
 * Feature-metrics refinement (DE compound-word friendly)
 * Added: 2026-04-30 — supersedes long-word safety for metrics
 * - Smaller, premium-feeling number/label typography
 * - Disable mid-word hyphenation here (we want clean numbers,
 *   not "Skalie-rungs-pfad"); allow break only at spaces
 * - Each tile a flex column so the description always sits below
 *   the label with consistent vertical rhythm
 * - min-height on the strong reserves space so descriptions
 *   align across each row of the 2x2 metric grid
 * ============================================================ */
.feature-metrics {
  align-items: stretch;
}
.feature-metrics > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}
.feature-metrics strong {
  display: block;
  font-size: clamp(1.2rem, 0.4vw + 1.05rem, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.6rem 0;
  /* Override the long-word safety: keep numbers clean */
  hyphens: manual;
  -webkit-hyphens: manual;
  word-break: normal;
  overflow-wrap: break-word;
  /* Reserve 2 lines of label space so descriptions align across the row */
  min-height: 2.4em;
}
.feature-metrics span {
  display: block;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}

/* ============================================================
 * Hero-visual image variant — replace text aside with editorial image
 * Added: 2026-04-30 (launch wave with licensed Shutterstock imagery)
 * Image fills the aside; caption overlays bottom with gradient.
 * ============================================================ */
.hero-visual--image {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-bg-deep);
  aspect-ratio: 4 / 3;
  display: block;
  min-height: 320px;
}
.hero-visual--image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-visual--image .hv-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-5) var(--s-6);
  background: linear-gradient(
    to top,
    rgba(11, 27, 43, 0.92) 0%,
    rgba(11, 27, 43, 0.78) 45%,
    rgba(11, 27, 43, 0) 100%
  );
  color: #fff;
}
.hero-visual--image .hv-caption .hv-label {
  color: #A6D6F0;
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.hero-visual--image .hv-caption .hv-quote {
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

/* Article hero figure — for Insights detail pages */
.article-hero-figure {
  position: relative;
  margin: 0 auto var(--s-6);
  max-width: var(--max-w);
  padding: 0 var(--s-5);
}
.article-hero-figure > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius);
}
@media (min-width: 768px) {
  .article-hero-figure { padding: 0 var(--s-6); }
}

/* =========================================================================
   JPS-iQ group-wide nav standard — Fachthemen mega-menu / BU-switcher /
   mobile accordion. Shared, identical pattern across every BU site.
   Added per binding rule in CLAUDE.md (2026-08-16).
   ========================================================================= */
.nav-flyout { position: relative; }
.nav-flyout__trigger {
  display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
  background: none; border: none; font: inherit; font-size: var(--fs-sm);
  color: var(--c-ink-2); cursor: pointer; padding: var(--s-2) 0; line-height: 1.3;
}
.nav-flyout__trigger:hover, .nav-flyout__trigger:focus-visible { color: var(--c-brand); }
.nav-flyout__trigger:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; border-radius: 4px; }
.nav-flyout__chev { transition: transform 0.15s ease; flex-shrink: 0; }
.nav-flyout__trigger[aria-expanded="true"] .nav-flyout__chev { transform: rotate(180deg); }

.nav-flyout__panel {
  position: absolute; top: 100%; left: 0; margin-top: var(--s-3);
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(11,27,43,0.16), 0 2px 8px rgba(11,27,43,0.06);
  padding: var(--s-4); min-width: 260px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 60;
}
.nav-flyout__panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* Content-based sizing: the mega-menu hugs its actual content instead of
   stretching to a fixed minimum width. Prevents oversized flyouts with large
   empty gaps when a BU has few groups/short labels, while still capping the
   width so it can't run unbounded on very wide content. Groups never wrap to
   a second row (nowrap); only an individual label's text wraps if it is
   longer than a single column can comfortably hold. */
.nav-flyout__panel--mega { width: max-content; max-width: min(720px, calc(100vw - 32px)); padding: var(--s-4) var(--s-5); }
.nav-flyout__panel--align-right { left: auto; right: 0; }

.bu-switch { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.bu-switch li a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm);
  color: var(--c-ink-2); text-decoration: none; font-size: var(--fs-sm); white-space: nowrap;
}
.bu-switch li a:hover, .bu-switch li a:focus-visible { background: var(--c-brand-50); color: var(--c-brand-700); }
.bu-switch li.is-current a { font-weight: 700; color: var(--c-ink); background: var(--c-brand-50); }
.bu-switch__tag, .bu-switch__current { font-size: var(--fs-xs); color: var(--c-ink-3); font-weight: 500; }
.bu-switch li.is-current .bu-switch__current { color: var(--c-brand-700); }

/* flex-wrap: wrap (08.09.2026, NF-22). Mit nowrap und flex: 0 0 auto laufen
   die Spalten aus dem Panel heraus, sobald sie zusammen breiter werden als
   dessen max-width — sie schrumpfen nicht und sie brechen nicht um. Auf
   NetSuite war das live sichtbar, als die Gruppe von drei auf fuenf Spalten
   wuchs. Der Fehler lag nicht an NetSuite, sondern an der Regel: jede Unit
   haette ihn beim naechsten Gruppen-Zuwachs bekommen. Deshalb hier zentral
   fuer alle Units. Passt der Inhalt, aendert wrap nichts. */
.mega-menu { display: flex; gap: var(--s-5); align-items: flex-start; flex-wrap: wrap; }
.mega-menu__col { flex: 0 0 auto; min-width: 130px; }
.mega-menu__heading {
  display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-ink-3); font-weight: 700; margin-bottom: var(--s-2);
}
.mega-menu__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.mega-menu__col li a {
  display: block; padding: var(--s-2); border-radius: var(--radius-sm);
  color: var(--c-ink-2); text-decoration: none; font-size: var(--fs-sm);
  max-width: 240px; white-space: normal;
}
.mega-menu__col li a:hover, .mega-menu__col li a:focus-visible { background: var(--c-brand-50); color: var(--c-brand-700); }
.mega-menu__col li.is-current a { font-weight: 700; color: var(--c-brand-700); }
.mega-menu__lang-note { font-size: var(--fs-xs); color: var(--c-ink-3); font-weight: 500; }

/* Mobile accordion (inside .nav-drawer) */
.nav-accordion { border-bottom: 1px solid var(--c-line); }
.nav-accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; text-align: left; font: inherit; font-size: var(--fs-md);
  font-weight: 500; color: var(--c-ink); padding: var(--s-3) 0; cursor: pointer;
}
.nav-accordion__trigger[aria-expanded="true"] .nav-flyout__chev { transform: rotate(180deg); }
.nav-accordion__panel { display: none; flex-direction: column; padding: 0 0 var(--s-2) var(--s-2); }
.nav-accordion__panel.is-open { display: flex; }
.nav-accordion__panel a {
  padding: var(--s-2) !important; font-size: var(--fs-sm) !important; font-weight: 400 !important;
  border-bottom: none !important; color: var(--c-ink-2) !important;
}
.nav-accordion__panel a.is-current { font-weight: 700 !important; color: var(--c-brand-700) !important; }
.nav-accordion__group-label {
  display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-ink-3); font-weight: 700; padding: var(--s-3) var(--s-2) var(--s-1);
}

@media (prefers-reduced-motion: reduce) {
  .nav-flyout__panel, .nav-flyout__chev { transition: none !important; }
}


/* =====================================================================
   Gruppen-Komponenten, portiert aus draft/bpo/assets/css/styles.css
   (2026-08-27). Kein Microsoft-eigenes Strukturvokabular — die
   Solution-Karten, Decision-Karten und das Lead-Formular sind der
   gruppenweit approbierte Standard und fehlten in dieser BU bisher.
   ===================================================================== */


.bpo-principle .bp-num {
  font-size: 12px;
  font-weight: 700;
  color: #1A77B3;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}


.bpo-principle .bp-examples {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed rgba(26,119,179,0.25);
  font-size: 12.5px;
  color: rgba(10, 40, 80, 0.62);
  font-style: italic;
}



/* =========================================================================
   Solutions grid / solution card — cross-link cards used on BPO subpages
   ("Related" sections). Structure 1:1 ported from
   draft/netsuite/assets/css/styles.css (group navigation/component standard,
   CLAUDE.md 2026-08-16) — previously missing from BPO's own stylesheet.
   ========================================================================= */
.solutions-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}


@media (min-width: 768px) {
  .solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}


.solution-card {
  padding: var(--s-6) var(--s-6);
  background: #ffffff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}


.solution-card:hover {
  border-color: var(--c-brand-100);
  box-shadow: 0 16px 36px -22px rgba(11, 27, 43, 0.18);
  transform: translateY(-2px);
}


.solution-card h3 { margin: 0 0 var(--s-3); font-size: var(--fs-lg); }


.solution-card p  { margin: 0 0 var(--s-4); color: var(--c-ink-2); font-size: var(--fs-sm); }


@media (min-width: 768px) {
  .solution-card:hover .solution-card__benefits,
  .solution-card:focus-within .solution-card__benefits {
    max-height: 280px;
    opacity: 1;
    margin: 0 0 var(--s-4);
  }
}



/* =========================================================================
   Flow chain — compact end-to-end process visualisation (pills + arrows).
   Used on bpo-erp-stabilization for the 7-phase go-live/stabilization chain.
   Structure 1:1 ported from draft/netsuite/assets/css/styles.css.
   ========================================================================= */
.flow-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-5) 0;
}


.flow-chain .flow-step {
  padding: 7px 16px;
  background: var(--c-brand-50);
  color: var(--c-ink);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}


.flow-chain .flow-arrow {
  color: var(--c-ink-3);
  font-weight: 700;
}



/* =========================================================================
   Ported from draft/netsuite/assets/css/styles.css (2026-08-27) — these three
   components (.decisions/.decision, .callout, .lead-form*) are group-standard
   but were missing from this file even though BPO's own HTML already
   references them (bpo-finance-accounting.html and 4 sibling pages use
   .decisions/.decision; the assessment noscript block uses .callout). This
   was a real, pre-existing gap — those elements were rendering unstyled.
   Ported as-is except one deliberate fix: the .lead-form__field input error
   selector below uses :user-invalid, not NetSuite's current
   :invalid:not(:placeholder-shown) — see the Lead-form conventions section
   of CLAUDE.md, which already documents :user-invalid as the binding
   group standard (that fix was never actually applied to NetSuite's live
   styles.css, despite a comment there claiming it was "already fixed at the
   source" — flagged separately, out of scope to correct in NetSuite here).
   ========================================================================= */

/* ---------- Decision list — key architecture/structural decision cards --- */
.decisions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  margin: var(--s-5) 0;
}


@media (min-width: 768px) {
  .decisions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}


.decision {
  padding: var(--s-5);
  background: #ffffff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}


.decision strong {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  font-weight: 700;
}


.decision span {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  line-height: 1.5;
}



/* ---------- Callout — flagged note / noscript fallback -------------------- */
.callout {
  padding: var(--s-5);
  background: #FFF8E8;
  border: 1px solid #F0DCA0;
  border-left: 3px solid #D9A404;
  border-radius: var(--radius-sm);
}


.callout h4 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8A6100;
}


.callout p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  line-height: 1.6;
}



/* ---------- Lead form — dark-treatment gated-content / contact form ------ */
.lead-form {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-4);
}


@media (min-width: 700px) {
  .lead-form { padding: var(--s-7); }
}


.lead-form.is-sent .lead-form__row,
.lead-form.is-sent .lead-form__consent,
.lead-form.is-sent .lead-form__actions { display: none; }


.lead-form.is-sent .lead-form__status {
  padding: var(--s-5);
  border: 1px solid rgba(166,214,240,0.35);
  background: rgba(26,119,179,0.12);
  border-radius: var(--radius-sm);
  color: #fff;
}


.solution-card__badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--c-brand-50);
  color: var(--c-brand);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}


.solution-card__meta {
  display: block;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--c-line);
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  letter-spacing: 0.02em;
}


.solution-card__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease), opacity 0.28s var(--ease), margin 0.35s var(--ease);
}


.solution-card__benefits li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.45em;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  font-weight: 600;
}


.solution-card__benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: #1C9A5A;
  font-weight: 800;
}


@media (max-width: 767px) {
  .solution-card__benefits {
    max-height: none;
    opacity: 1;
    margin: 0 0 var(--s-4);
  }
}


.solution-card__link {
  display: inline-block;
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-brand);
  text-decoration: none;
}


.solution-card__link:hover { text-decoration: underline; }


.decision--ip {
  border-left: 3px solid #C98A1F;
  background: #FFFDF7;
}


.lead-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}


@media (min-width: 640px) {
  .lead-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}


.lead-form__field { display: flex; flex-direction: column; gap: 0.4rem; }


.lead-form__field label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}


.lead-form__opt {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255,255,255,0.45);
  margin-left: 0.35rem;
}


.lead-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}


.lead-form__field--full { grid-column: 1 / -1; }


.lead-form__field textarea {
  appearance: none;
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  color: #fff;
  font: inherit;
  font-size: var(--fs-base);
  resize: vertical;
  min-height: 3.5rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}


.lead-form__field textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  background: rgba(26,119,179,0.12);
}


.lead-form__field input,
.lead-form__field select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  color: #fff;
  font: inherit;
  font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}


.lead-form__field input::placeholder { color: rgba(255,255,255,0.45); }


.lead-form__field select {
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.7) 50%), linear-gradient(135deg, rgba(255,255,255,0.7) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}


.lead-form__field select option { color: var(--c-ink); background: #fff; }


.lead-form__field input:focus,
.lead-form__field select:focus {
  outline: none;
  border-color: var(--c-brand);
  background: rgba(26,119,179,0.12);
}


.lead-form__field input:user-invalid { border-color: #E0807A; }



.lead-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
}


.lead-form__consent input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--c-brand);
  flex-shrink: 0;
}


.lead-form__consent a { color: #A6D6F0; border-bottom: 1px dotted rgba(166,214,240,0.5); }


.lead-form__consent a:hover { color: #fff; border-color: #fff; }



.lead-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-2);
}


.lead-form__notice {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.55);
  max-width: 36ch;
  line-height: 1.45;
}



.lead-form__status {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.85);
  line-height: 1.55;
}


.lead-form__status:empty { display: none; }

/* ============================================================================
 * GROUP-BASELINE v1
 * JPS-iQ Solutions Group — verbindliche Layout-Grundregeln für alle Sites.
 * Abgeleitet aus dem Layout-Audit vom 27.08.2026 (jps-iq.com, microsoft,
 * bpo, suite — 84 Seiten x 7 Viewport-Breiten x 2 Sprachen).
 *
 * Dieser Block wird JEDER BU-styles.css unverändert ans Ende angehängt.
 * Die Marker-Zeile darunter wird vom Preflight geprüft — nicht umbenennen.
 * Alle Regeln sind additiv und ein No-op, solange das Layout bereits korrekt
 * ist. Keine bestehende Regel wird überschrieben.
 *
 * Marker: GROUP-BASELINE v1
 * ==========================================================================*/

/* --- R1 · NAV-MEGA -------------------------------------------------------
 * Ein Mega-Flyout ist bis zu 720 px breit und hängt links an seinem Trigger.
 * Sitzt der Trigger in der Mitte der Navigation, ragt das Panel über den
 * rechten Viewport-Rand hinaus — auch geschlossen, weil visibility:hidden
 * weiterhin Layout belegt. Ergebnis: dauerhafter Querscrollbalken.
 * Lösung: das Panel wird an den rechten Rand des Header-Containers verankert
 * statt an den Trigger. Damit ist es bei jeder Breite eingeschlossen.
 * ------------------------------------------------------------------------*/
.site-header .container { position: relative; }
.nav-flyout:has(> .nav-flyout__panel--mega) { position: static; }
.nav-flyout__panel--mega { left: auto; right: 0; }

/* --- R2 · MOBILE-HEADER --------------------------------------------------
 * Unter 560 px muss die Aktionsgruppe schrumpfen dürfen, unter 400 px weicht
 * der Header-CTA in die Drawer-Navigation aus. Ohne diese Regeln wird der
 * Burger-Button aus dem Viewport gedrängt und die mobile Navigation ist
 * nicht mehr erreichbar.
 * Voraussetzung im Markup: der Drawer enthält denselben CTA
 * (data-cta="drawer-book"). Ohne ihn darf der Header-CTA nicht ausgeblendet
 * werden — dann greift stattdessen nur die Schrumpf-Stufe.
 * ------------------------------------------------------------------------*/
.brand, .brand-logo, .brand-name { min-width: 0; }

@media (max-width: 560px) {
  .site-header .nav { gap: var(--s-3); }
  .nav-actions { min-width: 0; gap: var(--s-2); }
  .nav-actions > .btn { min-width: 0; padding: 0.6rem 0.8rem; font-size: var(--fs-xs); }
  .lang-switch { padding: 1px; }
  .lang-switch a { padding: 0.26rem 0.5rem; }
}

@media (max-width: 400px) {
  .nav-actions > .btn { display: none; }
  .container { padding-left: 16px; padding-right: 16px; }
}

/* --- R3 · GRID-SAFE ------------------------------------------------------
 * Ergänzung zur mechanischen Umstellung aller Grid-Spuren auf
 * minmax(0, Nfr): Direktkinder der Standard-Raster dürfen unter ihre
 * min-content-Breite schrumpfen. Ohne das sprengt ein einziges langes
 * deutsches Kompositum das gesamte Raster.
 * ------------------------------------------------------------------------*/
.hero-grid > *,
.pillars > *,
.method > *,
.bu-grid > *,
.industries > *,
.insights > *,
.footer-grid > *,
.trust-row > *,
.founder > *,
.section-head > *,
.feature-block > * { min-width: 0; }

/* --- R4 · LONGWORD -------------------------------------------------------
 * Deutsche Komposita ("Datenschutzerklärung", "Konzerngesellschaften",
 * "Forderungsmanagement") sind in grosser Schrift breiter als eine
 * Mobilspalte. overflow-wrap:break-word bricht ausschliesslich dann, wenn das
 * Wort sonst überliefe — im Normalfall ändert sich nichts.
 * hyphens bleibt aus: die Browser-Wörterbücher trennen Markenbegriffe und
 * englische Lehnwörter falsch ("SuiteSuc-cess", "Ma-nufacturing").
 * ------------------------------------------------------------------------*/
main :is(h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

/* --- R5 · HERO-CARD ------------------------------------------------------
 * Die Text-Variante der Hero-Karte koppelt aspect-ratio 5/6 mit
 * overflow:hidden. Die Höhe hängt damit an der Breite, nicht am Inhalt —
 * längerer deutscher Text wird unten still abgeschnitten. Auf schmalen
 * Viewports wird das Seitenverhältnis freigegeben, die Karte wächst mit.
 * Die Bild-Variante behält ihr Verhältnis: dort kann nichts überlaufen.
 * ------------------------------------------------------------------------*/
@media (max-width: 560px) {
  .hero-visual:not(.hero-visual--image) { aspect-ratio: auto; min-height: 0; }
}

/* --------------------------------------------------------------- ENDE v1 */

/* =====================================================================
   GROUP-BASELINE v2 — JPS-iQ Konzern-Layoutregeln, Nachtrag zu v1
   =====================================================================
   Quelle: deploy/standards/GROUP-BASELINE-v2.css
   Wird an jede assets/css/styles.css angehaengt, direkt hinter v1.
   Nicht je Business Unit editieren — beim naechsten Rollout ueberschrieben.
   Geprueft von deploy/scripts/preflight_cd.py (Regel CD-BASELINE).

   Beide Regeln klemmen ausschliesslich Breiten. Keine Regel kann ein
   Element breiter machen, als es vorher war — deshalb ist der Nachtrag
   ohne Neuabnahme jeder einzelnen Seite tragfaehig.

   Gefunden am 02.09.2026 auf jps-iq.com bei 320/360/390 px; beide
   Ursachen stecken im gemeinsamen Designsystem und damit in jeder
   Business Unit, auch dort, wo sie heute noch nicht sichtbar sind.
   ===================================================================== */

/* ---------------------------------------------------------------------
   R6 · BTN-FIT
   .btn traegt white-space: nowrap. Eine lange deutsche Beschriftung
   ("Unseren Manufacturing-Ansatz ansehen") erzeugt damit eine
   Mindestbreite von ueber 350 px — mehr als ein 320-px-Viewport hat.
   Der Button schiebt die Seite auf und es entsteht ein Querscrollbalken
   auf der gesamten Seite.

   Unterhalb von 480 px darf die Beschriftung deshalb umbrechen. Darueber
   bleibt nowrap, damit Buttons in Reihen nicht zerfallen.
   --------------------------------------------------------------------- */
.btn { max-width: 100%; }

@media (max-width: 480px) {
  .btn {
    white-space: normal;
    text-align: center;
    overflow-wrap: break-word;
  }
}

/* Die Aktionsreihen sind inline-flex und richten sich damit nach ihrem
   Inhalt, nicht nach dem verfuegbaren Platz. Ohne diese Klemme nuetzt
   die Klemme am Button nichts: sein Elternteil ist dann schon zu breit. */
:is(.cta-actions, .cta-final-actions, .hero-actions, .btn-row, .actions) {
  max-width: 100%;
}

/* ---------------------------------------------------------------------
   R7 · ASPECT-BOX
   .hero-visual--image kombiniert aspect-ratio: 4/3 mit min-height: 320px.
   Das ist keine Mindesthoehe, sondern eine Mindest*breite*: 320 x 4/3 =
   427 px. Auf jedem Telefon ragt die Box damit aus dem Viewport.

   max-width: 100% laesst die Breite gewinnen; die Hoehe folgt der
   Mindesthoehe, das Bild fuellt sie ueber object-fit: cover.
   --------------------------------------------------------------------- */
.hero-visual--image { max-width: 100%; }

/* GROUP-BASELINE v2 — Ende */