/* =============================================
   PATRIOT PRODUCTS GROUP — Homepage
   Font: Gotham (with Montserrat fallback)
   Brand colors extracted from logo assets
   ============================================= */

/* ---- FONT SETUP ----
   Headings: Gotham Bold / Medium (Montserrat fallback)
   Body:     Open Sans
   To use licensed Gotham, place .woff2/.woff files in ../fonts/ and uncomment:

@font-face { font-family:'Gotham'; src:url('../fonts/Gotham-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham-Black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
*/
@font-face { font-family:'Aero Matics'; src:url('../fonts/AeroMatics-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Aero Matics'; src:url('../fonts/AeroMatics-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

/* ---- TOKENS ---- */
:root {
  --dark-green:   #1B3C34;
  --field-green:  #2D5A47;
  --action-green: #6B9E3A;
  --tan:          #C1BC98;
  --bg-dark:      #231F20;
  --white:        #FFFFFF;
  --gray-200:     #C0C0C0;
  --gray-400:     #888888;
  --gray-600:     #555555;
  --gold:         #A0935A;
  /* Heading font: Gotham Bold / Medium */
  --ff-heading: 'Gotham', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Body font: Open Sans */
  --ff-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max-w: 1320px;
  --gutter: 48px;
}

/* ---- RESET ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; width: 100%; overflow-x: hidden; }
body { font-family: var(--ff-body); font-weight: 400; color: var(--white); background: var(--bg-dark); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; }
button { font-family:inherit; cursor:pointer; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }

/* ---- SCROLL ANIMATIONS ---- */
[data-animate] { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
[data-animate].is-visible { opacity: 1; transform: translateY(0); }

/* ================================================
   HEADER
   ================================================ */
.header { position: fixed; top:0; left:0; width:100%; z-index:1100; transition: background .35s ease, box-shadow .35s ease; }
.header--scrolled { background: rgba(13,13,13,.92); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(255,255,255,.04); }
.header__inner { display:flex; align-items:center; justify-content:space-between; max-width: var(--max-w); margin:0 auto; padding: 28px var(--gutter); }
.header__logo-img { height:38px; width:auto; }
/* Homepage only: slightly larger logo (client request, 2026-08-12) */
.home .header__logo-img { height:44px; }

/* NAV */
.nav__list { display:flex; gap:36px; align-items:center; }
.nav__link { font-family: 'Aero Matics', var(--ff-heading); font-size: 12px; font-weight: 400; text-transform:uppercase; letter-spacing: 2px; color: var(--white); padding: 6px 0; position:relative; transition: color .25s; }
.nav__link::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background: var(--action-green); transition: width .3s cubic-bezier(.22,1,.36,1); }
.nav__link:hover { color: var(--action-green); }
.nav__link:hover::after { width:100%; }
/* CTA nav link */
.nav__link--cta { background: var(--action-green); color: var(--white) !important; padding: 10px 22px; border-radius: 2px; letter-spacing: 1.5px; font-weight: 700; transition: background .3s, color .25s; }
.nav__link--cta::after { display:none; }
.nav__link--cta:hover { background: var(--field-green); color: var(--white) !important; }

/* Mega Menu */
.nav__item { position:relative; }
/* Invisible hover bridge so cursor doesn't lose hover crossing the gap */
.nav__item--has-mega::after,
.nav__item--has-drop::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 20px; background: transparent; }
.mega { position:absolute; top:calc(100% + 12px); left:50%; transform: translateX(-50%) translateY(8px); width: 880px; background: var(--dark-green); padding: 32px; opacity:0; visibility:hidden; pointer-events:none; transition: all .3s cubic-bezier(.22,1,.36,1); box-shadow: 0 24px 64px rgba(0,0,0,.5); }
.nav__item--has-mega:hover .mega,
.mega:hover { opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0); }
.mega__grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; }
.mega__card { text-align:center; padding:12px; border-radius:4px; transition: background .2s; }
.mega__card:hover { background: rgba(255,255,255,.06); }
.mega__img { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.mega__img img { max-height:80px; object-fit:contain; }
.mega__label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color: var(--white); line-height:1.4; }

/* Dropdown */
.dropdown { position:absolute; top:calc(100% + 12px); left:50%; transform: translateX(-50%) translateY(8px); min-width:200px; background: var(--dark-green); border:1px solid rgba(255,255,255,.06); border-radius:6px; padding:12px 0; opacity:0; visibility:hidden; pointer-events:none; transition: all .3s cubic-bezier(.22,1,.36,1); box-shadow: 0 16px 48px rgba(0,0,0,.4); }
.nav__item--has-drop:hover .dropdown,
.dropdown:hover { opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0); }
.dropdown__link { display:block; padding:10px 24px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; transition: background .2s, color .2s; }
.dropdown__link:hover { background:rgba(255,255,255,.08); color:var(--action-green); }

/* Burger */
.burger { display:none; background:none; border:none; padding:8px; flex-direction:column; gap:6px; }
.burger__line { display:block; width:26px; height:2px; background:var(--white); border-radius:1px; transition: all .35s ease; transform-origin: center; }
.burger--open .burger__line:nth-child(1) { transform:rotate(45deg) translate(5.5px,5.5px); }
.burger--open .burger__line:nth-child(2) { opacity:0; }
.burger--open .burger__line:nth-child(3) { transform:rotate(-45deg) translate(5.5px,-5.5px); }

/* Alignment and Flexbox awesomeness */
[class^="flex-"], [class*=" flex-"]                             { display: flex; flex-direction: row; flex-wrap: nowrap; }
[class^="flex-"].column, [class*=" flex-"].column               { flex-direction: column; }
[class^="flex-"].wrap, [class*=" flex-"].wrap                   { flex-wrap: wrap; }
[class^="flex-"].inline, [class*=" flex-"].inline               { display: inline-flex; }
[class^="flex-top-"], [class*=" flex-top-"]                     { align-items: flex-start; }
[class^="flex-middle-"], [class*=" flex-middle-"]               { align-items: center; }
[class^="flex-bottom-"], [class*=" flex-bottom-"]               { align-items: flex-end; }
[class^="flex-stretch-"], [class*=" flex-stretch-"]             { align-items: stretch; }
.flex-top-left, .flex-middle-left, .flex-bottom-left            { justify-content: flex-start; }
.flex-top-center, .flex-middle-center, .flex-bottom-center      { justify-content: center; }
.flex-top-right, .flex-middle-right, .flex-bottom-right         { justify-content: flex-end; }
.flex-top-justify, .flex-middle-justify, .flex-bottom-justify   { justify-content: space-between; }

/* ================================================
   HERO
   ================================================ */
.hero { position:relative; height:100vh; min-height:650px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
/* Slideshow layers */
.hero__slides { position:absolute; inset:0; z-index:0; }
.hero__slide { position:absolute; inset:0; opacity:0; transition: opacity 1.2s cubic-bezier(.4,0,.2,1); }
.hero__slide--active { opacity:1; }
.hero__slide img { width:100%; height:100%; object-fit:cover; }
/* Ken Burns subtle zoom */
.hero__slide--active img { animation: heroZoom 7s ease-out forwards; }
@keyframes heroZoom {
  from { transform:scale(1); }
  to   { transform:scale(1.06); }
}
.hero__overlay {
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,.55) 100%); }
.hero__content { position:relative; z-index:2; text-align:center; padding:0 24px; }
.hero__kicker { display:block; font-family: var(--ff-heading); font-size:23px; font-weight:500; text-transform:uppercase; letter-spacing:5px; color: var(--action-green); margin-bottom:20px; }
.hero__title { font-family: var(--ff-heading); font-size: clamp(38px, 5.5vw, 72px); font-weight: 700; text-transform:uppercase; letter-spacing: 2px; line-height:1.05; }
.hero__sub { font-family: var(--ff-body); font-size: clamp(14px, 1.4vw, 17px); font-weight: 400; color: var(--white); max-width: 540px; margin: 24px auto 0; line-height: 1.7; }
.hero__ctas { display: flex; gap: 20px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.btn--hero { font-size: 11px; letter-spacing: 2.5px; }
.hero__dots { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:3; }
.hero__dot { width:12px; height:12px; border:2px solid rgba(255,255,255,.4); background:transparent; transition: all .3s; border-radius:0; }
.hero__dot--active { background: var(--action-green); border-color: var(--action-green); }
/* Progress bar */
.hero__progress { position:absolute; bottom:0; left:0; width:100%; height:3px; background:rgba(255,255,255,.1); z-index:3; }
.hero__progress-bar { height:100%; width:0; background: var(--action-green); transition: none; }
.hero__progress-bar--running { animation: heroProgress var(--hero-interval, 6s) linear forwards; }
@keyframes heroProgress {
  from { width:0; }
  to   { width:100%; }
}

/* ================================================
   INTRO
   ================================================ */
.intro { background: var(--dark-green); padding: 100px var(--gutter); text-align: center; }
.intro__inner { max-width:640px; margin:0 auto; }
/* Icon wrapper with animated "A" rings */
.intro__icon-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto 28px; display: flex; align-items: center; justify-content: center; }
.intro__icon { position: relative; z-index: 2; height: 80px; width: 80px; object-fit: contain; }
.intro__ring { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; object-fit: contain; transform: translate(-50%, -50%) scale(1); opacity: 0; z-index: 1; pointer-events: none; animation: introPulse 3s ease-out infinite; }
.intro__ring--1 { animation-delay: 0s; }
.intro__ring--2 { animation-delay: 1s; }
.intro__ring--3 { animation-delay: 2s; }

@keyframes introPulse {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: .3; }
  80%  { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}
.intro__heading { font-family: var(--ff-heading); font-size: clamp(20px, 2.3vw, 27px); font-weight:700; text-transform:uppercase; letter-spacing:3px; line-height:1.4; margin-bottom:24px; color: var(--tan); }
.intro__text { font-size:15px; line-height:1.85; font-weight:400; color: rgba(255,255,255,.72); max-width:500px; margin:0 auto; }

/* ================================================
   VALUE PROPS — headline + three copy boxes
   ================================================ */
.value-props { background: var(--bg-dark); padding: 96px var(--gutter); }
.value-props__inner { max-width: var(--max-w); margin: 0 auto; text-align: center; }
.value-props__heading { font-family: var(--ff-heading); font-size: clamp(19px, 2.2vw, 26px); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; line-height: 1.55; color: var(--tan); max-width: 1040px; margin: 0 auto 56px; }
.value-props__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* CTAs from the retired intro section. Green fills, secondary a step darker;
   the dash starts flush at the box edge (site-wide line-from-the-edge motif)
   in the section black so it cuts into the green. */
.value-props .hero__ctas { margin-top: 56px; }
.value-props .hero__ctas .btn { background: var(--action-green); padding: 18px 36px 18px 0; color: var(--white); }
.value-props .hero__ctas .btn:hover { background: #5C8A31; color: var(--white); }
.value-props .hero__ctas .btn--line { background: #5C8A31; }
.value-props .hero__ctas .btn--line:hover { background: var(--action-green); }
.value-props .hero__ctas a.btn::before { background: var(--bg-dark); }
.value-props__card { position: relative; background: var(--dark-green); padding: 44px 36px; text-align: left; }
.value-props__card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--action-green); }
.value-props__card-title { position: relative; padding-left: 34px; font-family: var(--ff-heading); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; line-height: 1.6; color: var(--tan); margin-bottom: 14px; }
/* Patriot chevron as the bullet. The glyph sits centred in a square canvas, so
   the 22px box centres on the 24px first line and wrapped lines hang clear. */
