/* ============================================================
   PINNACLE SIGNWORKS — MOBILE MENU (GLASS REDESIGN)
   Standalone file with a unique name so it bypasses any caching.
   Only applies at <= 900px. Loaded AFTER components.css so its
   !important rules win the cascade.
   ============================================================ */

/* DESKTOP: the JS injects icons + "All X" links on every viewport, so suppress
   them above 900px and let the original nav render normally. */
.nav-mobile-icon {
  display: none !important;
}
.nav-mobile-label {
  display: inline;
}
.nav__dropdown-all {
  display: none !important;
}

@media (max-width: 900px) {

  /* CRITICAL: .nav has backdrop-filter which establishes a containing block
     for ANY position:fixed descendants. That was clipping the menu to the
     nav's tiny 84px box. We strip backdrop-filter (and any transform/filter)
     off the nav while the menu is open so the menu's fixed positioning
     actually reaches the viewport. */
  .nav:has(.nav__links.is-open) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    perspective: none !important;
  }

  /* The logo and the hamburger/X button must sit ABOVE the menu so the user
     can still see the brand mark and tap the close button. They share .nav's
     stacking context with the fixed menu — bump them above the menu's z-index. */
  .nav__logo,
  .nav__toggle {
    position: relative;
    z-index: 110 !important;
  }

  /* When the menu is open, turn the X (hamburger bars in their rotated state)
     white so it shows up against the dark glass panel behind it. */
  .nav:has(.nav__links.is-open) .nav__toggle-bar::before,
  .nav:has(.nav__links.is-open) .nav__toggle-bar::after {
    background: white !important;
  }

  /* MENU PANEL — covers the full viewport. padding-top clears the 84px nav
     header so menu items begin below it. The nav bar keeps its normal warm
     white background and the original Pinnacle logo + dark X stay visible. */
  .nav__links {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    /* ~75% of the screen — leaves a strip of the page visible below so tapping
       there closes the menu. overflow-y:auto handles long sublists via scroll. */
    height: 75vh !important;
    height: 75dvh !important;
    max-height: 75dvh !important;
    border-radius: 0 0 20px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    /* top padding pushes content below the 84px nav header; rest is breathing room */
    padding: 84px 1rem 2rem 1rem !important;
    gap: 0.75rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background:
      radial-gradient(ellipse 90% 60% at 90% 0%, rgba(233, 78, 27, 0.18) 0%, transparent 50%),
      radial-gradient(ellipse 80% 60% at 10% 100%, rgba(30, 46, 160, 0.32) 0%, transparent 55%),
      rgba(8, 12, 40, 0.96) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
    color: white !important;
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.4s ease, opacity 0.4s ease !important;
    z-index: 40 !important; /* sits below the .nav header */
  }

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

  /* Nav item containers — full width, stacked column so dropdown nests below */
  .nav__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    position: static !important;
  }

  /* Kill the desktop orange-underline ::after for mobile menu items */
  .nav__links > a:not(.btn)::after,
  .nav__item > a::after {
    background: transparent !important;
  }
  .nav__item > a::before {
    display: none !important;
  }

  /* TOP-LEVEL ROW — glass card with icon + label */
  .nav__links > a:not(.btn),
  .nav__item > a {
    display: flex !important;
    align-items: center !important;
    gap: 0.875rem !important;
    width: 100% !important;
    padding: 0.9rem 1rem !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: white !important;
    font-size: 1.0625rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-align: left !important;
    justify-content: flex-start !important;
    transition: background 0.2s, border-color 0.2s, transform 0.15s !important;
  }

  .nav__links > a:not(.btn):active,
  .nav__item > a:active {
    transform: scale(0.985) !important;
  }

  /* The icon SQUARE on the left of each top-level item */
  .nav-mobile-icon {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s !important;
  }

  .nav-mobile-icon svg {
    width: 19px !important;
    height: 19px !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    fill: none !important;
  }

  /* Label text wrapper */
  .nav-mobile-label {
    flex: 1 !important;
    text-align: left !important;
  }

  /* Expanded state — accent gradient + glow on the row and icon */
  .nav__item--mobile-open > a {
    background: linear-gradient(90deg, rgba(233, 78, 27, 0.30), rgba(30, 46, 160, 0.18)) !important;
    border-color: rgba(233, 78, 27, 0.45) !important;
    box-shadow: 0 8px 32px rgba(233, 78, 27, 0.22) !important;
  }
  .nav__item--mobile-open > a .nav-mobile-icon {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 18px rgba(233, 78, 27, 0.55) !important;
  }

  /* Chevron at the right of dropdown rows */
  .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 0.3s !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 — nested rounded glass card, hidden by default */
  .nav__dropdown {
    display: none !important;
    position: static !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin: 0.5rem 0 0 0 !important;
    padding: 0.5rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
    min-width: 0 !important;
    z-index: auto !important;
  }
  .nav__item--mobile-open > .nav__dropdown {
    display: block !important;
    animation: navDropIn 0.25s ease !important;
  }
  @keyframes navDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .nav__dropdown::before {
    display: none !important;
  }

  /* Sub-items inside dropdown */
  .nav__dropdown a {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s !important;
    width: auto !important;
  }
  .nav__dropdown a:hover,
  .nav__dropdown a:active {
    background: rgba(255, 255, 255, 0.06) !important;
    color: white !important;
  }

  /* "All Products" / "All Industries" header row inside dropdown */
  .nav__dropdown-all {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px 8px 0 0 !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.75rem !important;
    font-weight: 600 !important;
    color: white !important;
    justify-content: space-between !important;
  }
  .nav__dropdown-all::after {
    content: '→' !important;
    margin-left: auto !important;
    color: var(--accent) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
  }

  /* CTA button — full-width orange pill with glow */
  .nav__links > a.btn.nav__cta {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin: 1.25rem 0 0 0 !important;
    padding: 1rem 1.5rem !important;
    background: var(--accent) !important;
    border: none !important;
    color: white !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 36px rgba(233, 78, 27, 0.4) !important;
    text-align: center !important;
    text-decoration: none !important;
  }
}

