/* ==========================================================================
   Ion Exchange — About Us
   Built from the Ion Exchange Enterprise Design System v2.0 tokens.
   ========================================================================== */

:root {
  /* Brand */
  --brand-primary:   #007CC3;
  --brand-secondary: #0284C7;
  --brand-accent:    #06B6D4;
  --brand-glow:      #2EA8FF;

  /* Surfaces */
  --surface-canvas:        #FAFAFA;
  --surface-card:          #FFFFFF;
  --surface-neutral-light: #F8FAFC;
  --surface-neutral-dark:  #0F172A;
  --surface-utility-dark:  #0A2740;
  --surface-industrial:    #03152F;

  /* Borders */
  --border-light:  #E2E8F0;
  --border-medium: #CBD5E1;

  /* Text */
  --text-primary:   #0F172A;
  --text-secondary: #64748B;
  --text-tertiary:  #94A3B8;
  --text-inverse:   #FFFFFF;

  /* Status */
  --status-success: #14B8A6;
  --success-solid:  #16A34A;
  --success-text:   #15803D;

  /* State */
  --state-hover-primary: #005A91;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-mega: 32px;
  --radius-pill: 9999px;

  /* Elevation */
  --elev-resting:  0px 1px 4px rgba(0,0,0,0.02);
  --elev-hover:    0px 3px 8px rgba(0,0,0,0.04), 0px 2px 12px rgba(0,0,0,0.03);
  --elev-floating: 0px 8px 20px rgba(15,23,42,0.15);
  --elev-megamenu: 0px 25px 60px rgba(0,124,195,0.18);

  /* Canonical card interaction system — the single elevation/border/motion
     recipe every interactive card on the site shares (soft ambient shadow,
     thin neutral border, restrained lift, no scaling). Applied uniformly
     across Board, Directors, Manufacturing, Global Presence, Timeline,
     Statistics, and Investor Relations cards. */
  --card-shadow-resting: 0px 1px 2px rgba(15,23,42,0.04), 0px 6px 16px rgba(15,23,42,0.05);
  --card-shadow-hover:   0px 4px 8px rgba(15,23,42,0.05), 0px 18px 36px rgba(15,23,42,0.10);
  --card-border:         var(--border-light);
  --card-border-hover:   var(--border-medium);
  --card-lift:           -4px;
  --card-transition:     300ms var(--ease-standard);

  /* Type */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Plus Jakarta Sans', sans-serif;

  /* Layout */
  --max-width: 1280px;
  --gutter: clamp(16px, 4vw, 32px);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-organic:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Element resets are scoped to the page's own content (main + the CTA band,
   which sits outside <main>). Unscoped they'd defeat the site chrome's layered
   Tailwind utilities (unlayered rules beat @layer regardless of specificity),
   collapsing margins inside the shared header/footer. :where() keeps their
   specificity at plain-element level so component rules still override them. */
:where(#main-content, .cta) a { color: inherit; text-decoration: none; }
:where(#main-content, .cta) p { text-wrap: pretty; margin: 0; }
:where(#main-content, .cta) :is(h1, h2, h3, h4, h5) { margin: 0; }
:where(#main-content, .cta) img { display: block; max-width: 100%; }
:where(#main-content, .cta) button { font-family: inherit; }
:where(#main-content, .cta) :is(ol, ul) { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--brand-glow); color: var(--surface-industrial); }

/* ---------- Layout primitives ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section {
  padding-top: clamp(40px, 4.5vw, 64px);
  padding-bottom: clamp(40px, 4.5vw, 64px);
}
.section--tight {
  padding-top: clamp(32px, 4vw, 48px);
  padding-bottom: clamp(32px, 4vw, 48px);
}
.band { background: var(--surface-card); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.band--dark { background: var(--surface-industrial); border-color: rgba(255,255,255,0.08); }

.split { display: flex; flex-wrap: wrap; gap: clamp(40px, 5vw, 64px); }
.split--center { align-items: center; }
.split__col { flex: 1 1 420px; min-width: 300px; }
.split__col--media { flex: 1 1 360px; }
/* media-right: text reads first on mobile, image sits right on desktop */
.split--media-right .split__col--media { order: 2; }
@media (max-width: 860px) {
  .split--media-right .split__col--media { order: 0; }
}

/* ---------- Typography ---------- */
/* Editorial headline — matched to the homepage "Industries We Serve"
   hierarchy: heavier weight, tighter leading, balanced 2-line wraps,
   and a fixed 24px seat above the paragraph. */
.h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 24px;
  max-width: 780px;
  text-wrap: balance;
}
.h2--on-dark { color: var(--text-inverse); }
/* headings with no adjacent visual (Milestones, Certifications) get the
   wider "standalone intro" measure — see the .intro-wide block below */
.section-title { max-width: 650px; margin-bottom: 48px; }
/* desktop-only widening — see the standalone-intro note further down */
@media (min-width: 981px) {
  .section-title { max-width: 860px; }
}

/* Headline accent — the bold blue-gradient phrase used across every editorial
   headline (hero, section h2s), matching the homepage's two-tone treatment. */
.h2-accent {
  display: block;
  font-weight: 700;
  background: linear-gradient(90deg, #0284C7 0%, #007CC3 55%, #06B6D4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* background-clip:text paints the gradient only within the element's box, so
     with the tight 1.1 line-height the last line's descenders (g, y, p, q) fall
     below the box and render transparent (clipped). Extend the paint box down,
     then cancel the layout effect with an equal negative margin — descenders
     paint fully and nothing shifts. */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.h2-accent--on-dark { background-image: linear-gradient(90deg, #2EA8FF 0%, #38BDF8 50%, #06B6D4 100%); }
.h2-accent-inline { font-weight: 700; background: linear-gradient(90deg, #0284C7 0%, #007CC3 55%, #06B6D4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.16em; }
@supports not (background-clip: text) {
  .h2-accent, .h2-accent-inline { background: none; color: var(--brand-primary); }
  .h2-accent--on-dark { color: var(--brand-glow); }
}
.section-intro { margin-bottom: 48px; }

/* Editorial paragraph — homepage rhythm: smaller, slate, regular weight,
   held to a comfortable ~55ch measure. This is the default for sections
   that already partner the intro with adjacent imagery or a media
   composition (Hero, Who We Are, Global Presence, Manufacturing,
   Directors, R&D, Sustainability) — the visual provides the balance, so
   the reading column stays at this original measure. */
.lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 560px;
}
.lead + .body-muted { margin-top: 20px; }
.lead--on-dark { color: rgba(255,255,255,0.7); }
.body-muted {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 650px;
}

/* Standalone-intro sections — no adjacent image or media composition sits
   beside the introduction (Board of Directors, Our Values, Investor
   Relations — Awards & Recognition is handled by its own .hall__heading /
   .hall__lead rules further down, updated to match this same measure).
   These get a wider editorial measure so the headline and body copy anchor
   the section instead of reading compressed against a large empty right
   margin. Still well short of the full container width — this is a wider
   reading column, not full-bleed.
   Desktop only (matches the site's existing 981px nav breakpoint) — on
   tablet and mobile these fall back to the standard .h2 / .lead measure,
   since the wider column has no room to breathe at those widths. */
@media (min-width: 981px) {
  #valuesSection .h2, #investors .h2, #directorsSection .h2 {
    max-width: 860px;
  }
  /* body copy stretches across the full section width, wrapping naturally
     into ~2 lines — it stops at the container edge, not an arbitrary column */
  #valuesSection .lead, #investors .lead,
  #directorsSection .lead, #certsSection .lead {
    max-width: none;
  }
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(2,132,199,0.9);
}
.eyebrow--muted {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  color: var(--text-secondary);
}
.eyebrow--glow { font-size: 10px; letter-spacing: 0.25em; color: var(--brand-glow); }
.eyebrow--on-dark { color: rgba(125,195,255,0.78); }
.eyebrow-row { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.eyebrow-row--center { justify-content: center; margin-bottom: 24px; }
/* decorative dash removed for a cleaner editorial label; kept in markup for structure */
.eyebrow-tick { display: none; }
.eyebrow-tick--glow { background: var(--brand-glow); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}
.btn--primary {
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--surface-neutral-dark);
  color: var(--text-inverse);
  border: 1px solid transparent;
}
.btn--primary:hover {
  background: var(--state-hover-primary);
  transform: translateY(-2px);
  box-shadow: var(--elev-hover);
}
.btn--secondary {
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-medium);
  background: transparent;
  color: var(--text-primary);
}
.btn--secondary:hover { background: var(--surface-neutral-light); border-color: var(--brand-primary); }
.btn--light {
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  color: var(--text-primary);
}
.btn--light:hover { transform: translateY(-2px); box-shadow: 0px 8px 20px rgba(0,124,195,0.3); }
.btn--dark {
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-inverse);
}
.btn--dark:hover { background: var(--brand-primary); border-color: transparent; }
/* glass — pill-shaped secondary button for on-dark hero banners (Product
   Page pattern): same translucent treatment as .btn--dark, pill radius */
.btn--glass {
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.24);
  color: var(--text-inverse);
}
.btn--glass:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); transform: translateY(-2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.btn-row--center { justify-content: center; }

/* ---------- Utility bar ---------- */
.utility-bar { background: var(--surface-utility-dark); color: rgba(255,255,255,0.8); }
.utility-bar__inner {
  padding-top: 8px; padding-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase;
}
.utility-bar__links { display: flex; gap: 24px; flex-wrap: wrap; }
.utility-bar__links a { transition: color 150ms ease; }
.utility-bar__links a:hover { color: var(--brand-glow); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226,232,240,0.1);
  transition: all 300ms var(--ease-standard);
}
.header__inner {
  position: relative;
  padding-top: 16px; padding-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: padding 300ms var(--ease-standard);
}
.header.is-scrolled {
  background: #FFFFFF;
  box-shadow: var(--elev-hover);
  border-bottom-color: var(--border-light);
}
.header.is-scrolled .header__inner { padding-top: 10px; padding-bottom: 10px; }

.brand { display: flex; align-items: baseline; gap: 10px; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--text-primary); }
.brand__name--on-dark { color: #FFFFFF; }
.brand__since { font-family: var(--font-display); font-size: 9px; font-weight: 600; letter-spacing: 0.2em; color: var(--text-secondary); }
.brand__since--on-dark { color: rgba(255,255,255,0.5); }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__link {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  color: var(--text-primary); transition: color 150ms ease;
  background: none; border: none; padding: 0; cursor: pointer;
}
.nav__link:hover { color: var(--brand-secondary); }
.nav__link--active { font-weight: 600; color: var(--brand-primary); border-bottom: 2px solid var(--brand-primary); padding-bottom: 2px; }
.nav__solutions { display: inline-flex; align-items: center; gap: 5px; }
.nav__caret { font-size: 9px; color: var(--text-secondary); }

.header__cta { flex: 0 0 auto; }

/* Mobile nav toggle (shown < 980px) */
.nav-toggle { display: none; }

/* ---------- Mega menu ---------- */
.mega {
  position: absolute;
  top: calc(100% + 26px);
  left: var(--gutter); right: var(--gutter);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px);
  transition: all 300ms var(--ease-standard);
  z-index: 60;
}
.mega.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.mega__panel {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-megamenu);
  padding: 32px;
  display: grid;
  grid-template-columns: 0.7fr 1fr 1.4fr;
  gap: 32px;
}
.mega__col { display: flex; flex-direction: column; }
.mega__col--categories { gap: 16px; border-right: 1px solid rgba(226,232,240,0.6); padding-right: 24px; }
.mega__col--links { gap: 12px; border-right: 1px solid rgba(226,232,240,0.6); padding-right: 24px; }
.mega__col--links .eyebrow { margin-bottom: 4px; }
.mega__cat { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-primary); transition: color 150ms ease; }
.mega__cat--active { color: var(--brand-primary); }
.mega__cat:hover { color: var(--brand-secondary); }
.mega__link { font-family: var(--font-body); font-size: 13.5px; font-weight: 400; color: var(--text-primary); transition: color 150ms ease; }
.mega__link:hover { color: var(--brand-secondary); }
.mega__showcase {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-light); min-height: 200px;
}
.mega__showcase .image-slot { position: absolute; inset: 0; border-radius: 0; border: none; }
.mega__showcase-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,21,47,0.1), rgba(3,21,47,0.88)); }
.mega__showcase-body { position: absolute; left: 24px; right: 24px; bottom: 24px; }
.mega__showcase-body h4 { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.3; color: #FFFFFF; margin: 8px 0 16px; }

/* ---------- Image slot placeholder ---------- */
.image-slot {
  position: relative;
  background:
    linear-gradient(135deg, #EEF4FA 0%, #F8FAFC 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.image-slot::before {
  content: attr(data-placeholder);
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: center; padding: 16px; max-width: 80%;
}
.image-slot::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,124,195,0.06) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(0,124,195,0.06) 0 1px, transparent 1px 28px);
  pointer-events: none;
}
.image-slot--hero { width: 100%; aspect-ratio: 4/3; box-shadow: var(--elev-floating); }
.image-slot--legacy { width: 100%; aspect-ratio: 5/4; border-radius: var(--radius-xl); box-shadow: var(--elev-hover); }

