/* ===========================================================
   DMO Solutions — ERP site (DMO / DELMIAWorks / EXCS ERP)
   Light, modern re-theme of the DMO design system.
   One shared stylesheet; --accent swaps per top-level section.
   =========================================================== */

:root {
  --navy: #031E49;
  --ink: #1B2430;
  --ink-light: #5B6B7F;
  --white: #FFFFFF;
  --bg-alt: #F5F7FA;
  --border: #E2E6EC;
  --radius: 10px;
  --shadow: 0 4px 24px rgba(3, 30, 73, 0.08);
  --shadow-lg: 0 12px 40px rgba(3, 30, 73, 0.12);
  --max-width: 1180px;

  /* Default accent = DMO umbrella. Darkened slightly from the original #0985D3 (3.96:1 on
     white, fails WCAG AA) to #0874B8 (5:1) — same hue, enough contrast for body text/links. */
  --accent: #0874B8;
  --accent-dark: #07649F;
  --accent-tint: #EAF4FC;
}

body.section-delmia {
  --accent: #0870D3;
  --accent-dark: #054F9C;
  --accent-tint: #EAF2FC;
  /* DELMIA's own brand yellow/grey, pulled from 3ds.com/products/delmia/delmiaworks. Used only as an accent
     (underline, active tab, badges) — never for body text or link colour, since bright yellow text/links on
     white fail contrast badly (DELMIA's own site never does it either: their yellow only ever appears as a
     solid band with dark text on top, not as a foreground text colour). --accent itself stays the existing
     blue so every link, button and icon keeps working exactly as designed elsewhere on the site. */
  --accent-yellow: #FFCD00;
  --accent-yellow-dark: #DBB000;
  --bg-alt: #F6F6F6;
}

body.section-excs {
  /* Darkened slightly from #0080A2 (4.56:1, right at the WCAG AA edge) to #007999 (5:1). */
  --accent: #007999;
  --accent-dark: #006884;
  --accent-tint: #E8F5F8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--white);
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.5em;
  line-height: 1.2;
}

p { margin: 0 0 1em; color: var(--ink-light); }
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; display: block; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.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; }

.eyebrow {
  position: relative;
  font-family: 'Ubuntu', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  padding-bottom: 7px;
  margin-bottom: 14px;
}
.eyebrow::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .7s cubic-bezier(.16,.84,.44,1);
}
.eyebrow.in-view::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .eyebrow::after { transition: none; transform: scaleX(1); }
}
.section-delmia .eyebrow::after { background: var(--accent-yellow); }

/* ---------- Buttons ---------- */

.btn {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--white);
  display: inline-block;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-1px); box-shadow: var(--shadow); color: var(--white); }

.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--accent-tint); color: var(--accent-dark); }

.btn.on-dark { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn.on-dark:hover { background: var(--accent-tint); border-color: var(--accent-tint); }

.btn.ghost.on-dark { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn.ghost.on-dark:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Header / top switcher ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.brand img { height: 88px; width: auto; }
@media (max-width: 860px) { .brand img { height: 40px; } }
@media (max-width: 480px) { .brand > img:nth-child(2) { display: none; } }
.brand .sep { width: 1px; height: 26px; background: var(--border); }
.brand .product-name { font-family: 'Ubuntu', sans-serif; font-weight: 700; font-size: 15px; color: var(--navy); white-space: nowrap; }

.switcher { display: flex; gap: 4px; background: var(--bg-alt); border-radius: 999px; padding: 4px; flex-shrink: 0; }
/* On a product subsite, only show that product + DMO — not the third, unrelated product.
   The DMO site itself keeps all three. Order in the markup is always DMO/DELMIAWorks/EXCS ERP. */
body.section-delmia .switcher a:nth-child(3) { display: none; }
body.section-excs .switcher a:nth-child(2) { display: none; }
.switcher a {
  font-family: 'Ubuntu', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-light);
  padding: 10px 18px;
  border-radius: 999px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.switcher a:hover { color: var(--accent); }
.switcher a.active { background: var(--accent); color: var(--white); }
.switcher a.active:hover { color: var(--white); }

.header-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-cta .btn { padding: 12px 28px; font-size: 14px; }

.nav-burger { display: none; background: none; border: none; font-size: 22px; color: var(--accent); cursor: pointer; justify-self: end; }

/* ---------- Secondary nav row ---------- */

.subnav { border-top: 1px solid var(--border); background: var(--bg-alt); }
.subnav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
}
.subnav a {
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-light);
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.subnav a:hover { color: var(--accent); border-color: var(--accent); }
.subnav a.active { color: var(--accent); border-color: var(--accent); }
.section-delmia .subnav a.active { border-color: var(--accent-yellow); }
.subnav a.subnav-home {
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 38px; margin-right: 24px; flex-shrink: 0;
  background: var(--accent); color: var(--white);
  border: 1px solid var(--accent); border-radius: 999px;
}
.subnav a.subnav-home:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); }
.subnav a.subnav-home svg { width: 18px; height: 18px; display: block; stroke: currentColor; }

