/* ============================================================
   Facility Armor – Main Stylesheet 2026
   Brand: Victory Red (#C8102E), Dark (#0E0E10), White (#FFF)
   ============================================================ */

/* Subheading font: Tomorrow (Google Fonts) — @import must precede @font-face */
@import url('https://fonts.googleapis.com/css2?family=Tomorrow:wght@400;500;600;700&display=swap');

/* ---------- Heading font: United Sans ----------
   Only the Regular Bold cut is used. The single face is mapped to the full
   100–900 range so every United Sans element renders this one weight/style
   (font size still varies per section) with no faux-bold synthesis. */
@font-face {
  font-family: 'United Sans';
  src: url('/fonts/UnitedSansRgBk.woff2') format('woff2'),
       url('/fonts/UnitedSansRgBk.woff') format('woff'),
       url('/fonts/UnitedSansReg-Bold.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:       #C8102E;
  --red-dark:  #9E0B23;
  --red-light: #E8203E;
  --dark:      #0E0E10;
  --dark-2:    #1C1C1F;
  --gray:      #6E6E73;
  --light:     #F5F5F7;
  --white:     #FFFFFF;
  --border:    #D1D1D6;
  --font-main: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'United Sans', 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-sub:  'Tomorrow', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --shadow:    0 4px 24px rgba(0,0,0,.12);
  --shadow-lg: 0 8px 48px rgba(0,0,0,.18);
  --radius:    8px;
  --radius-lg: 16px;
  --transition: .25s ease;
  --max-w:     1280px;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-main);
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--red); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--red-dark); }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  letter-spacing: .02em;
  line-height: 1.15;
}
h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.1rem; }
p  { color: var(--gray); line-height: 1.75; }

.text-white p, .text-white h1, .text-white h2, .text-white h3, .text-white h4 { color: var(--white); }
.text-white p { color: rgba(255,255,255,.82); }

/* ---------- Layout Utilities ---------- */
.container    { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section      { padding: 80px 0; }
.section-sm   { padding: 48px 0; }
.section-lg   { padding: 120px 0; }

.grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-items: center; }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-5  { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }

.flex       { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-16  { gap: 16px; }
.gap-24  { gap: 24px; }

.text-center { text-align: center; }
/* Subheadings (kicker labels, hero eyebrows, section subtitles) use Tomorrow */
.section-label, .hero-eyebrow, .section-subtitle { font-family: var(--font-sub); }
.section-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 12px;
}
.section-title { margin-bottom: 16px; }
.section-subtitle { max-width: 640px; margin: 0 auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 4px;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn-primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200,16,46,.35);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-outline:hover {
  background: var(--white);
  color: var(--dark);
}
.btn-outline-dark {
  background: transparent;
  color: var(--dark);
  border-color: var(--dark);
}
.btn-outline-dark:hover {
  background: var(--dark);
  color: var(--white);
}
.btn-lg { padding: 18px 40px; font-size: 1rem; }
.btn-sm { padding: 10px 20px; font-size: .82rem; }

/* ---------- Navigation ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: all var(--transition);
}
.site-header.scrolled {
  background: rgba(14,14,16,1);
  box-shadow: var(--shadow);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 110px;
}
.nav-logo img { height: 68px; width: auto; }
.nav-logo:hover { opacity: .85; }

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 8px;
}
.nav-menu a {
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 4px;
  letter-spacing: .04em;
  text-transform: none;
  white-space: nowrap;
  transition: all var(--transition);
}
.nav-menu a:hover,
.nav-menu a.active {
  color: var(--red);
  background: transparent;
}
/* Hover-only category toggle (no href) still shows a clickable cursor */
.nav-toggle { cursor: pointer; }

/* ===== Mega menu ===== */
/* Full-width panel spanning the nav bar. Opening is driven by JS hover-intent
   (see main.js) so brushing past another trigger does not switch menus. */
.nav-item { position: static; }
.nav-inner { position: relative; }
.nav-dropdown {
  position: absolute;
  top: 100%;             /* drop from the bottom of the nav bar */
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 40px;
  background: var(--dark-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.08);
  list-style: none;
  padding: 28px 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  pointer-events: none;
}
/* Opened by JS (.open class) — hover-intent prevents accidental switching */
.nav-item.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* Bridge the gap between the nav links and the panel across the FULL width, so
   moving down anywhere from a trigger into the panel keeps the menu open. It is
   part of the panel, so it only "exists" while the panel is open (closed panels
   are pointer-events:none), and it never opens a menu — opening is gated on the
   trigger link in JS. */
.nav-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -38px;
  height: 38px;
}
/* Each top-level child becomes a column */
.nav-dropdown > li {
  flex: 0 0 auto;
  min-width: 168px;
}
/* FA Solutions megamenu: 4 columns per row, then wrap to the next row */
.nav-menu > li:nth-of-type(2) .nav-dropdown > li {
  flex: 0 0 calc(25% - 30px);
  min-width: 0;
}
/* Thin red rule spanning the full width between megamenu rows */
.nav-menu > li:nth-of-type(2) .nav-dropdown > li.megamenu-rule {
  flex: 0 0 100%;
  min-width: 0;
  height: 0;
  margin: 6px 0;
  padding: 0;
  border-top: 1px solid var(--red);
}
/* Plain links + submenu item links */
.nav-dropdown li a {
  display: block;
  padding: 8px 12px;
  color: rgba(255,255,255,.82);
  font-size: .86rem;
  border-radius: 4px;
  text-transform: none;
  letter-spacing: .02em;
  white-space: nowrap;
}
.nav-dropdown li a:hover {
  color: var(--white);
  background: var(--red);
}
/* Category column heading */
.nav-dropdown .has-submenu { position: static; }
.nav-dropdown .has-submenu > a {
  color: var(--red);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 12px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.nav-dropdown .has-submenu > a:hover { background: transparent; color: var(--white); }
/* Plain top-level megamenu items (no submenu) match the red category headings */
.nav-dropdown > li:not(.has-submenu) > a {
  color: var(--red);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 12px 10px;
}
.nav-dropdown > li:not(.has-submenu) > a:hover { background: transparent; color: var(--white); }
/* Submenu shown statically as the column body (no flyout). It must INHERIT
   visibility/opacity/pointer-events from its panel — if forced visible/auto, a
   closed panel's submenu (invisible but still hittable, and stacked on top of
   the open panel when it's later in the DOM) silently intercepts the cursor and
   closes the open menu when you reach the items. */
.nav-submenu {
  position: static;
  display: block;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  transform: none;
}
.nav-dropdown .dropdown-divider {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  padding: 10px 16px 4px;
  pointer-events: none;
}

.nav-cta { margin-left: 16px; }
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: all var(--transition);
  border-radius: 2px;
}

