/*
 * Wholesale Sign Pro — Main stylesheet
 */

:root {
  /* Brand palette — Wholesale Sign Pro
     (indigo/violet sampled from the WSP logo gradient + legacy ALS purple;
     variable names kept from the base theme to avoid a global refactor:
     "-red" = primary CTA hue, "-blue" = secondary hue) */
  --brand-red: #4f46e5;
  --brand-red-dark: #3c34c4;
  --brand-red-soft: rgba(79, 70, 229, 0.08);

  --brand-blue: #6d5a9e;
  --brand-blue-dark: #21203a;
  --brand-blue-light: #aec9ea;
  --brand-blue-soft: rgba(109, 90, 158, 0.09);

  --ink: #101010;
  --ink-2: #374151;
  --ink-3: #6b7280;
  --line: #e5e7eb;
  --line-2: #d1d5db;
  --bg: #ffffff;
  --bg-soft: #f5f5fb;
  --bg-soft-2: #ebebf5;

  /* Type scale */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 1080px;
  --header-h: 100px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(16, 16, 16, 0.05);
  --shadow-md: 0 4px 12px rgba(16, 16, 16, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 16, 16, 0.12);

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
/* Safety net — prevent any single overflowing element (oversized image,
   long word, wide table) from forcing the whole page to scroll sideways
   on mobile. Vertical scroll still works normally. */
html, body { overflow-x: hidden; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { list-style-position: inside; }

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }
p { color: var(--ink-2); }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 1rem;
}

/* Layout primitives */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}
.container.narrow { max-width: var(--container-narrow); }

section {
  padding-block: clamp(48px, 8vw, 96px);
}
section.alt { background: var(--bg-soft); }
section.dark {
  background: var(--ink);
  color: #e5e7eb;
}
section.dark h1, section.dark h2, section.dark h3, section.dark h4 { color: #fff; }
section.dark p { color: #cbd5e1; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--r-md);
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none !important;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand-red);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--brand-red-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary {
  background: var(--brand-blue);
  color: #fff;
}
.btn-secondary:hover { background: var(--brand-blue-dark); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-outline:hover { background: var(--bg-soft); border-color: var(--ink-2); }
.btn-ghost { background: transparent; color: var(--ink-2); padding: 10px 14px; }
.btn-ghost:hover { color: var(--brand-red); }
.btn-lg { padding: 18px 36px; font-size: 17px; }
.btn-sm { padding: 8px 16px; font-size: 14px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}
.brand {
  flex-shrink: 0;
}
.brand img {
  height: 92px;
  width: auto;
  max-width: none;
  filter: brightness(1.2);
}
/* Logo image is self-explanatory (wordmark already visible inside the JPG) — hide redundant text label so nav has room. */
.brand-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
nav.primary {
  display: none;
  gap: 2px;
  align-items: center;
}
/* Originally 880px: the full nav (all top-level items + brand text +
   logo) didn't actually fit the container until ~1300px, so anything
   below that was overflowing the header and getting silently clipped
   by the sitewide overflow-x:hidden (no visible scrollbar, but real
   nav items were unreachable). Raising the breakpoint to 1360px fixed
   that, but it meant ordinary 1280-1360px laptop screens — a very
   common width — lost the always-visible nav entirely in favor of the
   hamburger, which read as "the menu disappeared" (reported
   2026-08-10). Now that .brand-name is hidden through this whole
   range (see above), the nav fits at a much lower width — tested and
   confirmed no overflow at 1024px. Keep this in sync with the two
   other breakpoints below (mobile drawer + hamburger button) — all
   three must switch together or there's a dead zone with neither nav
   visible. */
@media (min-width: 1024px) {
  nav.primary { display: flex; }
}

/* Mobile drawer — shown when body has `.menu-open` (set by JS in base.njk).
   Slides in as a full-height panel below the header on viewports < 1024px.
   Above 1024px, desktop CSS above takes over. */
@media (max-width: 1023px) {
  body.menu-open { overflow: hidden; }
  /* .site-header's backdrop-filter creates a containing block that traps
     position:fixed descendants. Disable it while the drawer is open so the
     drawer escapes the header and fills the viewport. */
  body.menu-open .site-header { backdrop-filter: none; background: #fff; }
  body.menu-open nav.primary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 90;
    padding: 16px 20px 80px;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  }
  body.menu-open nav.primary > a,
  body.menu-open nav.primary > .has-children > a {
    display: block;
    padding: 14px 12px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    color: var(--ink);
  }
  /* On mobile, dropdowns become accordions — submenu starts hidden, opens
     when `.open` class is added by JS on tap. Strip absolute positioning
     so the panel flows inline. */
  body.menu-open nav.primary .submenu,
  body.menu-open nav.primary .submenu .submenu-2 {
    display: none;
    position: static;
    border: none;
    box-shadow: none;
    padding: 0 0 8px 16px;
    min-width: 0;
    max-height: none;
    background: transparent;
    border-radius: 0;
  }
  body.menu-open nav.primary .has-children.open > .submenu,
  body.menu-open nav.primary .has-children-2.open > .submenu-2 {
    display: block;
  }
  body.menu-open nav.primary .submenu a,
  body.menu-open nav.primary .submenu .submenu-2 a {
    padding: 12px 12px;
    font-size: 15px;
    border-radius: var(--r-sm);
    white-space: normal;
  }
  body.menu-open nav.primary .submenu a:hover,
  body.menu-open nav.primary .submenu .submenu-2 a:hover {
    background: var(--brand-red-soft);
    color: var(--brand-red);
  }
  body.menu-open nav.primary .submenu a.submenu-parent {
    font-weight: 600;
  }
  /* Override desktop's "open submenu on hover" — required because the
     :hover/:focus-within rules above try to display:block them. */
  body.menu-open nav.primary .has-children:hover .submenu,
  body.menu-open nav.primary .has-children:focus-within .submenu,
  body.menu-open nav.primary .submenu .has-children-2:hover .submenu-2,
  body.menu-open nav.primary .submenu .has-children-2:focus-within .submenu-2 {
    display: none;
  }
  body.menu-open nav.primary .has-children.open:hover .submenu,
  body.menu-open nav.primary .has-children.open:focus-within .submenu,
  body.menu-open nav.primary .submenu .has-children-2.open:hover .submenu-2,
  body.menu-open nav.primary .submenu .has-children-2.open:focus-within .submenu-2 {
    display: block;
  }
  /* Hamburger → X transition when menu is open */
  body.menu-open .menu-btn span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  body.menu-open .menu-btn span:nth-child(2) {
    opacity: 0;
  }
  body.menu-open .menu-btn span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .menu-btn span {
    transition: transform 0.2s, opacity 0.2s;
  }
}
nav.primary a {
  padding: 8px 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
@media (min-width: 1100px) {
  nav.primary a { padding: 8px 10px; font-size: 14px; }
}
nav.primary a:hover {
  color: var(--ink);
  background: var(--bg-soft);
  text-decoration: none;
}
nav.primary .has-children {
  position: relative;
}
nav.primary .submenu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-red);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  min-width: 320px;
  padding: 10px;
  z-index: 100;
}
nav.primary .has-children:hover .submenu,
nav.primary .has-children.hover-open .submenu,
nav.primary .has-children:focus-within .submenu { display: block; }
nav.primary .submenu a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  font-weight: 500;
}
nav.primary .submenu a:hover {
  background: var(--brand-red);
  color: #fff;
}
/* Nested submenu — second-level dropdown that opens to the right of the parent.
   Pattern: hover the parent .has-children-2 → .submenu-2 absolutely positions
   to the right edge of the first-level submenu. */
