/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  --primary:        #0C54A0;
  --primary-600:    #0B77C4;
  --primary-800:    #023E78;
  --primary-900:    #012245;
  --bg-dark:        #0A0F1A;   /* near-black background        */
  --bg-navy:        #0B1526;   /* secondary dark panel bg      */
  --accent:         #7FD0F5;   /* cyan eyebrow / label accent  */
  --accent-strong:  #1FB0EE;

  --font-body:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading:   'Space Grotesk', var(--font-body);
  --font-size-p:    18px;      /* default paragraph size */

  --text:           #FFFFFF;
  --text-muted:     rgba(255, 255, 255, 0.64);
  --text-faint:     rgba(255, 255, 255, 0.45);

  --surface:        rgba(255, 255, 255, 0.05);
  --surface-hover:  rgba(255, 255, 255, 0.09);
  --border:         rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.20);

  --radius-sm:      6px;
  --radius:         10px;
  --radius-lg:      14px;

  --section-y:      clamp(3.5rem, 6vw, 7rem);
  --gutter:         clamp(1rem, 3vw, 3rem);   /* side rail shared with the header */
  --nav-h:          78px;
  --nav-item-h:     40px;   /* shared height for every navbar row item */

  /* Bootstrap variable overrides — extend, don't fight */
  --bs-primary:     #0C54A0;
  --bs-primary-rgb: 12, 84, 160;
  --bs-body-bg:     #0A0F1A;
  --bs-body-color:  #FFFFFF;
  --bs-body-font-family: var(--font-body);
  --bs-border-color: rgba(255, 255, 255, 0.10);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
* { scroll-margin-top: calc(var(--nav-h) + 20px); }

html { scroll-behavior: smooth; margin: 0; padding: 0; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 20px;                 /* design baseline */
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg-dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .heading {
  font-family: var(--font-heading);
  font-size: 65px;                 /* design baseline */
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0;
}
h2, h3, .heading { font-size: 48px; }

h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; margin: 0; }

/* Paragraphs never carry a class — component classes live on a wrapper div
   (.lead-muted, .eyebrow, .stat__value, …), which owns spacing and colour.
   That leaves this rule unopposed, so every <p> renders at 18px. */
p { margin: 0; font-size: var(--font-size-p); }

a { color: inherit; text-decoration: none; transition: color .2s ease; }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--primary-600); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Fluid type: keep the 20/50 baseline on desktop, scale down gracefully -- */
@media (max-width: 1399.98px) {
  body { font-size: 18px; }
  h1, h2, h3, .heading { font-size: 58px; }
  h2, h3, .heading { font-size: 44px; }
}
@media (max-width: 991.98px) {
  body { font-size: 17px; }
  h1, h2, h3, .heading { font-size: 46px; }
  h2, h3, .heading { font-size: 34px; }
}
@media (max-width: 575.98px) {
  body { font-size: 16px; }
  h1, h2, h3, .heading { font-size: 34px; }
}

/* ==========================================================================
   3. SHARED UTILITIES
   ========================================================================== */
