/* ============================================================
   PINNACLE SIGNWORKS — COMPONENTS
   Nav, footer, buttons, cards, forms, etc.
   ============================================================ */

/* =================== NAVIGATION =================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: var(--space-4) 0;
  /* Warm bright white — non-fading, with a hint of orange/cream warmth */
  background: rgba(255, 250, 245, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base), border-color var(--t-base), padding var(--t-base);
}

.nav.is-scrolled {
  /* Scrolled state goes brighter / fully opaque rather than fading to gray */
  background: #fff9f4;
  border-bottom-color: var(--divider);
  padding: var(--space-3) 0;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

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

.nav__logo img {
  height: 52px;
  width: auto;
  transition: height var(--t-base);
}

/* Logo shrinks slightly when nav becomes compact on scroll */
.nav.is-scrolled .nav__logo img {
  height: 44px;
}

@media (max-width: 600px) {
  .nav__logo img {
    height: 44px;
  }
  .nav.is-scrolled .nav__logo img {
    height: 38px;
  }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__links a {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding: var(--space-2) 0;
}

/* Underline hover effect — applied to TOP-LEVEL nav links (direct children
   of nav__links, or the trigger anchor inside a nav__item dropdown wrapper).
   Excludes the Request a Quote button + dropdown sub-items. */
.nav__links > a:not(.btn)::after,
.nav__item > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transition: right var(--t-base);
}

.nav__links > a:not(.btn):hover::after,
.nav__links > a:not(.btn).is-active::after,
.nav__item:hover > a::after,
.nav__item:focus-within > a::after,
.nav__item > a.is-active::after {
  right: 0;
}

/* ---- Dropdown menu (Products, Who we serve) ---- */
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Subtle chevron after parent link */
.nav__item > a::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.5;
  transition: opacity var(--t-fast), transform var(--t-fast);
  order: 2;
}

.nav__item:hover > a::before,
.nav__item:focus-within > a::before {
  opacity: 1;
  transform: rotate(225deg) translate(-2px, -2px);
}

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: -16px;
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base);
  z-index: 100;
  /* Invisible bridge so cursor can travel from trigger to dropdown
     without losing hover state */
}

.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}

/* Remove underline ::after on dropdown sub-items */
.nav__dropdown a::after {
  display: none;
}

.nav__dropdown a:hover {
  background: var(--bone);
  color: var(--brand-blue);
}

/* Mobile: each dropdown collapses by default. Tap the top-level link to expand
   that section's sublist. Tap again (while open) to navigate to its page. */
@media (max-width: 900px) {
  .nav__item {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .nav__item > a {
    width: 100%;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav__item > a::before {
    display: none; /* desktop chevron not needed on mobile */
  }

  /* Chevron indicator for items with dropdowns. Explicitly resets the
     orange-underline ::after from the desktop rules so the inherited
     position:absolute / background don't mangle this chevron. */
  .nav__item--has-dropdown > a::after {
    content: '' !important;
    display: inline-block !important;
    position: static !important;
    inset: auto !important;
    width: 10px !important;
    height: 10px !important;
    background: transparent !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    transition: transform var(--t-base) !important;
    margin-left: auto !important;
    margin-right: 4px !important;
    opacity: 0.6 !important;
  }

  .nav__item--mobile-open > a::after {
    transform: rotate(-135deg) !important;
    opacity: 1 !important;
  }

  /* Dropdown is hidden by default on mobile; flipped to display:block when its
     parent .nav__item gets the --mobile-open class (toggled by main.js). */
  .nav__dropdown {
    display: none !important;
    position: static !important;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: var(--space-3) 0 var(--space-5) var(--space-6) !important;
    margin: 0 !important;
    min-width: 0;
    z-index: auto;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .nav__item--mobile-open > .nav__dropdown {
    display: block !important;
  }

  .nav__dropdown::before {
    display: none;
  }

  .nav__dropdown a {
    /* Comfortable touch targets — bigger font, more vertical room per item */
    display: block !important;
    padding: var(--space-3) 0 !important;
    font-size: 1.0625rem !important;
    color: var(--ink) !important;
    border-bottom: none !important;
  }

  .nav__dropdown a:hover {
    background: transparent;
    color: var(--brand-blue) !important;
  }
}

.nav__cta {
  margin-left: var(--space-4);
}

/* Higher-specificity rule so it actually beats the base .btn padding
   (which is declared later in this file). Text size matches the other
   nav links (var(--fs-body) = 1rem). */
.btn.nav__cta {
  padding: 0.85rem 2.25rem;
  font-size: var(--fs-body);
  font-weight: 600;
}

@media (max-width: 900px) {
  .btn.nav__cta {
    padding: 1rem 2.25rem;
    font-size: 1.0625rem;
  }
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.nav__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: transform var(--t-base), background var(--t-base);
}

.nav__toggle-bar::before,
.nav__toggle-bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--t-base), top var(--t-base);
}

.nav__toggle-bar::before { top: -7px; }
.nav__toggle-bar::after { top: 7px; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bar {
  background: transparent;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar::before {
  top: 0;
  transform: rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .nav__toggle {
    display: flex;
  }

  .nav__links {
    position: fixed;
    inset: 84px 0 0 0;
    /* Fully opaque warm white — must completely hide the hero behind it */
    background: #fff9f4;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--space-7) var(--content-padding-x);
    gap: var(--space-5);
    overflow-y: auto; /* in case the expanded menu is taller than viewport */
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--t-slow), opacity var(--t-slow);
  }

  .nav__links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav__links a {
    font-size: 1.25rem;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--divider);
  }

  .nav__cta {
    margin-left: 0;
    margin-top: var(--space-4);
    text-align: center;
  }
}

/* =================== BUTTONS =================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

.btn--primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 14px rgba(233, 78, 27, 0.25);
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(233, 78, 27, 0.35);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--secondary {
  background: var(--ink);
  color: white;
}

.btn--secondary:hover {
  background: var(--ink-soft);
  color: white;
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: white;
}

.btn--ghost-light {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.4);
}

.btn--ghost-light:hover {
  background: white;
  color: var(--ink);
  border-color: white;
}

.btn--lg {
  padding: 1.125rem 2rem;
  font-size: 1rem;
}

.btn__arrow {
  display: inline-block;
  transition: transform var(--t-base);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* =================== HERO =================== */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: clamp(7rem, 12vw, 10rem);
  padding-bottom: clamp(5rem, 8vw, 7rem);
  background: var(--ink);
  color: white;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(30, 46, 160, 0.6) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(233, 78, 27, 0.18) 0%, transparent 50%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
}

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