@media (max-width: 860px) {
  .switcher { display: none; }
  .subnav { display: none; }
  .nav-burger { display: block; }
  .header-cta .btn.ghost { display: none; }
  .header-inner { justify-content: flex-start; }
  .header-cta { margin-left: auto; }
}

/* ---------- Mobile full-screen menu (built at runtime by initMobileMenu in main.js from
   the existing .switcher and .subnav-inner links, so there's one source of truth for nav
   content — desktop markup — rather than a second copy of every link in every page) ---------- */

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--white);
  overflow-y: auto;
  padding: 20px 24px 40px;
}
.mobile-menu.open { display: block; }
@media (min-width: 861px) { .mobile-menu { display: none !important; } }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.mobile-menu-header strong { font-family: 'Ubuntu', sans-serif; font-size: 15px; color: var(--navy); }
.mobile-menu-close {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: none;
  font-size: 18px; line-height: 1; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu-switcher { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.mobile-menu-switcher button {
  display: block; width: 100%; text-align: left;
  padding: 14px 18px; border-radius: 12px; background: var(--bg-alt); border: none;
  font-family: 'Ubuntu', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink);
  cursor: pointer;
}
.mobile-menu-switcher button.active { background: var(--accent); color: var(--white); }
.mobile-menu-subnav { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin-bottom: 32px; }
.mobile-menu-subnav a {
  padding: 16px 4px; border-bottom: 1px solid var(--border);
  font-family: 'Ubuntu', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink-light);
}
.mobile-menu-subnav a.active { color: var(--accent); }
.mobile-menu-cta a { display: block; text-align: center; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(3,30,73,0.94) 0%, rgba(3,30,73,0.82) 45%, rgba(3,30,73,0.55) 100%);
}
.hero-inner { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; padding: 80px 24px; width: 100%; }
.hero h1 { color: var(--white); font-size: clamp(32px, 4.6vw, 54px); max-width: 880px; margin-bottom: 22px; }
.hero .lede { color: rgba(255,255,255,0.86); font-size: 18px; max-width: 720px; margin-bottom: 0; }
.hero .eyebrow { color: #BFE0F7; }

/* Desktop-only sticky hero, built the same way as https://greatechnonwoven.com/: the image's
   sticky containing block must be much larger than the image itself for it to have real room
   to stick — a snug ".hero" wrapper around it defeats that (its own box is only ~800px tall,
   so sticky has nowhere to go). `display: contents` removes .hero's own box on desktop only,
   so .hero-bg/.hero-inner become direct flow items of <body> instead — same trick as GNW's
   sticky image being a direct child of <main> rather than its own dedicated wrapper section.
   .hero-inner is pulled back over .hero-bg with a matching negative margin (not absolute
   positioning), so it still scrolls away normally. The very next real section then simply
   outranks both in z-index, so it visually covers the image once scrolled up to that point —
   there's no artificial "runway" div; the cover point is wherever real content next arrives.
   Mobile is untouched: .hero keeps its normal box and flex layout below 861px. */
@media (min-width: 861px) {
  .hero { display: contents; }
  /* top matches the sticky header's own height, not 0 — otherwise the image's natural (pre-stuck)
     position starts below the header and visibly slides up into place over the first ~171px of
     scroll before sticky engages. Starting the stick point right at the header's own edge means
     it's already "stuck" at rest — no slide, ever. */
  .hero-bg { position: sticky; top: 171px; height: 800px; width: 100%; }
  .hero-inner {
    position: relative; z-index: 1;
    height: 800px; margin-top: -800px;
    display: flex; flex-direction: column; justify-content: center;
  }
  /* .hero-bg's containing block is now <body> (huge), so it can technically keep trying to stick
     for the rest of the page — every section after the hero, not just the first one, needs to
     out-rank it in z-index or it pokes back through further down the page. */
  .hero ~ section, .hero ~ footer { position: relative; z-index: 2; }
  .hero ~ .sec:not(.alt) { background-color: var(--white); }
}

/* ---------- Stat strip ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: 46px;
  padding-top: 30px;
}
.stat { padding-right: 20px; }
.stat .n { font-family: 'Ubuntu', sans-serif; font-size: 30px; font-weight: 700; color: var(--white); line-height: 1; }
.stat .l { font-size: 13px; color: rgba(255,255,255,0.72); margin-top: 8px; line-height: 1.4; }

/* ---------- Sections ---------- */

.sec { padding: 90px 0; }
.sec.alt {
  position: relative;
  --grid-minor: color-mix(in srgb, var(--accent) 4.4%, transparent);
  --grid-major: color-mix(in srgb, color-mix(in srgb, var(--grid-minor) 85%, black 15%) 24%, transparent);
  background-color: var(--bg-alt);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}
.sec.alt > .container { position: relative; z-index: 1; }

/* Animated "circuit trace" highlights that draw themselves along the grey-section grid lines — soft
   at both ends, solid in the middle, so they read as a glow travelling the line rather than a hard bar. */
.grid-trace { position: absolute; z-index: 0; pointer-events: none; }
.grid-trace.horizontal { height: 1px; background: linear-gradient(to right, transparent, var(--accent-dark), transparent); animation: grid-trace-draw-h 4s ease-in-out forwards; }
.grid-trace.vertical { width: 1px; background: linear-gradient(to bottom, transparent, var(--accent-dark), transparent); animation: grid-trace-draw-v 4s ease-in-out forwards; }
@keyframes grid-trace-draw-h {
  0% { clip-path: inset(0 100% 0 0); opacity: 0; }
  50% { clip-path: inset(0 0% 0 0); opacity: .55; }
  100% { clip-path: inset(0 0% 0 0); opacity: 0; }
}
@keyframes grid-trace-draw-v {
  0% { clip-path: inset(0 0 100% 0); opacity: 0; }
  50% { clip-path: inset(0 0 0% 0); opacity: .55; }
  100% { clip-path: inset(0 0 0% 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .grid-trace { display: none; } }

.sec-head { max-width: 740px; margin: 0 auto 50px; text-align: center; }
.sec-head h2 { font-size: clamp(26px, 3.4vw, 36px); }
.sec-head p { font-size: 16px; }

/* ---------- Grids / cards ---------- */

.grid { display: grid; gap: 24px; }
.grid.g2 { grid-template-columns: repeat(2, 1fr); }
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
.grid.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid.g3, .grid.g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: 1fr; } }

/* Centers an incomplete last row (e.g. 8 items as 3+3+2, the 2 centered under the 3 above) */
.grid.centered-last { display: flex; flex-wrap: wrap; justify-content: center; }
.grid.centered-last > * { flex: 0 1 calc((100% - 48px) / 3); }
@media (max-width: 900px) { .grid.centered-last > * { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 620px) { .grid.centered-last > * { flex-basis: 100%; } }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card .idx {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent-tint); color: var(--accent);
  font-family: 'Ubuntu', sans-serif; font-weight: 700; font-size: 14px;
  margin-bottom: 18px;
}
.card h3 { font-size: 17px; margin-bottom: 8px; }
.card p { font-size: 14.5px; margin: 0; }

.card.go { display: flex; flex-direction: column; }
.card.go img { align-self: flex-start; width: auto; max-height: none; }
.card.go .go-link {
  margin-top: auto; padding-top: 16px; margin-top: 16px;
  border-top: 1px solid var(--border);
  font-family: 'Ubuntu', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--accent);
}