.value-props__card-arrow { position: absolute; left: 0; top: 1px; width: 22px; height: auto; object-fit: contain; }
.value-props__card-text { font-size: 15px; line-height: 1.85; color: rgba(255,255,255,.72); }

/* ================================================
   INDUSTRY GRID — full-bleed wall-to-wall
   Layout (4 cols × 4 rows):
   Row 1: sm-a  | med-a | lg-a  | lg-a
   Row 2: sm-b  | med-a | lg-a  | lg-a
   Row 3: lg-b  | lg-b  | med-b | sm-c
   Row 4: lg-b  | lg-b  | med-b | sm-d
   ================================================ */
.grid-section { display: grid; grid-template-columns: 1fr 1.5fr 1.5fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; grid-template-areas:
    "sm-a  med-a  lg-a  lg-a"
    "sm-b  med-a  lg-a  lg-a"
    "lg-b  lg-b   med-b sm-c"
    "lg-b  lg-b   med-b sm-d"; gap: 6px; width: 100%; height: 640px; background: var(--white); padding: 0; }
.grid-card { position: relative; overflow: hidden; display: block; min-height: 0; }
.grid-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease; }
.grid-card:hover .grid-card__img { transform: scale(1.06); filter: brightness(.55); }
/* Label overlay — dark bar, bottom-right */
.grid-card__overlay { position: absolute; bottom: 16px; right: 16px; max-width: calc(100% - 24px); box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: rgba(0,0,0,.82); opacity: 0; transform: translateY(4px); transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); }
.grid-card:hover .grid-card__overlay { opacity: 1; transform: translateY(0); }
.grid-card__label { font-family: var(--ff-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 4px; color: var(--white); white-space: normal; line-height: 1.5; text-align: left; position: relative; padding-left: 22px; }
.grid-card__label::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 2.5px; background: var(--action-green); }
/* Named grid areas */
.grid-card--sm-a  { grid-area: sm-a; }
/* When the sm-b slot is unused, stretch sm-a to fill both small slots */
.grid-section:not(:has(.grid-card--sm-b)) .grid-card--sm-a { grid-area: sm-a-start / sm-a-start / sm-b-end / sm-a-end; }
.grid-card--sm-b  { grid-area: sm-b; }
/* Mirror of the sm-a rule: with sm-d unused, sm-c fills both small slots */
.grid-section:not(:has(.grid-card--sm-d)) .grid-card--sm-c { grid-area: sm-c-start / sm-c-start / sm-d-end / sm-c-end; }
.grid-card--med-a { grid-area: med-a; }
.grid-card--lg-a  { grid-area: lg-a; }
.grid-card--lg-b  { grid-area: lg-b; }
.grid-card--med-b { grid-area: med-b; }
.grid-card--sm-c  { grid-area: sm-c; }
/* When the sm-d slot is unused, stretch sm-c to fill both small slots */
.grid-section:not(:has(.grid-card--sm-d)) .grid-card--sm-c { grid-area: sm-c-start / sm-c-start / sm-d-end / sm-c-end; }
.grid-card--sm-d  { grid-area: sm-d; }

/* ================================================
   FEATURED PRODUCT
   ================================================ */
.product { background: linear-gradient(180deg, var(--dark-green) 0%, var(--bg-dark) 100%); padding: 96px var(--gutter) 72px; text-align:center; }
.product__inner { max-width: var(--max-w); margin:0 auto; }
.product__kicker { display:block; font-family: var(--ff-heading); font-size:23px; font-weight:500; text-transform:uppercase; letter-spacing:5px; color: var(--white); margin-bottom:12px; }
.product__title { font-family: var(--ff-heading); font-size: clamp(32px, 4vw, 56px); font-weight:700; text-transform:uppercase; letter-spacing:2px; margin-bottom:56px; }
.product__showcase { position:relative; max-width:800px; margin:0 auto 48px; }
.product__img { width:100%; }
.product__callout { position:absolute; display:flex; align-items:center; gap:12px; }
.product__callout--left { top:28%; left:2%; }
.product__callout--right { bottom:30%; right:2%; }
.product__callout-line { display:block; width:48px; height:1px; background: var(--action-green); }
.product__callout-text { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:2px; color: rgba(255,255,255,.6); white-space:nowrap; }
.product__dots { display:flex; gap:10px; justify-content:flex-end; max-width:800px; margin:0 auto; }
.product__dot { width:12px; height:12px; border:2px solid rgba(255,255,255,.35); background:transparent; transition: all .3s; cursor: pointer; }
.product__dot--active { background:var(--action-green); border-color:var(--action-green); }

/* Stack carousel slides in the same grid cell so only the active one is visible. */
.product__slides { display: grid; }
.product__slide { grid-column: 1; grid-row: 1; opacity: 0; visibility: hidden; transition: opacity 250ms ease; pointer-events: none; }
.product__slide--active { opacity: 1; visibility: visible; pointer-events: auto; }

/* model-viewer needs an explicit size; the default is 300x150. */
.product__model { display: block; width: 100%; aspect-ratio: 4 / 3; min-height: 320px; background: transparent; --poster-color: transparent; }

/* 3D variant — break out to nearly the full viewport so the model dominates the hero. */
.product__showcase--3d { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 48px; }
.product__showcase--3d .product__model { aspect-ratio: auto; height: 75vh; min-height: 500px; max-height: 900px; width: 100%; }
/* Pin callouts to the original 800px inner band so they don't fly to viewport edges. */
.product__showcase--3d .product__callout { left: auto; right: auto; }
.product__showcase--3d .product__callout--left  { top: 28%;    left:  max(2%, calc(50vw - 400px)); }
.product__showcase--3d .product__callout--right { bottom: 30%; right: max(2%, calc(50vw - 400px)); }
@media (max-width: 720px) {
  .product__showcase--3d .product__model { height: 60vh; min-height: 360px; }
}

/* ---- Feature hotspots (Quick Pick / Quick Release) ---- */
.feature-spot {
  /* model-viewer reserves `transform` on slotted hotspots, so the button is a
     zero-size anchor and every visual is absolutely positioned off the point. */
  position: relative; display: block; width: 0; height: 0; overflow: visible;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--ff-heading);
  transition: opacity .3s;
}
/* Faded when the anchor faces away from the camera (toggled via hotspot-visibility
   event). Still clickable: at the default framing Quick Release sits on the far
   side of the enclosed unit, and blocking pointer events there left the feature
   unreachable without orbiting the model first. */
.feature-spot--behind { opacity: .45; }
/* Invisible hit area centred on the anchor — the visible dot is only 14px,
   far too small a touch target on its own. */
.feature-spot::before {
  content: '';
  position: absolute; left: -24px; top: -24px;
  width: 48px; height: 48px; border-radius: 50%;
}

.feature-spot__dot {
  position: absolute; left: -9px; top: -9px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--action-green);
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 0 12px rgba(107,158,58,.9);
  transition: transform .25s, box-shadow .25s;
}
.feature-spot__pulse {
  position: absolute; left: -9px; top: -9px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--action-green);
  animation: featurePulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes featurePulse {
  0%   { transform: scale(1);   opacity: .9; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.feature-spot__label {
  position: absolute; left: 16px; top: -16px;
  display: inline-block;
  padding: 7px 12px;
  background: rgba(12,17,22,.85);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;
  white-space: nowrap;
  transition: background .25s, border-color .25s, color .25s;
}
.feature-spot:hover .feature-spot__dot,
.feature-spot--active .feature-spot__dot {
  transform: scale(1.35);
  box-shadow: 0 0 22px rgba(107,158,58,1), 0 0 44px rgba(107,158,58,.5);
}
.feature-spot:hover .feature-spot__pulse,
.feature-spot--active .feature-spot__pulse { animation-duration: 1.1s; }
.feature-spot:hover .feature-spot__label,
.feature-spot--active .feature-spot__label {
  background: var(--action-green); border-color: var(--action-green); color: #fff;
}
.feature-spot:focus-visible .feature-spot__label { outline: 2px solid var(--action-green); outline-offset: 2px; }

/* ---- Feature detail card ---- */
.feature-card {
  position: absolute;
  top: 18%;
  /* Sits further out toward the edge so it clears the unit. */
  right: max(2%, calc(50vw - 640px));
  width: min(320px, 80vw);
  text-align: left;
  background: linear-gradient(160deg, rgba(27,60,52,.92), rgba(12,17,22,.94));
  border: 1px solid rgba(107,158,58,.45);
  border-left: 3px solid var(--action-green);
  padding: 22px 24px 24px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  opacity: 0; transform: translateX(16px);
  transition: opacity .35s ease, transform .35s ease;
  z-index: 5;
}
.feature-card--open { opacity: 1; transform: translateX(0); }
/* Enclosure toggle over the homepage 3D viewer. */
.product__enclosure-toggle { top: 24px; right: max(2%, calc(50vw - 640px)); }
.feature-card__kicker {
  display: block; font-family: var(--ff-heading);
  font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--action-green); margin-bottom: 8px;
}
.feature-card__title {
  font-family: var(--ff-heading);
  font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--white); margin: 0 0 10px;
}
.feature-card__text { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0; }
.feature-card__close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,.55); font-size: 22px; line-height: 1;
  transition: color .2s;
}
.feature-card__close:hover { color: var(--white); }

/* ---- Feature card video placeholder ---- */
.feature-card__video {
  display: block; width: 100%;
  margin-top: 14px; padding: 0;
  background: none; border: 0; cursor: pointer;
  text-align: left;
}
.feature-card__video-frame {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; width: 100%;
  background:
    linear-gradient(135deg, rgba(107,158,58,.16), rgba(12,17,22,.6)),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);
  border: 1px solid rgba(107,158,58,.4);
  transition: border-color .25s, box-shadow .25s;
}
/* Poster still behind the play button; the diagonal-stripe placeholder is
   dropped once a real thumbnail is present. */
.feature-card__video-frame--poster { background: var(--bg-dark); overflow: hidden; }
.feature-card__video-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(.62);
  transition: filter .25s, transform .25s;
}
.feature-card__video:hover .feature-card__video-thumb { filter: brightness(.78); transform: scale(1.03); }
.feature-card__video-play {
  display: block; width: 0; height: 0;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
  position: relative; z-index: 1;
}
.feature-card__video-frame::before {
  content: ''; position: absolute;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--action-green);
  box-shadow: 0 0 20px rgba(107,158,58,.55);
  transition: transform .25s, box-shadow .25s;
}
.feature-card__video:hover .feature-card__video-frame { border-color: var(--action-green); box-shadow: 0 0 24px rgba(107,158,58,.25); }
.feature-card__video:hover .feature-card__video-frame::before { transform: scale(1.12); box-shadow: 0 0 30px rgba(107,158,58,.8); }
.feature-card__video:focus-visible .feature-card__video-frame { outline: 2px solid var(--action-green); outline-offset: 2px; }
.feature-card__video-caption {
  display: block; margin-top: 8px;
  font-family: var(--ff-heading);
  font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--action-green);
}