/* =================== HERO (video background variant) =================== */
.hero--video {
  min-height: 100vh;
  min-height: 100svh; /* Better mobile handling */
  padding-top: 0;
  padding-bottom: 0;
  align-items: stretch;
  /* Override the gradient ::before from .hero — video does the work now */
}

.hero--video::before,
.hero--video::after {
  display: none;
}

/* Video wrap: right-side, wider so the full video frame has room to show */
.hero__video-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 30%; /* video occupies the right 70% of hero */
  overflow: hidden;
  z-index: 0;
  background: var(--ink); /* letterbox areas blend with hero background */
}

.hero__video {
  width: 100%;
  height: 100%;
  /* CONTAIN preserves the full video frame — no cropping of the wordmark.
     The video letterboxes against the dark wrap background, which matches
     the hero's navy seamlessly. */
  object-fit: contain;
  object-position: center;
  /* Gentle Ken Burns — reduced to 1.04 so the wordmark stays in view at peak zoom */
  animation: kenBurns 30s ease-in-out infinite alternate;
  filter: saturate(0.92) brightness(0.78) contrast(1.05);
  will-change: transform;
  /* Single soft horizontal feather on the left edge — fades into the dark
     wrap background, which itself blends into the hero background */
  mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0, 0, 0, 0.08) 5%,
    rgba(0, 0, 0, 0.25) 12%,
    rgba(0, 0, 0, 0.5) 19%,
    rgba(0, 0, 0, 0.78) 26%,
    black 35%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0, 0, 0, 0.08) 5%,
    rgba(0, 0, 0, 0.25) 12%,
    rgba(0, 0, 0, 0.5) 19%,
    rgba(0, 0, 0, 0.78) 26%,
    black 35%);
}

/* On mobile, video sits on TOP as a contained band — text sits cleanly below.
   Bottom edge of video feathers into the dark background. */
@media (max-width: 900px) {
  .hero__video-wrap {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 48vh;
    height: 48svh; /* small-viewport unit, better mobile behavior */
  }
  .hero__video {
    /* Single direction: bottom feathers into dark, top/sides have gentle taper.
       Full video frame visible via object-fit: contain (set in base styles) */
    mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      black 14%,
      black 68%,
      rgba(0, 0, 0, 0.4) 88%,
      transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      black 14%,
      black 68%,
      rgba(0, 0, 0, 0.4) 88%,
      transparent 100%);
  }
}

@media (max-width: 480px) {
  .hero__video-wrap {
    height: 42vh;
    height: 42svh;
  }
}

@keyframes kenBurns {
  0%   { transform: scale(1.0) translate(0, 0); }
  100% { transform: scale(1.04) translate(-0.5%, -0.5%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video {
    animation: none;
  }
}

/* Subtle overlay — just a soft bottom fade for spec line + scroll cue readability.
   No left-side scrim needed since the video isn't behind the text anymore. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 65%, rgba(14, 24, 80, 0.5) 100%),
    radial-gradient(ellipse at 80% 40%, rgba(30, 46, 160, 0.15) 0%, transparent 65%);
}

/* On mobile, video is contained at top — overlay stays subtle */
@media (max-width: 900px) {
  .hero__overlay {
    background:
      linear-gradient(to bottom, transparent 55%, rgba(14, 24, 80, 0.45) 100%);
  }
}

/* Blueprint grid overlay — subtle technical/industrial texture */
.hero__grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
}

/* Edge vignette for cinematic depth */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
}

/* Content layer: pushed above all overlays */
.hero__inner--video {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  width: 100%;
}

.hero__inner--video .hero__content {
  max-width: 720px;
}

/* Eyebrow with pulsing dot */
.hero--video .hero__eyebrow {
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Headline with the orange accent line drawing underneath "Work That Matters" */
.hero--video h1 {
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  max-width: 18ch;
}

/* On mobile, push the hero content below the video band so they don't overlap */
@media (max-width: 900px) {
  .hero__inner--video {
    padding-top: 50vh;
    padding-top: 50svh;
    align-items: flex-start;
  }
  .hero--video {
    min-height: auto;
    padding-bottom: 8rem; /* room for the spec line at bottom */
  }
}

@media (max-width: 480px) {
  .hero__inner--video {
    padding-top: 44vh;
    padding-top: 44svh;
  }
}

.hero__accent-wrap {
  display: inline-block;
  position: relative;
}

.hero__accent-line {
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(233, 78, 27, 0.2) 100%);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  /* GSAP animates this in via the hero entrance timeline */
}

