/* ===========================================================================
   OE Jaya Motor — theme layer over Bootstrap 5.3
   ---------------------------------------------------------------------------
   Bootstrap supplies the grid, offcanvas, form controls and utilities. This
   file redefines its CSS variables so those components come out in OE Jaya's
   language rather than Bootstrap's, then adds the components Bootstrap has no
   equivalent for (filter chips, finance rail, spec panels, hatch placeholders).

   Every hex value and size here comes from the design handoff.
   =========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------ */
  --oej-ink: #101012;
  --oej-ink-80: #4A4A52;
  --oej-ink-60: #6C6C74;
  --oej-ink-40: #9A9AA2;
  --oej-ink-25: #B0B0B8;
  --oej-red: #E11B22;
  --oej-red-hover: #B4141A;
  --oej-red-light: #FF2A32;
  --oej-red-tint: #FF8A8F;
  --oej-paper: #FFFFFF;
  --oej-paper-warm: #F7F6F2;
  --oej-paper-grey: #F5F4F1;
  --oej-hatch: #EAE8E3;
  --oej-success: #1F7A4A;
  --oej-success-light: #6FCF97;
  --oej-warning: #B77A0B;

  --oej-border: rgba(16, 16, 18, .12);
  --oej-border-strong: rgba(16, 16, 18, .22);
  --oej-border-rule: rgba(16, 16, 18, .16);
  --oej-border-dark: rgba(255, 255, 255, .12);

  /* --- Type -------------------------------------------------------------- */
  --oej-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --oej-body: 'Barlow', system-ui, sans-serif;
  --oej-label: 'Barlow Semi Condensed', 'Barlow', sans-serif;
  --oej-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* --- Geometry ---------------------------------------------------------- */
  --oej-gutter: 40px;
  --oej-header-h: 84px;
  --oej-utility-h: 40px;
  --oej-section-y: 88px;

  /* --- Bootstrap overrides ------------------------------------------------
     Radius is zero everywhere in this design. Setting it on the root variables
     means every Bootstrap component inherits it without per-component resets. */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-pill: 0;
  --bs-border-color: var(--oej-border);

  --bs-body-font-family: var(--oej-body);
  --bs-body-font-size: 17px;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--oej-ink-80);
  --bs-body-bg: var(--oej-paper);
  --bs-emphasis-color: var(--oej-ink);
  --bs-heading-color: var(--oej-ink);

  --bs-primary: #E11B22;
  --bs-primary-rgb: 225, 27, 34;
  --bs-link-color: var(--oej-red);
  --bs-link-color-rgb: 225, 27, 34;
  --bs-link-hover-color: var(--oej-red-hover);
  --bs-danger: #E11B22;
  --bs-success: #1F7A4A;
  --bs-warning: #B77A0B;

  --bs-focus-ring-width: 3px;
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: rgba(225, 27, 34, .45);
}

@media (max-width: 991.98px) {
  :root {
    --oej-gutter: 20px;
    --oej-header-h: 62px;
    --oej-section-y: 30px;
  }
}

/* ===========================================================================
   Base
   =========================================================================== */

.oej-body {
  font-family: var(--oej-body);
  color: var(--oej-ink-80);
  background: var(--oej-paper);
  -webkit-font-smoothing: antialiased;
}

.oej-gutter {
  padding-left: var(--oej-gutter);
  padding-right: var(--oej-gutter);
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--oej-display);
  text-transform: uppercase;
  color: var(--oej-ink);
  margin: 0;
}

/* Money and countdowns line up in columns only with tabular figures. */
.oej-num, .oej-price, .oej-monthly, .oej-stat__value {
  font-variant-numeric: tabular-nums;
}

.oej-mono { font-family: var(--oej-mono); font-variant-numeric: tabular-nums; }

/* Focus is never removed — the prototype defined no focus state at all, and
   the form is the one page keyboard users cannot afford to lose their place on. */
:focus-visible {
  outline: 3px solid rgba(225, 27, 34, .5);
  outline-offset: 2px;
}