nav.primary .submenu .has-children-2 {
  position: relative;
}
nav.primary .submenu a.submenu-parent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 600;
}
nav.primary .submenu a.submenu-parent .submenu-arrow {
  font-size: 18px;
  line-height: 1;
  color: var(--ink-3, var(--ink-2));
}
nav.primary .submenu .submenu-2 {
  display: none;
  position: absolute;
  top: -11px;            /* align with .submenu's inner top padding */
  left: calc(100% + 6px); /* sit just right of the first-level submenu */
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-red);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  min-width: 320px;
  padding: 10px;
  z-index: 101;
  max-height: calc(100vh - var(--header-h) - 32px);
  overflow-y: auto;
}
nav.primary .submenu .has-children-2:hover .submenu-2,
nav.primary .submenu .has-children-2.hover-open .submenu-2,
nav.primary .submenu .has-children-2:focus-within .submenu-2 { display: block; }
nav.primary .submenu .has-children-2:hover > a.submenu-parent,
nav.primary .submenu .has-children-2.hover-open > a.submenu-parent { background: var(--brand-red); color: #fff; }
nav.primary .submenu .has-children-2:hover > a.submenu-parent .submenu-arrow,
nav.primary .submenu .has-children-2.hover-open > a.submenu-parent .submenu-arrow { color: #fff; }
nav.primary .submenu .submenu-2 a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  font-weight: 500;
}
nav.primary .submenu .submenu-2 a:hover {
  background: var(--brand-red);
  color: #fff;
}
/* Cap dropdown height for very tall menus, but keep overflow visible so a
   nested .submenu-2 can escape the parent's bounds and render to the right.
   (overflow-y:auto here would clip the second-level dropdown.) */
nav.primary .submenu {
  max-height: calc(100vh - var(--header-h) - 32px);
  overflow: visible;
}

/* FDA-certified callout — rendered on every laser product/category/page.
   Compact horizontal layout: badge + headline + supporting line. */
.fda-callout {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0 28px;
  padding: 14px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-blue, #3d7090);
  border-radius: var(--r-md);
}
/* aside.fda-callout (specificity 0,1,2) beats .prose img (0,1,1) so the
   logo stays small even when the callout is rendered inside .prose. */
aside.fda-callout img {
  flex: 0 0 auto;
  height: 44px;
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  border-radius: 4px;
  display: block;
}
.fda-callout strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.fda-callout p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
@media (max-width: 560px) {
  .fda-callout { gap: 12px; padding: 12px 14px; }
  aside.fda-callout img { height: 36px; }
  .fda-callout strong { font-size: 14px; }
  .fda-callout p { font-size: 12px; }
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.header-phone-icon {
  flex: 0 0 auto;
}
/* On very narrow viewports, hide the header phone button entirely — the
   top bar above already shows the same number, and the hamburger needs
   space. (The top bar phone links are still tappable.) */
@media (max-width: 560px) {
  .header-phone-btn { display: none; }
}

/* Top utility bar — thin red strip above the main header showing both
   phone numbers. Visible above-the-fold on every page so visitors don't
   have to scroll or hunt for contact info. Tap-to-call on mobile. */
.top-bar {
  background: var(--brand-red);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.top-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 14px;
}
.top-bar-label {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.92;
  margin-right: 4px;
}
.top-bar-phone {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.top-bar-phone:hover {
  text-decoration: underline;
  color: #fff;
}
.top-bar-icon {
  opacity: 0.92;
}
.top-bar-sep {
  opacity: 0.6;
}
.top-bar-ext {
  font-weight: 500;
  opacity: 0.92;
}
@media (max-width: 480px) {
  .top-bar { font-size: 12.5px; padding: 7px 0; }
  .top-bar-label { display: none; }  /* save room on tight phones */
  .top-bar .container { gap: 4px 10px; }
}

/* Pricing callout — prominent transparent-pricing box near the top of pages
   like /equipment/. Designed to be the first thing visitors notice after the
   intro signature. */
.pricing-callout {
  margin: 28px 0 36px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #fff8ec 0%, #ffe8d6 100%);
  border-left: 6px solid var(--brand-red);
  border-radius: var(--r-md);
  box-shadow: 0 4px 14px rgba(192, 30, 39, 0.08);
}
@media (max-width: 600px) {
  .pricing-callout { padding: 22px 20px; }
}
.pricing-callout-eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-red);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.pricing-callout h2 {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 700;
  color: #000;
  line-height: 1.2;
}
.pricing-callout p {
  margin: 0 0 14px;
  color: #000;
  line-height: 1.6;
}
.pricing-included {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.pricing-included li {
  padding: 8px 0 8px 36px;
  position: relative;
  color: #000;
  line-height: 1.55;
}
.pricing-included li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 6px;
  width: 24px;
  height: 24px;
  background: var(--brand-red);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  line-height: 24px;
}
.pricing-callout .btn { margin-top: 4px; }
/* Homepage placement — section wrapper for the pricing callout. Adds page
   padding and a subtle background separation from the showcase above
   and the stats strip below. */
.home-pricing { padding: 32px 0; background: #fff; }
@media (min-width: 880px) {
  .home-pricing { padding: 48px 0; }
}

/* Mobile menu toggle */
.menu-btn {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
}
@media (min-width: 1024px) {
  .menu-btn { display: none; }
}

/* Hero (homepage) — full-bleed photo with overlay */
.hero {
  position: relative;
  color: #fff;
  padding-block: clamp(56px, 8vw, 104px);
  overflow: hidden;
  background: #0a0a0a;
  background-size: cover;
  background-position: center;
  min-height: 560px;
  display: flex;
  align-items: center;
}
.hero-photo {
  background-image: var(--hero-bg);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.55) 60%, rgba(224, 0, 16, 0.35) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Background video — autoplay-muted-loop HTML5 video as hero background */
.hero-video-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-video-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 980px;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.hero .subhead {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  color: rgba(255, 255, 255, 0.88);
  max-width: 760px;
  margin-bottom: 20px;
  line-height: 1.55;
}
.hero .subhead-tight { margin-bottom: 24px; }
.hero .subhead strong { color: #fff; font-weight: 700; }
.hero .eyebrow { color: var(--brand-red); font-weight: 700; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Hero capability lists — two checklist columns of selling points over the
   video. Each column sits on a subtle glass panel so the white text stays
   legible against a moving background. */
.hero-capabilities {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 920px;
}
@media (min-width: 760px) {
  .hero-capabilities { grid-template-columns: 1fr 1fr; gap: 18px; }
}
.hero-cap-group {
  background: rgba(10, 10, 10, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px 18px 14px;
  backdrop-filter: blur(3px);
}
.hero-cap-label {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.hero-cap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero-cap-list li {
  position: relative;
  padding: 5px 0 5px 26px;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.hero-cap-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 5px;
  width: 18px;
  height: 18px;
  background: var(--brand-red);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
}
.hero-cap-list li strong { color: #fff; font-weight: 700; }

/* Tagline strip — sits between hero and trade show banner */
.tagline-strip {
  background: var(--bg);
  padding: 32px 0 28px;
  border-bottom: 1px solid var(--line);
}

/* Customer endorsement section — sits high on the homepage between the
   tagline strip and the featured video so social proof is visible before
   visitors do any deep browsing. Card-style on a soft background so it
   reads as a deliberate trust signal, not just another body section. */
.home-endorsement {
  background: var(--bg-soft);
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 880px) {
  .home-endorsement { padding: 44px 0; }
}
.endorsement-card {
  position: relative;
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-red);
  padding: 22px 22px 20px;
  box-shadow: 0 4px 16px rgba(16, 16, 16, 0.05);
}
@media (min-width: 720px) {
  .endorsement-card { padding: 28px 32px 24px; }
}
.endorsement-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 10px;
}
/* Letter body — verbatim Manuel Pertsis text, presented as a real letter
   (date + salutation + paragraphs + signoff). Keep the recommendation line
   pulled out visually as a blockquote within the letter flow. */
.endorsement-letter {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.endorsement-letter > p {
  margin: 0 0 8px;
}
.endorsement-letter > p:last-child {
  margin-bottom: 0;
}
.endorsement-date {
  font-size: 13px;
  color: var(--ink-3, var(--ink-2));
  margin-bottom: 10px !important;
}
.endorsement-signoff {
  margin-top: 10px !important;
  color: var(--ink-2);
}
.endorsement-quote {
  margin: 14px 0;
  padding: 12px 18px;
  border: 0;
  border-left: 4px solid var(--brand-red);
  background: var(--bg-soft);
  border-radius: 0 8px 8px 0;
}
.endorsement-quote p {
  margin: 0;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  font-style: italic;
  letter-spacing: -0.005em;
}
.endorsement-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.endorsement-logo {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 6px;
}
.endorsement-author-meta {
  min-width: 0;
}
.endorsement-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.endorsement-title {
  font-size: 13.5px;
  color: var(--ink-2);
  margin-top: 2px;
}
.endorsement-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-red);
  text-decoration: none;
}
.endorsement-link:hover { text-decoration: underline; }
.tagline-line {
  font-size: clamp(18px, 2vw, 22px);
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.4;
}
.tagline-sub {
  font-size: 15px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
}

/* Letter from the President — equipment highlights + signature */
.letter {
  background: var(--bg);
  padding-block: clamp(72px, 9vw, 110px);
  border-top: 1px solid var(--line);
}
.letter-title {
  font-size: clamp(1.875rem, 3.4vw, 2.625rem);
  margin: 8px 0 24px;
  line-height: 1.18;
}
.letter-body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 18px;
  max-width: 820px;
}
.letter-body strong { color: var(--ink); }
.highlights-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-red);
  margin: 36px 0 16px;
}
.highlights-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 880px) {
  .highlights-list { grid-template-columns: 1fr 1fr; gap: 16px 32px; }
}
.highlights-list li {
  position: relative;
  padding: 16px 18px 16px 22px;
  background: var(--bg-soft);
  border-left: 3px solid var(--brand-red);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.highlights-list li strong {
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.signature {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.signature-line {
  font-size: 16px;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.signature-name {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.signature-title {
  font-size: 14px;
  color: var(--brand-blue);
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.signature-org {
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.signature-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 24px;
}
.signature-contact a {
  color: var(--brand-red);
  text-decoration: none;
  font-weight: 600;
}
.signature-contact a:hover { text-decoration: underline; }

/* Trade show banner */
.tradeshow-banner {
  background: #0a0a0a;
  color: #fff;
  padding: 22px 0;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
}
.tradeshow-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tradeshow-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--brand-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.tradeshow-icon svg { width: 24px; height: 24px; }
.tradeshow-text {
  font-size: 16px;
  color: #f3f4f6;
  line-height: 1.5;
}
.tradeshow-text strong {
  color: var(--brand-red);
  font-weight: 700;
  letter-spacing: 0.02em;
}
@media (max-width: 720px) {
  .tradeshow-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tradeshow-text { font-size: 14px; }
}

/* Equipment showcase — DARK section, photo grid */
.equipment-showcase {
  background: #0a0a0a;
  color: #fff;
  padding-block: clamp(72px, 10vw, 120px);
}
.equipment-showcase .container { max-width: var(--container-max); }
.section-head { margin-bottom: 56px; }
.section-head .eyebrow { color: rgba(255, 255, 255, 0.55); margin-bottom: 12px; }
.section-title-light {
  color: #fff;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.section-head .rule {
  width: 56px;
  height: 3px;
  background: var(--brand-red);
  margin: 20px auto 0;
}
.eyebrow-light { color: rgba(255, 255, 255, 0.55) !important; }
.eyebrow-red { color: var(--brand-red) !important; }

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #1a1a1a;
  border: 1px solid #1a1a1a;
}
@media (max-width: 880px) {
  .equipment-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .equipment-grid { grid-template-columns: 1fr; }
}

.eq-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0a0a0a;
  background-size: cover;
  background-position: center;
  text-decoration: none !important;
  transition: transform 0.3s ease;
}
.eq-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.40) 55%, rgba(0,0,0,0.92) 100%);
  transition: background 0.3s ease;
}
.eq-card:hover .eq-card-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 55%, rgba(168,0,12,0.85) 100%);
}
.eq-card-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 28px 26px;
  z-index: 1;
}
.eq-card-title {
  color: #fff;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  margin: 0 0 14px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.eq-card-rule {
  display: block;
  width: 36px;
  height: 2px;
  background: var(--brand-red);
  margin-bottom: 12px;
  transition: width 0.3s ease;
}
.eq-card:hover .eq-card-rule {
  width: 56px;
  background: #fff;
}
.eq-card-tag {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  max-width: 320px;
}

/* Equipment lineup — full product showcase, dark sections, grouped by category */
.lineup {
  background: #0a0a0a;
  color: #fff;
  padding-block: clamp(72px, 10vw, 120px);
  /* Offset anchor-link scrolling so the section heading isn't hidden
     behind the sticky 96px header when arriving via /#lineup. */
  scroll-margin-top: var(--header-h);
}
.lineup-group {
  margin-top: 64px;
}
.lineup-group:first-of-type {
  margin-top: 56px;
}
/* Wizard CTA — under the bending-machine group inside the dark lineup
   section. Subtle glass card + the brand-red button. */
.lineup-wizard-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  max-width: 900px;
  margin: 30px auto 4px;
  padding: 18px 26px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  text-align: center;
}
.lineup-wizard-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15.5px;
  line-height: 1.5;
}
.lineup-wizard-cta strong { color: #fff; }
.lineup-wizard-cta .btn { flex: 0 0 auto; white-space: nowrap; }
.lineup-group-title {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-red);
  margin: 0 0 28px;
  padding-left: 16px;
  border-left: 3px solid var(--brand-red);
}
.lineup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 880px) {
  .lineup-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .lineup-grid { grid-template-columns: 1fr; }
}

.lineup-card {
  background: #141414;
  border: 1px solid #1f1f1f;
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.lineup-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-red);
  box-shadow: 0 12px 40px rgba(224, 0, 16, 0.18);
}
.lineup-img-link {
  display: block;
  aspect-ratio: 4 / 3;
  background: #fff;
  overflow: hidden;
}
.lineup-img-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  transition: transform 0.5s ease;
}
.lineup-card:hover .lineup-img-link img {
  transform: scale(1.04);
}
.lineup-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lineup-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px;
  color: #fff;
  letter-spacing: -0.005em;
}
.lineup-title a {
  color: inherit;
  text-decoration: none;
}
.lineup-title a:hover {
  color: var(--brand-red);
  text-decoration: none;
}
.lineup-desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 16px;
  flex: 1;
}
.lineup-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 12px 22px;
  background: var(--brand-red);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(166, 31, 46, 0.32);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.lineup-more:hover {
  background: var(--brand-red-dark, #8a1825);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(166, 31, 46, 0.45);
}

/* Split section (image + text) */
.split-section {
  padding-block: clamp(64px, 9vw, 120px);
  background: var(--bg);
}
.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 880px) {
  .split-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }
}
.split-image {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #f1f5f9;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.split-content h2 {
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  margin-bottom: 20px;
  line-height: 1.15;
}
.split-content p {
  font-size: 17px;
  margin-bottom: 16px;
  line-height: 1.65;
}

/* Spotlight (dark single-product feature) */
.spotlight {
  background: #0a0a0a;
  color: #fff;
  padding-block: clamp(72px, 9vw, 120px);
}
.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 880px) {
  .spotlight-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
  }
}
.spotlight h2 {
  color: #fff;
  font-size: clamp(2rem, 3.5vw, 2.875rem);
  margin-bottom: 24px;
}
.spotlight-lede {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 32px;
  line-height: 1.6;
}
.spotlight .spotlight-image {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1a1a1a;
  border-radius: var(--r-md);
  border: 1px solid #1f2937;
  /* Override the product-page .spotlight-image padding/min-height/flex */
  padding: 0;
  min-height: 0;
  display: block;
}

/* Stats strip */
.stats-strip {
  background: var(--bg-soft);
  padding: 48px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (min-width: 880px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stats-grid > div {
  border-left: 3px solid var(--brand-red);
  padding-left: 16px;
}
.stat-num {
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.stat-num-sm {
  font-size: 0.55em;
  color: var(--brand-blue);
  font-weight: 600;
  letter-spacing: 0;
}
.stat-lab {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Section head row (with title left + link right) */
.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

/* Final CTA */
.cta-final {
  background: #0a0a0a;
  color: #fff;
  padding-block: clamp(72px, 9vw, 100px);
  text-align: center;
}
.cta-final h2.cta-title {
  color: #fff;
  font-size: clamp(2rem, 3.8vw, 3rem);
  margin-bottom: 16px;
}
.cta-final .cta-text {
  color: rgba(255, 255, 255, 0.78);
  max-width: 640px;
  margin: 0 auto 32px;
  font-size: 18px;
  line-height: 1.6;
}

/* Ghost button on dark backgrounds */
.btn-ghost-on-dark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.btn-ghost-on-dark:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Page hero (smaller, for sub-pages) */
.page-hero {
  background: var(--bg-soft);
  padding-block: 36px 28px;
  border-bottom: 1px solid var(--line);
}
/* Thin variant for very compact sub-pages (financing, contact, etc.) */
.page-hero-thin { padding-block: 28px 20px; }
.page-hero h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 12px; }
.page-hero p { font-size: 18px; max-width: 760px; }

/* Article + sidebar layout — used by product, page, post, category */
.article-section {
  padding-block: clamp(40px, 5vw, 64px);
}
.article-section.alt { background: var(--bg-soft); border-top: 1px solid var(--line); }

.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 980px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 64px;
  }
}
.article-layout .prose { max-width: 100%; }

.article-bottom {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

/* Blog post byline — author avatar + name + date below H1.
   Replaces the prior plain "Published [date]" line; same position. */
.post-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-3, var(--ink-2));
  line-height: 1.4;
}
.post-byline-avatar-link {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}
.post-byline-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: block;
}
.post-byline-text {
  min-width: 0;
}
.post-byline-author {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.post-byline-author:hover {
  color: var(--brand-red);
  text-decoration: underline;
}
.post-byline-date {
  color: var(--ink-3, var(--ink-2));
  font-size: 13px;
}

/* Author bio card — appears at the bottom of every blog post above
   "All articles". Surfaces E-E-A-T (who wrote this, what authority).
   Pulls from authors.json so updating it updates every post. */
.author-bio-card {
  display: flex;
  gap: 18px;
  margin: 56px 0 32px;
  padding: 22px 24px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  border-left: 4px solid var(--brand-red);
}
@media (max-width: 600px) {
  .author-bio-card { flex-direction: column; padding: 18px 18px; gap: 14px; }
}
/* .prose .author-bio-photo (0,2,0) beats the global `.prose img` rule (0,1,1),
   which otherwise blows this avatar up to the image's natural ~400px and adds
   max-height:480px / margin:32px / object-fit:contain. Clear those so the
   bio avatar stays a small, fixed circle. */
.prose .author-bio-photo,
.author-bio-photo {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--line);
}
.author-bio-text {
  min-width: 0;
}
.author-bio-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 6px;
}
.author-bio-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.author-bio-name a {
  color: var(--ink);
  text-decoration: none;
}
.author-bio-name a:hover {
  color: var(--brand-red);
}
.author-bio-title {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 3px 0 10px;
}
.author-bio-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* These about-page blocks are <section> elements, so they pick up the global
   `section { padding-block: clamp(48px,8vw,96px) }` rule — which stacks a big
   gap on top of the article wrapper. They use margins (set below) for spacing
   instead, so cancel the inherited section padding. (.about-cta keeps its own
   padding — it's a filled card.) */
.about-story,
.about-pillars,
.about-locations { padding-block: 0; }

/* About page — company-story narrative at the top, beside the ISA photo.
   Two columns on desktop (text + image), stacked on mobile. Fills the full
   content width so the text doesn't strand on the left. */
.about-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0 0 24px;
  align-items: center;
}
@media (min-width: 880px) {
  .about-story {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
  }
}
.about-story-text { min-width: 0; }
.about-story-text p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.about-story-text p:first-of-type {
  font-size: 17.5px;
  color: var(--ink);
}
.about-story-text p:last-child { margin-bottom: 0; }
.about-story-media {
  margin: 0;
}
.about-story-media img {
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  display: block;
}
/* Portrait flyer variant — show the whole poster (not a cropped strip),
   capped to a sensible height. Clickable to enlarge via the page lightbox. */