.hero--video .hero__sub {
  color: #fff;
  font-weight: 500;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* CTAs need a touch more weight against video background */
.hero--video .hero__ctas .btn--ghost-light {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.06);
}

/* =================== HERO — SPLIT CARD VARIANT ===================
   Hero where the video lives inside a contained card on the right (instead of
   being full-bleed). The card has rounded corners, a rotating gradient ring,
   viewfinder-style orange corner accents, and stretches to match the height
   of the copy column (eyebrow → CTAs). */

/* Re-enable the base .hero atmospheric layers (the .hero--video modifier was
   hiding them because the video used to BE the backdrop). */
.hero--video.hero--card::before,
.hero--video.hero--card::after {
  display: block;
}

.hero--video.hero--card {
  min-height: auto;
  padding-top: clamp(7rem, 12vw, 10rem);
  padding-bottom: clamp(5rem, 8vw, 7rem);
  align-items: center;
}

.hero--card .hero__inner--video {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch; /* card stretches to copy-column height */
}

.hero--card .hero__content {
  max-width: 640px;
  align-self: center;
}

/* Custom property powers the rotating conic-gradient border below */
@property --hero-card-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.hero__video-card {
  position: relative;
  padding: 0;
  border-radius: 0;
  background: transparent;
  animation: none;
  box-shadow: none;
  isolation: isolate;
}

/* Ambient halo behind the video — warm orange tone bleeding from upper-left,
   cool brand-blue from lower-right. Heavy blur so it reads as atmospheric
   light, not a separate object. Inset extended outside so the glow extends
   past the video edge. */
.hero__video-card::before {
  content: '';
  position: absolute;
  inset: -12% -10%;
  background:
    radial-gradient(ellipse 70% 70% at 28% 28%, rgba(233, 78, 27, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 80% at 72% 72%, rgba(30, 46, 160, 0.38) 0%, transparent 65%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

.hero__video-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* Reduced another ~10% — total ~20% shorter than the original 460px */
  min-height: 373px;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  z-index: 1;
  /* Soft elliptical mask — feathers the video edges into the hero background
     so there's no visible rectangular frame around it. */
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at center, black 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 100% at center, black 60%, transparent 100%);
}

.hero__video-card__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.94) brightness(0.86) contrast(1.05);
  /* Gentle Ken Burns, slower than original for a calmer feel inside the card */
  animation: kenBurns 32s ease-in-out infinite alternate;
  will-change: transform;
}

/* Viewfinder corner brackets — hidden; the soft mask + halo carry the
   integration now. The HTML spans are kept in case we want them back. */
.hero__video-card__corner {
  display: none;
}

/* Mobile: stack — copy first, video card below */
@media (max-width: 900px) {
  .hero--card .hero__inner--video {
    grid-template-columns: 1fr;
    gap: var(--space-7);
    padding-top: 0; /* override the 50vh push that .hero__inner--video sets on mobile */
    align-items: stretch;
  }
  .hero--video.hero--card {
    padding-top: clamp(6rem, 18vw, 9rem);
    padding-bottom: clamp(4rem, 10vw, 7rem);
  }
  .hero--card .hero__content {
    align-self: start;
  }
  .hero__video-card__inner {
    min-height: 280px;
    /* On mobile the card sits on its own — give it a defined shape rather
       than the feathered desktop treatment. */
    -webkit-mask-image: none;
            mask-image: none;
    background: var(--ink);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
}

@media (max-width: 600px) {
  .hero__video-card__inner {
    min-height: 240px;
  }
  .hero__video-card__corner {
    width: 16px;
    height: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video-card {
    animation: none;
  }
  .hero__video-card__video {
    animation: none;
  }
}

/* Bottom spec strip — like a film credit */
.hero__spec {
  position: absolute;
  left: var(--content-padding-x);
  bottom: clamp(2rem, 4vw, 3.5rem);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(237, 234, 228, 0.65);
  font-weight: 500;
  opacity: 0; /* fades in via GSAP */
}

.hero__spec-item {
  white-space: nowrap;
}

.hero__spec-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .hero__spec {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    gap: var(--space-2);
  }
}

@media (max-width: 480px) {
  .hero__spec .hero__spec-item:nth-child(5),
  .hero__spec .hero__spec-sep:nth-child(4) {
    display: none;
  }
}

/* Scroll cue — bottom center */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(2rem, 4vw, 3.5rem);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: rgba(237, 234, 228, 0.55);
  text-decoration: none;
  opacity: 0; /* GSAP fades in */
  transition: color var(--t-base);
}

.hero__scroll-cue:hover {
  color: white;
}

.hero__scroll-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  font-weight: 500;
}

.hero__scroll-line {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, currentColor, transparent);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--accent));
  animation: scrollPulse 2.4s ease-in-out infinite;
}

@keyframes scrollPulse {
  0% { top: -40px; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 40px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after { animation: none; }
}

@media (max-width: 700px) {
  .hero__scroll-cue {
    display: none; /* declutter on mobile */
  }
  .hero__spec {
    bottom: 1.5rem;
  }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-6);
}

@media (max-width: 600px) {
  .hero__eyebrow {
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    gap: var(--space-2);
  }
}

/* Glowing maple leaf — replaces the old dot. SVG inline so we can pulse it. */
.hero__eyebrow-leaf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(233, 78, 27, 0.55));
  animation: leafPulse 2.4s ease-in-out infinite;
}

