/* ============================================
   Lighthouse Video Surveillance
   Charcoal, safety yellow, white
   ============================================ */

/* Roboto, served from this site. One file holds every weight; the browser
   fetches a file only when the page uses a character in its range. */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/roboto-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/roboto-symbols.woff2') format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Stands in until Roboto arrives. Sized to Roboto's measurements so the text
   does not move when the swap happens. Bold gets its own face: stretched
   regular Arial is wide enough to wrap the capital-letter buttons. */
@font-face {
  font-family: 'Roboto Fallback';
  src: local('Arial');
  ascent-override: 92.67%;
  descent-override: 24.39%;
  line-gap-override: 0%;
  size-adjust: 99.4%;
}

@font-face {
  font-family: 'Roboto Fallback';
  font-weight: 600 900;
  src: local('Arial Bold'), local('Arial-BoldMT');
  ascent-override: 92.67%;
  descent-override: 24.39%;
  line-gap-override: 0%;
  size-adjust: 94%;
}

/* Buttons are bold capitals, which run wider still in Arial. With the face
   above, the two hero buttons miss sharing a row on a 412px phone and then
   jump onto one when Roboto arrives. */
@font-face {
  font-family: 'Roboto Fallback Caps';
  font-weight: 600 900;
  src: local('Arial Bold'), local('Arial-BoldMT');
  ascent-override: 92.67%;
  descent-override: 24.39%;
  line-gap-override: 0%;
  size-adjust: 91%;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --yellow: #FAC03D;
  --yellow-bright: #FFDB12;
  --yellow-hover: #E5AD28;
  --gold: #FAC03D;
  --dark: #1C1C1C;
  --charcoal: #272727;
  --topbar: var(--gray-100);
  --heading: #1C1C1C;
  --text: #4B4F58;
  --muted: #6B7280;
  --white: #FFFFFF;
  --light: #F4F5F7;
  --gray-100: #EEF0F3;
  --gray-200: #D6DAE0;
  --gray-500: #6B7280;
  --gray-700: #4B4F58;
  --navy: #1B3A5C;
  --navy-dark: #1C1C1C;
  --navy-light: #2A5580;
  --avigilon-blue: #005EB8;
  --avigilon-blue-dark: #004281;
  --avigilon-blue-light: #00A3E0;
  --navy-band: linear-gradient(135deg, #0F2440 0%, var(--navy) 100%);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 10px 36px rgba(0,0,0,0.16);
  --radius: 8px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --pill: 50px;
  --header-h: 140px;
  --catalog-sticky-gap: 12px;
  --transition: 0.25s ease;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}

body {
  font-family: 'Roboto', 'Roboto Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  line-height: 1.7;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--gray-200);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--navy);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

#site-header,
.site-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

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

a {
  color: var(--heading);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--yellow-hover);
}

a.product-card,
a.icon-card {
  color: inherit;
}

a.product-card:hover,
a.icon-card:hover {
  color: inherit;
}

.learn-more {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--heading);
}

a.product-card:hover .learn-more,
a.icon-card:hover .learn-more,
a.platform-choice-card:hover .learn-more,
a.feature-card:hover .learn-more,
.learn-more:hover {
  color: var(--yellow-hover);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
  font-weight: 700;
  line-height: 1.2;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 80px 0;
}

.section-light {
  background: var(--light);
}

.section-dark {
  background: var(--navy-band);
  color: var(--white);
}

.section-dark h2,
.section-dark h3 {
  color: var(--white);
}

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

/* --- Typography --- */
.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 12px;
}

.section-title {
  font-size: 2.6rem;
  margin-bottom: 16px;
}

.section-title-light {
  color: var(--white);
  font-size: 2.6rem;
  margin-bottom: 28px;
  text-align: center;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 680px;
  line-height: 1.8;
}

.text-center .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.title-rule {
  width: 80px;
  height: 3px;
  background: var(--yellow);
  border: none;
  margin: 16px 0 28px;
}

.title-rule.center {
  margin-left: auto;
  margin-right: auto;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 36px;
  border-radius: var(--pill);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  font-family: 'Roboto', 'Roboto Fallback Caps', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.btn-primary {
  background: var(--yellow);
  color: var(--dark);
  border-color: var(--yellow);
}

@media (hover: hover) {
  .btn-primary:hover {
    background: var(--yellow-hover);
    border-color: var(--yellow-hover);
    color: var(--dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
}

.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-sm {
  padding: 10px 28px;
  font-size: 0.8rem;
}

.btn-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* `.btn` and other display overrides must never defeat the `hidden`
   attribute — the datasheet/model buttons on product pages are shipped
   hidden and only shown once catalog.js has a target to point them at. */
[hidden] {
  display: none !important;
}

/* --- Site chrome (topbar + header overlay) --- */
.site-chrome {
  --chrome-solid: 0;
  --logo-compact: 0;
  background: none;
}

.site-chrome::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  opacity: var(--chrome-solid);
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  pointer-events: none;
  z-index: -1;
}

.site-chrome.is-menu-open {
  --chrome-solid: 1;
}

.site-chrome .topbar {
  background: var(--gray-100);
  color: var(--navy);
  text-shadow: none;
}

.site-chrome .site-header {
  background: transparent;
  position: relative;
  box-shadow: none;
}

.site-chrome .nav-link {
  color: var(--white);
  transition: color 0.2s ease, text-shadow 0.2s ease;
  text-shadow: 0 1px 10px rgba(0,0,0, calc(0.7 * (1 - var(--chrome-solid))));
}

.site-chrome .nav-link:hover,
.site-chrome .nav-item.open > .nav-link,
.site-chrome .nav-link.active {
  color: var(--yellow);
}

.site-chrome .mobile-toggle span {
  background: var(--white);
  transition: background 0.2s ease;
}

.site-chrome.is-solid .nav-link,
.site-chrome.is-menu-open .nav .nav-link {
  color: var(--heading);
  text-shadow: none;
}

.site-chrome.is-solid .nav-link:hover,
.site-chrome.is-solid .nav-item.open > .nav-link,
.site-chrome.is-solid .nav-link.active,
.site-chrome.is-menu-open .nav-link:hover,
.site-chrome.is-menu-open .nav-item.open > .nav-link,
.site-chrome.is-menu-open .nav-link.active {
  color: var(--yellow-hover);
}

.site-chrome.is-solid .mobile-toggle span,
.site-chrome.is-menu-open .mobile-toggle span {
  background: var(--heading);
}

/* --- Top bar --- */
.topbar {
  background: var(--gray-100);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.6px;
}

.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar a {
  color: var(--navy);
}

.topbar a:hover {
  color: var(--gold);
}

.topbar-phone {
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.topbar-phone strong {
  font-weight: 700;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.topbar-right a.careers {
  color: var(--navy);
  font-weight: 700;
  text-transform: uppercase;
}

.topbar-right a.careers:hover {
  color: var(--gold);
}

.topbar-social {
  display: flex;
  gap: 10px;
}

.topbar-social a {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-social svg {
  width: 14px;
  height: 14px;
  fill: var(--navy);
  stroke: none;
}

.topbar-social a:hover svg {
  fill: var(--gold);
}

/* --- Main header --- */
.site-header {
  background: var(--white);
  z-index: 1000;
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: calc(82px + (29px * (1 - var(--logo-compact, 0))));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hero-scrim {
  position: relative;
  isolation: isolate;
}

.hero-scrim::before {
  content: '';
  position: absolute;
  inset: -48px -72px -52px;
  background: radial-gradient(
    ellipse farthest-side at center,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.3) 42%,
    rgba(255, 255, 255, 0.12) 72%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: calc(1 - var(--chrome-solid, 1));
  pointer-events: none;
  z-index: 0;
}

.nav-links.hero-scrim::before {
  background: radial-gradient(
    ellipse farthest-side at center,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.14) 42%,
    rgba(255, 255, 255, 0.05) 72%,
    rgba(255, 255, 255, 0) 100%
  );
}

.logo img {
  position: relative;
  z-index: 1;
  height: calc(52px + (42px * (1 - var(--logo-compact, 0))));
  width: auto;
  max-width: none;
}

.nav-links > .nav-item {
  z-index: 1;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--heading);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.nav-link svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.nav-link:hover,
.nav-item.open > .nav-link,
.nav-link.active {
  color: var(--yellow-hover);
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  max-height: min(70vh, 580px);
  overflow-y: auto;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  border-top: 3px solid var(--yellow);
  border-radius: var(--radius-md);
  padding: 10px 0;
  z-index: 50;
}

/* The last two menus open leftward so they stay clear of the quote button. */
.nav-links > .nav-item:nth-last-child(-n+2) > .dropdown {
  left: auto;
  right: 0;
}

.nav-item:hover > .dropdown,
.nav-item.open > .dropdown {
  display: block;
}

.dropdown a {
  display: block;
  padding: 9px 22px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

.dropdown a:hover {
  background: var(--light);
  color: var(--heading);
}

.dropdown .drop-label {
  padding: 8px 22px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}

/* A long menu opens in two columns on a desktop. .drop-col starts the second one.
   On a desktop the menu heading is the link to its own page, so the copy of that
   link inside the menu (.drop-phone) only shows on a phone, where a tap on the
   heading opens the menu instead. */
@media (min-width: 861px) {
  .dropdown .drop-phone { display: none; }

  .dropdown.drop-wide {
    min-width: 520px;
    max-height: none;
    overflow: visible;
    column-count: 2;
    column-gap: 0;
  }

  .dropdown.drop-wide > * { break-inside: avoid; }

  .dropdown.drop-wide > .drop-col { break-before: column; }
}

/* The quote button keeps its label on one line. When the desktop nav gets
   tight, the button gave up width first and "Get a Quote" wrapped, ragged
   left, inside the pill. Trim its padding there instead. */
.nav-cta {
  margin-left: 12px;
  flex-shrink: 0;
  white-space: nowrap;
  text-align: center;
}

@media (min-width: 861px) and (max-width: 1100px) {
  .nav-cta { padding: 10px 18px; }
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--heading);
  margin: 5px 0;
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  background: var(--dark) center / cover no-repeat;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,10,14,0.58) 0%, rgba(8,10,14,0.28) 34%, rgba(8,10,14,0.62) 100%),
    linear-gradient(90deg, rgba(8,10,14,0.72) 0%, rgba(8,10,14,0.42) 55%, rgba(8,10,14,0.32) 100%);
}

.hero-slideshow {
  min-height: 760px;
  isolation: isolate;
  transform: translateZ(0);
}

.hero-slideshow::before {
  content: none;
}

.hero:not(.hero-slideshow)::before {
  background: linear-gradient(
    90deg,
    rgba(90, 96, 108, 0.86) 0%,
    rgba(90, 96, 108, 0.44) 42%,
    rgba(90, 96, 108, 0) 100%
  );
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s ease, visibility 0s linear 1s;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transition: opacity 1s ease, visibility 0s;
}

.hero-slide-photo {
  position: absolute;
  inset: -8%;
  background: var(--dark) center / cover no-repeat;
  transform: translateZ(0) scale(1);
  will-change: transform;
  backface-visibility: hidden;
}

.hero-slide-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(90, 96, 108, 0.86) 0%,
    rgba(90, 96, 108, 0.44) 42%,
    rgba(90, 96, 108, 0) 100%
  );
}

.hero-slide-photo.is-zooming {
  animation: hero-kenburns 8s linear forwards;
}

@keyframes hero-kenburns {
  from { transform: translateZ(0) scale(1); }
  to { transform: translateZ(0) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-slide-photo.is-zooming {
    animation: none;
  }
}

.hero-slide .container,
.hero > .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  flex: 0 0 auto;
}

.hero-content {
  position: relative;
  z-index: 1;
  color: var(--white);
  text-align: left;
  padding: 172px 0 80px;
  max-width: 720px;
  margin-right: auto;
}

.hero h1,
.hero .hero-title {
  color: var(--white);
  font-size: 4.2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  line-height: 1.05;
  text-shadow: 0 2px 28px rgba(0,0,0,0.45);
}

.hero .hero-sub {
  font-size: 1.35rem;
  font-weight: 400;
  color: rgba(255,255,255,0.94);
  margin-bottom: 32px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}

.hero:not(.hero-slideshow) .hero-content {
  padding: 160px 0 40px;
}

.hero:not(.hero-slideshow) h1,
.hero:not(.hero-slideshow) .hero-title {
  font-size: 3rem;
}

.hero:not(.hero-slideshow) .hero-sub {
  font-size: 1.15rem;
  margin-bottom: 0;
}

.hero.hero-tall {
  min-height: 760px;
}

.hero.hero-tall .hero-content {
  padding: 172px 0 80px;
}

.hero.hero-tall h1 {
  font-size: 4.2rem;
}

.hero.hero-tall .hero-sub {
  font-size: 1.35rem;
  margin-bottom: 32px;
}

.hero-content .btn {
  margin-top: 28px;
}

.hero-content .btn-group {
  margin-top: 28px;
}

.hero-content .btn-group .btn {
  margin-top: 0;
}

.hero-locations {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 8px 0 0;
}

.hero-locations li {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-shadow: none;
}

.yellow-band {
  height: 14px;
  background: var(--yellow);
}

body > .yellow-band {
  position: sticky;
  top: var(--header-h);
  z-index: 999;
}

.site-chrome.has-page-band > .yellow-band {
  display: none;
}

/* Phone-sized hero photo. The pages name the full-size photo in a style
   attribute; a narrow screen gets the smaller copy. scripts/preload-hero.mjs
   preloads by the same width, so keep its SMALL list in step with this. */
@media (max-width: 600px) {
  [style*="/images/home-hero.webp"] {
    background-image: url('/images/home-hero-sm.webp') !important;
  }
}

/* Inner page hero */
.page-hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  background: var(--dark) center / cover no-repeat;
  padding: 160px 24px 40px;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(90, 96, 108, 0.86) 0%,
    rgba(90, 96, 108, 0.44) 42%,
    rgba(90, 96, 108, 0) 100%
  );
}