.gradient-bg {
  background:
    radial-gradient(317.32% 87.84% at 15% 20%, var(--color-azure-7316, rgba(127, 208, 245, 0.16)) 0%, var(--color-azure-7316, rgba(127, 208, 245, 0.16)) 0.06%, var(--color-azure-730, rgba(127, 208, 245, 0.00)) 0.09%),
    radial-gradient(314.94% 87.18% at 85% 70%, var(--color-azure-7316, rgba(127, 208, 245, 0.16)) 0%, var(--color-azure-7316, rgba(127, 208, 245, 0.16)) 0.06%, var(--color-azure-730, rgba(127, 208, 245, 0.00)) 0.09%),
    radial-gradient(70% 60% at 80% 10%, var(--color-azure-5325, rgba(31, 176, 238, 0.25)) 0%, var(--color-azure-530, rgba(31, 176, 238, 0.00)) 60%),
    linear-gradient(105deg, var(--color-azure-41, #0B77C4) 0%, var(--navy-3, #023E78) 65%, var(--navy, #012245) 100%);
}

.section        { padding-block: var(--section-y); position: relative; }
/* No .container inside — the section carries its own side gutter instead,
   matching the header's so content still lines up with the nav. */
/* --rail is the section's own side gutter. It is published as a variable so a
   full-bleed child (.h-track) can cancel exactly this much and stay in step
   automatically if the value is ever retuned. */
.section--dark  {
  --rail: clamp(65px, 3vw, 3rem);
  background-color: var(--bg-dark);
  padding-inline: var(--rail);
}
.section--navy  { background-color: var(--bg-navy); }

/* Horizontal card scroller, shared by the events and insights rows.
   The negative right margin cancels the section rail so the track reaches the
   viewport edge and cards bleed off it; the matching padding puts that space
   back *inside* the scroller, so the last card still clears the edge at the
   end of the scroll instead of sitting flush against it. */
.h-track {
  position: relative;   /* makes the track the offsetParent for dot scrolling */
  display: flex;
  gap: 1.5rem;
  margin-right: calc(var(--rail, 0px) * -1);
  padding-right: var(--rail, 0px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.h-track::-webkit-scrollbar { display: none; }
.h-track > * { scroll-snap-align: start; }
@media (max-width: 767.98px) { .h-track { gap: 1rem; } }

/* Mouse dragging. Snap has to be off mid-drag or it fights the pointer; it is
   restored on release, which is what produces the settle onto the next card. */
.h-track--draggable { cursor: grab; }
.h-track--draggable.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* Dot pagination, one dot per page of cards. */
.h-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 2.25rem; }
.h-dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50rem;
  background: rgba(255,255,255,.25);
  transition: background-color .25s ease, width .25s ease;
}
.h-dot:hover { background: rgba(255,255,255,.45); }
.h-dot[aria-current="true"] { width: 26px; background: var(--accent-strong); }

.eyebrow {
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--font-heading);
}

.lead-muted {
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 46ch;
}

.text-small  { font-size: .72em; line-height: 1.7; }
.text-xsmall { line-height: 1.6; }

/* Free / paid marker, shared by the training cards and the event cards.
   Sized in em so it tracks whatever context it is dropped into. */
.pill-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: .5em;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5em 1.1em;
  border-radius: 50rem;
  border: 1px solid transparent;
}
.pill-badge--free { color: #5BE3A7; background: rgba(91,227,167,.12); border-color: rgba(91,227,167,.35); }
.pill-badge--paid { color: #FF7A7A; background: rgba(255,122,122,.12); border-color: rgba(255,122,122,.35); }

/* Section header: title left, supporting copy right.
   No column-gap here — this is a Bootstrap .row, whose columns already total
   100%; any column-gap overflows the row and wraps the second column. */
.section-head { row-gap: 1.5rem; }
.section-head__title { max-width: 16ch; }
/* Lifts the 16ch cap so the title can run on a single line */
.section-head__title--wide { max-width: none; }

/* "Read more" style micro-link */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-heading);
  font-size: .58em;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #40AAE0;
}
.link-more i { transition: transform .25s ease; font-size: 1.1em; }
.link-more:hover { color: #fff; }
.link-more:hover i { transform: translateX(5px); }
.link-more--accent { color: var(--accent); }
.link-more--accent:hover { color: #fff; }

/* Buttons ------------------------------------------------------------------ */
.btn {
  --bs-btn-font-family: var(--font-heading);

  font-weight: 500;
  letter-spacing: .04em;
  padding: .72em 1.6em;
  border-radius: var(--radius);
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-quote {
  background: var(--primary); 
  color: #fff;
  border: 1px solid var(--primary);
  white-space: nowrap;
  border-radius: var(--radius);
box-shadow: 0 10px 24px -12px #3B82F6;
}
.btn-quote:hover { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }

.btn-hero-solid {
  background: #fff;
  color: #06203D;
  border: 1px solid #fff;
  font-size: .78rem;
  padding: .85em 1.8em;
}
.btn-hero-solid:hover { background: rgba(255,255,255,.86); color: #06203D; }

.btn-hero-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
  font-size: .78rem;
  padding: .85em 1.8em;
}
.btn-hero-ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* ==========================================================================
   4. TOP UTILITY BAR
   ========================================================================== */
.topbar {
  background: #060A12;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}
.topbar__inner { min-height: 40px; gap: 1rem; }

.topbar__region {
  background: none;
  border: 0;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
}
.topbar__region:hover { color: #fff; }
.topbar__region::after { display: none; }

.topbar__menu {
  --bs-dropdown-bg: #0E1726;
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-link-color: rgba(255,255,255,.72);
  --bs-dropdown-link-hover-bg: rgba(255,255,255,.06);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-font-size: .58rem;
  --bs-dropdown-min-width: 9rem;
  letter-spacing: .12em;
}

.topbar__links { gap: 1.65rem; }
.topbar__link { color: var(--text-muted); }
.topbar__link:hover { color: #fff; }

.topbar__socials { gap: .35rem; padding-left: 1.15rem; margin-left: .35rem; border-left: 1px solid rgba(255,255,255,.12); }
.topbar__social {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: .78rem;
  transition: background-color .2s ease, color .2s ease;
}
.topbar__social:hover { background: var(--primary); color: #fff; }

/* ==========================================================================
   5. MAIN NAVBAR
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 1030; }

/* Header rails run edge to edge; the side padding lives on the fluid wrapper
   so content never sits flush against the browser edges. */
.site-header .container-fluid { padding-inline: clamp(1rem, 3vw, 3rem); }

.navbar-main {
  background: rgba(10, 15, 26, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  min-height: var(--nav-h);
  padding-block: .55rem;
  transition: background-color .3s ease;
}
.site-header.is-stuck .navbar-main { background: rgba(6, 10, 18, .98); }

/* Brand lockup — logo-white.png is a 326x53 transparent PNG, already white,
   so it needs no filter on either the dark navbar or the dark footer. */
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 52px; width: auto; }
@media (max-width: 767.98px) { .brand__logo { height: 40px; } }
@media (max-width: 359.98px) { .brand__logo { height: 27px; } }

/* Every interactive item in the bar — menu links, the search plate, the phone
   number and the quote button — is one --nav-item-h box centred on its own
   contents, so they share a centre line and a hit-area height regardless of
   how tall their text or artwork happens to be. */
.navbar-main .nav-link,
.navbar-main .nav-phone,
.navbar-main .nav-icon-btn,
.navbar-main .btn-quote {
  display: inline-flex;
  align-items: center;
  min-height: var(--nav-item-h);
}

.nav-main { gap: .2rem; }
.nav-main .nav-link {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text-muted);
  padding: 0 .78rem;
  position: relative;
}
.nav-main .nav-link::after {
  content: "";
  position: absolute;
  left: .78rem; right: .78rem; bottom: .1rem;
  height: 2px;
  background: var(--accent-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-main .nav-link:hover,
.nav-main .nav-link.active { color: #fff; }
.nav-main .nav-link.active::after { transform: scaleX(1); }

.nav-tools { gap: .9rem; }
.nav-icon-btn {
  background: none; border: 0; padding: 0;
  justify-content: center;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1;
  transition: color .2s ease;
}
.nav-icon-btn:hover { color: #fff; }

/* Boxed SVG variant — the rounded plate and hairline ring live in the markup,
   so hover only has to retint the fill and let the glyph ride currentColor. */
.nav-icon-btn--boxed { color: #EEF3FB; }
.nav-icon-btn--boxed svg { display: block; }
.nav-icon-btn__bg { fill: #0F1725; transition: fill .2s ease; }
.nav-icon-btn__ring { fill: #1B2536; transition: fill .2s ease; }
.nav-icon-btn--boxed:hover .nav-icon-btn__bg,
.nav-icon-btn--boxed[aria-expanded="true"] .nav-icon-btn__bg { fill: #16202F; }
.nav-icon-btn--boxed:hover .nav-icon-btn__ring,
.nav-icon-btn--boxed[aria-expanded="true"] .nav-icon-btn__ring { fill: var(--accent-strong); }

/* Shares .nav-main .nav-link's type metrics; keeps its own colour so it still
   reads as a CTA rather than an eighth menu item. */
.nav-phone {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}
.nav-phone:hover { color: var(--accent); }

/* Search drawer */
.search-drawer {
  display: none;
  background: #060A12;
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}
.search-drawer.is-open { display: block; }
.search-drawer .form-control {
  background: var(--surface);
  border: 1px solid var(--border);
  color: #fff;
  font-size: .78rem;
  padding: .8rem 1.1rem;
  border-radius: 50rem;
}
.search-drawer .form-control:focus {
  background: var(--surface-hover);
  border-color: var(--accent-strong);
  box-shadow: none;
  color: #fff;
}

/* Offcanvas (mobile nav) */
.offcanvas-nav {
  --bs-offcanvas-bg: #070C16;
  --bs-offcanvas-width: 320px;
  --bs-offcanvas-border-color: var(--border);
}
.offcanvas-nav .nav-link {
  font-size: .88rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.8);
}
.offcanvas-nav .nav-link.active,
.offcanvas-nav .nav-link:hover { color: #fff; }
/* In the drawer the number is the last row of the stack, so it takes the menu
   item treatment wholesale — same size, padding, rule and colour — instead of
   the navbar's inline metrics. */
.offcanvas-nav .nav-phone {
  display: block;
  font-size: .88rem;
  letter-spacing: normal;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.8);
}
.offcanvas-nav .nav-phone:hover { color: #fff; }

/* ==========================================================================
   6. HERO
   ========================================================================== */
/* Full-bleed banner: spans the viewport edge to edge and fills its full
   height. The artwork is a cover background so it always fills the frame,
   however wide or tall the monitor, with no letterboxing on any side. */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  background-image: url("Section%20-%20HERO.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* svh accounts for mobile browser chrome, which vh ignores */
@supports (min-height: 100svh) {
  .hero { min-height: 100svh; }
}
/* No scrim — the supplied hero artwork already carries its own navy grade,
   so the image is shown untinted. */
.hero__overlay {
  position: absolute; inset: 0;
  z-index: -1;
  background: none;
}
/* Copy is centred in the space above the brand strip, which stays at the base.
   align-items shrink-wraps each child and centres it on the cross axis, so the
   eyebrow, heading and button row are all centred as a group; text-align keeps
   the lines within each of them centred too. */
.hero__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-block: 2rem;
}
.hero__title { max-width: 28ch; margin-inline: auto; }
.hero__actions { gap: .85rem; }

.hero__brands {
  border-top: 1px solid rgba(255,255,255,.10);
  padding-block: 1.6rem;
}
.hero__brand-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  list-style: none;
  margin: 0; padding: 0;
}
/* Logos render in their own brand colours — no filter, and no resting opacity,
   since dimming would shift them off-colour too. Hover lifts rather than
   recolours, so the links keep an affordance without touching the artwork. */
.hero__brand {
  display: block;
  transition: transform .25s ease;
}
.hero__brand:hover { transform: translateY(-2px); }
/* One height for every mark, width left to each logo's own proportions. */
.hero__brand img {
  height: 26px;
  width: auto;
}

/* ==========================================================================
   7. ABOUT
   ========================================================================== */
.about {
  background: #070C15;
  padding-block: clamp(3.5rem, 7.5vw, 6.5rem);
}
.about__container { max-width: 1280px; }

/* Left column (5/12 = 41.67%) — blue gradient information card */
.about__card {
  background:
    radial-gradient(317.32% 87.84% at 15% 20%, var(--color-azure-7316, rgba(127, 208, 245, 0.16)) 0%, var(--color-azure-7316, rgba(127, 208, 245, 0.16)) 0.06%, var(--color-azure-730, rgba(127, 208, 245, 0.00)) 0.09%),
    radial-gradient(314.94% 87.18% at 85% 70%, var(--color-azure-7316, rgba(127, 208, 245, 0.16)) 0%, var(--color-azure-7316, rgba(127, 208, 245, 0.16)) 0.06%, var(--color-azure-730, rgba(127, 208, 245, 0.00)) 0.09%),
    radial-gradient(70% 60% at 80% 10%, var(--color-azure-5325, rgba(31, 176, 238, 0.25)) 0%, var(--color-azure-530, rgba(31, 176, 238, 0.00)) 60%),
    linear-gradient(105deg, var(--color-azure-41, #0B77C4) 0%, var(--navy-3, #023E78) 65%, var(--navy, #012245) 100%);
  border-radius: 2px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about__title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 1.5rem;
}
.about__text {
  line-height: 1.8;
  color: #fff;
}
.about__text + .about__text { margin-top: 1.25rem; }

/* Right column (7/12 = 58.33%) — image card, shadowed, sharp corners */
.about__media-col { display: flex; }
/* Media area is deliberately taller than the text card, so it reads as the
   dominant element. Absolute positioning lets the media fill a min-height
   box that the card does not have to match. */
.about__media {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .75);
  min-height: clamp(220px, 52vw, 400px);
}
.about__media img,
.about__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 992px) {
  .about__media { min-height: 640px; }
}

@media (min-width: 992px) {
  /* Pull the image 26px over the blue card and widen it by the same amount so
     the pair still spans the container exactly. z-index puts it on top. */
  .about__media-col {
    flex: 0 0 calc(58.333333% + 26px);
    max-width: calc(58.333333% + 26px);
    margin-left: -26px;
    position: relative;
    z-index: 2;
  }
}

/* Below lg the image stacks under the card, no overlap */
@media (max-width: 991.98px) {
  .about__card { padding: 32px; }
  .about__media-col { margin-top: 1.5rem; }
}
@media (max-width: 575.98px) {
  .about__card { padding: 26px 22px; }
  .about__title { font-size: 1.6rem; }
}

/* ==========================================================================
   8. INDUSTRIES
   ========================================================================== */
.industry-card {
  height: 100%;
  background: rgba(255, 255, 255, .04);   /* #FFFFFF @ 4% */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  transition: background-color .28s ease, border-color .28s ease, transform .28s ease;
}
.industry-card:hover {
  background: rgba(26, 20, 20, .45);   /* #1A1414 @ 45% */
  border-color: rgba(127, 208, 245, .38);
  transform: translateY(-4px);
}
.industry-card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 1.1rem;
}
.industry-card__title {
  font-size: .82em;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: .5rem;
}
.industry-card__text {
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  margin-bottom: 1.1rem;
}

/* ==========================================================================
   9. SOLUTIONS (tabs)
   ========================================================================== */
.solution-tabs {
  display: flex;
  gap: clamp(1rem, 3vw, 3rem);
  border-bottom: 1px solid rgba(255,255,255,.12);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.solution-tabs::-webkit-scrollbar { display: none; }

.solution-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 0 1rem;
  margin-bottom: -1px;
  white-space: nowrap;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-faint);
  transition: color .25s ease, border-color .25s ease;
}
.solution-tab:hover { color: rgba(255,255,255,.85); }
.solution-tab[aria-selected="true"] {
  color: #fff;
  border-bottom-color: var(--accent-strong);
}

.solution-panel[hidden] { display: none; }
.solution-panel { animation: fadeUp .45s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.solution-media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 100%;
  min-height: 200px;
}
.solution-media img { width: 100%; height: 100%; object-fit: cover; }
.solution-media--tall img { aspect-ratio: 3 / 4; }
.solution-media--wide img { aspect-ratio: 16 / 9; }

/* From lg up the tall image should match the height of the rest of the row
   (body + stacked images) instead of setting it. Taking the img out of flow
   keeps its aspect ratio from feeding the row's intrinsic height. */
@media (min-width: 992px) {
  .solution-media--tall { position: relative; }
  .solution-media--tall img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
}

.solution-body {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* Eyebrow, title and copy sit at the top; the link is pushed to the bottom. */
.solution-body .link-more { margin-top: auto; }
.solution-body__title {
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.3;
  margin: .9rem 0 .9rem;
}
.solution-body__text {
  line-height: 1.75;
  color: rgba(255,255,255,.72);
  margin-bottom: 1.8rem;
}

/* ==========================================================================
   10. FEATURED PRODUCTS (carousel)
   ========================================================================== */
/* #solutions above is also section--dark, so the two run as one unbroken band
   — its bottom padding already carries the gap between the headings. */
#products { padding-block-start: 0; }

.carousel-nav { gap: .55rem; }
.carousel-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: #fff;
  display: grid; place-items: center;
  font-size: .85rem;
  transition: background-color .2s ease, opacity .2s ease, border-color .2s ease;
}
.carousel-btn:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); }
.carousel-btn:disabled { opacity: .3; cursor: not-allowed; }

.product-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.product-track::-webkit-scrollbar { display: none; }
.product-track > * {
  flex: 0 0 calc((100% - 4.5rem) / 4);
  scroll-snap-align: start;
}
@media (max-width: 1199.98px) { .product-track > * { flex-basis: calc((100% - 3rem) / 3); } }
@media (max-width: 991.98px)  { .product-track > * { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (max-width: 575.98px)  { .product-track { gap: 1rem; } .product-track > * { flex-basis: 78%; } }

.product-card {
  height: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, transform .25s ease;
}
.product-card:hover { border-color: rgba(127,208,245,.4); transform: translateY(-4px); }
.product-card__media { background: #fff; }
.product-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.product-card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.product-card__cat {
  font-family: var(--font-heading);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #40AAE0;
  margin-bottom: .6rem;
}
/* The rule under the name is decorative, so it rides on the heading as a
   border rather than an <hr> — no thematic-break semantics, and it spans the
   body's content width automatically. */
.product-card__name {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.45;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
}
/* The auto margin sits here rather than on .link-more so the card's spare
   height collects *above* the name. Name, rule and link stay welded together
   at a fixed 8px, and the CTAs still line up across cards of unequal depth. */
.product-card__name { margin-top: auto; }
.product-card__body .link-more { margin-top: 0; }

/* ==========================================================================
   11. VALUE-ADDED TRAININGS
   ========================================================================== */
/* #products directly above is also section--dark, so the two run as one
   unbroken band — its bottom padding already carries the gap and the heading
   needs none of its own on top of it. */
#trainings { padding-block-start: 0; }

.training-filters { display: flex; flex-wrap: wrap; gap: .6rem; }
.training-filter {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5em 1.15em;
  font-family: var(--font-heading);
  font-size: .62em;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text-faint);
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.training-filter:hover { color: rgba(255,255,255,.85); border-color: var(--border-strong); }
.training-filter[aria-pressed="true"] {
  color: #fff;
  background: rgba(31,176,238,.12);
  border-color: var(--accent-strong);
}
/* The dot marks the active pill. It keeps its box at all times so the pill
   width — and the row's total width — never shifts as the filter changes. */
.training-filter__dot {
  width: .5em; height: .5em;
  border-radius: 50%;
  background: var(--accent-strong);
  opacity: 0;
  transition: opacity .25s ease;
}
.training-filter[aria-pressed="true"] .training-filter__dot { opacity: 1; }

/* Filtering hides the grid column, not the card, so the row's gutters collapse
   with it and the remaining cards reflow flush. */
.training-col[hidden] { display: none; }

.training-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem 1.4rem;
  transition: border-color .25s ease, transform .25s ease;
}
.training-card:hover { border-color: rgba(127,208,245,.4); transform: translateY(-4px); }

.training-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.15rem;
}
.training-card__code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .55em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.training-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: .7rem;
}
.training-card:hover .training-card__title { color: var(--accent); }
.training-card__excerpt {
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.training-card__excerpt p { font-size: .72em; }

/* Pushed to the card foot so every CTA in the row lines up even when the
   titles and excerpts above them run to different depths. */
.training-meta {
  display: grid;
  gap: .6rem;
  margin: auto 0 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
  font-size: .62em;
  color: var(--text-muted);
}
.training-meta li { display: flex; align-items: center; gap: .7em; }
.training-meta i { color: var(--accent); font-size: 1.1em; line-height: 1; }

.training-card__cta { width: 100%; justify-content: center; border-radius: var(--radius-sm); }

/* ==========================================================================
   12. WHY PV LUMENS
   ========================================================================== */
.why {
  background:
    radial-gradient(65% 90% at 88% 15%, rgba(127,208,245,.20) 0%, rgba(127,208,245,0) 62%),
    linear-gradient(103deg, #0B6FBB 0%, #0C54A0 55%, #0A3F7C 100%);
}
.stat-strip {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.stat {
  padding: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.2rem, 2vw, 1.9rem);
  border-right: 1px solid rgba(255,255,255,.16);
  height: 100%;
}
.stat__value {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: .45rem;
}
/* Overrides the global h1,h2,h3 baseline so the stat numbers don't render at 70px. */
.stat__value h3 { font-size: 36px; line-height: 1.1; }
.stat__label {
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  font-family: var(--font-heading);
}
@media (max-width: 767.98px) {
  .stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .stat-strip > [class*="col-"]:last-child .stat { border-bottom: 0; }
}
@media (min-width: 768px) {
  .stat-strip > [class*="col-"]:last-child .stat { border-right: 0; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .stat-strip > [class*="col-"]:nth-child(2) .stat { border-right: 0; }
  .stat-strip > [class*="col-"]:nth-child(-n+2) .stat { border-bottom: 1px solid rgba(255,255,255,.16); }
}

/* ==========================================================================
   13. UPCOMING EVENTS
   ========================================================================== */
/* No .container here — the section carries its own side rail, matching the
   header's, so the heading still lines up with the nav while the track below
   is free to run past it. */
.events {
  --rail: clamp(65px, 3vw, 3rem);
  padding-inline: var(--rail);
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(31,176,238,.16) 0%, rgba(31,176,238,0) 60%),
    linear-gradient(160deg, #0C1B33 0%, #0A1428 55%, #081020 100%);
}

/* Owl-style stage padding, matching .testimonial_carousel on seeroo.com
   ({ stagePadding: 150, margin: 15, items: 3 }). The track bleeds out to both
   viewport edges, then reserves a --peek strip inside each one, so a slice of
   the previous and next card is always showing. Rebuilt on the native scroller
   — the page has no jQuery, and Owl would be the only reason to add it.

   The flex basis needs no --peek term: percentages resolve against the flex
   container's *content* box, which the padding has already narrowed. */
.event-track {
  --peek: 150px;
  gap: 15px;
  margin-inline: calc(var(--rail) * -1);
  padding-inline: var(--peek);
  scroll-padding-inline: var(--peek);
}
.event-track > * { flex: 0 0 calc((100% - 30px) / 3); }

@media (max-width: 1199.98px) {
  .event-track { --peek: 100px; }
  .event-track > * { flex-basis: calc((100% - 15px) / 2); }
}
/* Below lg Owl drops to one item and kills the stage padding. The rail is
   restored as the peek so cards sit on the page gutter, not the screen edge. */
@media (max-width: 991.98px) {
  .event-track { --peek: var(--rail); }
  .event-track > * { flex-basis: 100%; }
}

.event-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.event-card:hover { border-color: rgba(127,208,245,.45); transform: translateY(-4px); }

/* The badge is positioned against this box, so it must establish the
   containing block — not the card, or the badge would clear the image. */
.event-card__media { position: relative; }
.event-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s ease;
}
.event-card:hover .event-card__media img { transform: scale(1.06); }
.event-card__badge {
  position: absolute;
  top: .85rem; right: .85rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.event-card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1 1 auto; }
/* Date above the title, place below it. Flex lives on the wrapper, not the <p>,
   so the icon and the text sit on one baseline; the <p> has to opt out of the
   global 18px paragraph size. */
.event-card__date,
.event-card__place {
  display: flex;
  align-items: center;
  gap: .55em;
  font-family: var(--font-heading);
  font-size: .55em;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.event-card__date p,
.event-card__place p { font-size: inherit; }
.event-card__date i,
.event-card__place i { font-size: 1.15em; line-height: 1; }

/* The date leads in accent; the place is a quieter footnote under the title. */
.event-card__date  { color: var(--accent); margin-bottom: .5rem; }
.event-card__place { color: var(--text-faint); margin-bottom: .9rem; }
.event-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: .4rem;   /* .event-card__place carries the gap below */
}
.event-card:hover .event-card__title { color: var(--accent); }
.event-card__excerpt {
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 1.15rem;
}
.event-card__excerpt p { font-size: .72em; }

/* Auto margin keeps the links on one line across cards whose titles wrap to
   different depths — same trick as .blog-card .link-more. align-self stops the
   flex column stretching the link's hit area to the full card width.
   Everything else (size, colour, arrow nudge on hover) comes from .link-more. */
.event-card__cta {
  align-self: flex-start;
  margin-top: auto;
}

/* ==========================================================================
   14. INSIGHTS
   ========================================================================== */
/* Four cards plus their three gaps fill the content column exactly, so the
   fifth starts where that column ends and is reached by scrolling. */
.insight-track > * { flex: 0 0 calc((100% - 4.5rem) / 4); }
@media (max-width: 1199.98px) { .insight-track > * { flex-basis: calc((100% - 3rem) / 3); } }
@media (max-width: 991.98px)  { .insight-track > * { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (max-width: 767.98px)  { .insight-track > * { flex-basis: 80%; } }

.blog-card {
  height: 100%;
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
}
.blog-card__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 1.15rem;
}
.blog-card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.06); }
.blog-card__date {
  font-family: var(--font-heading);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem;
}
.blog-card__title {
  font-size: .8em;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: .7rem;
}
.blog-card:hover .blog-card__title { color: var(--accent); }
.blog-card__excerpt {
  line-height: 1.7;
  color: rgba(255,255,255,.66);
  margin-bottom: 1.1rem;
}
.blog-card .link-more { margin-top: auto; }

/* ==========================================================================
   15. PARTNER REGISTRATION (dialog)
   ========================================================================== */
/* Two panes: the pitch on a blue gradient, the form on the dark panel. Padding
   lives on each pane, not .modal-content, so the gradient reaches the dialog's
   edge; overflow clips both panes to the rounded corner. */
.partner-modal .modal-content {
  background: #0C121D;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.partner-modal .modal-body { padding: 0; }
.partner-modal__grid { display: grid; grid-template-columns: 1fr 1fr; }

.partner-modal__aside {
  padding: clamp(1.75rem, 3vw, 3rem);
  background:
    radial-gradient(70% 90% at 8% 0%, rgba(31,176,238,.16) 0%, rgba(31,176,238,0) 62%),
    linear-gradient(128deg, #0A2148 0%, #071734 55%, #050E1F 100%);
}
/* Overrides the 70px h1/h2/h3 baseline — that size is for full sections. */
.partner-modal__heading {
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.12;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
.partner-modal__lead { font-size: .95em; font-weight: 600; margin-bottom: .7rem; }
.partner-modal__intro { color: var(--text-muted); margin-bottom: 2rem; }
.partner-modal__intro p { font-size: .72em; }

.partner-modal__list { display: grid; gap: 1.35rem; margin: 0; padding: 0; }
/* Tick in its own column so wrapped description lines stay flush with the
   title above them rather than tucking under the icon. */
.partner-modal__item { display: grid; grid-template-columns: auto 1fr; gap: .85rem; }
.partner-modal__tick {
  width: 22px; height: 22px;
  margin-top: .15rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-600);
  color: #fff;
  font-size: .72rem;
}
.partner-modal__item-title { font-size: .72em; font-weight: 600; margin-bottom: .2rem; }
.partner-modal__item-desc { color: var(--text-muted); }
.partner-modal__item-desc p { font-size: .66em; }

.partner-modal__pane { padding: clamp(1.75rem, 3vw, 3rem); }
.partner-modal__title { font-size: .95em; font-weight: 600; margin-bottom: .55rem; }
.partner-modal__copy { color: var(--text-muted); margin-bottom: 1.6rem; }
.partner-modal__copy p { font-size: .72em; }

/* Stacked below lg, with the form first — the dialog exists to be filled in,
   so the pitch shouldn't stand between the visitor and the fields. */
@media (max-width: 991.98px) {
  .partner-modal__grid { grid-template-columns: 1fr; }
  .partner-modal__pane  { order: 1; }
  .partner-modal__aside { order: 2; }
  .partner-modal__heading { margin-bottom: 1.25rem; }
}

.partner-modal .btn-close {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  z-index: 2;   /* above both panes, which paint their own backgrounds */
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .5;
}
.partner-modal .btn-close:hover { opacity: 1; }

/* Bootstrap paints .form-select's chevron dark; on this panel it needs a light
   one, and the colour must be set as background-color or it wipes the image. */
.contact-form .form-select {
  background-color: rgba(255,255,255,.05);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: .68em;
  padding: .78em 1em;
}
.contact-form .form-select:focus {
  background-color: rgba(255,255,255,.08);
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(31,176,238,.14);
  color: #fff;
}
.contact-form .form-select option { background: #0C121D; color: #fff; }

/* ==========================================================================
   16. GET IN TOUCH
   ========================================================================== */
.contact-bg { background: linear-gradient(39deg, #002C5B -5.79%, #070C15 86.61%); }

.contact-item { gap: 1rem; }
.contact-item + .contact-item { margin-top: 1.5rem; }
.contact-item__icon {
  width: 52px; height: 52px;
  flex: 0 0 52px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center;
  font-size: 1.25rem;
  color: #22D3EE;
}
/* Bootstrap Icons ship .bi with vertical-align: -.125em and an inherited
   line-height, which together push the glyph below the box's centre. Blockifying
   drops the vertical-align (it only applies to inline boxes) and line-height: 1
   trims the half-leading, so place-items can actually centre it. */
.contact-item__icon i {
  display: block;
  line-height: 1;
}
.contact-item__label {
  font-family: var(--font-heading);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: .25rem;
}
.contact-item__value { line-height: 1.55; }

.contact-form {
  background: #070D18;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.8vw, 2.4rem);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9);
  max-width: 588px;
}
/* Narrower than its col-lg-7, so pin it to the right of the column to keep
   the panel edge flush with the container. */
@media (min-width: 992px) {
  .contact-form { margin-inline-start: auto; }
}
.contact-form__title { font-size: .95em; font-weight: 600; margin-bottom: .55rem; }

.form-label-mini {
  font-family: var(--font-heading);
  font-size: .5em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: .45rem;
  display: block;
}
.contact-form .form-control {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: .68em;
  padding: .78em 1em;
}
.contact-form .form-control::placeholder { color: rgba(255,255,255,.32); }
.contact-form .form-control:focus {
  background: rgba(255,255,255,.08);
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(31,176,238,.14);
  color: #fff;
}
.contact-form .form-control:invalid:not(:placeholder-shown) { border-color: rgba(255,120,120,.55); }
.contact-form .btn-submit {
  background: var(--primary-600);
  border: 1px solid var(--primary-600);
  color: #fff;
  width: 100%;
  padding: .85em 1.5em;
  font-size: .74rem;
}
.contact-form .btn-submit:hover { background: #0A66AC; border-color: #0A66AC; color: #fff; }
.form-status { margin-top: .9rem; min-height: 1.2em; }

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.site-footer { background: #060A12; border-top: 1px solid rgba(255,255,255,.07); }
.footer__tagline {
  line-height: 1.75;
  color: var(--text-faint);
  max-width: 34ch;
  margin-top: 1.2rem;
}
.footer__heading {
  font-size: 20px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: 1.4rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li + li { margin-top: .75rem; }
.footer__list a {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-faint);
}
/* Split from the rule above: this one wraps a <p>, so it sets no font-size. */
.footer__contact {
  line-height: 1.6;
  color: var(--text-faint);
}
.footer__list a:hover { color: #fff; }
/* The class lives on the wrapper div, but the icon + text are children of the
   <p>, so the flex row has to sit on the paragraph itself. */
.footer__contact > p { display: flex; gap: .65rem; align-items: flex-start; }
.footer__contact + .footer__contact { margin-top: .85rem; }
.footer__contact i { color: rgba(255,255,255,.55); margin-top: .25em; }

.footer__socials { gap: .5rem; margin-top: 1.6rem; }
.footer__social {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-size: .8rem;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.footer__social:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-block: 1.35rem;
  font-size: .56em;
  color: var(--text-faint);
}
.footer__bottom a:hover { color: #fff; }
.footer__legal { gap: 1.6rem; }

/* ==========================================================================
   18. MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .product-track { scroll-behavior: auto; }
}

/* ==========================================================================
   19. INNER PAGES — shared building blocks
   Everything here composes the landing page's existing tokens and card
   pattern; no new colours, radii or timings are introduced.
   ========================================================================== */

/* Breadcrumb — mono, to match .product-card__code and .training-card__code */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55em;
  margin-bottom: 1.4rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .55em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
  list-style: none;
  padding: 0;
}
.crumbs a { color: var(--accent); }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-right: .55em; opacity: .5; }
.crumbs li { display: flex; align-items: center; }

/* Generic content card — the .product-card / .event-card pattern, unstyled by
   any one section so pages can drop it anywhere. */
.tile {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.2vw, 1.9rem);
  transition: border-color .25s ease, transform .25s ease;
}
.tile:hover { border-color: rgba(127,208,245,.4); transform: translateY(-4px); }
.tile__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(31,176,238,.12);
  border: 1px solid rgba(31,176,238,.28);
  color: var(--accent);
  font-size: 1.15rem;
  margin-bottom: 1.1rem;
}
.tile__icon i { display: block; line-height: 1; }
.tile__title { font-size: 20px; font-weight: 600; line-height: 1.4; margin-bottom: .55rem; }
.tile__text { color: var(--text-muted); }
.tile__text p { font-size: .72em; }
.tile .link-more { margin-top: auto; padding-top: 1.1rem; }

/* Numbered process step — same tile shell, index instead of an icon */
.step__num {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary-600);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
}

/* Media + copy row, alternating. .row-media--flip reverses it on lg and up so
   a page can stack several without them all leaning the same way. */
.row-media img { width: 100%; border-radius: var(--radius); object-fit: cover; }
@media (min-width: 992px) {
  .row-media--flip { flex-direction: row-reverse; }
}

/* Bulleted feature list — ticks reuse the dialog's treatment */
.tick-list { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.tick-list li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; }
.tick-list__mark {
  width: 22px; height: 22px;
  margin-top: .15rem;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-600);
  color: #fff;
  font-size: .72rem;
}
.tick-list__title { font-size: .72em; font-weight: 600; margin-bottom: .2rem; }
.tick-list__desc { color: var(--text-muted); }
.tick-list__desc p { font-size: .66em; }

/* Closing call-to-action band */
.cta-band {
  background:
    radial-gradient(65% 90% at 88% 15%, rgba(127,208,245,.20) 0%, rgba(127,208,245,0) 62%),
    linear-gradient(103deg, #0B6FBB 0%, #0C54A0 55%, #0A3F7C 100%);
}
.cta-band__title { max-width: 20ch; margin-bottom: .9rem; }
.cta-band__text { color: rgba(255,255,255,.78); max-width: 52ch; }
.cta-band__text p { font-size: .75em; }

/* Brand logo plate — hero strip logos need a light ground at larger sizes */
/* Every plate is the same box: a fixed ratio gives identical width and height
   whatever the column, and the logo is *contained* inside it rather than
   height-locked. Locking height made a wide mark fill the plate while a narrow
   one floated in space; containing it means each logo scales to whichever of
   its own dimensions runs out first, so the whitespace around all of them is
   even. */
.logo-plate {
  aspect-ratio: 12 / 5;
  display: grid;
  place-items: center;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: rgba(255,255,255,.94);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease;
}
.logo-plate img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* The brand hero sits inline, so it needs an explicit width for the ratio. */
.logo-plate--hero { width: min(260px, 70%); }
/* Brands whose artwork has not been supplied yet: the name is set in the
   heading face so the wall stays even until a logo file replaces it. */
.logo-plate--text {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #0A0F1A;
  text-align: center;
}

/* FAQ accordion */
.faq { display: grid; gap: .75rem; }
.faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: none;
  border: 0;
  text-align: left;
  color: #fff;
  font-family: var(--font-heading);
  font-size: .75em;
  font-weight: 500;
  transition: color .2s ease;
}
.faq__q:hover { color: var(--accent); }
.faq__q i { transition: transform .25s ease; color: var(--accent); font-size: .9em; }
.faq__q[aria-expanded="true"] i { transform: rotate(180deg); }
.faq__a { padding: 0 1.3rem 1.2rem; color: var(--text-muted); }
.faq__a p { font-size: .72em; }
.faq__a[hidden] { display: none; }

/* Job listing row */
.job {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .25s ease, transform .25s ease;
}
.job:hover { border-color: rgba(127,208,245,.4); transform: translateY(-3px); }
.job__title { font-size: 20px; font-weight: 600; margin-bottom: .45rem; }
.job__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  font-family: var(--font-heading);
  font-size: .58em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.job__meta span { display: flex; align-items: center; gap: .5em; }
.job__meta i { color: var(--accent); }

/* Spec table — products page */
.spec-table { width: 100%; border-collapse: collapse; font-size: .72em; }
.spec-table th,
.spec-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--border); text-align: left; }
.spec-table th { font-family: var(--font-heading); font-weight: 600; color: #fff; white-space: nowrap; }
.spec-table td { color: var(--text-muted); }
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }
/* Narrow screens scroll the table rather than squashing it */
.spec-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }

/* Resources and Career are reached from the topbar rather than the main bar,
   so the current-page marker goes there. Matches .nav-main .nav-link.active:
   full-strength white against the muted rest. */
.topbar__link.active { color: #fff; }

/* ==========================================================================
   20. ABOUT PAGE
   Two components the other pages don't need. Both are built from the same
   surface / border / hover-lift pattern as .product-card and .tile.
   ========================================================================== */

/* Image collage — a main shot with a second inset over its corner and an
   experience badge on the other side. The offsets are only applied from lg up;
   below that the pieces stack so nothing hangs off a narrow screen. */
.about-collage { position: relative; }
.about-collage__main img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.about-collage__inset { margin-top: 1rem; }
.about-collage__inset img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.about-badge {
  display: inline-block;
  margin-top: 1rem;
  padding: 1rem 1.35rem;
  border-radius: var(--radius);
  background: var(--primary-600);
  text-align: center;
}
.about-badge__num {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}
.about-badge__label {
  font-family: var(--font-heading);
  font-size: .58em;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-top: .4rem;
}

@media (min-width: 992px) {
  /* Padding on the wrapper reserves the room the overlapping pieces sit in,
     so they never cover the copy column beside them. */
  .about-collage { padding: 0 0 3.5rem 3.5rem; }
  .about-collage__inset {
    position: absolute;
    left: 0; bottom: 0;
    width: 52%;
    margin-top: 0;
    /* Border matches the section ground, reading as a gap punched through. */
    border: 8px solid var(--bg-dark);
    border-radius: calc(var(--radius) + 8px);
  }
  .about-collage__inset img { border-radius: calc(var(--radius) - 2px); }
  .about-badge {
    position: absolute;
    right: 0; top: 1.75rem;
    margin-top: 0;
    box-shadow: 0 18px 40px -20px rgba(0,0,0,.9);
  }
}
/* On the navy section the cut-out has to match that ground instead */
.section--navy .about-collage__inset { border-color: var(--bg-navy); }

/* Opening section, shared by every inner page. There is deliberately no banner
   above it — pages start on content, so this carries the breathing room a
   banner would have given them. Top padding is heavier than the bottom so the
   heading clears the sticky header without a band of empty colour above it. */
.page-intro {
  padding-block: clamp(3.5rem, 7vw, 8rem) var(--section-y);
  padding-inline: clamp(65px, 3vw, 3rem);
  background-color: var(--bg-dark);
}
.page-intro__title { max-width: 20ch; margin-bottom: 1.5rem; }
.page-intro__lead { color: var(--text-muted); max-width: 58ch; }
/* Paragraphs are margin: 0 globally, so stacked copy sets its own rhythm. */
.page-intro__lead p { font-size: .82em; line-height: 1.75; }
.page-intro__lead p + p { margin-top: 1.15rem; }

/* Oversized editorial line used to open a section in place of body copy. */
.statement {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
  max-width: 30ch;
}
.statement em { color: var(--accent); font-style: normal; }

/* ==========================================================================
   21. EVENTS LISTING
   A list-and-sidebar layout rather than the card carousel used on the landing
   page. Every piece is built from the existing surface / border / hover-lift
   pattern, so it reads as the same family as .tile and .product-card.
   ========================================================================== */
.event-list { display: grid; gap: 1rem; }

/* Date block sits in its own column so a wrapped title stays aligned with the
   line above it instead of running under the date. */
.event-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
  padding: clamp(1.25rem, 2.2vw, 1.85rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .25s ease, transform .25s ease;
}
.event-row:hover { border-color: rgba(127,208,245,.4); transform: translateY(-4px); }

.event-row__date {
  width: 84px;
  padding: .85rem .5rem;
  border-radius: var(--radius-sm);
  background: rgba(31,176,238,.12);
  border: 1px solid rgba(31,176,238,.28);
  text-align: center;
  font-family: var(--font-heading);
}
.event-row__day   { font-size: 1.75rem; font-weight: 600; line-height: 1; color: #fff; }
.event-row__month {
  font-size: .58em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: .35rem;
}

.event-row__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: .55rem;
}
.event-row__cat {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .55em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.event-row__title { font-size: 20px; font-weight: 600; line-height: 1.4; margin-bottom: .4rem; }
.event-row:hover .event-row__title { color: var(--accent); }
.event-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-bottom: .8rem;
  font-family: var(--font-heading);
  font-size: .58em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.event-row__meta span { display: flex; align-items: center; gap: .5em; }
.event-row__meta i { color: var(--accent); }
.event-row__excerpt { color: var(--text-muted); margin-bottom: .9rem; }
.event-row__excerpt p { font-size: .72em; }

/* Below sm the date block would squeeze the title, so it goes full width. */
@media (max-width: 575.98px) {
  .event-row { grid-template-columns: 1fr; }
  .event-row__date { width: auto; display: flex; align-items: baseline; justify-content: center; gap: .6rem; }
  .event-row__month { margin-top: 0; }
}

/* Sidebar ------------------------------------------------------------------ */
.sidebar { display: grid; gap: 1rem; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.15rem, 2vw, 1.6rem);
}
.widget__title { font-size: 20px; font-weight: 600; margin-bottom: 1.1rem; }
.widget__text { color: var(--text-muted); margin-bottom: 1rem; }
.widget__text p { font-size: .72em; }
.widget .form-control {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: .68em;
  padding: .78em 1em;
  margin-bottom: .65rem;
}
.widget .form-control::placeholder { color: rgba(255,255,255,.32); }
.widget .form-control:focus {
  background: rgba(255,255,255,.08);
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(31,176,238,.14);
  color: #fff;
}
.widget .btn-submit { width: 100%; padding: .8em 1.4em; font-size: .7rem; background: var(--primary-600); border: 1px solid var(--primary-600); color: #fff; }
.widget .btn-submit:hover { background: #0A66AC; border-color: #0A66AC; color: #fff; }

.widget-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.widget-list li + li { border-top: 1px solid var(--border); padding-top: .9rem; }
.widget-list__date {
  font-family: var(--font-heading);
  font-size: .55em;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .2rem;
}
.widget-list__title { font-size: .72em; line-height: 1.5; color: rgba(255,255,255,.82); }
.widget-list a:hover .widget-list__title { color: #fff; }

.widget-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.widget-links a { display: flex; align-items: center; gap: .6em; font-size: .72em; color: var(--text-faint); }
.widget-links a:hover { color: #fff; }
.widget-links i { color: var(--accent); font-size: .9em; }

/* Pagination — custom rather than Bootstrap's .pagination so it inherits this
   palette instead of needing every default overridden. */
.pager { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 2.25rem 0 0; padding: 0; }
.pager__link {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .9em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: .72em;
  color: var(--text-muted);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pager__link:hover { border-color: var(--border-strong); color: #fff; }
.pager__link[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.pager__link[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* ==========================================================================
   22. MASONRY
   Two columns that pack by height rather than by row, so cards of unequal
   depth sit flush instead of leaving ragged gaps. CSS multi-column rather than
   a grid: no JS, and the natural flow gives the staggered rhythm. The ground
   stays the section's own flat colour — no rules, lines or pattern behind it.
   ========================================================================== */
.masonry {
  column-count: 2;
  column-gap: clamp(1.5rem, 3vw, 3rem);
}
.masonry > * {
  /* Both properties are needed: the prefixed one for older WebKit, which would
     otherwise split a card across the column break. */
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 767.98px) { .masonry { column-count: 1; } }

/* Height variation comes from the image ratio rather than padding tricks, so
   the cards stagger without their type or spacing drifting apart. */
.masonry .blog-card__media img       { aspect-ratio: 3 / 2; }
.masonry .masonry--tall .blog-card__media img,
.masonry .masonry--tall.blog-card .blog-card__media img { aspect-ratio: 3 / 4; }
.masonry .masonry--wide .blog-card__media img,
.masonry .masonry--wide.blog-card .blog-card__media img { aspect-ratio: 16 / 9; }

/* ==========================================================================
   23. PRODUCT SHOT
   Manufacturer photography arrives at every imaginable size and aspect, cut
   out on white. A fixed-ratio plate makes every product render at the same
   size whatever the source file is, and `contain` fits the product inside it
   rather than cropping a scanner in half. The white ground is the same one
   .logo-plate uses, so product and brand imagery read as one system.
   ========================================================================== */
.product-shot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
/* Soft tint bled in from the corner keeps the plate from reading as a plain
   white box against the dark page. */
.product-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(31,176,238,.10) 0%, rgba(31,176,238,0) 60%);
  pointer-events: none;
}
.product-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Overrides the global img rule, which would otherwise let tall photos
     dictate their own height and break the fixed ratio. */
  max-width: 100%;
  transition: transform .45s ease;
}
.product-shot:hover img { transform: scale(1.04); }

/* The thumbnail rail under the main shot, same plate at a smaller ratio. */
.product-shot--thumb { aspect-ratio: 1 / 1; padding: clamp(.6rem, 1.6vw, 1rem); border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   23b. BACK LINK — one step up the drill-down, injected by site.js above the
   breadcrumb. Sits tight to the crumbs so the two read as one nav cluster.
   -------------------------------------------------------------------------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .85rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color .25s ease, transform .25s ease;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--accent-strong);
  transform: translateX(-3px);
}

.back-link i { font-size: .95rem; }

/* ------------------------------------------------------------------
   1300px band (1200-1399px).

   This is the only range where the full navbar has to fit: below
   1200px it collapses to a burger, and above 1400px there is spare
   room. At 1300px the logo, eight menu items, the phone number and
   the CTA together need roughly 1420px, so the links were being
   squeezed until "About Us" broke across two lines.

   Trimming the logo height, the link padding and the tool gaps buys
   back about 200px, which clears the overflow without changing any
   colour, weight or component style.
   ------------------------------------------------------------------ */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  :root { --font-size-p: 16px; }

  h1 { font-size: 65px; }
  h2, h3, .heading { font-size: 40px; }





  /* Featured Products card names, down from the 24px design baseline. */
  .product-card__name { font-size: 18px; }

  /* Footer text, one step down from the desktop sizes. The bottom bar is
     set explicitly because its two halves were on different scales: the
     copyright paragraph took --font-size-p while "Powered By" took the
     .56em from .footer__bottom. */
  .footer__heading { font-size: 17px; }
  .footer__list a { font-size: 15px; }
  .footer__tagline p { font-size: 14px; }
  .footer__contact p { font-size: 14px; }
  .footer__bottom,
  .footer__bottom p,
  .footer__powered { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   24. ABOUT PAGE ACCENTS

   Two small additions, both on existing tokens: a photo frame that matches the
   tile radius and border so imagery sits in the same visual family as the
   cards, and a feature panel that gives the Vision/Mission pair equal weight
   instead of leaving them as two loose paragraphs.
   -------------------------------------------------------------------------- */
.media-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile--feature { padding: clamp(1.6rem, 3vw, 2.6rem); }

/* A rule instead of an icon: quieter, and it reads as a masthead for the
   statement below rather than competing with it. */
.tile--feature::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 1.4rem;
  border-radius: 2px;
  background: var(--accent-strong);
}

.tile--feature .statement { max-width: 34ch; }

/* These panels are not links, so the card lift would promise an interaction
   that is not there. */
.tile--feature:hover {
  transform: none;
  border-color: var(--border);
}

.footer__powered {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--text-faint);
}

.footer__powered img {
  width: 26px;
  height: 26px;
  display: block;
}

/* --------------------------------------------------------------------------
   FOOTER TOP ROW ALIGNMENT

   The logo and the four column headings share the first row of the footer.
   Both start at the top of the row, but the logo is 52px tall against a 20px
   heading, so their centres sat well apart and read as misaligned. Giving each
   the same box height and centring the contents inside it puts the wordmark
   and the headings on one line.

   The heading also drops the uppercase/tracking treatment to match the
   supplied design, which sets them in title case.
   -------------------------------------------------------------------------- */
.site-footer .brand {
  min-height: 52px;
  margin-bottom: 0;
}

.site-footer .footer__heading {
  min-height: 52px;
  display: flex;
  align-items: center;
  margin-bottom: 1.4rem;
  text-transform: none;
  letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   25. TEAM AND TESTIMONIAL CARDS

   Both are built on the same surface/border/radius as .tile so the About page
   reads as one system. Avatars are initials on a tinted plate rather than
   photographs: the people are placeholders, and a stock face would imply a
   real person who does not exist.
   -------------------------------------------------------------------------- */
.team-card { text-align: center; }

.team-card__avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 1.15rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--primary-600) 0%, var(--primary-800) 100%);
  border: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
}

.team-card__name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: .25rem;
}

.team-card__role {
  font-family: var(--font-heading);
  font-size: .6em;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.quote-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: border-color .25s ease, transform .25s ease;
}

.quote-card:hover {
  border-color: rgba(127, 208, 245, .4);
  transform: translateY(-4px);
}

.quote-card__mark {
  color: var(--accent);
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: .9rem;
}

.quote-card__text {
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 1.4rem;
}

.quote-card__text p { font-size: .74em; }

/* margin-top:auto keeps the attribution on the baseline across a row of cards
   whose quotes run to different lengths. */
.quote-card__author {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: auto;
}

.quote-card__avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(31, 176, 238, .14);
  border: 1px solid rgba(31, 176, 238, .3);
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent);
}

.quote-card__name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.quote-card__role {
  font-family: var(--font-heading);
  font-size: .62em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   26. MANAGEMENT BAND

   Three columns on the brand gradient: counters left, portrait centre, the
   leadership message and social links right. The reference uses a flat brand
   colour; .gradient-bg is the PV Lumens equivalent, so the band reads as a
   feature strip in the same way without importing another palette.
   -------------------------------------------------------------------------- */
.mgmt-stat { padding-left: 2.1rem; position: relative; }

.mgmt-stat + .mgmt-stat { margin-top: clamp(1.8rem, 3.5vw, 3rem); }

/* The ring marker sits on the number's cap height rather than the top of the
   box, so it stays aligned as the number scales. */
.mgmt-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55);
}

.mgmt-stat__num {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 38px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: .5rem;
}

.mgmt-stat__label {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: .35rem;
}

.mgmt-stat__text {
  color: rgba(255, 255, 255, .72);
  line-height: 1.6;
  max-width: 32ch;
}

.mgmt-stat__text p { font-size: .68em; }

.mgmt-portrait {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
}

.mgmt-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mgmt-quote {
  font-family: var(--font-heading);
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: 2rem;
}

.mgmt-name {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  margin-bottom: .35rem;
}

.mgmt-role {
  color: rgba(255, 255, 255, .82);
  font-weight: 500;
}

.mgmt-role p { font-size: .72em; }

.mgmt-rule {
  height: 1px;
  background: rgba(255, 255, 255, .22);
  margin: clamp(1.6rem, 3vw, 2.6rem) 0 clamp(1.2rem, 2vw, 1.8rem);
}

.mgmt-socials { display: flex; gap: .75rem; }

.mgmt-social {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-size: 1rem;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.mgmt-social:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 991.98px) {
  .mgmt-portrait { max-width: 380px; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   27. FILTER BAR

   An alternative to the pill row for the Products page: a live search paired
   with a solution dropdown. Eleven pills wrapped to three lines and gave no
   way to find a category by name; this stays one line and scales as the
   catalogue grows. Field styling matches the contact form so the page keeps
   one input treatment.
   -------------------------------------------------------------------------- */
.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1rem, 1.8vw, 1.4rem);
}

.filter-bar .form-label-mini {
  display: block;
  font-family: var(--font-heading);
  font-size: .6em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .45rem;
}

/* An input and a select resolve their intrinsic line box differently, so equal
   padding still leaves them a pixel or two apart. Fixing the height and
   zeroing the vertical padding makes both controls exactly the same box. */
.filter-bar .form-control,
.filter-bar .form-select {
  width: 100%;
  height: 46px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: .72em;
  line-height: 1.4;
  padding: 0 1em;
}

.filter-bar .form-control::placeholder { color: rgba(255, 255, 255, .32); }

.filter-bar .form-control:focus,
.filter-bar .form-select:focus {
  outline: none;
  background: rgba(255, 255, 255, .08);
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(31, 176, 238, .14);
  color: #fff;
}

/* The native arrow is drawn by the browser in its own colour, so it is
   replaced with one that reads on the dark field. */
.filter-bar .form-select {
  appearance: none;
  -webkit-appearance: none;
  height: 46px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px;
  padding-right: 2.6rem;
}

.filter-bar .form-select option { background: #0C121D; color: #fff; }

/* The row is bottom-aligned, so the button needs the same vertical padding as
   the fields or it sits below their baseline instead of level with them. */
.filter-bar__actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

@media (min-width: 992px) {
  .filter-bar__actions { justify-content: flex-end; }
}

.filter-bar__reset {
  display: inline-flex;
  align-items: center;
  height: 46px;
  background: none;
  border: 0;
  padding: 0;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: .62em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.filter-bar__reset:hover { color: var(--accent-strong); }

/* --------------------------------------------------------------------------
   28. PRODUCT DETAIL PAGE

   Image left, information right. The image panel is a fixed square so every
   product presents at the same size regardless of how tall or wide the
   supplied photograph is - the catalogue mixes 4:3 shots with tall
   instruments, and letting each set its own height made the column jump
   between products.
   -------------------------------------------------------------------------- */
.pdp-gallery {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pdp-gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The panel outruns the copy on long pages; sticking it keeps the product in
   view while the specifications are read. */
@media (min-width: 992px) {
  .pdp-gallery-col { position: sticky; top: calc(var(--nav-h, 76px) + 1.5rem); }
}

.pdp-title { margin-bottom: 1rem; }

.pdp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.pdp-chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .45em .9em;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-heading);
  font-size: .62em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

.pdp-chip i { color: var(--accent); font-size: 1.05em; }
.pdp-chip a { color: inherit; }
.pdp-chip a:hover { color: var(--accent); }

.pdp-lead {
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 1.75rem;
  max-width: 52ch;
}

.pdp-price {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.5rem;
}

.pdp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: 1.75rem;
}

/* A quiet strip of assurances under the buttons, in place of the reference's
   inline enquiry form - the form lives on one page so it stays one form. */
.pdp-assure {
  display: grid;
  gap: .7rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.pdp-assure div {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  color: var(--text-faint);
  font-size: .7em;
  line-height: 1.5;
}

.pdp-assure i { color: var(--accent); font-size: 1em; margin-top: .1em; }

/* Two columns of rows on wide screens so a long specification list does not
   run to a single tall ribbon. */
.pdp-specs { display: grid; gap: 0 clamp(1.5rem, 3vw, 3rem); }

@media (min-width: 768px) {
  .pdp-specs { grid-template-columns: 1fr 1fr; }
}

.pdp-spec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.pdp-spec-row dt {
  font-family: var(--font-heading);
  font-size: .66em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}

.pdp-spec-row dd {
  margin: 0;
  font-size: .74em;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  overflow-wrap: anywhere;
}

.pdp-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.pdp-download__icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(31, 176, 238, .12);
  border: 1px solid rgba(31, 176, 238, .28);
  color: var(--accent);
  font-size: 1.3rem;
}

.pdp-download__text { flex: 1 1 16rem; }
.pdp-download__title { font-size: 18px; font-weight: 600; margin-bottom: .2rem; }
.pdp-download__note { color: var(--text-faint); font-size: .7em; line-height: 1.5; }

/* --------------------------------------------------------------------------
   29. FEATURE CARDS

   Key Features was a tick list squeezed into half a column, which gave the
   icon, the title and the supporting line the same weight. As cards each
   feature gets a numbered plate, a title and a description in descending
   weight, and the grid keeps every card the same height regardless of how long
   the text runs. Tokens only - no new colours or type.
   -------------------------------------------------------------------------- */
.feature-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: clamp(1.35rem, 2.2vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, background-color .25s ease;
}

/* A hairline that fills on hover — enough to register as interactive weight
   without adding another colour or a heavy shadow. */
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--accent-strong);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s ease;
}

.feature-card:hover {
  border-color: rgba(127, 208, 245, .4);
  background: var(--surface-hover);
  transform: translateY(-4px);
}

.feature-card:hover::before { transform: scaleY(1); }

.feature-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: .9rem;
  border-radius: var(--radius-sm);
  background: rgba(31, 176, 238, .12);
  border: 1px solid rgba(31, 176, 238, .28);
  color: var(--accent);
  font-size: 1.1rem;
}

.feature-card__icon i { display: block; line-height: 1; }

.feature-card__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}

.feature-card__text {
  color: var(--text-muted);
  line-height: 1.65;
}

.feature-card__text p { font-size: .7em; }

/* The index sits behind the card as a watermark, so the eye reads icon, then
   title, then description, and the number never competes with them. */
.feature-card__num {
  position: absolute;
  top: .6rem;
  right: 1rem;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, .05);
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .feature-card__num { font-size: 2rem; }
}

/* --------------------------------------------------------------------------
   30. PRODUCT DESCRIPTION

   Sits under the one-line summary in the hero rather than in a section of its
   own, so the product is described where it is introduced. Slightly smaller
   and quieter than the lead above it, which keeps the order of reading:
   name, summary, description.
   -------------------------------------------------------------------------- */
.pdp-desc {
  color: var(--text-faint);
  line-height: 1.75;
  margin-bottom: 1.75rem;
  max-width: 56ch;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.pdp-desc p + p { margin-top: .85rem; }
.pdp-desc p { font-size: .72em; }

/* --------------------------------------------------------------------------
   31. EVENTS LISTING SPACING

   The listing follows the intro directly, so the section's full top padding
   stacked on the intro's bottom padding and left a wide empty band between the
   heading and the first event. Only the top is reduced; the bottom keeps the
   standard rhythm before the closing band.
   -------------------------------------------------------------------------- */
.events-list { padding-top: clamp(1.25rem, 2.5vw, 2.25rem); }

/* --------------------------------------------------------------------------
   32. PAGE TITLE

   Only the landing page hero is an <h1>; every other page's main heading is an
   <h2> for correct document semantics. h2 is two steps smaller than h1 in this
   stylesheet, so this class carries the h1 scale across to those headings and
   the pages look exactly as they did. A class beats a bare element selector at
   every breakpoint, so no ordering tricks are needed.
   -------------------------------------------------------------------------- */
.page-title { font-size: 48px; }

@media (max-width: 1399.98px) {
  .page-title { font-size: 48px; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .page-title { font-size: 40px; }
}

@media (max-width: 991.98px) {
  .page-title { font-size: 36px; }
}

@media (max-width: 575.98px) {
  .page-title { font-size: 32px; }
}

/* --------------------------------------------------------------------------
   33. DATA SHEET PRINT VIEW

   Only a handful of models have a manufacturer PDF. For the rest the page
   itself is the data sheet: printing (or "Save as PDF") drops the site chrome
   and lays the product out on white. The dark theme is inverted here on
   purpose - printing a near-black page wastes toner and reads poorly.
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .back-link,
  .pdp-download,
  .search-drawer,
  .modal,
  .modal-backdrop,
  .navbar-toggler,
  [data-print-hide] { display: none !important; }

  html, body {
    background: #FFFFFF !important;
    color: #111111 !important;
    font-size: 11pt;
  }

  .section,
  .page-intro,
  .section--dark,
  .section--navy,
  .gradient-bg {
    background: #FFFFFF !important;
    padding-block: 0 !important;
  }

  .container { max-width: none !important; padding: 0 !important; }

  h1, h2, h3,
  .page-title,
  .pdp-title,
  .feature-card__title,
  .pdp-spec-row dt { color: #111111 !important; }

  .pdp-lead,
  .pdp-desc,
  .feature-card__text,
  .pdp-spec-row dd,
  .lead-muted { color: #333333 !important; }

  .eyebrow { color: #555555 !important; }

  /* Keep the product visible but stop it taking a whole sheet on its own. */
  .pdp-gallery {
    aspect-ratio: auto;
    max-height: 78mm;
    padding: 0;
    border: 1px solid #CCCCCC;
    break-inside: avoid;
  }

  .pdp-chip {
    background: #FFFFFF !important;
    border-color: #BBBBBB !important;
    color: #111111 !important;
  }

  .feature-card {
    background: #FFFFFF !important;
    border-color: #DDDDDD !important;
    break-inside: avoid;
  }

  .feature-card__num { display: none !important; }

  .feature-card__icon {
    background: #FFFFFF !important;
    border-color: #BBBBBB !important;
    color: #333333 !important;
  }

  .pdp-spec-row { border-bottom-color: #DDDDDD !important; break-inside: avoid; }

  .pdp-assure { border-top-color: #DDDDDD !important; }
  .pdp-assure div { color: #444444 !important; }

  a { color: #111111 !important; text-decoration: none !important; }

  @page { margin: 14mm; }
}

/* --------------------------------------------------------------------------
   34. NAVBAR RESPONSIVENESS

   Budget at the tightened sizes: logo 246 + eight links 543 + tools 361 +
   container padding 44 = about 1194px. That fits 1280px with room, and does
   not fit 1200px - so the full menu starts at 1280 and the burger covers
   everything below it rather than letting the row wrap.

   Colours, type and the design are untouched; only metrics change.
   -------------------------------------------------------------------------- */

/* Nothing in the bar may wrap, at any width. */
.navbar-main > .container-fluid { flex-wrap: nowrap; }
.navbar-main .nav-main .nav-link { white-space: nowrap; }
.navbar-main .nav-phone { white-space: nowrap; }
.brand { flex: 0 0 auto; min-width: 0; }
.brand__logo { max-width: 100%; }

/* 1280-1399: the full menu, tightened to fit. */
@media (min-width: 1280px) and (max-width: 1399.98px) {
  .brand__logo { height: 38px; }
  .nav-main { gap: 0; flex-wrap: nowrap; }
  .nav-main .nav-link { font-size: 14px; padding: 0 .42rem; }
  .nav-main .nav-link::after { left: .42rem; right: .42rem; }
  .nav-tools { gap: .5rem; }
  .nav-phone { font-size: 13px; }
  .navbar-main .btn-quote { font-size: 13px; padding-inline: .85rem; }
  .navbar-main > .container-fluid { padding-inline: 1rem; gap: .6rem; }
  .navbar-main .navbar-collapse { flex-wrap: nowrap; }
}

/* 1400-1519: the full-size logo and link padding need about 1408px, so this
   range gets an intermediate step rather than jumping straight to the base. */
@media (min-width: 1400px) and (max-width: 1519.98px) {
  .brand__logo { height: 44px; }
  .nav-main { gap: .1rem; }
  .nav-main .nav-link { padding: 0 .6rem; }
  .nav-main .nav-link::after { left: .6rem; right: .6rem; }
  .nav-tools { gap: .65rem; }
  .nav-phone { font-size: 14px; }
  .navbar-main .btn-quote { font-size: 14px; padding-inline: 1rem; }
  .navbar-main > .container-fluid { padding-inline: 1.15rem; gap: .7rem; }
}
/* Below 1280 the eight items cannot fit alongside the phone and CTA, so the
   burger takes over. Bootstrap's navbar-expand-xl would have shown them from
   1200; these two rules move that threshold without changing the markup. */
@media (max-width: 1279.98px) {
  .navbar-main .navbar-collapse { display: none !important; }
  .navbar-main .navbar-toggler { display: inline-flex !important; }
}

/* 992-1279: burger layout. Logo, phone and CTA come down so the row stays
   comfortable at 1024. */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .brand__logo { height: 40px; }
  .nav-tools { gap: .6rem; }
  .nav-phone { font-size: 14px; }
  .navbar-main .btn-quote { font-size: 14px; padding-inline: 1rem; }
  .navbar-main > .container-fluid { padding-inline: 1rem; gap: .75rem; }
}

/* 768-991: the topbar is hidden here, so the phone in the bar is the only
   number on screen and is kept, just smaller. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .brand__logo { height: 36px; }
  .nav-tools { gap: .5rem; }
  .nav-phone { font-size: 13px; }
  .navbar-main .btn-quote { font-size: 13px; padding-inline: .8rem; }
  .navbar-main > .container-fluid { padding-inline: .85rem; gap: .5rem; }
}

/* Below 768 the phone and search are already hidden by the markup's utility
   classes; only the logo, CTA and burger remain. */
@media (max-width: 767.98px) {
  .brand__logo { height: 34px; }
  .navbar-main .btn-quote { font-size: 13px; padding-inline: .8rem; }
  .navbar-main > .container-fluid { padding-inline: .85rem; gap: .5rem; }
}

@media (max-width: 359.98px) {
  .brand__logo { height: 30px; }
  .navbar-main .btn-quote { font-size: 12px; padding-inline: .65rem; }
}

/* --------------------------------------------------------------------------
   35. PRODUCT FILTER PANEL

   The reference puts its categories in a left rail beside the grid. Same
   arrangement here, but the rail is interactive: three checkbox groups that
   narrow the listing live. Sticky on desktop so the filters stay reachable
   through a long list; a disclosure button on mobile so they do not push the
   products off the first screen.
   -------------------------------------------------------------------------- */
.filter-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
}

@media (min-width: 992px) {
  .filter-panel { position: sticky; top: calc(var(--nav-h, 76px) + 1.25rem); }
}

.filter-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--border);
}

.filter-panel__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.filter-group { padding-block: 1.1rem; border-bottom: 1px solid var(--border); }
.filter-group:last-child { border-bottom: 0; padding-bottom: 0; }

.filter-group__title {
  font-family: var(--font-heading);
  font-size: .62em;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .8rem;
}

/* Long groups scroll inside themselves rather than making the rail taller
   than the viewport, which would defeat the sticky position. */
.filter-group__list {
  display: grid;
  gap: .55rem;
  max-height: 15.5rem;
  overflow-y: auto;
  padding-right: .35rem;
}

.filter-group__list::-webkit-scrollbar { width: 4px; }
.filter-group__list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

.filter-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  color: var(--text-muted);
  font-size: .72em;
  line-height: 1.4;
  transition: color .2s ease;
}

.filter-option:hover { color: #fff; }

.filter-option input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: rgba(255, 255, 255, .04);
  display: grid;
  place-items: center;
  transition: background-color .2s ease, border-color .2s ease;
}

.filter-option input::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: scale(0);
  background: #fff;
  transition: transform .15s ease;
}

.filter-option input:checked {
  background: var(--primary-600);
  border-color: var(--primary-600);
}

.filter-option input:checked::after { transform: scale(1); }
.filter-option input:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.filter-option input:checked + .filter-option__label { color: #fff; }

.filter-option__label { flex: 1 1 auto; }

.filter-option__count {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: .82em;
  color: var(--text-faint);
}

/* Options with nothing left to show after the other groups narrow the set. */
.filter-option.is-empty { opacity: .35; }

.filter-clear {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: .6em;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.filter-clear:hover { color: var(--accent-strong); }

.filter-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  color: var(--text-faint);
  font-size: .72em;
}

/* Mobile disclosure. The panel is open markup-side so it works without JS. */
.filter-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1.1rem;
  margin-bottom: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .72em;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.filter-toggle i { transition: transform .25s ease; color: var(--accent); }
.filter-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

@media (max-width: 991.98px) {
  .filter-toggle { display: flex; }
  .filter-panel[hidden] { display: none; }
}

.filter-empty {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  text-align: center;
}