/* ---------- Hero Banner ---------- */
.hero {
  min-height: 62vh;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--dark);
  overflow: hidden;
  margin-top: 110px;
  padding: 77px 0 77px;
}
.hero-video,
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-video--active,
.hero-img--active {
  opacity: 1;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(14,14,16,.95) 0%, rgba(200,16,46,.15) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.hero-eyebrow {
  display: inline-block;
  background: none;
  color: var(--red);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 0;
  margin-bottom: 24px;
}
.hero h1 { color: var(--white); margin-bottom: 24px; font-weight: 800; }
.hero p   { color: rgba(255,255,255,.75); font-size: 1.15rem; margin-bottom: 40px; max-width: 580px; }
.hero p.hero-subhead { font-size: 1.7rem; font-weight: 600; color: var(--white); margin-bottom: 18px; }
.hero-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.hero-content { flex: 1; max-width: 620px; }
.hero-shield {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.hero-shield img {
  width: 320px;
  height: auto;
}
@keyframes shield-float {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  25%  { transform: translate(14px, -22px) rotate(2deg); }
  50%  { transform: translate(0px, -36px) rotate(0deg); }
  75%  { transform: translate(-14px, -22px) rotate(-2deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Page hero (sub-pages) */
.page-hero {
  margin-top: 110px;
  padding: 56px 0 80px;
  background: var(--dark);
  position: relative;
  overflow: hidden;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .3;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(14,14,16,.95) 40%, transparent);
}
/* Contact hero: lighter overlay so the Court Armor Roll texture reads */
.page-hero.contact-hero::after {
  background: linear-gradient(to right, rgba(14,14,16,.8) 0%, rgba(14,14,16,.35) 55%, rgba(14,14,16,.15) 100%);
}
.page-hero-content {
  position: relative;
  z-index: 2;
}
.page-hero h1 { color: var(--white); }
.page-hero p  { color: rgba(255,255,255,.7); margin-top: 16px; max-width: 560px; font-size: 1.1rem; }
.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
  font-size: .82rem;
}
.breadcrumb a { color: rgba(255,255,255,.6); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span { color: rgba(255,255,255,.3); }

/* ---------- Solution Blocks — 3D Box ---------- */
.solution-blocks {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  flex-wrap: wrap;
  padding: 48px 48px 72px;
  background: radial-gradient(ellipse at 50% 40%, #0E0E10 0%, #050505 100%);
}

/* ── Outer wrapper: hover trigger + ground shadow ──
   Must NOT have filter/opacity/overflow on itself
   or it will flatten the 3D children. */
.badge-wrap {
  position: relative;
  cursor: pointer;
}
/* Ground shadow ellipse */
.badge-wrap::before {
  content: '';
  position: absolute;
  bottom: -28px;
  left: -6%;
  width: 112%;
  height: 40px;
  background: rgba(0,0,0,.75);
  border-radius: 50%;
  filter: blur(20px);
  transition: transform .5s ease, opacity .5s ease;
  z-index: -1;
}
.badge-wrap:hover::before {
  transform: scaleX(1.1) translateY(14px);
  opacity: .5;
}

/* ── 3D box container ── */
.badge-frame {
  position: relative;
  width: 560px;
  height: 560px;
  clip-path: none;
  background: none;
  padding: 0;
  transform: none;
  box-shadow: var(--shadow-lg);
  transition: transform .35s ease, box-shadow .35s ease;
  cursor: pointer;
}
.badge-wrap:hover .badge-frame {
  transform: translateY(-10px);
}
/* Flat square cards — drop the 3D box faces and ground shadow */
.badge-wrap::before,
.badge-frame::before,
.badge-frame::after { display: none; }

/* Right face */
.badge-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 58px;
  height: 100%;
  background: linear-gradient(to bottom,
    #2e2e2e 0%,
    #1e1e1e 55%,
    #141414 100%
  );
  transform: rotateY(90deg);
  transform-origin: left center;
  border-left: 1px solid rgba(255,255,255,.06);
}

/* Top face */
.badge-frame::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 58px;
  background: linear-gradient(to right,
    #464646 0%,
    #363636 55%,
    #282828 100%
  );
  transform: rotateX(-90deg);
  transform-origin: bottom center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ── Front face — photo + text ── */
.solution-block {
  position: absolute;
  inset: 0;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(255,255,255,.12);
  border-left: 5px solid var(--red);   /* red accent bar on the left */
}
.solution-block img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .88;
  transition: opacity .5s ease, transform .7s ease;
}
.badge-wrap:hover .solution-block img {
  opacity: 1;
  transform: scale(1.04);
}

/* Dark gradient overlay for text legibility */
.solution-block-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.48) 38%,
    rgba(0,0,0,.0)  65%
  );
}

.solution-block::before { display: none; }
.solution-block::after { display: none; }

