/* =====================================================
   Motorsports (ms.css) — LIGHT THEME (scoped)
   Used by:
   - motorsports index.php (body.bg-light.ms-site)
   - customer-portal.php (body.customer-portal.ms-site)
   - Lite vs Custom section (.ms-lite-custom) on lite-vs-custom.php
   Notes:
   - Everything is scoped to .ms-site and/or .ms-lite-custom.
   - No global Bootstrap overrides outside those scopes.
   ===================================================== */

/* =====================================================
   BRAND TOKENS (safe to be global)
   ===================================================== */
:root{
  --intech-orange: #da5e27;
  --intech-orange-dark: #fd390e;

  /* bootstrap mapping (only takes effect where Bootstrap consumes CSS vars) */
  --bs-primary: var(--intech-orange);
  --bs-primary-rgb: 218,94,39;

  /* shared sizing */
  --ms-dot-size: 10px;
}

/* =====================================================
   MS SITE — Light theme foundation (ONLY inside .ms-site)
   ===================================================== */
.ms-site{
  /* Header offset (adjust to your real fixed header height) */
  --site-header-h: 110px;

  /* Typography */
  --ms-font: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* Greys (Aucta-ish) */
  --ms-gray-950: #2f2f2f;              /* main heading */
  --ms-gray-800: rgba(47,47,47,.80);   /* sub headings */
  --ms-gray-650: rgba(0,0,0,.70);   /* body */   /* body */
  --ms-gray-550: rgba(0,0,0,.60);   /* small / helper */   /* small / helper */

  /* Lines / borders */
  --ms-line:  rgba(0,0,0,.10);
  --ms-line2: rgba(0,0,0,.14);

  /* Surfaces */
  --ms-surface:   #ffffff;
  --ms-surface-2: #f6f6f6;

  font-family: var(--ms-font);
  color: var(--ms-gray-650);
}

/* =====================================================
   Base text + heading colors (override Bootstrap)
   ===================================================== */

.ms-site{
  color: var(--ms-gray-650); /* default body text inside motorsports pages */
}

.ms-site h1,
.ms-site h2{
  color: var(--ms-gray-800) !important; /* main headings */
}

.ms-site h3,
.ms-site h4,
.ms-site h5,
.ms-site h6{
  color: var(--ms-gray-800) !important; /* sub headings */
}


@media (min-width: 992px){
  .ms-site{ --site-header-h: 130px; }
}

/* Per-page header stack height (portal has a bigger header stack) */
body.customer-portal.ms-site{ --site-header-h: 150px; }
@media (min-width: 992px){
  body.customer-portal.ms-site{ --site-header-h: 170px; }
}

/* Never let legacy wrappers shift the hero */
.ms-site .ms-hero-wrap.move-up{
  margin-top: 0 !important;
  transform: none !important;
}
/* =====================================================
   Buttons — scoped (no site-wide collisions)
   ===================================================== */
.ms-site .btn-primary,
.ms-site .btn.btn-primary{
  background-color: var(--intech-orange) !important;
  border-color: var(--intech-orange) !important;
  color: #fff !important;
}
.ms-site .btn-primary:hover,
.ms-site .btn-primary:focus,
.ms-site .btn.btn-primary:hover,
.ms-site .btn.btn-primary:focus{
  background-color: var(--intech-orange-dark) !important;
  border-color: var(--intech-orange-dark) !important;
  color: #fff !important;
}
.ms-site .btn-outline-primary{
  color: var(--intech-orange) !important;
  border-color: var(--intech-orange) !important;
}
.ms-site .btn-outline-primary:hover,
.ms-site .btn-outline-primary:focus{
  background-color: var(--intech-orange) !important;
  border-color: var(--intech-orange) !important;
  color: #fff !important;
}

/* =====================================================
   Hero (standard, reusable)
   ===================================================== */
.ms-site .ms-hero{
  /* per-hero controls */
  --ms-hero-overlay: rgba(240,240,240,.78);
  --ms-hero-pos-y: 50%;
  --ms-hero-text-shift: 0px; /* + moves text DOWN, - moves text UP */

  position: relative;
  overflow: hidden;
  box-sizing: border-box;

  /* === SIZING (single, predictable system) === */
  min-height: 220px;
  padding-top: calc(var(--site-header-h) + 24px);
  padding-right: 16px;
  padding-left: 16px;
  padding-bottom: 24px;

  display: grid;
  place-items: center;
  text-align: center;

  /* legacy background image support */
  background:
    linear-gradient(var(--ms-hero-overlay), var(--ms-hero-overlay)),
    var(--hero-bg);
  background-size: cover;
  background-position: 50% var(--ms-hero-pos-y);
  background-repeat: no-repeat;
}

/* HERO SIZE MODIFIERS (only override min-height/padding) */

/* Small */
.ms-site .ms-hero.ms-hero--sm{
  min-height: 180px;
  padding-top: calc(var(--site-header-h) + 16px);
  padding-bottom: 16px;
}

/* Compact (default for video heroes) */
.ms-site .ms-hero.ms-hero--compact{
  min-height: 220px;
  padding-top: calc(var(--site-header-h) + 24px);
  padding-bottom: 24px;
}

/* Large (use sparingly) */
.ms-site .ms-hero.ms-hero--lg{
  min-height: 320px;
  padding-top: calc(var(--site-header-h) + 48px);
  padding-bottom: 48px;
}

/* video background layer */
.ms-site .ms-hero__video{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ms-site .ms-hero__video video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% var(--ms-hero-pos-y);
}
.ms-site .ms-hero__video::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--ms-hero-overlay);
  pointer-events:none;
}

/* avoid double overlay divs */
.ms-site .ms-hero .portal-hero__overlay{ display:none !important; }

.ms-site .ms-hero__inner{
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  padding: 0 12px;
  box-sizing: border-box;
  transform: translateY(var(--ms-hero-text-shift));
}

.ms-site .ms-hero__title{
  font-family: var(--ms-font) !important;
  font-size: clamp(32px, 4vw, 56px) !important;
  line-height: 1.05;
  margin: 0;
  color: var(--ms-gray-800) !important;
  text-shadow: none !important;
  font-weight: 750 !important;
}

.ms-site .ms-hero__sub{
  margin: 14px 0 0;
  font-size: clamp(14px, 1.3vw, 21px);
  opacity: .92;
  color: var(--ms-gray-650) !important;
  text-shadow: none !important;
}

/* =========================================
   NO-MEDIA HERO (Lite vs Custom)
   - still clears fixed header
   - much tighter vertical space
   ========================================= */
.ms-site .ms-hero.ms-hero--no-media{
  min-height: 0 !important;

  /* keep header clearance but tighter than video heroes */
  padding-top: calc(var(--site-header-h) + 14px) !important;
  padding-bottom: 18px !important;

  /* keep your background system */
  background-size: cover;
  background-position: 50% var(--ms-hero-pos-y);
}

/* tighten title/sub spacing when it wraps */
.ms-site .ms-hero--no-media .ms-hero__title{
  line-height: 1.02 !important;
  margin-bottom: 10px !important;
}
.ms-site .ms-hero--no-media .ms-hero__sub{
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

/* =====================================================
   Reusable MS section max width
   ===================================================== */

/* Make the max-width helpers work whether you use:
     <div class="ms-section ...">
   OR <section class="ms-section--wide ...">   (your current pattern)
*/
.ms-site .ms-section,
.ms-site .ms-section--wide,
.ms-site .ms-section--narrow,
.ms-site .ms-section--video{
  --ms-section-max: 1200px;
  width: 100%;
  max-width: var(--ms-section-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* “Wide” = a little breathing room, still not full-bleed */
.ms-site .ms-section--wide{ --ms-section-max: 1340px; }
.ms-site .ms-section--narrow{ --ms-section-max: 1000px; }
.ms-site .ms-section--video{ --ms-section-max: 900px; }

/* Keep the underline constrained too (match wide sections) */
.ms-site .double-faded-underline{
  display: block;
  width: 100%;
  max-width: 1340px;     /* was 1200px */
  margin: 16px auto 16px;   /* keep your spacing */
}


/* =====================================================
   HERO → CONTENT SPACING (reusable)
   Pattern:
     <div class="ms-hero-wrap"> .hero. </div>
     <div class="ms-section ms-after-hero"> .first content. </div>
   Notes:
   - Use the class on the FIRST block under the hero to control the gap.
   - Keeps widths intact (because .ms-section still controls max-width).
   ===================================================== */

.ms-site .ms-hero-wrap{ display:block; }

.ms-site .ms-after-hero{
  /* default: tight to hero */
  --ms-after-hero-pad: 0px;
  padding-top: var(--ms-after-hero-pad) !important;
  margin-top: 0 !important;
}

/* If you prefer automatic spacing without adding a class, you can
   rely on sibling structure instead (works for your current markup): */
.ms-site .ms-hero-wrap + .ms-section{
  padding-top: var(--ms-after-hero-pad, 0px) !important;
  margin-top: 0 !important;
}

/* Portal default: just a hair under the hero */
body.customer-portal.ms-site{ --ms-after-hero-pad: 0px; }

/* Reduce “hero → content” dead space on this page specifically */
body.customer-portal.ms-site .ms-hero.ms-hero--portal{
  padding-bottom: 18px;
}
/* =====================================================
   PRINTS / SPECS two-column layout
   ===================================================== */
.ms-site .ms-prints-layout{
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;

  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.ms-site .ms-prints-left{
  flex: 0 0 360px;
  max-width: 420px;
}

.ms-site .ms-prints-right{
  flex: 1 1 640px;
  min-width: 0;
  width: 100%;
  max-width: 820px;
  margin-left: auto;
}

/* Keep left column visible on desktop */
@media (min-width: 992px){
  .ms-site .ms-prints-left{
    position: sticky;
    top: calc(var(--site-header-h) + 20px);
  }
}

/* =====================================================
   Accordions (PRINTS + SPECS) — light borders + grey text
   ===================================================== */
.ms-site #printsAccordion,
.ms-site #specsAccordion{
  border: 1px solid var(--ms-line2) !important;
  border-radius: 6px;
  overflow: hidden;
  background: transparent !important;
}

/* Remove item boxes / gaps */
.ms-site #printsAccordion .accordion-item,
.ms-site #specsAccordion .accordion-item{
  border: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Divider between items */
.ms-site #printsAccordion .accordion-item + .accordion-item,
.ms-site #specsAccordion .accordion-item + .accordion-item{
  border-top: 1px solid var(--ms-line2) !important;
}

/* Accordion buttons */
.ms-site #printsAccordion .accordion-button,
.ms-site #specsAccordion .accordion-button{
  background: transparent !important;
  color: var(--ms-gray-800) !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Open state divider line */
.ms-site #printsAccordion .accordion-button:not(.collapsed),
.ms-site #specsAccordion .accordion-button:not(.collapsed){
  border-bottom: 1px solid var(--ms-line2) !important;
}

/* Body */
.ms-site #printsAccordion .accordion-body,
.ms-site #specsAccordion .accordion-body{
  padding-left: 0;
  padding-right: 0;
  background: transparent !important;
  color: var(--ms-gray-650) !important;
}