/* ---- Contact map: address listing beside the map ---- */
.osm-locations__title { margin-bottom: 28px; }
.osm-locations__item { margin: 0 0 22px; line-height: 1.7; }
.osm-locations__item:last-child { margin-bottom: 0; }
.osm-locations__item strong { display: inline-block; margin-bottom: 4px; }

/* ---- Feature demo video popup ---- */
.video-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.video-modal[hidden] { display: none; }
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(5,8,11,.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.video-modal__dialog {
  position: relative; z-index: 1;
  width: min(880px, 92vw);
  background: linear-gradient(160deg, rgba(27,60,52,.97), rgba(12,17,22,.98));
  border: 1px solid rgba(107,158,58,.45);
  border-left: 3px solid var(--action-green);
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  padding: 16px;
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .3s ease, transform .3s ease;
}
.video-modal--open .video-modal__dialog { opacity: 1; transform: translateY(0) scale(1); }
.video-modal__close {
  position: absolute; top: -38px; right: -4px;
  background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,.7); font-size: 30px; line-height: 1;
  transition: color .2s;
}
.video-modal__close:hover { color: var(--white); }
.video-modal__body { position: relative; aspect-ratio: 16 / 9; background: #05080b; }
.video-modal__player { width: 100%; height: 100%; display: block; }
.video-modal__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center;
  background:
    linear-gradient(135deg, rgba(107,158,58,.12), rgba(5,8,11,.4)),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 14px, transparent 14px 28px);
}
.video-modal__placeholder[hidden] { display: none; }
.video-modal__placeholder-play {
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--action-green);
  box-shadow: 0 0 34px rgba(107,158,58,.6);
  margin-bottom: 8px;
}
.video-modal__placeholder-play::before {
  content: ''; display: block; width: 0; height: 0;
  border-style: solid; border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent #fff;
  margin-left: 6px;
}
.video-modal__placeholder-kicker {
  font-family: var(--ff-heading);
  font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--action-green);
}
.video-modal__placeholder-title {
  font-family: var(--ff-heading);
  font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--white); margin: 0;
}
.video-modal__placeholder-text { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.7); margin: 0; }
@media (max-width: 720px) {
  /* Keep the close button inside the dialog — offset above it, it can land
     off-screen on short landscape viewports. */
  .video-modal__close { top: 4px; right: 8px; z-index: 2; padding: 8px; }
  .video-modal__dialog { max-height: 90dvh; overflow-y: auto; }
  .video-modal__placeholder-play { width: 58px; height: 58px; }
  .video-modal__placeholder-title { font-size: 19px; }
}

.product__feature-hint {
  margin: 14px 0 0;
  font-family: var(--ff-heading);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;
  color: rgba(255,255,255,.5); text-align: center;
}

@media (max-width: 720px) {
  /* Bottom sheet, but never blanketing the whole viewer: capped height,
     scrollable body, tighter type. */
  .feature-card {
    top: auto; bottom: 12px;
    left: 12px; right: 12px;
    width: auto;
    max-height: 55%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px 18px;
    transform: translateY(16px);
  }
  .feature-card--open { transform: translateY(0); }
  .feature-card__title { font-size: 18px; }
  .feature-card__text { font-size: 12px; line-height: 1.55; }
  .feature-card__close {
    /* Real thumb target. */
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    top: 2px; right: 2px;
  }
  /* Clip stray hotspot labels at the section edge instead of widening the page. */
  .product__showcase--3d { overflow: hidden; }
  .feature-spot__label { max-width: 42vw; white-space: normal; line-height: 1.35; }
  /* The card opens across the bottom and labels hang right — park the
     enclosure toggle top-left, out of both paths, with bigger buttons. */
  .product__enclosure-toggle { top: 12px; right: auto; left: 12px; align-items: flex-start; }
  .product__enclosure-toggle .unit-toggle__btn { padding: 10px 16px; }
}

/* V2 — 3D viewer embed (floats on the section gradient, no frame) */
.product__showcase--3d { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.product__viewer { position: relative; width: 100%; aspect-ratio: 21 / 9; max-height: 760px; background: transparent; }
.product__viewer-frame { width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.product__viewer-hint { margin: 14px 0 0; font-family: var(--ff-heading); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,.55); text-align: center; }
@media (max-width: 720px) {
  .product__viewer { aspect-ratio: 4 / 5; }
}

/* ================================================
   INQUIRY
   ================================================ */
.inquiry { background: linear-gradient(180deg, var(--dark-green) 0%, var(--bg-dark) 100%); padding: 32px var(--gutter) 96px; border-top: none; }
.inquiry__inner { max-width: var(--max-w); margin:0 auto; text-align:center; }
.inquiry__heading { font-family: var(--ff-heading); font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:4px; margin-bottom:44px; color: var(--white); }
.inquiry__fields { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:36px; margin-bottom:36px; }
.inquiry--spec .inquiry__fields { grid-template-columns: 1fr 1fr; max-width: 720px; margin-left: auto; margin-right: auto; }
.inquiry--spec .inquiry__field--wide { max-width: 720px; }
.with_frm_style .frm_inside_container > label { border:none; font-family:var(--ff-body); font-size:14px; color:var(--gray-400); }
.with_frm_style .frm_inside_container.frm_label_float_top > label { color:var(--white); }
.with_frm_style input,
.inquiry__field input { width:100%; background:transparent; border:none; border-bottom:1px solid var(--gray-600); padding:14px 0; font-family:var(--ff-body); font-size:14px; color:var(--white); outline:none; transition: border-color .3s; }
.with_frm_style input::placeholder,
.inquiry__field input::placeholder,
.inquiry__field textarea::placeholder { color: var(--gray-400); font-weight:400; }
.with_frm_style input:focus,
.inquiry__field input:focus,
.inquiry__field textarea:focus { border-color: var(--action-green); }

/* Spec-context subtitle (e.g. "You're requesting specs for ... — currently showing SE60") */
.inquiry__subtitle { font-family: var(--ff-body); font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 720px; margin: -28px auto 36px; }
.inquiry__subtitle [data-spec-platform-display] { font-family: var(--ff-heading); font-weight: 700; letter-spacing: 0.06em; color: var(--white); }

/* Comments / "tell us about your application" textarea */
.inquiry__field--wide { display: block; width: 100%; margin: 0 auto 36px; text-align: left; }
.inquiry__label { display: block; font-family: var(--ff-body); font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.78); margin-bottom: 10px; }
.inquiry__field textarea { width: 100%; background: transparent; border: 1px solid var(--gray-600); padding: 14px 16px; font-family: var(--ff-body); font-size: 14px; line-height: 1.55; color: var(--white); outline: none; resize: vertical; min-height: 120px; transition: border-color .3s; }

/* Buttons */
button.frm_button_submit.frm_final_submit.btn,
.btn { display:inline-flex; align-items:center; gap:14px; border:none; font-family:var(--ff-heading); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:3px; color:var(--white); transition: all .3s; }
a.btn { padding: 18px 36px 18px 0px; background: var(--bg-dark); margin-top: 10px; }
a.btn:before { content: " "; left: 0; top: 50%; width: 28px; height: 1px; background: var(--gold); }
.btn__dash { display:block; width:28px; height:1px; background: var(--gold); flex-shrink:0; }
/* Link buttons already draw their line via a.btn:before — hide the markup dash
   so they don't show two. <button> elements have no :before and keep theirs. */
a.btn .btn__dash { display:none; }
button.frm_button_submit.frm_final_submit.btn.btn--line,
.inquiry .frm_style_modern-forest.with_frm_style .frm_submit button.btn--line,
.btn--line { background:none; padding:0; border: none; }
button.frm_button_submit.frm_final_submit.btn.btn--line:hover,
.btn--line:hover { color: var(--action-green); }
button.frm_button_submit.frm_final_submit.btn.btn--filled,
.btn--filled { background: var(--dark-green); padding:18px 36px; white-space:nowrap; }
button.frm_button_submit.frm_final_submit.btn.btn--filled,
.btn--filled:hover { background: var(--field-green); }

/* ================================================
   CUSTOMER STORIES
   ================================================ */
.stories { background: var(--bg-dark); padding:108px var(--gutter); text-align:center; }
/* Homepage: the inquiry form sits directly above Customer Stories, and both
   sections end/start on the same dark tone, so the boundary is invisible and
   the heading block has to read as centred between the Submit button and the
   story tiles. Formidable's fieldset adds 80px of dead space under the button
   on top of the two sections' padding — zero it, then trim the padding so the
   space above the kicker matches the space below the headline (72px each). */
.inquiry:has(+ .stories) .frm_forms fieldset { padding-bottom: 0; }
.inquiry:has(+ .stories) { padding-bottom: 24px; }
.inquiry + .stories { padding-top: 20px; }
.inquiry + .stories .stories__title { margin-bottom: 72px; }
.stories.story--light { background: var(--white); }
.stories__inner { max-width: 1050px; margin:0 auto; }
.stories__kicker { display:block; font-family: var(--ff-heading); font-size:23px; font-weight:500; text-transform:uppercase; letter-spacing:5px; color: var(--action-green); margin-bottom:12px; }
.story--light .stories__kicker { color: var(--action-green); }
.stories__title { font-family: var(--ff-heading); font-size: clamp(32px, 4vw, 52px); font-weight:700; text-transform:uppercase; letter-spacing:2px; margin-bottom:24px; line-height: 1.0; }
.story--light .stories__title { color: var(--dark-green); }
.stories__text { font-size:14px; line-height:1.85; font-weight:400; color: rgba(255,255,255,.55); max-width:520px; margin:0 auto 52px; }
.story--light .stories__text { color: var(--bg-dark); }
.stories__slider-wrapper { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; user-select: none; -webkit-user-select: none; }
.stories__slider.splide { visibility: hidden; }
.stories__slider.splide.is-initialized { visibility: visible; }
.stories__slider.splide .splide__track { overflow: visible; }
.stories__slider.splide .splide__list { display: flex; gap: 20px; margin: 0; padding: 0; }
.stories__slider.splide .splide__slide { flex: 0 0 calc(50% - 10px); min-width: calc(50% - 10px); list-style: none; }
.stories__card { position:relative; overflow:hidden; aspect-ratio:16/10; display:block; border-radius:4px;
  /* button reset (cards render as <button> so they can open a modal) */
  width: 100%; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.stories__card-img { width:100%; height:100%; object-fit:cover; transition: transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease; filter: brightness(.75); }
.stories__card:hover .stories__card-img { transform:scale(1.05); filter: brightness(.55); }
.stories__card-overlay { position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.6) 100%); display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:32px; transition: background .4s ease; }
.stories__card-overlay.tint_image { background: linear-gradient(180deg, #0000005e 40%, rgba(0, 0, 0, .6) 100%); }
.stories__card:hover .stories__card-overlay { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.72) 100%); }
.stories__card-arrow { width:32px; height:auto; object-fit:contain; margin-bottom:14px; transform: translateX(0px); transition: transform 1.4s cubic-bezier(.22,1,.36,1); }
.stories__card:hover .stories__card-arrow,
.svc-cards__card:hover .stories__card-arrow { transform: translateX(8px); }
.stories__card-label { font-family: var(--ff-heading); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:4px; color: var(--white); transition: letter-spacing .4s ease; }
/* Testimonial quote laid over the slide image (top half; the label overlay owns the bottom) */
.stories__quote { position:absolute; top:0; left:0; right:0; z-index:2; padding:36px 36px 0; text-align:left; pointer-events:none; }
/* Clamped on the tile — the popup carries the quote in full */
.stories__quote-text { font-family: var(--ff-body); font-size: clamp(15px, 1.5vw, 19px); font-weight:400; font-style:italic; line-height:1.6; color: var(--white); text-shadow: 0 1px 14px rgba(0,0,0,.55); margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.stories__quote-attrib { display:block; margin-top:14px; font-family: var(--ff-heading); font-size:11px; font-weight:700; font-style:normal; text-transform:uppercase; letter-spacing:2.5px; color: var(--tan); text-shadow: 0 1px 10px rgba(0,0,0,.55); }
/* Quoted slides need a top scrim too, so the text holds against a bright photo */
.stories__card--quoted .stories__card-overlay { background: linear-gradient(180deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.28) 42%, rgba(0,0,0,.68) 100%); }
.stories__card--quoted:hover .stories__card-overlay { background: linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.4) 42%, rgba(0,0,0,.8) 100%); }
.stories__card:hover .stories__card-label,
.svc-cards__card:hover .stories__card-label { letter-spacing:5px; }