/* ── Text ── */
.solution-block-content {
  position: relative;
  z-index: 5;
  padding: 0 36px 36px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.badge-star { display: none; }
.badge-org {
  display: block;
  font-family: var(--font-head);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.solution-block h2 {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 1.05;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.solution-block p {
  color: rgba(255,255,255,.72);
  font-size: .92rem;
  line-height: 1.55;
  margin-bottom: 22px;
}
.solution-block .solution-block-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  margin-top: -14px;
  max-width: 460px;
}
.solution-block .section-label { display: none; }
.solution-block .arrow-link {
  display: inline-block;
  color: #fff;
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.45);
  padding: 10px 24px;
  border-radius: 2px;
  transition: background .25s, border-color .25s;
}
.badge-wrap:hover .solution-block .arrow-link {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.8);
}
.solution-block .arrow-link::after { content: ' →'; }

/* ---------- Solution Intro (image cards, from staging) ---------- */
.solution-intro {
  background: #FFFFFF;
  padding: 22px 25px;
}

/* ---------- Solution rows (Athletics / Solutions with galleries) ---------- */
.solution-row {
  position: relative;
  max-width: 1400px;
  margin: 0 auto 25px;
  border-radius: 25px;
  overflow: hidden;
  background-color: #000;
  background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url("../images/dark-texture.png");
  background-repeat: repeat;
  box-shadow: 3px 6px 11px 0 rgba(231,28,44,.63);
  padding: 25px;
}
.solution-row:last-child { margin-bottom: 0; }
.solution-row-inner {
  border: 1px solid #909293;
  border-radius: 25px;
  padding: 44px;
  display: flex;
  align-items: center;
  gap: 44px;
}
.solution-row--reverse .solution-row-inner { flex-direction: row-reverse; }
.solution-copy { flex: 1 1 0; min-width: 0; }
.solution-copy h2 {
  font-family: "Tomorrow", sans-serif;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.05;
  color: #BA0C2F;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.solution-copy-tag {
  font-family: "Tomorrow", sans-serif;
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: #fff;
  margin: 0 0 16px;
}
.solution-copy-desc {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  margin: 0 0 24px;
}
.solution-copy .arrow-link {
  display: inline-block;
  color: #fff;
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.45);
  padding: 10px 24px;
  border-radius: 2px;
  text-decoration: none;
  transition: background .25s, border-color .25s;
}
.solution-copy .arrow-link:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.85); }
.solution-copy .arrow-link::after { content: ' →'; }
.solution-gallery {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.solution-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  cursor: pointer;
  transition: transform .25s ease, filter .25s ease;
}
.solution-gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 6.5; }
.solution-gallery img:hover { transform: scale(1.02); filter: brightness(1.08); }
/* One-at-a-time fade slideshow variant (FA Athletics) */
.solution-slideshow {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
}
.solution-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  opacity: 0;
  transition: opacity .8s ease;
}
.solution-slideshow img.is-active { opacity: 1; }
@media (max-width: 900px) {
  .solution-row-inner,
  .solution-row--reverse .solution-row-inner { flex-direction: column; gap: 28px; padding: 24px; }
  .solution-copy h2 { font-size: 34px; }
}
.solution-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  max-width: 1800px;
  margin: 0 auto;
}
.solution-card {
  position: relative;
  display: block;
  text-decoration: none;
  padding: 25px;
  border-radius: 25px;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center center;
  box-shadow: 3px 6px 11px 0 rgba(231,28,44,.63);
  transition: transform .3s ease, box-shadow .3s ease;
}
.solution-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 0;
  transition: background .4s ease;
}
.solution-intro-grid .solution-card:hover { transform: translateY(-7px) scale(1.04); box-shadow: 5px 13px 24px 0 rgba(231,28,44,.78); }
.solution-card:hover::before { background: rgba(0,0,0,.4); }
.solution-card:hover .solution-card-inner { border-color: #fff; }
.solution-card:hover h2 { color: #fff; }
.solution-card--athletics { background-image: url("../images/solution-athletics.webp"); }
.solution-card--solutions { background-image: url("../images/solution-solutions.webp"); background-position: center right; }
.solution-card-inner {
  position: relative;
  z-index: 1;
  border: 1px solid #909293;
  border-radius: 25px;
  padding: 50px;
  transition: border-color .4s ease;
}
.solution-card h2 {
  font-family: "Tomorrow", sans-serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.05;
  color: #BA0C2F;
  text-transform: uppercase;
  margin: 0 0 14px;
  transition: color .4s ease;
}
.solution-card-tag {
  font-family: "Tomorrow", sans-serif;
  font-size: 24px;
  font-weight: 400;
  font-style: italic;
  color: #fff;
  margin: 0 0 18px;
}
.solution-card-desc {
  font-family: "Inter", sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
  margin: 0;
}
@media (max-width: 900px) {
  .solution-intro-grid { grid-template-columns: 1fr; }
  .solution-card-inner { padding: 28px; }
  .solution-card h2 { font-size: 39px; }
  .solution-card-tag,
  .solution-card-desc { font-size: 17px; }
}

/* ---------- Built to Perform (from staging) ---------- */
.perform-section {
  background: #FFFFFF;
  padding: 22px 50px;
}
.perform-inner {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}
.perform-title {
  font-family: "Tomorrow", sans-serif;
  font-size: 43px;
  font-weight: 600;
  text-transform: uppercase;
  color: #BA0C2F;
  line-height: 1.15;
  margin: 0 0 18px;
}
.perform-subtitle {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 1.8px;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  max-width: 70%;
  margin: 0 auto 44px;
}
.perform-subtitle.perform-subtitle--on-light { color: #4a4a4a; }

.testimonials-subtitle {
  font-family: "Tomorrow", sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--white);
  text-align: center;
  margin: 0 0 40px;
}

/* Full-width red backdrop aligned to the inner card box (top/bottom of the inner line) */
.testimonials-section { position: relative; }
.testimonials-section::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 47px;     /* 22px section padding + 25px card padding = inner box top */
  bottom: 47px;  /* same inset to the inner box bottom */
  background: var(--red);
  z-index: 0;
}
.testimonials-section .perform-inner { position: relative; z-index: 1; }
/* Tighten the empty space above the testimonial content inside the card */
.testimonials-section .perform-card-inner { padding-top: 24px; }

/* Built to Perform — staging-exact (black section, centered text, 3-image row) */
.btp {
  background-color: #000;
  background-image: linear-gradient(rgba(0,0,0,.79), rgba(0,0,0,.79)), url("../images/perform-bg.webp");
  background-size: cover;
  background-position: center;
  padding: 75px 50px;
  border-bottom: 12px solid var(--red);
}
.btp-inner { max-width: 1400px; margin: 0 auto; text-align: center; }
.btp-title {
  font-family: "Tomorrow", sans-serif;
  font-size: 43px;
  font-weight: 600;
  text-transform: uppercase;
  color: #BA0C2F;
  line-height: 1.15;
  margin: 0 0 18px;
}
.btp-subtitle {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 1.8px;
  color: #fff;
  line-height: 1.6;
  max-width: 70%;
  margin: 0 auto 44px;
}
.btp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  align-items: center;
}
.btp-grid img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .btp { padding: 50px 20px; }
  .btp-title { font-size: 34px; }
  .btp-subtitle { font-size: 16px; max-width: 100%; letter-spacing: 1px; }
  .btp-grid { grid-template-columns: 1fr; gap: 18px; }
}