/* Remove focus glow */
.ms-site #printsAccordion .accordion-button:focus,
.ms-site #specsAccordion .accordion-button:focus{
  box-shadow: none !important;
}

/* Chevrons: closed = grey, open = orange */
.ms-site #printsAccordion .accordion-button::after,
.ms-site #specsAccordion .accordion-button::after{
  opacity: 1 !important;
  filter: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666666'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
.ms-site #printsAccordion .accordion-button:not(.collapsed)::after,
.ms-site #specsAccordion .accordion-button:not(.collapsed)::after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23da5e27'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* Inside-specs dividers between Triple / Tandem / Single headings */
.ms-site #specsAccordion .accordion-body h3{
  padding-top: 1rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--ms-line2) !important;
}
.ms-site #specsAccordion .accordion-body h3:first-of-type{
  border-top: none !important;
  padding-top: 0;
  margin-top: 0;
}

/* =====================================================
   Tables — neutralize table-dark on light pages
   ===================================================== */
.ms-site .table.table-dark{
  --bs-table-bg: transparent;
  --bs-table-color: var(--ms-gray-650);
  --bs-table-border-color: var(--ms-line);
  --bs-table-striped-bg: rgba(0,0,0,.02);
  --bs-table-hover-bg: rgba(0,0,0,.03);
  background-color: transparent !important;
  color: var(--ms-gray-650) !important;
}

.ms-site .table.table-dark thead th{
  color: var(--ms-gray-800) !important;
  border-bottom-color: var(--ms-line2) !important;
}

/* Keep tight columns for prints tables */
.ms-site .ms-prints-right table{
  width: 100%;
  table-layout: fixed;
}
.ms-site .ms-prints-right th:first-child{ width: 220px; }
.ms-site .ms-prints-right th.text-center,
.ms-site .ms-prints-right td.text-center{ width: 140px; }

/* Download icons darker */
.ms-site .download,
.ms-site .download i,
.ms-site .download svg,
.ms-site .download::before,
.ms-site .download i::before{
  opacity: 1 !important;
  color: rgba(0,0,0,.30) !important;
  fill: rgba(0,0,0,.30) !important;
}

/* =====================================================
   TRIM / COLOR SELECTOR (script-safe, light)
   ===================================================== */
.ms-site .ms-trim-selector{
  --ms-orange: var(--intech-orange);

  --ms-line:  var(--ms-line);
  --ms-line2: var(--ms-line2);
  --ms-text:  var(--ms-gray-800);
  --ms-muted: var(--ms-gray-650);

  background: transparent;
  border: 0;
  padding: 0;
}

/* Header row */
.ms-site .ms-trim-head{
  display: grid;
  grid-template-columns: 1fr 260px;
  align-items: end;
  padding: 0 0 12px 0;
  border-bottom: 1px solid var(--ms-line2);
}

.ms-site .ms-trim-title{
  color: var(--ms-text);
  font-weight: 700;
  letter-spacing: .2px;
  position: relative;
  padding-bottom: 0px;
  width: fit-content;
  margin: 0;
}

.ms-site .ms-trim-colheads{
  display: grid;
  grid-template-columns: 130px 130px;
  justify-items: center;
  align-items: center;
  margin-left: auto;
  color: var(--ms-muted) !important;
  font-weight: 650;
  font-size: 1.05rem;
  letter-spacing: .2px;
}

/* List rows */
/* List rows — match colors table (top + bottom rule) */
.ms-site .ms-trim-list{
  border-top: 1px solid var(--ms-line2);
  border-bottom: 1px solid var(--ms-line2);
}

.ms-site .ms-trim-option{
  display: grid;
  grid-template-columns: 28px 1fr 260px;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  margin: 0;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--ms-line);
  position: relative;
  overflow: hidden;
}

.ms-site .ms-trim-option:hover{
  background: rgba(0,0,0,.04) !important; /* light grey hover */
  border-bottom-color: rgba(0,0,0,.14) !important;
}

/* TRIM row dividers — always visible like table rows */
.ms-site .ms-trim-option{
  border-bottom: 0 !important; /* divider handled by ::after so it doesn't get washed out */
}

.ms-site .ms-trim-option::after{
  content:"";
  position: absolute;
  left: 0;     /* change to 38px if you want the line to start after the radio */
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ms-line2);
  z-index: 4;  /* above .ms-trim-row-bg */
}

/* No divider after last row (the list has the bottom border) */
.ms-site .ms-trim-option:last-child::after{
  display: none;
}

.ms-site .ms-trim-text{
  color: var(--ms-text) !important;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

/* TRIM radio (filled checked) */
.ms-site .ms-trim-radio{
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.32);
  background: transparent;
  display: inline-grid;
  place-items: center;
  margin: 0;
  position: relative;
  z-index: 2;
}
.ms-site .ms-trim-radio:checked{ border-color: var(--intech-orange); }
.ms-site .ms-trim-radio:checked::after{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--intech-orange);
}

/* Dots aligned under headers */
.ms-site .ms-trim-dots{
  display: grid;
  grid-template-columns: 130px 130px;
  justify-items: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Shared dot sizing */
.ms-site .ms-dot{
  width: var(--ms-dot-size) !important;
  height: var(--ms-dot-size) !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.18) !important;
}
.ms-site .ms-dot.on{
  background: var(--intech-orange) !important;
}

/* Selected row background (no :has, script-safe) */
.ms-site .ms-trim-row-bg{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(218,94,39,.14),
    rgba(218,94,39,.06) 40%,
    rgba(0,0,0,0) 100%
  );
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 1;
}
.ms-site .ms-trim-radio:checked ~ .ms-trim-row-bg{ opacity: 1; }

/* COLOR radios (filled checked) — also removes legacy double-dot */
.ms-site .ms-color-radio{
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.32);
  background: transparent;
  display: inline-grid;
  place-items: center;
}
.ms-site .ms-color-radio::before{ content: none !important; display: none !important; }
.ms-site .ms-color-radio:checked{ border-color: var(--intech-orange); }
.ms-site .ms-color-radio:checked::after{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--intech-orange);
}

/* Table indicator dots (same size as trim dots) */
.ms-site .color-circle-indicator{
  width: var(--ms-dot-size) !important;
  height: var(--ms-dot-size) !important;
  border-radius: 999px !important;
}

/* Mobile tighten */
@media (max-width: 576px){
  .ms-site .ms-trim-head{ grid-template-columns: 1fr 200px; }
  .ms-site .ms-trim-colheads{ grid-template-columns: 100px 100px; font-size: 1rem; }
  .ms-site .ms-trim-option{ grid-template-columns: 28px 1fr 200px; }
  .ms-site .ms-trim-dots{ grid-template-columns: 100px 100px; }
}

/* =====================================================
   Wheel Options — layout helpers (scoped)
   Works with: .ms-prints-layout.ms-wheel-layout + .ms-wheel-midright
   ===================================================== */
.ms-site .ms-prints-layout.ms-wheel-layout{
  align-items: center;
  flex-wrap: nowrap;
}
.ms-site .ms-prints-layout.ms-wheel-layout .ms-wheel-midright{
  display: grid;
  grid-template-columns: minmax(420px, 450px) 340px;
  gap: 28px;
  align-items: center;
  min-width: 0;
}
.ms-site .ms-prints-layout.ms-wheel-layout .ms-wheel-guide{
  width: 100%;
  max-width: 425px;
  height: auto;
  display: block;
}
.ms-site .ms-prints-layout.ms-wheel-layout .ms-wheel-copy{
  max-width: 320px;
  color: var(--ms-gray-650) !important;
}
@media (max-width: 991.98px){
  .ms-site .ms-prints-layout.ms-wheel-layout{ flex-wrap: wrap; }
  .ms-site .ms-prints-layout.ms-wheel-layout .ms-wheel-midright{ grid-template-columns: 1fr; }
  .ms-site .ms-prints-layout.ms-wheel-layout .ms-wheel-copy{ max-width: 100%; }
}