/* ---------- Hero banner ----------
   Adapted from the approved Product Page hero component: full-bleed
   cinematic image, dark left-to-right gradient overlay, on-dark editorial
   copy vertically centered in a constrained column. Reduced height, not
   full-screen — matches the Product Page's wide/short proportions. */
.hero-banner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2.6 / 1;
  min-height: 520px;
  max-height: 600px;
  background: var(--surface-industrial);
}
.hero-banner__media { position: absolute; inset: 0; }
.hero-banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
/* frosted-glass panel — blurs the image on the left, fading to crisp before
   the focal point. Masked so the blur itself tapers off toward the middle. */
.hero-banner__frost {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
          backdrop-filter: blur(10px) saturate(1.05);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 26%, rgba(0,0,0,0.55) 44%, rgba(0,0,0,0) 62%);
          mask-image: linear-gradient(100deg, #000 0%, #000 26%, rgba(0,0,0,0.55) 44%, rgba(0,0,0,0) 62%);
}
/* deep-navy tint over the frost — opaque behind the copy, fading to reveal
   the crisp image on the right. Same tones/blend as the Product Page. */
.hero-banner__overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(9,24,39,0.94) 0%, rgba(11,30,49,0.86) 24%, rgba(11,30,49,0.55) 44%, rgba(11,30,49,0.20) 60%, rgba(11,30,49,0) 76%),
    linear-gradient(0deg, rgba(6,18,32,0.30) 0%, rgba(6,18,32,0) 32%);
}
.hero-banner__inner {
  position: relative; z-index: 3;
  height: 100%;
  display: flex; align-items: center;
  padding-top: 32px; padding-bottom: 32px;
}
.hero-banner__copy { max-width: 620px; }
.hero-banner__lead { margin-bottom: 0; }
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.8vw, 56px);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.025em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.hero-banner .eyebrow-row { margin-bottom: 20px; }

/* hero banner: taller aspect so the copy has room; overlay switches to a
   top-to-bottom gradient (bottom-anchored copy) since the left-right
   treatment doesn't translate to a narrow, portrait-ish frame.
   Placed after the base rules above so it correctly wins the cascade. */
@media (max-width: 860px) {
  .hero-banner { aspect-ratio: 4 / 5; min-height: 560px; max-height: 760px; }
  .hero-banner__media img { object-position: 68% 50%; }
  /* frost + tint switch to a bottom-anchored, top-to-bottom fade */
  .hero-banner__frost {
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 24%, rgba(0,0,0,0.5) 46%, #000 72%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,0) 24%, rgba(0,0,0,0.5) 46%, #000 72%);
  }
  .hero-banner__overlay {
    background:
      linear-gradient(180deg, rgba(9,24,39,0.55) 0%, rgba(9,24,39,0.35) 30%, rgba(11,30,49,0.78) 66%, rgba(11,30,49,0.96) 100%);
  }
  .hero-banner__inner { align-items: flex-end; padding-bottom: 48px; }
  .hero-banner__copy { max-width: 100%; }
}

/* ---------- Hero stats strip (below the banner) ---------- */
.hero-stats { padding-top: clamp(40px, 4.5vw, 64px); padding-bottom: clamp(40px, 4.5vw, 64px); }

/* ---------- Metric strip ---------- */
.metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.metric-strip--2col { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-content: start; }
.metric { background: #FFFFFF; padding: 32px 24px; }
.metric__value {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1;
  color: var(--text-primary);
}
.metric__value--sm { font-size: clamp(28px, 4vw, 40px); }
.metric__label {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 12px;
}

/* ==========================================================================
   Origin — "Who We Are" cinematic opening
   Asymmetrical editorial composition: copy + animated statistics left,
   one large facility photograph right, over an ambient blueprint field.
   A horizontal heritage strip bridges into the Milestones timeline below.
   ========================================================================== */
.origin { position: relative; overflow: hidden; }
.origin__container { position: relative; z-index: 1; }

/* ---- ambient background: blueprint grid, faint ripple, drifting motes ---- */
.origin__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.origin__bg-grid {
  position: absolute; inset: -24px; opacity: 0.04;
  background:
    repeating-linear-gradient(0deg, var(--brand-primary) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, var(--brand-primary) 0 1px, transparent 1px 32px);
  will-change: transform;
}
.origin__bg-ripple {
  position: absolute; right: 10%; top: 34%; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid rgba(0,124,195,0.16);
  transform: translate(50%, -50%);
  animation: origin-ripple 9s ease-out infinite;
}
@keyframes origin-ripple {
  0%   { width: 8px; height: 8px; opacity: 0.45; }
  100% { width: 460px; height: 460px; opacity: 0; }
}
.origin__bg-particles span {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(0,124,195,0.15);
  animation: origin-float 18s linear infinite;
}
.origin__bg-particles span:nth-child(1) { left: 8%;  animation-duration: 19s; animation-delay: 0s; }
.origin__bg-particles span:nth-child(2) { left: 26%; animation-duration: 23s; animation-delay: 4s; }
.origin__bg-particles span:nth-child(3) { left: 44%; animation-duration: 17s; animation-delay: 9s; }
.origin__bg-particles span:nth-child(4) { left: 63%; animation-duration: 21s; animation-delay: 2s; }
.origin__bg-particles span:nth-child(5) { left: 80%; animation-duration: 25s; animation-delay: 12s; }
.origin__bg-particles span:nth-child(6) { left: 92%; animation-duration: 20s; animation-delay: 6s; }
@keyframes origin-float {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: 0.45; }
  90%  { opacity: 0.35; }
  100% { transform: translateY(-760px); opacity: 0; }
}

/* ---- editorial grid ---- */
.origin__grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: stretch;
}

/* scroll-triggered entrance — opacity 0 until .is-in is added by IntersectionObserver */
.origin-reveal { opacity: 0; }
.origin-reveal.is-in { animation: hall-rise 700ms var(--ease-organic) both; animation-delay: var(--d, 0ms); }

.origin__copy { padding-top: 0; }
.origin__headline {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600; line-height: 1.14; letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 24px; max-width: 520px;
  text-wrap: balance;
}
.origin__lead { margin-bottom: 14px; }
.origin__note { margin-top: 0; }

/* animated statistics */
.origin__metrics {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--border-light); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); overflow: hidden;
  margin-top: 32px;
}
.origin-metric {
  position: relative; background: #FFFFFF; padding: 20px 20px 18px;
  transition: transform var(--card-transition), box-shadow var(--card-transition), background var(--card-transition);
}
.origin-metric:hover { transform: translateY(var(--card-lift)); box-shadow: var(--card-shadow-hover); background: #FFFFFF; z-index: 1; }
.origin-metric__value {
  font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 30px); font-weight: 600;
  letter-spacing: -0.015em; line-height: 1; color: var(--text-primary);
}
.origin-metric__label {
  font-family: var(--font-display); font-size: 9px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-secondary); margin-top: 10px;
}

/* ---- immersive photograph ---- */
.origin__visual-wrap { min-width: 0; display: flex; }
.origin__visual {
  position: relative; overflow: hidden; margin: 0; flex: 1;
  min-height: 460px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: var(--elev-floating);
  background: #EDF4FB;
}
/* wrapper is taller than the frame so the photo can drift ±14px on scroll */
.origin__img-wrap { position: absolute; inset: -24px 0; will-change: transform; }
.origin__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 700ms var(--ease-organic);
}
.origin__visual:hover .origin__img { transform: scale(1.025); }
.origin__tint {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(3,21,47,0.05) 0%, rgba(3,21,47,0) 28%, rgba(3,21,47,0) 55%, rgba(3,21,47,0.40) 100%);
}
/* ---- heritage strip: six decades in one line ---- */
.origin-strip { position: relative; z-index: 1; margin-top: clamp(48px, 6vw, 72px); }
.origin-strip__label {
  display: block;
  font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}
.origin-strip__track { position: relative; }
.origin-strip__line { position: absolute; left: 5px; right: 5px; top: 5px; height: 1px; background: var(--border-light); }
.origin-strip__fill {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1400ms var(--ease-organic);
}
.origin-strip.is-in .origin-strip__fill { transform: scaleX(1); }
.origin-strip__items { position: relative; display: flex; justify-content: space-between; gap: 16px; }
.origin-strip__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity 500ms var(--ease-organic), transform 500ms var(--ease-organic);
  transition-delay: calc(var(--i, 0) * 150ms);
}
.origin-strip__item:nth-child(1) { --i: 0; }
.origin-strip__item:nth-child(2) { --i: 1; }
.origin-strip__item:nth-child(3) { --i: 2; }
.origin-strip__item:nth-child(4) { --i: 3; }
.origin-strip__item:nth-child(5) { --i: 4; }
.origin-strip__item:nth-child(6) { --i: 5; }
.origin-strip.is-in .origin-strip__item { opacity: 1; transform: none; }
.origin-strip__dot {
  box-sizing: border-box; width: 11px; height: 11px; border-radius: 50%;
  background: #FFFFFF; border: 2px solid var(--border-medium);
  margin-bottom: 10px;
  transition: border-color 300ms var(--ease-standard), box-shadow 300ms var(--ease-standard);
}
.origin-strip__item:hover .origin-strip__dot { border-color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(0,124,195,0.12); }
.origin-strip__year { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-primary); }
.origin-strip__name { font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--text-primary); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 40px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--border-light); }
.timeline__item { position: relative; padding-bottom: 40px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__node {
  position: absolute; left: -40px; top: 2px;
  width: 16px; height: 16px; border-radius: var(--radius-pill);
  background: #FFFFFF; border: 2px solid var(--border-medium);
  transition: all 300ms var(--ease-standard);
}
.timeline__card {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  background: #FFFFFF; padding: 24px;
  transition: border-color var(--card-transition), box-shadow var(--card-transition), transform var(--card-transition);
  box-shadow: var(--card-shadow-resting);
}
.timeline__item:hover .timeline__card { border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); transform: translateY(var(--card-lift)); }
.timeline__item:hover .timeline__node { border-color: var(--brand-primary); transform: scale(1.15); box-shadow: 0 0 0 4px rgba(0,124,195,0.12); }
.timeline__year { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brand-primary); }
.timeline__title { font-family: var(--font-display); font-size: clamp(20px, 3vw, 25px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--text-primary); }
.timeline__body { font-family: var(--font-body); font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--text-secondary); max-width: 650px; }