/* Product-pick cards (homepage): logo beside the text on desktop, stacked + centered on mobile */
.card.go.product-card { flex-direction: row; align-items: center; gap: 28px; }
.card.go.product-card img { align-self: center; flex-shrink: 0; }
.card.go.product-card .go-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.card.go.product-card .go-link { margin-top: auto; }
@media (max-width: 620px) {
  .card.go.product-card { flex-direction: column; text-align: center; align-items: center; }
  .card.go.product-card .go-body { align-items: center; }
}

/* ---------- Technical-icon cards (thick icon sitting on a faint technical grid) ---------- */

.card .icon-tech { width: 46px; height: 46px; color: var(--accent); margin-bottom: 18px; }
.card .icon-tech svg { width: 100%; height: 100%; }

/* ---------- Small square icon cards (title-only, sized so 6 sit in a row) ---------- */

.icon-square-grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.icon-square {
  flex: 0 1 calc((100% - 80px) / 6);
  aspect-ratio: 1 / 1;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.icon-square:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.icon-square .icon-tech { width: 42px; height: 42px; color: var(--accent); margin: 0; flex-shrink: 0; }

/* Grid moved from the icon onto the whole card, for icon cards sitting on a plain white (non-grid)
   section — never on a .sec.alt (grey grid) section, since the section itself already carries it.
   The icon glyph itself never carries a grid any more — it's always either the card's job (white
   sections) or the section's job (.sec.alt), never both, and never the icon on its own.
   Exact same recipe as the .sec.alt grey-section grid (same opacity, every-5th-line-darker).
   background-position is tuned so a darker grid-cell square lands dead-centre on the icon glyph:
   .card icons sit at a fixed (30px, 30px) offset from the card's own top-left (pinned by padding,
   not centred), so a fixed px offset is exact at any card size. .icon-square icons are centred by
   flexbox instead, so `center` softens to "the card's own centre" — which for a repeating 40px
   tile is mathematically always a cell-centre regardless of card size — then nudged up by the
   icon's fixed, constant offset above that centre (see the h3 min-height note below for why that
   offset is constant rather than shifting per-card). */
.sec:not(.alt) .card:has(> .icon-tech),
.sec:not(.alt) .icon-square {
  --grid-minor: color-mix(in srgb, var(--accent) 4.4%, transparent);
  --grid-major: color-mix(in srgb, color-mix(in srgb, var(--grid-minor) 85%, black 15%) 24%, transparent);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}
.sec:not(.alt) .card:has(> .icon-tech) { background-position: 33px 33px; }
.sec:not(.alt) .icon-square { background-position: center calc(50% - 21.25px); }
.icon-square .icon-tech svg { width: 100%; height: 100%; }
/* Fixed min-height (2 lines) so a short one-line label and a wrapped two-line label leave the
   icon at the exact same Y position above them — required for the grid-centering trick above to
   land on every card in a row, not just the ones whose label happens to be one line. */
.icon-square h3 { font-size: 12.5px; margin: 0; line-height: 1.3; min-height: 2.6em; }
@media (max-width: 760px) { .icon-square { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 480px) { .icon-square { flex-basis: calc((100% - 16px) / 2); } }

/* ---------- Industries strip ---------- */

.industry-chip {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.industry-chip h3 { font-size: 15.5px; margin-bottom: 6px; }
.industry-chip p { font-size: 13.5px; margin: 0 0 12px; }
.industry-chip .go-link { font-family: 'Ubuntu', sans-serif; font-size: 13px; font-weight: 600; color: var(--accent); }

/* ---------- Industry photo card (icon + bg image, no blurb) ---------- */

.industry-photo-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}
.industry-photo-card .bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
  transition: transform .4s ease;
}
.industry-photo-card:hover .bg { transform: scale(1.06); }
.industry-photo-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3,30,73,0.35) 0%, rgba(3,30,73,0.82) 100%);
  z-index: -1;
}
.industry-photo-card .icon {
  position: absolute; top: 18px; left: 18px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.industry-photo-card .icon svg { width: 20px; height: 20px; stroke: var(--white); fill: none; }
.industry-photo-card h3 { color: var(--white); font-size: 16px; margin: 0; padding: 18px 20px; line-height: 1.25; }
.industry-photo-card:has(p) h3 { padding-bottom: 4px; }
.industry-photo-card p { color: rgba(255,255,255,0.82); font-size: 13.5px; line-height: 1.4; margin: 0; padding: 0 20px 18px; }
.industry-photo-card:has(.go-link) p { padding-bottom: 4px; }
.industry-photo-card .go-link { display: block; font-family: 'Ubuntu', sans-serif; font-size: 13px; font-weight: 600; color: #BFE0F7; padding: 0 20px 18px; }
/* Cards carrying heading + blurb + go-link need tighter type to fit the 16:9 box */
.industry-photo-card:has(.go-link) h3 { font-size: 14.5px; padding-top: 12px; }
.industry-photo-card:has(.go-link) p { font-size: 11.5px; line-height: 1.3; }
.industry-photo-card:has(.go-link) .go-link { padding-bottom: 10px; }

/* ---------- Spec list (feature rows) ---------- */

.speclist { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow); }
.specrow { display: grid; grid-template-columns: 90px 1fr; border-top: 1px solid var(--border); }
.specrow:first-child { border-top: none; }
.specrow .tag { font-family: 'Ubuntu', sans-serif; font-size: 12px; font-weight: 700; color: var(--accent); padding: 20px 16px; border-right: 1px solid var(--border); background: var(--accent-tint); display: flex; align-items: center; }
.specrow .body { padding: 20px 24px; }
.specrow .body h4 { font-size: 15px; color: var(--navy); margin-bottom: 4px; }
.specrow .body p { font-size: 14px; margin: 0; }
@media (max-width: 620px) { .specrow { grid-template-columns: 1fr; } .specrow .tag { border-right: none; border-bottom: 1px solid var(--border); padding: 10px 16px; } }

/* ---------- Case study cards ---------- */

.case-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.case-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.case-card .bg { width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.case-card .body { padding: 20px 22px 24px; }
.case-card .co { font-family: 'Ubuntu', sans-serif; font-weight: 700; font-size: 16px; color: var(--navy); margin-bottom: 4px; }
.case-card .sector { display: block; font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 12px; }
.case-card .outcome { font-size: 14px; color: var(--ink-light); margin: 0; }
@media (max-width: 700px) { .caserow .outcome { text-align: left; max-width: 100%; } }

.view-more { display: flex; justify-content: center; margin-top: 28px; }

/* ---------- Testimonial ---------- */

.testimonial {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 48px;
  color: var(--white);
  position: relative;
}
.testimonial .quote { font-size: 20px; font-style: italic; color: var(--white); line-height: 1.55; margin-bottom: 24px; max-width: 860px; }
.testimonial .who { font-family: 'Ubuntu', sans-serif; font-weight: 700; color: var(--accent-tint); font-size: 14px; }
.testimonial .co { font-size: 13px; color: rgba(255,255,255,0.65); }

/* ---------- CTA band (full-width, interactive) ---------- */

.cta-full {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--navy), var(--accent-dark));
  padding: 76px 0;
  text-align: center;
}
.cta-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cta-full-inner { position: relative; z-index: 1; }
.cta-full h2 { color: var(--white); font-size: clamp(24px, 3vw, 34px); }
.cta-full p { color: rgba(255,255,255,0.85); max-width: 660px; margin: 0 auto 6px; }
.cta-full .cta-row { justify-content: center; margin-top: 26px; }
@media (max-width: 760px) { .cta-full { padding: 52px 0; } }