.page-hero-packshot {
  background-color: #1c1c1c;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.page-hero h1 {
  color: var(--white);
  font-size: 3rem;
  max-width: 640px;
  margin-bottom: 10px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}

.page-hero p {
  color: rgba(255,255,255,0.92);
  font-size: 1.15rem;
  max-width: 640px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}

.page-hero-tall {
  min-height: 760px;
}
.overlay-section {
  position: relative;
  background: var(--charcoal) center / cover no-repeat;
  padding: 90px 0;
}

.overlay-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,16,24,0.72) 0%, rgba(12,16,24,0.82) 100%);
}

.overlay-section .container {
  position: relative;
  z-index: 1;
}

/* --- Icon cards --- */
.cards-3,
.cards-4 {
  display: grid;
  gap: 28px;
  margin-top: 40px;
}

.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }

.icon-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 28px 32px;
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.icon-card .icon-circle {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.icon-card .icon-circle svg {
  width: 38px;
  height: 38px;
  stroke: var(--white);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A step number where the other cards have an icon */
.icon-card .icon-circle.step-number {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--dark);
}

.icon-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.icon-card p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.7;
}

.icon-card .location-tags {
  justify-content: center;
  margin-top: 4px;
}

.icon-card .location-tags li {
  background: var(--gray-100);
}

/* --- Feature cards (software / access platforms) --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.features-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.features-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1100px) {
  .features-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.feature-card .partner-logo {
  height: 36px;
  margin: 0 auto 36px;
}

a.feature-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition);
}

a.feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 28px 32px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
}

.feature-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.feature-card p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

/* Cards that end in a link stack as a column so the links line up across a row. */
.feature-card:has(> .learn-more) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.feature-card > .learn-more {
  margin-top: auto;
}

/* Centered variant: icon, heading, and text all on the same axis (About page). */
.features-grid-centered .feature-card {
  text-align: center;
}

.features-grid-centered .feature-card h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.features-grid-centered .feature-icon {
  margin-left: auto;
  margin-right: auto;
}

.feature-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  flex-shrink: 0;
}

.feature-icon svg {
  width: 38px;
  height: 38px;
  stroke: var(--white);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.icon-card .learn-more {
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--heading);
}

.icon-card .learn-more:hover {
  color: var(--yellow-hover);
}

/* Intro about block */
.about-block {
  padding: 88px 0;
  text-align: center;
}

.about-block h2 {
  font-size: 2.2rem;
  margin-bottom: 8px;
}

.about-block p {
  max-width: 820px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.85;
}

/* --- Product cards --- */
.products-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 40px;
}

.products-grid > * {
  flex: 0 1 calc((100% - 56px) / 3);
  min-width: 0;
}

.products-grid.cols-2 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.products-grid.cols-2 > * {
  flex-basis: calc((100% - 28px) / 2);
}

.product-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-100);
  transition: transform var(--transition);
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-6px);
  position: relative;
  z-index: 2;
}

.product-image {
  aspect-ratio: 16/10;
  background: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding: 16px;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  background: var(--yellow);
  color: var(--dark);
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: var(--pill);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.product-body {
  padding: 24px 26px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-body h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.product-body p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 14px;
}

.product-features {
  list-style: none;
  margin-bottom: 18px;
}

.product-features li {
  font-size: 0.85rem;
  color: var(--heading);
  padding: 4px 0 4px 18px;
  position: relative;
}

.product-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px;
  height: 7px;
  background: var(--yellow);
  border-radius: 50%;
}

.product-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

.product-body .learn-more {
  margin-top: auto;
}

/* Featured product line slideshow */
.featured-section {
  padding: 80px 0 90px;
  background: var(--gray-200);
}

.featured-stage {
  position: relative;
  display: grid;
  margin-top: 36px;
}

.featured-line {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: stretch;
  gap: 0;
  min-height: 0;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-align: left;
  visibility: hidden;
  pointer-events: none;
}

.featured-line.is-active {
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.featured-line-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  background: var(--light);
  min-height: 340px;
  padding: 36px;
}

.featured-line-visual img {
  width: 100%;
  height: 100%;
  max-height: 280px;
  object-fit: contain;
}

.featured-line-visual.is-photo {
  padding: 0;
  background: var(--dark);
}

.featured-line-visual.is-photo img {
  max-height: none;
  object-fit: cover;
}

.featured-line-content {
  display: flex;
  flex-direction: column;
  padding: 44px 48px;
}

.featured-line-content .btn {
  margin-top: auto;
  align-self: flex-start;
}

.featured-line-content h3 {
  font-size: 1.85rem;
  margin-bottom: 14px;
}

.featured-line-content p {
  font-size: 1.02rem;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 24px;
}

.featured-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}

.featured-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--heading);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--transition), border-color var(--transition);
}

.featured-arrow:hover {
  background: var(--yellow);
  border-color: var(--yellow);
}

.featured-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.featured-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.featured-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  transition: width var(--transition), background var(--transition), border-radius var(--transition);
}

.featured-dots button[aria-selected="true"] {
  width: 28px;
  border-radius: var(--pill);
  background: var(--yellow);
}

.featured-actions {
  margin-top: 40px;
}

/* Product detail (line + SEO pages) */
.product-detail {
  padding: 72px 0;
}

.product-detail.page-start {
  padding-top: calc(var(--header-h) + 48px);
}

.product-detail-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 12px;
}

.product-detail-kicker .section-label {
  margin-bottom: 0;
}

/* Before the script wraps it in the kicker row, the label takes the same
   height as that row, so the title and photo do not shift when it does. */
.product-detail .section-label {
  display: block;
}

/* A pill so it reads as a control, not another label. The negative margin
   keeps the row the label's height, so nothing below moves when it appears. */
.product-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -6px 6px -6px 0;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--pill);
  background: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--heading);
  transition: border-color var(--transition), background-color var(--transition);
}

.product-back::before {
  content: '';
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(2px) rotate(45deg);
}

.product-back:hover,
.product-back:focus-visible {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--heading);
}