/* ================================================
   WHY US
   ================================================ */
/* Why Us – header (white bg) */
.why-header { background: var(--white); text-align:center; padding: 72px var(--gutter) 48px; }
.why-header__kicker { display:block; font-family: var(--ff-heading); font-size:24px; font-weight:700; text-transform:uppercase; letter-spacing:6px; color: var(--action-green); margin-bottom:14px; }
.why-header__title { font-family: var(--ff-heading); font-size: clamp(32px, 4vw, 56px); font-weight:700; text-transform:uppercase; letter-spacing:4px; color: var(--bg-dark); line-height:1.1; }

/* Why Us – light content area */
.why { background: var(--white); padding: 0 var(--gutter) 80px; }
.why__inner { max-width: var(--max-w); margin:0 auto; }
.why__grid { display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:stretch; }

/* Accordion bars — light bg, turn dark on active */
.why__accordion { display:flex; flex-direction:column; gap:12px; }
.why__acc-item { display:flex; align-items:center; gap:20px; border:none; padding: 22px 28px; font-family:var(--ff-heading); font-size:16px; font-weight:500; letter-spacing: 1px; transition: background .3s, color .3s; width:100%; text-align:left; cursor:pointer; border-radius: 2px; background: #EDEDED; color: var(--bg-dark); }
.why__acc-item:hover { background: #DFDFDF; color: var(--bg-dark); }
.why__acc-item--active { background: var(--bg-dark); color: var(--white); }
.why__acc-item--active:hover { background: var(--bg-dark); color: var(--white); }
.why__acc-text { flex:1; }
.why__acc-arrow { width:24px; height:auto; flex-shrink:0; object-fit:contain; opacity:.4; transition: opacity .3s, transform .3s; }
.why__acc-item--active .why__acc-arrow { opacity:.9; }
.why__acc-item:hover .why__acc-arrow { transform: translateX(4px); opacity:.7; }

/* Right side: dark rectangle framing image + description */
.why__right { display:flex; align-items:center; gap:32px; background: var(--bg-dark); border-radius: 4px; padding: 32px; }
.why__media { flex: 0 0 50%; overflow:hidden; margin-left: -50px; margin-bottom: -50px; }
.why__media-img { width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; display:block; transition: opacity .3s ease; }
.why__desc { flex:1; }
.why__desc p { font-family: var(--ff-body); font-size:15px; line-height:1.85; color:rgba(255,255,255,.6); transition: opacity .3s ease; }

/* ================================================
   PARTNERS / LEASING
   ================================================ */
.partners { background: var(--white); color: var(--bg-dark); padding: 80px var(--gutter) 96px; text-align:center; }
.partners__inner { max-width: var(--max-w); margin:0 auto; }
.partners__kicker { display:block; font-family: var(--ff-heading); font-size:23px; font-weight:700; text-transform:uppercase; letter-spacing:6px; color: var(--action-green); margin-bottom:16px; }
.partners__title { font-family: var(--ff-heading); font-size: clamp(26px, 3.2vw, 42px); font-weight:700; text-transform:uppercase; letter-spacing:3px; margin-bottom:60px; color: var(--bg-dark); line-height:1.15; }
.partners__carousel { display:block;  width:100vw;  margin-left:calc(-50vw + 50%); padding:0 var(--gutter);  overflow:visible; height:fit-content; position: relative; }
.partners__track { display:flex; align-items:center; justify-content:flex-start; gap:24px; height:fit-content; margin: 0; padding: 0; }
/* Fixed slot per logo. Height is set inline per file from its aspect ratio
   (ppg_logo_optical_height) so the marks carry even visual weight; the slot just
   keeps them on a common baseline and stops a wide one running into its neighbour. */
.partners__logo { flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding: 0; width: 100%; height: 88px; }
.partners__logo img { max-height: 100%; max-width: 260px; width:auto; object-fit:contain; transition: opacity .3s; }
.partners__logo:hover img { opacity:.7; }
/* Stand-in until the official logo file is supplied for a partner */
.partners__logo--text { min-height: 72px; }
.partners__wordmark { font-family: var(--ff-heading); font-size: clamp(15px, 1.6vw, 20px); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--bg-dark); text-align: center; line-height: 1.3; transition: opacity .3s; }
.story--light .partners__wordmark { color: var(--dark-green); }
a.partners__logo--text:hover .partners__wordmark { opacity: .7; }

/* ---- Splide.js integration with partners carousel ---- */
.partners__carousel.splide { overflow: visible !important; width: 100vw; margin-left: calc(-50vw + 50%); padding: 0 var(--gutter); position: relative; display: block; height: auto; visibility: visible; opacity: 1; }
.partners__carousel.splide .splide__track { overflow: visible !important; height: auto; visibility: visible; }
/* gap must be 0 while Splide is mounted: Splide spaces slides with its own
   gap option (inline margins) and a CSS gap desyncs every translate step. */
.partners__carousel.splide .splide__list { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; height: auto; width: 100%; visibility: visible; }
.partners__carousel.splide .splide__slide { flex: 0 0 auto; opacity: 1; padding: 0; overflow: visible; width: auto; min-width: 0; height: auto; display: flex; align-items: center; visibility: visible; }
.partners__carousel.splide .splide__slide a { display: flex; align-items: center; justify-content: center; width: 100%; visibility: visible; }
/* ================================================
   FOOTER
   ================================================ */
.footer { background: var(--bg-dark); padding: 96px var(--gutter) 48px; }
.footer__inner { max-width: var(--max-w); margin:0 auto; }
.footer__top { display:grid; grid-template-columns: 260px 1fr 1fr auto; gap:64px; padding-bottom:72px; align-items:start; }
.footer__brand { padding-top: 4px; }
.footer__logo { height:56px; width:auto; display:block; }
.footer__heading { font-family: 'Aero Matics', var(--ff-heading); font-size:13px; font-weight:400; text-transform:uppercase; letter-spacing:2px; margin-bottom:28px; color:var(--white); }
.footer__links { list-style:none; padding:0; margin:0; }
.footer__links li { margin-bottom:16px; }
.footer__links a { font-family: 'Aero Matics', var(--ff-heading); font-size:13px; font-weight:400; letter-spacing:1px; color:rgba(255,255,255,.55); transition: color .25s; }
.footer__links a:hover { color: var(--white); }

/* Company column items rendered uppercase to match design */
#footer-company.footer__links a,
.footer__col--company .footer__links a { text-transform: uppercase; letter-spacing:2px; }

/* Social */
.footer__social { display:flex; gap:16px; align-items:center; padding-top: 4px; }
.footer__social-link { display:block; }
.footer__social-icon { position: relative; display:flex; align-items:center; justify-content:center; width:72px; height:52px; background: var(--dark-green); color:var(--white); font-family:'Aero Matics', var(--ff-heading); font-size:26px; font-weight:700; transition: background .3s; }
.footer__social-icon::before { content:''; position:absolute; top:50%; left:0; transform: translateY(-50%); width:14px; height:1px; background: var(--gold); }
.footer__social-link:hover .footer__social-icon { background: var(--field-green); }

/* Newsletter */
.newsletter { padding:64px 0; text-align:center; }
.newsletter__kicker { display:block; font-family: var(--ff-heading); font-size:23px; font-weight:500; text-transform:uppercase; letter-spacing:5px; color: var(--white); margin-bottom:12px; }
.newsletter__title { font-family: var(--ff-heading); font-size: clamp(28px, 3.5vw, 44px); font-weight:700; text-transform:uppercase; letter-spacing:2px; margin-bottom:44px; }
.newsletter__form { display:flex; align-items:flex-end; gap:32px; max-width:880px; margin:0 auto; }
.newsletter__input { flex:1; background:transparent; border:none; border-bottom:1px solid var(--gold); padding:14px 0; font-family:var(--ff-body); font-size:14px; color:var(--white); outline:none; transition: border-color .3s; }
.newsletter__input::placeholder { color: var(--gray-400); }
.newsletter__input:focus { border-color: var(--action-green); }

/* Footer bottom */
.footer__bottom { border-top:1px solid rgba(255,255,255,.06); padding-top:32px; text-align:center; }
.footer__bottom p { font-size:12px; color: var(--gray-400); letter-spacing:.5px; }
.footer__bottom a { color: var(--gray-400); transition: color .25s; }
.footer__bottom a:hover { color: var(--white); }

/* ================================================
   SYSTEM HERO
   ================================================ */
.sys-hero { position: relative; height: 70vh; min-height: 480px; max-height: 680px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sys-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Contact: the facility photo is 16:9 with the building sitting low in the frame
   (roughly 53%–89% of image height). The hero box is far wider than 16:9 on
   desktop, so a centred cover crop slices the ground floor and entrance off at
   every common width. Bias the focal point down to keep the whole building in. */
.page-contact-us .sys-hero__bg { object-position: center 85%; }
.sys-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 45%,rgba(0,0,0,.6) 100%); }
.sys-hero__content { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
.sys-hero__kicker { display: block; font-family: var(--ff-heading); font-size: 23px; font-weight: 500; text-transform: uppercase; letter-spacing: 5px; color: var(--white); margin-bottom: 20px; }
.sys-hero__title { font-family: var(--ff-heading); font-size: clamp(30px, 4.5vw, 58px); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; line-height: 1.1; color: var(--white); }

/* ================================================
   SYSTEM INTRO
   ================================================ */
.sys-intro { background: var(--white); color: var(--bg-dark); padding: 80px var(--gutter); text-align: center; }
.sys-intro__inner { max-width: 640px; margin: 0 auto; }
/* Icon wrapper with animated gear-shaped rings */
.sys-intro__icon-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto 28px; display: flex; align-items: center; justify-content: center; }
.sys-intro__icon { position: relative; z-index: 2; height: 80px; width: 80px; object-fit: contain; }