/* ---------- Contact section ---------- */

.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; margin-top: 40px; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-details {
  padding: 8px 24px;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  --grid-minor: color-mix(in srgb, var(--accent) 4.4%, transparent);
  --grid-major: color-mix(in srgb, color-mix(in srgb, var(--grid-minor) 85%, black 15%) 24%, transparent);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}
.contact-info-row { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--border); font-size: 14.5px; }
.contact-info-row:first-child { border-top: none; }
.contact-info-row .k { font-family: 'Ubuntu', sans-serif; font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; min-width: 92px; }
.contact-info-row a { color: var(--ink); }
.contact-info-row a:hover { color: var(--accent); }

.field { margin-bottom: 16px; }
.field label { display: block; font-family: 'Ubuntu', sans-serif; font-size: 12px; font-weight: 700; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; background: var(--white); border: 1px solid var(--border); border-radius: 8px;
  color: var(--ink); padding: 12px 14px; font-family: 'Poppins', sans-serif; font-size: 14.5px;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.field textarea { resize: vertical; min-height: 100px; }

/* ---------- Footer ---------- */

footer.site-footer { background: var(--white); border-top: 1px solid var(--border); padding: 48px 0 24px; }
.site-footer .container { padding: 0 64px; }
@media (max-width: 860px) { .site-footer .container { padding: 0 24px; } }
.footer-header { display: flex; align-items: center; justify-content: center; gap: 64px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 32px; flex-shrink: 0; }
.footer-brand img { height: 86px; width: auto; }
.footer-cta-text { text-align: left; }
.footer-cta-text h2 { font-size: clamp(18px, 2.2vw, 24px); margin-bottom: 6px; }
.footer-cta-text p { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 15px; color: var(--ink-light); margin: 0; }
.footer-cta-text a { color: var(--accent); font-weight: 600; }
@media (max-width: 700px) { .footer-header, .footer-cta-text { flex-direction: column; text-align: center; } .footer-brand img { height: 56px; } }
.social-links { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 32px 0 0; }
.social-links::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); }
.social-links a {
  position: relative; z-index: 1; background: var(--white);
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--ink-light); font-size: 13px;
}
.social-links a:hover { border-color: var(--accent); color: var(--accent); }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 40px 0 32px; margin-top: 32px; border-bottom: 1px solid var(--border); }
@media (max-width: 760px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
.footer-cols h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); margin-bottom: 16px; }
.footer-cols a { display: block; color: var(--ink-light); font-size: 14px; margin-bottom: 10px; }
.footer-cols a:hover { color: var(--accent); }
.footer-badge img { height: 90px; width: auto; margin: 0 auto; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 24px; font-size: 12px; color: var(--ink-light); }