.bio-toggle {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: transparent; border: none; padding: 0;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--brand-primary); transition: color 150ms ease;
}
.bio-toggle:hover { color: var(--state-hover-primary); }
.bio-toggle__chev { display: inline-flex; font-size: 9px; transition: transform 300ms var(--ease-standard); }
.bio { margin-top: 16px; }
.bio__body { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 360ms var(--ease-organic), opacity 280ms ease; }
.bio.is-open .bio__body { opacity: 1; }
.bio.is-open .bio-toggle__chev { transform: rotate(180deg); }
.bio__body-inner { padding-top: 14px; }
.bio__body p { font-family: var(--font-body); font-size: 14px; font-weight: 300; line-height: 1.7; color: #334155; margin: 0 0 12px; max-width: 680px; }

.col-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-tertiary); }

/* ---------- Featured director ---------- */
/* Featured director — clean executive card: pure white panel, neutral
   shadow, identity + biography only, content vertically centered. */
.featured {
  position: relative;
  border: 1px solid var(--border-light); border-radius: var(--radius-xl); overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0px 4px 16px rgba(0,0,0,0.05), 0px 16px 48px rgba(15,23,42,0.07);
  margin-bottom: 24px;
  transition: opacity 420ms var(--ease-organic), transform 420ms var(--ease-organic);
}
.featured__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; min-height: 460px; align-items: stretch; }
.featured__portrait { flex: 0 0 clamp(240px, 38%, 460px); min-width: 220px; min-height: 460px; position: relative; overflow: hidden; background: var(--surface-neutral-light); }
.featured__portrait img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; transition: transform 600ms var(--ease-organic); }
.featured__portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(255,255,255,0.45) 86%, rgba(255,255,255,0.85) 100%); pointer-events: none; }
.featured__info {
  flex: 1 1 320px; min-width: 280px;
  padding: clamp(32px, 3.5vw, 56px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
/* identity block — name is the primary focus, designation and company
   step down in size/weight but are strengthened over the previous
   treatment now that the status pill no longer competes for attention */
.featured__name { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 8px; }
.featured__designation { font-family: var(--font-body); font-size: 17px; font-weight: 600; color: #334155; margin: 0 0 6px; white-space: pre-line; }
.featured__company { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); margin: 0; }
.featured__intro { font-family: var(--font-body); font-size: 14.5px; font-weight: 300; line-height: 1.7; color: #334155; margin: 22px 0 0; max-width: 640px; }
.featured .bio { margin-top: 12px; }
.featured .bio-toggle { font-size: 12.5px; }
.featured .bio__body-inner { padding-top: 10px; }
.featured .bio__body p { font-size: 13.5px; margin: 0 0 8px; max-width: 640px; }
.featured__linkedin { margin-left: 0; margin-top: 24px; align-self: flex-start; }

.linkedin-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 14px; border-radius: var(--radius-pill);
  background: #0A66C2; color: #FFFFFF;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  transition: all 220ms ease;
}
.linkedin-btn:hover { background: #004182; transform: translateY(-2px); box-shadow: 0px 6px 16px rgba(10,102,194,0.35); }

/* ---------- Director grid ---------- */
.dir-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.dir-tile {
  cursor: pointer; position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3/4; box-shadow: 0px 2px 8px rgba(0,0,0,0.10);
  transition: transform var(--card-transition), box-shadow var(--card-transition);
  border: none; padding: 0; width: 100%; background: none;
}
.dir-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 360ms ease; }
.dir-tile__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; min-height: 30%;
  background: linear-gradient(180deg, rgba(8,25,55,0) 0%, rgba(8,25,55,0.18) 55%, rgba(8,25,55,0.55) 78%, rgba(8,25,55,0.82) 100%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background 380ms ease, backdrop-filter 380ms ease;
  /* Right padding keeps names and titles clear of the LinkedIn button (9px inset + 28px + 9px gap). */
  padding: 0 46px 11px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  text-align: left;
}
.dir-tile__name { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; line-height: 1.2; color: #FFFFFF; overflow-wrap: break-word; text-shadow: 0 1px 3px rgba(8,25,55,0.6); }
.dir-tile__role { font-family: var(--font-body); font-size: 11px; font-weight: 400; line-height: 1.3; color: #67E8F9; white-space: pre-line; overflow-wrap: break-word; text-shadow: 0 1px 3px rgba(8,25,55,0.6); }
.dir-tile__ring { position: absolute; inset: 0; border-radius: var(--radius-lg); border: 2px solid transparent; transition: border-color 300ms ease; pointer-events: none; box-sizing: border-box; }
.dir-tile__li {
  position: absolute; bottom: 9px; right: 9px; width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3);
  display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF;
  transition: all 280ms var(--ease-organic);
}
.dir-tile__li:hover { background: #0A66C2; border-color: #0A66C2; transform: scale(1.18); box-shadow: 0px 4px 12px rgba(10,102,194,0.5); }
.dir-tile:hover { transform: translateY(var(--card-lift)); box-shadow: 0px 18px 36px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,124,195,0.15); }
.dir-tile:hover .dir-tile__img { filter: brightness(1.08); }
.dir-tile.is-active { transform: translateY(var(--card-lift)); box-shadow: 0px 0px 0px 2px rgba(0,124,195,0.70), 0px 8px 28px rgba(0,124,195,0.22); }
.dir-tile.is-active .dir-tile__ring { border-color: rgba(0,124,195,0.85); }
.dir-tile.is-active:hover { transform: translateY(var(--card-lift)); box-shadow: 0px 0px 0px 2px rgba(0,124,195,0.70), 0px 18px 36px rgba(0,124,195,0.24); }

/* ---------- Global Presence — interactive network globe ----------
   Split composition: copy + metrics (40%) beside a canvas-rendered globe
   (60%) with routes radiating from India. Pure Canvas 2D — no libraries. */
.gp { overflow: hidden; }
.gp__grid {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.gp__lead { margin-bottom: 48px; }

/* metrics — 2×2 with hairline dividers; a quiet storytelling moment.
   Each stat enters blurred and 20px low, sharpens into place (staggered),
   counts up with a soft glow, then settles with a single pulse. */
.gp__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.gp-stat {
  border-left: 1px solid rgba(255,255,255,0.14); padding-left: 20px;
  opacity: 0; transform: translateY(20px); filter: blur(6px);
  transition: opacity 700ms var(--ease-organic), transform 700ms var(--ease-organic), filter 700ms var(--ease-organic);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.gp-stat:nth-child(1) { --i: 0; }
.gp-stat:nth-child(2) { --i: 1; }
.gp-stat:nth-child(3) { --i: 2; }
.gp-stat:nth-child(4) { --i: 3; }
.gp__stats.is-in .gp-stat { opacity: 1; transform: none; filter: none; }
.gp-stat__value {
  font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 46px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1; color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  transition: text-shadow 600ms ease;
}
.gp-stat.is-counting .gp-stat__value { text-shadow: 0 0 20px rgba(96,180,255,0.55); }
.gp-stat.is-done .gp-stat__value { animation: gp-stat-settle 700ms var(--ease-standard) 1; }
@keyframes gp-stat-settle {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.028); }
  100% { transform: scale(1); }
}
.gp-stat__suffix { display: inline; }
.gp-stat__label { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 12px; }

/* globe stage */
.gp__globe-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 560px;
  justify-self: center;
  width: min(100%, 560px);
  will-change: transform;
}
.gp__globe-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#gpGlobe { cursor: grab; touch-action: pan-y; }
#gpGlobe.is-dragging { cursor: grabbing; }

/* destination tooltip — dark frosted glass */
.gp__tooltip {
  position: absolute; z-index: 3; pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
  padding: 10px 14px; border-radius: 12px;
  background: rgba(6,24,48,0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  white-space: nowrap;
}
.gp__tooltip-c { display: block; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: #FFFFFF; }
.gp__tooltip-t { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 300; color: rgba(255,255,255,0.62); margin-top: 2px; }
.gp__tooltip-r { display: block; font-family: var(--font-display); font-size: 8px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-glow); margin-top: 6px; }

/* region chips */
.gp__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(32px, 4vw, 48px); }
.gp-chip {
  box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 20px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1;
  transition: background 300ms var(--ease-standard), border-color 300ms var(--ease-standard),
              color 300ms var(--ease-standard), box-shadow 300ms var(--ease-standard), transform 300ms var(--ease-standard);
}
.gp-chip__n { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--brand-glow); opacity: 0.85; }
.gp-chip:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.26); transform: translateY(-2px); }
.gp-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(14,165,233,0.35); }
.gp-chip.is-active {
  background: rgba(46,168,255,0.12);
  border-color: rgba(46,168,255,0.55);
  color: #FFFFFF;
  box-shadow: 0 0 22px rgba(46,168,255,0.18);
}

/* hint */
.gp__hint {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 24px 0 0;
  font-family: var(--font-body); font-size: 12px; font-weight: 300;
  color: rgba(255,255,255,0.45);
}
.gp__hint svg { opacity: 0.6; }

