/* ==========================================================================
   Altius Marine — design system + page styles
   Plain CSS, no build step. Sections below map 1:1 to includes/home/*.php
   ========================================================================== */

/* ---------- 1. Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- 2. Design tokens -------------------------------------------- */
/* design-tokens.css is the single source of truth and is loaded BEFORE this
   file. Nothing here may redefine a token it owns (--radius-*, --shadow-*,
   --font-*, --space-*, --ease-*, --duration-*, --color-*) — this file used to
   redeclare radius/shadow/font with different values and silently overrode
   the brand tokens, since it cascades later.

   What follows are aliases only: legacy variable names used by the sections
   built before the tokens file landed, remapped onto real brand values so
   those sections stay consistent instead of drifting. */
:root {
  /* Navy ramp derived from the brand navy #334859 */
  --navy-950: #1B2833;
  --navy-900: var(--color-navy);
  --navy-800: #3D5568;
  --navy-700: #4A6478;
  --ink:      var(--color-navy);
  --slate:    var(--color-steel-grey);
  --muted:    #8B95A1;
  --line:     var(--color-border-hairline);
  --bg:       var(--color-bg-default);
  --bg-tint:  var(--color-bg-surface);
  --bg-tint-2:#EDEFF1;

  --orange:      var(--color-orange-start);
  --orange-600:  #CC400A;
  --orange-tint: #FDF0E8;

  --blue-tint:   #E8EDF1;
  --icon-navy:   var(--color-navy);
  --hero-sky:    #EDF1F4;

  --ok:     #2FB675;
  --warn:   var(--color-orange-end);
  --info:   var(--color-ocean-blue);

  /* Legacy font aliases → real token families */
  --font-head: var(--font-display);

  --container: 1320px;

  /* Legacy 8px-scale aliases → --space-* */
  --s-1: var(--space-1); --s-2: var(--space-2); --s-3: var(--space-3);
  --s-4: var(--space-4); --s-6: var(--space-6); --s-8: var(--space-8);
  --s-12: var(--space-12);

  --ease-out: var(--ease-signal);

  --header-h: 88px;
  --header-h-scrolled: 76px;
}

/* ---------- 3. Base ------------------------------------------------------ */
body {
  font-family: var(--font-body);
  color: var(--slate);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.5rem, 4.2vw, 3.75rem); }
h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
h3 { font-size: 1.25rem; font-weight: 700; }
p  { max-width: 60ch; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.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: -999px; top: 0; background: var(--orange); color: #fff; padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

section { position: relative; }
.section        { padding-block: clamp(52px, 6.5vw, 96px); }
.section-tint   { background: var(--bg-tint); }
.section-navy   { background: var(--navy-900); color: #C9D4E4; }
.section-navy h2, .section-navy h3 { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: .8rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--orange);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ''; width: 0; height: 0; flex-shrink: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 8px solid var(--orange); /* play-triangle, matches reference eyebrow marker */
}

.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; align-items: flex-end; margin-bottom: 48px; }
.section-head .lede { max-width: 460px; color: var(--slate); }
.section-head-copy h2 { margin-bottom: 4px; }

/* ---------- 4. Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: .95rem; font-family: var(--font-body);
  padding: 14px 26px; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; white-space: nowrap;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.btn svg, .btn .arrow { transition: transform .25s ease; }
.btn:hover svg, .btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 8px 20px -6px rgba(241,89,42,.55); }
.btn-primary:hover { background: var(--orange-600); }
.btn-outline { background: transparent; border-color: var(--navy-900); color: var(--navy-900); }
.btn-outline:hover { background: var(--navy-900); color: #fff; }
.section-navy .btn-outline { border-color: rgba(255,255,255,.4); color: #fff; }
.section-navy .btn-outline:hover { background: #fff; color: var(--navy-900); }
.btn-white { background: #fff; color: var(--navy-900); }
.btn-white:hover { background: var(--orange); color: #fff; }
.btn-sm { padding: 10px 18px; font-size: .875rem; }
.btn-block { width: 100%; }
.btn-ghost-icon { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s; }
.btn-ghost-icon:hover { border-color: var(--orange); background: var(--orange-tint); }

/* ---------- 5. Header / mega menu ----------------------------------------- */
/* White-glass header by default. Only the homepage adds --overlay, which
   makes it transparent until 60px of scroll — it can only be transparent
   over the light hero; over a dark .page-hero the navy nav text vanishes. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 4px 24px -8px rgba(8,43,73,.14);
  border-bottom: 1px solid rgba(8,43,73,.07);
  transition: background-color .45s var(--ease-out), box-shadow .45s var(--ease-out),
              border-color .45s var(--ease-out), backdrop-filter .45s var(--ease-out);
}
.site-header--overlay:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom-color: transparent;
}
/* Shares the hero's 1480px measure rather than the 1320px site container, so
   the logo's left edge lines up with the hero headline instead of sitting
   72px inboard of it. */
.header-inner {
  position: relative; /* anchors the floating mega-panel (see .mega-panel) — centering
    each panel under its own trigger instead risked clipping off the left edge for the
    first item (Products) on common 1366-1440px laptop widths, since a 1200px-wide
    panel centered under an edge trigger overruns the viewport. Anchoring to the full
    ~1480px header bar keeps it safely on-screen at every width the desktop mega-menu
    renders at (≥960px). */
  display: flex; align-items: center; gap: 28px;
  height: var(--header-h);
  max-width: 1480px;
  padding-inline: clamp(var(--space-3), 4vw, var(--space-6));
  transition: height .45s var(--ease-out);
}
.site-header.is-scrolled .header-inner { height: var(--header-h-scrolled); }
/* Non-overlay pages render the compact header immediately. */
.site-header:not(.site-header--overlay) .header-inner { height: var(--header-h-scrolled); }

/* The header is fixed, so it no longer occupies flow space. .hero already
   pads itself past the header; every other page's first block needs the
   offset added back. */
#main > :first-child:not(.hero) { padding-top: var(--header-h); }

/* flex:1 on both outer cells keeps the nav optically centred in the header.
   Shrink is allowed (1 1) so a narrow viewport can't force the bar wider
   than the screen. */
/* Real supplied logo (Altius-Marine.png). flex 1 1 keeps the nav optically
   centred while still allowing the bar to shrink on narrow viewports. */
.logo { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.logo img { width: auto; height: 42px; transition: height var(--duration-base) var(--ease-signal); }
.site-header.is-scrolled .logo img,
.site-header:not(.site-header--overlay) .logo img { height: 36px; }

.logo-mark { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--color-navy); letter-spacing: var(--tracking-tight); }
.logo-dot { color: var(--color-orange-start); }
.logo-sub { font-size: .58rem; font-weight: 600; letter-spacing: .32em; color: var(--color-orange-start); margin-top: 3px; }

/* Footer sits on navy — the reversed/white logo asset, not the header's
   navy-on-light one. */
.logo-footer { display: inline-block; }
.logo-footer img { display: block; width: auto; height: 34px; }

/* align-items: stretch, not center — .mega-panel's top:100% resolves
   against .header-inner (needed so it centers horizontally within the
   full header, see .header-inner's own comment), but with items only
   center-aligned each .nav-item was only as tall as its own text, leaving
   a real gap between the item's bottom and the header's bottom where the
   panel actually starts — the residual dead zone that reopened the same
   "menu closes crossing the gap" bug .mega-panel's padding-top fix (below)
   was meant to close. Stretching items to the header's full height makes
   the two edges coincide. */
/* .header-inner centers ITS OWN children (logo/nav/actions) rather than
   stretching them, so .main-nav needs an explicit height to reach the
   full header height for the stretch above to have anything to stretch
   into — align-items on .nav-list alone isn't enough. */
.main-nav { height: 100%; }
.nav-list { display: flex; align-items: stretch; height: 100%; gap: 4px; }
.nav-trigger {
  position: relative; display: flex; align-items: center; gap: 6px; height: 100%; padding: 10px 14px;
  font-weight: 600; font-size: .95rem; letter-spacing: .1px; color: var(--ink);
  transition: color .2s ease, transform .2s ease;
}
.nav-trigger::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--orange); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.nav-chevron { transition: transform .25s ease; color: var(--muted); }
.nav-item:hover .nav-trigger, .nav-trigger[aria-expanded="true"] { color: var(--orange); transform: translateY(-1px); }
.nav-item:hover .nav-trigger::after, .nav-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-item:hover .nav-chevron, .nav-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); color: var(--orange); }

/* --- Mega panel: floating 3-column card (intro / links / featured) --- */
/* The outer .mega-panel's box starts flush at top:100% (no gap) and stays
   transparent — the 14px "floating" look comes from padding-top on this
   box instead of a margin/offset. A real gap here (top: calc(100% + 14px))
   was the bug: moving the cursor from the trigger straight down crossed
   14px where neither the trigger's own box nor the panel existed yet, so
   .nav-item:hover dropped and the panel closed before the cursor arrived.
   Padding keeps that space part of the same hoverable box. */
.mega-panel {
  position: absolute; left: 50%; top: 100%; width: 1200px; max-width: calc(100vw - 48px);
  padding-top: 14px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-10px) scale(.98); transform-origin: top center;
  transition: opacity .25s cubic-bezier(.22,.61,.36,1), transform .25s cubic-bezier(.22,.61,.36,1), visibility .25s;
}
.nav-item.has-mega:hover .mega-panel,
.nav-item.has-mega:focus-within .mega-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.mega-panel-inner {
  display: grid; grid-template-columns: 220px 1fr 300px; gap: 40px; padding: 48px; align-items: start;
  background: #fff; border-radius: 28px; border: 1px solid var(--line); box-shadow: 0 40px 80px -24px rgba(8,43,73,.28);
}

.mega-intro { padding-right: 12px; border-right: 1px solid var(--line); }
.mega-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.mega-intro-desc { font-size: .86rem; line-height: 1.55; color: var(--slate); margin-bottom: 22px; }
.mega-viewall { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--orange); font-size: .86rem; }
.mega-viewall span { transition: transform .25s cubic-bezier(.22,.61,.36,1); display: inline-block; }
.mega-viewall:hover span { transform: translateX(4px); }

.mega-grid { display: grid; grid-template-columns: 1fr; gap: 2px; }
.mega-item { position: relative; display: block; padding: 12px 14px 12px 20px; border-radius: 12px; transition: background .2s ease; }
.mega-item::before { content: ''; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: transparent; transition: background .2s ease; }
.mega-item:hover { background: var(--bg-tint); }
.mega-item:hover::before { background: var(--orange); }
.mega-item-label { display: block; font-weight: 700; color: var(--ink); font-size: .95rem; margin-bottom: 3px; }
.mega-item-desc { display: block; font-size: .82rem; color: var(--muted); }

/* --- Featured card (right column) --- */
.mega-featured { display: block; position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); }
.mega-featured-photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-tint); }
.mega-featured-photo picture, .mega-featured-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.mega-featured:hover .mega-featured-photo img { transform: scale(1.05); }
.mega-featured-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,43,73,.92) 0%, rgba(8,43,73,.35) 55%, transparent 85%); }
.mega-featured-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.mega-featured-body strong { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; }
.mega-featured-body > span:not(.mega-featured-arrow) { font-size: .8rem; color: #C3CEDB; line-height: 1.4; }
.mega-featured-arrow { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: 6px; border-radius: 50%; background: var(--orange); color: #fff; transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.mega-featured:hover .mega-featured-arrow { transform: translateX(4px); }

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex: 1 1 auto; min-width: 0; }

/* Primary CTA — the orange gradient, never flat orange */
.btn-header-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--gradient-accent);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(232,74,10,.55);
  transition: transform var(--duration-base) var(--ease-signal), box-shadow var(--duration-base) var(--ease-signal);
}
.btn-header-cta svg { transition: transform var(--duration-base) var(--ease-signal); }
.btn-header-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(232,74,10,.62); }
.btn-header-cta:hover svg { transform: translateX(3px); }
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; }
.nav-toggle span { width: 100%; height: 2px; background: var(--navy-900); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { display: none; }

/* ---------- 6. Hero -------------------------------------------------------- */
/* Composition follows the supplied UI reference: copy left on a light wash,
   vessel bleeding off the right edge with the ocean running full-width along
   the bottom, globe behind the vessel, a Fleet Health readout over the water
   and three capability chips down the right edge.

   Execution follows design-tokens.css / Build Brief §4 rather than the
   mockup's finish: brand navy #334859, the orange *gradient* (never flat),
   Space Grotesk + IBM Plex, and a hard 6px radius ceiling — no pill buttons,
   no large soft cards. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--space-6));
  padding-bottom: var(--space-16);
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F9 42%, #E9EFF3 100%);
  isolation: isolate;
}

/* --- Vessel plate: full-bleed photo, ship weighted to the right --- */
.hero-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* The photo is confined to the right of the hero and deliberately given more
   height than the box, so `cover` has real horizontal overflow to play with —
   at full-bleed the scaled image matched the box width exactly, which made
   object-position's X value a silent no-op and left the vessel centred. */
.hero-media picture {
  position: absolute;
  top: -22%; right: -4%;
  width: 68%; height: 148%;
  display: block;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Real photo now (was an AI generation with the ship off to one side,
     hence the old 82%). This one is a symmetric head-on bow shot with the
     hull centred around ~64% of the source frame — that's what to keep
     centred in the crop, not an arbitrary corner. */
  object-position: 64% 48%;
  will-change: transform;
}
/* A licensed photo doesn't need the heavy synthetic grading the old AI
   image did — it already has premium golden-hour light and punchy blue
   sky. Just enough warmth/depth to tie it to the brand palette. */
.hero-media picture::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 50% at 74% 6%, rgba(255,214,160,.10) 0%, rgba(255,214,160,0) 60%),
    linear-gradient(0deg, rgba(8,20,35,.10) 0%, rgba(8,20,35,0) 26%);
  mix-blend-mode: soft-light;
}

/* Carries the waterline across the full width so the ocean continues under
   the copy column, as in the reference, instead of stopping at the photo. */
.hero-media::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(157,186,205,0) 0%, rgba(143,176,199,.55) 42%, rgba(122,160,187,.78) 100%);
}
/* Holds the left ~46% as clean ground for the copy, then releases so the
   vessel and the open water read at full strength. The second gradient
   softens the top edge where the transparent header passes over it. */
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(94deg,
      #FFFFFF 0%,
      rgba(255,255,255,.99) 30%,
      rgba(255,255,255,.93) 42%,
      rgba(255,255,255,.62) 52%,
      rgba(255,255,255,.20) 62%,
      rgba(255,255,255,0) 74%),
    linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.12) 22%, rgba(255,255,255,0) 42%);
}

/* --- Maritime Command HUD: radar + sky map + connectivity nodes,
   replacing the old oversized dotted globe. Everything here reads as
   instrumentation overlaid on the ship — never a shape wrapping around
   it — and stays low-opacity enough to lose to the vessel every time. --- */
.hero-hud { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }

/* Radar cluster: 3 concentric rings + crosshair + one swept bearing arc,
   centred near the bridge (upper-right, where the ship's masts sit) and
   left to extend naturally off-canvas rather than being contained. */
.hero-hud-radar {
  position: absolute;
  top: -14%; right: -10%;
  width: min(760px, 58vw);
  height: auto;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Sky map: the flat dot-map dissolved into the sky above the vessel, not
   a globe behind it. Kept clear of the mast (positioned upper-left of the
   photo's own crop) and knocked down to near-invisible texture. */
.hero-hud-map { position: absolute; top: 2%; left: 38%; width: min(620px, 46vw); opacity: .05; }
.hero-hud-map svg { display: block; width: 100%; height: auto; }
.hero-hud-map .dotmap-land { fill: #FFFFFF; }
.hero-hud-map .dotmap-marker { display: none; }

/* Connectivity nodes: reuses .sol-hero-node's existing blink animation
   (defined once, used site-wide on every photo hero) rather than a new
   keyframe local to the homepage. */
.hero-hud-node { z-index: 2; }

.hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-3), 4vw, var(--space-6));
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
}
.hero-copy { grid-column: 1 / -1; }

/* --- Eyebrow: IBM Plex Mono, uppercase, wide tracking (tokens) --- */
.hero-eyebrow {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: var(--space-3);
}
/* Short gradient rule, not a triangle or dash — the accent gradient is a
   brand element, so it carries the marker. */
.hero-eyebrow::before {
  content: '';
  width: 32px; height: 3px; flex-shrink: 0;
  background: var(--gradient-accent);
  border-radius: var(--radius-sm);
}

.hero-title {
  font-family: var(--font-display);
  font-size: 44px;                       /* stepped up at the breakpoints below */
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
  margin-bottom: var(--space-3);
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: block; will-change: transform; }
/* The full stops carry the accent gradient — the one decorative use of orange
   in the headline, and never as a text color on navy (fails contrast). */
.hero-title .dot {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-steel-grey);
  max-width: 48ch;
  margin-bottom: var(--space-4);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --- Buttons: 6px radius ceiling, engineered not soft --- */
.btn-hero {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  padding: 17px var(--space-3);
  border-radius: var(--radius-lg);          /* 6px — the sitewide ceiling */
  border: 1.5px solid transparent;
  transition: transform var(--duration-base) var(--ease-signal),
              box-shadow var(--duration-base) var(--ease-signal),
              background-color var(--duration-base) var(--ease-signal),
              color var(--duration-base) var(--ease-signal),
              border-color var(--duration-base) var(--ease-signal);
  will-change: transform;
}
.btn-hero svg { transition: transform var(--duration-base) var(--ease-signal); }
.btn-hero:hover { transform: translateY(-4px); }
.btn-hero:hover svg { transform: translateX(4px); }