.perform-card {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  background-color: #000;
  background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url("../images/dark-texture.png");
  background-repeat: repeat;
  box-shadow: 3px 6px 11px 0 rgba(231,28,44,.63);
  padding: 25px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.perform-card:hover {
  transform: translateY(-5px);
  box-shadow: 4px 9px 16px 0 rgba(231,28,44,.7);
}
.perform-card-inner {
  border: 1px solid #909293;
  border-radius: 25px;
  padding: 56px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.perform-badges {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 36px;
  flex-wrap: wrap;
  width: 100%;
}
.perform-badges img {
  flex: 0 1 240px;
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .perform-section { padding: 50px 20px; }
  .perform-title { font-size: 34px; }
  .perform-subtitle { font-size: 16px; max-width: 100%; letter-spacing: 1px; }
  .perform-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Let's Protect (from staging) ---------- */
.protect-cta {
  position: relative;
  background-color: #BA0C2F;
  padding: 22px 50px;
}
/* Translucent background image — the red shows through, so it reads less bright */
.protect-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("../images/protect-bg.webp") center / cover no-repeat;
  opacity: .15;
  pointer-events: none;
}
.protect-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
}
.protect-cta-carousel { position: relative; flex: 0 0 40%; max-width: 40%; }
.pc-viewport { overflow: hidden; border-radius: 10px; }
.pc-track { display: flex; transition: transform .5s ease; }
.pc-track img { min-width: 100%; width: 100%; height: auto; display: block; }
.pc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.4); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.pc-arrow:hover { background: rgba(0,0,0,.7); }
.pc-prev { left: 10px; }
.pc-next { right: 10px; }
.protect-cta-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.protect-cta-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 38px;
  font-weight: 500;
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.1;
}
.protect-cta-title {
  font-family: "Tomorrow", sans-serif;
  font-size: 53px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 30px;
}
.protect-cta-btn {
  font-family: "Tomorrow", sans-serif;
  font-size: 23px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  background: transparent;
  border-left: 2px solid #fff;
  padding: 8px 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .25s, transform .25s;
}
.protect-cta-btn:hover { background: #E4002B; transform: translateY(-3px); }
@media (max-width: 900px) {
  .protect-cta { padding: 40px 20px; }
  .protect-cta-inner { flex-direction: column; gap: 32px; }
  .protect-cta-carousel { flex: none; max-width: 100%; width: 100%; }
  .protect-cta-text { align-items: center; text-align: center; }
  .protect-cta-eyebrow { font-size: 22px; }
  .protect-cta-title { font-size: 30px; }
  .protect-cta-btn { font-size: 17px; }
}

/* ---------- Product Cards ---------- */
.product-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  transition: all var(--transition);
  border: 1px solid var(--border);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--red);
}
.product-card-img {
  height: 220px;
  overflow: hidden;
  background: var(--light);
}
.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.product-card:hover .product-card-img img { transform: scale(1.06); }
.product-card-body { padding: 24px; }
.product-card-body h3 { margin-bottom: 8px; font-size: 1.05rem; }
.product-card-body p  { font-size: .88rem; margin-bottom: 16px; }

/* "You May Also Like" related cards: bold title + CTA on one tight row */
.related-card .product-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
}
.related-card .product-card-body h3 { margin: 0; font-weight: 800; font-size: 1rem; }
.related-card .product-card-body .btn { flex-shrink: 0; white-space: nowrap; }
.product-card-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.tag-athletics { background: rgba(200,16,46,.1); color: var(--red); }
.tag-solutions { background: rgba(14,14,16,.1); color: var(--dark-2); }

/* ---------- Feature Icons ---------- */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.feature-item { text-align: center; }
.feature-icon {
  width: 72px;
  height: 72px;
  background: rgba(200,16,46,.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: all var(--transition);
}
.feature-icon:hover { background: var(--red); }
.feature-icon svg, .feature-icon img { width: 32px; height: 32px; }
.feature-item h4 { margin-bottom: 8px; }

/* ---------- Specs Table ---------- */
.specs-table {
  width: calc(100% - 16px);
  margin-left: 16px;
  border-collapse: collapse;
  font-size: .8rem;
}
.specs-table th, .specs-table td {
  padding: 3px 12px;
  text-align: left;
}
.specs-table th {
  background: var(--light);
  font-weight: 700;
  font-family: var(--font-head);
  letter-spacing: .04em;
  font-size: .82rem;
  text-transform: uppercase;
  color: var(--dark);
}
.specs-table tr:last-child td { border-bottom: none; }
.specs-table tr:hover td { background: rgba(200,16,46,.03); }
/* Home-plate marker before each specification name */
.specs-table tbody td:first-child::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 13px;
  margin-right: 8px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%);
  vertical-align: middle;
}