/* catalog-arrive.js: the catalog is hidden while it is put back where the
   visitor left it, so the top of the page does not flash and snap away. The
   header stays: site.js swaps #site-header for #site-chrome, and a page with
   nothing at all to paint goes white. */
html.catalog-arriving body > :not(#site-header, #site-chrome) {
  opacity: 0;
}

/* Then it eases in rather than appearing all at once. */
html.catalog-arrived body > :not(#site-header, #site-chrome) {
  transition: opacity 0.18s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  html.catalog-arrived body > :not(#site-header, #site-chrome) {
    transition: none;
  }
}

.product-detail-title {
  font-size: 2.1rem;
  margin-bottom: 0;
}

.product-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
  margin-top: 12px;
}

.product-media {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.product-media > img,
.product-media > .product-image-fallback {
  width: 100%;
  background: var(--light);
  padding: 28px;
  border-radius: var(--radius-lg);
  object-fit: contain;
  aspect-ratio: 1;
}

.product-copy h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

/* A product page's pickers are written by script a moment after the page
   appears, and push everything below them down. Until they are in, what sits
   below is held back, so nothing is seen to jump; then it fades in. If the
   script never runs it all shows after 2.5 seconds. */
#skuPickers ~ *,
.product-detail ~ * {
  transition: opacity 0.25s ease-out;
}

#skuPickers:empty:not([data-ready]) ~ *,
.product-detail:has(#skuPickers:empty:not([data-ready])) ~ * {
  opacity: 0;
  animation: sku-late 0s 2.5s forwards;
}

@keyframes sku-late {
  to { opacity: 1; }
}

/* A model page ships its mounts and accessories in the page. The script puts
   the spec tables above them, so they wait for it too. */
.product-detail:has(#skuPickers:not([data-ready])) :is(#skuMounts, #skuAccessories) {
  opacity: 0;
  animation: sku-late 0s 2.5s forwards;
}

/* The parts the script adds fade in rather than snap in: the pickers the
   first time they are written, and the blocks it places around the layout. */
#skuPickers[data-ready="new"] > *,
#skuSpecs,
#skuMounts,
#skuAccessories {
  animation: sku-arrive 0.25s ease-out both;
}

@keyframes sku-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* A model page ships a plain spec table for a visitor without scripts. The
   script replaces it with the grouped tables below the photo, so it stays out
   of the way unless the script has not run after 2.5 seconds. */
.product-copy > .spec-table {
  display: none;
  animation: spec-late 0s 2.5s forwards;
}

@keyframes spec-late {
  to { display: table; }
}

@media (prefers-reduced-motion: reduce) {
  #skuPickers ~ *,
  .product-detail ~ * {
    transition: none;
  }

  #skuPickers[data-ready="new"] > *,
  #skuSpecs,
  #skuMounts,
  #skuAccessories {
    animation: none;
  }
}

.product-copy .sku-pickers {
  margin: 0 0 20px;
}

.product-copy .sku-supported-devices {
  margin: 0 0 20px;
}

.supported-devices-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.supported-device {
  display: inline-block;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--heading);
  border-radius: var(--pill);
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

a.supported-device {
  text-decoration: none;
}

a.supported-device:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.sku-supported-devices.is-long .supported-devices-list {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.product-copy .sku-code {
  margin-bottom: 12px;
}

.product-copy .sku-code:empty {
  display: none;
}

a.sku-code {
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.sku-code:hover {
  color: var(--heading);
}

.product-copy .sku-chip {
  font-size: 0.82rem;
  padding: 6px 12px;
}

/* Product viewer actions. The spec tables now run full width below the
   photo/copy columns (see .spec-groups). */
.product-copy .btn-group {
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.product-copy .btn-group .btn {
  padding-left: 24px;
  padding-right: 24px;
  white-space: nowrap;
}

/* A long label ("Build a Silent Sentinel Jaegar System") must wrap on a phone
   rather than push the page wider than the screen. */
@media (max-width: 600px) {
  .product-copy .btn-group .btn {
    white-space: normal;
    max-width: 100%;
  }
}

/* --- Testimonials --- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}

.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
}

.testimonial-card .quote-mark {
  font-size: 3.4rem;
  color: var(--yellow);
  line-height: 1;
  font-family: Georgia, serif;
  margin-bottom: 6px;
  opacity: 0.7;
}

.testimonial-card p {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 18px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.testimonial-author .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--yellow);
  font-weight: 700;
  font-size: 0.85rem;
}

.testimonial-author .info strong {
  display: block;
  font-size: 0.9rem;
  color: var(--heading);
}

.testimonial-author .info span {
  font-size: 0.8rem;
  color: var(--muted);
}

/* --- FAQ --- */
.faq-list {
  max-width: 820px;
  margin: 40px auto 0;
  text-align: left;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
}

.faq-item summary {
  position: relative;
  padding: 18px 56px 18px 22px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--navy);
}

.faq-item[open] summary::after {
  content: '\2212';
}

.faq-item p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--text);
  line-height: 1.7;
}

.faq-item p a {
  color: var(--navy);
  text-decoration: underline;
}

.reviews-rating {
  text-align: center;
  margin-bottom: 8px;
  color: var(--yellow);
  font-size: 1.4rem;
  letter-spacing: 3px;
}

/* --- Stats --- */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 56px 0;
}

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

.stat-item .stat-number {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--yellow);
  line-height: 1.15;
  margin-bottom: 8px;
}

.stat-item .stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Why / numbered --- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.why-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.why-item {
  display: flex;
  gap: 18px;
}

.why-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--yellow);
  color: var(--dark);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}

.why-item h3,
.why-item h4 { font-size: 1.05rem; margin-bottom: 4px; }
.why-item p { font-size: 0.9rem; color: var(--muted); }

/* --- CTA --- */
.cta-banner {
  background: var(--navy-band);
  border-radius: 16px;
  padding: 40px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 50%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(240, 179, 35, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.cta-content,
.cta-banner .btn-group {
  position: relative;
  z-index: 1;
}

.cta-wrap,
section:has(> .container > .cta-banner) {
  padding: 56px 0;
}

.section:not(.section-light):has(+ .cta-wrap),
.catalog-section:has(+ .cta-wrap),
.product-detail:has(+ .cta-wrap) {
  padding-bottom: 0;
}

.cta-content h2 {
  color: var(--white);
  font-size: 1.65rem;
  margin-bottom: 6px;
}

.cta-content p {
  color: rgba(255,255,255,0.72);
  font-size: 0.95rem;
}

/* --- Partners logo scroll --- */
.partners-scroll {
  overflow: hidden;
  width: 100%;
  margin-top: 36px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
}

.partners-row {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  padding: 8px 0;
  animation: partners-marquee var(--partners-duration, 64s) linear infinite;
}

.partners-scroll:hover .partners-row {
  animation-play-state: paused;
}

.partner-logo {
  display: block;
  height: 52px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  flex-shrink: 0;
  color: #1c1c1c;
}

.partner-logo-lg {
  height: 72px;
  max-width: 240px;
}

.partners-featured {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin: 40px 0 12px;
}

.partners-featured a {
  display: flex;
  align-items: center;
}

.platform-choice-grid {
  display: grid;
  /* Six brands: two even rows of three. */
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 0 8px;
}

.platform-choice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition), transform var(--transition);
}

.platform-choice-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.platform-choice-card .partner-logo {
  height: 32px;
  width: auto;
  max-width: 85%;
  min-width: 0;
  flex-shrink: 1;
  align-self: center;
  margin: 0 auto 32px;
  object-fit: contain;
  object-position: center;
}

.platform-choice-card p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 14px;
}

.platform-choice-card .learn-more {
  margin-top: auto;
  align-self: center;
}

@media (max-width: 900px) {
  .platform-choice-grid {
    grid-template-columns: 1fr;
  }
}

/* Catalog page: below 1111px the six brand cards shrink to logo tiles so the
   product list is not pushed far down the page. Tile widths and breakpoints
   keep the Pelco logo at or above its 130px brand minimum. */
@media (max-width: 1110px) {
  .platform-choice-grid--compact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  .platform-choice-grid--compact .platform-choice-card {
    flex: 0 0 calc((100% - 50px) / 6);
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    min-height: 56px;
  }
  .platform-choice-grid--compact .platform-choice-card .partner-logo {
    height: 26px;
    max-width: 100%;
    margin: 0;
  }
  .platform-choice-grid--compact .platform-choice-card p,
  .platform-choice-grid--compact .platform-choice-card .learn-more {
    display: none;
  }
}

@media (max-width: 1000px) {
  .platform-choice-grid--compact .platform-choice-card {
    flex-basis: calc((100% - 20px) / 3);
  }
}

@media (max-width: 520px) {
  .platform-choice-grid--compact .platform-choice-card {
    flex-basis: calc((100% - 10px) / 2);
  }
}

.partner-name {
  flex-shrink: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--heading);
  opacity: 0.42;
  padding: 12px 4px;
  border: none;
  border-radius: 0;
  white-space: nowrap;
  transition: opacity var(--transition);
}

.partner-name:hover {
  opacity: 0.9;
}

@keyframes partners-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(var(--partners-shift, -50%)); }
}

/* --- Tech highlight --- */
.tech-highlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.tech-highlight.reversed { direction: rtl; }
.tech-highlight.reversed > * { direction: ltr; }

.tech-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tech-visual.is-video {
  overflow: visible;
  border-radius: 0;
}

.tech-visual img {
  width: 100%;
  height: auto;
}

.tech-visual img.product-shot {
  aspect-ratio: 4/3;
  object-fit: contain;
  background: var(--white);
}

.tech-visual video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.tech-content h2 {
  font-size: 2.6rem;
  margin-bottom: 14px;
}

.tech-content h3 {
  font-size: 1.7rem;
  margin-bottom: 14px;
}

.tech-content p {
  font-size: 0.98rem;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1.8;
}

.tech-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.tech-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
}

.tech-features-list li svg {
  width: 18px;
  height: 18px;
  stroke: var(--yellow);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0;
  margin-top: 3px;
}