.about-story-flyer img {
  object-fit: contain;
  max-height: 600px;
  height: auto;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  background: #0a0a0a;
  box-shadow: 0 6px 22px rgba(16, 16, 16, 0.14);
  cursor: zoom-in;
}
.about-story-media figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-3, var(--ink-2));
  text-align: center;
}
.about-story-media figcaption a {
  color: var(--brand-red);
  font-weight: 600;
}

/* About page — lead paragraph above the team grid. Larger, slightly muted. */
.about-lead {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  margin: 8px 0 22px;
}

/* Team grid — 2 columns on desktop, 1 on mobile.
   Each card: square photo on left, bio + contact on right. */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0 0 24px;
}
@media (min-width: 880px) {
  .team-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}

.team-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-red);
  border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgba(16, 16, 16, 0.04);
}
@media (min-width: 540px) {
  .team-card {
    grid-template-columns: 200px 1fr;
    gap: 18px;
    padding: 20px;
  }
}
.team-card-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-soft);
  display: block;
}
@media (max-width: 539px) {
  .team-card-photo { max-width: 200px; }
}
.team-card-body { min-width: 0; }
.team-card-name {
  margin: 0 0 4px;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
}
.team-card-creds {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0;
}
.team-card-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-red);
}
.team-card-location {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink-2);
}
.team-card-loc-detail { color: var(--ink-3, var(--ink-2)); }
.team-card-bio {
  margin: 8px 0 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.team-card-contact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--bg-soft);
  border-radius: 6px;
  font-size: 13.5px;
}
.team-card-contact dt {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.team-card-contact dd {
  margin: 0;
  color: var(--ink-2);
}
.team-card-contact a {
  color: var(--brand-red);
  font-weight: 600;
  text-decoration: none;
}
.team-card-contact a:hover { text-decoration: underline; }
.team-card-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-3, var(--ink-2));
}

/* About page — bottom sections (below team grid) */
.about-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line) 20%, var(--line) 80%, transparent);
  margin: 14px 0 22px;
}
.about-company {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 28px;
}
.about-section-title {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 12px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.about-section-subtitle {
  font-size: clamp(18px, 2.2vw, 22px);
  margin: 0 0 16px;
  color: var(--ink);
  text-align: center;
}
.about-company-lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 10px;
}
.about-company-body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

/* "What sets us apart" — 4 icon cards in a 2x2 (1col mobile) */
.about-pillars { margin: 0 0 28px; }
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .pillars-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.pillar {
  padding: 22px 22px 20px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  transition: transform 0.15s, box-shadow 0.15s;
}
.pillar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 16, 16, 0.06);
}
.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand-red);
  color: #fff;
  margin-bottom: 14px;
}
.pillar h4 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
}
.pillar p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Locations — 3-up strip on desktop, stacks on mobile */
.about-locations { margin: 0 0 28px; }
.locations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .locations-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
.location {
  text-align: center;
  padding: 22px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.location-flag {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 8px;
}
.location-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.location-detail {
  font-size: 13.5px;
  color: var(--ink-2);
}

/* CTA strip at bottom of about page */
.about-cta {
  text-align: center;
  padding: 26px 28px 24px;
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-soft-2, #eef0f3) 100%);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.about-cta h3 {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--ink);
}
.about-cta p {
  margin: 0 auto 14px;
  font-size: 15px;
  color: var(--ink-2);
  max-width: 560px;
}
.about-cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Announcement / trade-show popup — hidden until JS adds .is-open.
   Centered card over a dimmed backdrop; auto-expires via JS. */
.announce-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.announce-modal.is-open { display: flex; }
.announce-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 16, 0.62);
  backdrop-filter: blur(2px);
  animation: announce-fade 0.2s ease;
}
.announce-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  border-top: 5px solid var(--brand-red);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 28px 28px 24px;
  animation: announce-pop 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes announce-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes announce-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.announce-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-3, var(--ink-2));
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.announce-close:hover { background: var(--bg-soft); color: var(--ink); }
.announce-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 6px;
}
.announce-title {
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 8px;
  padding-right: 24px;
}
.announce-intro {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.announce-events {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}
.announce-event {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border-radius: 10px;
  border-left: 3px solid var(--brand-red);
}
.announce-event-date {
  flex: 0 0 auto;
  color: var(--brand-red);
  margin-top: 1px;
}
.announce-event-info { min-width: 0; }
.announce-event-name {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.announce-event-meta {
  font-size: 13px;
  color: var(--ink-2);
  margin: 3px 0 4px;
}
.announce-event-booth {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-red);
  background: var(--brand-red-soft, rgba(166, 31, 46, 0.08));
  padding: 2px 8px;
  border-radius: 5px;
}
.announce-foot {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 460px) {
  .announce-card { padding: 24px 20px 20px; }
  .announce-title { font-size: 20px; }
  .announce-foot .btn { flex: 1 1 auto; }
}

/* Sidebar */
.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
@media (min-width: 980px) {
  .article-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
    padding-right: 4px;
  }
}
.sidebar-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 22px;
}
.sidebar-card h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-red);
}
.sidebar-card p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 14px;
}
.sidebar-card .btn { width: 100%; justify-content: center; }
.sidebar-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
}
.sidebar-card ul li { margin: 0; }
.sidebar-card ul a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.sidebar-card ul a:hover { color: var(--brand-red); }
.sidebar-card .muted {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 12px;
  margin-bottom: 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  line-height: 1.5;
}
.sidebar-cta {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  border-color: #1a1a1a;
}
.sidebar-cta h3 {
  color: #fff;
  border-bottom-color: var(--brand-red);
  font-size: 18px;
  text-transform: none;
  letter-spacing: -0.005em;
  padding-bottom: 14px;
}
.sidebar-cta p { color: rgba(255, 255, 255, 0.78); }
.sidebar-cta .eyebrow { margin-bottom: 8px; }

/* Category-products section — sits between hero and detailed content */
.category-products {
  padding-block: clamp(48px, 6vw, 72px);
}
.category-products .eyebrow { color: var(--brand-red); }

/* Cards */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
}
.card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-soft);
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-body { padding: 20px; }
.card-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ink);
}
.card-desc { font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }
.card-meta { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.card-link { color: var(--brand-red); font-weight: 600; font-size: 14px; }

/* Pull-quote — for highlighting a memorable line inside an article. Centered,
   large, burgundy left rule. */
.prose .pull-quote {
  border-left: 4px solid var(--brand-red);
  margin: 40px 0;
  padding: 8px 28px;
  font-size: 24px;
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(90deg, #fff7f8 0%, #fff 100%);
}

/* Author bio card — sits at the bottom of a long-form article. Avatar (or
   initials), name + credentials, short bio, contact links. */
.prose .author-bio {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  margin: 40px 0;
}
@media (max-width: 600px) {
  .prose .author-bio { grid-template-columns: 64px 1fr; gap: 16px; padding: 20px; }
}
.prose .author-bio-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
@media (max-width: 600px) {
  .prose .author-bio-avatar { width: 64px; height: 64px; font-size: 22px; }
}
.prose .author-bio-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.prose .author-bio-credentials {
  font-size: 13px;
  color: var(--brand-red);
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.prose .author-bio-text p {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.prose .author-bio-contact {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
}

/* Products mentioned — 3-up grid of product cards inside an article. */
.prose .products-mentioned {
  display: grid;
  gap: 20px;
  margin: 24px 0 40px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px) { .prose .products-mentioned { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .prose .products-mentioned { grid-template-columns: 1fr; } }
.prose .products-mentioned .card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.prose .products-mentioned .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-red);
}
.prose .products-mentioned .card-img { aspect-ratio: 4 / 3; background: var(--bg-soft); }
.prose .products-mentioned .card-img img {
  width: 100%; height: 100%; object-fit: cover;
  max-height: none;
  margin: 0;
  border-radius: 0;
  border: 0;
  background: var(--bg-soft);
}
.prose .products-mentioned .card-body { padding: 16px 18px; }
.prose .products-mentioned .card-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.prose .products-mentioned .card-desc { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-bottom: 10px; }
.prose .products-mentioned .card-link { color: var(--brand-red); font-weight: 600; font-size: 13px; }

/* Inline CTA — burgundy two-up callout to drop into the middle/end of a long
   article. Stronger than the global footer CTA because it's article-aware. */
.prose .inline-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark, #8a1a26) 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 32px 40px;
  margin: 48px 0;
}
@media (max-width: 720px) {
  .prose .inline-cta { grid-template-columns: 1fr; gap: 20px; padding: 24px; text-align: center; }
}
.prose .inline-cta h2 {
  font-size: 24px;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.3;
}
.prose .inline-cta p {
  font-size: 15px;
  margin: 0;
  color: rgba(255,255,255,0.9);
  line-height: 1.5;
}
.prose .inline-cta .btn {
  background: #fff;
  color: var(--brand-red);
  font-weight: 700;
  white-space: nowrap;
}
.prose .inline-cta a.btn,
.prose .inline-cta a.btn:hover { color: var(--brand-red); }

/* Post closing block — used at the bottom of long-form articles to repeat
   the article title in a centered, larger format. Mirrors the original
   Duda site's "title repeated at the end" pattern. */
.prose .post-closing {
  margin: 48px 0 24px;
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.prose .post-closing h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}
.prose .post-closing h4 {
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-2);
  font-style: italic;
  margin: 0;
}

/* Grids */
.grid {
  display: grid;
  gap: 20px;
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Category cards (homepage) */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.cat-card {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  overflow: hidden;
  transition: all 0.2s ease;
}
.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-blue);
}
.cat-card-img {
  background: #fff;
  padding: 2mm;
}
.cat-card-img img { width: 100%; height: auto; display: block; }
.cat-card-body { padding: 24px; }
.cat-card-name { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.cat-card-desc { font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }
.cat-card-link { color: var(--brand-red); font-weight: 600; font-size: 14px; }

/* Product spotlight layout — magazine-style hero matching the original site */
.product-title-block {
  text-align: center;
  margin: 24px auto 40px;
  max-width: 920px;
}
.product-title-block .eyebrow {
  margin-bottom: 14px;
  justify-content: center;
}
.product-title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 auto 12px;
}
.product-subtitle {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 700;
  margin: 0 auto 18px;
  max-width: 720px;
}
.title-rule {
  display: inline-block;
  width: 80px;
  height: 3px;
  background: var(--brand-red);
  border-radius: 2px;
}

/* Spotlight: red callout (left) + product image (right). */
.product-spotlight {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 56px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 880px) {
  .product-spotlight {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: stretch;
  }
}
.spotlight-callout {
  background: var(--brand-red);
  color: #fff;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.spotlight-callout .callout-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
  color: #fff;
}
.spotlight-callout .callout-desc {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 20px;
  color: rgba(255,255,255,0.95);
}
.spotlight-callout .callout-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.spotlight-callout .callout-bullets li {
  font-size: 16px;
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
  color: rgba(255,255,255,0.95);
}
.spotlight-callout .callout-bullets li::before {
  content: "•";
  position: absolute;
  left: 6px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}

.spotlight-image {
  background: #f6f7f9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  min-height: 320px;
  position: relative;
}
.spotlight-image > img {
  max-width: 100%;
  max-height: 480px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Featured video in the spotlight area — replaces the image carousel when
   `heroVideo` is set in the page frontmatter. Black bg, no extra padding. */
.spotlight-image-video {
  background: #000;
  padding: 0;
}
.spotlight-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.spotlight-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Carousel — minimal vanilla JS slideshow with fade transition + dot/arrow nav. */
/* Spotlight gallery grid — replaces the previous auto-rotating carousel.
   All thumbnails visible at once; click any to open in the lightbox.
   Layout: 1 col for solo images, 2-col grid for 2+ images. Mobile: 2 cols. */
.spotlight-grid {
  display: grid;
  gap: 10px;
  width: 100%;
}
.spotlight-grid-1 { grid-template-columns: 1fr; }
.spotlight-grid-2,
.spotlight-grid-3,
.spotlight-grid-4 { grid-template-columns: repeat(2, 1fr); }
.spotlight-grid .lightbox-trigger {
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: zoom-in;
  transition: box-shadow 0.18s, transform 0.18s;
  display: block;
}
.spotlight-grid .lightbox-trigger > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.spotlight-grid-1 .lightbox-trigger > img { aspect-ratio: auto; }
.spotlight-grid .lightbox-trigger:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

/* Lightbox — native <dialog> for click-to-enlarge from any .lightbox-trigger.
   Closes on backdrop click, ESC, or × button. */
.img-lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 96vh;
  margin: auto;
  position: fixed;
  inset: 0;
}
.img-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}
.img-lightbox img {
  max-width: 96vw;
  max-height: 96vh;
  display: block;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.img-lightbox-close {
  position: absolute;
  top: -42px;
  right: 0;
  width: 36px;
  height: 36px;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}
.img-lightbox-close:hover { background: rgba(255,255,255,0.25); }

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 380px;
}
.carousel-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.carousel-slide img {
  max-width: 100%;
  max-height: 480px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Dots */
.carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.carousel-dot:hover { background: rgba(0, 0, 0, 0.45); }
.carousel-dot.is-active {
  background: var(--brand-red);
  transform: scale(1.15);
}

/* Arrows */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.spotlight-image:hover .carousel-arrow,
.carousel-arrow:focus-visible {
  opacity: 1;
}
.carousel-arrow:hover { background: #fff; }
.carousel-arrow-prev { left: 12px; }
.carousel-arrow-next { right: 12px; }

.product-specs-block {
  margin: 0 auto 48px;
  max-width: 920px;
}
.product-specs-block .spec-table { margin-top: 0; }

/* Download button inside the burgundy spotlight callout — prominent CTA. */
.spotlight-callout .callout-downloads {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--brand-red);
  padding: 11px 18px;
  border-radius: var(--r-md);
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 0;
  white-space: nowrap;
  align-self: flex-start;
}
.btn-download:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  color: var(--brand-red);
}
.btn-download svg { flex-shrink: 0; }