.btn-hero-primary {
  background: var(--gradient-accent);
  color: var(--color-white);
  box-shadow: 0 8px 20px -10px rgba(232,74,10,.55);
}
.btn-hero-primary:hover { box-shadow: 0 16px 30px -12px rgba(232,74,10,.62); }

.btn-hero-secondary {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: rgba(var(--color-navy-rgb), .28);
  box-shadow: var(--shadow-sm);
}
.btn-hero-secondary:hover { border-color: var(--color-navy); box-shadow: var(--shadow-md); }

/* --- Instrumentation over the photo: Fleet Health readout + capability
   chips share one glass treatment — dark navy-tinted frosted glass with
   white text, so they read against the photo the way the reference's do,
   not as light UI cards floating on top of a photo. --- */
.hero-readout,
.hero-chip {
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(20,36,53,.62), rgba(20,36,53,.42));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 24px -10px rgba(4,12,22,.5);
}

.hero-readout {
  position: absolute;
  z-index: 3;
  /* Sits over the water to the left of the bow, not over the copy column. */
  left: 52%; top: 21%;
  width: 208px;
  padding: var(--space-2);
}
.hero-readout-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.hero-readout-spark { display: block; width: 100%; height: 44px; margin-block: 10px 8px; }
.hero-readout-spark path { stroke-linecap: round; stroke-linejoin: round; }
.hero-readout-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}
.hero-readout-delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255,255,255,.68);
  margin-top: 6px;
}
.hero-readout-delta b { color: #FFB27A; font-weight: 600; }

/* --- Capability chips down the right edge --- */
.hero-chips {
  position: absolute;
  z-index: 3;
  right: 3%; top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
  width: 232px;
}
.hero-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  will-change: transform;
}
.hero-chip-icon { flex-shrink: 0; color: #FF8A50; }
.hero-chip-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.32;
  color: var(--color-white);
}

/* --- Scroll cue --- */
/* White, not steel-grey: it sits on the photo, and steel-grey read too low-
   contrast there — the reference's is crisp white. */
.hero-scroll {
  position: absolute; left: 50%;
  bottom: calc(var(--space-8) + var(--space-3));
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 6px rgba(4,12,22,.35);
  transition: opacity var(--duration-base) var(--ease-signal);
}
.hero-scroll:hover { opacity: .8; }
.hero-scroll .mouse {
  width: 22px; height: 34px;
  border: 1.5px solid currentColor;
  border-radius: 11px;                    /* the one exception: it *is* a mouse */
  position: relative; opacity: .75;
}
.hero-scroll .mouse::after {
  content: ''; position: absolute; top: 6px; left: 50%;
  width: 3px; height: 7px; border-radius: var(--radius-sm);
  background: var(--color-orange-start);
  transform: translateX(-50%);
  animation: heroScrollDot 2s var(--ease-signal) infinite;
}
@keyframes heroScrollDot {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  20%  { opacity: 1; }
  70%  { opacity: 0; transform: translate(-50%, 11px); }
  100% { opacity: 0; }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .hero-title { font-size: 52px; }
}
@media (min-width: 1024px) {
  .hero-copy { grid-column: 1 / span 6; }
  /* Homepage flagship headline is the one deliberate exception to the
     --text-5xl (64px) ceiling every other template's H1 respects — the
     brief calls for 84px, and this is the single largest, most load-bearing
     headline on the site. */
  .hero-title { font-size: clamp(52px, 5.2vw, 84px); }
  .hero-title .line > span { white-space: nowrap; }
}
@media (max-width: 1023px) {
  /* Stacked: the photo becomes a banner *below* the copy rather than a
     full-bleed plate, so text never sits on the hull. Flex + order is what
     puts it below — .hero-media precedes .hero-inner in the DOM (it has to,
     so it paints behind on desktop), so plain block flow rendered the ship
     above the headline. */
  .hero {
    min-height: 0;
    padding-bottom: var(--space-12);
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-inner { order: 1; }
  .hero-media { order: 2; }

  /* The 12-column track only makes sense next to the vessel. At 390px the
     11 × 48px gaps alone exceeded the viewport and forced .hero-copy to
     528px, clipping it. */
  .hero-inner { display: block; }
  .hero-copy { max-width: none; }

  .hero-media { position: relative; height: 46vw; min-height: 260px; margin-top: var(--space-4); }
  /* Reset the desktop right-hand crop — stacked, the photo is a full-width
     banner, and inheriting `width:66%; right:-3%` squeezed the vessel into
     the right two-thirds with dead space beside it. */
  .hero-media picture { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-media img { object-position: 64% 44%; }
  .hero-media::before { display: none; }
  .hero-media::after {
    background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 34%);
  }
  /* Mobile HUD: keep one subtle radar arc (shrunk, further dimmed — it's
     ambient texture behind the copy now, not an overlay on the ship), drop
     the sky map and connectivity nodes entirely — per the brief, mobile
     keeps only the Fleet Health card and one radar arc. */
  .hero-hud-radar { width: 130vw; right: -60%; top: -8%; }
  .hero-hud-map, .hero-hud-node { display: none; }

  /* Fleet Health card, capability chips and the scroll cue are all
     dropped on mobile — the ship stays the undisputed focal point with
     nothing overlaid on or stacked under it. */
  .hero-readout, .hero-chips, .hero-scroll { display: none; }
  .hero-inner { padding-bottom: 0; }
}

/* ---------- 7. Floating trust bar ------------------------------------------- */
.trust-wrap {
  position: relative;
  z-index: 4;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-3), 4vw, var(--space-6));
  margin-top: calc(var(--space-8) * -1);
}
.trust-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);          /* 6px, not the mockup's soft card */
  border: 1px solid var(--color-border-hairline);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-3);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-2);
  will-change: transform;
}
.trust-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.trust-text { min-width: 0; flex: 1 1 0; }
/* Large, per the reference — these are the strip's visual anchor, not a
   decorative bullet. */
/* Explicit box, not just the child sizing itself: .icon-png below relies on
   a definite-size parent for object-fit:contain to resolve against — with
   no fixed size here a percentage-sized <img> falls back to its raw
   intrinsic pixel dimensions (the full ~250px source file). */
.trust-icon { flex-shrink: 0; width: 50px; height: 50px; color: var(--color-navy); }
.trust-icon svg { width: 100%; height: 100%; }
.trust-value {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-navy);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.trust-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-steel-grey);
  margin-top: 7px;
  overflow-wrap: anywhere;
}
/* Row layout needs real room per column (icon + divider + a comfortably
   unwrapped value like "2,500+") — below this it stays in the stacked
   (column) layout above, which never runs out of width since text gets
   the item's full box instead of sharing it with the icon. */
@media (min-width: 1120px) {
  .trust-card {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: var(--space-4) var(--space-6);
    gap: var(--space-3);
  }
  .trust-item { flex-direction: row; align-items: center; gap: var(--space-2); border-left: 1px solid var(--color-border-hairline); padding-left: var(--space-4); }
  .trust-item:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- 8. Challenges ---------------------------------------------------- */
/* Reusable section-header component (eyebrow / title / rule left, lede / CTA
   right) — first use is here, later sections reuse the same .sec-* classes
   rather than each rolling its own header markup. */
.ch-container {
  max-width: 1480px;                 /* matches .hero-inner / .trust-wrap so
                                         the headline and grid stay flush with
                                         the hero above it */
  margin-inline: auto;
  padding-inline: clamp(var(--space-3), 4vw, var(--space-6));
}
.challenges { padding-block: clamp(64px, 8vw, 112px); background: var(--color-bg-default); }

.sec-head { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-8); }
.sec-eyebrow {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-orange-start); margin-bottom: var(--space-2);
}
.sec-eyebrow::before {
  content: ''; width: 0; height: 0; flex-shrink: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 8px solid var(--color-orange-start);
}
/* Single source of truth for every page-section H2 sitewide — font,
   weight, size and line-height live HERE ONLY. Every section-title class
   below (.ind-grid-title, .pprod-feature-title, .sol-cta-title, etc.) is
   listed as a selector on THIS rule rather than redeclaring its own
   font-size/weight, which is what let them drift to 8 different sizes
   (34–44px) over the course of the build. Each class's own rule (further
   down the file) now only carries what's genuinely contextual: color for
   dark/navy sections, and margin-bottom for sections without a .sec-rule
   underline doing that spacing job. Add a new section heading anywhere on
   the site by adding its class to THIS selector list — never by copying
   font-size/weight into a new rule. */
.sec-title,
.ind-grid-title,
.pprod-feature-title,
.pprod-cta-title,
.pprod-modules-title,
.sol-cta-title,
.sol-grid-title,
.parch-platform-title,
.parch-intro-title,
.ftr-cta h2 {
  font-family: var(--font-display); font-weight: 800; color: var(--color-navy);
  font-size: clamp(28px, 3.2vw, var(--text-4xl)); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
/* Dual-color H2 accent — single canonical class (was duplicated as
   .cc-title-accent / .lab-title-accent) for the orange second line used
   across every two-line section heading site-wide. Works on light or dark
   backgrounds alike since it sets color explicitly rather than relying on
   what it inherits. */
.sec-title-accent { color: var(--color-orange-start); }
.sec-rule { display: block; width: 56px; height: 3px; margin-top: var(--space-3); background: var(--gradient-accent); border-radius: var(--radius-sm); }
.sec-lede { font-family: var(--font-body); color: var(--color-steel-grey); font-size: var(--text-base); line-height: var(--leading-relaxed); max-width: 46ch; margin-bottom: var(--space-3); }

.btn-navy {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  padding: 14px var(--space-3); border-radius: var(--radius-lg);
  background: var(--color-navy); color: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-signal), box-shadow var(--duration-base) var(--ease-signal);
}
.btn-navy svg { transition: transform var(--duration-base) var(--ease-signal); }
.btn-navy:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-navy:hover svg { transform: translateX(4px); }

.btn-orange {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  padding: 14px var(--space-3); border-radius: var(--radius-lg);
  background: var(--gradient-accent); color: var(--color-white);
  box-shadow: 0 8px 20px -6px rgba(232,74,10,.45);
  transition: transform var(--duration-base) var(--ease-signal), box-shadow var(--duration-base) var(--ease-signal);
}
.btn-orange svg { transition: transform var(--duration-base) var(--ease-signal); }
.btn-orange:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -6px rgba(232,74,10,.6); }
.btn-orange:hover svg { transform: translateX(4px); }

@media (min-width: 900px) {
  .sec-head { grid-template-columns: 1.15fr .85fr; align-items: start; gap: var(--space-6); }
  .sec-head-aside { padding-top: var(--space-1); }
}

/* --- Card grid --- */
/* minmax(0, 1fr), not 1fr: a bare 1fr track has an `auto` minimum, so the
   cards' min-content width used to force columns wider than a 390px
   viewport and scroll the whole page sideways on mobile. */
.ch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.ch-card {
  display: flex; flex-direction: column;
  padding: var(--space-3); border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-lg); background: var(--color-white);
  transition: transform var(--duration-base) var(--ease-signal),
              box-shadow var(--duration-base) var(--ease-signal),
              border-color var(--duration-base) var(--ease-signal);
}
.ch-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(232,74,10,.28); }

.ch-icon {
  width: 60px; height: 60px; flex-shrink: 0;
  border-radius: 50%; background: #EAF1F8; color: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
}
/* One accent element per icon carries the orange (Build Brief §4) */
.ic-accent { fill: var(--color-orange-start); }
.ic-accent-tri { fill: var(--color-orange-start); stroke: var(--color-orange-start); }
.ic-accent-stroke { stroke: var(--color-orange-start); fill: none; }

/* Hand-generated raster icons (assets/img/icons/) dropped into an otherwise
   inline-SVG icon system — see includes/lib/icons.php. display:block clears
   the few px of baseline whitespace an inline <img>/<picture> otherwise
   leaves inside a flex-centered circle. */
/* object-fit sizes against the <img>'s OWN box (its width/height HTML
   attributes, set per-call by altius_icon_html()) — NOT the parent
   container. width/height:100% here was wrong: it made every icon ignore
   its intended size and stretch to fill whatever container it sat in
   (a 36px-intended icon rendered at a 60px circle's full size). The
   attributes alone already give a definite box; object-fit just stops a
   non-square file from distorting inside it. */
.icon-png { display: block; object-fit: contain; }

.ch-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--color-navy); margin-bottom: 6px; }
.ch-desc { font-family: var(--font-body); font-size: .875rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); flex-grow: 1; margin-bottom: var(--space-2); }
.ch-arrow { align-self: flex-end; color: var(--color-orange-start); transition: transform var(--duration-base) var(--ease-signal); }
.ch-card:hover .ch-arrow { transform: translateX(4px); }

@media (min-width: 640px)  { .ch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ch-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* --- Closing band --- */
.ch-band {
  margin-top: var(--space-4);
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #EEF2F5, #E7EDF1);
  border: 1px solid var(--color-border-hairline);
}
.ch-band-intro { display: flex; align-items: center; gap: var(--space-2); }
.ch-band-icon {
  width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%;
  background: var(--color-navy); display: flex; align-items: center; justify-content: center;
}
.ch-band-intro h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-navy); line-height: 1.28; }
.ch-band-copy { font-family: var(--font-body); color: var(--color-steel-grey); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.ch-band-map { width: 100%; max-width: 280px; justify-self: center; }
.ch-band-map .dotmap { width: 100%; height: auto; }

@media (min-width: 900px) {
  .ch-band { grid-template-columns: auto 1fr auto; gap: var(--space-6); padding: var(--space-4) var(--space-6); }
  .ch-band-intro { flex-shrink: 0; max-width: 260px; }
  .ch-band-map { justify-self: end; }
}

/* ---------- 9. Ecosystem diagram -------------------------------------------- */
/* ---------- 9b. Ecosystem ----------------------------------------------------- */
.container-wide { max-width: 1480px; margin-inline: auto; padding-inline: clamp(var(--space-3), 4vw, var(--space-6)); }
.ecosystem { padding-block: clamp(64px, 8vw, 112px); background: var(--color-bg-default); overflow: hidden; }

.eco-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; }
.eco-copy .sec-lede { margin-bottom: var(--space-3); }
.eco-copy .btn-navy { margin-top: var(--space-1); }

/* --- Diagram --- */
.eco-diagram-wrap { position: relative; aspect-ratio: 1/1; max-width: 620px; margin-inline: auto; width: 100%; }
.eco-backdrop {
  position: absolute; top: 50%; left: 50%; width: 148%; height: 148%;
  transform: translate(-50%, -50%);
  border-radius: 50%; overflow: hidden;
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 78%);
  mask-image: radial-gradient(circle, #000 55%, transparent 78%);
  opacity: .32; pointer-events: none;
}
.eco-backdrop .dotmap { width: 100%; height: 100%; }
.eco-diagram { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }

.eco-link { stroke: #C3CFDA; stroke-width: 1.4; fill: none; }
.eco-link-draw path { stroke-dasharray: 260; stroke-dashoffset: 260; }
.eco-dot circle { fill: var(--color-orange-start); }
.eco-node text { font-family: var(--font-body); }

/* Large anchor nodes (Ship / Shore Office) */
.eco-glow { fill: #DCE9F5; opacity: .55; filter: blur(6px); }
.eco-label { font-family: var(--font-display); font-size: 15px; font-weight: 700; fill: var(--color-navy); }

/* Hub */
.eco-hub-glow { fill: url(#ecoHubGlow); }
.eco-hub-ring { fill: none; stroke: #B9CBDD; stroke-width: 1; stroke-dasharray: 2 6; stroke-linecap: round; }
.eco-hub-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; fill: #fff; letter-spacing: .04em; }
.eco-hub-sub { font-family: var(--font-mono); font-size: 10.5px; fill: #AEC0D3; letter-spacing: .04em; }

/* Small satellite cards */
.eco-node-card rect { fill: #fff; stroke: var(--color-border-hairline); stroke-width: 1.2; filter: drop-shadow(0 6px 14px rgba(51,72,89,.08)); }
.eco-card-label { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; fill: var(--color-navy); }

@media (min-width: 960px) { .eco-layout { grid-template-columns: .8fr 1.2fr; } }

/* --- Closing feature strip --- */
.eco-features {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3);
  background: var(--color-white); border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-3);
}
.eco-feature { display: flex; align-items: flex-start; gap: var(--space-2); }
.eco-feature-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: #EAF1F8; display: flex; align-items: center; justify-content: center; }
.eco-feature h3 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-navy); margin-bottom: 4px; }
.eco-feature p { font-family: var(--font-body); font-size: .84rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); }
@media (min-width: 720px) {
  .eco-features { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--space-4) var(--space-6); }
  .eco-feature { border-left: 1px solid var(--color-border-hairline); padding-left: var(--space-3); }
  .eco-feature:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- 10. Our Promise ---------------------------------------------------- */
.promise { background: var(--color-bg-default); padding-block: clamp(64px, 8vw, 112px); overflow: hidden; }
.promise-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; }
.promise-copy .sec-lede { max-width: 50ch; }

.promise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) 0; }
.promise-item { padding-inline: var(--space-3); }
.promise-item:nth-child(2n) { border-left: 1px solid var(--color-border-hairline); }

.promise-icon {
  width: 58px; height: 58px; border-radius: var(--radius-lg);
  background: #FDEEE4; color: var(--color-orange-start);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
}
.promise-item h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--color-navy); margin-bottom: 10px; }
.promise-rule { display: block; width: 26px; height: 2px; background: var(--color-orange-start); margin-bottom: 10px; }
.promise-item p { font-family: var(--font-body); font-size: .85rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); max-width: 26ch; }