/* --- Contact --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}

.contact-info-card {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 44px;
  color: var(--white);
}

.contact-info-card h2,
.contact-info-card h3 {
  color: var(--white);
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.contact-info-card > p {
  color: rgba(255,255,255,0.7);
  margin-bottom: 32px;
}

.contact-detail {
  display: flex;
  gap: 16px;
  margin-bottom: 22px;
}

.contact-detail-icon {
  width: 44px;
  height: 44px;
  background: rgba(250,192,61,0.18);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-detail-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--yellow);
  fill: none;
  stroke-width: 2;
}

.contact-detail strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.contact-detail span {
  display: block;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
}

.contact-detail a { color: var(--yellow); }

.contact-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-100);
}

.form-group { margin-bottom: 22px; position: relative; }

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--heading);
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea,
.form-select-trigger {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-select-trigger:focus,
.form-select.is-open .form-select-trigger {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(250,192,61,0.2);
}

.form-select {
  position: relative;
}

.form-select.is-open {
  z-index: 40;
}

.form-select select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}

.form-select-trigger .form-select-label {
  flex: 1;
  min-width: 0;
}

.form-select-trigger .form-select-label.is-placeholder {
  color: var(--muted);
}

.form-select-trigger svg {
  width: 12px;
  height: 12px;
  stroke: var(--heading);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.form-select.is-open .form-select-trigger svg {
  transform: rotate(180deg);
}

.form-select.is-open .form-select-trigger {
  border-radius: 4px 4px 0 0;
}

.form-select-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: -1px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top-color: var(--yellow);
  border-radius: 0 0 4px 4px;
  box-shadow: var(--shadow-md);
  padding: 6px 0;
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
}

.form-select.is-open .form-select-menu {
  display: block;
}

.form-select-option {
  padding: 10px 16px;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
}

.form-select-option:hover,
.form-select-option.is-active {
  background: var(--light);
  color: var(--heading);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select-option.is-focused {
  background: var(--light);
  color: var(--heading);
}

.form-group.has-error input,
.form-group.has-error textarea {
  border-color: #dc2626;
}

.form-group.has-error input:focus,
.form-group.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.field-error,
.form-select-error {
  margin: 6px 0 0;
  color: #dc2626;
  font-size: 0.85rem;
}

.cf-turnstile {
  margin: 4px 0 2px;
}

.form-legal {
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.form-legal a {
  color: var(--navy);
  text-decoration: underline;
}

.btn.is-loading {
  opacity: 0.72;
  pointer-events: none;
}

.form-select.has-error .form-select-trigger {
  border-color: #dc2626;
}

.form-banner {
  position: fixed;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: 90%;
  padding: 14px 28px;
  border-radius: 8px;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: opacity 0.5s;
}

.form-banner.is-ok { background: #16a34a; }
.form-banner.is-bad { background: #dc2626; }
.form-banner.is-fading { opacity: 0; }

/* Spam honeypot — real visitors never see or tab into this. */
.form-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* --- Spec table --- */
/* Full-width block below the photo/copy columns. Groups sit two across so the
   specs take less page height; they stack on phones (see the 700px query). */
.spec-groups {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  align-items: start;
}

.spec-group h2 {
  font-size: 1.05rem;
  margin: 0;
  color: var(--heading);
}

.spec-group .spec-table {
  margin-top: 8px;
}

/* Each group already has a visible heading; keep the SPEC / VALUE column
   headers for screen readers but drop the repeated black bars. */
.spec-group .spec-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.spec-group .spec-table tbody th,
.spec-group .spec-table tbody td {
  padding: 8px 16px;
  font-size: 0.84rem;
}

.spec-group .spec-table tbody th {
  width: 44%;
}

.spec-group .spec-table tbody th {
  color: var(--muted);
  font-weight: 600;
}

.spec-group .spec-table tbody td {
  color: var(--heading);
  font-weight: 500;
}

/* Every table is drawn as one of the site's white cards, with a quiet header
   row. */
.spec-table {
  width: 100%;
  margin-top: 20px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-top: 3px solid var(--yellow);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.spec-table th,
.spec-table td {
  padding: 12px 18px;
  text-align: left;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--gray-100);
}

.spec-table thead th {
  padding: 16px 22px 12px;
  border-bottom: 1px solid var(--gray-200);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

.spec-table tbody tr:last-child > * {
  border-bottom: 0;
}

.spec-table tbody th {
  width: 42%;
  color: var(--heading);
  font-weight: 600;
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
}

.spec-table tbody tr:hover { background: var(--light); }
.spec-table a {
  color: var(--avigilon-blue);
  font-weight: 700;
}
.platform-tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--pill);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 14px;
}
.tag-alta { background: rgba(0, 163, 224, 0.16); color: var(--avigilon-blue-dark); }
.tag-unity { background: rgba(0, 94, 184, 0.12); color: var(--avigilon-blue); }
.tag-open { background: rgba(242, 115, 32, 0.16); color: #c45a12; }
.tag-milestone { background: rgba(0, 151, 215, 0.14); color: #0077a8; }
.tag-soterix { background: rgba(17, 124, 162, 0.14); color: #0e5f7c; }
.tag-pelco { background: rgba(28, 28, 28, 0.1); color: #1c1c1c; }
.tag-vicon { background: rgba(0, 133, 255, 0.12); color: #0060b8; }

.industry-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 8px;
}

.industry-overview-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.industry-overview-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.industry-overview-grid.cols-5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

@media (max-width: 1100px) {
  .industry-overview-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .industry-overview-grid.cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.industry-overview-body p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

.industry-overview-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
  min-height: 100%;
}

.industry-overview-card:hover {
  color: inherit;
  border-color: var(--yellow);
  box-shadow: var(--shadow-md);
}

.industry-overview-photo {
  height: 220px;
  background: var(--dark) center / cover no-repeat;
}

.industry-overview-body {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.industry-overview-body h2 {
  font-size: 1.45rem;
  margin-bottom: 14px;
}

.location-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px;
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  flex: 1;
}

.location-tags li {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--pill);
  background: var(--light);
  color: var(--heading);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.industry-overview-card .learn-more {
  margin-top: auto;
  padding-top: 18px;
}

.industry-challenges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 56px;
  margin: 4px 0 56px;
}

.industry-challenges h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.industry-challenges p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text);
  max-width: 520px;
}

.industry-platforms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.industry-platform-wide {
  grid-column: 1 / -1;
}

.industry-platform {
  background: var(--light);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}

.industry-platform h3 {
  font-size: 1.2rem;
  margin: 8px 0 14px;
}

.industry-platform ul {
  list-style: none;
}

.industry-platform li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 0.95rem;
  line-height: 1.55;
}

.industry-platform li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
}






.industry-more {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.industry-more h3 {
  font-size: 1rem;
  margin-bottom: 14px;
}

.industry-more-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- Footer --- */
.footer {
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 64px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--gray-200);
}

.footer-brand p {
  font-size: 0.9rem;
  line-height: 1.8;
  margin-top: 16px;
  max-width: 320px;
  color: var(--gray-500);
}

.footer h4 {
  color: var(--navy);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-bottom: 18px;
}

.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a {
  color: var(--gray-500);
  font-size: 0.9rem;
}
.footer-links a:hover { color: var(--navy); }

.footer-contact-item {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}

.footer-contact-item a { color: var(--navy); font-weight: 500; }
.footer-contact-item a:hover { color: var(--gold); }
.footer-contact-item svg {
  width: 18px; height: 18px; stroke: var(--navy); fill: none; stroke-width: 2;
  flex-shrink: 0; margin-top: 3px;
}

.license-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--gray-200);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--navy);
  font-weight: 500;
  margin-top: 20px;
}

.license-badge svg {
  width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 2;
}

.footer-partner-logo {
  display: block;
  margin-top: 16px;
  width: 100%;
  max-width: 280px;
  height: auto;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.footer-bottom span {
  max-width: 720px;
  line-height: 1.5;
}

.footer-legal {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-legal a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}

.footer-legal a:hover {
  color: var(--heading);
}

.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gray-200);
  display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: var(--navy); }
.footer-social a svg {
  width: 14px; height: 14px; fill: var(--gray-500); stroke: none;
}
.footer-social a:hover svg { fill: var(--white); }

/* Back to top */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 42px;
  height: 42px;
  background: var(--yellow);
  color: var(--dark);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 40;
  box-shadow: var(--shadow-md);
}

.back-to-top.visible { display: flex; }
.back-to-top svg { width: 18px; height: 18px; stroke: var(--dark); fill: none; stroke-width: 2.4; }

.mobile-cta {
  display: none;
}

.legal-copy {
  max-width: 760px;
  margin: 0 auto;
}

.legal-copy .legal-updated {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.legal-copy h2 {
  margin: 2rem 0 0.75rem;
  color: var(--heading);
  font-size: 1.35rem;
}

.legal-copy p,
.legal-copy li {
  margin-bottom: 0.85rem;
}

.legal-copy ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.legal-copy a {
  color: var(--navy);
}

/* Related products */
.related-section {
  background: var(--light);
  padding: 72px 0;
}

/* --- SKU catalog --- */
.catalog-section {
  padding: 24px 0 40px;
  /* Links to #catalog land below the sticky header and yellow band. */
  scroll-margin-top: calc(var(--header-h) + 14px);
}

.catalog-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.catalog-filters {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 22px 20px 24px;
  position: sticky;
  top: calc(var(--header-h) + var(--catalog-sticky-gap));
  max-height: calc(100vh - var(--header-h) - var(--catalog-sticky-gap));
  overflow-y: auto;
  z-index: 998;
  align-self: start;
}

.catalog-main {
  min-width: 0;
}

.catalog-results {
  padding-top: 12px;
}

.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.filter-head h2 {
  font-size: 1.05rem;
  margin: 0;
}

.filter-clear {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

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

.catalog-search-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.catalog-search,
.catalog-sort {
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  padding: 11px 12px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--white);
}

.catalog-search {
  width: 100%;
}

.catalog-sort {
  width: auto;
  min-width: 10.5rem;
  max-width: 12.5rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.catalog-search:focus,
.catalog-sort:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(250,192,61,0.2);
}

.filter-group {
  margin-top: 10px;
  border-top: 1px solid var(--gray-100);
}

.filter-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 12px 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.filter-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

.filter-group-current {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--heading);
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-group-toggle svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--heading);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.filter-group.is-open .filter-group-toggle svg {
  transform: rotate(0deg);
}