/* feature strip — dark frosted-glass panels with blueprint micro-detail */
.gp__features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px;
  margin-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: clamp(28px, 3vw, 40px);
}
.gp-feature {
  position: relative; overflow: hidden;
  display: flex; gap: 16px; align-items: flex-start;
  padding: 24px 22px;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(16,42,74,0.55) 0%, rgba(8,24,48,0.65) 100%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(96,170,240,0.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 0 40px rgba(46,130,210,0.05),
    0 12px 32px rgba(2,8,20,0.45);
  transition: transform var(--card-transition), border-color var(--card-transition),
              box-shadow var(--card-transition), background var(--card-transition);
}
/* almost-invisible blueprint grid inside the glass */
.gp-feature::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
  background:
    repeating-linear-gradient(0deg, #7FB7E8 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, #7FB7E8 0 1px, transparent 1px 22px);
  transition: opacity var(--card-transition);
}
/* precision registration mark, top-right */
.gp-feature::after {
  content: ""; position: absolute; top: 11px; right: 11px; width: 8px; height: 8px; opacity: 0.35;
  background:
    linear-gradient(#7FB7E8, #7FB7E8) center / 1px 8px no-repeat,
    linear-gradient(#7FB7E8, #7FB7E8) center / 8px 1px no-repeat;
  transition: opacity var(--card-transition);
}
.gp-feature:hover {
  transform: translateY(var(--card-lift));
  background: linear-gradient(165deg, rgba(22,52,88,0.65) 0%, rgba(10,30,58,0.72) 100%);
  border-color: rgba(120,190,255,0.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 46px rgba(46,130,210,0.08),
    0 18px 44px rgba(2,8,20,0.55),
    0 0 24px rgba(46,140,235,0.10);
}
.gp-feature:hover::before { opacity: 0.08; }
.gp-feature:hover::after { opacity: 0.6; }
/* icon in a circular glass button with ambient glow */
.gp-feature__icon {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 28%, rgba(88,160,235,0.28), rgba(20,50,90,0.35) 70%);
  border: 1px solid rgba(130,195,255,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 16px rgba(46,140,235,0.18);
  color: #CFE6FF;
  transition: box-shadow 500ms var(--ease-standard), border-color 500ms var(--ease-standard);
}
.gp-feature:hover .gp-feature__icon {
  border-color: rgba(150,210,255,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 26px rgba(60,160,250,0.35);
  animation: gp-icon-pulse 1100ms var(--ease-standard) 1;
}
@keyframes gp-icon-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.gp-feature__title { position: relative; z-index: 1; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: #FFFFFF; margin: 3px 0 7px; }
.gp-feature__body { position: relative; z-index: 1; font-family: var(--font-body); font-size: 12.5px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,0.66); margin: 0; }

/* ---------- 3-up cards ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }

/* ---------- Manufacturing showcase ---------- */
.mfg-hero {
  position: relative;
  border: 1px solid rgba(0,124,195,0.15);
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0,124,195,0.05) 0%, rgba(240,248,255,0.8) 40%, #FFFFFF 100%);
  box-shadow: 0px 4px 16px rgba(0,0,0,0.05), 0px 16px 48px rgba(0,124,195,0.07);
}
.mfg-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.04;
  background:
    repeating-linear-gradient(0deg, var(--brand-primary) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--brand-primary) 0 1px, transparent 1px 40px);
}
.mfg-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.9fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(16px, 2vw, 24px);
  min-height: 480px;
}
.mfg-hero__media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: linear-gradient(135deg, #EEF4FA 0%, #F8FAFC 100%);
  box-shadow: 0 6px 20px rgba(15,23,42,0.08), 0 22px 48px rgba(0,124,195,0.09);
  min-height: 420px;
}
/* slot bleeds vertically so the photo can drift gently on scroll (parallax) */
.mfg-hero__slot { position: absolute; inset: -18px 0; transition: opacity 420ms var(--ease-organic); will-change: transform; }
.mfg-hero__slot .image-slot { position: absolute; inset: 0; border: none; border-radius: 0; }
.mfg-hero__slot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-organic);
}
.mfg-hero__media:hover .mfg-hero__slot img { transform: scale(1.025); }
/* white-to-blue engineering tint over the imagery */
.mfg-hero__tint {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 45%, rgba(0,124,195,0.08) 100%);
}
/* blueprint scan sweep on facility switch */
.mfg-hero__scan {
  position: absolute; left: 0; right: 0; top: -14%; height: 14%;
  z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(6,182,212,0) 0%, rgba(6,182,212,0.14) 55%, rgba(0,124,195,0.30) 100%);
  border-bottom: 1px solid rgba(6,182,212,0.55);
}
.mfg-hero__media.is-scanning .mfg-hero__scan { animation: mfg-scan 700ms var(--ease-standard); }
@keyframes mfg-scan {
  0%   { top: -14%; opacity: 1; }
  100% { top: 114%; opacity: 1; }
}
.mfg-hero__tag {
  position: absolute; top: 14px; left: 14px; z-index: 4;
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-light);
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-secondary);
}

.mfg-hero__info { display: flex; flex-direction: column; justify-content: center; padding: clamp(8px, 1.5vw, 16px) clamp(8px, 1.5vw, 16px) clamp(8px, 1.5vw, 16px) 0; }
.mfg-hero__loc {
  font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand-primary);
}
.mfg-hero__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700; line-height: 1.15; letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 12px 0 12px;
}
.mfg-hero__desc {
  font-family: var(--font-body); font-size: 14px; font-weight: 300; line-height: 1.65;
  color: #334155; max-width: 460px; margin: 0 0 16px;
}
.mfg-hero__pills { display: flex; flex-wrap: wrap; gap: 10px; }
/* capability chips — frosted blue glass with an inner highlight */
.mfg-pill {
  box-sizing: border-box;
  height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(224,242,254,0.55) 0%, rgba(186,230,253,0.28) 100%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,124,195,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 1px 3px rgba(15,23,42,0.04);
  color: var(--state-hover-primary);
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1;
  transition: transform 250ms var(--ease-standard), border-color 250ms var(--ease-standard), box-shadow 250ms var(--ease-standard);
}
.mfg-pill svg { display: block; flex: 0 0 auto; width: 12px; height: 12px; color: var(--brand-primary); }
.mfg-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(0,124,195,0.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 6px 14px rgba(0,124,195,0.16);
}
/* certifications — neutral glass, quietly distinct from capabilities */
.mfg-pill--cert {
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(248,250,252,0.6) 100%);
  border-color: var(--border-medium);
  color: var(--text-primary);
}
.mfg-pill--cert svg { color: var(--text-secondary); }
.mfg-pill--cert:hover { border-color: rgba(0,124,195,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 14px rgba(15,23,42,0.10); }

.mfg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.mfg-stat {
  position: relative; overflow: hidden;
  box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 96px;
  border: 1px solid var(--card-border); border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
  padding: 18px;
  box-shadow: var(--card-shadow-resting);
  animation: mfg-rise 420ms var(--ease-organic) both;
  animation-delay: calc(80ms + var(--i, 0) * 50ms);
  transition: transform var(--card-transition), box-shadow var(--card-transition), border-color var(--card-transition);
}
.mfg-stat:hover {
  transform: translateY(var(--card-lift));
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
}
/* soft highlight sweeps across on hover */
.mfg-stat::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(191,225,247,0.30), transparent);
  transform: skewX(-18deg);
  opacity: 0; pointer-events: none;
}
.mfg-stat:hover::after { animation: vcard-sweep 700ms var(--ease-standard) 40ms; }
.mfg-stat__value { font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: -0.015em; line-height: 1; color: var(--text-primary); }
.mfg-stat__label { font-family: var(--font-display); font-size: 9px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-secondary); margin-top: 11px; line-height: 1.4; }
@keyframes mfg-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Location selector & capability strip share one button system:
   identical radius, border weight, shadow steps, and transition —
   tabs (navigation) differ from pills (informational) only in role/state. */
.mfg-selector {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
}
.mfg-loc {
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  background: #FFFFFF; color: var(--text-primary);
  font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1;
  box-shadow: var(--elev-resting);
  transition: transform 250ms var(--ease-standard), border-color 250ms var(--ease-standard), box-shadow 250ms var(--ease-standard), background 250ms var(--ease-standard), color 250ms var(--ease-standard);
}
.mfg-loc__no {
  font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  min-width: 16px; text-align: right;
  color: var(--text-tertiary);
  transition: color 250ms var(--ease-standard);
}
.mfg-loc:hover { transform: translateY(-2px); border-color: rgba(0,124,195,0.35); box-shadow: 0px 6px 16px rgba(0,124,195,0.15); }
.mfg-loc:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(14,165,233,0.3); }
.mfg-loc.is-active {
  background: linear-gradient(150deg, #1B8FD0 0%, #007CC3 55%, #0273B4 100%);
  color: #FFFFFF; border-color: transparent; font-weight: 600;
  box-shadow: 0 8px 22px rgba(0,124,195,0.28), 0 0 0 4px rgba(0,124,195,0.07);
}
.mfg-loc.is-active .mfg-loc__no { color: rgba(255,255,255,0.72); }
/* animated underline indicator on the active tab */
.mfg-loc::after {
  content: ""; position: absolute; bottom: 7px; left: 50%; width: 18px; height: 2px;
  border-radius: 1px;
  background: rgba(255,255,255,0.85);
  transform: translateX(-50%) scaleX(0); transform-origin: center;
  transition: transform 300ms var(--ease-organic) 120ms;
}
.mfg-loc.is-active::after { transform: translateX(-50%) scaleX(1); }

/* Capability strip */
.mfg-caps { margin-top: 48px; }
.mfg-caps__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.mfg-cap {
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  background: #FFFFFF; color: var(--text-primary);
  font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1;
  box-shadow: var(--elev-resting);
  transition: transform 200ms var(--ease-standard), border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}
.mfg-cap svg { display: block; flex: 0 0 auto; color: var(--brand-primary); }
.mfg-cap:hover { transform: translateY(-2px); border-color: rgba(0,124,195,0.35); box-shadow: 0px 6px 16px rgba(0,124,195,0.15); }

/* ---------- Sustainability — editorial feature ----------
   Asymmetric composition: intro + CSS glass-water sphere with floating
   frosted capability chips, then statistics reimagined as editorial cards
   that pair copy with a media panel. Shares the site card/motion tokens. */
.sus { position: relative; overflow: hidden; }
.sus__ambient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(760px 460px at 82% 6%, rgba(6,182,212,0.08), transparent 60%),
    radial-gradient(680px 520px at 8% 96%, rgba(20,184,166,0.05), transparent 62%);
}
.sus__wrap { position: relative; z-index: 1; }

.sus__top {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 4vw, 64px); align-items: center;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.sus__lead { margin-bottom: 28px; }
/* frosted "since 1964" pill */
.sus__pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 12px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-light);
  box-shadow: var(--card-shadow-resting);
  font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text-primary);
}
.sus__pill-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-pill);
  background: rgba(20,184,166,0.12); color: var(--status-success); flex: 0 0 auto;
}
.sus__pill-icon svg { width: 14px; height: 14px; display: block; }

/* ---- cinematic hero image ---- */
.sus__hero-media {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 3.1;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: 0 6px 20px rgba(15,23,42,0.10), 0 30px 60px rgba(15,23,42,0.14);
}
.sus__hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 900ms var(--ease-organic);
}
.sus__hero-media:hover img { transform: scale(1.05); }
/* subtle legibility gradient across the photograph */
.sus__hero-tint {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,21,47,0.10) 0%, rgba(3,21,47,0) 26%, rgba(3,21,47,0) 52%, rgba(3,21,47,0.55) 100%);
}
/* single frosted accent — top-left, understated */
.sus__hero-badge {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 30px; padding: 0 15px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: var(--card-shadow-resting);
  font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-primary);
}
.sus__hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-success); box-shadow: 0 0 8px rgba(20,184,166,0.7); }

/* ---- metrics: editorial statistic cards ---- */
.sus__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sus-card {
  display: grid; grid-template-columns: 1fr minmax(120px, 34%);
  overflow: hidden;
  border: 1px solid var(--card-border); border-radius: var(--radius-xl);
  background: #FFFFFF; box-shadow: var(--card-shadow-resting);
  transition: transform var(--card-transition), box-shadow var(--card-transition), border-color var(--card-transition);
}
.sus-card:hover { transform: translateY(var(--card-lift)); box-shadow: var(--card-shadow-hover); border-color: var(--card-border-hover); }
.sus-card__col { display: flex; flex-direction: column; padding: 28px 24px; }
.sus-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: rgba(20,184,166,0.10); color: var(--status-success);
  margin-bottom: 22px;
}
.sus-card__icon svg { width: 19px; height: 19px; display: block; }
.sus-card__value { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--status-success); }
.sus-card__unit { font-size: 0.62em; font-weight: 500; margin-left: 4px; color: var(--status-success); opacity: 0.85; }
.sus-card__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--text-primary); margin: 14px 0 8px; }
.sus-card__body { font-family: var(--font-body); font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.sus-card__media { position: relative; background: linear-gradient(150deg, rgba(6,182,212,0.10) 0%, rgba(20,184,166,0.06) 55%, rgba(240,248,255,0.6) 100%); overflow: hidden; }
.sus-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-organic); }
.sus-card:hover .sus-card__media img { transform: scale(1.04); }
.sus-card__media .image-slot { position: absolute; inset: 0; border: none; border-radius: 0; background: transparent; }