/* ============================================================
   MOBILE: ACCORDION CARDS (homepage) + FOOTER 2x2
   Compact each section to title-only by default; tap to expand.
   ============================================================ */
@media (max-width: 900px) {

  /* ---------- FLEX CARDS (What We Make + Who We Serve) ----------
     Collapsed: tight strip with number + uppercase compact-label.
     Expanded: image brightens; title, description, and orange pill button
     stack at the bottom of the card. The two states use DIFFERENT elements
     (compact-label vs content block) so they can't overlap. */
  .flex-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    height: auto !important;
    counter-reset: flexCardNum !important;
  }

  .flex-card {
    counter-increment: flexCardNum !important;
    display: block !important;
    grid-template-areas: none !important;
    grid-template-rows: none !important;
    flex: none !important;
    height: 78px !important;
    min-height: 0 !important;
    cursor: pointer !important;
    background: var(--ink) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    position: relative !important;
    border: none !important;
    box-shadow: none !important;
    transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .flex-card.is-expanded {
    height: 360px !important;
  }

  /* Image / gradient fills the whole card */
  .flex-card .flex-card__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    grid-area: auto !important;
    margin: 0 !important;
    filter: brightness(0.55) saturate(0.85) !important;
    transition: filter 0.45s ease !important;
  }
  .flex-card.is-expanded .flex-card__image {
    filter: brightness(0.9) saturate(1) !important;
  }

  /* Dark gradient — left-side wash in collapsed, bottom wash in expanded */
  .flex-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    transition: background 0.45s ease !important;
  }
  .flex-card.is-expanded::before {
    background:
      linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 32%, rgba(0, 0, 0, 0.15) 55%, transparent 72%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, transparent 55%) !important;
  }

  /* WHO WE SERVE icon — visible on the right of the strip; floats up to a
     larger watermark in the upper-middle when the card expands. */
  .flex-card .flex-card__icon {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 1.25rem !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    stroke-width: 1.8 !important;
    z-index: 2 !important;
    grid-area: auto !important;
    justify-self: auto !important;
    align-self: auto !important;
    pointer-events: none !important;
    transition: top 0.45s, right 0.45s, left 0.45s, transform 0.45s, width 0.45s, height 0.45s, color 0.3s !important;
  }
  .flex-card.is-expanded .flex-card__icon {
    top: 28% !important;
    right: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 60px !important;
    height: 60px !important;
    color: rgba(255, 255, 255, 0.5) !important;
  }

  .flex-card .flex-card__overlay {
    display: none !important;
  }

  /* COMPACT LABEL — strip text (replaces the .flex-card__title in collapsed
     state). Has a number badge before it. Hidden when expanded. */
  .flex-card__compact-label {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    left: 1.25rem !important;
    right: 4.5rem !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    align-items: center !important;
    gap: 1rem !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: white !important;
    font-family: var(--font-display) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    line-height: 1.15 !important;
    writing-mode: horizontal-tb !important; /* override desktop rotation */
    text-orientation: mixed !important;
    text-shadow: none !important;
    opacity: 0.95 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    transition: opacity 0.25s !important;
  }
  .flex-card__compact-label::before {
    content: counter(flexCardNum, decimal-leading-zero) !important;
    display: inline-block !important;
    color: white !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    min-width: 30px !important;
    text-transform: none !important;
    flex-shrink: 0 !important;
  }
  .flex-card.is-expanded .flex-card__compact-label {
    opacity: 0 !important;
  }

  /* CONTENT BLOCK — anchored to bottom of card, fades in when expanded */
  .flex-card .flex-card__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 1.25rem 1.25rem !important;
    margin: 0 !important;
    background: transparent !important;
    z-index: 2 !important;
    opacity: 0 !important;
    transform: translateY(8px) !important;
    transition: opacity 0.3s 0.1s, transform 0.3s 0.1s !important;
    pointer-events: none !important;
    grid-area: auto !important;
  }
  .flex-card.is-expanded .flex-card__content {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  /* Title in expanded view — natural block flow inside content */
  .flex-card__title {
    position: static !important;
    display: block !important;
    color: white !important;
    font-family: var(--font-display) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    margin: 0 0 0.5rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    inset: auto !important;
    transform: none !important;
    grid-area: auto !important;
    text-align: left !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
  }
  .flex-card__title::before,
  .flex-card__title::after {
    display: none !important;
  }

  /* Description */
  .flex-card__desc {
    position: static !important;
    display: block !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
    background: transparent !important;
    inset: auto !important;
    transform: none !important;
    grid-area: auto !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Orange pill button */
  .flex-card__link {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: var(--accent) !important;
    color: white !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 999px !important;
    font-family: var(--font-display) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin: 0 !important;
    inset: auto !important;
    transform: none !important;
    grid-area: auto !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    align-self: flex-start !important;
    justify-self: flex-start !important;
    transition: background 0.2s !important;
    box-shadow: 0 6px 16px rgba(233, 78, 27, 0.35) !important;
  }
  .flex-card__link:active {
    transform: scale(0.97) !important;
  }
  .flex-card__link svg {
    width: 14px !important;
    height: 14px !important;
    stroke: white !important;
    fill: none !important;
  }

  /* ---------- PILLARS (Why Pinnacle) ---------- */
  .pillar {
    cursor: pointer !important;
    padding: 1rem 1.25rem !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: background 0.2s, border-color 0.2s !important;
  }
  .pillar.is-expanded {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(233, 78, 27, 0.35) !important;
  }
  .pillar__number {
    display: block !important;
    color: var(--accent) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.18em !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
  }
  .pillar h3 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: white !important;
    font-size: 1.0625rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }
  .pillar h3::after {
    content: '' !important;
    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;
    border-right: 2px solid var(--accent) !important;
    border-bottom: 2px solid var(--accent) !important;
    transform: rotate(45deg) !important;
    transition: transform 0.3s !important;
    margin-left: 0.75rem !important;
    flex-shrink: 0 !important;
  }
  .pillar.is-expanded h3::after {
    transform: rotate(-135deg) !important;
  }
  .pillar p {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
    transition: max-height 0.35s ease, opacity 0.3s, margin 0.3s !important;
  }
  .pillar.is-expanded p {
    max-height: 400px !important;
    opacity: 1 !important;
    margin-top: 0.75rem !important;
  }

  /* ---------- PROCESS STEPS (How it works) ---------- */
  .process-step {
    cursor: pointer !important;
    padding: 1rem 1.25rem !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
  }
  .process-step.is-expanded {
    border-color: var(--accent) !important;
    box-shadow: 0 4px 16px rgba(233, 78, 27, 0.12) !important;
  }
  .process-step__number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    margin-bottom: 0.75rem !important;
  }
  .process-step h3 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: var(--ink) !important;
    font-size: 1.0625rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }
  .process-step h3::after {
    content: '' !important;
    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;
    border-right: 2px solid var(--accent) !important;
    border-bottom: 2px solid var(--accent) !important;
    transform: rotate(45deg) !important;
    transition: transform 0.3s !important;
    margin-left: 0.75rem !important;
    flex-shrink: 0 !important;
  }
  .process-step.is-expanded h3::after {
    transform: rotate(-135deg) !important;
  }
  .process-step p {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: var(--text-soft-on-light) !important;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
    transition: max-height 0.35s ease, opacity 0.3s, margin 0.3s !important;
  }
  .process-step.is-expanded p {
    max-height: 400px !important;
    opacity: 1 !important;
    margin-top: 0.75rem !important;
  }

  /* ---------- HOW IT WORKS — top CTAs hidden, bottom CTAs shown ---------- */
  .how-it-works__top-ctas {
    display: none !important;
  }
  .how-it-works__mobile-ctas {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    margin-top: 1.75rem !important;
    justify-content: center !important;
  }
  .how-it-works__mobile-ctas .btn {
    flex: 1 1 200px !important;
    justify-content: center !important;
  }

  /* ---------- FOOTER — 2x2 grid ---------- */
  .footer__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.75rem 1.25rem !important;
  }
  .footer__brand {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
  }
  .footer__brand img {
    max-width: 140px !important;
    margin: 0 auto 0.5rem !important;
    display: block !important;
  }
  .footer__tagline {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
  .footer__col h4 {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }
  .footer__col ul li {
    margin-bottom: 0.375rem !important;
    font-size: 0.875rem !important;
  }
}