/* Inline image rows — for `<div class="img-row img-row-3">` in markdown bodies.
   Renders 2 or 3 images side by side with optional figcaption underneath. */
.prose .img-row {
  display: grid;
  gap: 16px;
  margin: 32px 0;
}
.prose .img-row-2 { grid-template-columns: repeat(2, 1fr); }
.prose .img-row-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .prose .img-row-2,
  .prose .img-row-3 { grid-template-columns: 1fr; }
}
.prose .img-row figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.prose .img-row img {
  margin: 0;
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.prose .img-row figcaption {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 10px;
  line-height: 1.45;
  font-style: italic;
}

/* Spec-sheet row — for full-page brochure scans where the user needs to read
   every line. Shows the full image at native aspect ratio (no cropping) and
   uses a wider max-height so type stays legible. */
.prose .spec-sheet-row {
  display: grid;
  gap: 24px;
  margin: 32px 0;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 720px) {
  .prose .spec-sheet-row { grid-template-columns: 1fr; }
}
.prose .spec-sheet-row figure { margin: 0; }
.prose .spec-sheet-row img {
  margin: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #fff;
}
.prose .spec-sheet-row figcaption {
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 10px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Component grid — image + heading + bullet list, used to showcase machine
   parts (motors, rails, laser source, etc.) each with a detailed description.
   Matches the original's visual rhythm of "photo + name + key specs". */
.prose .component-grid {
  display: grid;
  gap: 28px;
  margin: 32px 0 40px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) {
  .prose .component-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .prose .component-grid { grid-template-columns: 1fr; }
}
.prose .component-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.prose .component-card-img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  margin: 0 0 16px;
  padding: 8px;
}
.prose .component-card h3,
.prose .component-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-red);
  margin: 0 0 10px;
  line-height: 1.3;
}
.prose .component-card ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.prose .component-card ul li {
  margin: 4px 0;
}
.prose .component-card ul li::marker {
  color: var(--brand-red);
}

/* Brochure pages — for multi-page brochure scans. Sits inside the normal
   prose column. Each image is displayed at full prose width with no height
   cap so the text inside the brochure is readable. */
.prose .brochure-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 32px 0 48px;
}
.prose .brochure-stack figure {
  margin: 0;
}
.prose .brochure-stack img {
  display: block;
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  /* Override the global .prose img cap (max-height: 480px) so brochure pages
     render at their natural aspect ratio (tall portrait, no cropping). */
  max-height: none;
  object-fit: fill;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
}
.prose .brochure-stack figcaption {
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 10px;
  font-style: italic;
  text-align: center;
}

/* Logo feature — small standalone logo display (e.g. for software/brand logos
   inside a description). Sized down so it doesn't dominate like a hero image. */
.prose .logo-feature {
  margin: 16px 0 24px;
  text-align: left;
}
.prose .logo-feature img {
  margin: 0;
  max-width: 280px;
  width: 100%;
  height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Color swatches — small inline color chips for showing available stock colors
   (e.g. trim colors: white, black, red). */
.prose .color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 20px 0 24px;
  align-items: center;
}
.prose .color-swatch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.prose .color-swatch::before {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--swatch-color);
  border: 2px solid var(--line);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Warranty callout — small burgundy-bordered card for highlighting warranty
   terms or other key trust signals inline with body copy. */
.prose .warranty-callout {
  background: linear-gradient(135deg, #fff7f8 0%, #fff 100%);
  border-left: 4px solid var(--brand-red);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin: 28px 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.prose .warranty-callout .warranty-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-red);
  margin-bottom: 6px;
}
.prose .warranty-callout strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  display: block;
  line-height: 1.2;
}
.prose .warranty-callout p {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Table scroll wrapper — for very wide tables (11+ columns) so they scroll
   horizontally on narrow viewports rather than crushing the cells. */
.prose .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.prose .table-scroll table {
  margin: 0;
  border: 0;
  border-radius: 0;
  min-width: 800px;
  font-size: 13px;
}
.prose .table-scroll th,
.prose .table-scroll td {
  padding: 8px 10px;
  white-space: nowrap;
}

/* Video grid — multiple iframe embeds in a row. */
.prose .video-grid {
  display: grid;
  gap: 20px;
  margin: 32px 0;
}
.prose .video-grid-2 { grid-template-columns: repeat(2, 1fr); }
.prose .video-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) {
  .prose .video-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .prose .video-grid-2,
  .prose .video-grid-3 { grid-template-columns: 1fr; }
}
.prose .video-grid figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.prose .video-grid .video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #000;
  margin: 0;
}
.prose .video-grid .video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.prose .video-grid figcaption {
  font-size: 14px;
  color: var(--ink);
  margin-top: 12px;
  font-weight: 600;
  text-align: center;
}

/* Benefit cards — 2-column grid of bordered cards with title + short description.
   Use under "Key benefits" / "Why us" sections. */
.prose .benefit-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 32px 0;
}
@media (max-width: 720px) {
  .prose .benefit-cards { grid-template-columns: 1fr; }
}
.prose .benefit-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prose .benefit-card h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}
.prose .benefit-card p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* Split callout — burgundy text block on the left + image (or other media) on the right. */
.prose .split-callout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 32px 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
@media (min-width: 880px) {
  .prose .split-callout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
  }
}
.prose .split-callout-text {
  background: var(--brand-red);
  color: #fff;
  padding: 36px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.prose .split-callout-text p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.95);
}
.prose .split-callout-text p:last-child { margin-bottom: 0; }
.prose .split-callout-text ul {
  margin: 6px 0 18px;
  padding-left: 0;
  list-style: none;
}
.prose .split-callout-text ul li {
  font-size: 15px;
  line-height: 1.55;
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.95);
}
.prose .split-callout-text ul li::before {
  content: "•";
  position: absolute;
  left: 6px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.prose .split-callout-text strong {
  color: #fff;
  font-weight: 700;
}
.prose .split-callout-image {
  margin: 0;
  background: #f6f7f9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 280px;
}
.prose .split-callout-image img {
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Split image+text — text body on left, image on right (or stacked on mobile).
   Used in body content where a section needs a contextual image alongside copy
   (e.g. "Why choose us", "Features of X"). Less heavy than .split-callout. */
.prose .split-image-text {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin: 32px 0;
  align-items: center;
}
@media (min-width: 880px) {
  .prose .split-image-text {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px;
  }
  /* Image-on-right by default; flip helper if needed */
  .prose .split-image-text.image-left .split-image-text-body { order: 2; }
  .prose .split-image-text.image-left .split-image-text-image { order: 1; }
}
.prose .split-image-text-body p {
  margin: 0 0 14px;
}
.prose .split-image-text-body p:last-child { margin-bottom: 0; }
.prose .split-image-text-body h3 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 18px;
  margin-bottom: 10px;
  color: var(--ink);
}
.prose .split-image-text-body ul {
  margin: 6px 0 14px;
  padding-left: 22px;
}
.prose .split-image-text-image {
  margin: 0;
}
.prose .split-image-text-image img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  margin: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

/* Three-column overview — 2 lists + 1 product image, used at the top of long
   product pages to give a "scannable summary" before the long copy. */
.prose .three-col-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin: 40px 0;
  align-items: start;
}
@media (min-width: 880px) {
  .prose .three-col-overview {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 36px;
  }
  /* Image vertically centers within the row even though everything else top-aligns. */
  .prose .three-col-overview-image {
    align-self: center;
  }
}
.prose .three-col-overview-col h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--ink);
}
/* Override prose's default red-dash bullet inside this overview — use small grey dots */
.prose .three-col-overview-col ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.prose .three-col-overview-col ul li {
  position: relative;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 6px;
  padding-left: 16px;
}
.prose .three-col-overview-col ul li::before {
  content: "·";
  position: absolute;
  left: 4px;
  top: 0;
  width: auto;
  height: auto;
  background: transparent;
  color: var(--brand-red);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}
.prose .three-col-overview-image {
  margin: 0;
}
.prose .three-col-overview-image img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  margin: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

/* Spec table with row-grouped first column ("Acrylic" spans 8 rows, etc.) */
.prose .spec-table-grouped thead th {
  background: var(--brand-red);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  text-align: center;
  border-bottom: 0;
  width: auto;
}
.prose .spec-table-grouped tbody td,
.prose .spec-table-grouped tbody th {
  text-align: center;
}
.prose .spec-table-grouped th.rowgroup {
  background: #f8f9fb;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  vertical-align: middle;
  border-right: 2px solid var(--line);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  width: auto;
  padding-left: 14px;
  padding-right: 14px;
  line-height: 1.35;
}

/* Bending-machine comparison table — large green checkmarks and red X's
   for at-a-glance scanning. Per Dov: text needs to be much easier to scan
   than the original YES/— text. */