/* ---------- Image Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gallery-thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
  aspect-ratio: 4/3;
  background: var(--light);
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show the whole product image — don't crop transparent PNGs */
  padding: 10px;
  transition: transform .5s ease;
}
.gallery-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200,16,46,.0);
  transition: background var(--transition);
}
.gallery-thumb:hover::after { background: rgba(200,16,46,.15); }
.gallery-main { grid-column: span 2; grid-row: span 2; aspect-ratio: unset; min-height: 280px; }

/* Product gallery as a peek slideshow (JS adds .gallery-carousel + .gallery-stage) */
.gallery-stage { position: relative; max-width: 600px; margin: 0 auto; }
.gallery-grid.gallery-carousel {
  display: flex;
  grid-template-columns: none;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 14%;          /* centers the active slide; neighbors peek at the edges */
  scroll-padding: 0 14%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gallery-grid.gallery-carousel::-webkit-scrollbar { display: none; }
.gallery-grid.gallery-carousel > .gallery-thumb {
  flex: 0 0 100%;   /* 100% of the padded content box ≈ 72% of the track; padding makes neighbors peek */
  scroll-snap-align: center;
  aspect-ratio: 16 / 10;
  transform: scale(.84);   /* neighbors smaller… */
  opacity: .5;
  transition: transform .45s ease, opacity .45s ease;
}
.gallery-grid.gallery-carousel > .gallery-thumb.is-active {
  transform: scale(1);     /* …center image larger */
  opacity: 1;
  box-shadow: var(--shadow-lg);
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(14,14,16,.6);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.gallery-arrow:hover { background: var(--red); }
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }

/* ---------- Lightbox ---------- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.4);      /* page underneath stays visible, just muted */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  perspective: 1600px;            /* 3D depth for the flip-open */
}
.lightbox.active { display: flex; }
.lightbox img {
  max-width: 60vw;                /* open to cover ~60% of the page */
  max-height: 60vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0,0,0,.5);  /* modal lift above the muted page */
}
.lightbox-figure { position: relative; display: inline-block; line-height: 0; }
.lightbox.active .lightbox-figure { animation: lightbox-flip .55s cubic-bezier(.2,.75,.3,1) both; }
@keyframes lightbox-flip {
  from { transform: rotateY(-90deg) scale(.9); opacity: 0; }
  to   { transform: rotateY(0deg) scale(1);    opacity: 1; }
}
.lightbox-close {
  position: absolute;
  top: 10px; right: 10px;     /* top-right corner of the image */
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.lightbox-close:hover { background: var(--red); }

/* Product sale-sheet PDF modal */
.pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pdf-modal.open { display: flex; }
.pdf-modal-inner {
  background: var(--white);
  width: min(980px, 96vw);
  height: min(92vh, 1150px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.pdf-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--dark);
  color: var(--white);
  flex-shrink: 0;
}
.pdf-modal-title { font-family: var(--font-head); letter-spacing: .04em; font-size: 1.05rem; }
.pdf-modal-actions { display: flex; align-items: center; gap: 10px; }
.pdf-modal-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.pdf-modal-frame { flex: 1; width: 100%; border: none; background: #525659; }

/* Video selection modal */
.video-link { cursor: pointer; }
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.video-modal.open { display: flex; }
.video-modal-inner { position: relative; width: min(900px, 92vw); }
.video-modal-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 85vh;
}
.video-modal-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius-lg);
  background: #000;
  display: block;
}
video.video-modal-player { object-fit: contain; }
.video-modal-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-modal-close:hover { background: var(--red); }

/* Subtle "Design · Deploy · Defend" product texture on solid red/dark blocks */
.cta-banner,
.cta-dark,
.split-content.bg-red,
.split-content.bg-dark,
.testimonials,
.solution-blocks { position: relative; overflow: hidden; }
.cta-banner::before,
.cta-dark::before,
.split-content.bg-red::before,
.split-content.bg-dark::before,
.testimonials::before,
.solution-blocks::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/dpd-texture.svg') repeat;
  background-size: 920px 240px;
  pointer-events: none;
  z-index: 0;
}
/* keep content above the texture */
.cta-banner > *,
.cta-dark > *,
.split-content.bg-red > *,
.split-content.bg-dark > *,
.testimonials > *,
.solution-blocks > * { position: relative; z-index: 1; }

/* ---------- CTA Banner ---------- */
.cta-banner {
  background: var(--red) url('/images/dpd-bg-red.jpg') center / cover no-repeat;
  padding: 80px 0;
  text-align: center;
}
/* The image already carries the Design·Deploy·Defend design — drop the texture overlay */
.cta-banner::before { display: none; }
.cta-banner .section-label { color: rgba(255,255,255,.8); margin-bottom: 10px; }
.cta-banner h2 { color: var(--white); margin-bottom: 16px; }
.cta-banner p  { color: rgba(255,255,255,.85); margin-bottom: 36px; font-size: 1.1rem; }
.cta-banner .btn-outline { border-color: var(--white); }
.cta-banner .btn-outline:hover { background: var(--white); color: var(--red); }

/* ---------- Dark CTA ---------- */
.cta-dark {
  background: var(--dark) url('/images/dark-texture.png');
  padding: 80px 0;
  text-align: center;
}
/* Dark blocks now use the mat texture image — drop the old DPD overlay */
.cta-dark::before,
.split-content.bg-dark::before,
.testimonials::before { display: none; }
.cta-dark h2 { color: var(--white); margin-bottom: 16px; }
.cta-dark p  { color: rgba(255,255,255,.7); margin-bottom: 36px; font-size: 1.05rem; }