/* --- Photo + decorative accents --- */
.promise-visual { position: relative; max-width: 460px; margin-inline: auto; }
.promise-photo {
  position: relative; z-index: 2; display: block;
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 4.35; box-shadow: var(--shadow-lg);
}
.promise-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; }

.promise-dots {
  position: absolute; z-index: 0; width: 150px; height: 150px;
  background-image: radial-gradient(circle, #C7D0D8 1.4px, transparent 1.4px);
  background-size: 15px 15px;
}
.promise-dots-tl { top: -28px; left: -34px; }
.promise-dots-br { bottom: -28px; right: -34px; }

.promise-accent-block {
  position: absolute; z-index: 1; top: -22px; right: -22px;
  width: 132px; height: 96px;
  background: #FDEEE4; border-radius: var(--radius-lg);
}
.promise-accent-tri { position: absolute; z-index: 3; bottom: -18px; left: -18px; width: 84px; height: 84px; }

@media (min-width: 1024px) {
  .promise-layout { grid-template-columns: 1.2fr .8fr; gap: var(--space-8); }
  .promise-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .promise-item:nth-child(2n) { border-left: 0; }
  .promise-item:not(:first-child) { border-left: 1px solid var(--color-border-hairline); }
}

/* ---------- 11. Solutions — executive rebuild ---------------------------------- */
.solutions-exec {
  position: relative; overflow: hidden;
  padding-block: clamp(80px, 10vw, 140px) clamp(72px, 8vw, 120px);
  background:
    radial-gradient(circle at 78% 22%, rgba(34,121,185,.08), transparent 36%),
    linear-gradient(180deg, #ffffff, #F7F9FA);
}
.solx-bg { position: absolute; inset: 0; pointer-events: none; }
.solx-bg .dotmap { position: absolute; top: -8%; right: -12%; width: 62%; height: auto; opacity: .05; }

.solx-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; margin-bottom: 80px; }
.solx-rule { width: 44px; }
.solx-lede { max-width: 460px; font-size: 1.05rem; }

/* --- Ship ecosystem visual: one pre-composed image (ship + radar rings +
   dotted map + capability bubbles all baked in by the designer) --- */
.solx-visual { position: relative; max-width: 720px; margin-inline: auto; width: 100%; }
.solx-visual-img { display: block; width: 100%; height: auto; will-change: transform; }
.solx-visual-img img { display: block; width: 100%; height: auto; }

/* --- Cards --- */
.solx-cards { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 64px; }
.solx-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 420px; padding: 32px; border-radius: 22px;
  background: linear-gradient(180deg, #0A3153, #072544);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-md); overflow: hidden;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1), background .35s cubic-bezier(.22,.61,.36,1);
}
/* Diagonal highlight + faint blueprint grid + corner glow — all one layer,
   under the content (z-index) but above the card's own gradient fill. */
.solx-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07) 0%, transparent 42%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 24px),
    radial-gradient(140px 140px at 100% 0%, rgba(241,90,36,.14), transparent 72%);
}
.solx-card-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-orange-start); transform: scaleX(.32); transform-origin: left; transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.solx-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); background: linear-gradient(180deg, #0D3A61, #0A2E52); }
.solx-card:hover .solx-card-line { transform: scaleX(1); }
.solx-card:hover .solx-card-icon { transform: rotate(4deg); }
.solx-card:hover .solx-card-arrow { transform: translateX(4px); }

.solx-card-icon { display: block; position: relative; z-index: 1; width: 52px; height: 52px; margin-bottom: 24px; transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.solx-card h3 { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #fff; margin-bottom: 12px; line-height: 1.25; }
.solx-card p { position: relative; z-index: 1; font-family: var(--font-body); font-size: .92rem; line-height: var(--leading-relaxed); color: #AEBBD0; flex-grow: 1; }
.solx-card-arrow { position: relative; z-index: 1; margin-top: 20px; color: var(--color-orange-start); transition: transform .35s cubic-bezier(.22,.61,.36,1); }

/* --- Trust strip --- */
.solx-trust {
  position: relative; z-index: 1;
  background: #fff; border-radius: 26px; border: 1px solid var(--color-border-hairline); box-shadow: var(--shadow-lg);
  padding: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.solx-trust-item { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 12px; transition: background .25s ease; }
.solx-trust-item:hover { background: var(--color-bg-surface); }
.solx-trust-icon { display: block; flex-shrink: 0; width: 44px; height: 44px; }
.solx-trust-item strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--color-navy); }
.solx-trust-item span { display: block; font-family: var(--font-body); font-size: .85rem; color: var(--color-steel-grey); margin-top: 2px; }

@media (min-width: 640px)  { .solx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .solx-layout { grid-template-columns: 5fr 7fr; gap: 48px; } }
@media (min-width: 1180px) { .solx-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 860px)  {
  .solx-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 32px 40px; }
  .solx-trust-item { border-left: 1px solid var(--color-border-hairline); padding-left: 20px; border-radius: 0; }
  .solx-trust-item:first-child { border-left: 0; padding-left: 8px; }
}

/* ---------- 12. Executive Command Centre --------------------------------------- */
.cc { position: relative; padding-block: clamp(72px, 10vw, 140px); overflow: hidden; }
.cc-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(circle at 82% 30%, rgba(27,91,150,.08), transparent 38%), linear-gradient(180deg, #FFFFFF, #F7F9FA); }
.cc-bg-arcs { position: absolute; top: -10%; right: -10%; width: 70%; height: 90%; transform-origin: 82% 18%; animation: ccBgSpin 140s linear infinite; }
.cc-bg-photo { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; min-height: 240px; }
.cc-bg-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 65%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 32%);
  mask-image: linear-gradient(180deg, transparent, #000 32%);
}

.cc2-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.cc-lede { max-width: 460px; }

.cc-values { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-block: var(--space-4) var(--space-4); }
.cc-value { display: flex; align-items: flex-start; gap: 14px; padding: 4px; border-radius: var(--radius-md); transition: background var(--duration-base) var(--ease-signal); }
.cc-value:hover { background: var(--color-bg-surface); }
.cc-value-icon {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  background: #EAF1F8; color: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--duration-base) var(--ease-signal), background var(--duration-base) var(--ease-signal);
}
.cc-value:hover .cc-value-icon { transform: rotate(-8deg); background: var(--color-orange-start); color: #fff; }
.cc-value:hover .cc-value-icon .ic-accent { fill: #fff; }
.cc-value h3 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-navy); margin-bottom: 4px; }
.cc-value p { font-family: var(--font-body); font-size: .86rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); }

.cc-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.cc-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: .92rem; color: var(--color-navy); }
.cc-link svg { color: var(--color-orange-start); transition: transform var(--duration-base) var(--ease-signal); }
.cc-link:hover svg { transform: translateX(4px); }