.hero__eyebrow-leaf svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 600px) {
  .hero__eyebrow-leaf {
    width: 16px;
    height: 16px;
  }
}

@keyframes leafPulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(233, 78, 27, 0.55));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 11px rgba(233, 78, 27, 0.9));
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow-leaf {
    animation: none;
  }
}

.hero h1 {
  color: white;
  margin-bottom: var(--space-5);
  max-width: 16ch;
}

.hero__sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: var(--lh-relaxed);
  color: var(--text-soft-on-dark);
  margin-bottom: var(--space-7);
  max-width: 52ch;
}

.hero__ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =================== TRUST STRIP (auto-scrolling marquee) =================== */
.trust-strip {
  padding: var(--space-5) 0 var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}

.trust-strip__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  text-align: center;
  margin-bottom: var(--space-4);
}

/* Marquee viewport — clips overflow + edge-fades */
.trust-strip__marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Soft edge fade so logos don't pop in/out abruptly */
  mask-image: linear-gradient(to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%);
}

/* The track that scrolls. Width = max-content because we contain two
   copies of the logo list, and we translate by -50% to loop seamlessly. */
.trust-strip__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  width: max-content;
  padding: var(--space-3) 0;
  animation: trustMarquee 40s linear infinite;
}

/* Pause on hover so people can read a logo they're interested in */
.trust-strip__marquee:hover .trust-strip__track {
  animation-play-state: paused;
}

@keyframes trustMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .trust-strip__track {
    animation: none;
  }
}

.trust-strip__logo {
  height: 26px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(100%);
  flex-shrink: 0;
  transition: opacity var(--t-base), filter var(--t-base);
}

.trust-strip__logo:hover {
  opacity: 0.95;
  filter: grayscale(20%);
}

@media (max-width: 600px) {
  .trust-strip__logo {
    height: 22px;
  }
  .trust-strip__track {
    gap: 2.25rem;
    animation-duration: 30s; /* slightly faster on mobile so it feels lively */
  }
}

/* =================== PRODUCT CARDS =================== */
.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(30, 46, 160, 0.15);
}

.card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 46, 160, 0.06);
  border-radius: var(--radius-md);
  color: var(--brand-blue);
  margin-bottom: var(--space-5);
}

.card__icon svg {
  width: 24px;
  height: 24px;
}

.card h3 {
  margin-bottom: var(--space-3);
  font-size: 1.375rem;
}

.card p {
  color: var(--text-soft-on-light);
  font-size: var(--fs-body);
  flex: 1;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--brand-blue);
}

.card__link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--t-base);
}

.card:hover .card__link svg {
  transform: translateX(4px);
}

/* =================== EXPANDING FLEX CARDS (What We Make) =================== */
.flex-cards {
  display: flex;
  gap: var(--space-3);
  height: clamp(440px, 50vw, 560px);
  width: 100%;
}

.flex-card {
  flex: 1;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
  min-width: 0;
  background: var(--ink);
  outline: none;
}

.flex-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.flex-card--active {
  flex: 6;
}

.flex-card__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: filter 0.5s, transform 0.7s;
}

.flex-card:not(.flex-card--active) .flex-card__image {
  filter: saturate(0.6) brightness(0.55);
}

.flex-card:not(.flex-card--active):hover .flex-card__image {
  filter: saturate(0.85) brightness(0.7);
}

/* Watermark-style SVG icon centered on each card — used by the Who We Serve cards
   where backgrounds are gradients instead of photos. Sits above the gradient but
   below the dark overlay, so the content panel stays readable when the card is active. */
.flex-card__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(56px, 11vw, 100px);
  height: clamp(56px, 11vw, 100px);
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.20);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  pointer-events: none;
  transition: top 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
              width 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
              height 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
              color 0.5s;
}

.flex-card--active .flex-card__icon {
  /* Lift slightly so the icon doesn't compete with the title/description panel */
  top: 34%;
  width: clamp(82px, 14vw, 130px);
  height: clamp(82px, 14vw, 130px);
  color: rgba(255, 255, 255, 0.26);
}

/* Bottom gradient that appears on the active card for content readability */
.flex-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(14, 24, 80, 0.92) 0%,
    rgba(14, 24, 80, 0.55) 38%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.flex-card--active .flex-card__overlay {
  opacity: 1;
}

/* Vertical rotated label shown on narrow (non-active) cards */
.flex-card__compact-label {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%) rotate(-90deg);
  transform-origin: center center;
  white-space: nowrap;
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  opacity: 0.95;
  transition: opacity 0.4s;
}

.flex-card--active .flex-card__compact-label {
  opacity: 0;
}

/* Full content panel on the active card */
.flex-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6);
  color: white;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s 0.25s, transform 0.5s 0.25s;
  pointer-events: none;
}

.flex-card--active .flex-card__content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.flex-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-3);
  line-height: 1.15;
}

.flex-card__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: #ffffff;
  margin-bottom: var(--space-5);
  max-width: 56ch;
}

.flex-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem 1.25rem;
  background: var(--accent);
  color: white;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--t-base), transform var(--t-fast);
}

.flex-card__link:hover {
  background: var(--accent-hover);
  color: white;
  transform: translateY(-1px);
}

.flex-card__link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--t-base);
}

.flex-card__link:hover svg {
  transform: translateX(3px);
}

/* Mobile: stack cards as image-on-top, text-on-bottom blocks. Text gets its
   own solid dark navy area instead of sitting over the busy image — much
   easier to read on a phone. Industry cards keep their SVG icon centered
   inside the gradient (image) area. Desktop layout is untouched. */