.oej-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--oej-ink);
  color: #fff;
  padding: 14px 22px;
  font: 700 14px/1 var(--oej-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.oej-skip-link:focus { left: 0; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   Type scale
   =========================================================================== */

.oej-eyebrow {
  font: 600 11px/1 var(--oej-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oej-ink-40);
  display: block;
}
.oej-eyebrow--red { color: var(--oej-red); }
.oej-eyebrow--tint { color: var(--oej-red-tint); }

.oej-label {
  font: 600 11px/1 var(--oej-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oej-ink-60);
  display: block;
}

.oej-meta {
  font: 500 10px/1 var(--oej-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oej-ink-40);
}

.oej-h1 { font: 800 68px/0.94 var(--oej-display); text-transform: uppercase; letter-spacing: -.015em; }
.oej-h1--hero { font-size: 82px; line-height: .9; }
.oej-h2 { font: 800 52px/0.98 var(--oej-display); text-transform: uppercase; }
.oej-h3 { font: 800 40px/0.98 var(--oej-display); text-transform: uppercase; }
.oej-h4 { font: 700 22px/1 var(--oej-display); text-transform: uppercase; letter-spacing: .04em; }

.oej-lead { font: 400 19px/1.6 var(--oej-body); color: var(--oej-ink-60); }
.oej-text { font: 400 17px/1.6 var(--oej-body); color: var(--oej-ink-60); }
.oej-text--sm { font-size: 15px; line-height: 1.5; }
.oej-hint { font: 400 13px/1.4 var(--oej-body); color: var(--oej-ink-40); }

@media (max-width: 991.98px) {
  .oej-h1, .oej-h1--hero { font-size: 46px; line-height: .9; }
  .oej-h2 { font-size: 32px; }
  .oej-h3 { font-size: 30px; }
  .oej-h4 { font-size: 18px; }
  .oej-lead { font-size: 16px; }
  .oej-text { font-size: 15px; line-height: 1.55; }
}

/* ===========================================================================
   Buttons
   =========================================================================== */

.oej-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 28px;
  border: 1px solid transparent;
  background: transparent;
  font: 700 15px/1 var(--oej-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}

.oej-btn--red { background: var(--oej-red); color: #fff; }
.oej-btn--red:hover, .oej-btn--red:focus { background: var(--oej-red-hover); color: #fff; }

.oej-btn--ink { background: var(--oej-ink); color: #fff; }
.oej-btn--ink:hover, .oej-btn--ink:focus { background: var(--oej-red); color: #fff; }

.oej-btn--outline {
  border-color: var(--oej-border-strong);
  color: var(--oej-ink);
  height: 52px;
}
.oej-btn--outline:hover, .oej-btn--outline:focus {
  border-color: var(--oej-ink);
  background: var(--oej-ink);
  color: #fff;
}

.oej-btn--outline-light {
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.oej-btn--outline-light:hover, .oej-btn--outline-light:focus {
  background: #fff;
  color: var(--oej-ink);
}

.oej-btn--wa { background: #25D366; color: #0B2E17; }
.oej-btn--wa:hover, .oej-btn--wa:focus { background: #1EB855; color: #0B2E17; }

.oej-btn--compact { height: 44px; padding: 0 18px; font-size: 13px; letter-spacing: .14em; }
.oej-btn--block { width: 100%; }
.oej-btn:disabled, .oej-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ===========================================================================
   Utility strip
   =========================================================================== */

.oej-utility {
  background: var(--oej-ink);
  min-height: var(--oej-utility-h);
  display: flex;
  align-items: center;
}
.oej-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--oej-utility-h);
  flex-wrap: wrap;
}
.oej-utility__left, .oej-utility__right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.oej-utility__item {
  font: 400 12px/1 var(--oej-label);
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .68);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.oej-utility__item:hover { color: #fff; }
.oej-utility__promise {
  font: 600 12px/1 var(--oej-label);
  letter-spacing: .08em;
  color: #fff;
}

/* One form per language button, so each can post its own already-translated
   destination. They sit inline inside the group. */
.oej-lang { margin: 0; display: inline-flex; }
.oej-lang__group { display: inline-flex; align-items: center; gap: 6px; }
.oej-lang__btn {
  background: none;
  border: 0;
  padding: 6px 4px;
  min-height: 32px;
  font: 600 12px/1 var(--oej-label);
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: color .15s;
}
.oej-lang__btn:hover { color: #fff; }
.oej-lang__btn.is-active { color: #fff; border-bottom: 2px solid var(--oej-red); }
.oej-lang__divider { color: rgba(255, 255, 255, .28); font-size: 11px; }

@media (max-width: 1199.98px) { .oej-utility__item--hide-lg { display: none; } }
@media (max-width: 991.98px) {
  .oej-utility__item--hide-md { display: none; }
  .oej-utility__promise { display: none; }
  .oej-utility__inner { justify-content: space-between; }
}

/* ===========================================================================
   Header & navigation
   =========================================================================== */

.oej-header {
  background: var(--oej-paper);
  border-bottom: 1px solid var(--oej-border);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.oej-header__inner {
  height: var(--oej-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.oej-header__brand { text-decoration: none; flex: none; }

/* The original OE Jaya lockup. Height is driven here and width follows the
   intrinsic ratio, so the width/height attributes on the <img> still reserve
   the right box and nothing shifts as it loads. */
.oej-logo-img {
  height: 48px;
  width: auto;
  display: block;
}
.oej-logo-img--footer { height: 64px; }

/* The footer is near-black and the logo is used unmodified, so it gets the
   light ground it was drawn for instead of being recoloured to suit. */
.oej-footer__logo {
  display: inline-block;
  background: var(--oej-paper);
  padding: 14px 18px;
  margin-bottom: 4px;
}

@media (max-width: 991.98px) {
  .oej-logo-img { height: 38px; }
  .oej-logo-img--footer { height: 52px; }
}

.oej-nav { display: flex; align-items: center; gap: 22px; }
.oej-nav__link {
  font: 600 14px/1 var(--oej-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #5A5A62;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.oej-nav__link:hover { color: var(--oej-ink); }
.oej-nav__link.is-active { color: var(--oej-ink); border-bottom-color: var(--oej-red); }

.oej-header__actions { display: flex; align-items: center; gap: 10px; flex: none; }

.oej-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--oej-border-strong);
  background: transparent;
  cursor: pointer;
  padding: 0 11px;
}
.oej-burger span { display: block; height: 2px; background: var(--oej-ink); }

@media (max-width: 1279.98px) {
  .oej-nav { gap: 16px; }
  .oej-nav__link { font-size: 13px; letter-spacing: .1em; }
  .oej-header__find { display: none; }
}
@media (max-width: 991.98px) {
  .oej-nav { display: none; }
  .oej-burger { display: flex; }
  .oej-header__actions .oej-btn { display: none; }
  .oej-logo__mark { width: 34px; height: 34px; font-size: 16px; }
  .oej-logo__word { font-size: 20px; }
}

.oej-drawer { background: var(--oej-ink); color: #fff; width: min(360px, 88vw); }
.oej-drawer__head { border-bottom: 1px solid var(--oej-border-dark); padding: 20px; }
.oej-drawer__title {
  font: 700 18px/1 var(--oej-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
}
.oej-drawer__body { padding: 8px 20px 28px; display: flex; flex-direction: column; }
.oej-drawer__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  font: 600 15px/1 var(--oej-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  border-bottom: 1px solid var(--oej-border-dark);
}
.oej-drawer__link:hover, .oej-drawer__link.is-active { color: #fff; }
.oej-drawer__link.is-active { border-bottom-color: var(--oej-red); }
.oej-drawer__cta { margin-top: 16px; width: 100%; }

/* ===========================================================================
   Sections & panels
   =========================================================================== */

.oej-section { padding: var(--oej-section-y) 0; }
.oej-section--warm { background: var(--oej-paper-warm); }
.oej-section--ink { background: var(--oej-ink); color: rgba(255, 255, 255, .8); }
.oej-section--ink h1, .oej-section--ink h2, .oej-section--ink h3 { color: #fff; }
.oej-section--tight { padding: 44px 0; }

.oej-section__head { margin-bottom: 34px; }
.oej-section__head p { margin: 12px 0 0; max-width: 620px; }

.oej-panel {
  background: var(--oej-paper);
  border: 1px solid var(--oej-border);
  padding: 28px;
}
.oej-panel--warm { background: var(--oej-paper-warm); border-color: transparent; }

/* Hairline-divided grids: the parent's background shows through 1px gaps. */
.oej-hairgrid {
  display: grid;
  gap: 1px;
  background: var(--oej-border);
  border: 1px solid var(--oej-border);
}
.oej-hairgrid > * { background: var(--oej-paper); padding: 22px; }
.oej-hairgrid--warm > * { background: var(--oej-paper-warm); }
.oej-hairgrid--4 { grid-template-columns: repeat(4, 1fr); }
.oej-hairgrid--3 { grid-template-columns: repeat(3, 1fr); }
.oej-hairgrid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 991.98px) {
  .oej-hairgrid--4 { grid-template-columns: repeat(2, 1fr); }
  .oej-hairgrid--3 { grid-template-columns: 1fr; }
  .oej-hairgrid > * { padding: 16px; }
}

.oej-stat__value {
  font: 700 34px/1 var(--oej-display);
  color: var(--oej-ink);
  display: block;
}
.oej-stat__value--red { color: var(--oej-red); }
.oej-stat__label {
  font: 500 12px/1.3 var(--oej-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oej-ink-40);
  margin-top: 9px;
  display: block;
}

/* ===========================================================================
   Chips (filters, tenure, tags)
   =========================================================================== */

.oej-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.oej-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--oej-border-strong);
  background: transparent;
  color: var(--oej-ink-80);
  font: 600 13px/1 var(--oej-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s;
}
.oej-chip:hover { border-color: var(--oej-ink); color: var(--oej-ink); }
.oej-chip.is-active {
  background: var(--oej-red);
  border-color: var(--oej-red);
  color: #fff;
}
.oej-chip__count {
  font-family: var(--oej-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: .7;
}

.oej-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  font: 700 10px/1 var(--oej-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--oej-ink);
}
.oej-badge--popular { background: var(--oej-red); }
.oej-badge--new { background: var(--oej-ink); }
.oej-badge--budget { background: var(--oej-success); }
.oej-badge--limited { background: #C8A24A; }
.oej-badge--excellent { background: var(--oej-success); }
.oej-badge--good { background: var(--oej-ink); }
.oej-badge--fair { background: var(--oej-warning); }

.oej-tagline {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--oej-red);
  background: rgba(225, 27, 34, .1);
  color: var(--oej-red);
  font: 600 11px/1 var(--oej-label);
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* ===========================================================================
   Bike cards
   =========================================================================== */

.oej-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1279.98px) { .oej-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991.98px)  { .oej-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.oej-card {
  display: flex;
  flex-direction: column;
  background: var(--oej-paper);
  border: 1px solid var(--oej-border);
  text-decoration: none;
  transition: border-color .15s;
  height: 100%;
}
.oej-card:hover { border-color: rgba(225, 27, 34, .55); }

.oej-card__media {
  position: relative;
  height: 190px;
  background: var(--oej-hatch);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oej-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}
.oej-card__badge { position: absolute; top: 0; left: 0; z-index: 2; }

/* Placeholder for a bike with no photo: diagonal hatch plus the brand wordmark. */
.oej-hatchfill {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(16, 16, 18, .045) 0 1px,
    transparent 1px 9px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.oej-hatchfill__word {
  font: 800 46px/1 var(--oej-display);
  text-transform: uppercase;
  color: rgba(16, 16, 18, .07);
  letter-spacing: .02em;
}

.oej-card__body { padding: 16px 18px 0; flex: 1; }
.oej-card__meta {
  font: 500 10px/1 var(--oej-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oej-ink-40);
}
.oej-card__title {
  font: 700 26px/1 var(--oej-display);
  text-transform: uppercase;
  color: var(--oej-ink);
  margin: 9px 0 0;
}
.oej-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 16px;
  margin-top: 14px;
  border-top: 1px solid var(--oej-border);
}
.oej-card__primary {
  font: 700 26px/1 var(--oej-display);
  color: var(--oej-red);
  font-variant-numeric: tabular-nums;
}
.oej-card__primary small {
  font: 600 11px/1 var(--oej-label);
  letter-spacing: .1em;
  color: var(--oej-ink-40);
  display: block;
  margin-top: 5px;
}
.oej-card__secondary {
  font: 500 14px/1 var(--oej-body);
  color: var(--oej-ink-40);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.oej-card__secondary small {
  font: 500 10px/1 var(--oej-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
}
/* Cash-first mode: the toggle swaps which figure is the loud one. */
.oej-card--cash .oej-card__primary { color: var(--oej-ink); }

@media (max-width: 991.98px) {
  .oej-card__media { height: 130px; }
  .oej-card__title { font-size: 19px; }
  .oej-card__primary { font-size: 20px; }
  .oej-card__body { padding: 12px 12px 0; }
  .oej-card__foot { padding: 10px 12px 12px; }
  .oej-hatchfill__word { font-size: 30px; }
}

/* ===========================================================================
   Forms
   =========================================================================== */

.oej-field { margin-bottom: 22px; }
.oej-field__label {
  font: 600 11px/1 var(--oej-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oej-ink-80);
  display: block;
  margin-bottom: 9px;
}
.oej-field__req { color: var(--oej-red); }

.oej-input,
.form-control.oej-input,
.form-select.oej-input {
  height: 52px;
  border: 1px solid var(--oej-border-strong);
  border-radius: 0;
  background: var(--oej-paper);
  font: 500 17px/1.4 var(--oej-body);
  color: var(--oej-ink);
  padding: 0 15px;
  width: 100%;
}
textarea.oej-input, textarea.form-control.oej-input {
  height: 88px;
  padding: 14px 15px;
  line-height: 1.5;
}
.form-control.oej-input:focus, .form-select.oej-input:focus {
  border-color: var(--oej-ink);
  box-shadow: 0 0 0 3px rgba(225, 27, 34, .18);
}
.form-control.oej-input.is-invalid, .form-select.oej-input.is-invalid {
  border-color: var(--oej-red);
  background-image: none;
}

.oej-field__hint { font: 400 13px/1.4 var(--oej-body); color: var(--oej-ink-40); margin-top: 7px; }
.oej-field__error {
  font: 500 13px/1.4 var(--oej-body);
  color: var(--oej-red);
  margin-top: 7px;
  display: block;
}

.oej-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.oej-formgrid > .oej-field--full { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .oej-formgrid { grid-template-columns: 1fr; } }

.oej-checkrow {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--oej-border);
}
.form-check-input.oej-check {
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin: 0;
  border: 1px solid var(--oej-border-strong);
  border-radius: 0;
  flex: none;
}
.form-check-input.oej-check:checked {
  background-color: var(--oej-red);
  border-color: var(--oej-red);
}
.form-check-input.oej-check:focus {
  box-shadow: 0 0 0 3px rgba(225, 27, 34, .3);
  border-color: var(--oej-red);
}
.oej-checkrow label { font: 400 15px/1.5 var(--oej-body); color: var(--oej-ink-80); cursor: pointer; }

/* File rows: a real <input type=file> visually replaced by a button. */
.oej-docrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--oej-paper-warm);
  padding: 16px 18px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.oej-docrow__name {
  font: 600 15px/1.3 var(--oej-body);
  color: var(--oej-ink);
  display: block;
}
.oej-docrow__status { font: 400 13px/1.4 var(--oej-body); color: var(--oej-ink-40); margin-top: 4px; }
.oej-docrow__status.is-attached { color: var(--oej-success); font-weight: 500; }
.oej-docrow__status.is-error { color: var(--oej-red); font-weight: 500; }
.oej-filebtn { position: relative; overflow: hidden; display: inline-flex; }
.oej-filebtn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

/* Sliders: Bootstrap's form-range restyled to the ink/red palette. */
.oej-range {
  width: 100%;
  accent-color: var(--oej-red);
  height: 44px;
}
.form-range.oej-range::-webkit-slider-thumb { background: var(--oej-red); border-radius: 0; }
.form-range.oej-range::-moz-range-thumb { background: var(--oej-red); border-radius: 0; border: 0; }
.form-range.oej-range::-webkit-slider-runnable-track { background: var(--oej-border); height: 4px; }
.form-range.oej-range::-moz-range-track { background: var(--oej-border); height: 4px; }

.oej-rangehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.oej-rangehead__value {
  font: 700 22px/1 var(--oej-display);
  color: var(--oej-ink);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   Finance rail & quote cards
   =========================================================================== */

.oej-quote { border: 1px solid var(--oej-border); background: var(--oej-paper); }
.oej-quote__head { background: var(--oej-red); color: #fff; padding: 24px 26px; }
.oej-quote__label {
  font: 600 11px/1 var(--oej-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  display: block;
}
.oej-quote__figure {
  font: 800 62px/0.9 var(--oej-display);
  color: #fff;
  margin: 12px 0 0;
  font-variant-numeric: tabular-nums;
}
.oej-quote__figure small { font-size: 22px; font-weight: 600; }
.oej-quote__terms {
  font: 400 14px/1.4 var(--oej-body);
  color: rgba(255, 255, 255, .85);
  margin: 10px 0 0;
}
.oej-quote__body { padding: 22px 26px 26px; }

.oej-quoterow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--oej-border);
  font: 400 15px/1.4 var(--oej-body);
  color: var(--oej-ink-60);
}
.oej-quoterow:last-child { border-bottom: 0; }
.oej-quoterow strong { color: var(--oej-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.oej-quoterow--total { border-top: 1px solid var(--oej-border-rule); font-size: 17px; }

@media (max-width: 991.98px) { .oej-quote__figure { font-size: 40px; } }

/* ===========================================================================
   Spec sheet
   =========================================================================== */

.oej-specpanel { margin-bottom: 34px; }
.oej-specpanel__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 22px/1 var(--oej-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--oej-ink);
  margin-bottom: 16px;
}
.oej-specpanel__title::before {
  content: '';
  width: 4px;
  height: 22px;
  background: var(--oej-red);
  flex: none;
}
.oej-specrows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 767.98px) { .oej-specrows { grid-template-columns: 1fr; gap: 0; } }

.oej-specrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--oej-border);
}
.oej-specrow dt {
  font: 500 13px/1.4 var(--oej-body);
  color: var(--oej-ink-40);
  font-weight: 400;
  flex: none;
  max-width: 48%;
}
.oej-specrow dd {
  margin: 0;
  font: 500 15px/1.4 var(--oej-body);
  color: var(--oej-ink);
  text-align: right;
}

/* ===========================================================================
   Comparison table (dark)
   =========================================================================== */

.oej-compare { width: 100%; border-collapse: collapse; }
.oej-compare th, .oej-compare td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--oej-border-dark);
  text-align: left;
  vertical-align: middle;
}
.oej-compare thead th {
  font: 700 20px/1 var(--oej-display);
  text-transform: uppercase;
  color: #fff;
}
.oej-compare tbody th {
  width: 190px;
  font: 500 11px/1.3 var(--oej-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  font-weight: 500;
}
.oej-compare td {
  font: 500 16px/1.4 var(--oej-body);
  color: rgba(255, 255, 255, .6);
  font-variant-numeric: tabular-nums;
}
.oej-compare td.is-best { color: #fff; font-weight: 600; }
.oej-compare__wrap { overflow-x: auto; }

/* ===========================================================================
   Sticky filter bar
   =========================================================================== */

.oej-filterbar {
  position: sticky;
  top: var(--oej-header-h);
  z-index: 1020;
  background: var(--oej-paper-warm);
  border-bottom: 1px solid var(--oej-border);
  padding: 20px 0;
}
.oej-filterbar__inner {
  display: flex;
  align-items: flex-end;
  gap: 26px;
  flex-wrap: wrap;
}
.oej-filterbar__group { display: flex; flex-direction: column; gap: 9px; }
.oej-filterbar__right { margin-left: auto; display: flex; align-items: flex-end; gap: 12px; }

@media (max-width: 991.98px) {
  .oej-filterbar { padding: 14px 0; }
  .oej-filterbar__inner { gap: 14px; }
  .oej-filterbar__right { margin-left: 0; width: 100%; }
  /* Chip rows scroll sideways rather than wrapping into a tall stack. */
  .oej-filterbar .oej-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .oej-filterbar .oej-chips::-webkit-scrollbar { display: none; }
  .oej-chip { flex: none; }
}

/* ===========================================================================
   Empty & success states
   =========================================================================== */

.oej-empty {
  border: 1px dashed var(--oej-border-strong);
  padding: 56px 30px;
  text-align: center;
}
.oej-empty h2 { font: 800 32px/1 var(--oej-display); margin-bottom: 12px; }

.oej-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  background: rgba(31, 122, 74, .08);
  border-left: 4px solid var(--oej-success);
  margin-bottom: 26px;
}
.oej-notice--error { background: rgba(225, 27, 34, .07); border-left-color: var(--oej-red); }
.oej-notice__title { font: 700 18px/1.2 var(--oej-display); text-transform: uppercase; color: var(--oej-ink); }

/* ===========================================================================
   Stepper
   =========================================================================== */

.oej-stepper { display: flex; align-items: center; gap: 0; margin-bottom: 40px; }
.oej-step { display: flex; align-items: center; gap: 12px; flex: none; }
.oej-step__dot {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--oej-border-strong);
  background: var(--oej-paper);
  font: 700 15px/1 var(--oej-display);
  color: var(--oej-ink-40);
  flex: none;
}
.oej-step.is-active .oej-step__dot { background: var(--oej-red); border-color: var(--oej-red); color: #fff; }
.oej-step.is-done .oej-step__dot { background: var(--oej-ink); border-color: var(--oej-ink); color: #fff; }
.oej-step__label {
  font: 600 12px/1 var(--oej-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oej-ink-25);
}
.oej-step.is-active .oej-step__label, .oej-step.is-done .oej-step__label { color: var(--oej-ink); }
.oej-step__rule { flex: 1; height: 1px; background: var(--oej-border-rule); margin: 0 16px; min-width: 20px; }

@media (max-width: 767.98px) {
  .oej-stepper { background: var(--oej-paper-grey); padding: 12px; margin-bottom: 24px; }
  .oej-step__label { display: none; }
  .oej-step__rule { margin: 0 8px; }
}

/* ===========================================================================
   Progress (application submit)
   =========================================================================== */

.oej-progress { background: var(--oej-ink); color: #fff; padding: 48px 44px; }
.oej-progress__pct {
  font: 800 56px/1 var(--oej-display);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.oej-progress__bar { height: 4px; background: rgba(255, 255, 255, .14); margin: 20px 0 30px; }
.oej-progress__fill {
  height: 100%;
  background: var(--oej-red);
  width: 0;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.oej-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .3);
  font: 500 15px/1.3 var(--oej-body);
  transition: background .3s, color .3s;
}
.oej-stage.is-active { background: var(--oej-red); color: #fff; }
.oej-stage.is-done { background: var(--oej-success); color: #fff; }
.oej-stage__tag {
  font: 600 10px/1 var(--oej-label);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ===========================================================================
   Mobile sticky action bar
   =========================================================================== */

.oej-stickybar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: var(--oej-paper);
  border-top: 1px solid var(--oej-border);
  padding: 8px var(--oej-gutter);
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  gap: 8px;
}
.oej-stickybar .oej-btn { flex: 1; height: 56px; font-size: 13px; letter-spacing: .12em; }

@media (max-width: 991.98px) {
  .oej-stickybar { display: flex; }
  .oej-body--has-stickybar { padding-bottom: 78px; }
  .oej-wa-fab { bottom: 86px; }
}

.oej-wa-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1035;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  font-size: 26px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.oej-wa-fab:hover { background: #1EB855; color: #fff; }

/* ===========================================================================
   Footer
   =========================================================================== */

.oej-footer { background: var(--oej-ink); color: rgba(255, 255, 255, .6); padding: 64px 0 28px; }
.oej-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--oej-border-dark);
}
.oej-footer__address, .oej-footer__hours {
  font: 400 15px/1.6 var(--oej-body);
  color: rgba(255, 255, 255, .55);
  margin: 18px 0 0;
  max-width: 320px;
}
.oej-footer__social { display: flex; gap: 14px; margin-top: 20px; }
.oej-footer__social a { color: rgba(255, 255, 255, .6); font-size: 20px; text-decoration: none; }
.oej-footer__social a:hover { color: #fff; }

.oej-footer__col { display: flex; flex-direction: column; gap: 12px; }
.oej-footer__heading {
  font: 600 11px/1 var(--oej-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  margin-bottom: 4px;
}
.oej-footer__col a {
  font: 400 15px/1.3 var(--oej-body);
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
}
.oej-footer__col a:hover { color: #fff; }

.oej-footer__bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.oej-footer__bottom p { margin: 0; font: 400 13px/1.5 var(--oej-body); color: rgba(255, 255, 255, .42); }
.oej-footer__disclaimer { max-width: 640px; }

@media (max-width: 991.98px) {
  .oej-footer { padding: 40px 0 24px; }
  .oej-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 575.98px) {
  .oej-footer__grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Misc helpers
   =========================================================================== */

.oej-breadcrumb {
  display: flex;
  gap: 10px;
  align-items: center;
  font: 500 11px/1 var(--oej-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oej-ink-40);
  padding: 20px 0;
}
.oej-breadcrumb a { color: var(--oej-ink-40); text-decoration: none; }
.oej-breadcrumb a:hover { color: var(--oej-ink); }

.oej-rule { height: 1px; background: var(--oej-border-rule); border: 0; margin: 0; }

.oej-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 34px; }
.oej-partners img {
  height: 34px;
  width: auto;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity .15s, filter .15s;
}
.oej-partners a:hover img { filter: grayscale(0); opacity: 1; }

.oej-copybtn {
  border: 1px solid var(--oej-border-strong);
  background: transparent;
  min-height: 44px;
  padding: 0 14px;
  font: 600 11px/1 var(--oej-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oej-ink);
  cursor: pointer;
  transition: all .15s;
}
.oej-copybtn:hover { background: var(--oej-ink); color: #fff; border-color: var(--oej-ink); }
.oej-copybtn.is-copied { background: var(--oej-success); border-color: var(--oej-success); color: #fff; }

.oej-split { display: grid; grid-template-columns: 1fr 420px; gap: 44px; align-items: start; }
.oej-split--wide-rail { grid-template-columns: 1fr 400px; }
.oej-rail { position: sticky; top: calc(var(--oej-header-h) + 24px); }

@media (max-width: 1199.98px) {
  .oej-split, .oej-split--wide-rail { grid-template-columns: 1fr; gap: 30px; }
  .oej-rail { position: static; }
}

/* --- Nav submenu ----------------------------------------------------------
   Opens on hover and, for keyboard users, on :focus-within — tabbing to the
   "Loan" link reveals the panel, and it stays open while focus is inside it,
   so the entries are reachable in normal tab order with no JavaScript.

   Hidden with visibility rather than display so it can transition and, more
   importantly, so it leaves the accessibility tree and the tab order while
   closed. Opacity alone would leave two invisible tab stops in the header. */
.oej-nav__item { position: relative; display: flex; align-items: center; }

.oej-nav__chev {
  font-size: 10px;
  margin-left: 5px;
  opacity: .55;
  transition: transform .18s ease, opacity .18s ease;
  display: inline-block;
}
.oej-nav__item--menu:hover .oej-nav__chev,
.oej-nav__item--menu:focus-within .oej-nav__chev {
  transform: rotate(180deg);
  opacity: 1;
}

.oej-nav__menu {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 30;
  min-width: 268px;
  padding: 6px 0;
  background: var(--oej-paper);
  border: 1px solid var(--oej-border);
  border-top: 2px solid var(--oej-red);
  box-shadow: 0 14px 34px rgba(16, 16, 18, .13);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

/* The header link sits above the panel with a gap under it. This pad closes
   that gap so the pointer can travel down into the menu without crossing dead
   space and dismissing it. */
.oej-nav__menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

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

.oej-nav__menulink {
  display: block;
  padding: 11px 18px;          /* 44px+ tall, so it is a valid touch target */
  text-decoration: none;
  border-left: 2px solid transparent;
  font: 600 14px/1.2 var(--oej-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oej-ink);
  transition: background-color .15s, border-color .15s, color .15s;
}
.oej-nav__menulink small {
  display: block;
  margin-top: 3px;
  font: 400 12px/1.35 var(--oej-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--oej-ink-60);
}
.oej-nav__menulink:hover,
.oej-nav__menulink:focus-visible {
  background: var(--oej-paper-warm);
  border-left-color: var(--oej-red);
  color: var(--oej-red);
}
.oej-nav__menulink:focus-visible { outline: 2px solid var(--oej-red); outline-offset: -2px; }
.oej-nav__menulink.is-active { border-left-color: var(--oej-red); }

@media (prefers-reduced-motion: reduce) {
  .oej-nav__menu { transition: none; }
  .oej-nav__chev { transition: none; }
}