/* ---------- Values — the human pause ----------
   Warm, premium cards: soft light, glass-like depth, per-value motifs
   built from gradients and simple geometry. No blueprint, no technical
   labels — this section communicates purpose and trust, not machinery. */
.vals { position: relative; overflow: hidden; background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFE 55%, #FFFFFF 100%); }
.vals__container { position: relative; z-index: 1; }

/* ambient background — soft light, one faint ripple, drifting motes */
.vals__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.vals__bg-light {
  position: absolute; top: -20%; left: 50%; width: 90%; height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,124,195,0.05), transparent 65%);
}
.vals__bg-ripple {
  position: absolute; left: 12%; bottom: 18%; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid rgba(6,182,212,0.14);
  transform: translate(-50%, 50%);
  animation: vals-ripple 11s ease-out infinite;
}
@keyframes vals-ripple {
  0%   { width: 8px; height: 8px; opacity: 0.4; }
  100% { width: 380px; height: 380px; opacity: 0; }
}
.vals__bg-motes span {
  position: absolute; bottom: -8px; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(0,124,195,0.13);
  animation: vals-float 20s linear infinite;
}
.vals__bg-motes span:nth-child(1) { left: 14%; animation-duration: 21s; animation-delay: 0s; }
.vals__bg-motes span:nth-child(2) { left: 38%; animation-duration: 25s; animation-delay: 7s; }
.vals__bg-motes span:nth-child(3) { left: 66%; animation-duration: 18s; animation-delay: 3s; }
.vals__bg-motes span:nth-child(4) { left: 88%; animation-duration: 23s; animation-delay: 11s; }
@keyframes vals-float {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.4; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-640px); opacity: 0; }
}

/* grid — 3 × 2, equal heights */
.vals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* scroll entrance */
.vals-reveal { opacity: 0; }
.vals-reveal.is-in { animation: hall-rise 700ms var(--ease-organic) both; animation-delay: var(--d, 0ms); }

/* card */
.vcard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 264px;
  padding: 36px 32px 32px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
  border: 1px solid rgba(226,232,240,0.9);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 8px 24px rgba(15,23,42,0.04);
  transition: transform 250ms var(--ease-standard), box-shadow 250ms var(--ease-standard),
              border-color 250ms var(--ease-standard), background 250ms ease;
}
.vcard:hover {
  transform: translateY(-8px);
  background: #FFFFFF;
  border-color: rgba(0,124,195,0.22);
  box-shadow: 0 2px 4px rgba(15,23,42,0.03), 0 18px 44px rgba(0,124,195,0.13);
}
/* gentle light sweep on hover */
.vcard::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(191,225,247,0.35), transparent);
  transform: skewX(-18deg);
  opacity: 0; pointer-events: none;
}
.vcard:hover::after { animation: vcard-sweep 750ms var(--ease-standard) 50ms; }
@keyframes vcard-sweep {
  0%   { transform: skewX(-18deg) translateX(0); opacity: 1; }
  100% { transform: skewX(-18deg) translateX(360%); opacity: 0; }
}

/* per-value motif — pure gradient/geometry, extremely subtle.
   Follows the pointer a few px via --mx/--my set on the grid. */
.vcard__motif {
  position: absolute; inset: 0; pointer-events: none;
  transform: translate(calc(var(--mx, 0) * 4px), calc(var(--my, 0) * 4px));
  transition: opacity 250ms ease;
}
.vcard:hover .vcard__motif { opacity: 0.85; }
.vcard__motif--shield {
  background:
    radial-gradient(140px 140px at 86% 10%, rgba(0,124,195,0.08), transparent 70%),
    conic-gradient(from 200deg at 88% 8%, transparent 0 78%, rgba(0,124,195,0.06) 86%, transparent 94%);
}
.vcard__motif--light {
  /* diagonal light streak removed per request (Innovation card) */
  background: none;
}
.vcard__motif--ripple {
  background: repeating-radial-gradient(circle at 90% 96%, rgba(20,184,166,0.07) 0 1px, transparent 1px 26px);
}
.vcard__motif--focus {
  background: repeating-radial-gradient(circle at 88% 14%, rgba(0,124,195,0.075) 0 1px, transparent 1px 18px);
  -webkit-mask-image: radial-gradient(220px 220px at 88% 14%, #000, transparent 70%);
  mask-image: radial-gradient(220px 220px at 88% 14%, #000, transparent 70%);
}
.vcard__motif--structure {
  background: repeating-linear-gradient(-52deg, rgba(15,23,42,0.028) 0 1px, transparent 1px 22px);
  -webkit-mask-image: linear-gradient(280deg, #000 20%, transparent 65%);
  mask-image: linear-gradient(280deg, #000 20%, transparent 65%);
}
.vcard__motif--gleam {
  /* crossing diagonal "X" bands removed per request (Excellence card) */
  background: none;
}

/* icon — large, in a soft gradient tile; strokes draw themselves on entry */
.vcard__icon {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(0,124,195,0.10), rgba(6,182,212,0.05));
  color: var(--brand-primary);
  margin-bottom: 22px;
  transition: transform 250ms var(--ease-standard), background 250ms ease;
}
.vcard:hover .vcard__icon { transform: translateY(-2px) scale(1.06); background: linear-gradient(145deg, rgba(0,124,195,0.15), rgba(6,182,212,0.08)); }
.vcard__icon svg { width: 26px; height: 26px; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .vals-reveal .vcard-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .vals-reveal.is-in .vcard-draw { animation: vcard-draw 1000ms var(--ease-standard) forwards; animation-delay: calc(var(--d, 0ms) + 250ms); }
}
@keyframes vcard-draw { to { stroke-dashoffset: 0; } }

/* type — stronger titles, scannable copy, no technical labels */
.vcard__title {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  line-height: 1.25; letter-spacing: -0.01em; color: var(--text-primary);
  margin: 0 0 10px;
}
.vcard__desc {
  position: relative; z-index: 1;
  font-family: var(--font-body); font-size: 14px; font-weight: 300; line-height: 1.7;
  color: var(--text-secondary); margin: 0; max-width: 300px;
}

/* ---------- Certifications — marquee showcase ----------
   A continuous right-to-left logo walk: two identical halves inside one
   track animated to -50% for a seamless loop. GPU transform only, pauses
   on hover, edge-faded with a mask. Items are museum exhibits, not cards. */
.cert-marquee {
  overflow: hidden;
  padding: 8px 0 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.cert-marquee__track {
  display: flex; width: max-content;
  animation: cert-scroll 48s linear infinite;
  will-change: transform;
}
.cert-marquee:hover .cert-marquee__track { animation-play-state: paused; }
.cert-marquee__half { display: flex; }
@keyframes cert-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.cert-card {
  position: relative; overflow: hidden;
  flex: 0 0 auto; width: 216px; margin-right: 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 20px 26px;
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  border-radius: 22px;
  box-shadow: var(--card-shadow-resting);
  transition: transform var(--card-transition), box-shadow var(--card-transition), border-color var(--card-transition);
}
/* whisper of blueprint texture, consistent with the page */
.cert-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.03;
  background:
    repeating-linear-gradient(0deg, var(--brand-primary) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--brand-primary) 0 1px, transparent 1px 24px);
}
.cert-card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); border-color: var(--card-border-hover); }
.cert-card__logo {
  position: relative; z-index: 1;
  height: 76px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.cert-card__logo img { max-height: 76px; max-width: 156px; object-fit: contain; transition: transform 300ms var(--ease-standard); }
.cert-card:hover .cert-card__logo img,
.cert-card:hover .cert-seal { transform: scale(1.03); }
.cert-card__name { position: relative; z-index: 1; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.cert-card__label { position: relative; z-index: 1; font-family: var(--font-display); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); margin-top: 7px; line-height: 1.5; }

/* interim typographic seal — replaced automatically once an official logo
   file is set on the data entry (`img` field) */
.cert-seal {
  width: 72px; height: 72px; border-radius: 50%;
  border: 1.5px solid rgba(15,23,42,0.7);
  box-shadow: inset 0 0 0 3px rgba(15,23,42,0.04);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform 300ms var(--ease-standard);
}
.cert-seal__org { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: 0.01em; line-height: 1; color: var(--text-primary); }
.cert-seal--word .cert-seal__org { font-size: 19px; }
.cert-seal__num { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-secondary); margin-top: 3px; }

/* ---------- Hall of Recognition ----------
   Interactive museum exhibit: a decade timeline (newest first) switches a
   single stage below — dark frosted-glass featured panel, oversized decade
   numeral, cascading honour rows. No page jumps; content swaps in place. */
/* Awards has no adjacent visual beside its intro — matches the wide
   standalone-intro measure used by Board / Values / Investor Relations.
   Desktop-only; tablet and mobile keep the tighter default measure. */
.hall__heading { max-width: 760px; margin-bottom: 24px; }
.hall__lead { max-width: 560px; margin-bottom: 24px; }
@media (min-width: 981px) {
  .hall__heading { max-width: 860px; }
  .hall__lead { max-width: none; }
}
.hall__caption {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 56px;
}
.hall__caption-dot { width: 3px; height: 3px; border-radius: var(--radius-pill); background: var(--border-medium); }

/* decade timeline — primary navigation */
.hall-rail { margin-bottom: 48px; }
.hall-rail__inner { position: relative; }
.hall-rail__line { position: absolute; left: 6px; right: 6px; top: 5px; height: 1px; background: var(--border-light); }
.hall-rail__fill {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary));
  transform: scaleX(0); transform-origin: left;
  transition: transform 500ms var(--ease-organic);
}
.hall-rail__nodes { position: relative; display: flex; justify-content: space-between; }
.hall-node {
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.hall-node__dot {
  box-sizing: border-box; width: 11px; height: 11px; border-radius: var(--radius-pill);
  background: #FFFFFF; border: 2px solid var(--border-medium);
  transition: border-color 300ms var(--ease-standard), background 300ms var(--ease-standard), box-shadow 300ms var(--ease-standard);
}
.hall-node__label {
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 300ms var(--ease-standard);
}
.hall-node:hover .hall-node__dot { border-color: var(--brand-primary); }
.hall-node:hover .hall-node__label { color: var(--brand-primary); }
.hall-node:focus-visible { outline: none; }
.hall-node:focus-visible .hall-node__dot { box-shadow: 0 0 0 3px rgba(14,165,233,0.3); }
.hall-node.is-active .hall-node__dot {
  border-color: var(--brand-primary); background: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(0,124,195,0.14), 0 0 14px rgba(0,124,195,0.45);
}
.hall-node.is-active .hall-node__label { color: var(--brand-primary); }

/* the stage — one decade at a time, layered for depth */
.hall-stage {
  position: relative; overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 24px;
  background:
    radial-gradient(900px 480px at 88% -12%, rgba(0,124,195,0.07), transparent 60%),
    radial-gradient(700px 420px at -8% 112%, rgba(6,182,212,0.05), transparent 60%),
    #FFFFFF;
  box-shadow: var(--elev-resting);
}
.hall-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.03;
  background:
    repeating-linear-gradient(0deg, var(--brand-primary) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, var(--brand-primary) 0 1px, transparent 1px 32px);
}
.hall-stage__inner { position: relative; z-index: 1; padding: clamp(28px, 4vw, 56px); min-height: 520px; }
.hall-stage__numeral {
  position: absolute; top: -0.08em; right: -8px; z-index: 0;
  font-family: var(--font-display); font-size: clamp(140px, 22vw, 280px); font-weight: 700; line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(0,124,195,0.04);
  -webkit-text-stroke: 1px rgba(15,23,42,0.10);
  pointer-events: none; user-select: none;
}