@media (max-width: 900px) {
  .flex-cards {
    flex-direction: column;
    height: auto;
    gap: var(--space-5);
  }
  .flex-card {
    /* Grid lets us drop the icon into the same cell as the image so it
       centers within the visual block — without an HTML restructure. */
    display: grid;
    grid-template-areas:
      "image"
      "content";
    grid-template-rows: auto auto;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    cursor: default;
    background: var(--ink);
    overflow: hidden;
  }
  .flex-card .flex-card__image {
    grid-area: image;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    filter: none !important;
  }
  /* Icon lives in the image cell, centered on the gradient/photo. !important
     is used to override the desktop .flex-card--active .flex-card__icon rule
     (same specificity, source order would otherwise win for active cards). */
  .flex-card .flex-card__icon {
    display: block !important;
    grid-area: image !important;
    position: static !important;
    justify-self: center !important;
    align-self: center !important;
    width: clamp(72px, 18vw, 120px) !important;
    height: clamp(72px, 18vw, 120px) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    stroke-width: 1.75 !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    pointer-events: none;
  }
  /* Hide the bottom-gradient overlay and the rotated vertical label —
     they're meaningless in the stacked layout. */
  .flex-card .flex-card__overlay,
  .flex-card__compact-label {
    display: none;
  }
  .flex-card .flex-card__content {
    grid-area: content;
    position: relative;
    inset: auto;
    bottom: auto;
    padding: var(--space-5);
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .flex-card__title {
    font-size: 1.25rem;
    margin-bottom: var(--space-3);
  }
  .flex-card__desc {
    font-size: 0.9375rem;
    margin-bottom: var(--space-4);
  }
}

/* =================== PILLAR CARDS (Why Pinnacle) =================== */
.pillar {
  padding: var(--space-7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.pillar__number {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: var(--space-4);
  display: block;
}

.pillar h3 {
  color: white;
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}

.pillar p {
  color: var(--text-soft-on-dark);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

/* =================== PROCESS STEPS =================== */
.process {
  position: relative;
}

.process-step {
  position: relative;
  padding: var(--space-6) 0;
}

.process-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: var(--space-4);
}

.process-step h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-3);
}

.process-step p {
  color: var(--text-soft-on-light);
  font-size: var(--fs-body);
}

/* =================== STAT BLOCKS =================== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

.stat {
  padding: var(--space-5) 0;
}

.stat__number {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--brand-blue);
  margin-bottom: var(--space-3);
}

.section--dark .stat__number {
  color: white;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}

.section--dark .stat__label {
  color: var(--text-soft-on-dark);
}

/* =================== SECTION WITH BACKGROUND VIDEO =================== */
/* Reusable pattern: full-bleed video behind a dark section, with overlay
   for content readability. Used for Why Pinnacle + Since 2008. */
.section--with-video {
  position: relative;
  overflow: hidden;
}

.section__video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.section__video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Darken + slightly cool the footage so navy overlay layers cleanly */
  filter: saturate(0.85) brightness(0.42) contrast(1.05);
}

/* Multi-layer dark overlay — readable content, cinematic feel */
.section__video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(14, 24, 80, 0.45) 0%,
      rgba(14, 24, 80, 0.72) 60%,
      rgba(14, 24, 80, 0.92) 100%),
    linear-gradient(to bottom,
      rgba(14, 24, 80, 0.55) 0%,
      rgba(14, 24, 80, 0.35) 40%,
      rgba(14, 24, 80, 0.65) 100%);
}

/* Subtle blueprint grid texture for technical/industrial feel + continuity
   with the hero. Masked to fade at section edges. */
.section__video-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 25%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 90%);
}

/* Content needs to sit ABOVE the video + overlay layers */
.section--with-video > .container {
  position: relative;
  z-index: 2;
}

/* Reduced motion: hide video, dark navy section background still shows */
@media (prefers-reduced-motion: reduce) {
  .section__video-bg video {
    display: none;
  }
}

/* =================== CTA BANNER (full-width) =================== */
.cta-banner {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--ink);
  color: white;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 50%, rgba(233, 78, 27, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 20% 50%, rgba(30, 46, 160, 0.4) 0%, transparent 50%);
}

.cta-banner__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.cta-banner h2 {
  color: white;
  margin-bottom: var(--space-5);
}

.cta-banner p {
  color: var(--text-soft-on-dark);
  font-size: var(--fs-body-lg);
  margin-bottom: var(--space-7);
}

/* =================== FOOTER =================== */
.footer {
  background: var(--ink);
  color: var(--text-on-dark);
  padding: var(--space-9) 0 var(--space-5);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-8);
}

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 500px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

.footer__brand img {
  height: 40px;
  width: auto;
  margin-bottom: var(--space-4);
  filter: brightness(0) invert(1);
}