/* =====================================================
   Load & Ride section (light)
   ===================================================== */
.ms-site .ms-lr-hero img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* =====================================================
   Load & Ride — Modern Cards (bigger visual change)
   Replace lines 719–787
   ===================================================== */

/* keep the hero image as-is */
.ms-site .ms-lr-hero img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* =====================================================
   Load & Ride — 2 Card Upgrade (centered copy + centered CTA)
   PASTE THIS WHOLE BLOCK (replaces your current LR block)
   ===================================================== */

.ms-site .ms-lr-bar{
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;

  /* remove the old big box look */
  padding: 0;
  border: 0;
  background: transparent;
}

/* Kill the old center divider (if it still exists in HTML) */
.ms-site .ms-lr-center{ display: none !important; }

/* Turn LEFT + RIGHT into cards (works with your existing HTML) */
.ms-site .ms-lr-left,
.ms-site .ms-lr-right{
  position: relative;

  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 18px;
  padding: 26px 30px;

  box-shadow: 0 18px 60px rgba(0,0,0,.06);

  display: flex;
  flex-direction: column;
  gap: 14px;

  /* NEW: center everything for symmetry */
  text-align: center;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Centered “brand” accent (tiny, not loud) */
.ms-site .ms-lr-left::before,
.ms-site .ms-lr-right::before{
  content:"";
  position: absolute;
  left: 50%;
  top: 14px;

  width: clamp(170px, 55%, 360px);
  height: 3px;
  border-radius: 999px;

  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    rgba(218,94,39,0),
    rgba(218,94,39,.55),
    rgba(218,94,39,0)
  );

  opacity: .55;
  pointer-events: none;
}

/* Hover = modern lift */
@media (hover:hover){
  .ms-site .ms-lr-left:hover,
  .ms-site .ms-lr-right:hover{
    transform: translateY(-3px);
    border-color: rgba(0,0,0,.10);
    box-shadow: 0 26px 85px rgba(0,0,0,.10);
  }
}

/* Copy: nicer rhythm (centered + controlled width) */
.ms-site .ms-lr-copy{
  margin: 0 auto;
  color: var(--ms-gray-650) !important;
  line-height: 1.6;
  font-size: 1.1rem;

  /* slightly tighter for centered copy */
  max-width: 48ch;

  text-wrap: balance;
}

/* Buttons: keep global .btn.btn-primary styling — only position */
.ms-site .ms-lr-left .btn,
.ms-site .ms-lr-right .btn{
  margin-top: auto;          /* pins button to bottom of card */
  align-self: center;        /* NEW: centered CTA */
}

/* Mobile stack */
@media (max-width: 991.98px){
  .ms-site .ms-lr-bar{
    grid-template-columns: 1fr;
  }

  /* Keep centered on mobile too (clean + consistent) */
  .ms-site .ms-lr-left,
  .ms-site .ms-lr-right{
    text-align: center;
  }

  .ms-site .ms-lr-copy{
    margin-left: auto;
    margin-right: auto;
  }

  .ms-site .ms-lr-left .btn,
  .ms-site .ms-lr-right .btn{
    align-self: center;
  }
}



/* =====================================================
   Media frame (modern, soft) + subtle orange halo
   ===================================================== */
.ms-site .ms-media-frame{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 0;
  background: #fff;
  overflow: hidden;

  /* shadow + tiny orange ring */
  box-shadow:
    0 14px 45px rgba(0,0,0,.10),
    0 0 0 4px rgba(218,94,39,.15);
}

.ms-site .ms-media-frame > img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0; /* frame clips */
}

/* =====================================================
   COLOR OPTIONS (left image stack + right tables)
   ===================================================== */

/* Force a clean 2-col layout (override the Bootstrap d-flex on this row) */
.ms-site .ms-color-options .side-by-side{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  display: grid !important;
  grid-template-columns: 460px minmax(680px, 1fr);
  gap: clamp(26px, 3.2vw, 56px);
  align-items: start;
}

@media (max-width: 991.98px){
  .ms-site .ms-color-options .side-by-side{
    grid-template-columns: 1fr;
  }
}

/* Kill any legacy “offset” styling in this one section */
.ms-site .ms-color-options .percentage-offset{
  margin-left: 0 !important;
  padding-left: 0 !important;
  transform: none !important;
}

.ms-site .ms-color-options .side-copy{
  max-width: 460px;
}

/* Desktop: keep the preview column visible while scrolling options */
@media (min-width: 992px){
  .ms-site .ms-color-options .side-copy{
    position: sticky;
    top: calc(var(--site-header-h) + 24px);
    align-self: start;
  }
}

.ms-site .ms-color-options .ms-co-title{
  margin: 0 0 6px 0;
  font-weight: 800;
  letter-spacing: .01em;
}

.ms-site .ms-color-options .ms-co-sub{
  margin: 0 0 18px 0;
  color: var(--ms-gray-650) !important;
  font-weight: 600;
}

.ms-site .ms-color-options .ms-co-block + .ms-co-block{
  margin-top: 16px;
}

.ms-site .ms-color-options .ms-co-label{
  text-align: center;
  font-size: 1.8em;
  font-weight: 800;
  color: var(--ms-gray-800) !important;
  margin: 6px 0 10px;
}

/* Make the trailer “float” in the frame like your reference */
.ms-site .ms-color-options .ms-co-frame{
  background: #fff;
}

.ms-site .ms-color-options #trailer-color{
  width: auto;
  max-width: 100%;
  max-height: clamp(200px, 22vw, 280px);
  margin: 18px auto;
  display: block;
  transition: opacity .18s ease; /* add */
}

/* Cabinet image should feel “full” inside the frame */
.ms-site .ms-color-options #cabinet-color{
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .18s ease; /* add */
}

/* ==========================================================
   Lite vs Custom — light cards (used on lite-vs-custom.php)
   ========================================================== */
.ms-lite-custom{
  --ms-text: #3f3f3f;
  --ms-muted: rgba(63,63,63,.72);
  --ms-line: rgba(0,0,0,.10);
  --ms-card-bg: #f5f5f5;
  --ms-card-border: rgba(0,0,0,.06);

  --ms-orange: var(--intech-orange);
  --ms-orange-dark: var(--intech-orange-dark);

  padding: 28px 0;
background: #f5f6f7;
  color: var(--ms-text);
  font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.ms-lite-custom h2{
  color: var(--ms-text) !important;
  letter-spacing: .10em !important;
  opacity: .95;
}
.ms-lite-custom p{ color: var(--ms-muted); }

/* Standard underline */
.ms-lite-custom .double-faded-underline{
  display: block;
  width: min(520px, 92%);
  height: 2px;
  margin: 0.75rem auto 1.25rem;
  opacity: .9;
  background: linear-gradient(90deg, rgba(0,0,0,0), var(--ms-orange), rgba(0,0,0,0)) !important;
}

/* VS badge + divider 
.ms-lite-custom .ms-two-col-feature-wrap{ position: relative; align-items: stretch; }
@media (min-width: 992px){
  .ms-lite-custom .ms-two-col-feature-wrap::before{
    content: "VS";
    position: absolute;
    left: 50%;
    top: 92px;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: .08em;
    color: rgba(63,63,63,.75);
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    z-index: 2;
  }
  .ms-lite-custom .ms-two-col-feature-wrap::after{
    content:"";
    position:absolute;
    left:50%;
    top: 115px;
    bottom: 18px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.10), transparent);
    transform: translateX(-50%);
    z-index: 1;
  }
}
*/
/* Cards */
.ms-lite-custom .ms-feature-col{
  height: 100%;
  background: var(--ms-card-bg);
  border: 1px solid var(--ms-card-border);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 14px 45px rgba(0,0,0,.06);
  position: relative;

  display: flex;
  flex-direction: column;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
  color: var(--ms-text);
}
.ms-lite-custom .ms-feature-col:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 65px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.08);
}