/* stage entrance choreography — everything re-animates on decade switch */
.hall-anim { opacity: 0; animation: hall-rise 600ms var(--ease-organic) both; animation-delay: var(--d, 0ms); }
@keyframes hall-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.hall-stage__head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hall-stage__no { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-tertiary); }
.hall-stage__title {
  font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 700;
  line-height: 1.2; letter-spacing: -0.015em; color: var(--text-primary);
  margin: 10px 0 10px;
}
.hall-stage__note { font-family: var(--font-body); font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--text-secondary); margin: 0; max-width: 520px; }

/* dark frosted glass statistic chips */
.hall-stage__stats { display: flex; gap: 12px; flex-wrap: wrap; }
.hall-stat {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 132px; padding: 14px 18px;
  border-radius: 14px;
  background: var(--surface-industrial); /* #03152F — exact visible footer navy */
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 26px rgba(3,21,47,0.18);
}
.hall-stat__v { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: #FFFFFF; }
.hall-stat__l { font-family: var(--font-display); font-size: 8.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

.hall-stage__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: 40px; align-items: start;
}

/* featured honour — dark frosted glass exhibition panel */
.hall-feat {
  position: relative; overflow: hidden;
  border-radius: 20px;
  background: var(--surface-industrial); /* #03152F — exact visible footer navy */
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 56px rgba(3,21,47,0.28);
  padding: clamp(26px, 3vw, 40px);
  color: #FFFFFF;
  transition: transform 300ms var(--ease-standard), box-shadow 300ms var(--ease-standard), border-color 300ms var(--ease-standard);
}
.hall-feat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* soft corner glow only — the white sheen was shifting the card's navy away
     from the footer's #03152F, so it was removed for an exact colour match */
  background:
    radial-gradient(420px 220px at 82% -4%, rgba(46,168,255,0.10), transparent 60%);
}
.hall-feat::after {
  content: ""; position: absolute; top: 0; left: 0; right: 40%; height: 1px;
  background: linear-gradient(90deg, rgba(6,182,212,0.6), transparent);
}
.hall-feat:hover { transform: translateY(-3px); border-color: rgba(46,168,255,0.30); box-shadow: 0 30px 64px rgba(3,21,47,0.34); }
.hall-feat__medal { position: absolute; top: 22px; right: 22px; opacity: 0.9; }
.hall-feat__laurel {
  display: block; width: 28px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, #C4A46A, #8F7342);
  margin-bottom: 20px;
}
.hall-feat__year { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brand-glow); }
.hall-feat__name {
  font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 29px); font-weight: 700;
  line-height: 1.22; letter-spacing: -0.01em; color: #FFFFFF;
  margin: 12px 0 8px; max-width: 480px;
}
.hall-feat__org { font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.78); }
.hall-feat__body { font-family: var(--font-body); font-size: 13.5px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.58); margin: 16px 0 0; max-width: 480px; }
.hall-feat__cat {
  margin-top: 22px;
  min-height: 26px; display: inline-flex; align-items: center; padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  font-family: var(--font-display); font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #7DD3FC;
}

/* honour list — museum caption rows */
.hall-list-label {
  display: block;
  font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.hall-row {
  display: flex; align-items: baseline; gap: 12px 20px; flex-wrap: wrap;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-light);
  transition: background 200ms ease, padding 200ms ease;
}
.hall-row:last-of-type { border-bottom: none; }
.hall-row:hover { background: var(--surface-neutral-light); border-radius: 10px; padding-left: 12px; padding-right: 12px; }
.hall-row__year { flex: 0 0 72px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--brand-primary); }
.hall-row__name { flex: 1 1 240px; font-family: var(--font-display); font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--text-primary); }
.hall-row__org { flex: 1 1 100%; margin-left: 92px; font-family: var(--font-body); font-size: 12px; font-weight: 300; color: var(--text-secondary); }

/* curator footnote (early decades) */
.hall-stage__foot {
  border-left: 2px solid rgba(0,124,195,0.25);
  padding: 6px 0 6px 18px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 300; line-height: 1.7;
  color: var(--text-secondary);
  max-width: 420px; margin: 0;
}
.hall-list-wrap .hall-stage__foot { margin-top: 24px; }

/* ---------- Investor Relations hub ----------
   A navigation layer only — every card links out to an existing,
   unchanged page on ionexchangeglobal.com. Navy per the client's spec. */
:root { --ir-navy: #0B1F3A; }

/* Category grid */
.ir-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.ir-card {
  position: relative; overflow: hidden;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: 28px;
  background: #FFFFFF;
  border: 1px solid rgba(0,124,195,0.14);
  border-radius: 20px;
  box-shadow: var(--card-shadow-resting);
  cursor: pointer;
  transition: transform var(--card-transition), border-color var(--card-transition), box-shadow var(--card-transition);
}
.ir-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.04;
  background:
    repeating-linear-gradient(0deg, var(--brand-primary) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--brand-primary) 0 1px, transparent 1px 24px);
  transition: opacity var(--card-transition);
}
.ir-card:hover {
  transform: translateY(var(--card-lift));
  border-color: rgba(0,124,195,0.40);
  box-shadow: var(--card-shadow-hover);
}
.ir-card:hover::before { opacity: 0.07; }
.ir-card__icon {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(0,124,195,0.05);
  border: 1px solid rgba(0,124,195,0.16);
  color: var(--brand-primary);
  transition: background 300ms var(--ease-standard), border-color 300ms var(--ease-standard), color 300ms var(--ease-standard);
}
.ir-card:hover .ir-card__icon { background: var(--brand-primary); border-color: transparent; color: #FFFFFF; }
.ir-card__title {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-size: 17.5px; font-weight: 700; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ir-navy);
  margin: 16px 0 6px;
}
.ir-card__desc {
  position: relative; z-index: 1; flex: 1;
  font-family: var(--font-body); font-size: 13px; font-weight: 300; line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 20px;
}
.ir-card__cta {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  color: var(--brand-primary);
}
.ir-card__cta span { transition: transform 200ms var(--ease-standard); }
.ir-card:hover .ir-card__cta span { transform: translateX(3px); }

/* ---------- CTA ---------- */
.cta__inner { text-align: center; }
.cta__title { margin: 0 auto 24px; max-width: 760px; }
.cta__lead { margin: 0 auto 40px; }
/* on the light CTA band, the primary button uses brand blue rather than
   the default dark-navy .btn--primary fill, to match the accent color
   used across the rest of the page */
#cta .btn--primary { background: var(--brand-primary); }
#cta .btn--primary:hover { background: var(--state-hover-primary); }

/* ---------- Footer ---------- */
.footer { color: rgba(255,255,255,0.7); }
.footer__inner { padding-top: clamp(40px, 4.5vw, 64px); padding-bottom: 32px; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 48px 32px; padding-bottom: 64px; }
.footer__about { grid-column: 1 / -1; max-width: 360px; }
.footer__about .brand { margin-bottom: 16px; }
.footer__blurb { font-family: var(--font-body); font-size: 13.5px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,0.6); max-width: 340px; }
.footer__cols { display: contents; }
.footer__col-heading { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 20px; }
.footer__col-links { display: flex; flex-direction: column; gap: 12px; }
.footer__col-links a { font-family: var(--font-body); font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,0.7); transition: color 150ms ease; }
.footer__col-links a:hover { color: var(--brand-glow); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.08); }
.footer__copy { font-family: var(--font-display); font-size: 10px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.footer__legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__legal a { font-family: var(--font-display); font-size: 10px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.45); transition: color 150ms ease; }
.footer__legal a:hover { color: var(--brand-glow); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .dir-grid { grid-template-columns: repeat(3, 1fr); }
  .mfg-hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .mfg-hero__media { min-height: 300px; }
  .mfg-hero__info { padding: 4px 8px 12px; }
  .mfg-selector { justify-content: center; gap: 12px 16px; }
  /* global presence: globe stacks under copy; features go two-up */
  .gp__grid { grid-template-columns: 1fr; }
  .gp__globe-wrap { width: min(100%, 460px); }
  .gp__features { grid-template-columns: 1fr 1fr; gap: 14px; }
  /* sustainability: intro over hero image; metrics stay three-up until mobile */
  .sus__top { grid-template-columns: 1fr; gap: 36px; }
  .sus__hero-media { aspect-ratio: 16 / 9; }
  /* values: two columns on tablet */
  .vals-grid { grid-template-columns: repeat(2, 1fr); }
  /* hall: stage stacks into a single column */
  .hall-stage__grid { grid-template-columns: 1fr; }
  .hall-stage__inner { min-height: 0; }
  .hall-stage__numeral { font-size: clamp(110px, 26vw, 180px); }
  /* origin: photo moves below copy; heritage strip scrolls horizontally */
  .origin__grid { grid-template-columns: 1fr; }
  .origin__visual { min-height: 340px; }
  .origin-strip__track { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .origin-strip__items { min-width: 720px; }
}

@media (max-width: 720px) {
  .split { gap: 32px; }
  .metric { padding: 24px 20px; }
  .mega__panel { grid-template-columns: 1fr; }
  .mega__col--categories, .mega__col--links { border-right: none; padding-right: 0; border-bottom: 1px solid rgba(226,232,240,0.6); padding-bottom: 16px; }
  .dir-grid { grid-template-columns: repeat(2, 1fr); }
  /* values: single-column stack */
  .vals-grid { grid-template-columns: 1fr; }
  .vcard { min-height: 0; }
  /* hall: timeline scrolls horizontally; rows tighten */
  .hall-rail { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .hall-rail__inner { min-width: 560px; }
  .hall-node__label { font-size: 10px; letter-spacing: 0.12em; }
  .hall-row__org { margin-left: 0; }
  .hall-stage__stats { width: 100%; }
  .hall-stat { flex: 1 1 auto; }
  /* origin: metrics keep two columns */
  .origin__metrics { grid-template-columns: repeat(2, 1fr); }
  /* global presence: single-column features */
  .gp__features { grid-template-columns: 1fr; gap: 14px; }
  /* sustainability: metrics stack; media panel becomes a top strip */
  .sus__metrics { grid-template-columns: 1fr; }
  .sus-card { grid-template-columns: 1fr; }
  .sus-card__col { order: 2; }
  .sus-card__media { order: 1; min-height: 170px; }
  .sus__hero-media { aspect-ratio: 3 / 2; }
}

/* Nav collapses to a slide-down on small screens */
@media (max-width: 980px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius-md);
    background: transparent; border: 1px solid var(--border-light); cursor: pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; display: block; width: 18px; height: 2px; background: var(--text-primary); position: relative; transition: transform 200ms ease, opacity 200ms ease;
  }
  .nav-toggle span::before { position: absolute; top: -6px; }
  .nav-toggle span::after { position: absolute; top: 6px; }
  .header__inner { flex-wrap: wrap; }
  .nav {
    order: 3; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 4px;
    max-height: 0; overflow: hidden; transition: max-height 300ms var(--ease-standard);
  }
  .nav.is-open { max-height: 400px; margin-top: 8px; }
  .nav__link { padding: 10px 0; width: 100%; }
  .nav__link--active { border-bottom: none; }
  .header__cta { display: none; }
  .mega { display: none; }
}

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

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  /* hall stage animates in via keyframes — show it outright instead */
  .hall-anim { opacity: 1 !important; transform: none !important; }
  .origin-reveal { opacity: 1 !important; transform: none !important; }
  .origin-strip__item { opacity: 1 !important; transform: none !important; }
  .origin-strip__fill { transform: scaleX(1) !important; }
  .vals-reveal { opacity: 1 !important; transform: none !important; }
  .gp-stat { opacity: 1 !important; transform: none !important; filter: none !important; }
  /* cert marquee: animation is killed above — allow manual scrolling instead */
  .cert-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ===== Global Manufacturing Showcase (About Us "05 / Global Infrastructure") ===== */