/* Pulsing gear-shaped outline rings */
.sys-intro__ring { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; object-fit: contain; transform: translate(-50%, -50%) scale(1); opacity: 0; z-index: 1; pointer-events: none; animation: gearPulse 3s ease-out infinite; }
.sys-intro__ring--1 { animation-delay: 0s; }
.sys-intro__ring--2 { animation-delay: 1s; }
.sys-intro__ring--3 { animation-delay: 2s; }

@keyframes gearPulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: .3; }
  80% { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}
.sys-intro__heading { font-family: var(--ff-heading); font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 20px; color: var(--dark-green); line-height: 1.2; }
.sys-intro__text { font-size: 15px; line-height: 1.7; font-weight: 400; color: rgba(0,0,0,.7); max-width: 640px; margin: 0 auto; }
/* Descriptor sitting just below the compact hero title */
.sys-hero__sub { font-family: var(--ff-body); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; font-weight: 400; color: rgba(255,255,255,.88); max-width: 720px; margin: 18px auto 0; }
/* Trailer / skid disclaimer beneath unit title */
.sys-intro__disclaimer { font-family: var(--ff-body); font-size: 12px; font-style: italic; letter-spacing: 0.04em; color: var(--gray-600); margin: -10px 0 18px; }

/* ================================================
   PRODUCT CONFIGURATIONS — Horizontal Scroll
   ================================================ */
.sys-products { background: var(--white); padding: 64px 0 80px; overflow: hidden; }
.sys-products__inner { max-width: var(--max-w); margin: 0 auto; position: relative; padding: 0 60px; }

/* Arrow buttons */
.sys-products__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; background: var(--white); border: 1px solid rgba(0,0,0,.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .3s, box-shadow .3s; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.sys-products__arrow:hover { background: var(--white); box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.sys-products__arrow--prev { left: 8px; }
.sys-products__arrow--next { right: 8px; }
.sys-products__arrow-img { width: 20px; height: auto; object-fit: contain; }
.sys-products__arrow-img--flip { transform: scaleX(-1); }

/* Track */
.sys-products__track { display: flex; gap: 48px; user-select: none; -webkit-user-select: none; transition: transform 0.4s ease-in-out; padding: 24px 0; }

/* Cards — open, no box */
.sys-products__card { flex: 0 0 auto; width: 260px; text-align: center; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; transition: transform .3s; cursor: pointer; }
.sys-products__card:hover { transform: translateY(-4px); }

/* Image — open on white background like screenshot */
.sys-products__img { width: 100%; height: 180px; object-fit: contain; margin-bottom: 20px; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.sys-products__card:hover .sys-products__img { transform: scale(1.06); }

/* Label */
.sys-products__label { font-family: var(--ff-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--dark-green); padding-top: 4px; border-top: 2px solid var(--action-green); display: inline-block; }

/* One-line descriptor caption beneath the card label */
.sys-products__caption { display: block; margin-top: 10px; max-width: 240px; font-family: var(--ff-body); font-size: 13px; line-height: 1.45; color: var(--gray-600); }

/* Active card highlight */
.sys-products__card--active .sys-products__label { color: var(--action-green); }

/* ================================================
   FAQ
   ================================================ */
.sys-faq { background: linear-gradient(180deg, var(--dark-green) 0%, var(--bg-dark) 100%); padding: 88px var(--gutter) 120px; }
.sys-faq__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.sys-faq__icon { height: 40px; width: auto; margin: 0 auto 28px; opacity: .7; }
.sys-faq__heading { font-family: var(--ff-heading); font-size: 23px; font-weight: 700; text-transform: uppercase; letter-spacing: 6px; margin-bottom: 48px; color: var(--white); }

/* FAQ Items */
.sys-faq__item--active .sys-faq__toggle img.sys-faq__icon.lazyloaded { transform: rotate(270deg); }
.sys-faq__toggle img.sys-faq__icon.lazyloaded { transform: rotate(90deg); transition: .3s ease; height: auto; width: 40px; }
.sys-faq__list { text-align: left; }
.sys-faq__item { border-bottom: 1px solid var(--action-green); }
.sys-faq__item:first-child { border-top: 1px solid var(--action-green); }
.sys-faq__question { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 22px 0; font-family: var(--ff-body); font-size: 15px; font-weight: 600; color: var(--white); cursor: pointer; transition: color .3s; gap: 16px; text-align: left; }
.sys-faq__question:hover { color: var(--tan); }
.sys-faq__toggle { position: relative; width: 16px; height: 16px; flex-shrink: 0; }

/* Answer */
.sys-faq__answer { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.22,1,.36,1), padding .45s; }
.sys-faq__item--active .sys-faq__answer { max-height: 300px; }
.sys-faq__answer p { padding: 0 0 24px; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.6); }

/* ================================================
   INDUSTRY PHOTO GALLERY — scrollable photo slider
   Photos only: no overlays, labels, arrows, or hover effects.
   ================================================ */
.ind-caps { background: var(--white); padding: 64px 0 24px; overflow: hidden; }
.ind-caps__inner { max-width: 100%; margin: 0 auto; padding: 0; }
.ind-gallery .splide__slide { overflow: hidden; border-radius: 6px; }
.ind-gallery__photo { display: block; width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover; }

/* ================================================
   INDUSTRY CHALLENGES + SOLUTIONS
   ================================================ */
.ind-challenges { background: var(--white); padding: 80px var(--gutter); }
.ind-challenges__inner { max-width: var(--max-w); margin: 0 auto; }
/* Both columns feed into one shared grid (the wrappers go display:contents), so
   challenge N and solution N are placed on the same numbered row and stay
   anchored to each other however much longer one of the two runs. */
.ind-challenges__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: stretch; }
.ind-challenges__col { min-width: 0; display: contents; }
.ind-challenges__col--challenges > .ind-challenges__heading { grid-column: 1; grid-row: 1; }
.ind-challenges__col--solutions  > .ind-challenges__heading { grid-column: 2; grid-row: 1; }
.ind-challenges__col--challenges .ind-challenges__item { grid-column: 1; grid-row: var(--ppg-row); }
.ind-challenges__col--solutions  .ind-challenges__item { grid-column: 2; grid-row: var(--ppg-row); }
.ind-challenges__heading { font-family: var(--ff-heading); font-size: clamp(20px, 2vw, 26px); font-weight: 700; color: var(--bg-dark); letter-spacing: 2px; text-transform: uppercase; margin: 0 0 28px; padding-bottom: 16px; border-bottom: 2px solid var(--bg-dark); }
.ind-challenges__col--solutions .ind-challenges__heading { color: var(--brand-green, #4d8b3a); border-bottom-color: var(--brand-green, #4d8b3a); }
.ind-challenges__list { list-style: none; margin: 0; padding: 0; display: contents; }
.ind-challenges__item { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid rgba(0,0,0,.08); align-items: start; align-content: start; }
.ind-challenges__item:last-child { border-bottom: 0; }
.ind-challenges__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-dark); color: var(--white); font-family: var(--ff-heading); font-size: 14px; font-weight: 700; letter-spacing: 0; }
.ind-challenges__col--solutions .ind-challenges__num { background: var(--brand-green, #4d8b3a); }
.ind-challenges__text { font-size: 15px; line-height: 1.65; color: rgba(0,0,0,.78); padding-top: 6px; }
@media (max-width: 768px) {
  .ind-challenges { padding: 56px var(--gutter); }
  /* Single column: drop back to normal flow so the two lists stack whole,
     rather than interleaving challenge/solution rows. */
  .ind-challenges__grid { display: block; }
  .ind-challenges__col { display: block; }
  .ind-challenges__col + .ind-challenges__col { margin-top: 40px; }
  .ind-challenges__list { display: block; }
  .ind-challenges__item { grid-column: auto; grid-row: auto; }
}

/* ================================================
   STATS
   ================================================ */
.ind-stats { background: var(--white); padding: 48px var(--gutter) 80px; }
.ind-stats__inner { max-width: var(--max-w); margin: 0 auto; }
.ind-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; text-align: center; }
.ind-stats__item { padding: 32px 16px; }
.ind-stats__icon { display: block; width: auto; height: 36px; object-fit: contain; margin: 0 auto 18px; }
.ind-stats__number { display: block; font-family: var(--ff-heading); font-size: clamp(28px, 3.5vw, 42px); font-weight: 700; color: var(--bg-dark); margin-bottom: 6px; letter-spacing: 2px; text-transform: uppercase; }
/* Subhead between the figure and its sentence — carries the noun ("Industries
   Served") so the number reads on its own and the copy below continues from it. */
.ind-stats__label { display: block; font-family: var(--ff-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; line-height: 1.4; color: var(--field-green); max-width: 280px; margin: 0 auto 12px; }
.ind-stats__desc { font-size: 14px; line-height: 1.75; color: rgba(0,0,0,.5); max-width: 280px; margin: 0 auto; }

/* ================================================
   INQUIRY — green-to-black fade into footer
   ================================================ */
.inquiry { background: linear-gradient(180deg, var(--dark-green) 0%, var(--bg-dark) 100%); border-top: none; padding: 80px var(--gutter) 120px; }
body:is(.home) .inquiry { background: var(--bg-dark); }
.inquiry__heading { font-size: clamp(18px, 2.5vw, 26px); font-weight: 700; letter-spacing: 6px; }

/* ================================================
   UNIT SPECS — Product Photo + Spec List
   ================================================ */
.unit-specs { background: var(--bg-dark); padding: 0; }
.unit-specs__inner { max-width: var(--max-w); margin: 0 auto; }
.unit-specs__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.unit-specs__photo { position: relative; overflow: hidden; background: var(--white); }
.unit-specs__photo-stage { position: relative; width: 100%; height: 100%; }
.unit-specs__photo-img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 32px; box-sizing: border-box; }
.unit-specs__photo-img[hidden] { display: none; }
.unit-specs__photo-img.is-stub { filter: grayscale(.6) brightness(.85); }
/* <model-viewer> shares the .unit-specs__photo-img sizing rule above; these
   tweaks set the WebGL canvas background, hide the loading bar, and let the
   2D poster fill the box during load (cover, not contain). */
model-viewer.unit-specs__photo-model { --poster-color: transparent; --progress-bar-color: var(--accent, #2f6b52); background-color: transparent; }
model-viewer.unit-specs__photo-model::part(default-progress-mask) { display: none; }
.unit-specs__photo-stub { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-family: var(--ff-heading); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); background: rgba(0,0,0,.65); padding: 8px 14px; border: 1px solid rgba(255,255,255,.25); }
.unit-specs__photo-stub[hidden] { display: none; }
/* Two-axis view toggle (Open/Closed × Trailer/Skid) */
.unit-toggles { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.unit-toggle { display: inline-flex; background: rgba(0,0,0,.55); padding: 4px; border: 1px solid rgba(255,255,255,.2); }
.unit-toggle__btn { font-family: var(--ff-heading); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,.7); background: transparent; border: none; padding: 8px 14px; cursor: pointer; transition: color .2s ease, background .2s ease; }
.unit-toggle__btn:hover { color: var(--white); }
.unit-toggle__btn--active { color: var(--bg-dark); background: var(--white); }
.unit-specs__details { display: flex; align-items: center; padding: 48px 64px; }
.unit-specs__list { width: 100%; margin: 0; }
.unit-specs__row { padding: 12px 0; border-bottom: 1px solid var(--bg-dark); }
.unit-specs__row:last-child { border-bottom: none; }
.unit-specs__value { font-family: var(--ff-heading); font-weight: 700; font-size: 18px; color: var(--white); text-transform: uppercase; letter-spacing: 0.04em; }
.unit-specs__label { font-family: var(--ff-heading); font-weight: 700; font-size: 13px; color: var(--action-green); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; }

/* Spec sheet CTA on system-intro */
.sys-intro__cta { margin-top: 24px; display: inline-flex; }

/* ================================================
   UNIT COMPATIBILITY — engine / control / transmission
   chip lists shown below unit-specs on single-ppg_unit.
   White section to match the lighter unit-page palette.
   ================================================ */
.unit-compat { background: var(--white); padding: 72px var(--gutter); }
.unit-compat__inner { max-width: var(--max-w); margin: 0 auto; }
.unit-compat__head { text-align: center; margin-bottom: 48px; }
.unit-compat__kicker { display: inline-block; font-family: var(--ff-heading); font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--action-green); margin-bottom: 12px; }
.unit-compat__heading { font-family: var(--ff-heading); font-size: 30px; font-weight: 700; color: var(--bg-dark); letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 12px; }
.unit-compat__sub { max-width: 720px; margin: 0 auto; color: var(--gray-600); font-size: 15px; line-height: 1.6; }
.unit-compat__grid { display: grid; gap: 32px; align-items: start; }
.unit-compat__grid--3 { grid-template-columns: repeat(3, 1fr); }
.unit-compat__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin: 0 auto; }
.unit-compat__col { background: rgba(193, 188, 152, 0.12); border: 1px solid rgba(35, 31, 32, 0.08); padding: 28px 28px 24px; }
.unit-compat__col-kicker { display: block; font-family: var(--ff-heading); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--action-green); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(35, 31, 32, 0.12); }
.unit-compat__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.unit-compat__chip { font-family: var(--ff-heading); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--bg-dark); background: var(--white); border: 1px solid rgba(35, 31, 32, 0.15); padding: 8px 14px; text-transform: uppercase; }
/* Once an official logo file exists for a brand the chip carries the mark
   instead of the name; the box keeps the same height so mixed rows stay even. */