.filter-group-body {
  display: none;
  padding-bottom: 12px;
}

.filter-group.is-open .filter-group-body {
  display: block;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

.filter-option:hover,
.filter-option.is-active {
  background: var(--light);
}

.filter-option input {
  accent-color: var(--dark);
}

.filter-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
}

.filter-block-title {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

.filter-category {
  display: flex;
  align-items: center;
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  color: var(--heading);
  text-align: left;
  cursor: pointer;
}

.filter-category:hover { background: var(--light); }

.filter-category.is-active {
  background: var(--dark);
  color: var(--white);
  font-weight: 700;
}

.filter-category.is-active .filter-option-count { color: var(--gray-200); }

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  padding: 4px 11px;
  border: 1px solid var(--gray-200);
  border-radius: var(--pill);
  background: var(--white);
  font: inherit;
  font-size: 0.85rem;
  color: var(--heading);
  cursor: pointer;
}

.filter-chip:hover { border-color: var(--dark); }

.filter-chip.is-active {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

.filter-chip-count {
  font-size: 0.75rem;
  color: var(--muted);
}

.filter-chip.is-active .filter-chip-count { color: var(--gray-200); }

.filter-category.is-empty,
.filter-chip.is-empty,
.filter-option.is-empty {
  opacity: 0.45;
}

.filter-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.filter-option-count {
  margin-left: auto;
  padding-left: 8px;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.filter-single {
  padding: 10px 0;
}

.catalog-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: calc(var(--header-h) + var(--catalog-sticky-gap));
  z-index: 998;
  background: var(--white);
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--gray-100);
}

.catalog-main > .catalog-toolbar {
  margin-bottom: 4px;
}

.catalog-count {
  margin: 0;
  font-weight: 700;
  color: var(--heading);
  flex-shrink: 0;
}

.catalog-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.catalog-pills[hidden] {
  display: none !important;
}

.catalog-toolbar .filter-pill {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-width: min-content;
  margin: 0;
  border: 0;
  background: var(--yellow);
  color: var(--dark);
  border-radius: var(--pill);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}

.catalog-toolbar .filter-pill:hover,
.catalog-toolbar .filter-pill:focus-visible {
  background: var(--yellow-hover);
}

.catalog-toolbar .filter-pill:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 2px;
}

.catalog-toolbar .filter-pill svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.catalog-view-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.catalog-view-toggle,
.catalog-density {
  display: flex;
  align-items: center;
  border: 1px solid var(--gray-200);
  border-radius: var(--pill);
  overflow: hidden;
  background: var(--white);
}

.catalog-view-btn,
.catalog-density-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--heading);
  cursor: pointer;
  display: grid;
  place-items: center;
  height: 36px;
  width: 36px;
  padding: 0;
}

.catalog-view-btn svg,
.catalog-density-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.catalog-view-btn.is-active,
.catalog-density-btn.is-active {
  background: var(--yellow);
  color: var(--dark);
}

.catalog-view-btn:hover,
.catalog-density-btn:hover {
  background: var(--light);
}

.catalog-view-btn.is-active:hover,
.catalog-density-btn.is-active:hover {
  background: var(--yellow);
}

.catalog-density[hidden] {
  display: none !important;
}

.catalog-filter-toggle { display: none; }

.sku-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-content: start;
}

/* The catalog page ships its grid empty and marked busy. Hold a screen of
   room for it, so what sits below does not jump when the cards arrive. */
.sku-grid[aria-busy="true"]:empty {
  min-height: 100vh;
}

.sku-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.sku-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.sku-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

.sku-grid.is-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sku-grid.is-list .sku-card {
  flex-direction: row;
  align-items: stretch;
}

.sku-grid.is-list .product-image {
  width: 200px;
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
  padding: 12px;
}

.sku-grid.is-list .product-body {
  padding: 18px 22px;
  justify-content: center;
}

.sku-grid.is-list .product-body h3 {
  font-size: 1.05rem;
}

.sku-grid.is-list .product-body p {
  margin-bottom: 8px;
}

.sku-code {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-bottom: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


.sku-pickers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 8px;
}

.sku-picker-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

.sku-picker-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sku-chip {
  appearance: none;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--heading);
  border-radius: var(--pill);
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
}

.sku-chip:hover {
  border-color: var(--navy);
}