/* ==========================================================================
   Ion Exchange - Global Manufacturing Showcase Standalone Component Styles
   ========================================================================== */

/* Scoped Section Wrapper to prevent collisions with other page layouts */
.mfg-section {
  /* Design Tokens / CSS Variables */
  --mfg-brand-primary: #007CC3;
  --mfg-brand-secondary: #0284C7;
  --mfg-brand-accent: #06B6D4;
  --mfg-brand-glow: #2EA8FF;
  --mfg-state-hover-primary: #005A91;
  --mfg-surface-canvas: #FAFAFA;
  --mfg-surface-card: #FFFFFF;
  --mfg-surface-neutral-light: #F8FAFC;
  --mfg-surface-neutral-dark: #0F172A;
  --mfg-surface-industrial: #03152F;
  --mfg-border-light: #E2E8F0;
  --mfg-border-medium: #CBD5E1;
  --mfg-text-primary: #0F172A;
  --mfg-text-secondary: #64748B;
  --mfg-text-tertiary: #94A3B8;
  --mfg-text-inverse: #FFFFFF;
  --mfg-status-success: #14B8A6;
  --mfg-success-text: #15803D;

  /* Typography Pairing */
  --mfg-font-display: "Plus Jakarta Sans", "Inter", sans-serif;
  --mfg-font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --mfg-font-mono: "Plus Jakarta Sans", "Inter", sans-serif;

  font-family: var(--mfg-font-sans);
  background-color: var(--mfg-surface-canvas);
  color: var(--mfg-text-primary);
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0; /* py-14 sm:py-16 approximation */
  box-sizing: border-box;
}

.mfg-section * {
  box-sizing: border-box;
}

/* --- Layout & Grid Containers --- */
.mfg-container {
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: relative;
  z-index: 10;
}

@media (min-width: 640px) {
  .mfg-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .mfg-container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* --- Blueprint Blueprint Whispers Background Pattern --- */
.mfg-blueprint-whisper {
  position: absolute;
  inset: 0;
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(0, 124, 195, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 124, 195, 0.03) 1px, transparent 1px);
  pointer-events: none;
  opacity: 0.3;
  z-index: 1;
}

/* --- Section Typography & Header --- */
.mfg-header {
  max-width: 880px;
  margin-bottom: 2rem;
}

/* Section kicker — matched to the page-wide .eyebrow-row / .eyebrow label.
   This section shipped with a pill (tinted background, border, dot), which
   made it the only one of twelve About Us eyebrows not using the plain
   editorial label. Pill chrome removed so it reads like every other section. */
.mfg-badge-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

/* Hidden to match .eyebrow-tick, which the page hides site-wide
   ("decorative dash removed for a cleaner editorial label").
   Kept in the markup for structure, as the tick is. */
.mfg-badge-dot {
  display: none;
}

/* Identical to .eyebrow (11px / 0.22em / rgba(2,132,199,0.9)), not the
   former 10px / 0.2em / solid secondary. */
.mfg-badge-text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(2, 132, 199, 0.9);
}

.mfg-title {
  font-family: var(--mfg-font-display);
  font-size: clamp(30px, 3.6vw, 44px); /* matches the page's canonical .h2 */
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--mfg-text-primary);
  margin-top: 0;
  margin-bottom: 1rem;
}