.unit-compat__chip--logo { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; min-height: 37px; min-width: 92px; }
/* height comes in inline, sized per logo by aspect ratio */
.unit-compat__logo { width: auto; max-width: 116px; max-height: 28px; object-fit: contain; display: block; }
@media (max-width: 880px) {
  .unit-compat { padding: 56px 24px; }
  .unit-compat__grid--3,
  .unit-compat__grid--2 { grid-template-columns: 1fr; }
  .unit-compat__heading { font-size: 24px; }
}

/* ================================================
   PARTS — Product List within FAQ accordion
   ================================================ */
.parts-cats { background: var(--white); }
.parts-cats .sys-faq__question { color: var(--bg-dark); }
.parts-cats__product-list { list-style: none; padding: 0; margin: 0; }
.parts-cats__product { padding: 8px 0; color: var(--bg-dark); font-size: 15px; border-bottom: 1px solid var(--bg-dark); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.parts-cats__product:last-child { border-bottom: none; }
.parts-cats__pdf { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--dark-green); text-decoration: none; white-space: nowrap; }
.parts-cats__pdf:hover { text-decoration: underline; }
.parts-cats__pdf--soon { color: var(--gray-600, #777); font-weight: 400; cursor: default; }
.parts-cats .sys-faq__toggle::before, .parts-cats .sys-faq__toggle::after { background: var(--bg-dark); }

/* ================================================
   SERVICES — 2×3 Card Grid
   ================================================ */
.svc-cards { background: var(--white); padding: 0 var(--gutter) 80px; }
.svc-cards__inner { max-width: var(--max-w); margin: 0 auto; }
.svc-cards__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.svc-cards__card { position: relative; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; border: none; padding: 0; text-align: left; }
.svc-cards__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease; filter: brightness(.75); }
.svc-cards__card:hover .svc-cards__img { transform: scale(1.05); filter: brightness(.55); }
.svc-cards__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.6) 100%); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 32px; transition: background .4s ease; }
.svc-cards__card:hover .svc-cards__overlay { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.72) 100%); }
.svc-cards__play { position: absolute; bottom: 20px; left: 20px; width: 36px; height: 36px; border-radius: 50%; background: var(--action-green); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 14px; padding-left: 2px; }
.svc-cards__label { color: var(--white); font-family: var(--ff-heading); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 4px; margin-left: 48px; transition: letter-spacing .4s ease; }
.svc-cards__card:hover .svc-cards__label { letter-spacing: 5px; }

/* ================================================
   PPG MODAL — Shared popup component
   ================================================ */
.ppg-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0); transition: background 0.3s ease; }
.ppg-modal--open { background: rgba(0, 0, 0, 0.75); }
.ppg-modal__panel { background: var(--white); overflow: hidden; max-width: 560px; width: 90%; max-height: 85vh; overflow-y: auto; transform: translateY(40px); opacity: 0; display: flex; justify-content: center; align-items: stretch; transition: transform 0.3s cubic-bezier(.22,1,.36,1), opacity 0.3s ease; }
.ppg-modal--open .ppg-modal__panel { transform: translateY(0); opacity: 1; height: 360px; }
.ppg-modal__close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 28px; color: var(--white); cursor: pointer; z-index: 2; line-height: 1; padding: 4px 8px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.ppg-modal__close:hover { color: var(--action-green); }
.ppg-modal__img-wrap { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; }
.ppg-modal__img { width: 100%; height: 100%; object-fit: cover; display: block; }
[id^="team-modal"] .ppg-modal__img { object-position: 50% 0; }
/* Services modals: larger panel with room for expanded service details */
[id^="svc-modal"] .ppg-modal__panel { max-width: 920px; }
.ppg-modal--open[id^="svc-modal"] .ppg-modal__panel { height: auto; min-height: 480px; max-height: 85vh; }
[id^="svc-modal"] .ppg-modal__text ul { margin: 14px 0 0; padding-left: 20px; list-style: disc; }
[id^="svc-modal"] .ppg-modal__text li { margin-bottom: 7px; }
[id^="svc-modal"] .ppg-modal__text strong { color: var(--tan, #C1BC98); }
.ppg-modal__body { padding: 24px 32px 32px; background: var(--dark-green); width: 100%; overflow-y: scroll; }
.ppg-modal__title { font-family: var(--ff-heading); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); margin: 0 0 4px; }
.ppg-modal__subtitle { display: block; font-size: 14px; color: var(--white); margin-bottom: 16px; }
.ppg-modal__text { font-size: 15px; line-height: 1.6; color: var(--white); }
.ppg-modal__text p { margin: 0 0 12px; }
/* Testimonial block inside the story popup */
.ppg-modal__quote-wrap { margin: 0 0 18px; padding: 0 0 0 18px; border-left: 3px solid var(--action-green); }
.ppg-modal__quote { font-family: var(--ff-body); font-size: 17px; font-style: italic; line-height: 1.6; color: var(--white); margin: 0; }
.ppg-modal__quote-attrib { display: block; margin-top: 12px; font-family: var(--ff-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; line-height: 1.5; color: var(--tan); }
.ppg-modal__context { color: rgba(255,255,255,.78); font-size: 14px; }
.ppg-modal__cta { margin-top: 20px; display: flex; width: 100%; justify-content: center; align-items: center; padding: 14px 20px; box-sizing: border-box; white-space: normal; text-align: center; }

/* ================================================
   ABOUT — Mission & Values
   ================================================ */
.about-mission { background: var(--white); padding: 0 var(--gutter) 80px var(--gutter); }
.about-mission__inner { max-width: var(--max-w); margin: 0 auto; }
.about-mission__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; min-height: 400px; overflow: hidden; gap: 10px; max-width: 820px; margin: auto; }
.about-mission__panel { background: var(--dark-green); color: var(--white); padding: 40px 32px; display: flex; flex-direction: column; justify-content: center; }
.about-mission__panel-heading { font-family: var(--ff-heading); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 16px; }
.about-mission__panel-text { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.85); margin: 0; }
.about-mission__photo { overflow: hidden; }
.about-mission__photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-mission__values { background: var(--dark-green); color: var(--white); padding: 40px 32px; display: flex; flex-direction: column; justify-content: center; }
.about-mission__values-heading { font-family: var(--ff-heading); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--white); margin: 0 0 16px; }
.about-mission__values-list { list-style: none; padding: 0; margin: 0; }
.about-mission__values-item { position: relative; padding: 6px 0 6px 20px; font-size: 15px; color: var(--white); }
.about-mission__values-item::before { content: '\2022'; position: absolute; left: 0; color: var(--white); font-weight: 700; }

/* ================================================
   ABOUT — Differentiators
   ================================================ */
.about-diff { background: #1D3329; padding: 96px var(--gutter); text-align: center; }
.about-diff__inner { max-width: var(--max-w); margin: 0 auto; }
.about-diff__icon-wrap { margin-bottom: 28px; }
.about-diff__icon { width: 44px; height: auto; transform-origin: center; animation: aboutDiffPulse 2.4s ease-in-out infinite; }
@keyframes aboutDiffPulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.14); opacity: .78; }
}
.about-diff__heading { font-family: var(--ff-heading); font-weight: 500; font-size: clamp(22px, 2.6vw, 30px); text-transform: uppercase; letter-spacing: 0.14em; color: var(--white); margin: 0 0 24px; }
.about-diff__text { font-family: var(--ff-body); font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.88); max-width: 640px; margin: 0 auto 64px; }
.about-diff__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 48px; max-width: 960px; margin: 0 auto; }
.about-diff__card { flex: 0 1 240px; padding: 12px 8px; text-align: center; }
.about-diff__card-title { font-family: var(--ff-heading); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--white); margin: 0 0 6px; }
.about-diff__card-text { font-family: var(--ff-body); font-style: italic; font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--tan); margin: 0; }

/* ================================================
   ABOUT — Team Grid
   ================================================ */
.about-team { background: var(--white); padding: 80px var(--gutter); text-align: center; }
.about-team__inner { max-width: var(--max-w); margin: 0 auto; }
.about-team__heading { font-family: var(--ff-heading); font-weight: 700; font-size: 28px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dark-green); margin: 0 0 48px; }
.about-team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about-team__member { cursor: pointer; text-align: center; position: relative; container-type: inline-size; }
/* The name tag must stay two lines (title + name) at every viewport, but the
   cards shrink fluidly while type is fixed — so any fixed size wraps somewhere.
   The card is a container and the tag type scales with it (see the @supports
   block after the responsive section); these fixed sizes are the fallback. */