.ms-lite-custom .ms-feature-col-title{
  width: 100%;
  display: block;
  text-align: center;
  font-size: clamp(38px, 3.8vw, 52px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
  color: rgba(63,63,63,.78) !important;
  margin: 0 0 8px !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.ms-lite-custom .ms-feature-kicker{
  text-align: center;
  margin: 0 0 12px;
  color: var(--ms-muted);
  font-size: 1.1rem;
  line-height: 1.5;
  min-height: 44px;
}

.ms-lite-custom .ms-feature-item{
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 26px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--ms-line);
  min-height: 88px;
}
.ms-lite-custom .ms-feature-col .ms-feature-item:last-of-type{ border-bottom: 0; }

.ms-lite-custom .ms-feature-icon{
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-top: 2px;
}
.ms-lite-custom .ms-feature-icon img{ width: 22px; height: 22px; display: block; }
.ms-lite-custom .ms-feature-icon .icon-svg,
.ms-lite-custom .ms-feature-icon .icon-svg *{
  fill: var(--ms-orange) !important;
  stroke: var(--ms-orange) !important;
}

.ms-lite-custom .ms-feature-body h3{
  margin: 0 0 4px;
  font-weight: 650;
  color: var(--ms-text) !important;
  line-height: 1.2;
}
.ms-lite-custom .ms-feature-body p{
  margin: 0;
  color: var(--ms-muted) !important;
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Badges */
.ms-lite-custom .ms-badge{
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  color: rgba(63,63,63,.72);
}
.ms-lite-custom .ms-badge--popular{
  background: rgba(218,94,39,.08);
  border-color: rgba(218,94,39,.18);
}
.ms-lite-custom .ms-badge--premium{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.10);
}

/* CTA row pinned to bottom */
.ms-lite-custom .ms-feature-col .ms-feature-actions{
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* CTA pills */
.ms-lite-custom .ms-feature-col .ms-feature-actions a.ms-btn-orange{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .42rem .95rem !important;
  border-radius: .65rem !important;

  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 1.1rem !important;
  line-height: 1.1 !important;
  text-decoration: none;

  background: var(--ms-orange) !important;
  border: 2px solid var(--ms-orange) !important;
  color: #fff !important;

  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.ms-lite-custom .ms-feature-col .ms-feature-actions a.ms-btn-orange:hover{
  background: var(--ms-orange-dark) !important;
  border-color: var(--ms-orange-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* If you have a centered CTA row elsewhere */
.ms-cta-center{ text-align: center; }
.ms-cta-center .btn{ display: inline-flex; }

/* Also scope primary button color to this section (Lite vs Custom page only) */
.ms-lite-custom .btn-primary{
  background-color: var(--intech-orange) !important;
  border-color: var(--intech-orange) !important;
  color: #fff !important;
}
.ms-lite-custom .btn-primary:hover,
.ms-lite-custom .btn-primary:focus{
  background-color: var(--intech-orange-dark) !important;
  border-color: var(--intech-orange-dark) !important;
  color: #fff !important;
}

/* =====================================================
   COLOR ROW highlight (colors table) — match TRIM fade
   Controlled by JS adding .is-selected to tr.ms-color-row
   ===================================================== */

.ms-site tr.ms-color-row.is-selected{
  background: linear-gradient(
    90deg,
    rgba(218,94,39,.14) 0%,
    rgba(218,94,39,.06) 40%,
    rgba(218,94,39,.02) 78%,
    rgba(218,94,39,0) 100%
  ) !important;

  /* make it feel like the trim selection (subtle edge, no left bar) */
  outline: 1px solid rgba(218,94,39,.18);
  outline-offset: -1px;

  border-left: 0 !important;
  box-shadow: none !important;
}

/* keep gradient continuous across cells */
.ms-site tr.ms-color-row.is-selected td{
  background: transparent !important;
}


/* =====================================================
   COLORS table readability (keep grey hover, darker/heavier text)
   ===================================================== */

/* Color name + general row text */
.ms-site tr.ms-color-row td{
  color: rgba(0,0,0,.72) !important;
  font-weight: 600 !important;
}

/* The actual color name cell tends to have its own class */
.ms-site .ms-color-name{
  color: rgba(0,0,0,.72) !important;
  font-weight: 600 !important;
}

/* On hover, make sure it doesn't fade out */
.ms-site tr.ms-color-row:hover td,
.ms-site tr.ms-color-row:hover .ms-color-name{
  color: rgba(0,0,0,.80) !important;
}


/* PRINTS accordion header: keep readable + nice grey hover */
.ms-site .ms-prints-right .accordion-button{
  color: rgba(0,0,0,.75) !important;
  font-weight: 600;
  background: #f8f9fa !important;
  box-shadow: none !important;
}

.ms-site .ms-prints-right .accordion-button:hover,
.ms-site .ms-prints-right .accordion-button:focus{
  background: #e9ecef !important; /* grey hover */
  color: rgba(0,0,0,.80) !important;
}

.ms-site .ms-prints-right .accordion-button:not(.collapsed){
  background: #eef1f4 !important;
  color: rgba(0,0,0,.80) !important;
  box-shadow: none !important;
}

/* PRINTS table: darker labels + darker download icons/links */
.ms-site .ms-prints-right table,
.ms-site .ms-prints-right .table{
  color: rgba(0,0,0,.75);
}

.ms-site .ms-prints-right th{
  color: rgba(0,0,0,.80);
  font-weight: 700;
}

.ms-site .ms-prints-right td{
  color: rgba(0,0,0,.70);
  font-weight: 600; /* makes row labels easier to read */
}

/* download <a> + icon */
.ms-site .ms-prints-right td a{
  color: rgba(0,0,0,.70) !important;
  opacity: 1 !important;
}

.ms-site .ms-prints-right td a:hover{
  color: rgba(0,0,0,.85) !important;
}

/* row hover grey, keep text readable */
.ms-site .ms-prints-right tbody tr:hover{
  background: #e9ecef !important;
}

.ms-site .ms-prints-right tbody tr:hover td,
.ms-site .ms-prints-right tbody tr:hover th,
.ms-site .ms-prints-right tbody tr:hover a{
  color: rgba(0,0,0,.85) !important;
}

/* =====================================================
   TRIM rows — dividers like Standard Colors (keeps orange highlight)
   Paste at VERY bottom of ms.css
   ===================================================== */

/* Trim dividers — darker, match Standard Colors */
.ms-site .ms-trim-list{
  border-top: 1px solid rgba(0,0,0,.45) !important;
  border-bottom: 1px solid rgba(0,0,0,.45) !important;
}

.ms-site .ms-trim-option{
  border-bottom: 1px solid rgba(0,0,0,.45) !important;
}

/* No extra line after last row (list already has bottom border) */
.ms-site .ms-trim-option:last-child{
  border-bottom: 0 !important;
}

/* Kill the older pseudo-divider system so you don’t get doubles */
.ms-site .ms-trim-option::after{
  display: none !important;
}

/* Keep highlight ABOVE the row background but BELOW text/dots */
.ms-site .ms-trim-row-bg{ z-index: 1 !important; }
.ms-site .ms-trim-text,
.ms-site .ms-trim-radio,
.ms-site .ms-trim-dots{ z-index: 2 !important; }

/* Optional: hover like table hover, without fighting selected highlight */
.ms-site .ms-trim-option:hover{
  background: rgba(0,0,0,.04) !important;
}


/* =====================================================
   Color Options — lock columns (prevents left shrinking)
   ===================================================== */

.ms-color-options .side-by-side{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;

  gap: 72px !important;              /* more breathing room between columns */

  position: relative;
  left: -24px;                      /* subtle shift left */
}

/* Left column fixed like your reference */
.ms-color-options .side-copy{
  flex: 0 0 500px !important;
  max-width: 500px !important;
  min-width: 500px !important;
}

/* Right column gets remaining space */
.ms-color-options .side-img{
  flex: 1 1 auto !important;
  min-width: 680px !important;  /* keeps the table happy */
}

/* Center labels above frames */
.ms-color-options .ms-co-label{
  text-align: center !important;
  font-weight: 800 !important;
  color: rgba(0,0,0,.65) !important;
  margin: 14px 0 8px !important;
}

/* Frames should have presence */
.ms-color-options .ms-media-frame{
  margin-bottom: 18px !important;
}

/* Exterior “floating” image sizing */
.ms-color-options #trailer-color{
  width: auto !important;
  max-width: 100% !important;
  max-height: 280px !important;
  margin: 18px auto !important;
  display: block !important;
}

/* Responsive stack */
@media (max-width: 1200px){
  .ms-color-options .side-by-side{
    flex-wrap: wrap !important;
  }
  .ms-color-options .side-copy{
    flex: 1 1 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
  }
  .ms-color-options .side-img{
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* =====================================================
   COLOR OPTIONS — mobile fix (make right side swipeable)
   ===================================================== */
@media (max-width: 991.98px){

  /* stack the two columns */
  .ms-site .ms-color-options .side-by-side{
    grid-template-columns: 1fr !important;
  }

  /* make the right panel horizontally scrollable */
  .ms-site .ms-color-options .side-img{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;          /* gives room for scrollbar on iOS */
    margin-top: 12px;
  }

  /* force a “readable minimum width” so the table doesn’t compress */
  .ms-site .ms-color-options .side-img table{
    min-width: 760px;              /* tweak: 700–900 */
  }

  /* make tap targets a bit bigger */
  .ms-site .ms-color-options .ms-trim-option{
    padding: 14px 0 !important;
  }
  .ms-site .ms-color-options .ms-trim-radio,
  .ms-site .ms-color-options .ms-color-radio{
    width: 18px;
    height: 18px;
  }
}

body.customer-portal.ms-site .text-dark,
body.customer-portal.ms-site .text-black{
  color: var(--ms-gray-800) !important;
}

/* =====================================================
   CUSTOMER PORTAL — heading + FAQ (single, non-conflicting)
   Drop this in and DELETE the two older FAQ blocks.
   ===================================================== *//* FAQ section (light theme) */
body.customer-portal.ms-site #faq{
  background-color: #f8f9fa !important;
}

/* Match the main page H1 sizing for the FAQ headline(s) */
body.customer-portal.ms-site #faq h1{
  font-family: var(--ms-font) !important;
  font-size: clamp(2.6rem, 6vw, 4.25rem) !important; /* same as .ms-site h1 */
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  line-height: 1.05 !important;
  color: var(--ms-gray-800) !important;
}

/* General FAQ headings */
body.customer-portal.ms-site #faq h2,
body.customer-portal.ms-site #faq h3{
  color: var(--ms-gray-800) !important;
}

/* Only text elements (don’t nuke buttons/links globally) */
body.customer-portal.ms-site #faq p,
body.customer-portal.ms-site #faq li,
body.customer-portal.ms-site #faq span,
body.customer-portal.ms-site #faq .side-copy{
  color: var(--ms-gray-650) !important;
}

/* Accordion pieces (if present in #faq anywhere) */
body.customer-portal.ms-site #faq .accordion-item,
body.customer-portal.ms-site #faq .accordion-button,
body.customer-portal.ms-site #faq .accordion-body{
  background: transparent !important;
  color: var(--ms-gray-550) !important; /* <- changed */
}


/* Keep accordion chevron normal */
body.customer-portal.ms-site #faq .accordion-button::after{
  filter: none !important;
}