.footer__tagline {
  color: var(--text-soft-on-dark);
  max-width: 36ch;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

.footer__col h4 {
  color: white;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__col a {
  color: var(--text-soft-on-dark);
  font-size: var(--fs-body);
  transition: color var(--t-fast);
}

.footer__col a:hover {
  color: white;
}

.footer__bottom {
  border-top: 1px solid var(--divider-dark);
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: var(--text-soft-on-dark);
  font-size: var(--fs-small);
}

.footer__bc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__bc::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 2px;
  position: relative;
}

/* =================== FORMS =================== */
.form {
  display: grid;
  gap: var(--space-5);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

@media (max-width: 600px) {
  .form__row {
    grid-template-columns: 1fr;
  }
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form__label {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.form__label .required {
  color: var(--accent);
}

.form__hint {
  font-size: var(--fs-caption);
  color: var(--steel);
}

.form__input,
.form__textarea,
.form__select {
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  color: var(--text-on-light);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(30, 46, 160, 0.12);
}

.form__textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-body);
}

.form__file {
  padding: var(--space-4);
  background: rgba(30, 46, 160, 0.04);
  border: 1.5px dashed rgba(30, 46, 160, 0.3);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.form__file:hover {
  background: rgba(30, 46, 160, 0.08);
  border-color: var(--brand-blue);
}

.form__file-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--brand-blue);
  font-weight: 500;
  cursor: pointer;
}

/* Note that replaces the file-upload field: tells the user to email files
   separately since the form backend doesn't host uploads. */
.form__attach-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(30, 46, 160, 0.05);
  border: 1px solid rgba(30, 46, 160, 0.18);
  border-radius: var(--radius-md);
  color: var(--text-on-light);
  line-height: var(--lh-relaxed);
  font-size: var(--fs-body);
}
.form__attach-note svg {
  flex-shrink: 0;
  color: var(--brand-blue);
  margin-top: 2px;
}
.form__attach-note strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text-on-light);
}
.form__attach-note a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.form__attach-note a:hover {
  color: var(--brand-blue);
}

.form__submit {
  justify-self: start;
  margin-top: var(--space-4);
  /* Breathing room below the button so it doesn't crowd whatever follows
     (the "What happens next" callouts on mobile when the layout stacks) */
  margin-bottom: var(--space-6);
}

.form__success,
.form__error {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  display: none;
}

.form__success {
  background: rgba(30, 46, 160, 0.08);
  color: var(--brand-blue);
  border: 1px solid rgba(30, 46, 160, 0.2);
}

.form__error {
  background: rgba(233, 78, 27, 0.08);
  color: var(--accent-hover);
  border: 1px solid rgba(233, 78, 27, 0.2);
}

.form__success.is-visible,
.form__error.is-visible {
  display: block;
}

/* =================== PRODUCTS PAGE — QUICK NAV PILLS =================== */
.product-quicknav {
  position: sticky;
  /* Match the SCROLLED nav height (logo shrinks 52->44px, padding tightens)
     because the pill bar only becomes sticky after scrolling, by which time
     the nav has already shrunk. Using 68px = scrolled nav height eliminates
     the gap that appears between the nav and pill bar. */
  top: 68px;
  z-index: 50;
  background: rgba(247, 245, 241, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--divider);
  /* Vertical breathing room around the pills. Bottom is reduced by 2px to offset
     the .product-quicknav__pills padding-bottom (scrollbar clearance), so the
     visual gap above and below the pills reads as equal. */
  padding-top: var(--space-4);
  padding-bottom: calc(var(--space-4) - 2px);
}

.product-quicknav__pills {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--divider) transparent;
  padding-bottom: 2px; /* avoid scrollbar clipping pills */
}

.product-quicknav__pills::-webkit-scrollbar {
  height: 4px;
}
.product-quicknav__pills::-webkit-scrollbar-thumb {
  background: var(--divider);
  border-radius: 999px;
}

.product-quicknav__pills a {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--steel);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.product-quicknav__pills a:hover {
  color: var(--ink);
  background: var(--bone);
  border-color: var(--steel-soft);
}

.product-quicknav__pills a.is-active {
  color: white;
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

@media (max-width: 600px) {
  .product-quicknav {
    top: 62px; /* mobile scrolled nav: logo 38px + padding tightens */
  }
  .product-quicknav__pills a {
    font-size: 0.8125rem;
    padding: 0.5rem 0.875rem;
  }
}

/* =================== PRODUCTS PAGE — CATEGORY SECTIONS =================== */
.product-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  scroll-margin-top: 160px; /* fixed nav (~68px) + sticky pills (~62px) + breathing room */
}

/* Industries page — each industry article is an anchor target. No sticky pill bar
   here, so only the main nav height needs offsetting. */
.section article[id] {
  scroll-margin-top: 110px;
}

.product-section__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: var(--space-5);
  align-items: start;
}

/* Default layout: intro (eyebrow+h2+lede) top-left, media top-right, details bottom-left, materials bottom-right.
   Row 1 = intro + media. Row 2 = details + materials. Common-applications and Materials & options subheads
   both start at row 2 top, so they align horizontally. */
.product-section__split .product-section__content {
  grid-column: 1;
  grid-row: 1;
}
.product-section__split .product-section__details {
  grid-column: 1;
  grid-row: 2;
}
.product-section__split .product-section__media {
  grid-column: 2;
  grid-row: 1;
  /* Push the video down past the eyebrow's height so its top edge aligns with the H2 below */
  margin-top: calc(1rem * 1.4 + var(--space-5));
}
.product-section__split .product-section__materials {
  grid-column: 2;
  grid-row: 2;
}

/* Reverse layout: media + materials on the left, intro + details on the right */
.product-section__split--reverse .product-section__content {
  grid-column: 2;
  grid-row: 1;
}
.product-section__split--reverse .product-section__details {
  grid-column: 2;
  grid-row: 2;
}
.product-section__split--reverse .product-section__media {
  grid-column: 1;
  grid-row: 1;
}
.product-section__split--reverse .product-section__materials {
  grid-column: 1;
  grid-row: 2;
}