/* DESKTOP: mobile-injected CTAs stay hidden by default */
.how-it-works__mobile-ctas {
  display: none;
}

/* ============================================================
   HERO — CINEMATIC FULL-BLEED VARIANT
   Loaded after components.css so it overrides the card-style hero.
   Full-screen video, content centered at the bottom, no visible frame.
   ============================================================ */
.hero--cinematic {
  position: relative !important;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden;
  background: var(--ink);
}

/* Strip the original .hero ::before/::after gradients — the video bg + our
   own overlay below replace them. */
.hero.hero--cinematic::before,
.hero.hero--cinematic::after {
  display: none !important;
}

/* Full-bleed video */
.hero__video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
}

.hero__video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.82) brightness(0.55) contrast(1.05);
  animation: kenBurns 32s ease-in-out infinite alternate;
  will-change: transform;
}

/* Heavy bottom gradient — gives the text a place to live; subtle warm glow
   from the upper-right adds depth. */
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(8, 12, 40, 0.95) 0%,
      rgba(8, 12, 40, 0.78) 25%,
      rgba(8, 12, 40, 0.45) 55%,
      rgba(8, 12, 40, 0.25) 80%,
      rgba(8, 12, 40, 0.45) 100%),
    radial-gradient(ellipse at 80% 25%, rgba(233, 78, 27, 0.12) 0%, transparent 50%);
}