/* Keep primary buttons white inside FAQ */
body.customer-portal.ms-site #faq a.btn-primary,
body.customer-portal.ms-site #faq a.btn.btn-primary,
body.customer-portal.ms-site #faq a.btn-primary:visited,
body.customer-portal.ms-site #faq a.btn-primary:hover,
body.customer-portal.ms-site #faq a.btn-primary:focus{
  color: #fff !important;
}




/* =====================================================
   CUSTOMER PORTAL — match Specs heading style
   (Open Sans, 36px, weight 650, grey + orange highlight)
   ===================================================== */

body.customer-portal.ms-site h3.display-3{
  font-family: var(--ms-font) !important;
  font-size: 36px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  letter-spacing: .02em !important;
  color: var(--ms-gray-800) !important;
  margin: 0 0 10px 0;
}

/* Keep the highlighted word orange, but not heavier than the heading */
body.customer-portal.ms-site h3.display-3 strong{
  font-weight: 650 !important;
  color: var(--intech-orange) !important;
}

/* =====================================================
   CUSTOMER PORTAL — FAQ title: Specs-style (36px / 650 / grey)
   ===================================================== */

body.customer-portal.ms-site #faq h1{
  font-family: var(--ms-font) !important;
  font-size: 36px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  letter-spacing: .02em !important;
  color: var(--ms-gray-800) !important;
  text-transform: none !important;
  margin: 0 0 10px 0 !important;
}

/* If the old dark-theme inline container color still exists, neutralize it */
body.customer-portal.ms-site #faq .container{
  color: var(--ms-gray-650) !important;
}

/* Make Bootstrap bg utilities behave consistently */
body.bg-white { background-color: #fff !important; }
body.bg-light { background-color: #f5f6f7 !important; }



/* =====================================================
   CUSTOMER PORTAL — Portal Tour layout (single source of truth)
   ===================================================== */

/* Mobile-first: STACK */
body.customer-portal.ms-site .ms-portal-tour .side-by-side{
  /* override the d-flex layout cleanly */
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(14px, 2vw, 28px) !important;
  align-items: start;
}

/* Allow grid children to shrink (prevents overflow) */
body.customer-portal.ms-site .ms-portal-tour .side-img,
body.customer-portal.ms-site .ms-portal-tour .side-copy{
  min-width: 0;
}

/* Left column sizing */
body.customer-portal.ms-site .ms-portal-tour .side-img{
  max-width: 100%;
  justify-self: start;
}

/* Desktop: 2 columns */
@media (min-width: 992px){
  body.customer-portal.ms-site .ms-portal-tour .side-by-side{
    grid-template-columns: minmax(520px, 640px) minmax(700px, 1fr) !important;
    align-items: center;
  }

  body.customer-portal.ms-site .ms-portal-tour .side-img{
    max-width: 640px;
    justify-self: end;
  }

  /* keep "Customer Portal" on one line on desktop only */
  body.customer-portal.ms-site .ms-portal-tour .side-img h3{
    white-space: nowrap;
  }
}

/* Mobile: allow heading wrap */
@media (max-width: 991.98px){
  body.customer-portal.ms-site .ms-portal-tour .side-img h3{
    white-space: normal !important;
  }
}

/* =====================================================
   Video embed helper (YouTube/Vimeo)
   ===================================================== */
.ms-site .ms-video-embed{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}
.ms-site .ms-video-embed > iframe,
.ms-site .ms-video-embed > video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* =========================================
   PORTAL: add space AFTER hero (stop overlap)
   ========================================= */
body.customer-portal .ms-portal-tour.ms-after-hero{
  margin-top: 0 !important;
  padding-top: 56px !important;  /* adjust: 32 / 48 / 64 */
}

/* If any child is pulling upward, neutralize it */
body.customer-portal .ms-portal-tour .side-by-side{
  margin-top: 0 !important;
}

/* =========================================
   HERO: center the words horizontally
   ========================================= */
.ms-site .ms-hero__inner{
  width: min(1100px, 100%);
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.ms-site .ms-hero__title,
.ms-site .ms-hero__sub{
  text-align: center !important;
}

/* =========================================
   FORCE SAME HEADER STACK HEIGHT (all pages)
   ========================================= */
.ms-site{
  --site-header-h: 130px; /* desktop */
}
@media (max-width: 991.98px){
  .ms-site{ --site-header-h: 110px; } /* mobile/tablet */
}

/* IMPORTANT: disable any page-specific overrides */
body.customer-portal.ms-site{
  --site-header-h: 110px;
}
@media (min-width: 992px){
  body.customer-portal.ms-site{ --site-header-h: 130px; }
}

/* Space before the underline in these wide sections */
.ms-site .ms-portal-tour .double-faded-underline,
.ms-site .ms-factory-tour .double-faded-underline{
  display: block;
  margin: 32px auto 0; /* space above + centered */
}

/* Center the two-column layout inside wide sections */
.ms-site .ms-portal-tour .side-by-side,
.ms-site .ms-factory-tour .side-by-side{
  justify-content: center !important; /* override justify-content-between */
  gap: 40px;                          /* controlled spacing between columns */
}

.ms-site .ms-section--wide{
  padding-left: 16px;
  padding-right: 16px;
}

/* Constrain portal section content to match underline centering */
body.customer-portal .ms-portal-tour .side-by-side{
  width: min(1200px, 100%);
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between; /* keeps 2-col layout, but now within a centered container */
}

/* Optional: equalize the two columns so left doesn't feel "squished" */
body.customer-portal .ms-portal-tour .side-img,
body.customer-portal .ms-portal-tour .side-copy{
  flex: 1 1 520px;   /* both columns get similar weight */
}
/* =====================================================
   PORTAL TOUR: make the whole 2-col block align/center
   ===================================================== */

/* Force the row to be a centered, constrained "container" */
.ms-site .ms-portal-tour > .side-by-side{
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;

  /* Override Bootstrap justify-content-between */
  justify-content: center !important;
  gap: 48px !important;
}

/* Make both columns feel balanced (prevents left side feeling squished) */
.ms-site .ms-portal-tour .side-img,
.ms-site .ms-portal-tour .side-copy{
  flex: 0 1 580px !important;
  max-width: 580px !important;
}

/* =====================================================
   STANDARD SIDE-BY-SIDE (OPT-IN)
   Add class .ms-split to the .side-by-side row to use this.
   Default is 40/60 (left/right).
   ===================================================== */

.ms-site .side-by-side.ms-split{
  display: grid !important;
  grid-template-columns: minmax(320px, 40%) minmax(420px, 60%);
  gap: clamp(18px, 2.6vw, 48px);
  align-items: center;
}

/* mobile stack */
@media (max-width: 991.98px){
  .ms-site .side-by-side.ms-split{
    grid-template-columns: 1fr;
    align-items: start;
  }
}
/* Mirror layout WITHOUT swapping columns */
.ms-site .side-by-side.ms-split.ms-split--mirror{
  /* keep same columns, just change how they align */
  align-items: center;
}

/* left column (video) hugs the right edge of its column */
.ms-site .side-by-side.ms-split.ms-split--mirror > .side-img{
  justify-self: end;            /* if grid */
  margin-left: auto;            /* if flex fallback */
}

/* right column (text) hugs the left edge of its column */
.ms-site .side-by-side.ms-split.ms-split--mirror > .side-copy{
  justify-self: start;          /* if grid */
  margin-right: auto;           /* if flex fallback */
  text-align: left;             /* keep readable */
}

/* =========================================
   Swap columns for ONE section (opt-in)
   Works with your ms-split grid
   ========================================= */
.ms-site .side-by-side.ms-split.ms-swap{
  grid-template-columns: minmax(420px, 60%) minmax(320px, 40%); /* video first (60), text second (40) */
}

/* If you want the swapped one to still be 40/60 but video stays bigger, keep as-is.
   If you want equal, change to: 1fr 1fr */

/* =====================================================
   STANDARD SIDE-BY-SIDE (OPT-IN)
   Use:  class="side-by-side ms-split"
   Default: LEFT 40% / RIGHT 60%
   ===================================================== */

.ms-site .side-by-side.ms-split{
  display: grid !important;
  grid-template-columns: minmax(320px, 40%) minmax(520px, 60%);
  gap: clamp(18px, 2.6vw, 48px);
  align-items: center;
}

/* Make sure children aren't capped by old rules */
.ms-site .side-by-side.ms-split > .side-img,
.ms-site .side-by-side.ms-split > .side-copy{
  max-width: none !important;
  width: auto !important;
}

/* Swap the ratio (still video first, text second) */
.ms-site .side-by-side.ms-split.ms-swap{
  grid-template-columns: minmax(520px, 60%) minmax(320px, 40%);
}

@media (max-width: 991.98px){
  /* stack any ms-split row */
  .ms-site .side-by-side.ms-split{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* prevent old max-width/flex caps from messing with it */
  .ms-site .side-by-side.ms-split > .side-img,
  .ms-site .side-by-side.ms-split > .side-copy{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* make embeds behave */
  .ms-site .ms-video-embed{
    width: 100%;
  }
  .ms-site .ms-video-embed iframe{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
  }
}

.ms-site p {
  font-family: var(--ms-font);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ms-gray-650);
}

/* FAQ accordion headings should use our H2 styling */
.ms-site #faq .accordion-button{
  font-family: var(--ms-font);
  font-size: clamp(1.1rem, 0.98rem + .55vw, 1.45rem);
  font-weight: 650;
  letter-spacing: .2px;
}

/* remove Bootstrap’s heavy focus ring / shadows */
.ms-site #faq .accordion-button:focus{
  box-shadow: none;
}

/* Force our LIGHTER grey in ALL states (closed + open) */
.ms-site #faq .accordion-button,
.ms-site #faq .accordion-button:not(.collapsed){
  color: var(--ms-gray-550) !important;  /* <- changed */
}

/* If Bootstrap is feeding color via variables, override those too */
.ms-site #faq .accordion{
  --bs-accordion-btn-color: var(--ms-gray-550);        /* <- changed */
  --bs-accordion-active-color: var(--ms-gray-550);     /* <- changed */
}