@media (max-width: 900px) {
  .product-section__split,
  .product-section__split--reverse {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: var(--space-6);
  }
  .product-section__split .product-section__content,
  .product-section__split .product-section__details,
  .product-section__split .product-section__media,
  .product-section__split .product-section__materials,
  .product-section__split--reverse .product-section__content,
  .product-section__split--reverse .product-section__details,
  .product-section__split--reverse .product-section__media,
  .product-section__split--reverse .product-section__materials {
    grid-column: 1;
    grid-row: auto;
  }
  .product-section__split .product-section__media,
  .product-section__split--reverse .product-section__media {
    margin-top: 0; /* no alignment offset needed on mobile */
  }
  /* On mobile, content (intro) should appear above media regardless of layout */
  .product-section__split--reverse .product-section__content {
    order: -1;
  }
}

/* Media frame — holds the autoplay video with image poster fallback */
.product-section__media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--ink);
}

.product-section__media video,
.product-section__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-section__media video {
  z-index: 1;
}

/* When prefers-reduced-motion is set, hide the video and let the poster image
   (rendered via the video's poster attribute) sit alone */
@media (prefers-reduced-motion: reduce) {
  .product-section__media video {
    display: none;
  }
  .product-section__media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--poster-image);
    background-size: cover;
    background-position: center;
    z-index: 0;
  }
}

.product-section__media-corner {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: var(--radius-lg);
  /* Subtle inner shadow for depth */
  box-shadow: inset 0 0 60px rgba(14, 24, 80, 0.25);
}

.product-section__content h2 {
  margin-bottom: var(--space-4);
}

.product-section__content .lede {
  margin-bottom: 0; /* last child in the cell — grid row-gap handles spacing to details below */
}

.product-section__subhead {
  font-family: var(--font-mono);
  font-size: var(--fs-mono); /* 0.9375rem — slightly bigger than the previous caption size */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent); /* Pinnacle orange — matches the eyebrow accent */
  font-weight: 600;
  margin-top: 0; /* row-gap on .product-section__split handles vertical spacing */
  margin-bottom: var(--space-3);
}

.product-section__list {
  display: grid;
  gap: var(--space-2);
  color: var(--text-soft-on-light);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

/* Materials & options block — sits directly below the media in the side column.
   Pairing it visually with the media keeps both halves of the section balanced. */
.product-section__materials .product-section__subhead {
  margin-top: 0; /* container spacing via grid row-gap */
}

.product-section__list li {
  padding-left: 1.25rem;
  position: relative;
}

.product-section__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
}

.product-section__list li strong {
  color: var(--ink);
  font-weight: 600;
}

.product-section__cta {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.product-section__crossref {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: rgba(30, 46, 160, 0.04);
  border-left: 3px solid var(--brand-blue);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--fs-body);
  color: var(--text-soft-on-light);
}

.product-section__crossref a {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* =================== INDUSTRY LIST =================== */
.industry-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.industry-card:hover {
  transform: translateY(-4px);
  border-color: rgba(30, 46, 160, 0.2);
  box-shadow: var(--shadow-lg);
}

.industry-card__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.industry-card h3 {
  font-size: 1.375rem;
  margin-bottom: var(--space-4);
}

.industry-card__products {
  color: var(--text-soft-on-light);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-5);
  flex: 1;
}

.industry-card__products strong {
  color: var(--text-on-light);
  font-weight: 600;
}

/* =================== SPEC TABLE =================== */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.spec-table th,
.spec-table td {
  text-align: left;
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
}

.spec-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 500;
  background: var(--bone);
}

.spec-table tbody tr:hover {
  background: rgba(247, 245, 241, 0.5);
}

.spec-table__material {
  font-weight: 600;
  color: var(--ink);
}

/* =================== CALLOUT (info box) =================== */
.callout {
  padding: var(--space-6);
  background: rgba(30, 46, 160, 0.04);
  border-left: 3px solid var(--brand-blue);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.callout__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-blue);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

.callout p {
  color: var(--text-on-light);
  font-size: var(--fs-body);
}

/* Callout styling for dark sections (with or without video background) */
.section--dark .callout {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--accent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.section--dark .callout__label {
  color: var(--accent);
}

.section--dark .callout p {
  color: var(--text-on-dark);
}

.section--dark .callout p strong,
.section--dark .callout p b {
  color: white;
}

.section--dark .callout a {
  color: white;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

/* =================== 3D LOGO MARK (hero placeholder) =================== */
.hero-mark {
  width: clamp(280px, 80%, 480px);
  aspect-ratio: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(233, 78, 27, 0.25) 0%, transparent 60%);
  filter: blur(40px);
}

/* =================== CONTACT INFO =================== */
.contact-info {
  display: grid;
  gap: var(--space-5);
}

.contact-info__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.contact-info__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 46, 160, 0.08);
  border-radius: var(--radius-md);
  color: var(--brand-blue);
  flex-shrink: 0;
}

.contact-info__icon svg {
  width: 18px;
  height: 18px;
}

.contact-info__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: var(--space-1);
}

.contact-info__value {
  font-size: var(--fs-body-lg);
  font-weight: 500;
  color: var(--ink);
}

.contact-info__value a {
  color: var(--ink);
}

.contact-info__value a:hover {
  color: var(--brand-blue);
}

/* =================== TIMELINE =================== */
.timeline {
  position: relative;
  padding-left: var(--space-7);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--divider);
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-7);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__dot {
  position: absolute;
  left: -28px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bone);
}

.timeline__year {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

.timeline__item h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-3);
}

.timeline__item p {
  color: var(--text-soft-on-light);
  font-size: var(--fs-body);
}