/* --- Dashboard --- */
.cc-dash-wrap { position: relative; }
.dashboard {
  position: relative; background: linear-gradient(180deg, #062544, #041A31);
  border-radius: 28px; padding: 18px; display: flex; gap: 14px; color: #fff;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.dashboard-rail { display: none; }
.dashboard-rail-icon {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); transition: background var(--duration-base) var(--ease-signal), box-shadow var(--duration-base) var(--ease-signal);
}
.dashboard-rail-icon.is-active { background: var(--color-orange-start); }
.dashboard-rail-icon:hover { box-shadow: 0 0 0 6px rgba(232,74,10,.14); }
.dashboard-main { flex: 1; min-width: 0; }
.dashboard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.dashboard-app-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--gradient-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dashboard-head h3 { color: #fff; font-size: 1rem; margin-right: auto; }
.dashboard-live { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: #7FE3A8; }
.dashboard-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #2FB675; position: relative; }
.dashboard-live-dot::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid #2FB675; animation: ccLivePulse 2.2s ease-out infinite; }
.dashboard-select { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 7px 12px; font-size: .8rem; color: #fff; }

.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.kpi-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px; transition: transform var(--duration-base) var(--ease-signal), border-color var(--duration-base) var(--ease-signal), background var(--duration-base) var(--ease-signal); }
.kpi-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.kpi-label { font-size: .72rem; color: #93A2BA; font-weight: 600; margin-bottom: 6px; }
.kpi-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: #fff; }
.kpi-delta { font-size: .72rem; font-weight: 700; margin-left: 6px; }
.kpi-delta.up { color: #2FB675; } .kpi-delta.down { color: #F0714F; }
.kpi-bar { margin-top: 10px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.kpi-bar-fill { height: 100%; width: 0; border-radius: 3px; background: var(--gradient-accent); transition: width 1.1s cubic-bezier(.22,1,.36,1); }

.dash-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.dash-panel { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 16px; }
.dash-panel-title { font-size: .8rem; font-weight: 700; color: #fff; margin-bottom: 12px; }

.cc-map { position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: radial-gradient(120% 140% at 30% 20%, #17325A 0%, #0B1E3D 70%); }
.cc-map-bg { position: absolute; inset: 0; }
.cc-map-bg svg { width: 100%; height: 100%; }
.cc-map-bg .dotmap-land { fill: rgba(255,255,255,.16); }
.cc-map-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cc-map-lines line { stroke: rgba(255,255,255,.22); stroke-width: 1; stroke-dasharray: 2 3; }
.cc-map-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; animation: ccMarkerBlink 2.6s ease-in-out infinite; }
.cc-map-dot--online  { background: #2FB675; box-shadow: 0 0 0 4px rgba(47,182,117,.22); }
.cc-map-dot--offline { background: var(--color-orange-start); box-shadow: 0 0 0 4px rgba(232,74,10,.22); }
.cc-map-dot--limited { background: #E5484D; box-shadow: 0 0 0 4px rgba(229,72,77,.22); }
.cc-map-zoom { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 1px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.1); }
.cc-map-zoom span { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: .85rem; color: #fff; background: rgba(6,37,68,.7); }
.map-legend { display: flex; gap: 14px; margin-top: 10px; font-size: .72rem; color: #93A2BA; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.map-legend i.cc-map-dot--online, .map-legend i.cc-map-dot--offline, .map-legend i.cc-map-dot--limited { position: static; margin: 0; animation: none; }

.progress-value { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.progress-value .big { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: #fff; }
.progress-track { height: 7px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.progress-fill { height: 100%; width: 0; border-radius: 4px; background: var(--gradient-accent); transition: width 1.1s cubic-bezier(.22,1,.36,1); }

.cc-summary { margin-top: 10px; display: flex; align-items: center; gap: 18px; padding: 14px 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.cc-summary-ship { width: 64px; height: 36px; flex-shrink: 0; display: none; }
.cc-summary-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; flex: 1; min-width: 0; }
.cc-summary-item { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.12); }
.cc-summary-item:nth-child(odd) { border-left: 0; padding-left: 0; }
.cc-summary-value { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: #fff; }
.cc-summary-label { display: block; font-size: .7rem; color: #93A2BA; margin-top: 2px; }

@keyframes ccLivePulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes ccMarkerBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ccBgSpin { to { transform: rotate(360deg); } }

@media (min-width: 720px) { .dash-row { grid-template-columns: 1.3fr 1fr; } }
@media (min-width: 640px) { .cc-summary-metrics { grid-template-columns: repeat(5, 1fr); } .cc-summary-item { border-left: 1px solid rgba(255,255,255,.12); padding-left: 14px; } .cc-summary-item:first-child { border-left: 0; padding-left: 0; } .cc-summary-ship { display: block; } }
@media (min-width: 960px) {
  .cc2-layout { grid-template-columns: 5fr 7fr; gap: 48px; }
  .dashboard-rail { display: flex; flex-direction: column; gap: 6px; width: 42px; padding-block: 6px; }
}
@media (min-width: 1180px) { .cc-values { grid-template-columns: repeat(2, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .dashboard-live-dot::before, .cc-map-dot, .cc-bg-arcs { animation: none; }
}

/* ---------- 13. Innovation Lab --------------------------------------------------- */
.lab { position: relative; padding-block: clamp(72px, 10vw, 140px); overflow: hidden; }
.lab-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(circle at 78% 28%, rgba(34,121,185,.07), transparent 38%), linear-gradient(180deg, #FFFFFF, #F7F9FA); }
.lab-bg-dotmap { position: absolute; top: -6%; right: -8%; width: 72%; height: 90%; opacity: .05; }
.lab-bg-dotmap svg { width: 100%; height: 100%; }
.lab-bg-arcs { position: absolute; bottom: -15%; left: -10%; width: 55%; height: 80%; }

.lab-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.lab-lede { max-width: 460px; }

.lab-visual { position: relative; max-width: 720px; margin-inline: auto; width: 100%; }
.lab-visual-img { display: block; width: 100%; height: auto; will-change: transform; }
.lab-visual-img img { display: block; width: 100%; height: auto; }
.lab-hero-scrim { display: none; }

/* --- Cards --- */
.lab-track-wrap { position: relative; z-index: 1; margin-top: clamp(48px, 6vw, 80px); }
.lab-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 8px; scrollbar-width: none; }
.lab-track::-webkit-scrollbar { display: none; }

.lab-card {
  scroll-snap-align: start; flex: 0 0 82%; text-align: left;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 24px 24px 0; border-radius: 22px;
  background: #fff; border: 1px solid var(--color-border-hairline); box-shadow: var(--shadow-sm);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1), background .35s cubic-bezier(.22,.61,.36,1);
}
/* Faint blueprint grid, under the content but above the card's own fill —
   "subtle blueprint texture" from the brief, same layer technique as the
   Solutions cards' ::before. */
.lab-card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(10,49,83,.02) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(10,49,83,.02) 0 1px, transparent 1px 22px);
}
.lab-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); background: #FCFDFE; }
.lab-card:hover .lab-card-icon { transform: rotate(-6deg); background: var(--orange-tint); }
.lab-card:hover .lab-card-rule { transform: scaleX(1); }
.lab-card:hover .lab-card-arrow { transform: translateX(4px); background: var(--color-orange-start); border-color: var(--color-orange-start); color: #fff; }

.lab-card-icon {
  position: relative; z-index: 2; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%;
  background: #EAF1F8; color: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), background .35s cubic-bezier(.22,.61,.36,1);
}
.lab-card-rule { position: relative; z-index: 2; display: block; width: 28px; height: 3px; margin: 18px 0 14px; background: var(--gradient-accent); border-radius: var(--radius-sm); transform: scaleX(.5); transform-origin: left; transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.lab-card h3 { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-navy); margin-bottom: 10px; line-height: 1.3; }
/* Arrow sits beside the copy, not stacked below it — keeps the card
   height-compact instead of the tall column the old below-text arrow made. */
.lab-card-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 20px; }
.lab-card p { font-family: var(--font-body); font-size: .88rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); }
.lab-card-arrow {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--color-orange-start); color: var(--color-orange-start);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), background .35s cubic-bezier(.22,.61,.36,1), color .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1);
}
/* Continuous "ocean horizon" across every card — see the shared-panorama
   background-position math in the PHP loop that renders these. A normal
   flex child (not absolutely-positioned over the text), bled to the card's
   edges with negative margins so it's the last thing in the card and never
   overlaps the copy above it. `aspect-ratio` sizes the box directly off the
   source photo's own ratio (1672:117) instead of a fixed px height — a
   fixed height combined with background-size's forced-percentage scaling
   was squashing the water ripples non-uniformly and aliasing into the
   streaky mess this replaced. */
.lab-card-ocean {
  /* aspect-ratio is the SLICE's proportion (one-fifth image width : full
     image height), not the source photo's own 1672:117 — background-size
     below stretches 5 slice-widths across the box, so the box's own aspect
     has to already match what a 1/5-width, full-height slice looks like
     once scaled up: 1672:(117×5). Get this wrong (e.g. use 1672:117
     directly) and background-size's percentage math re-squashes the image
     a second time on top of this box sizing — that compounded, uncancelled
     squash was the real cause of the streaky/aliased water this replaced. */
  display: block; margin: 0 -24px 0; aspect-ratio: 1672 / 585; z-index: 0;
  background-image: url('/assets/img/innovation-lab/lab-ocean-strip.jpg');
  background-size: 500% 100%; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%);
  mask-image: linear-gradient(180deg, transparent, #000 30%);
}

.lab-controls { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.lab-dots { display: flex; gap: 6px; }
.lab-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.lab-dots span.is-active { background: var(--orange); width: 18px; border-radius: 3px; transition: width .25s ease; }
.lab-arrows { display: flex; gap: 10px; }
.lab-nav-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--color-navy);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s ease, box-shadow .25s ease;
}
.lab-nav-btn:hover { transform: translateY(-2px); border-color: var(--color-orange-start); box-shadow: 0 0 0 6px rgba(232,74,10,.12); }

@media (min-width: 640px) {
  .lab-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .lab-card { flex: initial; }
  .lab-controls { display: none; }
}
@media (min-width: 1024px) {
  /* Full-bleed cover ship, text overlaid directly on it — like the reference
     mockup, not a boxed picture in a right-hand column. The photo already
     fades to white on its own left third, but that fade is baked into fixed
     pixels while this box is fluid width, so .lab-hero-scrim rides on top as
     a CSS gradient safety net rather than relying on the container happening
     to match the photo's original aspect ratio. */
  .lab-layout { display: flex; align-items: center; position: relative; min-height: clamp(520px, 54vw, 680px); gap: 0; }
  .lab-copy { position: relative; z-index: 3; max-width: 560px; padding-block: 24px; }
  /* Edge-to-edge viewport-width breakout — .lab-visual lives inside
     .container-wide (max-width + side padding), so a plain inset:0 only
     filled THAT box, leaving the gutters visible on both sides. left:50% is
     relative to .lab-layout, which is centered on the page same as the
     viewport (container-wide is margin-inline:auto), so shifting left by
     -50vw + width:100vw lands the box exactly on the real viewport edges
     regardless of the container's own max-width. */
  .lab-visual {
    position: absolute; top: 0; left: 50%; width: 100vw; height: 100%;
    margin-left: -50vw; z-index: 1; max-width: none;
  }
  .lab-visual-img, .lab-visual-img img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 42%; }
  .lab-hero-scrim {
    display: block; position: absolute; top: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; z-index: 2;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.88) 18%, rgba(255,255,255,.35) 34%, transparent 48%);
  }
}
@media (min-width: 1180px) { .lab-track { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- 14. Generic page hero (inner pages) --------------------------------- */
.page-hero { background: var(--navy-900); color: #fff; padding-block: clamp(72px, 10vw, 120px) clamp(48px,7vw,72px); }
.page-hero .breadcrumbs { display: flex; gap: 8px; font-size: .82rem; color: #93A2BA; margin-bottom: 18px; }
.page-hero .breadcrumbs a { color: #93A2BA; } .page-hero .breadcrumbs a:hover { color: #fff; }
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero p.lede { color: #AEBBD0; max-width: 56ch; margin-top: 18px; font-size: 1.05rem; }
.overview-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.overview-card { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-md); transition: box-shadow .25s ease, transform .25s ease, border-color .25s; }
.overview-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(241,89,42,.3); }
.overview-card h3 { margin-bottom: 8px; }
.overview-card p { font-size: .9rem; }
.overview-card a.card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; color: var(--orange); font-size: .88rem; }
.notice-band { background: var(--orange-tint); border: 1px solid rgba(241,89,42,.25); border-radius: var(--radius-md); padding: 20px 24px; font-size: .9rem; color: var(--navy-900); }
@media (min-width: 640px)  { .overview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .overview-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 15. Contact page -------------------------------------------------------- */
/* Hero shell reuses .sol-hero-*; Why Contact reuses .ind-benefit-row/
   .ind-benefit from the Industries archive. Everything else (.ctp-*) is
   new: the trust strip, the floating form card + its fields and the
   country-code combobox, the "other ways to connect" panel, and the
   office cards. */

.ctp-hero .sol-hero-title { margin-bottom: 4px; }

/* --- Hero trust strip --- */
.ctp-trust-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: clamp(28px, 4vw, 40px); }
.ctp-trust-item { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
.ctp-trust-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; margin-bottom: 2px; }
.ctp-trust-item strong { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: #fff; }
.ctp-trust-item span { font-size: .76rem; color: #AEBBD0; }

/* --- Floating form card --- */
.ctp-form-card {
  background: #fff; border-radius: 22px; box-shadow: var(--shadow-lg); padding: clamp(18px, 2.6vw, 26px);
}
.ctp-form-card h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--color-navy); margin-bottom: 12px; }
.ctp-notice { padding: 10px 14px; border-radius: 10px; font-size: .8rem; margin-bottom: 12px; }
.ctp-notice--ok { background: #E9F7EF; border: 1px solid #B8E6C9; color: #1F7A44; }
.ctp-notice--error { background: #FDECEC; border: 1px solid #F3B7B7; color: #B23A3A; }

.ctp-form { display: grid; gap: 11px; }
.ctp-form-row { display: grid; gap: 11px; }
.ctp-field { display: grid; gap: 4px; }
.ctp-field label { font-size: .72rem; font-weight: 700; color: var(--color-navy); }
.ctp-field input, .ctp-field select, .ctp-field textarea {
  border: 1.5px solid var(--color-border-hairline); border-radius: 10px; padding: 9px 12px;
  font-family: var(--font-body); font-size: .86rem; color: var(--color-navy); background: var(--color-bg-surface);
  transition: border-color .2s ease, box-shadow .2s ease; width: 100%;
}
.ctp-field textarea { resize: vertical; min-height: 64px; }
.ctp-field input:focus, .ctp-field select:focus, .ctp-field textarea:focus {
  outline: none; border-color: var(--color-orange-start); background: #fff; box-shadow: 0 0 0 3px rgba(241,90,36,.12);
}
.ctp-submit { justify-content: center; width: 100%; margin-top: 2px; padding-block: 12px; font-size: .88rem; }
.ctp-secure-note { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .7rem; color: var(--color-steel-grey); }

/* --- Phone field + country-code combobox --- */
.ctp-phone-field { display: flex; gap: 8px; }
.ctp-cc-picker { position: relative; flex-shrink: 0; }
.ctp-cc-trigger {
  display: flex; align-items: center; gap: 5px; height: 100%; padding: 9px 8px 9px 10px;
  border: 1.5px solid var(--color-border-hairline); border-radius: 10px; background: var(--color-bg-surface);
  font-family: var(--font-body); font-size: .84rem; font-weight: 600; color: var(--color-navy);
  transition: border-color .2s ease, background .2s ease;
}
.ctp-cc-trigger:hover, .ctp-cc-trigger[aria-expanded="true"] { border-color: var(--color-orange-start); background: #fff; }
.ctp-cc-trigger svg { color: var(--color-steel-grey); transition: transform .2s ease; }
.ctp-cc-trigger[aria-expanded="true"] svg { transform: rotate(90deg); }
.ctp-phone-field .ctp-field, .ctp-phone-field input[type="tel"] { flex: 1 1 auto; }
.ctp-phone-field input[type="tel"] {
  border: 1.5px solid var(--color-border-hairline); border-radius: 10px; padding: 9px 12px;
  font-family: var(--font-body); font-size: .86rem; color: var(--color-navy); background: var(--color-bg-surface);
  transition: border-color .2s ease, box-shadow .2s ease; width: 100%; min-width: 0;
}
.ctp-phone-field input[type="tel"]:focus { outline: none; border-color: var(--color-orange-start); background: #fff; box-shadow: 0 0 0 4px rgba(241,90,36,.12); }

.ctp-cc-panel {
  position: absolute; z-index: 10; top: calc(100% + 8px); left: 0; width: 280px; max-width: 80vw;
  background: #fff; border: 1px solid var(--color-border-hairline); border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
/* The class's own display:flex has the same specificity as the browser's
   default [hidden]{display:none} UA rule, and author styles win ties —
   so the panel rendered open by default until this explicit override. */
.ctp-cc-panel[hidden] { display: none; }
.ctp-cc-search {
  border: 1.5px solid var(--color-border-hairline); border-radius: 10px; padding: 10px 12px;
  font-family: var(--font-body); font-size: .86rem; color: var(--color-navy);
}
.ctp-cc-search:focus { outline: none; border-color: var(--color-orange-start); }
.ctp-cc-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.ctp-cc-option { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; cursor: pointer; font-size: .86rem; color: var(--color-navy); }
.ctp-cc-option:hover { background: var(--color-bg-surface); }
.ctp-cc-option-name { flex: 1 1 auto; }
.ctp-cc-option-dial { color: var(--color-steel-grey); font-size: .82rem; }
.ctp-cc-empty { padding: 12px 8px; text-align: center; color: var(--color-steel-grey); font-size: .84rem; }

/* --- Other ways to connect --- */
.ctp-connect { padding-block: clamp(64px, 8vw, 112px); background: #fff; }
.ctp-connect-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.ctp-connect-card { background: var(--color-bg-surface); border: 1px solid var(--color-border-hairline); border-radius: 22px; padding: clamp(20px, 3vw, 28px); }
.ctp-connect-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-navy); margin-bottom: 14px; }
.ctp-connect-row { display: flex; align-items: center; gap: 14px; padding: 14px 8px; border-top: 1px solid var(--color-border-hairline); transition: background .2s ease; border-radius: 10px; }
.ctp-connect-row:first-of-type { border-top: 0; }
.ctp-connect-row:hover { background: #fff; }
.ctp-connect-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; }
.ctp-connect-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.ctp-connect-body strong { font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--color-navy); }
.ctp-connect-body span { font-size: .84rem; color: var(--color-steel-grey); }
.ctp-connect-arrow { color: var(--color-orange-start); transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.ctp-connect-row:hover .ctp-connect-arrow { transform: translateX(4px); }

/* --- Global offices --- */
.ctp-offices { padding-block: clamp(64px, 8vw, 112px); background: var(--color-bg-surface); }
.ctp-office-row { display: grid; grid-template-columns: 1fr; gap: 24px; }
.ctp-office-card { background: #fff; border-radius: 24px; overflow: hidden; border: 1px solid var(--color-border-hairline); box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1); }
.ctp-office-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.ctp-office-header { padding: 28px 24px; background: linear-gradient(155deg, #0A3153 0%, #082B49 55%, #051F38 100%); color: #fff; display: flex; align-items: center; justify-content: center; }
.ctp-office-body { padding: 20px 22px 24px; }
.ctp-office-body strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-navy); }
.ctp-office-region { display: block; font-size: .78rem; font-weight: 600; color: var(--color-orange-start); margin: 2px 0 14px; }
.ctp-office-address, .ctp-office-line { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: var(--color-steel-grey); line-height: 1.5; margin-bottom: 8px; }
.ctp-office-address svg, .ctp-office-line svg { flex-shrink: 0; margin-top: 3px; color: var(--color-navy); }
.ctp-office-line a { color: var(--color-steel-grey); transition: color .2s ease; }
.ctp-office-line a:hover { color: var(--color-orange-start); }

@media (min-width: 480px)  { .ctp-trust-strip { grid-template-columns: repeat(4, 1fr); } .ctp-trust-item { border-top: 0; } }
@media (min-width: 620px)  { .ctp-office-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .ctp-connect-grid { grid-template-columns: 1.2fr .8fr; gap: 40px; } .ctp-form-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .ctp-office-row { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 16. Footer — executive close --------------------------------------- */
.ftr { position: relative; background: #041A31; color: #93A7BA; overflow: hidden; padding-top: 120px; padding-bottom: 60px; }
.ftr-bg { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1935 / 813; z-index: 0; pointer-events: none; }
.ftr-bg img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}

/* --- Layer 1: floating CTA banner --- */
.ftr-cta {
  position: relative; z-index: 1; margin-bottom: clamp(64px, 8vw, 112px);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 4vw, 48px);
  border-radius: 26px; border: 1px solid rgba(255,255,255,.08);
  /* Left-to-right fade to transparent — .ftr-bg (the aerial ship photo)
     shows through the right edge instead of this panel carrying its own
     image, so the "blends into the ship" effect always lines up with
     whatever the background is actually doing, never a second seam. */
  background: linear-gradient(90deg, rgba(11,42,69,.94) 0%, rgba(11,42,69,.8) 55%, rgba(11,42,69,.1) 100%);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
  overflow: hidden;
}
.ftr-cta-copy { flex: 1 1 340px; }
.ftr-cta-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-orange-start); margin-bottom: 10px;
}
.ftr-cta-eyebrow::before {
  content: ''; width: 0; height: 0; flex-shrink: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 8px solid var(--color-orange-start);
}
.ftr-cta h2 { color: #fff; }
.ftr-cta-sub {
  flex: 1 1 260px; font-size: .92rem; line-height: var(--leading-relaxed); color: #C3CEDB;
  padding-left: clamp(20px, 3vw, 36px); border-left: 1px solid rgba(255,255,255,.14);
}
.ftr-cta-btn { margin-left: auto; }

/* --- Layer 2: nav grid --- */
.ftr-main { position: relative; z-index: 1; }
.ftr-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 56px); padding-bottom: 64px; border-bottom: 1px solid rgba(255,255,255,.08); }

.ftr-brand .logo-footer { margin-bottom: 4px; }
.footer-tagline { font-size: .9rem; line-height: 1.6; margin-block: 18px 20px; color: #C3CEDB; max-width: 26ch; }
.footer-social { display: flex; gap: 10px; margin-bottom: 28px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); color: #C3CEDB;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.footer-social a:hover { transform: translateY(-3px); border-color: var(--color-orange-start); color: #fff; box-shadow: 0 0 0 5px rgba(232,74,10,.14); }

.ftr-col-title { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.ftr-col-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; }
.ftr-col-num { font-family: var(--font-mono); font-weight: 700; font-size: .78rem; color: var(--color-orange-start); }
.ftr-col-label { font-family: var(--font-display); color: #fff; font-weight: 700; font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; }
.ftr-col ul { display: grid; gap: 4px; }
.ftr-col a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-block: 8px; font-size: .88rem; color: #AEBBD0;
  border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.ftr-col a span { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.ftr-col a svg { flex-shrink: 0; color: var(--color-orange-start); transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.ftr-col a:hover { color: #fff; border-color: rgba(255,255,255,.14); }
.ftr-col a:hover span { transform: translateX(3px); }
.ftr-col a:hover svg { transform: translateX(5px); }

/* --- Layer 3: legal bar --- */
.ftr-legal { position: relative; z-index: 1; padding-top: 24px; }
.ftr-legal-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: .8rem; }
.ftr-legal-row p { color: #93A7BA; }
.ftr-wave { position: relative; flex: 1 1 auto; max-width: 320px; height: 20px; overflow: hidden; display: none; }
.ftr-wave svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: ftrWaveDrift 16s linear infinite; }
.ftr-wave svg:last-child { left: 100%; }
@keyframes ftrWaveDrift { to { transform: translateX(-100%); } }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.footer-legal a { color: #93A7BA; transition: color .2s ease; }
.footer-legal a:hover { color: #fff; }
.ftr-backtotop { display: inline-flex; align-items: center; gap: 6px; }
.ftr-backtotop svg { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.ftr-backtotop:hover svg { transform: translateY(-3px); }

@media (min-width: 640px)  { .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr-wave { display: block; } }
@media (min-width: 960px)  { .ftr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* repeat(4, ...), not 5 — Resources is hidden for now (includes/nav-data.php),
   so only 4 nav columns render; a 5th empty track here would leave a
   trailing gap. Bump back to repeat(5, .85fr) if Resources comes back. */
@media (min-width: 1180px) { .ftr-grid { grid-template-columns: 1.3fr repeat(4, .85fr); } }

@media (prefers-reduced-motion: reduce) {
  .ftr-wave svg { animation: none; }
}
@media (min-width: 720px)  { .footer-top { grid-template-columns: 1.4fr repeat(2, 1fr); } }
@media (min-width: 1080px) { .footer-top { grid-template-columns: 1.4fr repeat(5, 1fr); } }

/* ---------- 17. Scroll-reveal system (GSAP hooks) --------------------------------- */
.reveal { opacity: 0; transform: translateY(36px); }
.reveal-fade { opacity: 0; }
.reveal-scale { opacity: 0; transform: scale(.94); }
/* JS flips these via GSAP; this no-JS fallback keeps content visible if the script fails to load */
.no-js .reveal, .no-js .reveal-fade, .no-js .reveal-scale { opacity: 1; transform: none; }

/* ---------- 18. Responsive: header/mega collapse to mobile nav -------------------- */
@media (max-width: 959px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }

  /* Deep-navy fullscreen takeover, not a white collapsed dropdown —
     matches the site's own executive-CTA/hero navy rather than a generic
     mobile menu, and gives the large nav text below real contrast. */
  .mobile-nav {
    display: block; position: fixed; inset: var(--header-h) 0 0 0; background: #082B49; z-index: 90;
    transform: translateX(100%); transition: transform .35s cubic-bezier(.22,.61,.36,1); overflow-y: auto;
  }
  .mobile-nav.is-open { transform: translateX(0); }
  .mobile-nav-inner { display: flex; flex-direction: column; min-height: 100%; padding: 8px clamp(20px,5vw,32px) 28px; }
  .mobile-nav-list { flex: 1 1 auto; }
  .mobile-nav-trigger {
    width: 100%; display: flex; justify-content: space-between; align-items: center; padding-block: 18px;
    border-bottom: 1px solid rgba(255,255,255,.12); font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.35rem, 6vw, 1.9rem); color: #fff;
  }
  .mobile-nav-trigger svg { color: var(--orange); transition: transform .25s ease; flex-shrink: 0; }
  .mobile-nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
  .mobile-nav-sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .mobile-nav-sub li { border-bottom: 1px solid rgba(255,255,255,.08); }
  .mobile-nav-sub a, .mobile-viewall { display: block; padding: 14px 10px; font-size: .95rem; color: #AEBBD0; }
  .mobile-nav-sub a::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); margin-right: 10px; vertical-align: middle; opacity: .7; }
  .mobile-viewall { color: var(--orange); font-weight: 700; }

  .mobile-nav-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
  .mobile-nav-social { display: flex; gap: 10px; }
  .mobile-nav-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; transition: background .2s ease, color .2s ease; }
  .mobile-nav-social a:hover { background: var(--orange); }
  .mobile-nav-footer .btn-orange { flex: 1 1 auto; justify-content: center; }
}

/* ---------- 19. About Us page ---------------------------------------------------- */
/* Hero, CTA group and executive CTA reuse .sol-hero-* / .pprod-hero-ctas /
   .pprod-cta-* as-is; Our Purpose and Why Choose Us reuse .pprod-feature*
   patterns for their copy+cards split. Everything below is net-new:
   the mission/vision/values/promise mini-cards, the stat strip,
   leadership cards, the global-presence map and the trust-badge row. */

/* --- Our Purpose: 4 compact pillar cards (Mission/Vision/Values/Promise) --- */
.abt-purpose { padding-block: clamp(64px, 8vw, 112px); background: #fff; }
.abt-purpose-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); align-items: start; }
/* Single column below 420px — two 24px-padded cards side by side left only
   ~130px of usable width each on a small phone, cramping the icon/heading/
   copy stack; one column keeps every card readable at any width. */
.abt-pillar-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.abt-pillar-card {
  padding: 24px 18px; border-radius: 20px; text-align: center; background: var(--color-bg-surface);
  border: 1px solid var(--color-border-hairline); transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1), background .3s cubic-bezier(.22,.61,.36,1);
}
.abt-pillar-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(232,74,10,.25); box-shadow: var(--shadow-sm); }
.abt-pillar-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #EAF1F8; color: var(--color-navy); margin-bottom: 14px; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.abt-pillar-card:hover .abt-pillar-icon { transform: rotate(-6deg); }
.abt-pillar-card h3 { font-family: var(--font-display); font-weight: 700; font-size: .96rem; color: var(--color-navy); margin-bottom: 8px; }
.abt-pillar-card p { font-size: .8rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); }

/* --- Stat strip: single bordered bar, 5 equal columns --- */
/* Reuses .solx-trust/.solx-trust-item from the homepage's floating trust
   bar (§11) wholesale — this modifier only adds the spacing that section
   needs above it and widens the desktop grid from 4 to 5 columns for the
   extra stat. */
/* .abt-purpose-grid is a 2-col grid at 1024px+ — as this section's 3rd
   direct child it was falling into column 1 (the same narrow width as the
   copy text) instead of spanning both columns, which pinned it left and
   undersized. grid-column spans the full row; max-width + auto margins
   then center a readable-width bar within that full-width row. */
/* No max-width cap — matches the homepage trust bar's own width (the full
   container-wide measure, like .trust-wrap), not an artificially narrower
   card. */
.abt-stat-strip { grid-column: 1 / -1; margin-top: clamp(48px, 6vw, 72px); }
/* .solx-trust's inherited 2-col grid (<860px) leaves this strip's 5th item
   alone on its own row, left-aligned with a dead cell beside it — the same
   orphan-item bug fixed elsewhere this session (Industries archive cards,
   the executive profile's Areas of Expertise). Flex+center instead. */
.abt-stat-strip { display: flex; flex-wrap: wrap; justify-content: center; }
/* min-width:0 — flex items default to min-width:auto, which stops them
   shrinking below their own content's intrinsic width; two-word labels
   like "Global Customers" were wider than the 45% column they were meant
   to wrap into, so each item quietly claimed a full row instead of the 2
   this basis calls for. */
.abt-stat-strip .solx-trust-item { flex: 0 1 45%; min-width: 0; }
.abt-stat-strip .solx-trust-item strong { font-size: clamp(1.4rem, 2.2vw, 1.7rem); }

/* --- Leadership --- */
.abt-leaders { padding-block: clamp(64px, 8vw, 112px); background: var(--color-bg-surface); }
.abt-leader-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.abt-leader-card { background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--color-border-hairline); box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1); }
.abt-leader-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.abt-leader-photo { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, #0A3153 0%, #082B49 55%, #051F38 100%); overflow: hidden; }
.abt-leader-photo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(241,90,36,.18), transparent 55%); }
.abt-leader-initials { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: #fff; letter-spacing: .02em; transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.abt-leader-card:hover .abt-leader-initials { transform: scale(1.08); }
.abt-leader-body { padding: 20px 20px 22px; }
.abt-leader-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-navy); margin-bottom: 2px; }
.abt-leader-body h3 a { color: inherit; transition: color .2s ease; }
.abt-leader-body h3 a:hover { color: var(--color-orange-start); }
.abt-leader-role { display: block; font-size: .8rem; font-weight: 600; color: var(--color-orange-start); margin-bottom: 10px; }
.abt-leader-body p { font-size: .84rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); margin-bottom: 14px; }
.abt-leader-linkedin { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-navy); color: #fff; transition: background .25s ease, transform .25s ease; }
.abt-leader-linkedin:hover { background: var(--color-orange-start); transform: translateY(-2px); }

/* --- Why Choose Us: reuses .pprod-feature-grid/-copy/-cards/-card,
       just under a page-local wrapper for the section's own background. --- */
.abt-why { padding-block: clamp(64px, 8vw, 112px); background: #fff; }

/* --- Global Presence --- */
.abt-presence { position: relative; overflow: hidden; padding-block: clamp(64px, 8vw, 112px); background: #082B49; }
.abt-presence-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.abt-presence-copy .pprod-feature-title { color: #fff; }
.abt-presence-copy .pprod-feature-desc { color: #AEBBD0; }
.abt-presence-list { display: grid; gap: 18px; margin-top: 24px; }
.abt-presence-item { display: flex; align-items: flex-start; gap: 12px; }
.abt-presence-item-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: var(--color-orange-start); }
.abt-presence-item strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: #fff; }
.abt-presence-item span { font-size: .82rem; color: #AEBBD0; }
/* Matches the real map's own aspect ratio (1602.71x741.71, ~2.16:1) so the
   SVG fills edge-to-edge with no preserveAspectRatio letterboxing — the
   pins below are positioned by top/left % against this container, and any
   letterbox gap would throw that math off from the visible coastlines. */
.abt-presence-map { position: relative; aspect-ratio: 2.161 / 1; }
.abt-presence-map svg { display: block; width: 100%; height: 100%; opacity: .6; }
.abt-pin { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--color-orange-start); box-shadow: 0 0 0 5px rgba(232,74,10,.22); animation: ccMarkerBlink 2.8s ease-in-out infinite; }
.abt-pin-label { position: absolute; transform: translate(10px, -6px); font-size: .68rem; font-weight: 600; color: #fff; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* Six cities packed into a narrow mobile map put their labels close enough
   together to overlap into an unreadable cluster — below the point they'd
   fit, just the blinking dots carry the "we're everywhere" message. */
@media (max-width: 639px) { .abt-pin-label { display: none; } }

/* --- Trust badges --- */
.abt-trust { padding-block: clamp(48px, 6vw, 80px); background: var(--color-bg-surface); }
.abt-trust-head { max-width: 620px; }
/* Grid, not flex-wrap — flex-wrap left-aligns whatever's left on the final
   row (5 items at 2-per-row leaves 1 orphan pinned left, reading ragged on
   mobile); a grid keeps every row's columns evenly filled instead. */
.abt-trust-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; margin-top: clamp(28px, 4vw, 40px); }
.abt-badge { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; opacity: .82; transition: opacity .25s ease, transform .25s ease; }
.abt-badge:hover { opacity: 1; transform: translateY(-3px); }
.abt-badge-icon { color: var(--color-navy); }
.abt-badge span { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-steel-grey); }

@media (min-width: 420px)  { .abt-pillar-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px)  { .abt-leader-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 560px)  { .abt-trust-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .abt-stat-strip .solx-trust-item { flex-basis: 28%; } }
@media (min-width: 860px)  { .abt-presence-grid { grid-template-columns: 5fr 7fr; gap: 48px; } .abt-trust-row { grid-template-columns: repeat(5, 1fr); } .abt-stat-strip .solx-trust-item { flex-basis: 18%; } }
@media (min-width: 1024px) { .abt-purpose-grid { grid-template-columns: 5fr 7fr; } .abt-why .pprod-feature-grid { grid-template-columns: 5fr 7fr; } }
/* Below the trust bar's own 860px breakpoint (desktop: vertical dividers,
   items in one row), it falls back to .solx-trust's 2-col grid with no
   divider at all — horizontal rules between the stacked rows instead give
   the same "grouped, not just floating" read at phone/tablet widths. */
@media (max-width: 859px) {
  .abt-stat-strip { padding: clamp(20px, 4vw, 32px); }
  .abt-stat-strip .solx-trust-item { padding-top: 16px; padding-bottom: 16px; border-top: 1px solid var(--color-border-hairline); }
  .abt-stat-strip .solx-trust-item:nth-child(-n+2) { border-top: 0; padding-top: 8px; }
}
@media (min-width: 1180px) { .abt-leader-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 20. Products archive page -------------------------------------------- */

/* --- Hero: photo + navy scrim, same technique as Command Centre/Footer --- */
.parch-hero { position: relative; overflow: hidden; min-height: clamp(440px, 52vw, 560px); display: flex; align-items: center; }
.parch-hero-bg { position: absolute; inset: 0; z-index: 0; }
.parch-hero-bg picture, .parch-hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 45%; }
.parch-hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, #082B49 0%, rgba(8,43,73,.92) 38%, rgba(8,43,73,.55) 62%, rgba(8,43,73,.15) 100%); }
.parch-hero-node { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--color-orange-start); box-shadow: 0 0 0 5px rgba(232,74,10,.22); animation: ccMarkerBlink 2.8s ease-in-out infinite; }
.parch-hero-node:nth-child(3) { animation-delay: .5s; } .parch-hero-node:nth-child(4) { animation-delay: 1s; }

/* width:100% is load-bearing here, not decorative — .parch-hero is a flex
   container (for align-items:center), and a flex item's block child
   doesn't automatically fill the line the way it would in normal flow; it
   shrinks to fit its own content instead. Without this, .container-wide's
   max-width:1480px was a ceiling that never got reached — the column sized
   itself to its text (~768px) and stopped there, well short of 1480px. */
.parch-hero-inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(56px, 8vw, 96px); }
.parch-hero-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-orange-start); margin-bottom: var(--space-2);
}
.parch-hero-eyebrow::before { content: ''; width: 0; height: 0; flex-shrink: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--color-orange-start); }
/* No max-width here — the markup already forces the 2-line break with an
   explicit <br>. A ch-based cap on top of that (14ch) was redundant and,
   at the 72px ceiling this clamp() hits on wide viewports, too narrow for
   "For Fleet Operations" to fit on its own line — it wrapped a 3rd time
   and ballooned the whole hero's height along with it. */
.parch-hero-title { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: clamp(36px, 4.6vw, 72px); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.parch-hero-rule { display: block; width: 48px; height: 3px; margin-top: var(--space-3); background: var(--gradient-accent); border-radius: var(--radius-sm); }
.parch-hero-lede { font-size: 1.02rem; line-height: var(--leading-relaxed); color: #C3CEDB; max-width: 46ch; margin: var(--space-3) 0 var(--space-4); }

/* --- Ecosystem intro transition --- */
.parch-intro { padding-block: clamp(56px, 7vw, 88px); background: #fff; border-bottom: 1px solid var(--color-border-hairline); }
.parch-intro-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.parch-intro-divider { display: block; width: 100%; height: 2px; background: linear-gradient(90deg, var(--color-orange-start), var(--color-border-hairline)); transform-origin: left center; }
.parch-intro-copy { font-size: 1rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); max-width: 52ch; }

/* --- Cards: 3 + 2-larger on desktop, 2-col tablet, 1-col mobile --- */
.parch-cards-section { padding-block: clamp(56px, 7vw, 96px); background: var(--color-bg-surface); }
.parch-cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
.parch-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 32px 28px 28px; border-radius: 24px; background: #fff;
  border: 1px solid var(--color-border-hairline); box-shadow: var(--shadow-sm);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1);
}
.parch-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: rgba(232,74,10,.25); }
.parch-card:hover .parch-card-icon { transform: rotate(-6deg); background: var(--orange-tint); }
.parch-card:hover .parch-card-accent { transform: scaleX(1); }
.parch-card:hover .parch-card-link svg { transform: translateX(4px); }
.parch-card-icon {
  width: 64px; height: 64px; border-radius: 50%; background: #EAF1F8; color: var(--color-navy);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), background .35s cubic-bezier(.22,.61,.36,1);
}
.parch-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; color: var(--color-navy); margin-bottom: 8px; }
.parch-card > p { font-size: .92rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); margin-bottom: 20px; }
.parch-card-bullets { display: grid; gap: 4px; margin-bottom: 22px; flex-grow: 1; }
.parch-card-bullets li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 7px; font-size: .86rem; color: var(--color-navy); border-top: 1px solid var(--color-border-hairline); }
.parch-card-bullets li:first-child { border-top: 0; }
.parch-card-bullets svg { flex-shrink: 0; color: var(--color-orange-start); }
.parch-card-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: .88rem; color: var(--color-orange-start); }
.parch-card-link svg { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.parch-card-accent { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gradient-accent); transform: scaleX(.28); transform-origin: left; transition: transform .35s cubic-bezier(.22,.61,.36,1); }