/* Force theme “display-*” headings to use MS font (some templates hardcode Lato) */
.ms-site .display-1,
.ms-site .display-2,
.ms-site .display-3,
.ms-site .display-4,
.ms-site .display-5,
.ms-site .display-6{
  font-family: var(--ms-font) !important;
}

/* =====================================================
   FONT HARD-OVERRIDE: force Bootstrap/theme to use Open Sans
   (some components pull from --bs-font-sans-serif / --bs-body-font-family)
   ===================================================== */

.ms-site{
  --bs-font-sans-serif: var(--ms-font) !important;
  --bs-body-font-family: var(--ms-font) !important;
}

/* Make sure body text + common UI elements inherit it */
.ms-site,
.ms-site body,
.ms-site p,
.ms-site li,
.ms-site a,
.ms-site span,
.ms-site label,
.ms-site input,
.ms-site textarea,
.ms-site select,
.ms-site button{
  font-family: var(--ms-font) !important;
}

/* Catch headings + Bootstrap heading utilities */
.ms-site h1, .ms-site h2, .ms-site h3, .ms-site h4, .ms-site h5, .ms-site h6,
.ms-site .h1, .ms-site .h2, .ms-site .h3, .ms-site .h4, .ms-site .h5, .ms-site .h6,
.ms-site .display-1, .ms-site .display-2, .ms-site .display-3,
.ms-site .display-4, .ms-site .display-5, .ms-site .display-6{
  font-family: var(--ms-font) !important;
}

/* =====================================================
   Full-bleed hero inside a Bootstrap .container
   (Lite vs Custom page: ms-hero--no-media)
   ===================================================== */

.ms-site .ms-lite-custom .container .ms-hero-wrap{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* optional: prevent any tiny horizontal scrollbars */
.ms-site{
  overflow-x: clip;
}

/* =====================================================
   Lite vs Custom cards: subtle separation (NO orange line)
   ===================================================== */
.ms-site .ms-lite-custom .ms-feature-col{
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 36px rgba(0,0,0,.06) !important;
  background: rgba(255,255,255,.92);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* remove the accent bar if it was added earlier */
.ms-site .ms-lite-custom .ms-feature-col::before{
  content: none !important;
}

/* hover (desktop) */
@media (hover:hover){
  .ms-site .ms-lite-custom .ms-feature-col:hover{
    transform: translateY(-3px);
    border-color: rgba(0,0,0,.12) !important;
    box-shadow: 0 14px 52px rgba(0,0,0,.10) !important;
  }
}

/* =====================================================
   REQUESTS HUB (Support / Forms landing page)
   Scoped to .ms-site so it won’t affect other pages
   ===================================================== */

.ms-site .ms-requests-hub{
  width: min(1200px, 100%);
  margin: 22px auto 0;
  padding: 0 16px 46px;
  box-sizing: border-box;
}

.ms-site .ms-requests-intro{
  text-align: center;
  margin: 10px auto 18px;
}

.ms-site .ms-requests-lead{
  margin: 0 auto 10px;
  max-width: 70ch;
  color: var(--ms-gray-650);
  font-weight: 600;
}

.ms-site .ms-requests-urgent{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.06);
  color: var(--ms-gray-550);
  font-weight: 600;
}

.ms-site .ms-requests-urgent .ms-requests-phone{
  color: var(--ms-gray-800);
  text-decoration: none;
  font-weight: 750;
}
.ms-site .ms-requests-urgent .ms-requests-phone:hover{
  color: var(--intech-orange);
}

.ms-site .ms-requests-grid{
  margin: 22px auto 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 991.98px){
  .ms-site .ms-requests-grid{ grid-template-columns: 1fr; }
}

.ms-site .ms-req-card{
  appearance: none;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, #fff 0%, #fbfbfb 100%);
  border-radius: 16px;
  padding: 16px 16px;
  text-align: left;
  cursor: pointer;

  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: center;

  box-shadow: 0 12px 40px rgba(0,0,0,.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

@media (hover:hover){
  .ms-site .ms-req-card:hover{
    transform: translateY(-2px);
    border-color: rgba(0,0,0,.12);
    box-shadow: 0 18px 62px rgba(0,0,0,.10);
  }
}

.ms-site .ms-req-ic{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: rgba(218,94,39,.10);
  border: 1px solid rgba(218,94,39,.16);
  color: var(--intech-orange);
  font-size: 20px;
  font-weight: 800;
}

.ms-site .ms-req-title{
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ms-gray-800);
  line-height: 1.1;
  margin: 0;
}

.ms-site .ms-req-desc{
  margin: 4px 0 0;
  color: var(--ms-gray-650);
  font-weight: 600;
  line-height: 1.4;
}

.ms-site .ms-req-card.is-active{
  border-color: rgba(218,94,39,.40);
  box-shadow:
    0 18px 62px rgba(0,0,0,.10),
    0 0 0 4px rgba(218,94,39,.12);
}

.ms-site .ms-req-card.is-active .ms-req-ic{
  background: rgba(218,94,39,.14);
  border-color: rgba(218,94,39,.28);
}

.ms-site .ms-requests-formShell{
  margin: 18px auto 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 18px 70px rgba(0,0,0,.08);
  overflow: hidden;
}

.ms-site .ms-requests-formHead{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.ms-site .ms-requests-formTitle{
  margin: 0;
  font-size: 1.3rem;
  font-weight: 850;
  color: var(--ms-gray-800);
}

.ms-site .ms-requests-formNote{
  margin: 0;
  color: var(--ms-gray-650);
  font-weight: 600;
  font-size: .98rem;
}

.ms-site #msFormMount{
  padding: 12px 14px 18px;
}

/* Jotform embeds sometimes inject full-width stuff; keep it contained */
.ms-site #msFormMount iframe,
.ms-site #msFormMount > div{
  max-width: 100% !important;
}

/* =====================================================
   Hide Jotform "Request Type" dropdown when embedded
   (Field ID: input_3)
   ===================================================== */

/* This only affects jotform iframe embeds inside our hub */
.ms-site #msFormMount iframe{
  width: 100%;
  border: 0;
}

/* Inject CSS into the iframe using Jotform's "Form Style" instead if needed */

/* =====================================================
   Lite vs Custom — lower details rows only
   IMPORTANT:
   - This targets only rows with .ms-lvc-row.
   - It does NOT change .ms-lite-custom containers or the top Lite/Custom cards.
   - Use wrapper: <div class="ms-lite-custom ms-lvc-details"> ... </div>
   ===================================================== */

.ms-site .ms-lvc-details{
  font-family: var(--ms-font) !important;
}

.ms-site .ms-lvc-details *{
  font-family: var(--ms-font) !important;
}