.text-center { text-align: center; }

/* ---------- Journey split-scroll (desktop: sticky list + crossfading image; mobile: plain stacked cards, no JS) ----------
   Desktop: ALL 6 steps are always listed on the left (no accumulate/reveal — that's what was cropping/breaking
   on laptop screens before). Only the CURRENT step's description shows; others stay collapsed to tag+heading, so
   the whole list is short and fits without internal scrolling. The image column crossfades (opacity), not a
   physical scroll-cover — simpler and, per the client, just looks better. `.split-trigger` (six, 55vh each,
   invisible) provide the scroll length; `initJourneySplit()` in main.js watches them with an IntersectionObserver
   and toggles `.split-row.current` / `.split-img.current`. Clicking a row jumps straight to its trigger.

   `.split-sticky` and `.split-triggers` share the same CSS Grid cell (`grid-area: 1 / 1`) instead of stacking as
   plain siblings. Two reasons:
   1. If `.split-triggers` came AFTER `.split-sticky` in normal flow (as it did before), step 1 would inherit an
      extra, invisible ~1 screen-height of "nothing changes yet" scroll — `.split-sticky` itself still occupies
      its own flow space before the first trigger even starts, so the first step effectively dwells for its own
      height PLUS split-sticky's height. Overlaying them means the triggers start at the very top of the section,
      same as split-sticky, so step 1 gets the same dwell as every other step.
   2. `.split-trailing-spacer` (its own height again, `calc(100vh - 127px)`, NOT a `.split-trigger` so it's
      invisible to the JS/observer) sits after the 6 real triggers. A sticky element can only stay stuck for as
      long as its OWN height fits within whatever's left of its containing block — without this, `.split-sticky`
      releases (and the CTA/footer starts covering it) roughly one screen-height BEFORE the last trigger's centre
      is even reached, which is why step 8 was "jumping past" early. The spacer just gives it that missing room.
   `.split-triggers` needs `pointer-events: none` since it's stacked visually on top of `.split-sticky` (later in
   DOM, same grid cell) — otherwise it would swallow clicks meant for the list buttons and image. */