.prose .spec-table-grouped tbody td:first-child {
  font-weight: 600;
  color: #000;
  text-align: left;
  font-size: 14.5px;
}
.prose .spec-table-grouped thead th {
  font-size: 16px;
  font-weight: 800;
}
.prose .cell-yes,
.prose .cell-no {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.prose .cell-yes { color: #2b8a3e; }   /* green */
.prose .cell-no  { color: #c92a2a; }   /* red */

/* Featured image — standalone large figure with caption, used for hero/spotlight
   moments inside body content (e.g. sample-output gallery image after specs). */
.prose .featured-image {
  margin: 40px auto;
  max-width: 100%;
  text-align: center;
}
.prose .featured-image img {
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.prose .featured-image figcaption {
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 12px;
  font-style: italic;
}

/* Featured-image XL — for charts and reference tables that need to be read.
   Sits at full prose-column width (matching brochure-stack), with no height
   cap so dense reference charts render at their natural aspect ratio. */
.prose .featured-image.featured-image-xl {
  margin: 32px 0 48px;
  max-width: 100%;
}
.prose .featured-image.featured-image-xl img {
  display: block;
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: fill;
  background: #fff;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* Product showcase — image + heading + description + CTA button.
   Used for "related/lineup products" sections where each item has a clear
   Learn More CTA, matching the original's product-card pattern. */
.prose .product-showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 32px 0;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  align-items: center;
}
@media (min-width: 720px) {
  .prose .product-showcase {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 36px;
  }
}
.prose .product-showcase-image {
  margin: 0;
}
.prose .product-showcase-image img {
  margin: 0;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  padding: 12px;
}
.prose .product-showcase-text h3 {
  margin: 0 0 6px;
  font-size: 24px;
  color: var(--ink);
  font-weight: 700;
}
.prose .product-showcase-text .product-showcase-tag {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-red);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
}
.prose .product-showcase-text p {
  margin: 0 0 14px;
  color: var(--ink-2);
  line-height: 1.6;
}
.prose .product-showcase-text ul {
  margin: 0 0 18px;
  padding-left: 20px;
  color: var(--ink-2);
}
.prose .product-showcase-text ul li { margin: 4px 0; }
.prose .product-showcase-text .btn {
  margin-top: 8px;
  align-self: flex-start;
}

/* Video stack — single column, full prose width. Use when videos need to be
   large enough that YouTube/Vimeo native controls (incl. fullscreen) are usable. */
.prose .video-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 32px 0;
}
.prose .video-stack figure { margin: 0; }
.prose .video-stack .video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #000;
  margin: 0;
}
.prose .video-stack .video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.prose .video-stack figcaption {
  font-size: 15px;
  color: var(--ink);
  margin-top: 12px;
  font-weight: 600;
  text-align: center;
}

/* Fallback for product pages without a highlight callout */
.product-image-only {
  max-width: 920px;
  margin: 0 auto 48px;
  text-align: center;
}
.product-image-only .lede {
  font-size: 19px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 auto 32px;
  max-width: 720px;
  text-align: center;
}
.spotlight-image-wide {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}

/* Full-width hero banner — for products whose lead image is a wide
   horizontal shot. Sits between the title block and the spotlight. */
.product-hero-banner {
  margin: 0 0 40px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.product-hero-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  object-position: center;
}
.product-hero-banner figcaption {
  font-size: 14px;
  color: var(--ink-2);
  padding: 12px 16px;
  text-align: center;
  font-style: italic;
  border-top: 1px solid var(--line);
}

/* Spec table */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.spec-table th, .spec-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
/* Fiber spec HTML tables */
/* These tables are wider than the standard 1200px container. Let the whole
   section break out to a wider centered band so all the (unmodified) tables
   get the room they need — no slider on desktop. Capped to the viewport width
   so it never causes page-level horizontal scroll; on narrow laptops each
   table's .table-scroll still provides a contained fallback scroll. */
.fiber-spec-tables {
  width: min(1320px, 100vw - 40px);
  margin-left: 50%;
  transform: translateX(-50%);
}
.fiber-spec-tables h4 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 28px 0 6px; border-bottom: 2px solid var(--brand-blue); padding-bottom: 4px; }
.fiber-spec-tables h5 { font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 18px 0 4px; }
.fiber-spec-table tr.fiber-green { background: #c6efce; }
.fiber-spec-table tr.fiber-yellow { background: #ffeb9c; }
.fiber-spec-table tr.fiber-red { background: #ffc7ce; }
.fiber-color-legend { margin-top: 12px; font-size: 13px; }
.fiber-legend-green { color: #375623; }
.fiber-legend-yellow { color: #7d6608; }
.fiber-legend-red { color: #9c0006; }

/* Fiber spec chart — published as the source PDF pages (image), stacked.
   Clickable to enlarge via the page lightbox; full PDF linked above. */
.fiber-spec-charts {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 100%;
  margin: 6px 0 24px;
}
/* Higher specificity (.prose .fiber-spec-charts img) is REQUIRED to beat the
   global `.prose img` rule, which otherwise clamps these tall charts to
   max-height:480px (→ ~340px wide) and centers them with margin:auto.
   Explicitly clear max-height + width:auto + margin so they go full width. */
.prose .fiber-spec-charts img,
.fiber-spec-charts img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  object-fit: fill;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(16, 16, 16, 0.06);
  background: transparent;
  cursor: zoom-in;
}
.spec-note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 4px 0 14px;
  max-width: 760px;
}
.spec-note a { color: var(--brand-red); font-weight: 600; }

/* Multi-model comparison tables (refrigeration welder spec sheet) — tighter
   padding + smaller font so 4-column tables fit on typical desktop widths
   without horizontal scroll. */
.spec-table-grouped th,
.spec-table-grouped td {
  padding: 9px 10px;
  font-size: 14px;
}
.spec-table-grouped tbody td {
  white-space: nowrap;  /* short cells like "46 kg (101 lb)" stay single-line */
}
/* Fixed column widths — required when rows mix colspan with single-column
   cells. Without this, columns drift and values stop lining up under their
   model headers. The <colgroup> on the table sets the percentages. */
.spec-table-fixed {
  table-layout: fixed;
}
.spec-table-fixed tbody td {
  white-space: normal;  /* allow wrapping inside fixed columns */
  word-break: break-word;
}
/* Override .table-scroll's defaults for fixed-layout spec tables: the
   800px min-width and nowrap rules force horizontal scroll even when the
   table would naturally fit. Fixed tables don't need either. */
.prose .table-scroll table.spec-table-fixed {
  min-width: 0;
  font-size: 14px;
}
.prose .table-scroll table.spec-table-fixed th,
.prose .table-scroll table.spec-table-fixed td {
  white-space: normal;
  padding: 9px 10px;
  word-break: break-word;
}
.spec-table th {
  background: var(--bg-soft);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  width: 40%;
}
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* FAQ */
.faq {
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding-right: 32px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--brand-blue);
  transition: transform 0.2s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--brand-red); }
.faq-item .answer { padding-bottom: 20px; color: var(--ink-2); font-size: 16px; line-height: 1.65; }

/* Blog index — card list */
.blog-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.blog-list-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.blog-list-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
}
@media (min-width: 720px) {
  .blog-list-card {
    grid-template-columns: 280px 1fr;
    gap: 0;
  }
}
.blog-list-img {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  overflow: hidden;
}
.blog-list-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-list-card:hover .blog-list-img img {
  transform: scale(1.04);
}
.blog-list-body {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-list-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-red);
  margin-bottom: 10px;
}
.blog-list-title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.blog-list-title a {
  color: var(--ink);
  text-decoration: none;
}
.blog-list-card:hover .blog-list-title a { color: var(--brand-red); }
.blog-list-meta {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.blog-list-desc {
  font-size: 15px;
  color: var(--ink-2);
  margin: 0 0 16px;
  line-height: 1.55;
}
.blog-list-more {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-red);
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
}
.blog-list-more:hover { color: var(--brand-red-dark); }

/* Article body (blog posts and content pages) */
.prose {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-2);
  /* Prevent unbreakable strings (long URLs, hashed filenames) from forcing
     the page wider than the viewport on mobile. `anywhere` allows breaking
     mid-string only when the word wouldn't otherwise fit. */
  overflow-wrap: anywhere;
  min-width: 0;
}
/* URLs in body copy can still be very long even with overflow-wrap;
   word-break:break-word forces them to wrap at any character if needed. */
.prose a { word-break: break-word; }
.prose > * + * { margin-top: 18px; }

.prose h1 {
  margin: 0 0 24px;
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  line-height: 1.18;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.prose h2 {
  margin: 56px 0 20px;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  color: var(--ink);
  line-height: 1.25;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--brand-red);
  display: inline-block;
  max-width: 100%;
}
.prose h3 {
  margin: 40px 0 14px;
  font-size: 1.375rem;
  color: var(--ink);
  line-height: 1.3;
}
.prose h4 {
  margin: 32px 0 10px;
  color: var(--ink);
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.prose p { margin-bottom: 0; }
.prose p + p { margin-top: 18px; }

/* "Label: body" — first-line bold pattern: highlight the bolded label in red and break it onto its own visual line */
.prose p > strong:first-child {
  display: block;
  color: var(--brand-red);
  font-size: 0.875em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 4px;
}

.prose ul, .prose ol {
  margin: 0 0 0 4px;
  padding-left: 24px;
  list-style-position: outside;
}
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 14px;
  height: 2px;
  background: var(--brand-red);
}
.prose ol > li { margin-bottom: 12px; padding-left: 6px; }
.prose ol { padding-left: 28px; }
.prose ol > li::marker { color: var(--brand-red); font-weight: 700; }

.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }

.prose img {
  margin: 32px auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  display: block;
  max-width: 100%;
  max-height: 480px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Stainless steel finish chart — a 4x3 grid of swatches, so it needs more
   vertical room than the global .prose img cap (480px) allows to stay
   legible. Sized up, not full-bleed. */
.prose img.finish-chart-img {
  max-width: 640px;
  max-height: none;
  background: var(--bg-soft);
  box-shadow: 0 4px 16px rgba(16, 16, 16, 0.06);
}

/* Two consecutive images in prose render side-by-side as a 2-up gallery */
.prose p:has(> img + img) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0;
}
.prose p:has(> img + img) img {
  margin: 0;
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.prose a {
  color: var(--brand-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
}
.prose a:hover { color: var(--brand-red-dark); }

/* Button anchors inside prose — keep .btn styling (white text on burgundy
   for primary, etc.) instead of inheriting the prose-link burgundy underline. */
.prose a.btn {
  text-decoration: none;
  font-weight: 600;
}
.prose a.btn-primary,
.prose a.btn-primary:hover { color: #fff; }
.prose a.btn-secondary,
.prose a.btn-secondary:hover { color: #fff; }
.prose a.btn-outline { color: var(--ink); }
.prose a.btn-outline:hover { color: var(--ink); }

.prose blockquote {
  border-left: 4px solid var(--brand-blue);
  padding: 12px 0 12px 24px;
  margin: 32px 0;
  font-style: italic;
  color: var(--ink-2);
  background: var(--bg-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 1.125rem;
}

.prose code {
  font-family: var(--font-mono);
  background: var(--bg-soft-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--navy);
}

.prose hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 48px 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.prose th, .prose td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.prose th {
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--ink);
}
.prose tr:last-child td { border-bottom: 0; }

/* Breadcrumbs */
.breadcrumbs {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.breadcrumbs a { color: var(--ink-3); }
.breadcrumbs a:hover { color: var(--brand-red); }
.breadcrumbs .sep { margin: 0 8px; color: var(--line-2); }

/* Contact block (Let's talk) — appears at the bottom of every page */
/* CTA banner — burgundy strip above the footer with a single sentence + button.
   Replaces the older multi-column contact-block. */
.cta-banner {
  background: var(--brand-red);
  color: #fff;
  padding-block: clamp(40px, 5vw, 64px);
}
.cta-banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-banner-title {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: #fff;
  max-width: 760px;
}
.btn-on-burgundy {
  background: #fff;
  color: var(--brand-red);
  padding: 16px 32px;
  border-radius: var(--r-md);
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-on-burgundy:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  color: var(--brand-red);
}

/* Legacy multi-column contact-block (still used by some non-product pages — keep). */
.contact-block {
  background: var(--bg-soft);
  padding-block: clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.contact-block-head {
  text-align: center;
  margin-bottom: 48px;
}
.contact-block-head h2 {
  font-size: clamp(2rem, 3.5vw, 2.625rem);
  margin-bottom: 12px;
}
.contact-block-head p {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 480px;
  margin: 0 auto 24px;
}
.contact-block-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 720px) {
  .contact-block-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.contact-block-col h3 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-red);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--brand-red);
}
.contact-block-sub {
  font-size: 15px;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.7;
}
.contact-list li { margin-bottom: 6px; }
.contact-list strong { color: var(--ink); margin-right: 4px; }
.contact-list a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.contact-list a:hover { color: var(--brand-red); }
.social-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.social-list a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.social-list a:hover {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  text-decoration: none;
}

/* Footer */
.site-footer {
  background: var(--ink);
  color: #e5edf5;
  padding-top: 64px;
  padding-bottom: 32px;
  margin-top: 64px;
}
.site-footer .container {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 880px) {
  .site-footer .container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .site-footer .container { grid-template-columns: 1fr; }
}
.site-footer h4 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.site-footer .brand-block {
  font-size: 16px;
  color: #cdd5dd;
  line-height: 1.65;
}
.site-footer .brand-block p {
  font-size: 16px;
  color: #cdd5dd;
}
.site-footer .brand-block .brand-img {
  display: inline-block;
  margin-bottom: 20px;
}
.site-footer .brand-block .brand-img img { height: 80px; width: auto; display: block; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer ul a {
  color: #e5edf5;
  font-size: 16px;
  text-decoration: none;
  line-height: 1.5;
}
.site-footer ul a:hover { color: var(--brand-red); text-decoration: none; }
.site-footer .copyright {
  border-top: 1px solid #2a3441;
  padding-top: 24px;
  margin-top: 48px;
  font-size: 14px;
  color: #a3afbc;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer .copyright .muted { color: #7d8895; font-style: italic; }
.site-footer .footer-talk {
  font-size: 30px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 20px 0 8px;
  line-height: 1.1;
}
.site-footer .footer-contact li {
  line-height: 1.55;
  margin-bottom: 8px;
  font-size: 16px;
  color: #e5edf5;
}
.site-footer .footer-contact strong { color: #ffffff; font-weight: 600; }
.site-footer .footer-contact a { color: #ffffff; font-weight: 600; }
.site-footer .footer-contact a:hover { color: var(--brand-red); }
.site-footer .footer-contact .muted { color: #b6c0cc; font-size: 15px; }

/* Social icons — small image-style icons, matching the original site. */
.site-footer .footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.site-footer .footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #2a3441;
  color: #e5edf5;
  text-decoration: none;
  transition: all 0.15s ease;
}
.site-footer .footer-socials a svg {
  width: 18px;
  height: 18px;
  display: block;
}
.site-footer .footer-socials a:hover {
  background: var(--brand-red);
  color: #fff;
  transform: translateY(-1px);
}

/* Lightbox — fullscreen image viewer with prev/next + ESC to close */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px;
  cursor: zoom-out;
}
.lightbox.is-open {
  display: flex;
}
.lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.lightbox-caption {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  text-align: center;
  max-width: 80%;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s ease, transform 0.15s ease;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  line-height: 1;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.25);
}
.lightbox-close {
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  font-size: 32px;
}
.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  font-size: 38px;
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.05); }
@media (max-width: 600px) {
  .lightbox { padding: 20px; }
  .lightbox-prev, .lightbox-next { width: 44px; height: 44px; font-size: 28px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* Misc utilities */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 16px; }
.mt-4 { margin-top: 32px; }
.mt-6 { margin-top: 48px; }
.mb-2 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 32px; }
.mb-6 { margin-bottom: 48px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* Quote / pull-out callout */
.callout {
  background: var(--brand-blue-soft);
  border-left: 4px solid var(--brand-blue);
  padding: 20px 24px;
  border-radius: var(--r-sm);
  margin: 24px 0;
}
.callout strong { color: var(--ink); }

.callout.red {
  background: var(--brand-red-soft);
  border-left-color: var(--brand-red);
}

/* Stat block */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin: 32px 0;
}
.stat-row .stat {
  text-align: center;
  padding: 20px;
}
.stat-row .stat .num {
  font-size: 40px;
  font-weight: 700;
  color: var(--brand-blue);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-row .stat .lab {
  font-size: 14px;
  color: var(--ink-2);
}

/* Responsive video embed */
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  margin: 24px 0;
  background: #000;
}
.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Wide article layout — for pages with `noSidebar: true` frontmatter.
   The prose column spans the full container width (no floating sidebar). */
.article-layout-wide { grid-template-columns: 1fr !important; }
.article-layout-wide .prose { max-width: 100%; min-width: 0; }
/* Tight article-section padding — used on noSidebar pages so content sits
   right under the page-hero with minimal whitespace. */
.article-section.article-section-tight { padding-block: 16px 32px !important; }
.article-section.article-section-tight + .cta-banner { margin-top: 16px; }
.product-body-wide { padding-block: 16px 32px; }

/* Two-column section — image one side, text on the other. Alternates per
   section via the `.split-section-reverse` modifier. Used on the financing
   page (and anywhere else the original site uses left/right text/image). */
.prose .split-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 16px 0;
  padding: 0;
  background: transparent;
  align-items: start;
}
.prose .split-section:first-child { margin-top: 0; }
.prose .split-section + .split-section { margin-top: 8px; }
.prose .split-section + .financing-disclaimer,
.prose .financing-disclaimer + .split-section { margin-top: 8px; }

/* Catalog separator — full-width thin hairline above each split-section
   that has content before it. Applies to the first split-section in a
   catalog (separating it from the intro text) and between subsequent
   sections. Each product entry reads as its own item. */
.prose .split-section:not(:first-child)::before {
  content: "";
  display: block;
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0,
    var(--line) 18%,
    var(--line) 82%,
    transparent 100%
  );
  margin: 0 0 48px;
}
.prose .split-section + .split-section { margin-top: 48px; }
@media (min-width: 880px) {
  .prose .split-section { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.prose .split-section-reverse .split-section-image { order: 2; }
@media (max-width: 879px) {
  .prose .split-section-reverse .split-section-image { order: 0; }
}
.prose .split-section-image {
  margin: 0;
}
.prose .split-section-image img {
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--r-md);
  display: block;
  background: #fff;
  max-height: none;
  object-fit: contain;
  /* Disable any hover transforms or animations on catalog images. */
  transition: none;
}
.prose .split-section-image img:hover { transform: none; }

/* Smaller variant — for portrait/small images that shouldn't fill the
   whole half-column. Caps the image at ~280px and centers it. */
.prose .split-section-image.split-section-image-small img {
  max-width: 280px;
  margin: 0 auto;
}

/* Inline CTA row of buttons inside a paragraph (for split-section text). */
.prose p.cta-row-line {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* Materials grid — 3-up cards with image on top, burgundy title centered
   below, optional description and bullet list. Used on the materials page
   for STAINLESS STEEL CLIPS / PINS / ALUMINUM COILS. */
.prose .materials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin: 32px 0 40px;
}
@media (min-width: 720px) {
  .prose .materials-grid { grid-template-columns: repeat(3, 1fr); }
}
.prose .materials-card {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.prose .materials-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 0 16px;
  border-radius: var(--r-md);
  border: 0;
  background: var(--bg-soft);
  max-height: none;
}
.prose .materials-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-red);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  line-height: 1.3;
}
.prose .materials-card p {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--ink-2);
}
.prose .materials-card ul {
  list-style: disc;
  padding: 0;
  margin: 4px auto 0;
  text-align: left;
  display: inline-block;
  font-size: 14px;
  color: var(--ink-2);
}
.prose .materials-card ul li {
  padding-left: 0;
  margin-bottom: 2px;
  list-style-position: inside;
}
.prose .materials-card ul li::before { content: none; }