.about-team__info { position: absolute; bottom: 50px; left: 0px; background-color: #231F20; padding: 10px 8px 10px 0px; width: 100%; opacity: 0; transition: opacity .3s ease; text-align: left; }
.about-team__member:hover .about-team__info { opacity: 1; }
.about-team__info .btn__dash { background: var(--action-green) }
.about-team__info > div { align-items: start; justify-content: right; display: flex; flex-direction: column; }
.about-team__info h3 { letter-spacing: 3px; color: var(--white); }
.about-team__info .about-team__title { letter-spacing: 3px; color: var(--white); }
.about-team__photo-wrap { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; margin-bottom: 12px; }
.about-team__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; transform: scale(1.08); transform-origin: 50% 0; transition: transform 0.4s cubic-bezier(.22,1,.36,1); }
.about-team__member:hover .about-team__photo { transform: scale(1.14); }
.about-team__name { font-family: var(--ff-heading); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dark-green); margin: 0 0 2px; }
.about-team__title { font-size: 13px; color: var(--gray-600); }

/* ================================================
   Product Details — UNIT SPECS
   ================================================ */
#product-details { background: #E9E9E9;  padding: 100px var(--gutter); }
#product-details container { display: block; margin: 0 auto 0 0; }
.left-image { width: 70vw; }
.right-content { width: 30vw; }
.product-details h3 { margin-bottom:5px; }
.product-details p { color: #000; margin-bottom:5px; }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width:1110px) {
  .mega { width: 600px; }
}
@media (max-width:1100px) {
  :root { --gutter:36px; }
  .mega { width:700px; }
  .mega__grid { grid-template-columns: repeat(3,1fr); }
  .why__grid { grid-template-columns: 1fr 1fr; gap:32px; }
  .why__right { flex-direction:column; }
  .why__media { margin-left: 0px; margin-bottom: 0px; }
  /* newletter */
  .frm_style_modern-forest.with_frm_style .frm_submit button { padding: 17px 25px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap:36px; }
  .footer__brand { grid-column: 1/-1; }
}
@media (max-width:970px) {
  .nav__item--has-mega:hover .mega, .mega:hover { transform: translateX(0%) translateY(0); }
  .nav__list { gap:12px; }
  .value-props__grid { grid-template-columns: 1fr; gap: 14px; }
  .value-props__card { padding: 36px 32px; }
}
@media (max-width:768px) {
  :root { --gutter:24px; }
  .header { overflow: hidden; width: 100%; }
  .value-props { padding: 72px var(--gutter); }
  .value-props__heading { margin-bottom: 40px; letter-spacing: 1.5px; }
  .burger { display:flex; z-index: 99; }
  a.header__logo { z-index: 100; }
  .nav { position:fixed; top:0; right:-100%; width:100%; max-width:380px; height:100vh; background: var(--bg-dark); padding:100px 32px 40px; transition: right .4s cubic-bezier(.22,1,.36,1); z-index:99; overflow-y:auto; }
  .nav--open { right:0; justify-content: center; }
  .nav__list { flex-direction:column; gap:0; height: calc(100vh - 140px); overflow: scroll;}
  .nav__link { display:block; padding:18px 0; font-size:14px; border-bottom:1px solid rgba(255,255,255,.05); text-align: center; }
  .nav__link::after { display:none; }
  .mega, .dropdown { position:static; transform:none; width:100%; opacity:1; visibility:visible; pointer-events:auto; display:none; padding:12px 0 12px 16px; box-shadow:none; border:none; border-radius:0; }
  .mega.is-open, .dropdown.is-open { display:block; }
  .nav__item--has-drop:hover .dropdown { transform: translate(0, 0); left: 0;}
  .mega__grid { grid-template-columns: repeat(1,1fr); gap:12px; }
  .hero__title { font-size:clamp(30px,8vw,48px); }
  /* Busy hero photos need a stronger scrim for text legibility on small screens */
  .hero__overlay { background: linear-gradient(rgba(0,0,0,.55) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.6) 100%); }
  .grid-section { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas:
      "sm-a  sm-b"
      "med-a lg-a"
      "med-a lg-a"
      "lg-b  lg-b"
      "med-b sm-c"
      "med-b sm-d"; height: auto; gap: 4px; }
  .grid-section:not(:has(.grid-card--sm-b)) .grid-card--sm-a { grid-area: sm-a-start / sm-a-start / sm-a-end / sm-b-end; }
  .grid-card__overlay { opacity:1; transform:translateY(0); bottom:8px; right:8px; padding:10px 14px; gap:8px; max-width: calc(100% - 16px); }
  .grid-card__img { filter:brightness(.65); }
  .grid-card__label { font-size:11px; letter-spacing:2px; padding-left:18px; }
  .inquiry__fields { grid-template-columns:1fr; gap:20px; }
  .stories__slider.splide .splide__slide { flex: 0 0 100%; min-width: 100%; }
  .stories__quote { padding: 24px 24px 0; }
  .why__grid { grid-template-columns:1fr; }
  .why__accordion, .why__right { min-width: 0; }
  .why__right { flex-direction:column; }
  /* On mobile the image must size from width, not height, or it blows out the grid track */
  .why__media { transform: rotate(0); flex: none; width: 100%; margin: 0; }
  .why__media-img { width: 100%; height: auto; }
  /* The logo belt stays a Splide track on mobile — no flex-wrap or flex-basis
     overrides here, they desync Splide's translate math and break the slider
     (rows of clones, jumps, blank frames). Only cosmetic sizing below. */
  .partners__carousel.splide { display: block; width: 100vw; margin-left: calc(-50vw + 50%); padding: 0 var(--gutter); }
  .partners__logo img { max-height:100%; max-width:150px; }
  .partners__logo { height: 64px; }
  .footer__top { grid-template-columns:1fr; }
  .newsletter__form { flex-direction:column; gap:24px; }
  .newsletter__input { width:100%; }
  /* ================================================
   RESPONSIVE — SYSTEMS PAGE
   ================================================ */
  .sys-hero { height: 55vh; min-height: 380px; }
  .sys-hero__title { font-size: clamp(24px, 7vw, 38px); }
  .sys-products__inner { padding: 0 48px; }
  .sys-products__card { width: 200px; }
  .sys-products__img { height: 140px; }
  .sys-products__track { gap: 32px; }
  .sys-faq { padding: 64px var(--gutter); }
/* ================================================
   RESPONSIVE — INDUSTRY PAGE
   ================================================ */
  .ind-hero { height: 55vh; min-height: 380px; }
  .ind-hero__title { font-size: clamp(28px, 7vw, 42px); }
  .ind-caps { padding: 40px 0 16px; }
  .ind-stats__grid { grid-template-columns: 1fr; gap: 8px; }
  .ind-stats__item { padding: 24px 0; }
/* ================================================
   RESPONSIVE — UNIT SPECS
   ================================================ */
  .unit-specs__grid { grid-template-columns: 1fr; }
  .unit-specs__photo { aspect-ratio: 16/10; }
  .unit-specs__details { padding: 32px var(--gutter); }
/* ================================================
   RESPONSIVE — SERVICES CARDS
   ================================================ */
  .svc-cards__grid { grid-template-columns: 1fr; }
  .svc-cards__card { aspect-ratio: 16/9; }
/* ================================================
   RESPONSIVE — ABOUT SECTIONS
   ================================================ */
  .about-mission__grid { grid-template-columns: 1fr; }
  .about-mission__photo { aspect-ratio: 16/10; }
  .about-diff__grid { gap: 12px 32px; max-width: 560px; }
  .about-diff__card { flex: 0 1 220px; }
  .about-team__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  /* Narrow tiles: tighten label tracking so names fit */
  .about-team__info { width: 96%; padding: 8px 12px 8px 0; }
  .about-team__info h3, .about-team__info .about-team__title { letter-spacing: 1px; }
  .with_frm_style .frm_form_fields > fieldset { padding: 0; }
}
/* Team name tags: type scales with the card so the title/name never wrap into
   a third line, whatever the window width. Sized for the longest title
   ("Site Operations Foreman, TX", 27 chars). Placed after the responsive
   section and prefixed with .about-team__member so it wins the 768px override.
   Browsers without container queries fall back to the fixed sizes above. */
@supports (container-type: inline-size) {
  .about-team__member .about-team__info .about-team__title {
    font-size: clamp(8px, 3.6cqw, 13px);
    letter-spacing: clamp(0.5px, 0.5cqw, 3px);
    white-space: nowrap;
  }
  .about-team__member .about-team__info h3 {
    font-size: clamp(9px, 3.9cqw, 14px);
    letter-spacing: clamp(1px, 0.6cqw, 3px);
    white-space: nowrap;
  }
  /* On very narrow cards the 28px dash + 14px gap cost more than they add. */
  @container (max-width: 250px) {
    .about-team__info .btn__dash { display: none; }
  }
  /* Phone-width 2-up cards (~160px): the longest title needs every pixel. */
  @container (max-width: 185px) {
    .about-team__member .about-team__info .about-team__title { font-size: 7.5px; letter-spacing: 0.2px; }
  }
}

@media (max-width:480px) {
  :root { --gutter:18px; }
  .header__inner { padding:18px var(--gutter); }
  .header__logo-img { height:30px; }
  .home .header__logo-img { height:34px; }
  .hero { min-height:520px; }
  .intro { padding:72px var(--gutter); }
  .mega__grid { grid-template-columns:1fr; }
  /* ================================================
   RESPONSIVE — SYSTEMS PAGE
   ================================================ */
  .sys-hero { height: 50vh; min-height: 320px; }
  .sys-intro { padding: 56px var(--gutter); }
  .sys-products__inner { padding: 0 40px; }
  .sys-products__arrow { width: 36px; height: 36px; }
  .sys-products__card { width: 180px; }
  .sys-products__img { height: 120px; }
/* ================================================
   RESPONSIVE — INDUSTRY PAGE
   ================================================ */
  .ind-hero { height: 50vh; min-height: 320px; }
  .ind-intro { padding: 64px var(--gutter); }
/* ================================================
   RESPONSIVE — UNIT SPECS
   ================================================ */
  .about-diff__grid { flex-direction: column; align-items: center; gap: 8px; }
  .about-diff__card { flex: 0 1 auto; width: 100%; }
  .about-team__grid { grid-template-columns: repeat(2, 1fr); }
  .ppg-modal__panel { width: 95%; max-height: 90vh; }
  .ppg-modal__body { padding: 20px 24px 24px; }
  /* Services modals stack image over text on small screens */
  [id^="svc-modal"] .ppg-modal__panel { flex-direction: column; overflow-y: auto; }
  [id^="svc-modal"] .ppg-modal__img-wrap { flex: none; aspect-ratio: 16/8; }
  [id^="svc-modal"] .ppg-modal__body { overflow-y: visible; }
}