/* ---------- Two-tone Split ---------- */
.split-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.split-img { overflow: hidden; }
.split-img img { width: 100%; height: 100%; object-fit: cover; }
.split-content { padding: 80px 64px; display: flex; flex-direction: column; justify-content: center; }
.split-content.bg-dark { background: var(--dark) url('/images/dark-texture.png'); }
.split-content.bg-red  { background: var(--red); }
.split-content.bg-light { background: var(--light); }

/* ---------- Stats Bar ---------- */
.stats-bar { background: var(--dark); padding: 56px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-number {
  font-family: var(--font-head);
  font-size: 3rem;
  color: var(--red);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label { font-size: .82rem; color: rgba(255,255,255,.6); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- World Map Section ---------- */
.world-map-section { background: var(--dark); padding: 80px 0; }
.world-map-section h2 { color: var(--white); text-align: center; margin-bottom: 16px; }
.world-map-section > .container > p { text-align: center; color: rgba(255,255,255,.65); margin-bottom: 48px; }
.map-container {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 480px;
}
.map-container .leaflet-container { background: #fff; }
.map-svg-wrap { position: relative; }
.map-svg-wrap svg { width: 100%; height: auto; display: block; }
.map-beacon {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid rgba(255,255,255,.5);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all var(--transition);
}
.map-beacon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--red);
  opacity: .35;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: .35; }
  50% { transform: scale(1.8); opacity: 0; }
}

/* ---------- Sustainability ---------- */
.sustainability-section { background: var(--light); padding: 40px 0 80px; }
.sustain-card {
  background: var(--white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 40px;
  text-align: center;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  border-left: 5px solid var(--red);
}
.sustain-icon {
  font-size: 2.5rem;
  margin-bottom: 20px;
}
.sustain-card h3 { margin-bottom: 12px; }

/* ---------- Testimonials ---------- */
.testimonials {
  background: var(--dark) url('/images/dark-texture.png');
  padding: 80px 0;
}
.testimonials .section-label { color: rgba(200,16,46,.85); }
.testimonials h2 { color: var(--white); text-align: center; margin-bottom: 48px; }
.testimonial-carousel { position: relative; overflow: hidden; width: 100%; }
.testimonial-track { display: flex; transition: transform .5s ease; }
.testimonial-slide { min-width: 100%; padding: 0 16px; display: flex; justify-content: center; }
/* minimal, centered block — no card box */
.testimonial-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
/* pull-quote serves as the section headline in place of "Protected by Facility Armor"
   — same red uppercase treatment as the old title, a little smaller. */
.testimonial-pullquote {
  font-family: "Tomorrow", sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 600;
  text-transform: uppercase;
  color: #BA0C2F;
  line-height: 1.2;
  margin: 0 0 24px;
  text-align: center;
}
/* thin red vertical line beside the quote */
.testimonial-card blockquote {
  font-size: 1.3rem;
  color: rgba(255,255,255,.9);
  line-height: 1.75;
  margin: 0 0 28px;
  font-style: italic;
  border-left: 2px solid var(--red);
  padding-left: 32px;
}
.testimonial-author { font-weight: 700; color: var(--white); padding-left: 34px; }
.testimonial-role   { font-size: .85rem; color: rgba(255,255,255,.5); padding-left: 34px; }
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--white);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.carousel-btn:hover { background: var(--red); border-color: var(--red); }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  transition: all var(--transition);
  border: none;
}
.carousel-dot.active { background: var(--red); width: 24px; border-radius: 4px; }