.journey-split { position: relative; margin: 72px 0 0; display: grid; }
.split-sticky {
  grid-area: 1 / 1;
  position: sticky;
  top: 127px;
  height: calc(100vh - 127px);
  display: flex;
  background: var(--navy);
  overflow: hidden;
}
.split-triggers { grid-area: 1 / 1; display: flex; flex-direction: column; pointer-events: none; }
.split-trailing-spacer { height: calc(100vh - 127px); }
.split-list { flex: 0 0 clamp(300px, 38%, 460px); display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 32px clamp(20px, 3vw, 40px); overflow-y: auto; }
.split-row {
  width: 100%;
  background: none; border: none; border-left: 3px solid transparent;
  font: inherit; text-align: left; cursor: pointer;
  padding: 4px 0 4px 16px;
  opacity: .55;
}
.split-row.current { opacity: 1; border-left-color: #BFE0F7; }
.split-row:hover { opacity: .85; }
.split-row.current:hover { opacity: 1; }
.split-row .tag { font-family: 'Ubuntu', sans-serif; font-size: 11px; font-weight: 700; color: #BFE0F7; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.split-row h3 { color: var(--white); font-size: 17px; margin: 0; }
.split-row p { display: none; color: rgba(255,255,255,0.78); font-size: 13.5px; margin: 6px 0 0; max-width: 380px; }
.split-row.current p { display: block; }
.split-media { position: relative; flex: 1 1 auto; }
.split-media::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(3,30,73,0.55) 0%, rgba(3,30,73,0.12) 45%, transparent 70%);
}
.split-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .6s ease; }
.split-img.current { opacity: 1; }
.split-n {
  position: absolute; z-index: 2; bottom: 24px; right: 5%;
  font-family: 'Ubuntu', sans-serif; font-weight: 700;
  font-size: clamp(44px, 7vw, 100px);
  color: rgba(255,255,255,0.28);
  line-height: 1;
}
.split-trigger { height: 55vh; }