.sku-chip:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.sku-install {
  margin: 14px 0 20px;
}
.sku-install h2 {
  font-size: 1.25rem;
  margin: 0 0 12px;
}
.sku-install-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.sku-install-chips .sku-chip {
  font-size: .85rem;
  padding: 6px 14px;
}
.sku-install-chips .sku-chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.sku-install-parts {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
}
.sku-install-part {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--gray-100);
}
.sku-install-part:first-child { border-top: 0; }
.sku-install-part label { flex: 1 1 240px; cursor: pointer; }
.sku-install-part small,
.sku-install-sku { color: var(--gray-600, #555); }
.sku-install-name { flex: 1 1 240px; }
.sku-install-tag {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray-600, #555);
}
.sku-install-group fieldset { border: 0; margin: 0; padding: 0; width: 100%; }
.sku-install-group legend { font-weight: 600; margin-bottom: 4px; }
.sku-install-group label { display: block; padding: 2px 0; }
.sku-install-note { margin: 0 0 12px; color: var(--gray-600, #555); }

.sku-chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.sku-chip.is-unavailable {
  opacity: 0.38;
}

.sku-grid.is-list .sku-pickers {
  margin-top: 8px;
}

.sku-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}

.sku-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 50px;
  background: var(--light);
  color: var(--heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

a.sku-badge:hover {
  background: var(--yellow);
  color: var(--dark);
}

.sku-accessories {
  margin-top: 28px;
}

.sku-accessories h2 {
  font-size: 1.05rem;
  margin: 0 0 8px;
}

/* The parts list takes the navy rule so it reads apart from the spec cards
   above it. */
.sku-accessories .spec-table {
  margin-top: 12px;
  border-top-color: var(--navy);
}

.sku-accessories .spec-table tbody td {
  padding: 13px 22px;
  line-height: 1.6;
  color: var(--text);
}

.sku-accessories .spec-table tbody td:first-child {
  font-weight: 700;
  color: var(--heading);
  white-space: nowrap;
}



/* On a phone a long part number wraps so the card stays inside the page. */
@media (max-width: 700px) {
  .sku-accessories .spec-table thead th,
  .sku-accessories .spec-table tbody td {
    padding-left: 14px;
    padding-right: 14px;
  }

  .sku-accessories .spec-table tbody td:first-child {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.product-image-fallback {
  width: 100%;
  aspect-ratio: 1;
  background: var(--light);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  word-break: break-word;
}

.product-image.is-empty {
  background: var(--light);
}

.compat-carousel {
  margin-top: 36px;
}

.compat-carousel h2,
.compat-ticker h2 {
  font-size: 1.15rem;
  margin: 0 0 14px;
}

/* The mounts row sits between the spec tables and Other accessories, and its
   heading matches theirs. */
.sku-mounts h2 {
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.compat-carousel-viewport,
.compat-ticker-viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.compat-carousel-viewport {
  scroll-snap-type: x mandatory;
}

.compat-carousel-track,
.compat-ticker-track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 4px 2px 14px;
}

.compat-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition);
}

a.compat-card:hover {
  transform: translateY(-4px);
  position: relative;
  z-index: 1;
}

.compat-card-image {
  aspect-ratio: 4 / 3;
  background: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.compat-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.compat-card-fallback {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding: 8px;
  word-break: break-word;
}

.compat-card-body {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compat-card-body strong {
  font-size: 0.88rem;
  line-height: 1.35;
}

.compat-card-body span {
  font-size: 0.75rem;
  color: var(--muted);
  word-break: break-word;
}

.compat-ticker {
  margin-top: 12px;
  padding: 32px 0 40px;
  background: var(--light);
  overflow: hidden;
}

.compat-ticker .container {
  margin-bottom: 4px;
}

.compat-ticker-viewport {
  padding-inline: max(20px, calc(50vw - 560px));
}

.compat-ticker.is-animated .compat-ticker-track {
  animation: compat-ticker 48s linear infinite;
}

.compat-ticker.is-animated:hover .compat-ticker-track,
.compat-ticker.is-animated:focus-within .compat-ticker-track {
  animation-play-state: paused;
}

@keyframes compat-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .compat-ticker.is-animated .compat-ticker-track {
    animation: none;
  }
}

.catalog-empty {
  margin: 24px 0 0;
  color: var(--muted);
}

.is-skeleton {
  pointer-events: none;
}

.is-skeleton .product-image,
.is-skeleton .skeleton-line {
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--light) 50%, var(--gray-100) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

.skeleton-line {
  display: block;
  height: 14px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.skeleton-line.short {
  width: 42%;
}

@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .is-skeleton .product-image,
  .is-skeleton .skeleton-line {
    animation: none;
  }
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .hero h1, .hero .hero-title { font-size: 3.2rem; }
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .sku-grid[data-cols="4"] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  .spec-groups { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .cards-3,
  .testimonials-grid,
  .tech-highlight,
  .why-grid,
  .contact-grid,
  .product-layout,
  .catalog-layout,
  .features-grid,
  .features-grid.cols-2,
  .features-grid.cols-4,
  .industry-overview-grid,
  .industry-overview-grid.cols-3,
  .industry-overview-grid.cols-4,
  .industry-overview-grid.cols-5,
  .industry-platforms,
  .industry-challenges {
    grid-template-columns: 1fr;
  }

  .products-grid > *,
  .products-grid.cols-2 > * {
    flex-basis: 100%;
  }

  .catalog-main {
    overflow: visible;
  }

  /* Stacked product viewer: photo, then model details, then the
     compatible-mounts block. `display: contents` lifts the media children
     into the grid so the mounts can be ordered after .product-copy. */
  .product-layout {
    gap: 24px;
  }

  .product-layout > .product-media {
    display: contents;
  }

  .product-layout > .product-media > .compat-carousel {
    order: 2;
    margin-top: 12px;
  }

  .product-layout > .product-copy {
    order: 1;
  }

  .catalog-filters {
    position: static;
    display: none;
    max-height: none;
    overflow: visible;
  }

  .sku-grid[data-cols="4"],
  .sku-grid[data-cols="3"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .sku-grid.is-list .product-image {
    width: 150px;
  }

  .catalog-filters.is-open { display: block; }

  .catalog-filter-toggle { display: inline-flex; }

  .tech-highlight.reversed { direction: ltr; }

  .hero h1, .hero .hero-title { font-size: 2.6rem; }
  .page-hero h1 { font-size: 2.3rem; }
  .section-title, .section-title-light, .tech-content h2 { font-size: 2rem; }

  .cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }

  .cta-wrap,
  section:has(> .container > .cta-banner) {
    padding: 40px 0;
  }

  .stats-bar { grid-template-columns: repeat(2, 1fr); }

  .featured-line,
  .featured-line.is-active {
    grid-template-columns: 1fr;
  }

  .featured-line-visual {
    min-height: 240px;
    padding: 28px;
  }

  .featured-line-content {
    padding: 28px 24px 32px;
  }

  .featured-line-content h3 {
    font-size: 1.5rem;
  }
}

@media (max-width: 860px) {
  .has-mobile-cta {
    padding-bottom: 76px;
  }

  .has-mobile-cta .mobile-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
  }

  .has-mobile-cta .mobile-cta .btn {
    flex: 1;
    margin: 0;
    padding: 12px 16px;
  }

  .has-mobile-cta .back-to-top {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    padding: 12px 0 24px;
    box-shadow: var(--shadow-md);
    gap: 0;
    margin-left: 0;
    /* The open menu scrolls as one piece when it is taller than the screen. */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav.open { display: flex; }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-links.hero-scrim::before {
    content: none;
  }

  .nav-cta { margin: 12px 24px 0; }

  .nav-item .dropdown {
    position: static;
    display: none;
    box-shadow: none;
    border-top: none;
    border-radius: 0;
    background: var(--light);
    min-width: 0;
    max-height: none;
    overflow: visible;
    padding: 4px 0;
  }

  .nav-item.open > .dropdown { display: block; }

  .mobile-toggle { display: block; }

  .site-chrome:not(.is-solid):not(.is-menu-open) .nav .nav-link {
    color: var(--heading);
  }

  .site-chrome:not(.is-solid):not(.is-menu-open) .nav .nav-link:hover,
  .site-chrome:not(.is-solid):not(.is-menu-open) .nav .nav-link.active {
    color: var(--yellow-hover);
  }

  .topbar-right span.hide-sm,
  .topbar-right a.hide-sm { display: none; }
}

@media (max-width: 600px) {
  .hero { min-height: 280px; }
  /* The topbar wraps to two rows here, so the fixed header ends near 176px.
     Hero copy starts below it, matching .page-hero. */
  .hero-slideshow,
  .hero.hero-tall { min-height: 560px; }
  .hero h1, .hero .hero-title { font-size: 2.1rem; }
  .hero .hero-sub { font-size: 1.05rem; }
  .hero-content { padding: 196px 0 56px; }
  .hero:not(.hero-slideshow) .hero-content { padding: 196px 0 32px; }
  .hero:not(.hero-slideshow) h1, .hero:not(.hero-slideshow) .hero-title { font-size: 2.1rem; }
  .hero.hero-tall .hero-content { padding: 196px 0 56px; }
  .hero.hero-tall h1 { font-size: 2.1rem; }
  .hero.hero-tall .hero-sub { font-size: 1.05rem; }
  /* The topbar wraps to two rows here, so the header ends near 176px. */
  .page-hero { padding: 196px 20px 32px; min-height: 300px; }
  .page-hero-tall { min-height: 520px; }
  .page-hero h1 { font-size: 2.1rem; }
  .cards-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .sku-grid,
  .sku-grid[data-cols="2"],
  .sku-grid[data-cols="3"],
  .sku-grid[data-cols="4"] { grid-template-columns: 1fr; }
  .sku-grid.is-list .sku-card { flex-direction: column; }
  .sku-grid.is-list .product-image { width: 100%; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-legal { justify-content: center; }
  .topbar-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* --- Quote list --- */
.header-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.quote-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: var(--white);
  color: var(--heading);
  cursor: pointer;
  flex-shrink: 0;
}

.quote-nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.quote-nav-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--dark);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.quote-add {
  margin-top: 12px;
  align-self: flex-start;
  position: relative;
  z-index: 2;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--heading);
  border-radius: var(--pill);
  padding: 6px 12px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
}

a.product-card .quote-add,
a.product-card:hover .quote-add {
  color: var(--heading);
}

.quote-add:hover,
.quote-add.is-in,
.product-copy .btn.is-in {
  border-color: var(--heading);
  background: var(--light);
}

.quote-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 24, 40, 0.45);
  z-index: 1100;
}

.quote-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--white);
  z-index: 1110;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px));
}

.quote-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quote-drawer-head h2 {
  font-size: 1.35rem;
  margin: 0;
}

.quote-close {
  border: 0;
  background: none;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--heading);
  padding: 0 4px;
}

.quote-drawer-note,
.quote-panel-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 12px 0 18px;
}

.quote-empty {
  color: var(--muted);
  margin: 0 0 16px;
}

.quote-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  flex: 1;
}

.quote-line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  grid-template-areas:
    "thumb name remove"
    "thumb qty remove";
  gap: 4px 12px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--gray-100);
}

.quote-thumb { grid-area: thumb; }
.quote-line-copy { grid-area: name; min-width: 0; }
.quote-qty { grid-area: qty; }
.quote-remove { grid-area: remove; align-self: center; }

.quote-thumb img,
.quote-thumb-fallback {
  width: 72px;
  height: 48px;
  object-fit: contain;
  background: var(--light);
  border-radius: 6px;
}

.quote-thumb-fallback { display: block; }

.quote-line-name {
  margin: 0;
  font-weight: 700;
  color: var(--heading);
  font-size: 0.92rem;
}

.quote-line-name a { color: inherit; }
.quote-line-name a:hover { color: var(--yellow-hover); }

.quote-line-sku {
  margin: 2px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  color: var(--muted);
}
.quote-line.has-parts {
  grid-template-areas:
    "thumb name remove"
    "thumb qty remove"
    "parts parts parts";
}
.quote-line-install,
.quote-line-bundle {
  margin: 2px 0 0;
  font-size: .8rem;
  color: var(--gray-600, #555);
}
.quote-bundle-tag {
  display: inline-block;
  padding: 0 6px;
  margin-right: 4px;
  border-radius: var(--pill);
  background: var(--navy);
  color: var(--white);
  font-size: .7rem;
  font-weight: 700;
}
.quote-parts {
  grid-area: parts;
  list-style: none;
  margin: 6px 0 0 84px;
  padding: 0;
  font-size: .8rem;
}
.quote-parts li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 3px 0;
  border-top: 1px dashed var(--gray-100);
}
.quote-part-name { flex: 1 1 160px; }
.quote-part-sku { color: var(--gray-600, #555); }
.quote-part-qty { color: var(--gray-600, #555); white-space: nowrap; }
@media (max-width: 600px) { .quote-parts { margin-left: 0; } }

.quote-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quote-qty button,
.quote-remove {
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--heading);
  cursor: pointer;
  font: inherit;
}

.quote-qty button {
  width: 28px;
  height: 28px;
  border-radius: 4px;
}

.quote-qty button:disabled {
  opacity: 0.4;
  cursor: default;
}

.quote-qty input {
  width: 44px;
  height: 28px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  font: inherit;
  font-size: 0.9rem;
  text-align: center;
  color: var(--heading);
  -moz-appearance: textfield;
  appearance: textfield;
}

.quote-qty input::-webkit-outer-spin-button,
.quote-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quote-more {
  display: inline-block;
  margin-top: 16px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--heading);
}

.quote-more:hover { color: var(--yellow-hover); }

.label-optional {
  font-weight: 400;
  color: var(--muted);
}

.quote-remove {
  border: 0;
  background: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 0;
}

.quote-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.quote-drawer-actions .btn { justify-content: center; }

/* Storage planner: a second view of the quote drawer, plus its summary row
   and the confirmation card on /quote. */
.quote-back {
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 0;
  margin-bottom: 6px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--heading);
  cursor: pointer;
}

.quote-drawer.is-planning > .quote-drawer-note,
.quote-drawer.is-planning > .quote-empty,
.quote-drawer.is-planning > .quote-lines,
.quote-drawer.is-planning > .quote-plan-row,
.quote-drawer.is-planning > .quote-drawer-actions {
  display: none;
}

.quote-plan-row { margin-top: 12px; }

.quote-plan-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--light);
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.quote-plan-open:hover { border-color: var(--heading); }
.quote-plan-open b { display: block; color: var(--heading); font-size: 0.92rem; }

.quote-plan-cta {
  flex: none;
  padding: 4px 14px;
  border: 2px solid var(--heading);
  border-radius: var(--pill);
  font-weight: 700;
  color: var(--heading);
}

.quote-planner {
  flex: 1;
  overflow: auto;
  margin: 12px -8px 0;
  padding: 0 8px;
  font-size: 0.88rem;
}

.qp-intro { color: var(--muted); margin: 0 0 14px; }

.qp-shared {
  padding: 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--light);
}