/* ================================================
   UNITS FLOW — drive → impeller → unit (terminal)
   Source: Product & Render Architecture v3 (4/22)
   Layout matches v2 systems pattern: hero → white
   sys-intro → white frame-less card deck → light
   render+sliders block → dark-green FAQ.
   ================================================ */

/* Compact hero for step pages */
/* Compact keeps its smaller typography, but the hero band itself matches the
   standard .sys-hero height so header images are the same size on every page. */
.sys-hero--compact .sys-hero__title { font-size: clamp(32px, 4.2vw, 56px); letter-spacing: 2px; }
.sys-hero--compact .sys-hero__kicker { font-size: 18px; letter-spacing: 4px; margin-bottom: 16px; }

/* ---- Mega menu — frame-less drive picker ----
   Keeps dark-green bg from .mega, strips card chrome,
   centers labels with the green top-border accent. */
.mega--drives { width: 720px; }
.mega--drives .mega__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
.mega--drives .mega__card { display: flex; flex-direction: column; align-items: center; padding: 8px 0; border-radius: 0; text-align: center; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.mega--drives .mega__card:hover { background: transparent; transform: translateY(-4px); }
.mega--drives .mega__img { aspect-ratio: auto; margin: 0 0 16px; width: 100%; height: 110px; display: flex; align-items: center; justify-content: center; }
.mega--drives .mega__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mega--drives .mega__label { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: var(--white); padding-top: 6px; border-top: 2px solid var(--action-green); }

/* ---- Step kicker + headline that sits above the card deck ----
   Uses the white sys-products section as host. */
.units-deck__header { text-align: center; margin: 0 auto 40px; max-width: 620px; }
.units-deck__step { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--action-green); margin-bottom: 12px; }
.units-deck__title { font-family: var(--ff-heading); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--dark-green); }
/* 3-across centered layout (override the scroll track for ≥3-card case) */
.units-deck__track { justify-content: center; flex-wrap: wrap; gap: 56px; }
/* Impeller renders are portrait-oriented — give them slightly more height */
.units-deck__img--impeller { height: 220px !important; }

/* ---- "How do I pick?" expandable — sits on white bg ---- */
.units-guide { margin: 48px auto 0; max-width: 720px; border-top: 1px solid rgba(0,0,0,.08); border-bottom: 1px solid rgba(0,0,0,.08); }
.units-guide__summary { display: flex; align-items: center; padding: 18px 4px; cursor: pointer; font-family: var(--ff-heading); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--dark-green); list-style: none; }
.units-guide__summary::-webkit-details-marker { display: none; }
.units-guide__summary::after { content: '+'; margin-left: auto; font-size: 22px; font-weight: 400; color: var(--action-green); transition: transform .2s; }
.units-guide[open] .units-guide__summary::after { content: '−'; }
.units-guide__body { padding: 0 4px 22px; color: var(--gray-600); font-size: 14px; line-height: 1.7; }
.units-guide__list { padding: 6px 0 0; }
.units-guide__list li { padding: 6px 0; }
.units-guide__list strong { color: var(--dark-green); margin-right: 6px; }
.units-guide__note { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.06); font-size: 13px; color: var(--gray-400); font-style: italic; }

/* ---- HPU stub ---- */
.units-stub { background: var(--white); padding: 72px var(--gutter); text-align: center; }
.units-stub__inner { max-width: 620px; margin: 0 auto; }
.units-stub__title { font-family: var(--ff-heading); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--dark-green); margin-bottom: 14px; }
.units-stub__copy { color: var(--gray-600); font-size: 15px; line-height: 1.7; }

/* ================================================
   TERMINAL UNIT PAGE — render + sliders + table
   White backdrop (per Brittany's contrast feedback,
   4/29 check-in) for tan units to read against.
   ================================================ */
.units-finder { background: var(--white); padding: 72px var(--gutter) 96px; }
.units-finder__inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }

/* Render — no frame, drop shadow only */
.units-finder__render-wrap { position: sticky; top: 120px; margin: 0; text-align: center; }
.units-finder__render { width: 100%; max-width: 560px; height: auto; object-fit: contain; display: block; margin: 0 auto; filter: drop-shadow(0 16px 32px rgba(0,0,0,.18)); transition: opacity .2s ease; }
.units-finder__render.is-swapping { opacity: 0; }
.units-finder__render-label { margin: 20px auto 0; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.units-finder__render-kicker { font-family: var(--ff-heading); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--gray-600); }
.units-finder__render-name { font-family: var(--ff-heading); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--bg-dark); padding-top: 4px; border-top: 2px solid var(--bg-dark); min-width: 80px; }
/* "Request a Quote" CTA sitting under the preview unit name on the model finder */
.units-finder__cta { display: flex; width: max-content; margin: 24px auto 0; padding: 14px 28px; justify-content: center; }
/* Render stage holds the 4 preview variants — only one visible at a time */
.units-finder__render-stage { position: relative; width: 100%; }
.units-finder__render-stage .units-finder__render[hidden] { display: none; }

/* Illustration disclaimer under the package preview. */
.units-finder__disclaimer {
  max-width: 460px; margin: 10px auto 0;
  font-family: var(--ff-body); font-size: 11px; line-height: 1.5;
  color: var(--gray-600); text-align: center; text-wrap: balance;
}

/* 3D loading bar — replaces model-viewer's default spinner via slot="progress-bar".
   The poster (transparent hero render) stays visible behind it, so the unit is
   on screen immediately and this only reports the GLB download. */
.units-finder__loader {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  width: min(240px, 60%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; transition: opacity .35s ease; opacity: 1;
}
.units-finder__loader.is-complete { opacity: 0; }
.units-finder__loader-track {
  width: 100%; height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(0,0,0,.12);
}
.units-finder__loader-fill {
  width: 0%; height: 100%; border-radius: 2px;
  background: var(--field-green, var(--dark-green, #2f5d3f));
  transition: width .2s ease;
}
.units-finder__loader-text {
  font-family: var(--ff-heading); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: var(--gray-600);
}
@media (prefers-reduced-motion: reduce) {
  .units-finder__loader, .units-finder__loader-fill { transition: none; }
}
/* Homepage product section sits on the dark gradient — the systems-page loader
   colors (dark fill on rgba(0,0,0,.12), gray text) vanish there. Flip to
   light-on-dark with the bright accent green. */
.product .units-finder__loader-track { background: rgba(255,255,255,.2); }
.product .units-finder__loader-fill { background: var(--action-green); }
.product .units-finder__loader-text { color: rgba(255,255,255,.78); }

/* Centered (block-level) variant of the toggle group — used on white/tan
   backgrounds where an absolute overlay would feel out of place. */
.unit-toggles--center { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 16px auto 0; align-items: center; }
/* Light (dark-on-light) variant — for placement on white/tan render areas */
.unit-toggle--light { background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.12); }
.unit-toggle--light .unit-toggle__btn { color: var(--gray-600); }
.unit-toggle--light .unit-toggle__btn:hover { color: var(--bg-dark); }
.unit-toggle--light .unit-toggle__btn--active {color: var(--white); background: var(--bg-dark); }

/* Right-column panel — centered head, no frame */
.units-finder__panel { padding-top: 8px; }
.units-finder__panel-head { text-align: center; margin-bottom: 36px; }
.units-finder__panel-title { font-family: var(--ff-heading); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--dark-green); margin-bottom: 8px; }
.units-finder__panel-sub { font-size: 14px; color: var(--gray-600); }

/* Slider */
.units-slider { margin: 0 0 28px; }
.units-slider__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.units-slider__label { font-family: var(--ff-heading); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--dark-green); }
.units-slider__readout { font-family: var(--ff-heading); font-size: 14px; font-weight: 700; color: var(--bg-dark); letter-spacing: .5px; }
.units-slider__dash { margin: 0 6px; color: var(--gray-400); }
.units-slider__track { position: relative; height: 4px; background: rgba(0,0,0,.12); border-radius: 2px; }
.units-slider__fill { position: absolute; top: 0; height: 100%; background: var(--bg-dark); border-radius: 2px; left: 0; width: 100%; pointer-events: none; }
.units-slider__input { position: absolute; top: 50%; left: 0; right: 0; width: 100%; height: 24px; transform: translateY(-50%); background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.units-slider__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 2px solid var(--bg-dark); pointer-events: auto; cursor: grab; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.units-slider__input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 2px solid var(--bg-dark); pointer-events: auto; cursor: grab; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.units-slider__input::-webkit-slider-thumb:active { cursor: grabbing; }
.units-slider__input::-moz-range-thumb:active { cursor: grabbing; }
.units-slider__input::-webkit-slider-runnable-track { background: transparent; height: 4px; }
.units-slider__input::-moz-range-track { background: transparent; height: 4px; }
.units-slider__input--hi { z-index: 2; }
.units-slider__input--lo { z-index: 3; }

/* Filtered-models table */
.units-results { margin-top: 40px; }
.units-results__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,.15); margin-bottom: 4px; }
.units-results__title { font-family: var(--ff-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--dark-green); }
.units-results__count { font-size: 12px; color: var(--gray-600); letter-spacing: 1px; text-transform: uppercase; }
.units-results__count strong { color: var(--bg-dark); font-size: 14px; margin-right: 3px; }
.units-results__table-wrap { max-height: 360px; overflow-y: auto; }
.units-results__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.units-results__table th { text-align: left; padding: 12px 10px 10px; font-family: var(--ff-heading); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray-600); border-bottom: 1px solid rgba(0,0,0,.12); position: sticky; top: 0; background: var(--white); z-index: 1; }
.units-results__table td { padding: 12px 10px; border-bottom: 1px solid rgba(0,0,0,.08); color: var(--dark-green); }
.units-results__table td:first-child { font-family: var(--ff-heading); font-weight: 700; letter-spacing: .5px; }
.units-results__table tr[hidden] { display: none; }
.units-results__empty { padding: 40px 20px; text-align: center; color: var(--gray-600); font-size: 13px; font-style: italic; }

/* Responsive */
@media (max-width: 900px) {
  .units-finder__inner { grid-template-columns: 1fr; gap: 48px; }
  .units-finder__render-wrap { position: static; }
}
@media (max-width: 700px) {
  .units-finder { padding: 52px 24px 72px; }
  .units-deck__track { gap: 32px; }
  .mega--drives { width: min(92vw, 620px); }
  .mega--drives .mega__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ===== RENTAL PAGE ===== */
.rental-content { background: var(--white); color: var(--bg-dark); padding: 96px var(--gutter); }
.rental-content__inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.rental-content__col { display: flex; flex-direction: column; }
.rental-content__heading { font-family: var(--ff-heading); font-size: clamp(20px, 2vw, 26px); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--bg-dark); margin: 0 0 20px; line-height: 1.2; }
.rental-content__body { font-size: 17px; line-height: 1.7; color: var(--bg-dark); }
.rental-content__body p { margin: 0 0 16px; }
.rental-content__body p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .rental-content { padding: 64px var(--gutter) 72px; }
  .rental-content__inner { grid-template-columns: 1fr; gap: 48px; }
}

.grecaptcha-badge { right: -100% !important; }