/* ---------- Logo Gallery / Marquee ---------- */
.logo-gallery { padding: 22px 0; background: var(--light); border-top: 1px solid var(--border); border-bottom: 2px solid var(--red); }
.logo-gallery h2 { text-align: center; margin-bottom: 8px; }
.logo-gallery > .container > p { text-align: center; margin-bottom: 40px; color: var(--gray); }
.marquee-wrapper {
  position: relative;
  overflow: hidden;
}
.marquee-wrapper::before,
.marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee-wrapper::before { left: 0; background: linear-gradient(to right, var(--light), transparent); }
.marquee-wrapper::after  { right: 0; background: linear-gradient(to left,  var(--light), transparent); }
/* Protected by Facility Armor — client logo carousel (from staging) */
.logos-section { background: #F3F3F3; padding: 60px 0; }
.logos-title { text-align: center; margin-bottom: 14px; color: var(--dark); }
.logos-divider { width: 80px; height: 2px; background: var(--red); margin: 0 auto 40px; }
.logos-section .marquee-wrapper::before { background: linear-gradient(to right, #F3F3F3, transparent); }
.logos-section .marquee-wrapper::after  { background: linear-gradient(to left,  #F3F3F3, transparent); }
/* Trusted By marquee inside the dark card */
.perform-card .marquee-wrapper { width: 100%; }
.perform-card .marquee-wrapper::before { background: linear-gradient(to right, #111, transparent); }
.perform-card .marquee-wrapper::after  { background: linear-gradient(to left,  #111, transparent); }
.perform-card .marquee-item img {
  background: #fff;
  padding: 14px 18px;
  border-radius: 10px;
  box-sizing: border-box;
  transition: transform .25s ease;
}
.perform-card .marquee-item img:hover { transform: scale(1.06); }
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 80s linear infinite;
}
.marquee-item {
  flex-shrink: 0;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marquee-item img {
  height: 100px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  border-radius: var(--radius);
  transition: transform .25s ease;
}
.marquee-item img:hover { transform: scale(1.06); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Contact Form ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; }
.contact-info h3 { margin-bottom: 24px; }
.contact-detail {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  align-items: flex-start;
}
.contact-detail-icon {
  width: 44px;
  height: 44px;
  background: none;
  border: 1.5px solid var(--dark);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--dark);
}
.contact-detail-icon svg { width: 22px; height: 22px; }
.contact-detail-text strong { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dark); font-weight: 700; margin-bottom: 2px; }
.contact-detail-text a, .contact-detail-text span { color: var(--dark); font-size: .95rem; }

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-main);
  font-size: .95rem;
  color: var(--dark);
  background: var(--white);
  transition: border-color var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--red); }
.form-group textarea { min-height: 130px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Resources ---------- */
.resource-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  transition: all var(--transition);
}
.resource-card:hover {
  border-color: var(--red);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.resource-icon {
  width: 200px;
  height: 140px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--light);
}
.resource-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.resource-body h3 { margin-bottom: 8px; }
.resource-body p  { font-size: .88rem; margin-bottom: 16px; }

/* ---------- About Page ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.value-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.value-item {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 22px;
}
.value-item h3 { font-size: 1rem; letter-spacing: .02em; }
.value-item h4 { margin-bottom: 8px; }

/* Product Features + Technical Specifications: larger type, two wide columns
   set well apart so the text doesn't wrap. */
.features-specs {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  gap: 64px;
  justify-content: center;
}
.features-specs h3 { font-size: 1.4rem; }
.features-specs .features-list li { font-size: 1.05rem; }
.features-specs .specs-table { font-size: 1rem; }
.features-specs .specs-table th { font-size: 1rem; }
.features-specs .specs-table th, .features-specs .specs-table td { padding: 5px 12px; }

/* ---------- Protection Level (shield meter, from product sheet) ---------- */
.protection-level {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 18px;
  margin-bottom: 20px;
}
.protection-level .pl-label {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dark);
}
.protection-level .pl-shields { display: flex; gap: 3px; }
.protection-level .pl-shield {
  width: 16px;
  height: 16px;
  background: url('/images/Shield%20Icon%20Victory%20Red%404x.png') center / contain no-repeat;
}
.protection-level .pl-shield.off { filter: grayscale(1) brightness(1.7); opacity: .35; }
.protection-level .pl-count { font-size: .8rem; font-weight: 700; color: var(--red); }

/* Sub-product links inside overview cards */
.card-sublinks { list-style: none; margin: 0 0 16px; padding: 0; }
.card-sublinks li { margin-bottom: 4px; }
.card-sublinks a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--gray);
  text-decoration: none;
}
.card-sublinks a::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 8px;
  background: #9aa0a6;
  clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%);
}
.card-sublinks a:hover { color: var(--red); }

/* ---------- Product Detail Page ---------- */
.product-hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 110px 80px 0; }
/* Self-bounded landscape box: aspect-ratio gives it a definite height of its own
   (independent of the info column), so the image can never spill past it into the
   next section. align-self:center keeps it from being stretched taller by the row. */
.product-hero-img { overflow: hidden; position: relative; aspect-ratio: 16 / 10; max-height: 460px; align-self: center; }
.product-hero-img > img,
.product-hero-img > .hero-slideshow { position: absolute; inset: 0; }
.product-hero-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
/* Hero slideshow: stack all slides in one grid cell and cross-fade */
.hero-slideshow { position: absolute; inset: 0; overflow: hidden; }
/* Slides stacked & absolutely sized so height:100% resolves and object-fit works */
.hero-slideshow .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity 1.2s ease; }
/* Bloom in: each new image scales down, sharpens and un-brightens as it fades up */
.hero-slideshow .hero-slide.is-active { opacity: 1; animation: hero-bloom 1.4s ease forwards; }
@keyframes hero-bloom {
  0%   { opacity: 0; transform: scale(1.08); filter: brightness(1.45) blur(8px); }
  55%  { opacity: 1; filter: brightness(1.15) blur(1px); }
  100% { opacity: 1; transform: scale(1);    filter: brightness(1)    blur(0);  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slideshow .hero-slide.is-active { animation: none; }
}
.product-hero-info { padding: 28px 64px; display: flex; flex-direction: column; justify-content: flex-start; background: var(--white); }
.product-hero-info h1 { color: var(--dark); margin-bottom: 16px; font-size: clamp(1.7rem, 3.4vw, 2.7rem); font-weight: 800; }
.product-hero-subtitle { font-style: italic; color: rgba(0,0,0,.6); font-size: 1.15rem; margin: -4px 0 20px; }
.product-hero-info p  { color: rgba(0,0,0,.7); margin-bottom: 32px; }

.features-list { list-style: none; padding-left: 16px; }
.features-list li {
  padding: 3px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .85rem;
}
.features-list li::before {
  content: '';
  flex-shrink: 0;
  width: 12px;
  height: 13px;
  margin-top: 3px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%);
}
.features-list li:last-child { border-bottom: none; }

/* Recommended Accessory — full-bleed textured black band matching the home-page
   testimonials background. Breaks out of the centered .container to the viewport
   edges. Text is lightened so it reads on the dark texture. */
.recommended-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 64px 40px;
  background-color: #000;
  background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url("../images/dark-texture.png");
  background-repeat: repeat;
}
.recommended-section h2 { color: #fff; }
.recommended-section .features-list li { color: rgba(255,255,255,.85); }
.recommended-section .recommended-desc { color: rgba(255,255,255,.7); }
.recommended-section .recommended-menu-item {
  font-family: "Tomorrow", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
}

/* FA Athletics products + downloadable documents table */
.fa-doc-table-wrap { overflow-x: auto; }
.fa-doc-table { width: 100%; border-collapse: collapse; }
.fa-doc-table th, .fa-doc-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); }
.fa-doc-table thead th {
  background: var(--dark);
  color: #fff;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .85rem;
}
.fa-doc-table tbody tr:hover td { background: rgba(200,16,46,.04); }
.fa-doc-name { color: var(--dark); font-weight: 700; text-decoration: none; }
.fa-doc-name:hover { color: var(--red); }
.fa-doc-link { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-weight: 600; text-decoration: none; }
.fa-doc-link::before { content: '⬇'; font-size: .9em; }
.fa-doc-link:hover { text-decoration: underline; }
.fa-doc-none { color: rgba(0,0,0,.35); }