/* "Yellow" warn span — used on the materials page for the epoxy UV warning,
   so the word "Yellow" actually appears in yellow. */
.prose .yellow-warn {
  color: #d4a017;
  font-weight: 700;
  font-style: italic;
  text-shadow: 0 0 1px rgba(0,0,0,0.15);
}

/* FDA approved badge — small float-right image alongside intro text on
   the laser-cutter category page. Sits in the top-right of the intro block
   without taking up a full half-column. */
.prose .intro-with-badge { overflow: hidden; }
.prose .fda-badge-float {
  float: right;
  margin: 0 0 16px 24px;
  max-width: 200px;
  width: 100%;
}
.prose .fda-badge-float img {
  width: 100%;
  height: auto;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  max-height: none;
}
@media (max-width: 600px) {
  .prose .fda-badge-float {
    float: none;
    max-width: 160px;
    margin: 0 auto 16px;
    display: block;
  }
}

/* Product showcase grid — 2-column card layout for category landing pages.
   Each card is clickable, shows image + title + tagline + CTA button. */
.prose .product-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin: 28px 0 48px;
}
@media (min-width: 720px) {
  .prose .product-showcase-grid { grid-template-columns: repeat(2, 1fr); }
}
.prose .product-showcase-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none !important;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.prose .product-showcase-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-red);
}
.prose .product-showcase-card .product-showcase-img {
  width: 100%;
  margin-bottom: 20px;
}
.prose .product-showcase-card .product-showcase-img img {
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.prose .product-showcase-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.prose .product-showcase-card p {
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--ink-2);
}
.prose .product-showcase-card .btn {
  margin-top: auto;
}
.prose .split-section-text > h2,
.prose .split-section-text > h3,
.prose .split-section-text > h4 {
  margin-top: 0;
  color: var(--brand-red);
  text-transform: none;
  letter-spacing: 0;
}
.prose .split-section-text > *:last-child { margin-bottom: 0; }
/* Use plain round bullets inside split sections (override the global red dash). */
.prose .split-section-text ul { list-style: disc; padding-left: 24px; }
.prose .split-section-text ul > li {
  padding-left: 0;
  margin-bottom: 6px;
}
.prose .split-section-text ul > li::before { content: none; }
.prose .split-section-text ul > li::marker { color: var(--ink-2); }
/* Bold paragraph above bullets: keep it plain bold sentence-case (override
   the auto "label" treatment that uppercases first-child <strong>). */
.prose .split-section-text p > strong:first-child {
  display: inline;
  color: var(--ink);
  font-size: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  margin-bottom: 0;
}

/* Financing-page disclaimer paragraph — full-width plain text between sections. */
.prose .financing-disclaimer {
  margin: 24px 0;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
}
.prose .financing-disclaimer b {
  color: var(--ink);
  font-weight: 700;
}

/* Card section — soft-gray container that wraps a split-section, adding
   visual separation between sections (alternating "card on light bg"
   pattern). */
.prose .card-section {
  background: var(--bg-soft);
  border-radius: var(--r-lg);
  padding: 32px 36px;
  margin: 28px 0;
}
@media (max-width: 720px) {
  .prose .card-section { padding: 20px; }
}
.prose .card-section .split-section {
  margin: 0;
  gap: 32px;
}
.prose .card-section .split-section-text > *:last-child { margin-bottom: 0; }

/* Inline emphasized phrase — replaces <strong> in body content where the
   global ".prose p > strong:first-child" auto-label rule would otherwise
   uppercase + recolor the text. Use this for inline bold-italic phrases. */
.prose .emph-bold {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

/* Power grid — 3-up cards on the technical parameters page (Low / Medium /
   High Power). Replaces the awkward 2-column + standalone third pattern. */
.prose .power-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 24px 0;
}
@media (min-width: 720px) {
  .prose .power-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.prose .power-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px;
}
.prose .power-card h3 {
  margin: 0 0 10px;
  color: var(--brand-red);
  font-size: 19px;
}
.prose .power-card p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.55;
  font-size: 15px;
}

/* CTA line — single button on its own row, right-aligned phone callouts etc. */
.prose p.cta-line {
  margin: 24px 0 32px;
  text-align: right;
}

/* Lede paragraph — intro paragraph, slightly larger and quieter color. */
.prose .lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 32px;
}

/* Generic text-block — keeps content within prose width with consistent margins.
   Used between split-sections to host single-column body copy. */
.prose .text-block {
  margin: 24px 0;
}
.prose .text-block-center { text-align: center; }
.prose .text-block-center .btn { margin-top: 12px; }

/* Lead-bold paragraph — plain bold sentence-case (escapes the global
   first-child <strong> auto-uppercase rule). */
.prose p.lead-bold {
  font-weight: 700;
  color: var(--ink);
  margin-top: 8px;
}

/* Section 179 Qualified badge inside the bottom split-section — small inline image, not full width. */
.prose .section179-badge {
  max-width: 220px;
  width: auto;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  display: block;
}

/* Contact page — clean 4-card grid with one prominent "free quote" card and
   three info cards (phone, email, locations). Replaces the messy stacked
   markdown content from the original Duda export. */
.prose .contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 24px 0 40px;
}
@media (min-width: 720px) {
  .prose .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
.prose .contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.prose .contact-card-primary {
  background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark, #8a1a26) 100%);
  color: #fff;
  grid-column: 1 / -1;
  padding: 36px 40px;
}
@media (min-width: 720px) {
  .prose .contact-card-primary { padding: 44px 48px; }
}
.prose .contact-card-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-red);
  margin-bottom: 8px;
}
.prose .contact-card-primary .contact-card-eyebrow {
  color: rgba(255,255,255,0.85);
}
.prose .contact-card h2,
.prose .contact-card h3 {
  margin: 0 0 12px;
  color: var(--ink);
  line-height: 1.3;
}
.prose .contact-card-primary h2 {
  color: #fff;
  font-size: 28px;
}
.prose .contact-card h3 { font-size: 19px; }
.prose .contact-card p {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
}
.prose .contact-card-primary p {
  color: rgba(255,255,255,0.9);
  font-size: 16px;
}
.prose .contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 16px;
}
.prose .contact-card-primary .btn-primary {
  background: #fff;
  color: var(--brand-red);
  font-weight: 700;
}
.prose .contact-card-primary a.btn.btn-primary,
.prose .contact-card-primary a.btn.btn-primary:hover { color: var(--brand-red); }
.prose .contact-card-primary .btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}
.prose .contact-card-primary a.btn-outline,
.prose .contact-card-primary a.btn-outline:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.08);
}
.prose .contact-note {
  font-size: 13px !important;
  color: rgba(255,255,255,0.75) !important;
  margin: 0 !important;
  font-style: italic;
}
.prose .contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}
.prose .contact-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.prose .contact-list li:last-child { border-bottom: 0; }
.prose .contact-list li strong { color: var(--ink); margin-right: 6px; }
.prose .contact-list a { color: var(--brand-red); font-weight: 600; }
.prose .contact-form-note {
  background: var(--bg-soft);
  border-left: 4px solid var(--brand-red);
  border-radius: var(--r-md);
  padding: 24px 28px;
  margin: 32px 0;
}
.prose .contact-form-note h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--ink);
}
.prose .contact-form-note p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.6;
}

/* Contact page — 2-column layout:
   info on the left (phones, emails, locations), form on the right. Stacks to
   single column on mobile. */
.contact-page { margin: 0 0 16px; }
.contact-page-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .contact-page-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* Left column — compact layout.
   Two type colors only: BLACK (#000) for labels/plain text, RED (brand-red)
   for tel:/mailto: links. Tight line-heights and small section spacers. */
.contact-info-heading {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
}
.contact-info .contact-line {
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  font-weight: 400;
}
.contact-info .contact-line strong,
.contact-info .contact-line b {
  color: #000 !important;
  font-weight: 700;
}
/* Phone numbers — red, bold (heavier than email links) */
.contact-info .contact-line a[href^="tel:"] {
  color: var(--brand-red);
  font-weight: 700;
  text-decoration: none;
}
/* Email links — black, regular weight. Only phone numbers stay red. */
.contact-info .contact-line a[href^="mailto:"] {
  color: #000;
  font-weight: 400;
  text-decoration: none;
}
.contact-info .contact-line a:hover { text-decoration: underline; }
/* Para personas... — plain black, regular weight */
.contact-info .contact-line.muted {
  margin-top: 8px;
  margin-bottom: 8px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
}
/* Spacers between sections — small */
.contact-info .contact-emails-label { margin-top: 10px; }
.contact-info .contact-location-first { margin-top: 14px; }

/* Contact form column — wired to Netlify Forms (data-netlify="true").
   Honeypot field .hp-field is in the DOM for bots, hidden from humans via
   clip-path. Visual treatment: gradient cream → pale-warm background with
   a thick red top accent — designed to stand out as the page's primary CTA
   per Dov's feedback ("make it more sexy, more visible"). */
.contact-form-col {
  position: relative;
  padding: 32px 36px;
  background: linear-gradient(135deg, #fffaf3 0%, #fff3e0 100%);
  border: 1px solid #f5d9b3;
  border-top: 6px solid var(--brand-red);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(192, 30, 39, 0.10);
}
@media (max-width: 600px) {
  .contact-form-col { padding: 22px 18px; }
}
.contact-form-intro { margin-bottom: 20px; }
.contact-form-intro h2 { margin: 6px 0 0; font-size: 24px; color: #000; }
/* Inputs need a fully-opaque white inside the cream box so they read clearly. */
.contact-form-col input[type="text"],
.contact-form-col input[type="email"],
.contact-form-col input[type="tel"],
.contact-form-col select,
.contact-form-col textarea {
  background: #ffffff;
}
.contact-form .hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.contact-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  margin-bottom: 16px;
}
.contact-form .form-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 720px) {
  .contact-form .form-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .contact-form .form-grid,
  .contact-form .form-grid-3 { grid-template-columns: 1fr; }
}
/* .form-row-2 (Email/Phone, Company Name/Address) never actually had a
   grid rule — it was silently falling back to plain stacked block
   layout instead of the 2-column pairing the markup implies. Same grid
   values as .form-grid above for visual consistency. */
.contact-form .form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
@media (max-width: 560px) {
  .contact-form .form-row-2 { grid-template-columns: 1fr; }
}
.contact-form .form-field {
  display: block;
  margin-bottom: 16px;
}
.contact-form .form-field > span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.contact-form .form-field .req { color: var(--brand-red); margin-left: 2px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand-blue, #3d7090);
  box-shadow: 0 0 0 3px rgba(61, 112, 144, 0.15);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .btn-lg { padding: 14px 28px; font-size: 16px; margin-top: 8px; }
.contact-form .form-fineprint {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--ink-3, var(--ink-2));
  line-height: 1.5;
}

/* Thank-you page — minimal centered confirmation. */
.prose .thank-you-block {
  background: var(--bg-soft);
  border-left: 4px solid var(--brand-blue, #3d7090);
  padding: 24px 28px;
  border-radius: var(--r-md);
  margin: 24px 0;
}
.prose .thank-you-block h2 { margin-top: 0; }
.thank-you-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0;
}

/* Channel letter types — diagram cards (technical cutaway diagrams).
   Each card displays the diagram at its native aspect ratio so the labels
   (Acrylic 1/8", LED Light, Pin, etc.) stay readable. Click for lightbox. */
.diagram-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 32px 0 32px;
}
@media (max-width: 880px) { .diagram-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .diagram-grid { grid-template-columns: 1fr; } }
.diagram-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.diagram-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-red);
}
.diagram-card img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
  background: #f1f5f9;
  padding: 12px;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.diagram-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 14px 14px 14px;
  color: var(--ink);
  text-align: center;
  line-height: 1.3;
}
.prose a.diagram-card,
.prose a.diagram-card:hover { color: var(--ink); }