/* Content positioning — pushed deep toward the bottom so the video reads
   clearly above it. Scroll cue is hidden in this variant to give the content
   room without competition. */
.hero__inner--cinematic {
  position: relative;
  z-index: 4;
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  padding-top: clamp(7rem, 14vw, 10rem);
  padding-bottom: clamp(0.5rem, 1vw, 1rem);
}

.hero--cinematic .hero__scroll-cue {
  display: none !important;
}

.hero--cinematic .hero__content {
  max-width: 960px;
  width: 100%;
  text-align: left;
  margin: 0 auto;
}

/* Eyebrow */
.hero--cinematic .hero__eyebrow {
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  margin-bottom: var(--space-5);
}

/* H1 — big, one line where possible, with the orange accent line beneath
   "Work That Matters." (the .hero__accent-line is already there in markup). */
.hero--cinematic h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1.05;
  font-weight: 800;
  max-width: none;
  margin-bottom: var(--space-6);
  text-shadow: 0 6px 32px rgba(0, 0, 0, 0.55);
  text-wrap: balance;
}

/* Defensive: a stray <br> in older HTML would force two lines. Suppress it. */
.hero--cinematic h1 br {
  display: none;
}

.hero--cinematic .hero__sub {
  color: #fff;
  font-weight: 500;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  max-width: 720px;
  margin-bottom: var(--space-6);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

.hero--cinematic .hero__ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.hero--cinematic .hero__ctas .btn--ghost-light {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 900px) {
  /* MOBILE CINEMATIC HERO — full-bleed video with much-lighter overlay
     The user wants the video animation prominently visible behind the copy.
     Strategy: switch back to object-fit: cover (so the video fills the whole
     hero), DRAMATICALLY lighten the dark gradient overlay (was opaque navy/
     black, now barely there), and beef up text-shadow on every text element
     so the copy stays razor-sharp on its own without leaning on the overlay. */
  .hero--cinematic {
    min-height: 100vh;
    min-height: 100dvh;
    background: #000 !important;
  }
  .hero__inner--cinematic {
    padding-top: clamp(6rem, 16vw, 8rem);
    padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
    justify-content: flex-start !important;
  }
  .hero--cinematic .hero__content {
    text-align: left;
  }
  .hero--cinematic h1 {
    font-size: clamp(2.25rem, 9vw, 3.5rem);
  }

  /* Video is full-bleed but heavily faded — atmospheric texture rather than
     a focal element. The TEXT is the focus of the mobile hero. */
  .hero--cinematic .hero__video-bg video {
    object-fit: cover !important;
    object-position: center !important;
    opacity: 0.28 !important;
    filter: saturate(0.7) brightness(0.85) contrast(1.05) !important;
  }

  /* Light gradient at the bottom just to anchor the text — the heavy lifting
     for legibility now comes from the strong text-shadow below + the already-
     faded video. */
  .hero--cinematic .hero__bg-overlay {
    background:
      linear-gradient(to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(0, 0, 0, 0.1) 60%,
        rgba(0, 0, 0, 0) 90%,
        rgba(0, 0, 0, 0) 100%) !important;
  }

  /* Subtle grid overlay still adds depth without competing */
  .hero--cinematic .hero__grid-overlay {
    opacity: 0.2 !important;
  }

  /* Beefed-up text shadows compensate for the much lighter backdrop —
     keeps every line razor-sharp without relying on the overlay. */
  .hero--cinematic .hero__eyebrow {
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.95),
      0 2px 16px rgba(0, 0, 0, 0.85),
      0 0 24px rgba(0, 0, 0, 0.6) !important;
  }
  .hero--cinematic h1 {
    text-shadow:
      0 2px 4px rgba(0, 0, 0, 0.95),
      0 4px 22px rgba(0, 0, 0, 0.85),
      0 0 36px rgba(0, 0, 0, 0.6) !important;
  }
  .hero--cinematic .hero__sub {
    text-shadow:
      0 1px 3px rgba(0, 0, 0, 0.95),
      0 2px 16px rgba(0, 0, 0, 0.85),
      0 0 24px rgba(0, 0, 0, 0.55) !important;
  }
}