/* ---------- Footer ---------- */
.site-footer {
  background: #000;
  padding: 64px 0 32px;
  color: rgba(255,255,255,.65);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand img { height: 40px; margin-bottom: 20px; }
.footer-brand p { font-size: .88rem; line-height: 1.7; margin-bottom: 24px; }
.footer-social { display: flex; gap: 12px; }
.social-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.social-icon svg { width: 19px; height: 19px; }
.social-icon[aria-label="LinkedIn"]  { color: #0A66C2; }
.social-icon[aria-label="Facebook"]  { color: #1877F2; }
.social-icon[aria-label="Instagram"] { color: #E1306C; }
.social-icon[aria-label="YouTube"]   { color: #FF0000; }
.social-icon:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.35); }

.footer-col h5 {
  color: var(--white);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
  color: rgba(255,255,255,.55);
  font-size: .88rem;
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-top: 32px;
  font-size: .82rem;
  color: rgba(255,255,255,.35);
}
.footer-bottom a { color: rgba(255,255,255,.45); }
.footer-bottom a:hover { color: var(--white); }

/* Footer quick message (top of brand column) */
.footer-msg-title { color: var(--white); font-size: 1rem; margin-bottom: 12px; }
.footer-msg { display: flex; flex-direction: column; gap: 8px; max-width: 400px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 2px solid var(--red); }
.footer-msg input,
.footer-msg textarea {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  padding: 9px 12px;
  color: var(--white);
  font-size: .85rem;
  font-family: inherit;
}
.footer-msg textarea { resize: vertical; }
.footer-msg input::placeholder,
.footer-msg textarea::placeholder { color: rgba(255,255,255,.4); }
.footer-msg input:focus,
.footer-msg textarea:focus { outline: none; border-color: var(--red); }
.footer-msg button { align-self: flex-start; }

/* ---------- Utility Classes ---------- */
.bg-light { background: var(--light); }
.bg-dark  { background: var(--dark); }
.bg-red   { background: var(--red); }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.fw-bold { font-weight: 700; }
.text-red { color: var(--red); }
.text-gray { color: var(--gray); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; background: var(--light); padding: 4px; border-radius: var(--radius); margin-bottom: 40px; }
.tab-btn {
  flex: 1;
  padding: 10px 20px;
  border: none;
  background: none;
  font-family: var(--font-head);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 6px;
  color: var(--gray);
  transition: all var(--transition);
}
.tab-btn.active {
  background: var(--white);
  color: var(--dark);
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Sticky Sidebar ---------- */
.product-layout { display: block; }
/* Feature badges — full-bleed horizontal band, keeps the dark textured background (no box) */
.product-badges {
  margin: 0;
  padding: 26px 40px;
  background-color: #000;
  background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url("../images/dark-texture.png");
  background-repeat: repeat;
}
.product-badges-inner {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 56px;
}
.product-badges-inner img { max-width: 120px; height: auto; display: block; }
.product-sidebar { position: sticky; top: 96px; }
.sidebar-card {
  background: var(--light);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--border);
}
.sidebar-card h4 { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--red); }
.sidebar-card .btn { width: 100%; justify-content: center; margin-bottom: 12px; }
.sidebar-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* ---------- Animations ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-in {
  opacity: 0;
  transition: opacity .8s ease;
}
.fade-in.visible { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .product-layout { grid-template-columns: 1fr; }
  .product-sidebar { position: static; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .section-lg { padding: 72px 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .solution-blocks { padding: 60px 20px; gap: 48px; }
  .badge-frame { width: 300px; height: 370px; transform: rotateY(-14deg) rotateX(4deg); }
  .badge-frame::before { width: 40px; }
  .badge-frame::after  { height: 40px; }
  .solution-blocks { gap: 80px; padding-bottom: 120px; }
  .split-section { grid-template-columns: 1fr; }
  .split-content { padding: 48px 32px; }
  .product-hero-split { grid-template-columns: 1fr; min-height: 0; }
  .product-hero-img { height: 300px; }
  .product-hero-info { padding: 48px 32px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .form-row { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-main { grid-column: span 2; }
  .features-grid { grid-template-columns: 1fr; }
  .value-list { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }

  .hamburger { display: flex; }
  .nav-menu {
    display: none;
    position: fixed;
    top: 72px; left: 0; right: 0; bottom: 0;
    background: var(--dark);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    overflow-y: auto;
    gap: 0;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: 14px 16px; width: 100%; font-size: .95rem; }
  .nav-dropdown { position: static; display: block; width: auto; max-width: none; padding: 8px; opacity: 1; visibility: visible; transform: none; box-shadow: none; margin-top: 4px; margin-left: 16px; background: rgba(255,255,255,.05); }
  .nav-dropdown .has-submenu > a { border-bottom: none; }
  .nav-dropdown::before { display: none; }
  .nav-submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; pointer-events: auto; margin-left: 16px; border: none; background: rgba(255,255,255,.04); }
  .nav-cta { margin: 16px 0 0; }
  .nav-cta .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .hero { min-height: 0; padding: 180px 0 48px; }
  .hero-split { flex-direction: column; text-align: center; }
  .hero-shield img { width: 200px; }
  .hero-actions { flex-direction: column; justify-content: center; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
}

/* Cleaning & Maintenance heading — red bar matches a grid-2 (Key Features) column width */
.fa-clean-title { color: var(--red); border-bottom: 3px solid var(--red); padding-bottom: 2px; margin-bottom: 12px; width: calc(50% - 20px); }
@media (max-width: 768px) { .fa-clean-title { width: 100%; } }