/* Own only the tagged lower rows. Do not alter parent .container widths. */
.ms-site .ms-lvc-row{
  width: min(1340px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 12px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-columns: minmax(0, 56%) minmax(0, 44%) !important;
  gap: clamp(36px, 4vw, 56px) !important;
  align-items: center !important;
}

/* When the image is intentionally on the right, let that image column be larger. */
.ms-site .ms-lvc-row:has(.ms-lvc-media.order-lg-2){
  grid-template-columns: minmax(0, 44%) minmax(0, 56%) !important;
}

/* Neutralize Bootstrap columns only inside the tagged rows. */
.ms-site .ms-lvc-row > [class*="col-"]{
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Images fill their grid column. */
.ms-site .ms-lvc-media,
.ms-site .ms-lvc-frame{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.ms-site .ms-lvc-frame{
  display: block !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.ms-site .ms-lvc-frame img{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  border-radius: 10px !important;
}

/* Text column. */
.ms-site .ms-lvc-copy{
  max-width: 600px !important;
  min-width: 0 !important;
}

.ms-site .ms-lvc-copy .display-3{
  font-family: var(--ms-font) !important;
  font-size: 36px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--ms-gray-800) !important;
  margin: 0 0 10px !important;
}

.ms-site .ms-lvc-copy .display-3 strong,
.ms-site .ms-lvc-copy .fw-900{
  color: var(--intech-orange) !important;
  font-weight: 800 !important;
}

.ms-site .ms-lvc-copy p{
  font-family: var(--ms-font) !important;
  font-size: 21px !important;
  line-height: 1.65 !important;
  color: var(--ms-gray-650) !important;
  margin-bottom: 16px !important;
}

.ms-site .ms-lvc-details .icon-list{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.ms-site .ms-lvc-details .icon-list li{
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  color: var(--ms-gray-650) !important;
}

.ms-site .ms-lvc-details .icon-list li > span:first-child{
  flex: 0 0 auto !important;
  color: var(--intech-orange) !important;
}

.ms-site .ms-lvc-details .icon-list .fw-bold{
  font-weight: 750 !important;
  color: var(--ms-gray-800) !important;
}

/* Preserve alternating rows. */
.ms-site .ms-lvc-row .order-lg-2{
  order: 2 !important;
}

/* Kill Bootstrap vertical gutter/utility spacing inside this lower section. */
.ms-site .ms-lvc-row.gy-10{
  --bs-gutter-y: 0 !important;
}

.ms-site .ms-lvc-details .mb-3,
.ms-site .ms-lvc-details .mb-2{
  margin-bottom: 8px !important;
}

/* Smaller lower-section buttons. */
.ms-site .ms-lvc-details .btn,
.ms-site .ms-lvc-details .btn-primary{
  font-size: 14px !important;
  line-height: 1.2 !important;
  padding: 10px 20px !important;
  border-radius: 7px !important;
}

.ms-site .ms-lvc-details .ms-feature-actions{
  margin-top: 14px !important;
  padding-top: 0 !important;
}

/* Mobile/tablet stack. */
@media (max-width: 991.98px){
  .ms-site .ms-lvc-row,
  .ms-site .ms-lvc-row:has(.ms-lvc-media.order-lg-2){
    width: min(720px, 100%) !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 32px !important;
  }

  .ms-site .ms-lvc-row .order-lg-2{
    order: 0 !important;
  }

  .ms-site .ms-lvc-copy{
    max-width: 100% !important;
  }

  .ms-site .ms-lvc-copy .display-3{
    font-size: 32px !important;
  }

  .ms-site .ms-lvc-copy p{
    font-size: 17px !important;
  }
}

/* =========================================
   CUSTOMER PORTAL — FORCE SAME HERO SPACING
   ========================================= */

body.customer-portal .ms-site{
  --site-header-h: 130px; /* match other pages */
}

@media (max-width: 991.98px){
  body.customer-portal .ms-site{
    --site-header-h: 110px;
  }
}

/* match the NO-MEDIA hero behavior from lite-vs-custom */
body.customer-portal .ms-site .ms-hero{
  min-height: 0 !important;
  padding-top: calc(var(--site-header-h) + 14px) !important;
  padding-bottom: 18px !important;
}

/* =========================================
   CUSTOMER PORTAL FAQ — final light styling
   ========================================= */

body.customer-portal .ms-site #faq{
  background: #f8f9fa !important;
  padding-top: 58px !important;
  padding-bottom: 0 !important;
}

body.customer-portal .ms-site #faq .container{
  max-width: 1360px !important;
}

body.customer-portal .ms-site #faq h1{
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .025em !important;
  color: rgba(47,47,47,.78) !important;
  margin-bottom: 14px !important;
  text-align: center !important;
}

body.customer-portal .ms-site #faq h1 strong{
  color: var(--intech-orange) !important;
  font-weight: 700 !important;
}

body.customer-portal .ms-site #faq .lead,
body.customer-portal .ms-site #faq > .container > p{
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: rgba(0,0,0,.68) !important;
  text-align: center !important;
  margin-bottom: 18px !important;
}

body.customer-portal .ms-site #faq .double-faded-underline{
  max-width: 1340px !important;
  margin: 18px auto 40px !important;
}

body.customer-portal .ms-site #faq .accordion{
  max-width: 1360px !important;
  margin: 0 auto !important;
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: rgba(0,0,0,.09);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
}

body.customer-portal .ms-site #faq .accordion-item{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.09) !important;
  border-radius: 0 !important;
}

body.customer-portal .ms-site #faq .accordion-button,
body.customer-portal .ms-site #faq .accordion-button:not(.collapsed){
  background: transparent !important;
  color: rgba(47,47,47,.68) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 18px 20px !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}

body.customer-portal .ms-site #faq .accordion-button::before{
  display: none !important;
}

body.customer-portal .ms-site #faq .accordion-body{
  background: transparent !important;
  padding: 20px 20px 34px !important;
}

body.customer-portal .ms-site #faq .accordion-body,
body.customer-portal .ms-site #faq .accordion-body p,
body.customer-portal .ms-site #faq .accordion-body li{
  color: rgba(0,0,0,.58) !important;
  font-size: 19px !important;
  line-height: 1.62 !important;
  font-weight: 400 !important;
}

body.customer-portal .ms-site #faq .accordion-button::after{
  filter: none !important;
  opacity: 1 !important;
  background-size: 16px 16px !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232f2f2f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

body.customer-portal .ms-site #faq .accordion-button:not(.collapsed)::after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23da5e27'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}


/* FADE on SCROLL */
.fade-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fa-solid,
.fas {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

/* =====================================================
   MS SITE — DARK THEME
   Add to body/content wrapper: .ms-theme-dark
   Example: <body class="ms-site ms-theme-dark">
   ===================================================== */

.ms-site.ms-theme-dark,
.ms-site .ms-theme-dark{
  --ms-gray-950: #f5f5f5;
  --ms-gray-800: rgba(255,255,255,.86);
  --ms-gray-650: rgba(255,255,255,.68);
  --ms-gray-550: rgba(255,255,255,.56);

  --ms-line: rgba(255,255,255,.12);
  --ms-line2: rgba(255,255,255,.18);

  --ms-surface: #111416;
  --ms-surface-2: #181c1f;

  color: var(--ms-gray-650) !important;
  background: #101315;
}

.ms-site.ms-theme-dark h1,
.ms-site.ms-theme-dark h2,
.ms-site.ms-theme-dark h3,
.ms-site.ms-theme-dark h4,
.ms-site.ms-theme-dark h5,
.ms-site.ms-theme-dark h6,
.ms-site .ms-theme-dark h1,
.ms-site .ms-theme-dark h2,
.ms-site .ms-theme-dark h3,
.ms-site .ms-theme-dark h4,
.ms-site .ms-theme-dark h5,
.ms-site .ms-theme-dark h6{
  color: var(--ms-gray-800) !important;
}

.ms-site.ms-theme-dark p,
.ms-site.ms-theme-dark li,
.ms-site.ms-theme-dark span,
.ms-site .ms-theme-dark p,
.ms-site .ms-theme-dark li,
.ms-site .ms-theme-dark span{
  color: var(--ms-gray-650) !important;
}

.ms-site.ms-theme-dark .text-dark,
.ms-site.ms-theme-dark .text-black,
.ms-site .ms-theme-dark .text-dark,
.ms-site .ms-theme-dark .text-black{
  color: var(--ms-gray-800) !important;
}

.ms-site.ms-theme-dark .bg-light,
.ms-site.ms-theme-dark .bg-white,
.ms-site .ms-theme-dark .bg-light,
.ms-site .ms-theme-dark .bg-white{
  background-color: #101315 !important;
}

/* dark cards / frames */
.ms-site.ms-theme-dark .ms-media-frame,
.ms-site .ms-theme-dark .ms-media-frame{
  background: #15191c;
  border-color: rgba(255,255,255,.10);
  box-shadow:
    0 18px 70px rgba(0,0,0,.38),
    0 0 0 4px rgba(218,94,39,.10);
}

/* dark underline still orange */
.ms-site.ms-theme-dark .double-faded-underline,
.ms-site .ms-theme-dark .double-faded-underline{
  background: linear-gradient(
    90deg,
    rgba(218,94,39,0),
    rgba(218,94,39,.85),
    rgba(218,94,39,0)
  ) !important;
}

.ms-site .ms-review-card{
  background: #e5e5e5;
  border-radius: 12px;
}

.ms-site.ms-theme-dark .ms-review-card{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12);
}

.ms-site.ms-theme-dark .ms-review-card p{
  color: rgba(255,255,255,.72) !important;
}

.ms-site.ms-theme-dark .ms-review-card .stats,
.ms-site.ms-theme-dark .ms-review-card h6{
  color: rgba(255,255,255,.9) !important;
}

.ms-site .ms-review-card i{
  color: var(--intech-orange) !important;
}

/* =====================================================
   SUPPORT HERO ACTIONS
   ===================================================== */

.ms-site .support-hero-actions{
  background:#f8f9fa !important;
  padding:18px 16px 34px !important;
  text-align:center !important;
}

.ms-site .support-hero-copy{
  max-width:900px !important;
  margin:0 auto 18px !important;

  font-size:1.18rem !important;
  line-height:1.75 !important;
  font-weight:500 !important;

  color:rgba(0,0,0,.72) !important;
}

/* Buttons wrapper */
.ms-site .support-hero-btns{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;

  gap:14px !important;
  flex-wrap:wrap !important;

  margin-top:20px !important;
}

/* Shared button styles */
.ms-site .ms-support-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-width:180px !important;
  height:42px !important;

  padding:0 18px !important;

  border-radius:8px !important;

  font-size:14px !important;
  font-weight:650 !important;
  letter-spacing:.01em !important;

  text-decoration:none !important;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease !important;
}

/* PRIMARY */
.ms-site .ms-support-btn--primary{
  background:#da5e27 !important;
  color:#fff !important;
  border:2px solid #da5e27 !important;
}

.ms-site .ms-support-btn--primary:hover{
  background:#c94f1b !important;
  border-color:#c94f1b !important;
  color:#fff !important;

  transform:translateY(-1px);
}

/* SECONDARY */
.ms-site .ms-support-btn--secondary{
  background:#fff !important;
  color:#666 !important;
  border:2px solid rgba(0,0,0,.10) !important;
}