/* UL cert figure */
.ul-cert-figure {
  float: right;
  margin: 0 0 16px 24px;
  max-width: 180px;
  text-align: center;
}
.ul-cert-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.ul-cert-figure figcaption {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 8px;
  font-style: italic;
}
@media (max-width: 600px) {
  .ul-cert-figure { float: none; margin: 24px auto; }
}

/* Customer letter gallery */
.letter-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0 40px;
}
.letter-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: #f1f5f9;
  border: 1px solid var(--line);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.letter-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.letter-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  border-color: var(--brand-red);
}

/* Homepage featured video section */
.home-video {
  background: var(--bg);
  padding-block: clamp(56px, 7vw, 88px);
}
.home-video .eyebrow {
  margin-bottom: 12px;
}
.home-video h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  margin-bottom: 16px;
}
.home-video p.lead {
  max-width: 640px;
  margin: 0 auto 32px;
  font-size: 18px;
  color: var(--ink-2);
  line-height: 1.55;
}
.home-video .video-embed {
  max-width: 960px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

/* Print */
@media print {
  .site-header, .site-footer { display: none; }
  section { padding-block: 24px; page-break-inside: avoid; }
}

/* ===== WSP homepage additions ===== */
.audience-row { margin-top: 28px; }
.audience-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 12px);
  padding: 26px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
}
.audience-card h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--brand-blue-dark); }
.audience-card p { margin: 0; font-size: 0.925rem; color: var(--ink-2); line-height: 1.55; }
.home-why { padding: 56px 0; background: var(--bg-soft); }
.home-faq { padding: 56px 0 72px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  margin-bottom: 10px;
  padding: 0 18px;
}
.faq-item summary {
  cursor: pointer; font-weight: 600; padding: 15px 0; color: var(--ink);
  list-style: none; position: relative; padding-right: 28px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 2px; top: 12px;
  font-size: 20px; color: var(--brand-red);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 0 16px; color: var(--ink-2); line-height: 1.6; }

/* ============================================================
   WSP THEME LAYER — faithful to the original wholesalesignpro.com
   Charcoal header/footer, aubergine→azure hero gradient (their exact
   495deg gradient), lavender #8b69ae accent, Poppins type.
   Overrides the base theme by cascade — keep last in file.
   ============================================================ */
:root {
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;

  /* lavender primary (original "Request a quote" pill) */
  --brand-red: #8b69ae;
  --brand-red-dark: #75559a;
  --brand-red-soft: rgba(139, 105, 174, 0.10);

  /* azure secondary (original gradient endpoint) */
  --brand-blue: #137dc5;
  --brand-blue-dark: #250e3d;
  --brand-blue-light: #52c1f3;
  --brand-blue-soft: rgba(19, 125, 197, 0.08);

  --wsp-charcoal: #1a1b1f;
  --wsp-gradient: linear-gradient(495deg, rgba(37,14,61,1) 47%, rgba(19,125,197,1) 100%);
}
body { font-family: var(--font-sans); }
h1, h2, h3 { font-family: var(--font-sans); letter-spacing: 0; }

.btn { border-radius: 12px; font-weight: 500; }

/* Top bar + header: charcoal like the original (their white-text logo
   is designed for a dark header) */