/* --- Connected platform hub --- */
.parch-platform { position: relative; overflow: hidden; padding-block: clamp(64px, 8vw, 110px); background: linear-gradient(180deg, #062544, #041A31); }
.parch-platform-bg { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.parch-platform-map { position: absolute; inset: 0; opacity: .5; }
.parch-platform-map svg { width: 100%; height: 100%; }
.parch-platform-map .dotmap-land { fill: rgba(255,255,255,.14); }
.parch-platform-rings { width: min(720px, 90%); height: auto; animation: ccBgSpin 160s linear infinite; }
.parch-platform-head { position: relative; z-index: 1; text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: clamp(40px, 6vw, 72px); }
.parch-platform-eyebrow { position: relative; display: inline-block; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-orange-start); margin-bottom: 12px; padding-bottom: 12px; }
.parch-platform-eyebrow::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--color-orange-start); }
.parch-platform-title { color: #fff; margin-bottom: 14px; }
.parch-platform-sub { font-size: .98rem; line-height: var(--leading-relaxed); color: #AEBBD0; }

.parch-hub-wrap { position: relative; z-index: 1; max-width: 1100px; margin-inline: auto; aspect-ratio: 11 / 7; }
.parch-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Path length here is in the 0-100 viewBox's own coordinate space (the
   longest line, hub-centre to a node, is ~29 units) — 40 covers every line
   with margin, not a real "px" measurement. */
.parch-hub-link, .parch-hub-spur { stroke: rgba(255,255,255,.22); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 40; stroke-dashoffset: 40; }
/* Plain HTML dot, not an SVG <circle> — the lines above live inside an SVG
   whose viewBox is deliberately stretched non-uniformly
   (preserveAspectRatio="none") to track this wrap's own aspect ratio; a
   circle in that same coordinate space inherits the stretch and renders as
   a visible ellipse. A dot positioned by ordinary top/left % sits in the
   same spot without going through that distortion. */
.parch-hub-dot {
  position: absolute; z-index: 2; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--color-orange-start); transform-origin: center;
}

.parch-hub-center {
  position: absolute; top: 50%; left: 50%; z-index: 2; width: 21%; aspect-ratio: 1; margin: -10.5% 0 0 -10.5%;
  border-radius: 50%; border: 1.5px solid var(--color-orange-start); background: rgba(8,43,73,.6);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
/* Sized directly as a % of .parch-hub-center's own width, not via padding
   on the container — percentage padding always resolves against the
   CONTAINING BLOCK's width (.parch-hub-wrap, ~5x bigger here), not the
   padded element's own box, so the "inset" it was meant to create instead
   consumed the entire circle and squeezed the logo to 0 width. */
.parch-hub-center img { display: block; width: 62%; height: auto; }

.parch-hub-node {
  position: absolute; z-index: 2; width: 15%; aspect-ratio: 1; margin: -7.5% 0 0 -7.5%;
  border-radius: 50%; background: #fff; box-shadow: 0 16px 34px -12px rgba(0,0,0,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0; transform-origin: center;
}
/* clamp(), not a % of the node — the node itself is already sized as a %
   of the wrap, and percentage-sizing the icon against a flex-item parent
   that has no explicit width of its own resolves unreliably. Tied to
   viewport width instead, same mechanism as the node label below it, and
   large enough at desktop widths to match the homepage's node icon
   weight instead of sitting lost in the middle of a much bigger circle. */
.parch-hub-node-icon { display: flex; }
.parch-hub-node-icon svg, .parch-hub-node-icon .icon-png { width: clamp(24px, 2.6vw, 42px); height: clamp(24px, 2.6vw, 42px); }
.parch-hub-node-label { font-family: var(--font-display); font-weight: 700; font-size: clamp(.68rem, 1vw, .82rem); color: var(--color-navy); }

.parch-hub-text { position: absolute; z-index: 2; width: 17%; }
.parch-hub-text--right { text-align: left; }
.parch-hub-text--left { text-align: right; }
.parch-hub-text strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: #fff; margin-bottom: 4px; }
.parch-hub-text p { font-size: .8rem; line-height: 1.5; color: #AEBBD0; }

.parch-platform-band {
  position: relative; z-index: 1; margin-top: clamp(32px, 5vw, 56px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 22px 28px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
}
.parch-platform-band-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(241,90,36,.12); display: flex; align-items: center; justify-content: center; }
.parch-platform-band p { flex: 1 1 260px; font-size: .96rem; line-height: 1.5; color: #fff; }
.parch-platform-band-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--color-orange-start); margin-left: auto; }
.parch-platform-band-link svg { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.parch-platform-band-link:hover svg { transform: translateX(4px); }

/* Below ~860px the hexagon's side text blocks have nowhere to fit without
   overlapping — dropped outright rather than reflowed into a redundant
   list, since every node already carries its own label (PMS/IT/Software/
   Data/Cloud/Mobile) inside the circle. The diagram itself (nodes,
   connector lines and dots, centre logo) stays exactly as-is, just
   naturally smaller at the narrower viewport since its whole layout is
   already %-based. */
@media (max-width: 859px) {
  .parch-hub-wrap { aspect-ratio: 1 / 1; max-width: 460px; }
  .parch-hub-text { display: none; }
  /* Bigger circle, tighter label — at 15% (the desktop size) "Software",
     the longest of the six, measured 41px against a 44px circle: it fits
     the bounding box but a circle's usable chord narrows away from its
     vertical centre (where the label sits, below the icon), so it visibly
     ran past the round edge on both sides. */
  .parch-hub-node { width: 19%; gap: 2px; }
  .parch-hub-node-icon svg, .parch-hub-node-icon .icon-png { width: clamp(18px, 5vw, 26px); height: clamp(18px, 5vw, 26px); }
  .parch-hub-node-label { font-size: clamp(.56rem, 2.1vw, .68rem); letter-spacing: -.01em; }
}

@media (min-width: 640px)  { .parch-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .parch-intro-grid { grid-template-columns: 1fr 2px 1fr; gap: 40px; } }
@media (min-width: 1024px) {
  .parch-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .parch-card { grid-column: span 2; }
  .parch-card--wide { grid-column: span 3; }
}

@media (prefers-reduced-motion: reduce) {
  .parch-hero-node { animation: none; }
  .parch-platform-bg svg { animation: none; }
}

/* ---------- 21. Product page template -------------------------------------------- */

/* --- Shared bits reused across this template's sections --- */
.pprod-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-orange-start);
  margin-bottom: 10px;
}
.pprod-eyebrow::before { content: ''; width: 0; height: 0; flex-shrink: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--color-orange-start); }
.pprod-eyebrow--center { justify-content: center; }
.pprod-rule { display: block; width: 44px; height: 3px; margin-bottom: 18px; background: var(--gradient-accent); border-radius: var(--radius-sm); }
.pprod-tick-list { display: grid; gap: 12px; margin-top: 22px; }
.pprod-tick-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: var(--color-navy); line-height: 1.4; }
.pprod-tick-list svg { flex-shrink: 0; margin-top: 2px; }
.pprod-btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  padding: 13px 22px; border-radius: var(--radius-lg); border: 1.5px solid rgba(255,255,255,.35); color: #fff;
  transition: transform var(--duration-base) var(--ease-signal), border-color var(--duration-base) var(--ease-signal), background var(--duration-base) var(--ease-signal);
}
.pprod-btn-outline:hover { transform: translateY(-3px); border-color: #fff; background: rgba(255,255,255,.08); }

/* --- Hero --- */
.pprod-hero { position: relative; overflow: hidden; }
.pprod-hero-bg { position: absolute; inset: 0; z-index: 0; }
.pprod-hero-bg picture, .pprod-hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 45%; }
.pprod-hero-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, #082B49 0%, rgba(8,43,73,.93) 42%, rgba(8,43,73,.6) 68%, rgba(8,43,73,.2) 100%); }
.pprod-hero-inner { position: relative; z-index: 1; padding-block: clamp(48px, 7vw, 80px) 0; width: 100%; }
.pprod-hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; min-height: clamp(360px, 44vw, 560px); }
.pprod-hero-eyebrow { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-orange-start); margin-bottom: 12px; }
.pprod-hero-title { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: clamp(34px, 4.4vw, 64px); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin-bottom: 18px; }
.pprod-hero-lede { font-size: 1.02rem; line-height: var(--leading-relaxed); color: #C3CEDB; max-width: 46ch; margin-bottom: 28px; }
.pprod-hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }

/* --- Floating dashboard mockup --- */
.pprod-mockup { position: relative; max-width: 460px; margin-inline: auto; width: 100%; animation: pprodFloat 6s ease-in-out infinite; }
.pprod-mockup-main { background: #fff; border-radius: 18px; box-shadow: 0 30px 60px -18px rgba(0,0,0,.5); padding: 20px; }
.pprod-mockup-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--color-navy); margin-bottom: 16px; }
.pprod-mockup-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-orange-start); }
.pprod-mockup-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.pprod-mockup-stats div { padding: 10px; border-radius: 10px; background: var(--color-bg-surface); text-align: center; }
.pprod-mockup-stats strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--color-navy); }
.pprod-mockup-stats span { display: block; font-size: .64rem; color: var(--color-steel-grey); margin-top: 2px; }
.pprod-mockup-chart { display: flex; align-items: center; gap: 18px; }
.pprod-donut { width: 72px; height: 72px; flex-shrink: 0; }
.pprod-mockup-list { flex: 1 1 auto; display: grid; gap: 8px; }
.pprod-mockup-list div { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--color-navy); }
.pprod-mockup-list span { width: 7px; height: 7px; border-radius: 50%; background: #2FB675; flex-shrink: 0; }
.pprod-mockup-list span.is-warn { background: var(--color-orange-start); }
.pprod-mockup-phone {
  position: absolute; right: -6%; bottom: -14%; width: 46%; padding: 16px;
  background: #082B49; border-radius: 16px; box-shadow: 0 24px 44px -16px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.1);
}
.pprod-mockup-phone-head { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: #93A7BA; margin-bottom: 6px; }
.pprod-mockup-phone strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: #fff; margin-bottom: 8px; }
.pprod-mockup-chip { display: inline-block; padding: 3px 9px; border-radius: 20px; background: rgba(241,90,36,.18); color: var(--color-orange-start); font-size: .6rem; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.pprod-mockup-phone-desc { font-size: .7rem; color: #AEBBD0; line-height: 1.4; }
@keyframes pprodFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* --- Benefits strip --- */
.pprod-benefits { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 20px; padding-block: clamp(32px, 5vw, 48px); margin-top: clamp(24px, 4vw, 40px); border-top: 1px solid rgba(255,255,255,.12); }
.pprod-benefit { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid transparent; transition: border-color .25s ease; }
.pprod-benefit:hover { border-color: var(--color-orange-start); }
.pprod-benefit-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
.pprod-benefit > span:last-child { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: #fff; }

/* --- Feature overview --- */
.pprod-feature { padding-block: clamp(64px, 8vw, 112px); background: #fff; }
.pprod-feature-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
.pprod-feature-title { margin-bottom: 16px; }
.pprod-feature-desc { font-size: 1rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); max-width: 50ch; }

.pprod-feature-cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
.pprod-feature-card {
  position: relative; overflow: hidden; padding: 26px 24px; border-radius: 22px;
  background: #fff; border: 1px solid var(--color-border-hairline); box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1);
}
.pprod-feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(232,74,10,.25); }
.pprod-feature-card:hover .pprod-feature-card-icon { transform: rotate(-6deg); background: var(--orange-tint); }
.pprod-feature-card-icon {
  width: 56px; height: 56px; border-radius: 50%; background: #EAF1F8; color: var(--color-navy);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s cubic-bezier(.22,.61,.36,1);
}
.pprod-feature-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-navy); margin-bottom: 6px; }
.pprod-feature-card p { font-size: .86rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); }
.pprod-feature-card-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-accent); }

/* --- Module showcase --- */
.pprod-modules { padding-block: clamp(56px, 7vw, 96px); background: var(--color-bg-surface); text-align: center; }
.pprod-modules-head { max-width: 560px; margin-inline: auto; margin-bottom: clamp(32px, 5vw, 48px); }
.pprod-modules-title { margin-bottom: 10px; }
.pprod-modules-sub { font-size: .95rem; color: var(--color-steel-grey); }
.pprod-module-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 32px; }
.pprod-module { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 10px; }
.pprod-module-icon { width: 68px; height: 68px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; }
.pprod-module-label { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-navy); padding-bottom: 6px; }
.pprod-module-label::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; background: var(--color-orange-start); transition: width .25s ease, left .25s ease; }
.pprod-module:hover .pprod-module-label::after { width: 100%; left: 0; }
.pprod-modules-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--color-orange-start); }
.pprod-modules-link svg { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.pprod-modules-link:hover svg { transform: translateX(4px); }

/* --- Connected ecosystem (reuses .eco-* from the homepage Ecosystem diagram) --- */
.pprod-ecosystem { position: relative; overflow: hidden; padding-block: clamp(64px, 8vw, 112px); background: #fff; }
.pprod-ecosystem-bg { position: absolute; inset: 0; z-index: 0; opacity: .05; display: flex; align-items: center; justify-content: flex-end; }
.pprod-ecosystem-bg svg { width: 80%; height: 100%; }
.pprod-ecosystem-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }

/* --- Executive CTA --- */
.pprod-cta { position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 88px); background: #082B49; }
.pprod-cta-bg { position: absolute; inset: 0; z-index: 0; }
.pprod-cta-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pprod-cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.pprod-cta-eyebrow { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-orange-start); margin-bottom: 12px; }
.pprod-cta-title { color: #fff; margin-bottom: 12px; }
.pprod-cta-desc { font-size: .95rem; line-height: var(--leading-relaxed); color: #AEBBD0; max-width: 48ch; }
.pprod-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pprod-cta-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--color-orange-start); }
.pprod-cta-link svg { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.pprod-cta-link:hover svg { transform: translateX(4px); }

@media (min-width: 640px)  { .pprod-module-row { grid-template-columns: repeat(3, 1fr); } .pprod-cta-actions { align-items: center; } }
@media (min-width: 860px)  {
  .pprod-hero-grid { grid-template-columns: 1.05fr .95fr; }
  .pprod-feature-grid { grid-template-columns: 5fr 7fr; }
  .pprod-feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pprod-ecosystem-grid { grid-template-columns: 5fr 7fr; gap: 40px; }
  .pprod-cta-inner { grid-template-columns: 1fr auto; }
  .pprod-cta-actions { align-items: flex-end; }
}
@media (min-width: 1080px) { .pprod-module-row { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1180px) { .pprod-benefits { grid-template-columns: repeat(4, 1fr); } .pprod-feature-cards { max-width: 640px; margin-left: auto; } }

@media (prefers-reduced-motion: reduce) {
  .pprod-mockup { animation: none; }
}

/* ---------- 22. Solutions archive page -------------------------------------------- */

/* --- Hero (same photo+scrim technique as the Products archive hero) --- */
.sol-hero { position: relative; overflow: hidden; min-height: clamp(420px, 48vw, 540px); display: flex; align-items: center; }
.sol-hero-bg { position: absolute; inset: 0; z-index: 0; }
.sol-hero-bg picture, .sol-hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 45%; }
.sol-hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, #082B49 0%, rgba(8,43,73,.92) 38%, rgba(8,43,73,.55) 62%, rgba(8,43,73,.15) 100%); }
.sol-hero-node { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--color-orange-start); box-shadow: 0 0 0 5px rgba(232,74,10,.22); animation: ccMarkerBlink 2.8s ease-in-out infinite; }
.sol-hero-node:nth-child(3) { animation-delay: .5s; } .sol-hero-node:nth-child(4) { animation-delay: 1s; }
/* No max-width override here — that centered the block at 760px inside the
   full viewport instead of aligning it to container-wide's shared 1480px
   envelope, so the hero content sat inset further right than the filter
   pills/cards below it (left:620 vs left:260 at a 2000px viewport). H1 wrap
   is controlled by its own <br>, and .sol-hero-lede caps at 46ch already. */
.sol-hero-inner { position: relative; z-index: 1; padding-block: clamp(48px, 7vw, 76px); width: 100%; }
/* Single canonical breadcrumb across every dark-hero page on the site —
   Products archive (.parch-breadcrumb) and the Product/Solution templates
   (.pprod-breadcrumb) used to duplicate this same block under their own
   names, and .parch-breadcrumb's copy never got the current-page
   highlight the other two had, so "Digital Transformation" read bold
   orange on solution pages but the archive's current crumb stayed plain
   grey. Consolidated to this one class; the other two are gone. */
.sol-breadcrumb { font-size: .82rem; color: #AEBBD0; margin-bottom: clamp(20px, 3vw, 32px); }
.sol-breadcrumb a { color: #AEBBD0; transition: color .2s ease; } .sol-breadcrumb a:hover { color: #fff; }
.sol-breadcrumb span[aria-hidden] { margin: 0 6px; }
.sol-breadcrumb > span:last-child { color: var(--color-orange-start); font-weight: 600; }
.sol-hero-eyebrow { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-orange-start); margin-bottom: 12px; }
.sol-hero-title { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: clamp(34px, 4.4vw, 64px); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.sol-hero-rule { display: block; width: 48px; height: 3px; margin-top: var(--space-3); background: var(--gradient-accent); border-radius: var(--radius-sm); }
.sol-hero-lede { font-size: 1.02rem; line-height: var(--leading-relaxed); color: #C3CEDB; max-width: 46ch; margin: var(--space-3) 0 var(--space-4); }

/* --- Category filters --- */
.sol-grid-section { padding-block: clamp(64px, 8vw, 112px); background: #fff; }
.sol-grid-head { text-align: center; max-width: 560px; margin-inline: auto; margin-bottom: clamp(24px, 3vw, 32px); }
/* overflow-x:auto with no overflow-y set forces overflow-y to compute as
   auto too (the "both axes non-visible" rule) — the active pill's glow
   ring plus its hover-lift translateY were getting clipped flat along the
   top edge because there was padding to absorb that on the bottom only. */
.sol-filters { display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 10px; margin-bottom: clamp(32px, 5vw, 48px); padding: 6px 2px 4px; scrollbar-width: none; }
.sol-filters::-webkit-scrollbar { display: none; }
.sol-filter {
  flex-shrink: 0; font-family: var(--font-body); font-weight: 600; font-size: .86rem; color: var(--color-navy);
  padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--color-border-hairline); background: #fff;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sol-filter:hover { background: var(--color-bg-surface); }
.sol-filter.is-active { border-color: var(--color-orange-start); box-shadow: 0 0 0 4px rgba(232,74,10,.12); transform: translateY(-1px); color: var(--color-orange-start); }

/* --- Solution cards --- */
.sol-cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
.sol-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 30px 26px 26px; border-radius: 24px; background: #fff;
  border: 1px solid var(--color-border-hairline); box-shadow: var(--shadow-sm);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.sol-card.is-hidden { display: none; }
.sol-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: rgba(232,74,10,.25); }
.sol-card:hover .sol-card-icon { transform: rotate(-6deg); background: var(--orange-tint); }
.sol-card:hover .sol-card-accent { transform: scaleX(1); }
.sol-card:hover .sol-card-arrow-top { transform: translate(3px, -3px); background: var(--color-orange-start); border-color: var(--color-orange-start); color: #fff; }
.sol-card-icon {
  width: 60px; height: 60px; border-radius: 50%; background: #EAF1F8; color: var(--color-navy);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), background .35s cubic-bezier(.22,.61,.36,1);
}
.sol-card-arrow-top {
  position: absolute; top: 26px; right: 26px; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--color-border-hairline); color: var(--color-orange-start);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), background .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1), color .35s cubic-bezier(.22,.61,.36,1);
}
.sol-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--color-navy); margin-bottom: 8px; }
.sol-card > p { font-size: .9rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); margin-bottom: 18px; }
.sol-card-bullets { display: grid; gap: 4px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-border-hairline); }
.sol-card-bullets li { display: flex; align-items: center; gap: 8px; padding-block: 4px; font-size: .82rem; color: var(--color-navy); }
.sol-card-bullets svg { flex-shrink: 0; }
.sol-card-accent { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gradient-accent); transform: scaleX(.28); transform-origin: left; transition: transform .35s cubic-bezier(.22,.61,.36,1); }

/* --- Value strip: floating panel --- */
.sol-values { padding-bottom: clamp(56px, 7vw, 96px); background: #fff; }
.sol-values-panel {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border-hairline);
  padding: clamp(28px, 4vw, 40px);
}
.sol-value { display: flex; align-items: flex-start; gap: 14px; }
.sol-value-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: #EAF1F8; color: var(--color-navy); display: flex; align-items: center; justify-content: center; }
.sol-value strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: .96rem; color: var(--color-navy); margin-bottom: 4px; }
.sol-value p { font-size: .84rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); }

/* --- Executive CTA --- */
.sol-cta { position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 88px); background: #082B49; }
.sol-cta-bg { position: absolute; inset: 0; z-index: 0; }
.sol-cta-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sol-cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.sol-cta-eyebrow { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-orange-start); margin-bottom: 12px; }
.sol-cta-title { color: #fff; margin-bottom: 12px; }
.sol-cta-desc { font-size: .95rem; line-height: var(--leading-relaxed); color: #AEBBD0; max-width: 48ch; }
.sol-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

@media (min-width: 640px)  { .sol-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sol-values-panel { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .sol-cta-inner { grid-template-columns: 1fr auto; } }
@media (min-width: 1024px) { .sol-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .sol-values-panel { grid-template-columns: repeat(4, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .sol-hero-node { animation: none; }
}

/* ---------- 24. Industries archive page -------------------------------------------- */
/* Hero and Executive CTA reuse .sol-hero-* / .sol-cta-* as-is (see the doc
   comment at the top of includes/industries/archive.php) — only the
   illustrated industry grid and the plain icon-row benefits strip below
   are new. */

.ind-grid-section { padding-block: clamp(64px, 8vw, 112px); background: #fff; }
.ind-grid-head { max-width: 560px; margin-inline: auto; text-align: center; margin-bottom: clamp(32px, 5vw, 48px); }

/* 3 columns at desktop (not the reference's 4) — 5 real industries lay out
   3+2, evenly balanced; 4 columns would leave a single orphan card
   stretched alone on its own row. */
/* flex + wrap, not a fixed-column grid — 5 cards on a 3-col grid leaves the
   last row's 2 cards pinned left with a dangling empty third cell (the
   "spacing" bug flagged on this row); flex-wrap with justify-content:center
   centers whatever's left on the final row instead. */
.ind-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.ind-card { flex: 0 1 100%; }
.ind-card {
  position: relative; padding: 32px 28px; border-radius: 24px; overflow: hidden;
  background: #fff; border: 1px solid var(--color-border-hairline); box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1);
}
.ind-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: rgba(232,74,10,.25); }
.ind-card-illo { display: block; margin-bottom: 20px; transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.ind-card:hover .ind-card-illo { transform: translateY(-6px); }
.ind-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--color-navy); margin-bottom: 8px; }
.ind-card p { font-size: .9rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); margin-bottom: 18px; }
.ind-card-link { display: inline-flex; align-items: center; gap: 8px; position: relative; padding-bottom: 4px; font-weight: 700; font-size: .88rem; color: var(--color-orange-start); }
.ind-card-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--color-orange-start); transition: width .25s ease; }
.ind-card:hover .ind-card-link::after { width: 100%; }
.ind-card-link svg { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.ind-card:hover .ind-card-link svg { transform: translateX(4px); }

/* --- Cross-industry benefits (plain icon row, not a boxed panel) --- */
.ind-benefits { padding-block: clamp(56px, 7vw, 96px); background: var(--color-bg-surface); }
.ind-benefits-head { max-width: 560px; margin-inline: auto; text-align: center; margin-bottom: clamp(32px, 5vw, 48px); }
.ind-benefit-row { display: grid; grid-template-columns: 1fr; gap: 28px; text-align: center; }
.ind-benefit { padding: 8px; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.ind-benefit:hover { transform: translateY(-6px); }
.ind-benefit-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); color: var(--color-navy); margin-bottom: 16px; }
.ind-benefit strong { position: relative; display: block; padding-bottom: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-navy); margin-bottom: 8px; }
.ind-benefit strong::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 28px; height: 2px; background: var(--color-orange-start); }
.ind-benefit p { font-size: .86rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); }