.qp-shared h3,
.qp-group {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.qp-group { margin: 20px 0 0; color: var(--avigilon-blue); }
.qp-group span { color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }

.qp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

.qp-grid.qp-more { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.qp-wide { grid-column: 1 / -1; }
.qp-field { display: block; min-width: 0; }

.qp-field > span:first-child {
  display: block;
  margin-bottom: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--heading);
}

.quote-planner select,
.quote-planner input[type="number"] {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  font: inherit;
  color: var(--heading);
}

.qp-field select { width: 100%; }
.quote-planner select:disabled { background: var(--gray-100); color: var(--muted); }
.qp-inline { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.qp-inline input { width: 64px; }

.qp-seg {
  display: inline-flex;
  border: 1px solid var(--gray-200);
  border-radius: var(--pill);
  overflow: hidden;
  background: var(--white);
}

.qp-seg button {
  border: 0;
  background: none;
  padding: 5px 11px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--heading);
  cursor: pointer;
}

.qp-seg button.is-on { background: var(--dark); color: var(--white); }

.qp-line { padding: 10px 0; border-bottom: 1px solid var(--gray-100); }

.qp-line-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 58px;
  gap: 10px;
  align-items: center;
}

.qp-line-name b { color: var(--heading); line-height: 1.3; }
.qp-qty { color: var(--muted); white-space: nowrap; }
.qp-sku { display: block; font-size: 0.75rem; letter-spacing: 0.4px; color: var(--muted); }
.qp-tb { text-align: right; font-weight: 700; color: var(--heading); white-space: nowrap; }
.qp-line-links { margin-top: 4px; font-size: 0.8rem; }
.qp-alta { margin-top: 6px; }
.qp-alta b { color: var(--heading); }

.qp-tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: var(--pill);
  background: var(--gray-100);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
}

.qp-tag-custom { background: #FFF1C9; color: var(--dark); }

.qp-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 500;
  color: var(--avigilon-blue-dark);
  text-decoration: underline;
  cursor: pointer;
}

.qp-foot {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--yellow);
  border-radius: var(--radius);
  background: #FFF8E6;
}

.qp-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.qp-total b { color: var(--heading); white-space: nowrap; }
.qp-term { margin-top: 8px; }
.qp-pick { margin: 8px 0 0; }
.qp-pick b { display: block; color: var(--heading); }
.qp-foot .btn { width: 100%; justify-content: center; margin-top: 10px; }
.qp-ok { margin: 8px 0 0; font-weight: 700; color: #1F7A45; }
.qp-note { margin: 10px 0 0; font-size: 0.82rem; }
.qp-warn { color: #B42318; }
.qp-fine { margin: 14px 0 0; font-size: 0.75rem; color: var(--muted); }

.quote-plan-card {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--light);
  font-size: 0.9rem;
}

.quote-plan-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.quote-plan-card p { margin: 0 0 12px; }
.quote-plan-card .qp-fine { margin: 12px 0 0; }
.quote-plan-list { list-style: none; margin: 0 0 12px; padding: 0; }

.quote-plan-list li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 2px 12px;
  padding: 6px 0;
  border-top: 1px solid var(--gray-200);
}

.quote-plan-list li > span:first-child { font-weight: 700; color: var(--heading); }

@media (max-width: 420px) {
  .qp-line-top { grid-template-columns: minmax(0, 1fr) auto; }
  .qp-tb { grid-column: 1 / -1; text-align: left; }
  .quote-plan-list li { grid-template-columns: 1fr; }
}

body.quote-open { overflow: hidden; }

.quote-panel {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}

.quote-panel h2 {
  font-size: 1.5rem;
  margin: 0;
}

.quote-panel .quote-lines { overflow: visible; }

/* The Turnstile widget is a fixed 300px; with desktop padding it pushed the
   form (and the quote list sharing its track) past a phone's edge. */
@media (max-width: 600px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-form,
  .quote-panel { padding: 24px 20px; }
}

.contact-grid:has(#quote-form-wrap[hidden]) {
  grid-template-columns: minmax(0, 720px);
}

@media (max-width: 860px) {
  .header-inner { gap: 8px; }
  .logo { min-width: 0; max-width: calc(100% - 100px); }
  .logo img {
    max-width: 100%;
    width: auto;
    height: auto;
    /* Full desktop size crowds page-hero headings on phones. */
    max-height: calc(44px + (16px * (1 - var(--logo-compact, 0))));
  }
}

/* Feature pages (tools/feature-pages.mjs): scenario tabs, system picker, ready-built systems. */
.jb {
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap: 32px;
  align-items: start;
  margin-top: 40px;
}
.jb-steps {
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
}
.jb-step {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  gap: 20px;
  padding: 22px 24px;
  border-top: 1px solid var(--gray-200);
}
.jb-step:first-child {
  border-top: 0;
}
.jb-step.no-thumb {
  grid-template-columns: minmax(0,1fr);
}
.jb-thumb {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--light);
  border-radius: 10px;
  padding: 6px;
}
.jb-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.jb-num {
  font-weight: 900;
  color: var(--navy);
}
.jb-title {
  font-weight: 700;
  color: var(--heading);
}
.jb-note {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--muted);
}
.jb-group-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 12px 0 6px;
}
.jb-head + .jb-group-label {
  margin-top: 0;
}
.jb-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jb-opt {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--heading);
  border-radius: 10px;
  padding: 7px 12px;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.jb-opt:hover {
  border-color: var(--navy);
}
.jb-opt:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.jb-opt-name {
  font-size: .85rem;
  font-weight: 600;
}
.jb-opt-sku {
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: .02em;
}
.jb-opt.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.jb-opt.is-active .jb-opt-sku {
  color: rgba(255,255,255,.75);
}
.jb-opt[data-fixed] {
  cursor: default;
}
.jb-summary {
  position: sticky;
  top: 150px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 22px;
  background: var(--light);
}
.jb-summary-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.jb-summary-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jb-summary-list li {
  display: flex;
  flex-direction: column;
  font-size: .85rem;
  color: var(--heading);
  font-weight: 600;
}
.jb-summary-list small {
  font-size: .7rem;
  font-weight: 400;
  color: var(--muted);
}
.jb-summary-hint {
  font-size: .8rem;
  color: var(--muted);
  margin: 0 0 12px;
}
.jb-add {
  width: 100%;
  justify-content: center;
}
.jb-add[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
@media (max-width: 900px) { .jb { grid-template-columns:1fr; } .jb-summary { position:static; } .jb-step { grid-template-columns:52px minmax(0,1fr); gap:14px; padding:18px; } .jb-thumb { width:52px; height:52px; } }
.fit {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: 48px;
  align-items: center;
  margin-top: 40px;
}
.fit-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fit-item {
  border-left: 3px solid transparent;
  border-radius: 0 10px 10px 0;
  transition: background .2s, box-shadow .2s;
}
.fit-item.is-active {
  border-left-color: var(--navy);
  background: var(--white);
  box-shadow: 0 6px 20px rgba(12,24,40,.08);
}
.fit-tab {
  appearance: none;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  padding: 18px 24px 10px;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fit-item:not(.is-active) .fit-tab {
  padding-bottom: 18px;
}
.fit-tab:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}
.fit-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--muted);
}
.fit-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--heading);
}
.fit-item.is-active .fit-title {
  color: var(--navy);
}
.fit-item:not(.is-active):hover .fit-title {
  color: var(--navy);
}
.fit-panel {
  padding: 0 24px 20px;
}
.fit-panel p {
  margin: 0;
  font-size: .95rem;
}
.fit-media {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
}
.fit-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s;
}
.fit-img.is-active {
  opacity: 1;
}
@media (max-width: 900px) { .fit { grid-template-columns:1fr; gap:24px; } .fit-media { order:-1; } }
.rb-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  margin-top: 32px;
  text-align: left;
}
.rb-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
}
.rb-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  background: var(--light);
  padding: 16px;
}
.rb-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}
.rb-body h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}
.rb-body p {
  margin: 0 0 14px;
  font-size: .9rem;
}
.rb-options {
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 16px;
}
.rb-options .jb-opt {
  width: 100%;
}
.rb-add {
  margin-top: auto;
  align-self: flex-start;
}
.rb-add[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
@media (max-width: 900px) { .rb-grid { grid-template-columns:1fr; } }

/* Integrator note on product line and manufacturer pages: where we use it / where we don't. */

/* --- Blog (pages built by tools/generate-blog.mjs) --- */
/* Menu and footer links to Blog and Projects, hidden until either has something in it */
[data-section][hidden] { display: none !important; }

/* A post's main picture is a real image, so it can be described and found
   in image search. It sits behind the hero's shading and text. */
.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero.has-img::before { z-index: 1; }
.page-hero.has-img .page-hero-inner { z-index: 2; }

/* Date line above the post title in the hero */
.page-hero .post-meta {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 12px;
}

.page-hero.post-hero h1 {
  max-width: 820px;
  font-size: 2.7rem;
}

/* Post body: everything Markdown can produce */
.post-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.06rem;
  line-height: 1.75;
}

.post-body > * + * { margin-top: 1.15rem; }

.post-body > p:first-child {
  font-size: 1.22rem;
  line-height: 1.65;
  color: var(--heading);
}

.post-body h2 { font-size: 1.65rem; margin-top: 2.6rem; }
.post-body h3 { font-size: 1.25rem; margin-top: 2rem; }

.post-body ul,
.post-body ol { padding-left: 1.35rem; }

.post-body li + li { margin-top: 0.45rem; }
.post-body li::marker { color: var(--yellow-hover); font-weight: 700; }

.post-body a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-body a:hover { color: var(--navy-light); }

.post-body blockquote {
  margin: 2rem 0;
  padding: 0.35rem 0 0.35rem 1.4rem;
  border-left: 4px solid var(--yellow);
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--heading);
}

.post-body img {
  display: block;
  width: 100%;
  height: auto;
  margin: 2rem 0;
  border-radius: var(--radius-md);
}

.post-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin: 2rem 0;
  font-size: 0.95rem;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-top: 3px solid var(--yellow);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.post-body tbody tr:last-child > * {
  border-bottom: 0;
}