.top-bar {
  background: #121317 !important; /* one step darker than header for separation */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.top-bar-label { color: #b7b4c2 !important; }
.top-bar-phone { color: #cbb8e4 !important; }
.top-bar-phone:hover { color: #fff !important; }

.site-header {
  background: var(--wsp-charcoal);
  border-bottom: 3px solid var(--brand-red); /* lavender rule delimits the menu */
}
.site-header nav.primary a { color: #e8e6ee; padding-block: 8px; }
.site-header .has-children > a { color: #e8e6ee; }
/* Logo: Dov's 3D Advanced Lighting Systems lockup (mark + wordmark),
   background knocked out. 76px was the smallest height at which the
   "LIGHTING SYSTEMS INC." line stayed legible; 87px (+15%, Dov's ask)
   gives it comfortable margin. Height-only sizing (width:auto) keeps
   the 3D undistorted. */
.brand img { display: block; height: 87px; width: auto; filter: none; }
/* The +15% logo (108px wide vs 94px) consumes header width, and at 1024px
   the nav had only ~6px of clearance before the phone chip. Tighten the
   nav's horizontal padding and the brand gap through 1024-1250px to buy
   that room back — the nav must stay inline at 1024px (see CLAUDE.md). */
@media (max-width: 1250px) {
  nav.primary a { padding-inline: 7px; }
  .brand { gap: 8px; }
}
.brand { gap: 14px; }
/* "Advanced Lighting Systems Inc." is much longer than the old "Wholesale
   Sign Pro" wordmark it replaced. Rather than keep shrinking the nav's
   own display breakpoint upward to make room for it (that's what
   pushed the full nav's appearance all the way to 1360px, hiding it
   behind the hamburger on very ordinary 1280-1360px laptop screens —
   a regression reported 2026-08-10, see CLAUDE.md), hide the wordmark
   text below 1500px so it isn't competing with the nav for space at
   all through the range where the nav actually needs to show inline.
   Icon-only logo through that range is a normal pattern and the nav
   working without a click matters more than the wordmark being visible
   at every width. */
/* The lockup image already carries "ADVANCED LIGHTING SYSTEMS INC.", so
   the text label is hidden at every width — it would print the company
   name twice. This also permanently frees the header width that the
   1500px reveal used to consume, which is what the nav needs at 1024px
   (see CLAUDE.md history). Kept in the DOM for screen readers. */
.brand-name {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* header CTA chip: lavender like the original */
.header-phone, .header-cta, .site-header .btn {
  background: #7a58a0 !important; /* darkened lavender: white text at AA */
  color: #fff !important;
}
.header-phone:hover, .site-header .btn:hover { background: var(--brand-red-dark) !important; }

/* dropdown panels stay readable on light bg */
.site-header .dropdown a { color: var(--ink); }

/* ---- HERO: their exact gradient (as a tint over the video), their layout ---- */
.hero.wsp-hero {
  position: relative;
  background: var(--wsp-gradient);
  background-size: cover;
  background-position: center;
  min-height: 0;
  padding-block: clamp(64px, 9vw, 130px);
  overflow: hidden;
}
/* brand gradient as a translucent tint so the video reads through
   while text keeps the original aubergine→azure look + AA contrast */
.wsp-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Dark neutral cinematic gradient with a single brand-color kiss in
     the far corner (WSP's azure, at 0.35). The footage reads as
     footage, not a purple wash. */
  background:
    linear-gradient(135deg,
      rgba(10, 10, 10, 0.85) 0%,
      rgba(10, 10, 10, 0.55) 60%,
      rgba(19, 125, 197, 0.35) 100%);
}
/* No CSS grade on the hero video — the client's cut is already graded
   (YAVG ~74-90 through the laser section). Adding contrast/brightness here
   would double-apply and crush it. */
.wsp-hero .hero-content { position: relative; z-index: 2; }
.wsp-hero .hero-grid { display: block; }
/* Eyebrow: brand + legal line, small caps — the headline itself carries the message */
.wsp-hero .wsp-eyebrow {
  color: #cfc7e2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  margin: 0 0 18px;
}
.wsp-hero .wsp-eyebrow-sep { color: #8b69ae; margin: 0 4px; }
.wsp-hero h1 {
  font-weight: 700;
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 19ch;
  margin: 0;
  text-shadow: 0 2px 24px rgba(20, 8, 40, 0.45);
}
.wsp-hero .wsp-dash {
  width: 56px; height: 4px; background: #fff; border-radius: 2px;
  margin: 30px 0 34px;
}
.wsp-hero .wsp-location { color: #d9d4e6; max-width: 52ch; margin: 0 0 26px; }

/* ---- 3-up card grids (audience trio, why-us, our-work gallery) ----
   Without this the cards stack full-width and the page reads broken. */
.img-row { display: grid; gap: 22px; }
.img-row-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .img-row-3 { grid-template-columns: 1fr; } }

/* Section heading scale: a lighter editorial scale than a huge display
   size, so category labels hold their own against it. */
.lineup .section-title-light { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.wsp-hero .subhead { max-width: 60ch; color: #d9d4e6; }
.wsp-hero .btn-primary {
  background: #fff !important;
  color: #250e3d !important;
  box-shadow: none;
  font-weight: 500;
}
.wsp-hero .btn-primary:hover { background: #efe9f7 !important; }
.wsp-hero .btn-secondary {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.75);
  color: #fff;
}
.wsp-hero .btn-secondary:hover { background: rgba(255,255,255,0.12); }

/* stats: light glass on gradient */
.wsp-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 44px;
}
@media (min-width: 720px) { .wsp-stats { grid-template-columns: repeat(4, 1fr); } }
.wsp-stat { background: rgba(20,12,40,0.35); padding: 16px 18px; }
.wsp-stat strong { display: block; font-size: 1.15rem; font-weight: 600; color: #fff; }
.wsp-stat span { font-size: 0.78rem; color: #cfc7e2; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---- light sections like the original ---- */
.tagline-strip { padding: 64px 0; background: #faf9f9; }
.audience-card { border-top: 3px solid var(--brand-red); transition: transform .18s ease, box-shadow .18s ease; }
.audience-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(37,14,61,0.10); }
.audience-card h3 { font-size: 1.1rem; color: #250e3d; }

/* lineup: light background, white cards (original is a light site) */
.lineup { background: #f3f1f7; }
.lineup .section-title-light { color: #250e3d; }
.lineup-group-title { color: #6d4f91; border-left-color: #8b69ae; letter-spacing: 0.1em; text-transform: uppercase; font-size: 1.05rem; }
.lineup-card { background: #fff; border: 1px solid #e7e3ef; transition: transform .18s ease, box-shadow .18s ease; }
.lineup-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(37,14,61,0.12); }
.lineup-title a { color: #250e3d; }
.lineup-desc { color: #4b4560; }
.lineup-more { color: #0e639e; }

.home-why { padding: 56px 0; background: #fff; }
.home-faq { padding: 56px 0 72px; background: #faf9f9; }
.faq-item[open] { border-color: var(--brand-red); }
.faq-item summary::after { color: var(--brand-red); }

/* CTA banner: the hero gradient again (bookends the page) */
.cta-banner, .contact-block { background: var(--wsp-gradient) !important; }

/* footer: charcoal */
/* ---- Blog post hero: featured image behind the title (matches the
   original Duda blog template's bind-bg-img banner) ---- */
.page-hero.post-hero-img {
  position: relative;
  background-size: cover;
  background-position: center;
  padding-block: clamp(48px, 7vw, 92px);
  overflow: hidden;
}
.post-hero-scrim {
  position: absolute;
  inset: 0;
  /* NEUTRAL, light scrim — the original shows the photo itself, not a brand
     tint. Just enough darkening for white text to clear AA. */
  background: linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.46) 100%);
}
.page-hero.post-hero-img > .container {
  position: relative;
  z-index: 1;
  text-align: center;   /* title centred over the photo, as the original */
}
/* hero holds the title only; give the photo room to read like the original */
.page-hero.post-hero-img { padding-block: clamp(90px, 12vw, 165px); }
.post-breadcrumbs { margin-bottom: 14px; }
.prose .post-byline { margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.page-hero.post-hero-img h1 {
  color: #fff;
  font-weight: 400;     /* original uses a lighter weight over the photo */
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}
.page-hero.post-hero-img .breadcrumbs,
.page-hero.post-hero-img .breadcrumbs a,
.page-hero.post-hero-img .breadcrumbs .sep { color: #d9d4e6; }
.page-hero.post-hero-img .breadcrumbs a:hover { color: #fff; }
.page-hero.post-hero-img .post-byline-text,
.page-hero.post-hero-img .post-byline-date { color: #cfc7e2; }
.page-hero.post-hero-img .post-byline-author { color: #fff; }
.page-hero.post-hero-img .post-byline-avatar {
  background: rgba(255,255,255,0.14);
  border-radius: 50%;
  padding: 6px;
}

/* The base "LABEL:" treatment (.prose p > strong:first-child becomes an
   uppercase block) strands the colon that follows it — WSP's copy uses
   lead-in bold inline ("**Step right up**: ...") instead.
   Keep bold inline in prose paragraphs. */
.prose p > strong:first-child {
  display: inline;
  color: inherit;
  font-size: inherit;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
}

/* Single-column article (blog posts) — the original has no sidebar, so the
   body and its images run the full content width. */
.article-layout.article-layout-single {
  display: block;
  max-width: 1080px;
  margin-inline: auto;
}

/* Body images inside articles.
   Scoped to paragraph/figure images only — the byline avatar and author-bio
   photo also live inside .prose and must keep their own small fixed size. */
.prose p > img,
.prose figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  margin: 28px 0;
}
/* Two product photos that sit next to each other in the client's document
   render as a pair, not stacked — stacking left big empty gutters. */
.prose .product-img-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  margin: 28px 0;
}
.prose .product-img-row img {
  display: block;
  width: 100%;
  height: auto;          /* scale down, never crop */
  max-height: none;      /* clear the base .prose img 480px cap */
  object-fit: unset;
  border-radius: var(--r-md);
  margin: 0;
}
@media (max-width: 640px) {
  .prose .product-img-row { grid-template-columns: 1fr; }
}
.prose .post-byline-avatar { width: 44px; height: 44px; border-radius: 50%; margin: 0; object-fit: contain; background: #f3f1f7; }
.prose .author-bio-photo { width: 80px; height: 80px; margin: 0; }

/* ---- Prose tables (Process at a Glance etc.) — previously unstyled,
   so they rendered unconstrained and overflowed. ---- */
.prose table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 20px 0 28px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.prose table th,
.prose table td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}
.prose table th {
  background: #f3f1f7;
  color: #250e3d;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.prose table tr:nth-child(even) td { background: #faf9fc; }
.prose table th:first-child { width: 5.5em; }
.prose table td:first-child { font-weight: 700; color: #6d4f91; }
.prose table th:nth-child(2) { width: 26%; }
/* Control-System Comparison table (outdoor LED signs post) — 4 roughly
   equal-weight columns, none of them a short label, so the sitewide
   "narrow first column" default (5.5em) crams "Point-to-point
   wireless" etc. into an awkward wrap. Scoped override, not a change
   to .prose table itself — other tables (e.g. certification-marks)
   rely on that narrow first column and shouldn't be affected. */
.control-system-table th,
.control-system-table td { width: 25% !important; }
.control-system-table td:first-child { font-weight: 700; color: #6d4f91; }
/* P6 vs. P8 table (same post) — same problem, 3 columns this time. */
.p6-p8-table th,
.p6-p8-table td { width: 33.33% !important; }
.p6-p8-table td:first-child { font-weight: 700; color: #6d4f91; }
/* Acrylic-vs-polycarbonate post: same sitewide narrow-first-column
   issue, on both of its tables. */
.acrylic-polycarbonate-table th,
.acrylic-polycarbonate-table td { width: 33.33% !important; }
.acrylic-polycarbonate-table td:first-child { font-weight: 700; color: #6d4f91; }
.light-transmission-table th,
.light-transmission-table td { width: 50% !important; }
.light-transmission-table td:first-child { font-weight: 700; color: #6d4f91; }
/* Mounting-methods comparison table (5 columns, all with comparable
   amounts of text) — same even-column treatment as the other scoped
   comparison tables, applied proactively this time. */
.mounting-methods-table th,
.mounting-methods-table td { width: 20% !important; }
.mounting-methods-table td:first-child { font-weight: 700; color: #6d4f91; }
/* SEG vs. clamp profile comparison table (fabric light boxes post) —
   same even-column treatment, 3 columns. */
.seg-clamp-table th,
.seg-clamp-table td { width: 33.33% !important; }
.seg-clamp-table td:first-child { font-weight: 700; color: #6d4f91; }
/* LED-selection table (choosing LEDs for channel letters post) — 2
   columns, second one carries the longer recommendation text, so the
   sitewide narrow-first-column default cramps it just like the others. */
.led-selection-table th,
.led-selection-table td { width: 50% !important; }
.led-selection-table td:first-child { font-weight: 700; color: #6d4f91; }
/* Comparison tables for the 4 new comparison-content posts — same
   even-column treatment as the other scoped comparison tables above,
   all 3 columns of comparable text length. */
.edge-side-table th,
.edge-side-table td { width: 33.33% !important; }
.edge-side-table td:first-child { font-weight: 700; color: #6d4f91; }
.aluminum-stainless-table th,
.aluminum-stainless-table td { width: 33.33% !important; }
.aluminum-stainless-table td:first-child { font-weight: 700; color: #6d4f91; }
.ftrim-alumtrim-table th,
.ftrim-alumtrim-table td { width: 33.33% !important; }
.ftrim-alumtrim-table td:first-child { font-weight: 700; color: #6d4f91; }
.pushthrough-channelletter-table th,
.pushthrough-channelletter-table td { width: 33.33% !important; }
.pushthrough-channelletter-table td:first-child { font-weight: 700; color: #6d4f91; }
/* Certification-marks table (UL requirements post) — 3 columns, and
   unlike the short "Mark" label in the CSA post's 2-column table, the
   first column here holds full phrases ("CSA mark with 'C' and 'US'"),
   so it needs the same even-column treatment as the other 3-column
   comparison tables rather than the sitewide narrow-first-column default. */
.cert-mark-table th,
.cert-mark-table td { width: 33.33% !important; }
.cert-mark-table td:first-child { font-weight: 700; color: #6d4f91; }
@media (max-width: 700px) {
  .prose table { display: block; overflow-x: auto; }
}


/* ---- Success Stories testimonial cards (our-work) ---- */
.prose .testimonial-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid #8b69ae;
  border-radius: var(--r-md);
  padding: 26px 30px;
  margin: 26px 0;
  box-shadow: 0 4px 18px rgba(37,14,61,0.06);
}
.prose .testimonial-card p { margin: 0 0 14px; }
.prose .testimonial-card footer {
  color: #6d4f91;
  font-weight: 600;
  font-size: 0.95rem;
}
.prose .testimonial-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.prose img.testimonial-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0;
  flex: 0 0 auto;
  border: 2px solid #ece7f4;
}
.prose .testimonial-footer small {
  display: block;
  color: var(--ink-3, #777);
  font-weight: 400;
  font-size: 0.82rem;
  margin-top: 2px;
}

/* ---- Homepage intro (Dov's trade-only paragraph) ---- */
.wsp-intro { padding: 56px 0 8px; background: #fff; }
/* Logo badge — the manufacturer's own mark, dropped in above the "trade
   name of Advanced Lighting Systems Inc." paragraph it's introducing.
   Keeps its native black card rather than trying to blend into the
   white section background; a fixed max-width + auto height keeps it
   proportional regardless of viewport. */
.wsp-intro-badge-row {
  display: flex;
  align-items: flex-end;
  gap: 56px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}
/* Matched to the warranty seal by HEIGHT, not width — the logo card is
   a 600x514 landscape rectangle and the seal is a square, so equal
   max-width left the seal visibly taller/bigger. Equal height is what
   actually reads as "same size" for two badges side by side.
   Fluid (clamp) rather than a fixed 260px: the badge row next to it
   (.wsp-badges-and-warranty .wsp-intro-badge-row) is set flex-shrink:0
   so the two logos stay side-by-side instead of stacking, which means
   a fixed height doesn't shrink with the viewport — at 260px fixed
   the pair silently overflowed off-screen below ~900px (clipped with
   no scrollbar, since html/body are overflow-x:hidden sitewide).
   clamp(90px, 24vw, 260px) reaches the 260px cap only around
   1080px+ viewports and scales down below that, verified not to
   overflow at 375/600/900px in local testing. */
.wsp-intro-badge {
  display: block;
  height: clamp(90px, 24vw, 260px);
  width: auto;
  max-width: 100%;
  margin: 0;
  border-radius: var(--r-md);
}
/* Warranty seal — sits beside the manufacturer logo badge, matched to
   the same height so the two read as equal-weight marks. */
.wsp-warranty-badge {
  display: block;
  height: clamp(90px, 24vw, 260px);
  width: auto;
  max-width: 100%;
  margin: 0;
}
/* Warranty callout — sits beside the logo/warranty badge row on wider
   screens, stacks below it on narrow ones. */
.wsp-badges-and-warranty {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}
.wsp-badges-and-warranty .wsp-intro-badge-row { margin: 0; flex-shrink: 0; }
/* Smaller type, set on a soft highlighted card so the warranty terms read
   as a distinct callout rather than blending into the surrounding copy. */
.wsp-warranty-text {
  flex: 1 1 320px;
  min-width: 260px;
  background: var(--bg-soft);
  border-left: 4px solid #8b69ae;
  border-radius: var(--r-sm);
  padding: 14px 18px;
}
.wsp-warranty-text .wsp-warranty-issuer {
  margin: 0 0 2px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b69ae;
}
.wsp-warranty-text h3 { margin: 0 0 6px; font-size: 0.92rem; font-weight: 700; color: #250e3d; }
.wsp-warranty-text p { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--ink-2); }
.wsp-warranty-text p + p { margin-top: 8px; }

.wsp-intro-copy { font-size: 1.06rem; line-height: 1.75; color: var(--ink-2); }
.wsp-intro-copy strong { color: #250e3d; }
.wsp-intro-points { margin: 18px 0 0; padding-left: 20px; color: var(--ink-2); line-height: 1.7; }
.wsp-intro-points li { margin-bottom: 6px; }
.wsp-intro-points li::marker { color: #8b69ae; }

/* Footer: the original site's deep aubergine, not generic charcoal —
   this is the brand surface the old site closes every page with */
.site-footer, footer.footer { background: #250e3d !important; }
.site-footer .copyright { border-top-color: rgba(255,255,255,0.12); }

/* Logo lockup — mark + wordmark composed as one unit (original: logo-02.svg) */
.footer-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
/* .site-footer .brand-block .brand-img img (0,3,1) earlier in the file
   outranks a plain .footer-lockup selector, so match its specificity. */
/* Footer brand column is ~328px wide at desktop, so the lockup can run
   much larger than the header's 87px — 160px tall renders 198px wide,
   well inside the column, and makes the wordmark properly readable.
   max-width guards the narrower stacked layout on small screens. */
.site-footer .brand-block .footer-lockup .brand-img img {
  display: block;
  height: 160px;
  width: auto;
  max-width: 100%;
  margin-bottom: 14px;
}
@media (max-width: 760px) {
  .site-footer .brand-block .footer-lockup .brand-img img { height: 132px; }
}
.footer-lockup-name {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.5rem;
  line-height: 1.15;
}
.footer-lockup-sub {
  display: block;
  color: #cfc7e2;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.66rem;
  margin-top: 8px;
}
.footer-lockup-line { color: #b9aed2; margin-top: 18px; max-width: 30ch; }
.footer-lockup-line a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* CTA banner button: darker lavender text for AA on white pill */
.btn-on-burgundy { color: #6d4f91 !important; }
.btn-on-burgundy:hover { color: #250e3d !important; }

/* Dropdown menu: the charcoal-header change made nav links near-white,
   which bled into the WHITE submenu panel — unreadable. Dark ink inside
   the panel, soft lavender hover, proper elevation. */
nav.primary .submenu {
  background: #fff;
  border: 1px solid #e7e3ef;
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(37, 14, 61, 0.18);
  padding: 6px;
}
.site-header nav.primary .submenu a {
  color: #2a2438;
  text-decoration: none !important;
  border-radius: 7px;
  padding: 10px 14px;
  font-weight: 500;
}
.site-header nav.primary .submenu a:hover,
.site-header nav.primary .submenu a:focus-visible {
  background: #6d4f91 !important;   /* solid lavender — unmistakable */
  color: #ffffff !important;
  text-decoration: none !important;
}
.site-header nav.primary .submenu a.submenu-parent { color: #6d4f91; font-weight: 600; }

/* ============ NAV INTERACTION FIX ============
   Two bugs, both from the charcoal-header switch:
   1) Base `nav.primary a:hover` sets background:var(--bg-soft) — a
      near-white pill designed for a WHITE header. On charcoal it
      painted a white box behind pale lavender text: unreadable.
   2) The base submenu hover (solid lavender) was good; an earlier
      override here replaced it with a near-invisible #f1ecf7 tint.
   Fix: translucent-white pill + white text up top, solid lavender
   + white text in the panel, both with a visible left/bottom accent. */
.site-header nav.primary a {
  position: relative;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
/* NOTE: must use direct-child selectors. A broad
   `.site-header nav.primary a:hover` also matches links INSIDE the white
   submenu panel — forcing white text + white overlay there made hovered
   rows invisible. Scoped to top-level items only. */
.site-header nav.primary > a:hover,
.site-header nav.primary > a:focus-visible,
.site-header nav.primary > .has-children > a:hover,
.site-header nav.primary > .has-children:hover > a {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
/* lavender underline bar grows in under the hovered top-level item */
.site-header nav.primary > a::after,
.site-header nav.primary .has-children > a::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: #b98fe0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.site-header nav.primary > a:hover::after,
.site-header nav.primary .has-children:hover > a::after,
.site-header nav.primary > a:focus-visible::after { transform: scaleX(1); }

/* Submenu rows: clear hover with a left accent bar */
.site-header nav.primary .submenu a {
  position: relative;
  transition: background .14s ease, color .14s ease, padding-left .14s ease;
}
.site-header nav.primary .submenu a::before {
  content: "";
  position: absolute;
  left: 6px; top: 50%;
  width: 3px; height: 0;
  border-radius: 2px;
  background: #f0e6ff;
  transform: translateY(-50%);
  transition: height .16s ease;
}
.site-header nav.primary .submenu a:hover::before,
.site-header nav.primary .submenu a:focus-visible::before { height: 60%; }
.site-header nav.primary .submenu a:hover { padding-left: 18px; }

/* 'Learn more' is a filled pill, not a text link — an earlier fix only
   changed its text color and left dark blue on lavender (1.43:1). */
.lineup-more {
  background: #6d4f91 !important;
  color: #ffffff !important;
}
.lineup-more:hover { background: #57407a !important; color: #fff !important; }