/* =================== 404 =================== */
.page-404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ink);
  color: white;
  padding: var(--space-7);
}

.page-404 h1 {
  color: white;
  font-size: clamp(4rem, 10vw, 8rem);
  margin-bottom: var(--space-4);
}

.page-404 p {
  color: var(--text-soft-on-dark);
  font-size: var(--fs-body-lg);
  margin-bottom: var(--space-7);
  max-width: 40ch;
}

/* =================== FAQ PAGE =================== */

/* Smart search — sits above the section pills. Feels AI-assisted via the
   sparkle icon, soft glow on focus, and example-query chips below. */
.faq-search {
  margin-bottom: var(--space-7);
}
.faq-search__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.faq-search__label svg {
  width: 16px;
  height: 16px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
}
.faq-search__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: white;
  border: 2px solid var(--divider);
  border-radius: 18px;
  padding: 0 1.25rem;
  box-shadow: 0 4px 28px rgba(8, 12, 40, 0.06);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.faq-search__field:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 10px 36px rgba(233, 78, 27, 0.16),
    0 0 0 4px rgba(233, 78, 27, 0.08);
}
.faq-search__icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.faq-search__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 1.125rem 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text-on-light);
  min-width: 0;
}
.faq-search__input::placeholder {
  color: var(--text-soft-on-light);
  font-weight: 400;
}
.faq-search__clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: rgba(8, 12, 40, 0.08);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-soft-on-light);
  transition: background 0.15s, color 0.15s;
}
.faq-search__clear:hover {
  background: var(--accent);
  color: white;
}
.faq-search__field.has-value .faq-search__clear {
  display: inline-flex;
}
.faq-search__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
  align-items: center;
}
.faq-search__suggestions-label {
  font-size: 0.8125rem;
  color: var(--text-soft-on-light);
  margin-right: 0.25rem;
  font-weight: 500;
}
.faq-search__suggestion {
  background: rgba(233, 78, 27, 0.08);
  border: 1px solid rgba(233, 78, 27, 0.22);
  color: var(--text-on-light);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.faq-search__suggestion:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: translateY(-1px);
}

/* Empty / no-results state */
.faq-empty {
  display: none;
  text-align: center;
  padding: var(--space-7) 1.25rem;
  background: rgba(8, 12, 40, 0.02);
  border: 1px dashed var(--divider);
  border-radius: 18px;
  margin: var(--space-6) 0;
}
.faq-empty.is-visible {
  display: block;
}
.faq-empty h3 {
  margin: 0 0 var(--space-3);
  font-size: 1.125rem;
  color: var(--text-on-light);
}
.faq-empty p {
  color: var(--text-soft-on-light);
  margin: 0 0 var(--space-4);
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

/* Filter hides */
.faq-item.is-hidden,
.faq-section.is-hidden {
  display: none;
}

@media (max-width: 700px) {
  .faq-search__input {
    font-size: 1rem;
    padding: 0.95rem 0;
  }
  .faq-search__field {
    padding: 0 1rem;
    gap: 0.625rem;
  }
  .faq-search__icon {
    width: 18px;
    height: 18px;
  }
  .faq-search__suggestions {
    gap: 0.4rem;
  }
  .faq-search__suggestion {
    font-size: 0.75rem;
    padding: 0.3rem 0.7rem;
  }
}

.faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-9);
  justify-content: center;
}
.faq-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.125rem;
  background: rgba(8, 12, 40, 0.04);
  border: 1px solid var(--divider);
  border-radius: 999px;
  color: var(--text-on-light);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.faq-nav__link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: translateY(-1px);
}

.faq-section {
  margin-bottom: var(--space-9);
  scroll-margin-top: 100px;
}
.faq-section__header {
  margin-bottom: var(--space-6);
}
.faq-section__number {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--divider);
}
.faq-item:first-child {
  border-top: 1px solid var(--divider);
}

.faq-item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-on-light);
  line-height: 1.4;
  transition: color 0.2s;
}
.faq-item > summary::-webkit-details-marker {
  display: none;
}
.faq-item > summary::marker {
  display: none;
}
.faq-item > summary:hover {
  color: var(--accent);
}
.faq-item > summary::after {
  content: '';
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-top: 0.55rem;
}
.faq-item[open] > summary::after {
  transform: rotate(-135deg);
}
.faq-item[open] > summary {
  color: var(--accent);
}

.faq-item__answer {
  padding: 0 0 var(--space-5);
  color: var(--text-soft-on-light);
  line-height: var(--lh-relaxed);
  font-size: var(--fs-body);
  max-width: 75ch;
}
.faq-item__answer p {
  margin-bottom: var(--space-3);
}
.faq-item__answer p:last-child {
  margin-bottom: 0;
}
.faq-item__answer ul {
  margin: var(--space-3) 0;
  padding-left: 1.25rem;
}
.faq-item__answer li {
  margin-bottom: 0.5rem;
}
.faq-item__answer strong {
  color: var(--text-on-light);
}
.faq-item__answer a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.faq-item__answer a:hover {
  color: var(--text-on-light);
}

@media (max-width: 700px) {
  .faq-item > summary {
    font-size: 1rem;
    padding: var(--space-4) 0;
  }
  .faq-item > summary::after {
    width: 10px;
    height: 10px;
    margin-top: 0.45rem;
  }
  .faq-nav {
    margin-bottom: var(--space-7);
  }
  .faq-nav__link {
    font-size: 0.8125rem;
    padding: 0.5rem 0.9rem;
  }
}