.ms-site .ms-support-btn--secondary:hover{
  border-color:#da5e27 !important;
  color:#da5e27 !important;

  transform:translateY(-1px);
}

            .ms-site #detailsModal .nav-link.active {
                color: #fff;
            }

            .ms-site #detailsModal .nav-link span.badge {
                margin-left: 5px;
            }

            .ms-site #detailsModal .modal-dialog.modal-xl {
                margin-top: 8rem;
            }

            .ms-site #detail_table th {
                padding: 0.1rem 0.625rem;
            }

            .ms-site #detail_table td {
                padding: 0.5rem 0.625rem;
            }

            .ms-site th.detail_table_actions {
                text-align: right;
            }

            .ms-site td.detail_table_actions {
                float: right;
            }
            
            .ms-site .troubleshooting-body tr:hover {
                color: rgba(0,0,0,.85) !important;
                background-color: #e9ecef !important;
            }

            .ms-site .support-hero {
                --ms-hero-overlay: rgba(248,249,250,.78);
                --ms-hero-pos-y: 50%;
                --hero-bg: url(img/intech-support.jpg);
            }

            .ms-site .support-hero .btn-outline-secondary {
                color: var(--ms-gray-800) !important;
                border-color: rgba(0,0,0,.28) !important;
                background: rgba(255,255,255,.48) !important;
            }

            .ms-site .support-hero .btn-outline-secondary:hover,
            .ms-site .support-hero .btn-outline-secondary:focus {
                color: #fff !important;
                border-color: var(--intech-orange) !important;
                background: var(--intech-orange) !important;
            }

            .ms-site .support-section {
                background: #f8f9fa !important;
            }

            .ms-site .warranty-panel {
                background: #fff !important;
                color: var(--ms-gray-650) !important;
                border: 1px solid rgba(0,0,0,.08);
                border-radius: 14px;
                box-shadow: 0 14px 45px rgba(0,0,0,.06);
            }

            .ms-site .warranty-panel h2 {
                color: var(--ms-gray-800) !important;
            }


            /* Keep the dark Motorsports footer readable after the page is scoped to ms.css. */
            .ms-site .ms-theme-dark a,
            .ms-site .ms-theme-dark .nav-link {
                color: rgba(255,255,255,.72) !important;
            }

            .ms-site .ms-theme-dark a:hover,
            .ms-site .ms-theme-dark .nav-link:hover {
                color: #fff !important;
            }

            .ms-site .ms-theme-dark i,
            .ms-site .ms-theme-dark svg,
            .ms-site .ms-theme-dark .fa,
            .ms-site .ms-theme-dark .fas,
            .ms-site .ms-theme-dark .fa-solid {
                color: rgba(255,255,255,.92) !important;
            }

            /* =====================================================
   SUPPORT PAGE — isolated page scope
   ===================================================== */

/* restore hero/header spacing now that ms-site is not on body */
.ms-site.ms-support-page{
  --site-header-h: 130px;
  background-color: #f8f9fa !important;
  min-height: 100vh;
}

@media (max-width: 991.98px){
  .ms-site.ms-support-page{
    --site-header-h: 110px;
  }
}

/* support hero spacing */
.ms-site.ms-support-page .support-hero,
.ms-site.ms-support-page .ms-hero{
  padding-top: calc(var(--site-header-h) + 24px) !important;
}

/* keep all sections light */
.ms-site.ms-support-page,
.ms-site.ms-support-page section,
.ms-site.ms-support-page .wrapper,
.ms-site.ms-support-page .content-wrapper{
  background-color: #f8f9fa;
}

/* prevent header inheritance */
body .navbar,
body header,
body .offcanvas-nav,
body .navbar-wrapper{
  font-family: inherit;
}

.ms-site .ms-lvc-copy .ms-mini-series-card {
  margin-top: 18px;
}

.ms-site .ms-lvc-copy .ms-mini-series-box {
  position: relative;

  padding: 18px 18px 10px;

  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 16px;

  box-shadow: 0 10px 28px rgba(0,0,0,.055);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.ms-site .ms-lvc-copy .ms-mini-series-box::before {
  content: "";

  position: absolute;
  left: 22px;
  right: 22px;
  top: 52px;

  height: 2px;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    rgba(218,94,39,0),
    rgba(218,94,39,.75),
    rgba(218,94,39,0)
  );
}

@media (hover:hover){
  .ms-site .ms-lvc-copy .ms-mini-series-box:hover {
    transform: translateY(-3px);

    border-color: rgba(0,0,0,.10);

    box-shadow: 0 18px 50px rgba(0,0,0,.09);
  }
}

.ms-site .ms-lvc-copy .ms-mini-series-box h4 {
  text-align: center;

  font-size: 1.1rem;
  font-weight: 750;

  color: rgba(47,47,47,.78);

  margin-bottom: 24px;
}

.ms-site .ms-lvc-copy .ms-mini-series-box ul {
  list-style: none;

  margin: 0;
  padding: 0;
}

.ms-site .ms-lvc-copy .ms-mini-series-box li {
  position: relative;

  padding-left: 20px;
  margin-bottom: 8px;

  font-size: 13px;
  line-height: 1.38;

  color: var(--ms-gray-650);
}

.ms-site .ms-lvc-copy .ms-mini-series-box li::before {
  content: "✓";

  position: absolute;
  left: 0;
  top: 0;

  color: var(--intech-orange);

  font-weight: 800;
}

/* =========================================
   Lite vs Custom Wrapper
   ========================================= */

.ms-site .ms-lvc-choice-card{
  max-width: 1400px;
  margin: 0 auto 40px;

  padding: 22px 22px 14px;

  background: #f5f6f7;

  border: 1px solid rgba(0,0,0,.08);
  border-radius: 24px;

  box-shadow: 0 12px 40px rgba(0,0,0,.05);
}

/* inner cards */
.ms-site .ms-lvc-choice-card .ms-feature-col{
  background:#fff !important;
}

/* =========================================
   Questionnaire Area
   ========================================= */

.ms-site .ms-lvc-questionnaire{
  margin-top: 14px;

  padding: 16px 20px 10px;

  background: transparent;

  border-top: 1px solid rgba(0,0,0,.08);

  display:flex;
  justify-content:center;
}

.ms-lvc-questionnaire-inner{
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.ms-lvc-question-icon{
  font-size: 28px;
  color: var(--intech-orange);

  margin-bottom: 4px;
}

.ms-lvc-question-title{
  font-size: 22px !important;
  font-weight: 700 !important;

  line-height: 1.15;

  margin-bottom: 6px !important;

  color: rgba(47,47,47,.82) !important;
}

.ms-lvc-question-copy{
  max-width: 500px;

  margin: 0 auto 10px !important;

  font-size: 16px;
  line-height: 1.35;

  color: rgba(0,0,0,.68) !important;
}

.ms-site .ms-vue-questionnaire{
  display:flex;
  justify-content:center;

  margin-top:0 !important;
}

.ms-site .ms-vue-questionnaire .btn,
.ms-site .ms-vue-questionnaire button{
  margin:0 auto !important;
}

/* =========================================
   Lite vs Custom Wrapper + Questionnaire
   ========================================= */

.ms-site .ms-lvc-choice-card{
  max-width: 1400px;
  margin: 0 auto 40px;
  padding: 22px 22px 14px;
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.05);
}

.ms-site .ms-lvc-choice-card .ms-feature-col{
  background: #fff !important;
}

.ms-site .ms-lvc-questionnaire{
  margin-top: 14px;
  padding: 16px 20px 10px;
  background: transparent;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  justify-content: center;
}

.ms-site .ms-lvc-questionnaire-inner{
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.ms-site .ms-lvc-question-icon{
  font-size: 28px;
  color: var(--intech-orange);
  margin-bottom: 4px;
}

.ms-site .ms-lvc-question-title{
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.15;
  margin-bottom: 6px !important;
  color: rgba(47,47,47,.82) !important;
}

.ms-site .ms-lvc-question-copy{
  max-width: 500px;
  margin: 0 auto 10px !important;
  font-size: 16px;
  line-height: 1.35;
  color: rgba(0,0,0,.68) !important;
}

.ms-site .ms-vue-questionnaire{
  display: flex;
  justify-content: center;
  margin-top: 0 !important;
}

.ms-site .ms-vue-questionnaire .btn,
.ms-site .ms-vue-questionnaire button{
  margin: 0 auto !important;
}

@media (max-width: 991.98px){
  .ms-site .ms-lvc-choice-card{
    padding: 18px 14px 12px;
    border-radius: 18px;
  }

  .ms-site .ms-lvc-questionnaire{
    padding: 14px 12px 8px;
  }
}

.ms-site .ms-lvc-choice-card{
  overflow: hidden;
}

.ms-site .ms-lvc-choice-card .ms-feature-col{
  position: relative;
  overflow: hidden;
}

.ms-site .ms-lvc-choice-card .ms-feature-col > *{
  position: relative;
  z-index: 1;
}

.ms-site .ms-lvc-choice-card .ms-feature-col--lite::after,
.ms-site .ms-lvc-choice-card .ms-feature-col--custom::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ms-site .ms-lvc-choice-card .ms-feature-col--lite::after{
  background: radial-gradient(
    circle at top left,
    rgba(218,94,39,.075),
    transparent 42%
  );
}

.ms-site .ms-lvc-choice-card .ms-feature-col--custom::after{
  background: radial-gradient(
    circle at top right,
    rgba(218,94,39,.095),
    transparent 42%
  );
}

.ms-site .ms-lvc-choice-card{
    background:#f7f7f7;
    border:1px solid rgba(218,94,39,.12);
}