/* ============================================================
   PRODUCTS PAGE — MOBILE STACK ORDER
   Each section flattens to: eyebrow → H2 → video → lede →
   common applications → materials & options → CTA buttons.
   Desktop zig-zag layout is untouched.
   ============================================================ */
@media (max-width: 900px) {

  /* The reveal animations don't translate well once we flatten content +
     details with display:contents, so we let everything show immediately. */
  .product-section .reveal,
  .product-section .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Flatten the .content and .details wrappers so their children (eyebrow,
     h2, lede, common-applications subhead/list, CTA) become direct flex items
     of .product-section__split and can be reordered freely. */
  .product-section__content,
  .product-section__details {
    display: contents !important;
  }

  /* Convert split (grid on desktop) to a flex column */
  .product-section__split,
  .product-section__split--reverse {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  /* Neutralize any grid placements from desktop rules on the wrappers */
  .product-section__content,
  .product-section__details,
  .product-section__media,
  .product-section__materials {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto !important;
    justify-self: auto !important;
    max-width: 100% !important;
  }

  /* ORDER — selectors target the children at their TRUE DOM parents (the wrappers).
     display:contents on the wrappers lifts these children into the flex layout of
     .product-section__split, but selectors still see the DOM, so we anchor each
     rule to its actual parent. */

  /* 1. Eyebrow + 2. H2 + 4. Lede live inside .product-section__content */
  .product-section__content > .eyebrow {
    order: 1 !important;
    margin-bottom: 0.75rem !important;
  }
  .product-section__content > h2 {
    order: 2 !important;
    margin-bottom: 1.25rem !important;
  }
  .product-section__content > .lede {
    order: 4 !important;
    margin: 0 0 1.5rem !important;
  }

  /* 3. Video (direct child of split) */
  .product-section__split > .product-section__media,
  .product-section__split--reverse > .product-section__media {
    order: 3 !important;
    margin: 0 0 1.5rem !important;
    width: 100% !important;
  }

  /* 5. Common applications subhead + list, plus 7. crossref + 8. CTA — all
     live inside .product-section__details */
  .product-section__details > .product-section__subhead {
    order: 5 !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
  }
  .product-section__details > .product-section__list {
    order: 5 !important;
    margin: 0 0 1.5rem !important;
  }
  .product-section__details > .product-section__crossref {
    order: 7 !important;
    margin: 0 0 1rem !important;
  }
  .product-section__details > .product-section__cta {
    order: 8 !important;
    margin-top: 0.5rem !important;
  }

  /* 6. Materials block stays as a wrapper — its internal subhead + list belong together */
  .product-section__split > .product-section__materials,
  .product-section__split--reverse > .product-section__materials {
    order: 6 !important;
    margin: 0 0 1.5rem !important;
  }
  .product-section__materials > .product-section__subhead {
    margin-top: 0 !important;
  }
}