.mfg-title-accent {
  display: inline;
  font-weight: 700;
  background: linear-gradient(90deg, var(--mfg-brand-secondary) 0%, var(--mfg-brand-primary) 55%, var(--mfg-brand-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mfg-lead {
  font-size: clamp(15px, 1.4vw, 17px); /* matches the page's canonical .lead */
  line-height: 1.6;
  font-weight: 400;
  color: var(--mfg-text-secondary);
  max-width: 780px;
  margin-top: 0;
  margin-bottom: 0;
}

/* --- Region Switcher (Segmented Toggles) --- */
.mfg-region-container {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.mfg-region-bar {
  background-color: var(--mfg-surface-neutral-light);
  padding: 4px;
  border: 1px solid var(--mfg-border-light);
  border-radius: 12px;
  display: flex;
  gap: 6px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 20;
}

.mfg-region-btn {
  background: transparent;
  border: none;
  padding: 0.5rem 1.5rem;
  font-family: var(--mfg-font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mfg-text-secondary);
}

.mfg-region-btn:hover {
  color: var(--mfg-text-primary);
  background-color: rgba(255, 255, 255, 0.65);
}

.mfg-region-btn.is-active {
  background-color: var(--mfg-brand-primary);
  color: var(--mfg-text-inverse);
  font-weight: 700;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.mfg-region-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* --- Unified Showcase Card --- */
.mfg-showcase-card {
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--mfg-surface-card);
  border: 1px solid var(--mfg-border-light);
  border-radius: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
}

.mfg-showcase-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

@media (min-width: 1024px) {
  .mfg-showcase-card {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/* Left Photo Area */
.mfg-photo-area {
  position: relative;
  min-height: 260px;
  background-color: var(--mfg-surface-neutral-dark);
  overflow: hidden;
}

/* 31 Oct 2026: the card now carries only each site's place and role (the
   client's IR deck, slides 15 and 16), so the photo takes the wider share. */
@media (min-width: 1024px) {
  .mfg-photo-area {
    grid-column: span 7;
    min-height: 440px;
    max-height: 480px;
    border-right: 1px solid rgba(226, 232, 240, 0.4);
  }
}

.mfg-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.7s ease-out;
}

.mfg-photo-area:hover .mfg-photo-img {
  transform: scale(1.03);
}

.mfg-photo-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.35) 60%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}

/* Floating Site Tag */
.mfg-site-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mfg-tag-pulse-outer {
  position: relative;
  width: 6px;
  height: 6px;
}

.mfg-tag-pulse-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: var(--mfg-brand-primary);
  border-radius: 50%;
}

.mfg-tag-pulse-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 12px;
  height: 12px;
  background-color: rgba(0, 124, 195, 0.4);
  border-radius: 50%;
  animation: mfg-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes mfg-ping {
  75%, 100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.mfg-site-tag-text {
  font-family: var(--mfg-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--mfg-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Left Narrative Text */
.mfg-narrative-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  color: var(--mfg-text-inverse);
  z-index: 20;
}

@media (min-width: 640px) {
  .mfg-narrative-box {
    padding: 2rem;
  }
}

.mfg-narrative-kicker {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
}

.mfg-narrative-kicker-text1 {
  font-family: var(--mfg-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--mfg-brand-glow);
  text-transform: uppercase;
  letter-spacing: 0.25em;
}

.mfg-narrative-kicker-dot {
  width: 4px;
  height: 4px;
  background-color: rgba(255,255,255,0.3);
  border-radius: 50%;
}

.mfg-narrative-kicker-text2 {
  font-family: var(--mfg-font-display);
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}

.mfg-narrative-title {
  font-family: var(--mfg-font-display);
  font-size: 1.25rem; /* text-xl */
  font-weight: 800;
  color: var(--mfg-text-inverse);
  letter-spacing: -0.015em;
  margin: 0 0 0.375rem 0;
  line-height: 1.3;
}

@media (min-width: 640px) {
  .mfg-narrative-title {
    font-size: 1.5rem; /* text-2xl */
  }
}

.mfg-narrative-desc {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 440px;
}

/* Right Details Panel */
.mfg-details-panel {
  background-color: var(--mfg-surface-card);
  padding: 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}

@media (min-width: 640px) {
  .mfg-details-panel {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .mfg-details-panel {
    grid-column: span 5;
    padding: 2.5rem;
  }
}

.mfg-details-blueprint {
  position: absolute;
  inset: 0;
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(0, 124, 195, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 124, 195, 0.02) 1px, transparent 1px);
  pointer-events: none;
  opacity: 0.2;
}

.mfg-details-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* space-y-5 */
}

.mfg-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.mfg-breadcrumb-region {
  color: var(--mfg-brand-secondary);
  font-weight: 600;
  font-family: var(--mfg-font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mfg-breadcrumb-arrow {
  width: 10px;
  height: 10px;
  stroke: var(--mfg-text-tertiary);
  stroke-width: 2;
  fill: none;
}

.mfg-breadcrumb-active {
  color: var(--mfg-text-tertiary);
  font-family: var(--mfg-font-display);
  font-size: 11px;
  text-transform: uppercase;
}

.mfg-facility-heading {
  font-family: var(--mfg-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mfg-text-primary);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}

/* The site's role line under its place, set as the page's body copy. */
.mfg-facility-role {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--mfg-text-secondary);
  margin: 0.5rem 0 0;
}

/* Blocks */
.mfg-block {
  display: flex;
  flex-direction: column;
}

.mfg-block-title {
  font-family: var(--mfg-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--mfg-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.mfg-block-title svg {
  width: 12px;
  height: 12px;
  stroke: var(--mfg-brand-secondary);
  stroke-width: 2;
  fill: none;
}

.mfg-badge-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem; /* gap-1.5 */
}

/* Products badges */
.mfg-product-badge {
  background-color: rgba(0, 124, 195, 0.03);
  border: 1px solid rgba(0, 124, 195, 0.12);
  color: var(--mfg-brand-primary);
  padding: 0.25rem 0.625rem;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: border-color 0.2s ease;
}

.mfg-product-badge:hover {
  border-color: rgba(0, 124, 195, 0.45);
}

.mfg-product-badge-dot {
  width: 6px;
  height: 6px;
  background-color: var(--mfg-brand-primary);
  border-radius: 50%;
}

/* Capabilities badges */
.mfg-cap-badge {
  background-color: rgba(0, 124, 195, 0.05);
  border: 1px solid rgba(2, 132, 199, 0.1);
  color: var(--mfg-brand-secondary);
  padding: 0.25rem 0.625rem;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.mfg-cap-badge:hover {
  background-color: rgba(0, 124, 195, 0.1);
}

/* Accreditation badges */
.mfg-cert-badge {
  background-color: rgba(20, 184, 166, 0.05);
  border: 1px solid rgba(20, 184, 166, 0.15);
  color: var(--mfg-success-text);
  padding: 0.25rem 0.625rem;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02);
}

.mfg-cert-badge svg {
  width: 12px;
  height: 12px;
  stroke: var(--mfg-status-success);
  stroke-width: 3;
  fill: none;
}

/* Statistics Grid */
.mfg-stats-band {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(226, 232, 240, 0.75);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  position: relative;
  z-index: 10;
}

@media (min-width: 640px) {
  .mfg-stats-band {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Three counts (8 India, 6 international, 14 in all): the two short ones
   size to their content and the long slide-13 label takes the rest. */
.mfg-stats-band.mfg-stats-band--3 {
  margin-top: 0;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 1rem;
}

/* Site buttons sit between the India / International toggle and the card. */
.mfg-selector-section.mfg-selector-section--top {
  margin-bottom: 1.5rem;
}

/* Phones: the long "14" label gets its own row instead of a four-line wrap. */
@media (max-width: 639px) {
  .mfg-stats-band.mfg-stats-band--3 {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .mfg-stats-band--3 .mfg-stat-item:nth-child(3) {
    grid-column: 1 / -1;
    border-left: 0;
    padding-left: 0;
  }
}

.mfg-stat-item {
  text-align: left;
  padding: 0.25rem 0;
}

.mfg-stat-item:not(:first-child) {
  border-left: 1px solid rgba(226, 232, 240, 0.5);
  padding-left: 0.75rem;
}

.mfg-stat-value {
  display: block;
  font-family: var(--mfg-font-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.mfg-stat-label {
  display: block;
  font-family: var(--mfg-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--mfg-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Stats specific colors */
.mfg-stat-val-primary { color: var(--mfg-brand-primary); }
.mfg-stat-val-secondary { color: var(--mfg-brand-secondary); }
.mfg-stat-val-neutral { color: var(--mfg-text-primary); }
.mfg-stat-val-success { color: var(--mfg-status-success); }


/* --- Facility Selection System (SINGLE ROW REQUIREMENT) --- */
.mfg-selector-section {
  margin-bottom: 5rem;
}

.mfg-selector-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.mfg-selector-kicker {
  font-family: var(--mfg-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--mfg-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  display: block;
  margin-bottom: 0.25rem;
}

.mfg-selector-sub {
  font-family: var(--mfg-font-display);
  font-size: 14px;
  color: var(--mfg-text-secondary);
  font-weight: 700;
  margin: 0;
}

/* Absolute single row fit, no wrap, no scrollbars, balanced spacing */
.mfg-facility-selector-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0.75rem; /* gap-3 */
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--mfg-surface-neutral-light);
  padding: 1rem 2rem; /* p-4 px-8 */
  border-radius: 28px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  justify-content: flex-start;
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
  box-sizing: border-box;
}

.mfg-facility-selector-container::-webkit-scrollbar {
  display: none; /* WebKit */
}

@media (min-width: 1280px) {
  .mfg-facility-selector-container {
    justify-content: center;
  }
}

/* Tab Button Styling */
.mfg-facility-btn {
  flex: 0 0 auto; /* Prevent shrinking */
  display: flex;
  align-items: center;
  gap: 0.625rem; /* gap-2.5 */
  padding: 0.875rem 1.5rem; /* py-3.5 px-6 */
  background-color: var(--mfg-surface-card);
  border: 1px solid var(--mfg-border-light);
  border-radius: 12px; /* rounded-xl */
  color: var(--mfg-text-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.mfg-facility-btn:hover {
  background-color: var(--mfg-surface-neutral-light);
  border-color: var(--mfg-border-medium);
  transform: translateY(-1px);
}

.mfg-facility-btn-num {
  font-family: var(--mfg-font-display);
  font-size: 11px;
  font-weight: 700;
  color: rgba(2, 132, 199, 0.8); /* brand-secondary */
  line-height: 1;
}

.mfg-facility-btn.is-active {
  background-color: var(--mfg-brand-primary);
  border-color: var(--mfg-brand-primary);
  color: var(--mfg-text-inverse);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px) scale(1.03);
}

.mfg-facility-btn.is-active .mfg-facility-btn-num {
  color: rgba(255, 255, 255, 0.7);
}

/* Interactive Blueprint Bar at bottom */
.mfg-facility-btn-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.5px;
  background-color: var(--mfg-brand-glow);
}


/* --- Bottom Capabilities Matrix --- */
.mfg-matrix-section {
  border-top: 1px solid var(--mfg-border-light);
  padding-top: 3.5rem; /* pt-14 */
}

.mfg-matrix-header {
  text-align: center;
  margin-bottom: 2rem;
}

.mfg-matrix-kicker {
  font-family: var(--mfg-font-display);
  font-size: 11px;
  font-weight: 800;
  color: var(--mfg-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  display: block;
}

.mfg-matrix-desc {
  font-size: 12px;
  font-weight: 300;
  color: var(--mfg-text-secondary);
  margin-top: 0.25rem;
  margin-bottom: 0;
}

.mfg-matrix-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem; /* gap-5 */
}

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

@media (min-width: 1024px) {
  .mfg-matrix-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Matrix Card Base */
.mfg-matrix-card {
  background-color: var(--mfg-surface-neutral-light);
  border: 1px solid rgba(226, 232, 240, 0.75);
  padding: 1.25rem;
  border-radius: 16px; /* rounded-2xl */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1), 
              border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden; /* For Light Sweep container */
  box-shadow: 0px 1px 2px rgba(15, 23, 42, 0.04);
}

.mfg-matrix-card:hover {
  transform: translateY(-4px);
  border-color: var(--mfg-border-medium);
  box-shadow: 0px 4px 8px rgba(15, 23, 42, 0.05), 0px 18px 36px rgba(15, 23, 42, 0.10);
}

/* Icon Container */
.mfg-matrix-icon-box {
  width: 40px;
  height: 40px;
  background-color: rgba(0, 124, 195, 0.05);
  color: var(--mfg-brand-primary);
  border-radius: 12px; /* rounded-xl */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  transition: all 0.3s ease;
}

.mfg-matrix-card:hover .mfg-matrix-icon-box {
  background-color: var(--mfg-brand-primary);
  color: var(--mfg-text-inverse);
}

.mfg-matrix-icon-box svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.mfg-matrix-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--mfg-text-primary);
  line-height: 1.2;
}

.mfg-matrix-sub {
  font-family: var(--mfg-font-display);
  font-size: 11px;
  font-weight: 500;
  color: var(--mfg-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.375rem;
  display: block;
}

/* --- Animated Premium Entrance / Fade In --- */
@keyframes mfgPremiumFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mfg-animate-premium-fade {
  animation: mfgPremiumFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Interactive Light Sweep on Hover --- */
@keyframes mfgLightSweep {
  0% {
    transform: translateX(-100%) skewX(-30deg);
  }
  100% {
    transform: translateX(200%) skewX(-30deg);
  }
}

.mfg-matrix-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2) 50%,
    transparent
  );
  transform: translateX(-100%) skewX(-30deg);
  pointer-events: none;
  transition: none;
}

.mfg-matrix-card:hover::after {
  animation: mfgLightSweep 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Design-system atoms these pages' markup uses but content.css defines only
   scoped under .handoff-page, which this template does not carry (found when
   the Knowledge Park form rendered unstyled, 2026-10-08). Values mirror
   assets/content.css; tokens carry literal fallbacks because these pages do
   not load content.css. */
.section-intro{margin-bottom:48px}
.eyebrow-row{display:flex;align-items:center;gap:8px;margin-bottom:24px}
.eyebrow-row--center{justify-content:center}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body,"Inter",ui-sans-serif,system-ui,sans-serif);font-size:var(--type-button,12px);font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .15s ease;white-space:nowrap;border:none;background:none;color:inherit;text-decoration:none}
.btn--primary{padding:12px 24px;border-radius:9999px;background:#0F172A;color:#FFFFFF;border:1px solid transparent}
.btn--primary:hover{background:#005A91;transform:translateY(-2px);box-shadow:0 3px 8px rgba(0,0,0,.04),0 2px 12px rgba(0,0,0,.03)}
/* The .btn reset above also cleared the banner's glass button (About Us
   "Investor Relations" read dark on dark until 2 Nov 2026); restated here. */
.btn--glass{padding:12px 24px;border-radius:9999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);color:#FFFFFF}
.btn--glass:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}

/* ===== "60 years & beyond" film (3 Nov 2026) =====
   The client's IEI 60 Years & Beyond film, between the opening section and the
   milestones. Laid out as this page's own hero banner (.hero-banner: full-bleed,
   frosted navy fade, on-dark heading), with a silent 12-second loop of the
   film's opening shots in place of the photograph. The "Watch the video" pill is
   the Standard Products and HYDRAMEM player's; it opens the full film with sound
   in a pop-up styled after the HYDRAMEM projection pop-up (.pmodal). */
.about-film .hero-banner__media video,
.about-film .hero-banner__media .about-film__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.about-film .about-film__still { display: none; }
.about-film .hero__title { margin-bottom: 32px; }
.about-film__play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px 0 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 6px rgba(3, 21, 47, 0.08), 0 18px 40px -22px rgba(3, 21, 47, 0.5);
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  transition: transform 0.2s ease, background 0.2s ease;
}
.about-film__play:hover { transform: scale(1.04); background: #FFFFFF; }
.about-film__play:focus-visible { outline: none; box-shadow: 0 0 0 3px #0B1E31, 0 0 0 5px #FFFFFF; }
.about-film .mem-video__icon { display: inline-flex; align-items: center; justify-content: center; color: #005691; }
.about-film .mem-video__label { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.012em; }
.about-film .mem-video__time { font-family: var(--font-display); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-secondary); }

.about-film-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}
.about-film-modal[hidden] { display: none; }
.about-film-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 21, 47, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 220ms ease;
}
.about-film-modal__panel {
  position: relative;
  width: min(1100px, 100%);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 240ms ease, transform 280ms ease;
}
.about-film-modal.is-open .about-film-modal__backdrop,
.about-film-modal.is-open .about-film-modal__panel { opacity: 1; transform: none; }
.about-film-modal video {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 120px);
  aspect-ratio: 1280 / 654;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 30px 80px rgba(3, 21, 47, 0.28);
}
.about-film-modal__close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  color: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.about-film-modal__close:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.12); }
.about-film-modal__close:focus-visible { outline: none; box-shadow: 0 0 0 3px #FFFFFF; }
body.is-modal-open { overflow: hidden; }

@media (max-width: 860px) {
  /* Shorter than the page hero on phones: the copy is two lines and a button.
     A fixed height (not min-height) so the copy settles at the bottom, over the
     dark end of the fade, as in the page hero. */
  .about-film.hero-banner { aspect-ratio: auto; min-height: 0; max-height: none; height: 480px; }
  .about-film .hero-banner__media video,
  .about-film .hero-banner__media .about-film__still { object-position: 50% 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .about-film .about-film__loop { display: none; }
  .about-film .about-film__still { display: block; }
  .about-film__play,
  .about-film-modal__backdrop,
  .about-film-modal__panel { transition: none; }
  .about-film__play:hover { transform: none; }
}