@media (min-width: 640px)  { .ind-card { flex-basis: calc(50% - 12px); } .ind-benefit-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ind-card { flex-basis: calc(33.333% - 16px); } }
@media (min-width: 1180px) { .ind-benefit-row { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 25. Industry page template -------------------------------------------- */
/* Hero, challenges grid, connected ecosystem and executive CTA all reuse
   existing .sol-hero-* / .pprod-feature-* / .pprod-ecosystem-* / .eco-* /
   .pprod-cta-* classes as-is (see the doc comment at the top of
   includes/industries/industry-template.php) — the metrics strip, solution
   panels, workflow and case study below are the only net-new rules. */

/* --- Hero metrics strip (dark divider row — same slot .pprod-benefits
       fills on the product/solution hero, but each item carries a value
       above its label rather than just an icon + label) --- */
.indp-metrics { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding-block: clamp(28px, 4vw, 40px); margin-top: clamp(20px, 3vw, 32px); border-top: 1px solid rgba(255,255,255,.12); }
.indp-metric { display: flex; align-items: center; gap: 12px; }
.indp-metric-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
.indp-metric-body { display: flex; flex-direction: column; }
.indp-metric-body strong { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #fff; line-height: 1.15; }
.indp-metric-body span { font-size: .74rem; color: #AEBBD0; margin-top: 2px; }

/* --- Industry solutions: 3 large photo panels linking to real /solutions/ --- */
.indp-solutions { padding-block: clamp(64px, 8vw, 112px); background: #fff; }
.indp-solution-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.indp-solution-panel {
  flex: 0 1 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: #fff; border: 1px solid var(--color-border-hairline); box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1);
}
.indp-solution-panel:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(232,74,10,.25); }
.indp-solution-photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-surface); }
.indp-solution-photo picture, .indp-solution-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.indp-solution-panel:hover .indp-solution-photo img { transform: scale(1.06); }
.indp-solution-badge {
  position: absolute; left: 20px; bottom: -22px; width: 44px; height: 44px; border-radius: 50%;
  background: #082B49; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 20px -8px rgba(8,43,73,.5); border: 3px solid #fff;
}
.indp-solution-body { padding: 34px 22px 22px; display: flex; flex-direction: column; }
.indp-solution-body strong { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--color-navy); margin-bottom: 8px; }
.indp-solution-desc { display: block; font-size: .86rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); margin-bottom: 16px; }
.indp-solution-bullets { display: grid; gap: 8px; margin-bottom: 18px; }
.indp-solution-bullets span { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; color: var(--color-navy); line-height: 1.4; }
.indp-solution-bullets svg { flex-shrink: 0; margin-top: 2px; }
.indp-solution-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 700; font-size: .88rem; color: var(--color-orange-start); }
.indp-solution-link svg { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.indp-solution-panel:hover .indp-solution-link svg { transform: translateX(4px); }

/* --- Operational workflow: horizontal connected steps (vertical stack on
       mobile — the connecting line is desktop-only, see the media query) --- */
.indp-workflow { padding-block: clamp(56px, 7vw, 96px); background: var(--color-bg-surface); text-align: center; }
.ind-workflow-sub { max-width: 520px; margin: 8px auto 0; font-size: .95rem; color: var(--color-steel-grey); }
.indp-workflow-row { position: relative; display: flex; flex-direction: column; gap: 32px; margin-top: clamp(32px, 5vw, 48px); }
.indp-step { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.indp-step-icon { position: relative; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; }
.indp-step-n {
  position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-orange-start); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .68rem;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-bg-surface);
}
.indp-step strong { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--color-navy); }
.indp-step p { max-width: 22ch; font-size: .78rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); }

/* --- Customer success case study --- */
.indp-case { padding-block: clamp(56px, 7vw, 96px); background: #fff; }
.indp-case-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.indp-case-copy .pprod-feature-title { margin-bottom: 12px; }
.indp-case-copy .pprod-feature-desc { max-width: 46ch; margin-bottom: 18px; }
.indp-case-card {
  position: relative; padding: clamp(28px, 4vw, 36px); border-radius: 24px;
  background: var(--color-bg-surface); border: 1px solid var(--color-border-hairline); box-shadow: var(--shadow-md);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1);
}
.indp-case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.indp-case-company { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .74rem; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-navy); margin-bottom: 18px; }
.indp-case-logo { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: #082B49; color: #fff; display: flex; align-items: center; justify-content: center; }
.indp-case-card blockquote { margin: 0 0 24px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.5; color: var(--color-navy); }
.indp-case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 0; margin-bottom: 20px; border-top: 1px solid var(--color-border-hairline); border-bottom: 1px solid var(--color-border-hairline); }
.indp-case-stats strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--color-orange-start); }
.indp-case-stats span { display: block; font-size: .68rem; color: var(--color-steel-grey); margin-top: 2px; }
.indp-case-card figcaption { display: flex; align-items: center; gap: 14px; }
.indp-case-avatar {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-navy); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .86rem;
  border: 2px solid var(--orange-tint);
}
.indp-case-card figcaption strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--color-navy); }
.indp-case-card figcaption em { display: block; font-style: normal; font-size: .78rem; color: var(--color-steel-grey); margin-top: 2px; }

@media (min-width: 640px)  { .indp-metrics { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 780px)  { .indp-solution-panel { flex-basis: calc(50% - 12px); } }
@media (min-width: 860px)  { .indp-case-grid { grid-template-columns: 5fr 7fr; gap: 48px; } }
@media (min-width: 1024px) {
  .indp-solution-panel { flex-basis: calc(33.333% - 16px); }
  /* Connecting line only makes sense once steps sit in a single row. */
  .indp-workflow-row { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .indp-workflow-row::before { content: ''; position: absolute; top: 32px; left: 64px; right: 64px; height: 0; border-top: 2px dashed rgba(232,74,10,.3); z-index: 0; }
  .indp-step { flex: 1 1 0; position: relative; z-index: 1; }
}

/* ---------- 23. Solution page template -------------------------------------------- */
/* Hero, mockup, benefits, overview/capability grid, modules, ecosystem and
   executive CTA all reuse the .pprod-* classes from §21 as-is (see the doc
   comment at the top of includes/solutions/solution-template.php) — the
   only net-new rules a solution page needs are the dashboard mockup's
   percentage label (product template's donut never carried text) and the
   Customer Success testimonial section. */

.pprod-donut-label { font-family: var(--font-display); font-weight: 800; font-size: 7px; fill: var(--color-navy); }

/* ---------- 26. Executive profile template -------------------------------------------- */
/* Hero shell reuses .sol-hero-* (see the doc comment at the top of
   includes/company/team-member-template.php); Areas of Expertise reuses
   .ind-benefit-row/.ind-benefit from the Industries archive wholesale.
   Everything else here is new (.tm-*): the role line + contact row +
   monogram badge in the hero, the bio quick-facts + quote card, and the
   vertical career timeline. */

.tm-hero-name { margin-bottom: 2px; }
.tm-hero-role { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--color-orange-start); }
.tm-contact-row { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 4px; }
.tm-contact-link { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: #C3CEDB; transition: color .2s ease; }
.tm-contact-link:hover { color: #fff; }

/* Large initials monogram — stands in for the brief's photographic
   portrait (see the doc comment at the top of the template file for why). */
.tm-monogram { position: absolute; z-index: 1; right: clamp(24px, 6vw, 96px); bottom: clamp(-36px, -4vw, -24px); width: clamp(140px, 16vw, 220px); height: clamp(140px, 16vw, 220px); display: none; align-items: center; justify-content: center; }
.tm-monogram-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); }
.tm-monogram-ring::before { content: ''; position: absolute; inset: -18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.tm-monogram::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: linear-gradient(155deg, #0A3153 0%, #082B49 55%, #051F38 100%); box-shadow: 0 24px 48px -16px rgba(0,0,0,.55), 0 0 0 6px rgba(255,255,255,.06); }
.tm-monogram-initials { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.6rem); color: #fff; }

/* --- Biography & quote --- */
.tm-bio { padding-block: clamp(64px, 8vw, 112px); background: #fff; }
.tm-bio-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.tm-facts { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 24px; }
.tm-fact { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--color-border-hairline); }
.tm-fact:first-child { border-top: 0; }
.tm-fact-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #EAF1F8; color: var(--color-navy); display: flex; align-items: center; justify-content: center; }
.tm-fact small { display: block; font-size: .74rem; color: var(--color-steel-grey); }
.tm-fact strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--color-navy); margin-top: 2px; }

.tm-quote-card { position: relative; padding: clamp(28px, 4vw, 44px); border-radius: 28px; background: var(--color-bg-surface); border: 1px solid var(--color-border-hairline); box-shadow: var(--shadow-md); transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1); }
.tm-quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tm-quote-mark { display: block; margin-bottom: 16px; }
.tm-quote-card blockquote { margin: 0 0 28px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.5; color: var(--color-navy); }
.tm-signature { display: block; font-family: 'Brush Script MT', cursive; font-size: 1.8rem; color: var(--color-navy); margin-bottom: 18px; }
.tm-quote-card figcaption { padding-top: 18px; border-top: 1px solid var(--color-border-hairline); }
.tm-quote-card figcaption strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--color-navy); }
.tm-quote-card figcaption span { display: block; font-size: .8rem; color: var(--color-steel-grey); margin-top: 2px; }

/* --- Areas of Expertise (reuses .ind-benefit-row / .ind-benefit) --- */
.tm-expertise-row .ind-benefit strong::after { display: none; } /* no underline accent — no supporting <p> beneath it here */
/* .ind-benefit-row's grid is fixed at 4 columns (built for 4 benefit
   items) — with 5 expertise items that strands the 5th alone, left-aligned
   on its own row (the same orphan-item bug fixed on the Industries archive
   page's card grid and trust-badge row). Override to the same
   flex+centered fix here instead of a 5th grid breakpoint. */
.tm-expertise-row { display: flex; flex-wrap: wrap; justify-content: center; }
.tm-expertise-row .ind-benefit { flex: 0 1 45%; }

/* --- Career timeline --- */
.tm-timeline { padding-block: clamp(64px, 8vw, 112px); background: var(--color-bg-surface); }
.tm-timeline-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.tm-milestones { position: relative; display: grid; gap: 28px; padding-left: 28px; }
.tm-milestones::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1.5px; background: var(--color-border-hairline); }
.tm-milestone { position: relative; transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.tm-milestone:hover { transform: translateX(4px); }
.tm-milestone-node { position: absolute; left: -28px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--color-orange-start); box-shadow: 0 0 0 4px var(--orange-tint); transition: box-shadow .25s ease; }
.tm-milestone:hover .tm-milestone-node { box-shadow: 0 0 0 6px var(--orange-tint); }
.tm-milestone-period { display: block; font-family: var(--font-mono); font-size: .74rem; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-orange-start); margin-bottom: 4px; }
.tm-milestone strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--color-navy); margin-bottom: 4px; }
.tm-milestone p { font-size: .86rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); }

@media (min-width: 480px)  { .tm-expertise-row .ind-benefit { flex-basis: 30%; } }
@media (min-width: 640px)  { .tm-facts { grid-template-columns: repeat(2, 1fr); gap: 4px 20px; } .tm-fact { border-top: 0 !important; } }
@media (min-width: 760px)  { .tm-monogram { display: flex; } }
@media (min-width: 860px)  { .tm-bio-grid { grid-template-columns: 7fr 5fr; gap: 48px; } .tm-timeline-grid { grid-template-columns: 5fr 7fr; gap: 48px; } }

/* ---------- 27. Careers page -------------------------------------------------------- */
/* Hero reuses .sol-hero-* wholesale (same photo+scrim shell as every
   other archive hero this session) — see the doc comment at the top of
   includes/company/careers-page.php. Everything else here reuses
   .ind-benefit-row/.ind-benefit (Culture, Global Team stats) and
   .sol-cta-* (closing CTA) wholesale; only the Open Positions filter
   bar/job list and the Why Join split are new. */

/* --- Culture --- */
.car-culture { padding-block: clamp(64px, 8vw, 100px); background: var(--color-white); }
/* 5 items — same orphan-item fix as .tm-expertise-row (flex+wrap+centre
   overriding .ind-benefit-row's fixed grid, which only has 2/4-col steps). */
.car-culture-row { display: flex; flex-wrap: wrap; justify-content: center; }
.car-culture-row .ind-benefit { flex: 0 1 100%; }

/* --- Open Positions --- */
.car-positions { padding-block: clamp(64px, 8vw, 100px); background: var(--color-bg-surface); }
.car-positions-head { display: grid; gap: 28px; margin-bottom: clamp(32px, 5vw, 48px); }
.car-positions-lede { font-size: .96rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); max-width: 42ch; margin-top: 10px; }
.car-filters { display: grid; gap: 12px; }
.car-search { position: relative; display: flex; align-items: center; }
.car-search span { position: absolute; left: 16px; display: flex; pointer-events: none; }
.car-search input { width: 100%; padding: 13px 16px 13px 44px; border-radius: 999px; border: 1.5px solid var(--color-border-hairline); background: var(--color-white); font-family: var(--font-body); font-size: .92rem; color: var(--color-navy); transition: border-color var(--duration-base) var(--ease-signal), box-shadow var(--duration-base) var(--ease-signal); }
.car-filters select { padding: 13px 40px 13px 18px; border-radius: 999px; border: 1.5px solid var(--color-border-hairline); background: var(--color-white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="%23334859" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 16px center; appearance: none; font-family: var(--font-body); font-size: .92rem; color: var(--color-navy); transition: border-color var(--duration-base) var(--ease-signal); }
.car-search input:focus, .car-filters select:focus { outline: none; border-color: var(--color-orange-start); }
.car-search input:focus { box-shadow: 0 0 0 4px rgba(241,90,36,.12); }
.car-filters .btn-navy { justify-self: start; }

.car-job-list { display: grid; background: var(--color-white); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.car-job-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 20px clamp(18px, 3vw, 28px); border-bottom: 1px solid var(--color-border-hairline); transition: background var(--duration-base) var(--ease-signal); }
.car-job-row:last-child { border-bottom: 0; }
.car-job-row:hover { background: var(--color-bg-surface); }
.car-job-row.is-hidden { display: none; }
.car-job-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--color-bg-surface); color: var(--color-navy); grid-row: 1 / 3; }
.car-job-main { display: flex; flex-direction: column; gap: 2px; grid-column: 2; }
.car-job-main strong { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-navy); }
.car-job-main span { font-size: .82rem; color: var(--color-steel-grey); }
.car-job-meta, .car-job-type { display: flex; align-items: center; gap: 8px; grid-column: 2; }
.car-job-meta strong { display: block; font-size: .84rem; font-weight: 600; color: var(--color-navy); }
.car-job-meta span { font-size: .78rem; color: var(--color-steel-grey); }
.car-job-type span { font-size: .84rem; font-weight: 600; color: var(--color-navy); }
.car-job-link { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--color-orange-start); grid-column: 2; transition: gap var(--duration-base) var(--ease-signal); }
.car-job-link:hover { gap: 10px; }
.car-jobs-empty { margin-top: 28px; text-align: center; font-size: .92rem; color: var(--color-steel-grey); }
.car-jobs-empty a { color: var(--color-orange-start); font-weight: 600; }

/* --- Why Join --- */
.car-why { padding-block: clamp(64px, 8vw, 100px); background: var(--color-white); }
.car-why-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.car-why-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.car-why-photo picture, .car-why-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.car-why-lede { font-size: .98rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); max-width: 46ch; margin: 12px 0 24px; }
.car-why-list { display: grid; gap: 14px; }
.car-why-list li { display: flex; align-items: center; gap: 12px; font-size: .94rem; color: var(--color-navy); font-weight: 500; }
.car-why-list li span { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--orange-tint); }

/* --- Global Team --- */
.car-team { padding-block: clamp(64px, 8vw, 100px); background: var(--color-bg-surface); }
.car-team-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.car-team-lede { font-size: .96rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); max-width: 44ch; margin: 12px 0 20px; }
.car-team-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-orange-start); transition: gap var(--duration-base) var(--ease-signal); }
.car-team-link:hover { gap: 12px; }
.car-team-stats .ind-benefit strong::after { display: none; }
.car-team-stat-value { display: block; font-family: var(--font-mono); font-weight: 600; font-size: var(--text-3xl); color: var(--color-navy); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.car-team-stat-label { display: block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-steel-grey); }