.journey-mobile { display: none; }

@media (max-width: 860px) {
  .journey-split { display: none; }
  .journey-mobile {
    display: block;
    margin: 40px 0 0;
  }
  .mobile-step {
    position: relative;
    height: 75vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }
  .mobile-step::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(3,30,73,0.1) 0%, rgba(3,30,73,0.6) 55%, rgba(3,30,73,0.92) 100%);
  }
  .mobile-step-inner { position: relative; z-index: 1; padding: 24px 20px 28px; width: 100%; }
  .mobile-step-inner .tag { font-family: 'Ubuntu', sans-serif; font-size: 11px; font-weight: 700; color: #BFE0F7; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
  .mobile-step-inner h3 { color: var(--white); font-size: 21px; margin: 0 0 8px; }
  .mobile-step-inner p { color: rgba(255,255,255,0.85); font-size: 14.5px; margin: 0; }
}

/* ---------- Flow list (numbered steps) ---------- */

.flowlist { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow); margin: 24px 0; }
.flowrow { display: grid; grid-template-columns: 48px 1fr; border-top: 1px solid var(--border); }
.flowrow:first-child { border-top: none; }
.flowrow .n { background: var(--accent-tint); color: var(--accent); font-family: 'Ubuntu', sans-serif; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border); }
.flowrow .b { padding: 18px 22px; }
.flowrow .b h4 { font-size: 15px; color: var(--navy); margin-bottom: 4px; }
.flowrow .b p { font-size: 14px; margin: 0; }
@media (max-width: 620px) { .flowrow { grid-template-columns: 1fr; } .flowrow .n { border-right: none; border-bottom: 1px solid var(--border); padding: 8px; } }

/* ---------- Badge / note callouts ---------- */

.badge { display: inline-block; font-family: 'Ubuntu', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 5px 14px; }
.section-delmia .badge { color: var(--navy); background: var(--accent-yellow); border-color: var(--accent-yellow); }
.label-plain { display: block; font-family: 'Ubuntu', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 10px; }
.note { font-family: 'Ubuntu', sans-serif; font-size: 13px; color: var(--ink-light); border-left: 3px solid var(--accent); padding: 14px 18px; margin: 24px 0; background: var(--accent-tint); border-radius: 0 8px 8px 0; }

/* ---------- Feature card (screenshot + title + description) ---------- */

.feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.feature-card .shot {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  background: var(--bg-alt);
  display: block;
}
.feature-card .body { padding: 22px; }
.feature-card h3 { font-size: 15.5px; margin-bottom: 8px; }
.feature-card p { font-size: 13.5px; margin: 0; }

/* ---------- Value rows ---------- */

.valrow { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--border); }
.valrow:first-child { border-top: none; }
.valrow h4 { font-family: 'Ubuntu', sans-serif; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--navy); margin: 0; }
.valrow p { font-size: 14.5px; margin: 0; }
@media (max-width: 640px) { .valrow { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Sub-page intro ---------- */

.page-intro { padding: 64px 0 32px; }
.page-intro h1 { font-size: clamp(28px, 4vw, 42px); max-width: 860px; margin-bottom: 16px; }
.page-intro p { font-size: 16px; max-width: 740px; margin: 0; }

/* ---------- Stub / coming-soon pages ---------- */

.stub-hero { padding: 120px 0 100px; text-align: center; }
.stub-hero .eyebrow { justify-content: center; }
.stub-hero h1 { font-size: clamp(28px, 4vw, 42px); max-width: 720px; margin: 0 auto 18px; color: var(--navy); }
.stub-hero p { max-width: 620px; margin: 0 auto; font-size: 16px; }
.stub-hero .cta-row { justify-content: center; }

@media (max-width: 760px) {
  .sec { padding: 60px 0; }
  .testimonial, .cta-band { padding: 32px 24px; }
}