.post-body tbody tr:hover {
  background: var(--light);
}

.post-body th,
.post-body td {
  padding: 13px 22px;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: top;
}

.post-body thead th {
  padding: 16px 22px 12px;
  border-bottom: 1px solid var(--gray-200);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.post-body hr {
  border: 0;
  border-top: 1px solid var(--gray-200);
  margin: 2.5rem 0;
}

/* Video block in a post: a poster that becomes the player when clicked */
.post-video { margin: 2rem 0; }

.post-video-frame {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--dark);
}

.post-body .post-video-frame img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
}

.post-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease;
}

.post-video-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--dark);
}

.post-video-frame:hover .post-video-play { transform: scale(1.07); }

.post-video figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.post-video-missing { color: #B42318; font-weight: 500; }

/* Project pages: the customer's words */
.project-quote { margin: 2.5rem 0; }
.post-body .project-quote blockquote { margin: 0; }

.project-quote figcaption {
  margin-top: 0.7rem;
  padding-left: calc(1.4rem + 4px);
  font-size: 0.95rem;
  color: var(--muted);
}

/* Picture gallery placed in the body */
.post-gallery { margin: 2rem 0; }

.post-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.post-gallery-grid.is-single { grid-template-columns: 1fr; }
.post-gallery-grid a { display: block; }

.post-body .post-gallery-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  object-fit: cover;
  border-radius: var(--radius);
}

.post-body .post-gallery-grid.is-single img { aspect-ratio: auto; }

.post-gallery figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Careers: the list of openings, and the form on the page and on each job */
/* The list can be empty on a day when no job is open, so the space above it
   belongs to its first job and an empty list takes up no room. */
.job-list { display: grid; gap: 16px; }
.job-list > :first-child { margin-top: 28px; }
.job-card {
  display: block;
  padding: 22px 26px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.job-card:hover { border-color: var(--yellow); box-shadow: var(--shadow-lg); }
.job-card h3 { margin: 0 0 4px; font-size: 1.25rem; color: var(--heading); }
.job-card p { margin: 0 0 10px; }
.job-facts, .job-posted { color: var(--muted); font-size: 0.92rem; }
/* The job's summary, leading the description */
.post-body .job-summary { font-size: 1.15rem; font-weight: 500; margin-bottom: 28px; }
.job-posted { max-width: 760px; margin: 2rem auto 0; }
.job-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--yellow);
  color: var(--dark);
  padding: 3px 8px;
  border-radius: 4px;
  vertical-align: middle;
}
.jobs-none { margin: 28px 0 8px; }
.careers-form { max-width: 760px; margin: 48px auto 0; }
.careers-form h2 { margin-bottom: 24px; }
@media (max-width: 600px) {
  .careers-form { padding: 28px 20px; }
}

/* Case studies: what was tested, the findings box and the contents list */
.study-subject { font-size: 1.15rem; }
.study-findings,
.study-contents { max-width: 760px; margin: 0 auto 2rem; }
.study-findings {
  padding: 22px 26px;
  border-left: 4px solid var(--yellow);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--light);
}
.study-findings h2,
.study-contents h2 {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--heading);
  margin: 0 0 10px;
}
.study-findings ul { margin: 0 0 0 20px; list-style: disc; }
.study-findings li + li,
.study-contents li + li { margin-top: 6px; }
.study-contents { padding-bottom: 1.75rem; border-bottom: 1px solid var(--gray-200); margin-bottom: 2.5rem; }
.study-contents ol { margin: 0 0 0 20px; list-style: decimal; }
/* The header is fixed, so a heading reached from the contents list needs room above it. */
.post-body h2[id] { scroll-margin-top: 140px; }

/* Photo viewer: every picture in a post or project, one at a time */
.photo-viewer-trigger,
.post-gallery-grid a { cursor: zoom-in; }

html.photo-viewer-open { overflow: hidden; }

.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  padding: 56px 12px 48px;
  background: rgba(17, 17, 17, 0.94);
}

.photo-viewer[hidden] { display: none; }

.photo-viewer-figure {
  grid-column: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  max-height: 100%;
}

.photo-viewer-figure img {
  max-width: 100%;
  max-height: calc(100vh - 170px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

.photo-viewer-figure figcaption {
  margin-top: 14px;
  max-width: 720px;
  color: var(--white);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

.photo-viewer button {
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-size: 2rem;
  line-height: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  justify-self: center;
}

.photo-viewer button:hover,
.photo-viewer button:focus-visible { background: var(--yellow); color: var(--dark); outline: none; }

.photo-viewer-prev { grid-column: 1; grid-row: 1; }
.photo-viewer-next { grid-column: 3; grid-row: 1; }
.photo-viewer-figure { grid-row: 1; }
.photo-viewer .photo-viewer-close { position: absolute; top: 12px; right: 16px; font-size: 1.7rem; }

.photo-viewer-count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  text-align: center;
}

.photo-viewer.is-single .photo-viewer-prev,
.photo-viewer.is-single .photo-viewer-next,
.photo-viewer.is-single .photo-viewer-count { display: none; }

@media (max-width: 640px) {
  .photo-viewer { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 56px 4px 44px; }
  .photo-viewer button { width: 38px; height: 38px; font-size: 1.6rem; }
}

/* Download button placed in the body */
.post-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 2rem 0;
}

.post-body .post-download a { color: var(--dark); text-decoration: none; }
.post-download-detail { font-size: 0.88rem; color: var(--muted); }

/* Questions after the body, using the contact page's FAQ rows */
.post-faq {
  max-width: 760px;
  margin: 3.5rem auto 0;
}

.post-faq h2 { font-size: 1.65rem; margin-bottom: 1rem; }
.post-faq .faq-list { max-width: none; margin: 0; }

/* Product cards placed in the body */
.post-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  margin: 2rem 0;
}

.post-body .post-products a { text-decoration: none; color: inherit; }

.post-body .post-products img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
}

.post-products .product-body { padding: 16px 18px 20px; }
.post-products .product-body > * + * { margin-top: 0; }
.post-body .post-products h3 { font-size: 1rem; margin: 0 0 4px; line-height: 1.3; }

.post-product-model {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.post-products .learn-more { margin-top: auto; padding-top: 10px; font-size: 0.75rem; }

/* Related pages: the 2 to 4 required links to the rest of the site */
.post-links {
  max-width: 760px;
  margin: 3.5rem auto 0;
  padding: 28px 30px 14px;
  background: var(--light);
  border-top: 4px solid var(--yellow);
  border-radius: var(--radius-md);
}

.post-links h2 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.post-links ul { list-style: none; }
.post-links li + li { border-top: 1px solid var(--gray-200); }

.post-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--heading);
}

.post-links a::after {
  content: '\2192';
  color: var(--yellow-hover);
  transition: transform 0.2s ease;
}

.post-links a:hover { color: var(--navy); }
.post-links a:hover::after { transform: translateX(4px); }

.post-back {
  max-width: 760px;
  margin: 2rem auto 0;
}

/* A link in the hero's top line, such as a project's industry */
.page-hero .post-meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.page-hero .post-meta a:hover { color: var(--white); }

/* Topics at the foot of a post's hero, each linking to that topic's posts */
.page-hero .post-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: none;
  margin-top: 22px;
  font-size: 0.8rem;
  text-shadow: none;
}

.post-topics a {
  padding: 5px 14px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--pill);
  color: var(--white);
  font-weight: 500;
  background: rgba(0, 0, 0, 0.25);
}

.post-topics a:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--dark);
}

/* Blog index: search, topic buttons and sort */
.blog-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 24px;
  align-items: start;
  margin-bottom: 36px;
}

.blog-tools[hidden] { display: none; }
.blog-sort .catalog-sort { margin-left: 0; }

.blog-topics {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-topic {
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--heading);
  border-radius: var(--pill);
  padding: 8px 16px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}

.blog-topic:hover { border-color: var(--heading); }

.blog-topic.active {
  background: var(--yellow);
  border-color: var(--yellow);
  font-weight: 700;
}

.blog-count {
  grid-column: 1 / -1;
  font-size: 0.88rem;
  color: var(--muted);
}

.blog-empty { text-align: center; padding: 24px 0; }
.blog-empty a { color: var(--navy); text-decoration: underline; }
.post-card[hidden] { display: none; }

/* Blog index cards, built on the existing product card */
.post-card .product-image {
  padding: 0;
  aspect-ratio: 16 / 9;
}

.post-card .product-image img { object-fit: cover; }

.post-card-date {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.post-card .product-body h3 { font-size: 1.2rem; line-height: 1.3; }
.post-card .learn-more { margin-top: auto; }

@media (max-width: 768px) {
  .page-hero.post-hero h1 { font-size: 2rem; }
  .post-body { font-size: 1rem; }
  .post-body > p:first-child { font-size: 1.1rem; }
  .post-links { padding: 22px 20px 8px; }
  .post-body table { display: block; overflow-x: auto; }
  .blog-tools { grid-template-columns: 1fr; }
}

/* Preview site only: draft and "will not publish" notices */
.post-notice {
  background: var(--dark);
  color: var(--white);
  font-size: 0.9rem;
  padding: 12px 0;
}

.post-notice strong { color: var(--yellow); }
.post-notice-advice { background: var(--charcoal); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.post-notice ul { margin: 6px 0 0 1.2rem; }

/* Service and purchasing pages: a short column of text with a list. */
.plain-copy {
  max-width: 760px;
}

.plain-copy p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.plain-copy ul,
.plain-copy ol {
  margin: 0 0 1.5rem 1.4rem;
  font-size: 1.05rem;
  line-height: 1.75;
}

/* A short list inside a photo card, as on the service page. */
.industry-overview-body ul { list-style: disc; margin: 0 0 16px 20px; color: var(--muted); }
.industry-overview-body li { margin-bottom: 6px; }
.industry-overview-body ul + p { margin-bottom: 12px; }

.plain-copy ul { list-style: disc; }
.plain-copy ol { list-style: decimal; }
.plain-copy li { margin-bottom: 0.5rem; }