@media (min-width: 560px) { .car-culture-row .ind-benefit { flex-basis: 45%; } .car-job-row { grid-template-columns: auto 1fr auto; } .car-job-meta, .car-job-type { grid-column: auto; } .car-job-link { grid-column: 3; grid-row: 1 / 3; } }
@media (min-width: 620px) { .car-filters { grid-template-columns: 1fr auto auto auto; align-items: center; } .car-filters .btn-navy { justify-self: stretch; text-align: center; justify-content: center; } }
@media (min-width: 720px) { .car-why-grid, .car-team-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .car-job-row { grid-template-columns: auto 1.6fr 1fr auto auto; gap: 24px; } .car-job-main, .car-job-meta, .car-job-type, .car-job-link { grid-row: auto; } }
@media (min-width: 1180px) { .car-culture-row .ind-benefit { flex-basis: 17%; } }
@media (min-width: 1180px) { .tm-expertise-row .ind-benefit { flex-basis: 15%; } }

/* ---------- 28. Policy page (master legal document template) --------------------- */
/* Hero reuses .sol-hero wholesale — only .pol-meta (the Last Updated /
   Effective Date / Download PDF strip) is new there. Trust Callout reuses
   .ind-benefit-icon for its badge; Related Policies reuses
   .ind-benefits-head + .ind-benefit-icon too (same "icon circle, hover
   lift" component as Careers' Culture cards). Mobile layout choices are
   explained in the doc comment at the top of includes/company/policy-page.php. */
.pol-meta { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.pol-meta-item { display: flex; align-items: center; gap: 10px; color: #fff; text-align: left; }
.pol-meta-item span:not([aria-hidden]) { display: flex; flex-direction: column; gap: 2px; }
.pol-meta-item strong { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #93A7BA; }
.pol-meta-item > span > span:last-child, .pol-meta-item span:not([aria-hidden]) span:last-child { font-size: .88rem; font-weight: 600; color: #fff; }
.pol-meta-download { transition: opacity var(--duration-base) var(--ease-signal); }
.pol-meta-download:hover { opacity: .8; }

.pol-layout { padding-block: clamp(56px, 8vw, 96px); background: var(--color-white); }
.pol-progress-track { position: sticky; top: var(--header-h-scrolled, 76px); height: 3px; background: var(--color-border-hairline); z-index: 5; margin-bottom: clamp(32px, 5vw, 48px); border-radius: var(--radius-sm); overflow: hidden; }
.pol-progress-fill { display: block; height: 100%; width: 0%; background: var(--gradient-accent); transition: width .1s linear; }
.pol-layout-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }

/* Left section-nav — sticky column at desktop, horizontal-scroll pill bar
   below 1024px (same technique as .sol-filters). */
.pol-nav { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.pol-nav::-webkit-scrollbar { display: none; }
.pol-nav a { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--color-border-hairline); font-size: .84rem; font-weight: 600; color: var(--color-steel-grey); white-space: nowrap; transition: color var(--duration-base) var(--ease-signal), border-color var(--duration-base) var(--ease-signal), background var(--duration-base) var(--ease-signal); }
.pol-nav a:hover { color: var(--color-navy); background: var(--color-bg-surface); }
.pol-nav a.is-active { color: var(--color-navy); border-color: var(--color-orange-start); background: var(--orange-tint); }
.pol-nav-icon { display: flex; }

.pol-content { max-width: 760px; min-width: 0; }
.pol-section { scroll-margin-top: calc(var(--header-h-scrolled, 76px) + 20px); padding-block: 28px; border-bottom: 1px solid var(--color-border-hairline); }
.pol-section:first-child { padding-top: 0; }
.pol-section:last-of-type { border-bottom: 0; }
.pol-section h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--color-navy); margin-bottom: 14px; }
.pol-section p { font-size: 1rem; line-height: 1.7; color: var(--color-steel-grey); }
.pol-section p + p { margin-top: 14px; }
.pol-section a { color: var(--color-orange-start); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pol-section ul { display: grid; gap: 10px; margin-top: 14px; }
.pol-section li { position: relative; padding-left: 26px; font-size: 1rem; line-height: 1.7; color: var(--color-steel-grey); }
.pol-section li::before { content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange-tint); border: 1.5px solid var(--color-orange-start); }
.pol-section strong { color: var(--color-navy); }

.pol-callout { margin-top: 40px; display: flex; align-items: flex-start; gap: 20px; background: var(--color-bg-surface); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 32px); }
.pol-callout-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--color-white); box-shadow: var(--shadow-sm); color: var(--color-navy); }
.pol-callout strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--color-navy); margin-bottom: 8px; }
.pol-callout p { font-size: .94rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); }

.pol-aside { display: grid; gap: 24px; align-content: start; }
.pol-help-card { background: var(--color-white); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 22px; }
.pol-help-card strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-navy); margin-bottom: 8px; }
.pol-help-card p { font-size: .86rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); margin-bottom: 16px; }
.pol-help-card .btn-orange { width: 100%; justify-content: center; }

.pol-related { padding-block: clamp(64px, 8vw, 100px); background: var(--color-bg-surface); }
.pol-related-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.pol-related-card { flex: 0 1 100%; display: block; background: var(--color-white); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 28px; transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .3s ease; }
.pol-related-card:hover { transform: translateY(-6px); border-color: var(--color-orange-start); box-shadow: var(--shadow-md); }
.pol-related-card strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-navy); margin: 4px 0 8px; }
.pol-related-card p { font-size: .86rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); margin-bottom: 16px; }
.pol-related-link { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--color-orange-start); transition: gap var(--duration-base) var(--ease-signal); }
.pol-related-card:hover .pol-related-link { gap: 10px; }

@media (min-width: 620px) { .pol-related-card { flex-basis: 45%; } }
@media (min-width: 860px) { .pol-related-card { flex-basis: 30%; } }
@media (min-width: 1024px) {
  .pol-layout-grid { grid-template-columns: 220px 1fr 280px; gap: 40px; }
  .pol-nav { flex-direction: column; overflow: visible; position: sticky; top: calc(var(--header-h-scrolled, 76px) + 28px); }
  .pol-nav a { border: 0; padding: 9px 12px; }
  .pol-nav a.is-active { background: var(--orange-tint); }
  .pol-aside { position: sticky; top: calc(var(--header-h-scrolled, 76px) + 28px); }
}

/* Print: strip everything but the reading column. "Download PDF" triggers
   window.print() — this is what actually makes that button produce a
   clean, single-column document instead of the full chrome-laden page. */
@media print {
  .site-header, .mobile-nav, .pol-nav, .pol-aside, .pol-progress-track, .pol-related, .sol-cta, .ftr, .sol-hero-bg, .pol-meta { display: none !important; }
  .pol-hero { min-height: auto; padding-block: 0; background: #fff !important; }
  .pol-hero .sol-hero-title, .pol-hero .sol-breadcrumb, .pol-hero .sol-hero-eyebrow, .pol-hero .sol-hero-lede { color: #000 !important; }
  .pol-layout-grid { grid-template-columns: 1fr !important; }
  .pol-content { max-width: 100% !important; }
  .pol-section { break-inside: avoid; }
}

/* ---------- 29. MarineStoreMate landing page -------------------------------------- */
/* The one page on the site where a card gets a rounder radius than the
   6px ceiling elsewhere (16–20px) — deliberate, matching the Linear/Stripe
   "premium SaaS" reference the brief calls out, same allowance already
   used for the mega-menu panel and contact form cards. Hero
   eyebrow/rule/lede/CTA-row reuse .sol-hero-eyebrow/.sol-hero-rule/
   .sol-hero-lede/.sol-cta-actions verbatim (white-on-navy, already
   correct); capability chips reuse .hero-chip from the homepage hero
   (same three claims, same component). Trust strip reuses .trust-wrap/
   .trust-card wholesale. Operational Challenge reuses .car-why-* from the
   Careers page (photo + checklist split is the same shape). Capabilities
   grid reuses .ind-benefit-row/.ind-benefit. */

.msm-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, #041A31 0%, #082B49 100%); padding: clamp(120px, 14vw, 160px) 0 clamp(64px, 8vw, 96px); }
.msm-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.msm-hero-texture { position: absolute; inset: 0; width: 100%; height: 100%; }
.msm-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
.msm-hero-copy { max-width: 560px; }
.msm-hero-title { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: clamp(36px, 4.8vw, 68px); line-height: 1.12; letter-spacing: var(--tracking-tight); margin: 4px 0 0; }
.msm-title-dim { color: #7E93A8; }
.msm-hero-trustrow { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.msm-hero-trustrow li { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: #C3CEDB; }
.msm-hero-trustrow svg { flex-shrink: 0; color: #7E93A8; }
.msm-hero-trustrow svg circle[stroke="#F15A24"], .msm-hero-trustrow svg path[stroke="#F15A24"] { stroke: #F15A24; }

/* --- Dashboard mockup --- */
.msm-hero-visual { position: relative; }
.msm-dashboard {
  position: relative; z-index: 1;
  background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  box-shadow: 0 30px 60px -20px rgba(2,10,20,.55);
  padding: 20px;
}
.msm-dash-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.msm-dash-head-icon { display: flex; color: #7E93A8; }
.msm-dash-head strong { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: #fff; }
.msm-dash-range { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .7rem; color: #93A7BA; padding: 5px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; }
.msm-dash-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.msm-dash-tile { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px 14px; }
.msm-dash-tile span { display: block; font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #93A7BA; margin-bottom: 6px; }
.msm-dash-tile strong { display: block; font-family: var(--font-mono); font-size: 1.4rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.msm-dash-tile em { display: block; font-style: normal; font-size: .68rem; margin-top: 4px; color: #6F8092; }
.msm-dash-tile em.is-up { color: #6FCF97; }
.msm-dash-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.msm-dash-panel { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px; }
.msm-dash-panel-title { display: block; font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #93A7BA; margin-bottom: 10px; }
.msm-dash-donut { position: relative; width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px; }
.msm-dash-donut::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: #0C2C48; }
.msm-dash-donut-hole { position: absolute; inset: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.msm-dash-donut-hole strong { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; color: #fff; }
.msm-dash-donut-hole span { font-size: .56rem; color: #93A7BA; }
.msm-dash-legend { display: grid; gap: 6px; }
.msm-dash-legend li { display: flex; align-items: center; gap: 6px; font-size: .68rem; color: #C3CEDB; }
.msm-dash-legend i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.msm-dash-legend b { margin-left: auto; font-weight: 600; color: #fff; }
.msm-dash-issues { display: grid; gap: 8px; }
.msm-dash-issues li { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: #C3CEDB; }
.msm-dash-issues i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.msm-dash-issues i.is-critical { background: #F15A24; } .msm-dash-issues i.is-high { background: #FFB27A; }
.msm-dash-issues i.is-medium { background: #93A7BA; } .msm-dash-issues i.is-low { background: #6FCF97; }
.msm-dash-issues b { margin-left: auto; font-family: var(--font-mono); font-weight: 700; color: #fff; }

/* --- Mobile device preview, overlapping the dashboard's lower-left --- */
.msm-phone {
  position: relative; z-index: 2;
  width: 190px;
  margin: -60px 0 0 -20px;
  background: linear-gradient(165deg, #0C2C48, #071B2E);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  box-shadow: 0 24px 48px -16px rgba(2,10,20,.6);
  padding: 14px 12px 16px;
}
.msm-phone-notch { width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.2); margin: 0 auto 12px; }
.msm-phone-head { display: flex; align-items: center; gap: 6px; background: #082B49; border-radius: 8px; padding: 7px 9px; font-size: .68rem; font-weight: 600; color: #fff; margin-bottom: 10px; }
.msm-phone-list { display: grid; gap: 7px; margin-bottom: 10px; }
.msm-phone-list li { display: flex; flex-direction: column; gap: 2px; background: rgba(255,255,255,.04); border-radius: 7px; padding: 6px 8px; }
.msm-phone-list span { font-size: .64rem; color: #C3CEDB; }
.msm-phone-list b { font-size: .6rem; font-weight: 600; }
.msm-phone-list b.is-progress { color: #FFB27A; } .msm-phone-list b.is-done { color: #6FCF97; } .msm-phone-list b.is-idle { color: #6F8092; }
.msm-phone-scanbar { height: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent, #F15A24, transparent); margin-bottom: 10px; opacity: .8; }
.msm-phone-cta { display: block; width: 100%; text-align: center; background: var(--gradient-accent); color: #fff; font-size: .68rem; font-weight: 700; padding: 8px; border-radius: 8px; }

.msm-hero-chips { position: static; transform: none; width: auto; margin-top: 20px; display: grid; grid-template-columns: 1fr; gap: 8px; }
.msm-hero-chips .hero-chip { padding: 10px 12px; }
.msm-hero-chips .hero-chip-text { font-size: .78rem; }


/* --- Operational Challenge --- */
.msm-challenge { padding-block: clamp(64px, 8vw, 100px); background: var(--color-white); }
/* .car-why-photo normally clips to its own rounded corners — here the
   mini phone card is meant to hang off the bottom-right edge, so this
   instance needs position + visible overflow instead of the shared
   component's default. */
.msm-challenge .car-why-photo { position: relative; overflow: visible; }
.msm-challenge-overlay { position: absolute; right: -18px; bottom: -18px; z-index: 1; }
.msm-mini-phone { width: 168px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border-hairline); padding: 12px; }
.msm-mini-phone-head { font-family: var(--font-display); font-weight: 700; font-size: .78rem; color: var(--color-navy); margin-bottom: 8px; }
.msm-mini-phone-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid var(--color-border-hairline); }
.msm-mini-phone-row:first-of-type { border-top: 0; }
.msm-mini-phone-row span { font-size: .64rem; color: var(--color-steel-grey); }
.msm-mini-phone-row b { font-size: .64rem; font-weight: 700; }
.msm-mini-phone-row b.is-progress { color: var(--color-orange-start); } .msm-mini-phone-row b.is-done { color: #1A9B5C; }

/* --- How It Works --- */
.msm-steps { padding-block: clamp(64px, 8vw, 100px); background: var(--color-bg-surface); }
.msm-step-row { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.msm-step { position: relative; background: var(--color-white); border: 1px solid var(--color-border-hairline); border-radius: 20px; box-shadow: var(--shadow-sm); padding: 24px; transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
.msm-step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.msm-step-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--gradient-accent); color: #fff; margin-bottom: 14px; }
.msm-step-num { position: absolute; top: 22px; right: 22px; font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--color-border-hairline); }
.msm-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-navy); margin-bottom: 6px; }
.msm-step p { font-size: .86rem; line-height: var(--leading-relaxed); color: var(--color-steel-grey); }
.msm-step-connector { display: none; }

/* --- Live Dashboard Showcase --- */
.msm-showcase { position: relative; overflow: hidden; padding-block: clamp(64px, 8vw, 100px); background: #082B49; }
.msm-showcase-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.msm-showcase-lede { font-size: .98rem; line-height: var(--leading-relaxed); color: #C3CEDB; margin: 12px 0 20px; }
.msm-showcase .car-why-list li { color: #fff; }
.msm-dashboard--compact { max-width: 520px; }

/* --- Capabilities --- */
.msm-capabilities { padding-block: clamp(64px, 8vw, 100px); background: var(--color-white); }
.msm-capability-row .ind-benefit { flex: 0 1 100%; }

/* Mobile hero compaction — the desktop dashboard mockup + overlapping
   phone card, built for a 55%-width column beside the copy, was way too
   tall stacked full-width on a phone (the negative margin that overlaps
   the phone onto the dashboard's corner on desktop also visually swallowed
   the dashboard's bottom row on mobile instead of reading as a deliberate
   overlap). Below 640px: un-overlap the phone (normal flow, no negative
   margin), shrink every dashboard/phone element's padding and type scale,
   and tighten the hero's own top clearance. */
@media (max-width: 639px) {
  .msm-hero { padding: clamp(88px, 22vw, 112px) 0 40px; }
  .msm-hero-title { font-size: clamp(30px, 9vw, 40px); margin-top: 0; }
  .msm-hero-copy .sol-hero-lede { margin-bottom: var(--space-3); }
  .msm-hero-copy .sol-cta-actions { gap: 10px; }
  .msm-hero-trustrow { margin-top: 18px; gap: 10px 16px; }
  .msm-hero-visual { margin-top: 8px; }
  .msm-dashboard { padding: 14px; border-radius: 16px; }
  .msm-dash-tiles { gap: 8px; margin-bottom: 10px; }
  .msm-dash-tile { padding: 9px 10px; border-radius: 10px; }
  .msm-dash-tile strong { font-size: 1.1rem; }
  .msm-dash-tile em { display: none; }
  /* Open Technical Issues + the donut's text legend are the least
     essential glance-value on a phone — dropped here, not on tablet/
     desktop, purely to control hero height; the donut chart itself (the
     strongest "this is a real dashboard" signal) stays. */
  .msm-dash-panels { grid-template-columns: 1fr; }
  .msm-dash-issues-panel, .msm-dash-legend { display: none; }
  .msm-dash-donut-panel { text-align: center; }
  .msm-dash-donut { margin-inline: auto; width: 68px; height: 68px; }
  .msm-dash-donut::before, .msm-dash-donut-hole { inset: 11px; }
  .msm-phone {
    position: static; z-index: auto;
    width: 100%; max-width: 260px;
    margin: 16px auto 0;
    padding: 12px 10px 14px;
  }
  .msm-hero-chips { margin-top: 16px; gap: 6px; }
  .msm-hero-chips .hero-chip { padding: 8px 10px; }
}

@media (min-width: 560px) { .msm-step-row { grid-template-columns: repeat(2, 1fr); } .msm-capability-row .ind-benefit { flex-basis: 45%; } }
@media (min-width: 720px) { .msm-challenge .car-why-grid, .msm-showcase-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .msm-hero-grid { grid-template-columns: 5fr 6fr; gap: 40px; } .msm-hero-chips { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .msm-step-row { grid-template-columns: repeat(4, 1fr); } .msm-capability-row .ind-benefit { flex-basis: 30%; } }