/* RMP Co-Marketing compliance fix 2026-06-13: --oonp-font-head/-body restored to Nissan-approved stack (Nissan Brand / Arial / Helvetica / Verdana); had regressed to non-approved Google fonts. */
:root {
  --oonp-red: #c3002f;
  --oonp-red-dark: #930024;
  --oonp-red-soft: #fff0f3;
  --oonp-ink: #161616;
  --oonp-ink-2: #2b2b2b;
  --oonp-text: #334155;
  --oonp-muted: #64748b;
  --oonp-line: #e5e7eb;
  --oonp-warm-line: #e5e7eb;
  --oonp-paper: #ffffff;
  --oonp-soft: #f3f4f6;
  --oonp-soft-2: #f8fafc;
  --oonp-navy: #193a5a;
  --oonp-font-head: "Nissan Brand", Arial, Helvetica, Verdana, sans-serif;
  --oonp-font-body: "Nissan Brand", Arial, Helvetica, Verdana, sans-serif;
  --oonp-container: 1180px;
  --oonp-gutter: 24px;
  --oonp-radius: 8px;
  --oonp-radius-lg: 12px;
  --oonp-shadow: 0 18px 50px rgba(15, 23, 42, .16);
  --oonp-shadow-soft: 0 8px 24px rgba(15, 23, 42, .09);
  --oonp-armada-hero-image: url("oon-master-execution-assets/2026-nissan-armada-forest-green-off-road-front-three-quarter-xl-v2.jpg");

  /* Vertical rhythm — use these for consistent inter-element spacing
     instead of magic numbers. Documented usage:
     --oonp-stack-sm (12px)  →  h3/h4 → p; closely-related items
     --oonp-stack-md (20px)  →  p → ul; kicker → h2 in large headings
     --oonp-stack-lg (28px)  →  h1 → lead p in heroes; ul → actions
     --oonp-stack-xl (48px)  →  major sub-block transitions inside a section
     --oonp-stack-xxl (80px) →  full section padding-block */
  --oonp-stack-sm: 12px;
  --oonp-stack-md: 20px;
  --oonp-stack-lg: 28px;
  --oonp-stack-xl: 48px;
  --oonp-stack-xxl: 80px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Offset jump-anchor scrolls so the sticky .oonp-header doesn't cover
     the top of the target section. The header has two nav rows on desktop
     (~150px tall) and stacks vertically on mobile (~86px). */
  scroll-padding-top: 160px;
}

.oonp-section[id] {
  /* Per-section fallback for browsers that don't honor scroll-padding-top
     on <html>, or for any future scroll-into-view calls. */
  scroll-margin-top: 160px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Global reset for headings/paragraphs/lists. Wrapped in `:where()` so it
   has zero specificity — every component rule (and our universal heading→
   sibling rule below) can override this baseline without !important. */
:where(p, h1, h2, h3, h4, dl, dd) {
  margin: 0;
}

:where(ul) {
  margin: 0;
  padding: 0;
}

.cardealer-lead-form-get-e-price h6,
.cardealer-lead-form-get-e-price div.modal-title{
  font-size: 24px;
  color: #fff;
}

.cardealer-lead-form-get-e-price.modal .close {
  color: #db2d2e;
  opacity: 1;
  font-size: 36px;
  font-weight: 600;
  text-shadow: none;
}

.cardealer-lead-form-get-e-price.modal .modal-header {
  background: #323232;
  padding-left: 36px;
  padding-right: 36px;
}

.oonp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(16px, 3vw, 32px);
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--oonp-line);
  backdrop-filter: blur(14px);
}

.oonp-logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
  font-family: var(--oonp-font-head);
  color: var(--oonp-ink);
}

.oonp-logo__mark {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--oonp-red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .9px;
}

.oonp-logo strong,
.oonp-logo small {
  display: block;
}

.oonp-logo strong {
  font-size: 15px;
  line-height: 1.15;
}

.oonp-logo small {
  margin-top: 2px;
  color: var(--oonp-muted);
  font-size: 12px;
  line-height: 1.2;
}

.oonp-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.oonp-nav a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--oonp-text);
  font-family: var(--oonp-font-head);
  font-size: 12px;
  font-weight: 700;
}

.oonp-nav a:hover,
.oonp-nav a:focus-visible {
  background: var(--oonp-red-soft);
  color: var(--oonp-red);
  outline: none;
}

.oonp-hero {
  position: relative;
  min-height: 650px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--oonp-ink);
  color: #fff;
}

.oonp-hero__media,
.oonp-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.oonp-hero__media {
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(1.02) contrast(1.04);
}

.oonp-hero__shade {
  background:
    linear-gradient(90deg, rgba(12, 12, 12, .93) 0%, rgba(12, 12, 12, .84) 42%, rgba(12, 12, 12, .5) 100%),
    linear-gradient(0deg, rgba(12, 12, 12, .18), rgba(12, 12, 12, .18));
}

.oonp-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 420px);
  align-items: center;
  gap: 52px;
  padding-block: 84px;
}

.oonp-hero__copy {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Hero contexts (.oonp-hero, .oonp-photo-hero, .oonp-image-bottom-hero,
   .oonp-model-hero) use larger kicker → headline spacing than card kickers.
   The kicker base rule is 14px margin-bottom; bump to 18px here. */
.oonp-hero .oonp-kicker,
.oonp-photo-hero .oonp-kicker,
.oonp-image-bottom-hero .oonp-kicker,
.oonp-model-hero .oonp-kicker {
  margin-bottom: 18px;
}

.oonp-hero h1 {
  max-width: 760px;
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.03;
  overflow-wrap: anywhere;
}

.oonp-hero p {
  max-width: 640px;
  margin-top: 28px;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.oonp-intent-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--oonp-radius-lg);
  background: rgba(255, 255, 255, .09);
  box-shadow: var(--oonp-shadow);
  backdrop-filter: blur(18px);
}

.oonp-intent-card a {
  display: grid;
  gap: 2px;
  min-height: 78px;
  padding: 18px;
  border-radius: var(--oonp-radius);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
}

.oonp-intent-card a:hover,
.oonp-intent-card a:focus-visible {
  background: #fff;
  color: var(--oonp-ink);
  outline: none;
}

.oonp-intent-card strong {
  font-family: var(--oonp-font-head);
  font-size: 16px;
}

.oonp-intent-card span {
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
}

.oonp-intent-card a:hover span,
.oonp-intent-card a:focus-visible span {
  color: var(--oonp-muted);
}

.oonp-service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 24px;
}

.oonp-service-panel {
  padding: clamp(26px, 5vw, 52px);
}

/* Vertical rhythm — unified across all content cards (.oonp-service-panel,
   .oonp-whatsnew-card, .oonp-info-card, .oonp-info-card--lg, etc.). The
   intent: kicker → h3 (14px) → p (12px) → ul (20px) → actions (28px). */
.oonp-service-panel .oonp-kicker {
  margin-bottom: 14px;
}

.oonp-service-panel h3 {
  margin: 0;
}

.oonp-service-panel p {
  max-width: 720px;
  margin-top: 12px;
}

.oonp-service-panel .oonp-checklist {
  margin-top: 20px;
}

.oonp-service-panel .oonp-actions {
  margin-top: 28px;
}

.oonp-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.oonp-checklist li {
  position: relative;
  padding-left: 28px;
  color: var(--oonp-text);
  font-size: 15.5px;
  line-height: 1.55;
}

/* Round red-donut bullet — anchored to vertical center of the FIRST text
   line. `top: 0.775em` = half of line-height: 1.55, so combined with
   `margin-top: -<half-bullet-height>` the bullet's visual center sits
   exactly on the first-line middle. Works for single- and multi-line items.
   Used across .oonp-checklist, .oonp-split__list, .oonp-whatsnew-card ul. */
.oonp-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.775em;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--oonp-red);
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px var(--oonp-red);
}

.oonp-hours-card {
  padding: 28px;
  align-self: stretch;
  background: var(--oonp-ink);
  color: #fff;
}

.oonp-hours-card h3 {
  color: #fff;
  font-size: 18px;
}

.oonp-hours-card dl {
  display: grid;
  gap: 0;
  margin-top: 20px;
}

.oonp-hours-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-block: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.oonp-hours-card dt {
  color: rgba(255, 255, 255, .64);
}

.oonp-hours-card dd {
  color: #fff;
  font-weight: 700;
  text-align: right;
}

.oonp-hours-card>a {
  display: inline-flex;
  margin-top: 26px;
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: 24px;
  font-weight: 800;
}

.oonp-express-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 22px;
  padding: 22px 26px;
  border-radius: var(--oonp-radius-lg);
  background: linear-gradient(135deg, var(--oonp-red), var(--oonp-red-dark));
  color: #fff;
}

.oonp-express-band strong,
.oonp-express-band span {
  display: block;
}

.oonp-express-band strong {
  font-family: var(--oonp-font-head);
  font-size: 20px;
  line-height: 1.2;
}

.oonp-express-band span {
  margin-top: 4px;
  color: rgba(255, 255, 255, .82);
}

/* Offer card color variants live below the base .oonp-offer-card rule
   (see the OFFERS section further down) to win the cascade. The
   variant declarations themselves are at line ~3290. */

.oonp-model {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(300px, 1fr);
  align-items: center;
  gap: 42px;
}

.oonp-model__copy p {
  margin-top: 20px;
}

.oonp-vehicle-card {
  overflow: hidden;
  border-left: #bec5ce 1px solid;
}

.oonp-vehicle-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1025 / 589;
  object-fit: contain;
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
}

.oonp-vehicle-card__body {
  padding: 24px;
}

.oonp-vehicle-card__body h3 {
  font-size: 20px;
}

.oonp-vehicle-card dl {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.oonp-vehicle-card dl div {
  display: grid;
  grid-template-columns: minmax(90px, .45fr) minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--oonp-line);
}

.oonp-vehicle-card dt {
  color: var(--oonp-muted);
  font-family: var(--oonp-font-head);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.oonp-vehicle-card dd {
  color: var(--oonp-ink);
  font-weight: 700;
}

.oonp-geo-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(300px, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* `.oonp-location-card` was deprecated in favor of `.oonp-info-card`
   (with the `--lg` modifier when extra presence is wanted). The geo
   card now reuses .oonp-info-card and .oonp-info-card--lg. */

.oonp-city-cluster {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 10px;
  padding: 34px;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius-lg);
  background: #fff;
}

.oonp-city-cluster a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  max-width: 100%;
  gap: 9px;
  padding: 0 17px;
  border: 1px solid var(--oonp-line);
  border-radius: 999px;
  background: var(--oonp-soft-2);
  color: var(--oonp-ink-2);
  font-family: var(--oonp-font-head);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.oonp-city-cluster a::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oonp-red);
}

.oonp-city-cluster span {
  color: var(--oonp-muted);
  font-weight: 700;
}

.oonp-city-cluster a:hover,
.oonp-city-cluster a:focus-visible {
  background: var(--oonp-red);
  color: #fff;
  outline: none;
}

.oonp-city-cluster a:hover::before,
.oonp-city-cluster a:focus-visible::before {
  background: #fff;
}

.oonp-city-cluster a:hover span,
.oonp-city-cluster a:focus-visible span {
  color: rgba(255, 255, 255, .78);
}

.oonp-model-hero-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(54px, 7vw, 92px);
  border-block: 1px solid var(--oonp-warm-line);
  background:
    linear-gradient(90deg, #fff 0 52%, rgba(248, 250, 252, .88) 52% 100%),
    linear-gradient(180deg, #fff, var(--oonp-soft-2));
}

.oonp-model-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .46fr) minmax(0, .74fr);
  align-items: stretch;
  gap: 26px;
  min-height: 560px;
}

.oonp-model-hero::before {
  content: "";
  position: absolute;
  inset: 7% -12% 7% 45%;
  border-radius: 999px 0 0 999px;
  background:
    radial-gradient(circle at 80% 42%, rgba(195, 0, 47, .12), transparent 36%),
    linear-gradient(135deg, #f3f4f6, #fff);
}

.oonp-model-hero__copy,
.oonp-model-hero__media {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.oonp-model-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 28px;
}

.oonp-model-hero h1 {
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: clamp(44px, 6vw, 82px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: .98;
}

.oonp-model-hero__copy p {
  max-width: 560px;
  margin-top: 26px;
  color: var(--oonp-text);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.62;
}

.oonp-model-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.oonp-model-hero__facts div {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius);
  background: rgba(255, 255, 255, .8);
}

.oonp-model-hero__facts strong,
.oonp-model-hero__facts span {
  display: block;
}

.oonp-model-hero__facts strong {
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 13px;
  font-weight: 800;
}

.oonp-model-hero__facts span {
  margin-top: 5px;
  color: var(--oonp-muted);
  font-size: 13px;
  line-height: 1.35;
}

.oonp-model-hero__ctas {
  margin-top: auto;
  padding-top: 34px;
}

.oonp-model-hero__media {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 440px;
  overflow: hidden;
  border-radius: var(--oonp-radius-lg);
  box-shadow: var(--oonp-shadow);
}

.oonp-model-hero__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 63% center;
  transform: none;
  filter: saturate(1.02) contrast(1.04);
}

.oonp-image-bottom-hero {
  background: var(--oonp-paper);
  border-bottom: 1px solid var(--oonp-line);
}

.oonp-image-bottom-hero__stage {
  position: relative;
  min-height: 760px;
  display: grid;
  grid-template-rows: minmax(430px, 1fr) auto;
  align-items: stretch;
  overflow: hidden;
  background: #111827;
}

.oonp-image-bottom-hero__stage img,
.oonp-image-bottom-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.oonp-image-bottom-hero__stage img {
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(1.02) contrast(1.04);
}

.oonp-image-bottom-hero__shade {
  background:
    linear-gradient(90deg, rgba(8, 12, 20, .44) 0%, rgba(8, 12, 20, .1) 56%, rgba(8, 12, 20, 0) 100%),
    linear-gradient(180deg, rgba(8, 12, 20, .06) 0%, rgba(8, 12, 20, .18) 44%, rgba(8, 12, 20, .86) 100%);
}

.oonp-image-bottom-hero__copy {
  position: relative;
  z-index: 1;
  grid-row: 2;
  align-self: end;
  padding-block: 92px 58px;
}

.oonp-image-bottom-hero h1 {
  max-width: 760px;
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: clamp(42px, 5.8vw, 78px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.02;
  text-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}

.oonp-image-bottom-hero p {
  max-width: 660px;
  margin-top: 26px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.62;
}

.oonp-image-bottom-hero__actions {
  background: #fff;
  border-top: 1px solid var(--oonp-line);
}

.oonp-image-bottom-hero__actions-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
}

.oonp-image-bottom-hero__actions strong,
.oonp-image-bottom-hero__actions span {
  display: block;
}

.oonp-image-bottom-hero__actions strong {
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 17px;
}

.oonp-image-bottom-hero__actions span {
  margin-top: 4px;
  color: var(--oonp-muted);
  font-size: 14px;
}

.oonp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius);
  background: var(--oonp-soft-2);
  color: var(--oonp-muted);
  font-family: var(--oonp-font-head);
  font-size: 13px;
  font-weight: 700;
}

.oonp-breadcrumb a:hover {
  color: var(--oonp-red);
}

.oonp-breadcrumb strong {
  color: var(--oonp-ink);
}

/* Full-width breadcrumb — edge-to-edge band, typically used at the very top
   of a page just under the header. Sits OUTSIDE .oonp-container so its
   background fills the viewport; inner content is constrained to the
   container width via .oonp-breadcrumb__inner. */
.oonp-breadcrumb--full {
  display: block;
  padding: 0;
  border: 0;
  border-block: 1px solid var(--oonp-line);
  border-radius: 0;
  background: var(--oonp-soft-2);
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.oonp-breadcrumb--full .oonp-breadcrumb__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: var(--oonp-container);
  margin-inline: auto;
  padding: 13px 24px;
  color: var(--oonp-muted);
  font-family: var(--oonp-font-head);
  font-size: 13px;
  font-weight: 700;
}

.oonp-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* When .oonp-card-grid follows anything (breadcrumb, section-head with no
   gap of its own, etc.) keep at least 24px breathing room. */
.oonp-breadcrumb+.oonp-card-grid {
  margin-top: 24px;
}

.oonp-info-card {
  padding: 24px;
}

.oonp-info-card span {
  color: var(--oonp-red);
  font-family: var(--oonp-font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.oonp-info-card h3 {
  margin-top: 14px;
  font-size: 22px;
}

.oonp-info-card p {
  margin-top: 10px;
  color: var(--oonp-text);
}

.oonp-info-card a {
  display: inline-flex;
  margin-top: 18px;
  color: var(--oonp-red);
  font-family: var(--oonp-font-head);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.oonp-promo-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 0;
  margin-top: var(--oonp-stack-xl);
  overflow: hidden;
  border-radius: var(--oonp-radius-lg);
  background: var(--oonp-ink);
  color: #fff;
}

/* Major block-level patterns that get stacked inside a section's container
   need consistent breathing room. Apply a baseline margin-top so adjacent
   blocks don't glue together — `.oonp-split-block`, custom div wrappers,
   etc. that lack their own margin-top fall back to this. */
.oonp .oonp-section>.oonp-container>.oonp-split-block,
.oonp .oonp-section>.oonp-container>.oonp-split,
.oonp .oonp-section>.oonp-container>.oonp-vs-wrap,
.oonp .oonp-section>.oonp-container>.oonp-inline-band {
  margin-top: var(--oonp-stack-xl);
}

.oonp-promo-block>div {
  min-width: 0;
  padding: clamp(28px, 5vw, 54px);
}

/* Higher specificity so the dark-background promo wins over the
   later .oonp-section h3 { color: ink } rule. 0,2,1 beats 0,1,1. */
.oonp .oonp-promo-block h3 {
  color: #fff;
}

.oonp-promo-block p {
  max-width: 640px;
  margin-top: 20px;
  color: rgba(255, 255, 255, .76);
}

.oonp-promo-block .oonp-btn {
  margin-top: 28px;
}

.oonp-promo-block img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.oonp-media-frame {
  overflow: hidden;
  border-radius: var(--oonp-radius-lg);
  box-shadow: var(--oonp-shadow-soft);
  background: var(--oonp-ink);
}

.oonp-media-frame img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

/* SPLIT BLOCK — image one side, text + checklist on the other.
   Used inside the content section. Image leads on desktop (left column);
   stacks image-on-top on mobile. */
.oonp-split-block {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
}

.oonp-split-block>.oonp-media-frame {
  align-self: stretch;
}

.oonp-split-block>.oonp-media-frame img {
  height: 100%;
  min-height: 360px;
}

@media (max-width: 860px) {
  .oonp-split-block {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .oonp-split-block>.oonp-media-frame img {
    min-height: 240px;
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

.oonp-checklist--single {
  grid-template-columns: 1fr;
}

.oonp-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  gap: 26px;
  align-items: start;
  margin-top: 46px;
}

.oonp-article {
  min-width: 0;
  max-width: 780px;
}

.oonp-article :where(h2, h3, h4)+p {
  margin-top: 20px;
}

.oonp-article p {
  margin-top: 18px;
  color: var(--oonp-text);
  font-size: 17px;
  line-height: 1.7;
}

.oonp-callout {
  margin-top: 20px;
  padding: 18px 20px;
  border-left: 4px solid var(--oonp-red);
  border-radius: 0 var(--oonp-radius) var(--oonp-radius) 0;
  background: var(--oonp-red-soft);
}

.oonp-callout strong,
.oonp-callout p {
  display: block;
}

.oonp-callout strong {
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.oonp-callout p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
}

.oonp-callout--note {
  border-left-color: var(--oonp-navy);
  background: #edf4fb;
}

.oonp-sidebar-card {
  position: sticky;
  top: 86px;
  padding: 24px;
}

.oonp-sidebar-card h3 {
  font-size: 18px;
}

.oonp-sidebar-card a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--oonp-line);
  color: var(--oonp-text);
  font-family: var(--oonp-font-head);
  font-size: 14px;
  font-weight: 700;
}

.oonp-sidebar-card a:last-child {
  border-bottom: 0;
}

.oonp-sidebar-card a:hover {
  color: var(--oonp-red);
}

.oonp-rich-text {
  /*max-width: 880px; */
  margin: 54px auto 0;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius-lg);
  background: #fff;
  box-shadow: var(--oonp-shadow-soft);
}

.oonp-rich-text h2 {
  margin-top: 48px;
  margin-bottom: 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
}

.oonp-rich-text h3 {
  margin-top: 36px;
  margin-bottom: 0;
  font-size: clamp(21px, 2vw, 26px);
}

/* First heading inside the article shouldn't push down — it's the
   article's title, sitting flush with the card's top padding. */
.oonp-rich-text>h2:first-child,
.oonp-rich-text>h3:first-child {
  margin-top: 0;
}

.oonp-rich-text p,
.oonp-rich-text li,
.oonp-rich-text td {
  color: var(--oonp-text);
  font-size: 18px;
  line-height: 1.72;
}

/* h2/h3 → p gets meaningful breathing room (22px); p → p stays at 14px
   so paragraphs in the same thought feel tighter than a new section. */
.oonp-rich-text :where(h2, h3)+p {
  margin-top: 22px;
}

.oonp-rich-text p+p {
  margin-top: 14px;
}

.oonp-rich-text p {
  margin-top: 22px;
}

/* Unordered lists in rich-text get the same red-donut bullet as other
   .oonp lists (.oonp-checklist, .oonp-split__list, .oonp-whatsnew-card ul).
   Ordered lists keep native numbering but with red ::marker color. */
.oonp-rich-text ul,
.oonp-rich-text ol {
  display: grid;
  gap: 14px;
  margin-top: 22px;
  padding-left: 20px;
  list-style: none;
}

.oonp-rich-text ul li {
  position: relative;
  padding-left: 28px;
}

/* Red donut bullet — same recipe + alignment math as .oonp-split__list. */
.oonp-rich-text ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.86em;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--oonp-red);
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px var(--oonp-red);
}

/* Ordered lists keep their native marker (numbers), just in red. */
.oonp-rich-text ol {
  padding-left: 40px;
  list-style: decimal;
}

.oonp-rich-text ol li::marker {
  color: var(--oonp-red);
  font-weight: 800;
}

.oonp-content-table {
  width: 100%;
  margin-top: 22px;
  overflow-x: auto;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius);
  background: #fff;
}

.oonp-content-table table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.oonp-content-table caption {
  padding: 17px 20px;
  background: var(--oonp-soft);
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-weight: 800;
  text-align: left;
}

.oonp-content-table th,
.oonp-content-table td {
  padding: 15px 20px;
  border-top: 1px solid var(--oonp-line);
  text-align: left;
  vertical-align: top;
}

.oonp-content-table th {
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 13px;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.oonp-rich-text blockquote {
  margin: 30px 0 0;
  padding: 24px;
  border-left: 5px solid var(--oonp-red);
  border-radius: 0 var(--oonp-radius) var(--oonp-radius) 0;
  background: var(--oonp-soft-2);
}

.oonp-rich-text blockquote p {
  margin-top: 0;
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 800;
  line-height: 1.3;
}

.oonp-rich-text cite {
  display: block;
  margin-top: 12px;
  color: var(--oonp-muted);
  font-family: var(--oonp-font-head);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

/* Inline CTA inside long-form rich-text — pink callout-style bar with
   a heading + lead on the left and a single red CTA on the right. */
.oonp-text-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title  cta"
    "lead   cta";
  column-gap: 24px;
  row-gap: 6px;
  align-items: center;
  margin-top: 30px;
  padding: 24px 28px;
  border-radius: var(--oonp-radius);
  background: var(--oonp-red-soft);
}

.oonp-text-cta strong,
.oonp-text-cta span {
  display: block;
}

.oonp-text-cta strong {
  grid-area: title;
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.oonp-text-cta span {
  grid-area: lead;
  color: var(--oonp-text);
  font-size: 15px;
  line-height: 1.5;
}

/* `.oonp .oonp-text-cta a` (0,2,1) beats the global `.oonp a { color:
   inherit }` (0,1,1) so the white button text actually shows. */
.oonp .oonp-text-cta a {
  grid-area: cta;
  align-self: center;
  justify-self: end;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: var(--oonp-radius);
  background: var(--oonp-red);
  /* 0,2,1 beats `.oonp a { color: inherit }` at 0,1,1 — no !important needed. */
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}

.oonp .oonp-text-cta a:hover {
  background: var(--oonp-red-dark);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .oonp-text-cta {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "lead"
      "cta";
    row-gap: 14px;
  }
  .oonp .oonp-text-cta a {
    justify-self: stretch;
    width: 100%;
  }
}

.oonp-pullquote {
  margin: 54px 0 0;
  padding: clamp(28px, 5vw, 46px);
  border-left: 6px solid var(--oonp-red);
  background: var(--oonp-soft-2);
}

.oonp-pullquote blockquote {
  margin: 0;
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.25;
}

.oonp-pullquote figcaption {
  margin-top: 18px;
  color: var(--oonp-muted);
  font-family: var(--oonp-font-head);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.oonp-proof-section {
  background: var(--oonp-ink);
  color: #fff;
}

.oonp-band {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
}

.oonp-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
}

.oonp-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .82));
}

.oonp-band>div {
  position: relative;
  z-index: 1;
  width: min(100%, 820px);
  padding: 54px 24px;
}

.oonp-band h2 {
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
}

.oonp-band p {
  margin-top: 14px;
  color: rgba(255, 255, 255, .76);
  font-size: 18px;
}

.oonp-conversion-grid,
.oonp-spec-utility-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* `.oonp-info-card--lg` — larger / shadowed variant of the base info-card.
   Replaces the deprecated `.oonp-utility-card`. Use when the card needs
   more presence (sidebar utility blocks, "Why Us" cards, anywhere that
   warrants slightly more breathing room and a soft shadow). */
.oonp-info-card--lg {
  min-width: 0;
  padding: 28px;
  box-shadow: var(--oonp-shadow-soft);
}

.oonp-info-card--lg h3 {
  font-size: 24px;
}

.oonp-info-card--lg p {
  margin-top: 16px;
}

.oonp-info-card--lg .oonp-btn {
  margin-top: 22px;
}

.oonp-form-stack {
  display: grid;
  gap: 16px;
}

.oonp-form-card {
  display: grid;
  gap: 10px;
  padding: 28px;
}

.oonp-form-card h3 {
  margin-bottom: 8px;
  font-size: 22px;
}

.oonp-form-card label {
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 13px;
  font-weight: 800;
}

.oonp-form-card input,
.oonp-form-card select,
.oonp-form-card textarea {
  width: 100%;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius);
  padding: 12px 13px;
  color: var(--oonp-ink);
  font: inherit;
}

.oonp-form-card input:focus,
.oonp-form-card select:focus,
.oonp-form-card textarea:focus {
  border-color: var(--oonp-red);
  outline: 3px solid rgba(195, 0, 47, .14);
}

.oonp-form-card--dark {
  background: var(--oonp-ink);
  color: #fff;
}

/* `.oonp .oonp-form-card--dark h3` (0,2,1) beats the later
   `.oonp-section h3 { color: ink }` (0,1,1) so headings inside a dark
   form card stay white even without the .white utility class. */
.oonp .oonp-form-card--dark h3,
.oonp .oonp-form-card--dark h2,
.oonp .oonp-form-card--dark p {
  color: #fff;
}

.oonp-form-card--dark label {
  color: rgba(255, 255, 255, .84);
}

.oonp-form-card--dark input,
.oonp-form-card--dark select,
.oonp-form-card--dark textarea {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.oonp-form-card--dark option {
  color: var(--oonp-ink);
}

.oonp-form-card button {
  margin-top: 10px;
}

.oonp-map-hours {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .72fr);
  overflow: hidden;
}

.oonp-map-placeholder {
  min-height: 320px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(25, 58, 90, .88), rgba(22, 22, 22, .92)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 18px);
  color: #fff;
  text-align: center;
  font-family: var(--oonp-font-head);
  font-size: 22px;
  font-weight: 800;
}

.oonp-map-hours>div:last-child {
  padding: 28px;
  background: var(--oonp-ink);
  color: #fff;
}

.oonp-map-hours h3 {
  color: #fff;
  font-size: 22px;
}

.oonp-map-hours p {
  margin-top: 12px;
  color: rgba(255, 255, 255, .74);
}

.oonp-map-hours a {
  display: inline-flex;
  margin-top: 22px;
  color: #fff;
  font-family: var(--oonp-font-head);
  font-weight: 800;
}

.oonp-spec-utility-grid {
  margin-top: var(--oonp-stack-xl);
}

.oonp-faq-ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  padding: 26px;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius-lg);
  background: var(--oonp-red-soft);
}

.oonp-faq-ask>div {
  min-width: 0;
}

.oonp-faq-ask span {
  color: var(--oonp-red);
  font-family: var(--oonp-font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.oonp-faq-ask h3 {
  margin-top: 0;
  font-size: 24px;
}

.oonp-faq-ask p {
  max-width: 680px;
  margin-top: 14px;
  color: var(--oonp-text);
}

/* SPEC WRAP — wraps the spec table + inline offer in a single card that
   visually balances the utility-card on the right side of the grid. */
.oonp-spec-wrap {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius-lg);
  background: #fff;
  box-shadow: var(--oonp-shadow-soft);
  overflow: hidden;
}

/* SPEC TABLE — dark caption band on top, then row pairs (th label left,
   td value right). Replaces raw-table look with a clean key/value list. */
.oonp-spec-table {
  width: 100%;
  border-collapse: collapse;
}

.oonp-spec-table caption {
  padding: 16px 24px;
  background: var(--oonp-ink);
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: left;
}

.oonp-spec-table tbody tr {
  border-top: 1px solid var(--oonp-line);
}

.oonp-spec-table tbody tr:first-child { border-top: 0; }

.oonp-spec-table th,
.oonp-spec-table td {
  padding: 14px 24px;
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.45;
}

.oonp-spec-table th {
  width: 38%;
  color: var(--oonp-muted);
  font-family: var(--oonp-font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  background: var(--oonp-soft-2);
}

.oonp-spec-table td {
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-weight: 700;
}

/* INLINE OFFER — appended footer of .oonp-spec-wrap. Tinted band with
   price + lead + CTA so it visually pairs with the spec table above. */
.oonp-inline-offer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  border-top: 1px solid var(--oonp-line);
  background: var(--oonp-red-soft);
}

.oonp-inline-offer strong {
  color: var(--oonp-red);
  font-family: var(--oonp-font-head);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.oonp-inline-offer span {
  color: var(--oonp-ink-2);
  font-size: 14px;
  line-height: 1.45;
}

/* `.oonp .oonp-inline-offer a` (0,2,1) beats `.oonp a { color: inherit }`
   (0,1,1) so the white "Claim" text is actually visible. */
.oonp .oonp-inline-offer a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: var(--oonp-radius);
  background: var(--oonp-red);
  /* 0,2,1 beats `.oonp a { color: inherit }` (0,1,1) — no !important needed. */
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}

.oonp .oonp-inline-offer a:hover {
  background: var(--oonp-red-dark);
  transform: translateY(-1px);
}

.oonp-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--oonp-stack-xl);
}

.oonp-review-card {
  padding: 24px;
}

.oonp-stars {
  color: #f59e0b;
  letter-spacing: 2px;
}

.oonp-review-card p {
  margin-top: 14px;
  color: var(--oonp-text);
  font-size: 16px;
  font-style: italic;
}

.oonp-review-card strong {
  display: block;
  margin-top: 16px;
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
}

.oonp-review-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 360px);
  gap: 16px;
  margin-top: var(--oonp-stack-xl);
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

.oonp-review-rail article {
  scroll-snap-align: start;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius);
  background: #fff;
}

.oonp-review-rail strong,
.oonp-review-rail span {
  display: block;
}

.oonp-review-rail strong {
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
}

.oonp-review-rail span {
  margin-top: 8px;
  color: var(--oonp-text);
}

.oonp-cta-stack {
  display: grid;
  gap: 12px;
  margin-top: var(--oonp-stack-xl);
}

.oonp-cta-line {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 22px 24px;
  border-radius: var(--oonp-radius);
  color: var(--oonp-ink);
  box-shadow: var(--oonp-shadow-soft);
}

.oonp-cta-line strong,
.oonp-cta-line span {
  display: block;
}

.oonp-cta-line strong {
  font-family: var(--oonp-font-head);
  font-size: 18px;
}

.oonp-cta-line span {
  color: inherit;
  opacity: .78;
}

.oonp-cta-line--light {
  border: 1px solid var(--oonp-line);
  background: #fff;
}

.oonp-cta-line--brand {
  background: var(--oonp-red);
  color: #fff;
}

.oonp-cta-line--dark {
  background: var(--oonp-ink);
  color: #fff;
}

/* Belt-and-suspenders: force white text on the dark/brand cta-line variants
   regardless of whether the author remembered the .white utility class.
   `.oonp .oonp-cta-line--brand strong` (0,3,1) beats anything from earlier. */
/* 0,3,1 beats every reasonable WP theme rule — no !important needed. */
.oonp .oonp-cta-line--brand strong,
.oonp .oonp-cta-line--brand span,
.oonp .oonp-cta-line--dark strong,
.oonp .oonp-cta-line--dark span { color: #fff; }

.oonp .oonp-cta-line--brand span,
.oonp .oonp-cta-line--dark span { opacity: 0.85; }

/* Sticky mobile CTA removed by request — keep placeholder selector to avoid
   any orphan HTML elsewhere from appearing on screen. */
.oonp-sticky-cta { display: none !important; }

@media (max-width: 980px) {
  .oonp-hero {
    min-height: auto;
  }

  .oonp-hero__inner {
    padding-block: 68px;
  }

  .oonp-intent-card {
    max-width: 540px;
  }

  .oonp-model-hero {
    min-height: auto;
    gap: 10px;
  }

  .oonp-model-hero::before {
    inset: 36% -14% 4% 8%;
    border-radius: 999px 999px 0 0;
  }

  .oonp-model-hero__copy {
    padding-block: 0;
  }

  .oonp-model-hero__ctas {
    margin-top: 0;
  }

  .oonp-model-hero__media {
    justify-content: center;
    min-height: 360px;
  }

  .oonp-model-hero__media img {
    width: 100%;
    transform: none;
    object-position: 68% center;
  }

  .oonp-image-bottom-hero__actions-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .oonp-promo-block img {
    min-height: 240px;
  }

  .oonp-media-frame img {
    height: 340px;
  }

  .oonp-sidebar-card {
    position: static;
  }
}

@media (max-width: 700px) {
  :root {
    --oonp-gutter: 16px;
  }

  html {
    scroll-padding-top: 86px;
  }

  .oonp-header {
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .oonp-logo {
    width: 100%;
  }

  .oonp-nav {
    justify-content: flex-start;
  }

  .oonp-nav a {
    min-height: 34px;
    padding-inline: 10px;
  }

  .oonp-hero__shade {
    background: linear-gradient(180deg, rgba(12, 12, 12, .9) 0%, rgba(12, 12, 12, .82) 56%, rgba(12, 12, 12, .92) 100%);
  }

  .oonp-hero__media {
    object-position: 74% center;
  }

  .oonp-hero__inner {
    gap: 30px;
    padding-block: 48px;
  }

  .oonp-hero h1 {
    max-width: 100%;
    font-size: clamp(28px, 7vw, 30px);
    line-height: 1.1;
  }

  .oonp-hero p {
    max-width: 100%;
    font-size: 16px;
  }

  .oonp-intent-card {
    padding: 12px;
  }

  .oonp-intent-card a {
    min-height: 68px;
    padding: 14px;
  }

  .oonp-model-hero-section {
    padding-block: 46px;
  }

  .oonp-model-hero h1 {
    font-size: clamp(36px, 12vw, 48px);
    line-height: 1.02;
  }

  .oonp-model-hero__copy p {
    font-size: 16px;
  }

  .oonp-model-hero__facts {
    margin-top: 22px;
  }

  .oonp-model-hero__ctas {
    padding-top: 24px;
  }

  .oonp-model-hero__media img {
    width: 100%;
    transform: none;
    object-position: 74% center;
  }

  .oonp-image-bottom-hero__stage {
    min-height: 720px;
    grid-template-rows: 1fr auto;
  }

  .oonp-image-bottom-hero__stage img {
    left: 0;
    top: 0;
    bottom: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 76% center;
    transform: none;
    filter: brightness(1.22) saturate(1.08) contrast(1.02);
  }

  .oonp-image-bottom-hero__shade {
    background:
      linear-gradient(180deg, rgba(8, 12, 20, .1) 0%, rgba(8, 12, 20, .26) 42%, rgba(8, 12, 20, .86) 100%),
      linear-gradient(90deg, rgba(8, 12, 20, .34) 0%, rgba(8, 12, 20, .1) 70%, rgba(8, 12, 20, 0) 100%);
  }

  .oonp-image-bottom-hero__copy {
    padding-block: 52px 36px;
  }

  .oonp-image-bottom-hero h1 {
    font-size: clamp(34px, 10vw, 44px);
  }

  .oonp-image-bottom-hero p {
    font-size: 16px;
  }

  .oonp-faq--standalone summary {
    padding: 18px 20px;
    font-size: 16px;
  }

  .oonp-faq--standalone details p {
    padding: 16px 20px 20px;
    font-size: 16px;
  }

  .oonp-faq-ask {
    flex-direction: column;
    align-items: stretch;
  }

  .oonp-breadcrumb {
    align-items: flex-start;
  }

  .oonp-promo-block>div {
    padding: 24px;
  }

  .oonp-promo-block img {
    min-height: 220px;
  }

  .oonp-media-frame img {
    height: 260px;
  }

  .oonp-article-layout {
    gap: 22px;
    margin-top: 34px;
  }

  .oonp-article p {
    font-size: 16px;
  }

  .oonp-rich-text {
    margin-top: 34px;
    padding: 24px;
  }

  .oonp-rich-text h2 {
    margin-top: 34px;
    font-size: clamp(24px, 7vw, 30px);
  }

  .oonp-rich-text h3 {
    margin-top: 24px;
    font-size: 21px;
  }

  .oonp-rich-text p,
  .oonp-rich-text li,
  .oonp-rich-text td {
    font-size: 16px;
    line-height: 1.68;
  }

  .oonp-rich-text ul,
  .oonp-rich-text ol {
    padding-left: 22px;
  }

  .oonp-rich-text blockquote {
    padding: 20px;
  }

  .oonp-rich-text blockquote p {
    font-size: 22px;
  }

  .oonp-content-table table {
    min-width: 0;
  }

  .oonp-content-table thead {
    display: none;
  }

  .oonp-content-table tbody,
  .oonp-content-table tr,
  .oonp-content-table td {
    display: block;
  }

  .oonp-content-table tr {
    border-top: 1px solid var(--oonp-line);
  }

  .oonp-content-table td {
    display: grid;
    grid-template-columns: minmax(96px, .42fr) minmax(0, 1fr);
    gap: 12px;
    border-top: 0;
    padding: 12px 16px;
  }

  .oonp-content-table td::before {
    content: attr(data-label);
    color: var(--oonp-muted);
    font-family: var(--oonp-font-head);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
  }

  .oonp-text-cta {
    grid-template-columns: 1fr;
  }

  .oonp-text-cta a {
    grid-row: auto;
    width: 100%;
  }

  .oonp-pullquote {
    padding: 24px;
  }

  .oonp-band {
    min-height: 360px;
  }

  .oonp-band>div {
    padding: 44px 16px;
  }

  .oonp-map-placeholder {
    min-height: 220px;
  }

  .oonp-inline-offer,
  .oonp-cta-line {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .oonp-inline-offer a {
    justify-content: center;
    width: 100%;
  }

  .oonp-hours-card dl div,
  .oonp-vehicle-card dl div {
    grid-template-columns: 1fr;
  }

  .oonp-hours-card dl div {
    display: grid;
  }

  .oonp-hours-card dd {
    text-align: left;
  }

  .oonp-city-cluster {
    align-content: start;
  }

  .oonp-city-cluster a {
    width: 100%;
    justify-content: flex-start;
  }

}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =====================================================================
   ============================================================
   OON PAGE COMPONENTS (oonp-*) — model-page system
   ============================================================
   Wrap any production page content in <div class="oonp"> so these
   styles apply. Components use the .oonp-* prefix and share the
   --oonp-* variable scale defined in the wrapper. Utility classes
   (.white, .red, .black, .bg-*) are scoped under .oonp so they
   never collide with whatever .white or .red classes the WP theme
   or other plugins might define.

   Migrated from the 2025 Armada test page (v2). Ready to be reused
   on any model/landing page that wraps content in .oonp.

   Sections inside this block:
     1. CSS variables on the .oonp wrapper
     2. Base resets + typography
     3. Layout (container, kicker, actions, btn variants)
     4. Sections: photo-hero, proof-strip, whatsnew-grid, vs-table,
        stats, specs-table, features-grid, spotlight, split,
        trims-grid + trim-card, why-grid + why-card,
        offers-grid + offer-card, inventory-banner, faq, final-cta
     5. Responsive @media rules
     6. Defensive overrides (heading colors, kicker contrast,
        button protection, hover-state fixes, trim card typography)
     7. Color utility classes (.white, .red, .black, .bg-*)
   ===================================================================== */

/* Google Fonts @import removed 2026-06-13 (RMP compliance) — fonts come from the Nissan-approved token stack. */

.oonp {
  --oonp-red: #c3002f;
  --oonp-red-dark: #930024;
  --oonp-red-soft: #fff0f3;
  --oonp-ink: #161616;
  --oonp-ink-2: #2b2b2b;
  --oonp-text: #334155;
  --oonp-muted: #64748b;
  --oonp-line: #e5e7eb;
  /* --oonp-warm-line was a warm-beige line tone (#eae8e3). Aliased to the
     neutral --oonp-line so any remaining references still resolve. */
  --oonp-warm-line: var(--oonp-line);
  --oonp-paper: #ffffff;
  /* Soft surface tones — inherit the cool slate-grey defaults from :root
     instead of overriding with beige (#f6f5f1 / #fbfaf7). Cool greys pair
     better with the cool Nissan red (#c3002f) and stay neutral against
     vehicle photography of any color temperature. */
  --oonp-soft: #f3f4f6;
  --oonp-soft-2: #f8fafc;
  --oonp-navy: #193a5a;
  --oonp-font-head: "Nissan Brand", Arial, Helvetica, Verdana, sans-serif;
  --oonp-font-body: "Nissan Brand", Arial, Helvetica, Verdana, sans-serif;
  --oonp-container: 1180px;
  --oonp-radius: 8px;
  --oonp-radius-lg: 12px;
  --oonp-shadow: 0 18px 50px rgba(15, 23, 42, .16);
  --oonp-shadow-soft: 0 8px 24px rgba(15, 23, 42, .09);

  background: var(--oonp-paper);
  color: var(--oonp-text);
  font-family: var(--oonp-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.oonp *,
.oonp *::before,
.oonp *::after {
  box-sizing: border-box;
}

.oonp img {
  display: block;
  max-width: 100%;
}

.oonp a {
  color: inherit;
  text-decoration: none;
}

/* WordPress theme defensive reset.
   Wrapped in `:where()` so it has zero specificity — every component-level
   margin rule (e.g. .oonp-model-hero__copy p { margin-top: 26px }) can
   override this baseline without an !important arms race. The reason this
   reset exists at all is to neutralize the theme's default margins on
   headings/paragraphs/lists; we still want our components to set their own
   intentional spacing. */
:where(.oonp p,
  .oonp h1,
  .oonp h2,
  .oonp h3,
  .oonp h4,
  .oonp dl,
  .oonp dd,
  .oonp ul) {
  margin: 0;
}

:where(.oonp ul) {
  padding: 0;
  list-style: none;
}

.oonp-container {
  width: 100%;
  max-width: var(--oonp-container);
  padding-inline: 24px;
  margin-inline: auto;
}

.oonp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--oonp-red);
  font-family: var(--oonp-font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  line-height: 1.35;
  text-transform: uppercase;
}

.oonp-kicker::before {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* ===== HERO ===== */

.oonp-hero {
  position: relative;
  min-height: 620px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--oonp-ink);
  color: #fff;
}

.oonp-hero__media,
.oonp-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.oonp-hero__media {
  object-fit: cover;
  object-position: center;
  filter: saturate(.95);
}

.oonp-hero__shade {
  background:
    linear-gradient(90deg, rgba(12, 12, 12, .92) 0%, rgba(12, 12, 12, .80) 42%, rgba(12, 12, 12, .45) 100%),
    linear-gradient(0deg, rgba(12, 12, 12, .2), rgba(12, 12, 12, .2));
}

.oonp-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 400px);
  align-items: center;
  gap: 52px;
  padding-block: 80px;
}

.oonp .oonp-hero .oonp-kicker {
  color: #ff9caf;
}

.oonp-hero h1 {
  max-width: 720px;
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800;
  line-height: 1.05;
}

.oonp-hero p {
  max-width: 600px;
  margin-top: 22px;
  color: rgba(255, 255, 255, .80);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
}

.oonp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Row of buttons centred in the block (CTA sections). */
.oonp-actions--center {
  justify-content: center;
}

/* Section intro text at full container width (by default it is capped at a
   comfortable reading measure). */
.oonp .oonp-section-head--full {
  max-width: none;
}

.oonp .oonp-section-head--full p {
  max-width: none;
}

.oonp-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-family: var(--oonp-font-head);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  cursor: pointer;
}

.oonp-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--oonp-shadow-soft);
}

.oonp-btn--primary {
  background: linear-gradient(180deg, #cf234b, var(--oonp-red));
  border-color: var(--oonp-red);
  color: #fff;
}

.oonp-btn--ghost {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}

.oonp-btn--light {
  background: #fff;
  border-color: var(--oonp-line);
  color: var(--oonp-ink);
}

.oonp-btn--white {
  background: #fff;
  border-color: #fff;
  color: var(--oonp-red);
}

.oonp-intent-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--oonp-radius-lg);
  background: rgba(255, 255, 255, .09);
  box-shadow: var(--oonp-shadow);
  backdrop-filter: blur(18px);
}

.oonp-intent-card a {
  display: grid;
  gap: 2px;
  min-height: 72px;
  padding: 16px;
  border-radius: var(--oonp-radius);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background .2s ease, color .2s ease;
}

.oonp-intent-card a:hover {
  background: #fff;
  color: var(--oonp-ink);
}

.oonp-intent-card strong {
  font-family: var(--oonp-font-head);
  font-size: 16px;
}

.oonp-intent-card span {
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
}

.oonp-intent-card a:hover span {
  color: var(--oonp-muted);
}

/* ===== SPOTLIGHT (manufacturer-style feature hero) =====
   Full-width image background with vehicle on the right of the photo.
   Dark gradient on the left makes overlay text readable.
   CTAs anchored to the bottom of the section via flex margin-top: auto. */

.oonp-spotlight {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 580px;
  overflow: hidden;
  background: var(--oonp-ink);
  color: #fff;
}

.oonp-spotlight__media,
.oonp-spotlight__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.oonp-spotlight__media {
  object-fit: cover;
  /* Pin the right edge of the image to the right edge of the container.
     As the viewport narrows, cropping happens from the LEFT, so the vehicle
     (which is on the right side of the photo) stays visible at every width. */
  object-position: right center;
  filter: saturate(.95);
}

.oonp-spotlight__shade {
  background:
    linear-gradient(90deg, rgba(12, 12, 12, .92) 0%, rgba(12, 12, 12, .65) 45%, rgba(12, 12, 12, .15) 100%),
    linear-gradient(0deg, rgba(12, 12, 12, .25), rgba(12, 12, 12, .25));
}

.oonp-spotlight__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-block: 80px;
}

.oonp-spotlight__copy {
  max-width: 620px;
}

.oonp-spotlight h2 {
  margin: 0;
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.5px;
}

.oonp-spotlight p {
  margin-top: 22px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  max-width: 580px;
}

/* CTAs glued to the bottom of the section regardless of copy length */

.oonp-spotlight__actions {
  margin-top: auto;
  padding-top: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 768px) {
  .oonp-spotlight {
    min-height: 520px;
  }

  .oonp-spotlight__inner {
    padding-block: 56px;
  }

  .oonp-spotlight__shade {
    background: linear-gradient(180deg,
        rgba(12, 12, 12, .55) 0%,
        rgba(12, 12, 12, .85) 60%,
        rgba(12, 12, 12, .92) 100%);
  }

  /* On mobile the gradient flips vertical — center the vehicle in frame instead
     of pinning to the right, so the whole car is visible above the dark band. */
  .oonp-spotlight__media {
    object-position: center 30%;
  }

  .oonp-spotlight__actions {
    padding-top: 32px;
  }
}

/* ===== FULL BACKGROUND MODEL HERO =====
   Replaces the standard hero in v2. Full-width background image with the
   vehicle pinned to the right, dark gradient on the left for legibility,
   text overlay on the left, and a semi-transparent white "dock" anchored
   to the bottom of the section that carries the brand label + CTAs.
   Adapted from oon-master-execution.html's .oe-model-photo-hero. */

.oonp-photo-hero {
  position: relative;
  min-height: 720px;
  display: grid;
  align-items: stretch;
  overflow: hidden;
  background: #111827;
  color: #fff;
}

.oonp-photo-hero__image,
.oonp-photo-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.oonp-photo-hero__image {
  object-fit: cover;
  /* Pin the vehicle to the right so it stays visible at every viewport width.
     58% lets a bit of the image's left environment show through on wide screens;
     responsive override below shifts it harder right on smaller screens. */
  object-position: 58% center;
  filter: saturate(1.02) contrast(1.04);
}

.oonp-photo-hero__shade {
  background:
    linear-gradient(90deg, rgba(8, 12, 20, .82) 0%, rgba(8, 12, 20, .62) 32%, rgba(8, 12, 20, .14) 54%, rgba(8, 12, 20, 0) 100%),
    linear-gradient(180deg, rgba(8, 12, 20, .18) 0%, rgba(8, 12, 20, .02) 48%, rgba(8, 12, 20, .34) 100%);
}

.oonp-photo-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  min-height: 580px;
  /* Top padding holds the copy near the top half. Bottom padding leaves space
     for the dock bar (which is absolutely positioned over the bottom edge). */
  padding-block: 72px 130px;
}

.oonp-photo-hero__copy {
  width: min(100%, 540px);
}

.oonp-photo-hero h1 {
  margin: 0;
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: clamp(40px, 5.2vw, 68px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.5px;
  text-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}

.oonp-photo-hero p {
  max-width: 500px;
  margin-top: 26px;
  color: rgba(255, 255, 255, .85);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
}

/* Bottom dock — semi-transparent white bar with brand label + CTAs */

.oonp-photo-hero__dock {
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid rgba(226, 232, 240, .86);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 -18px 44px rgba(15, 23, 42, .08);
  backdrop-filter: blur(8px);
}

.oonp-photo-hero__dock-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-block: 18px;
}

.oonp-photo-hero__dock-label strong,
.oonp-photo-hero__dock-label span {
  display: block;
}

.oonp-photo-hero__dock-label strong {
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 16px;
  font-weight: 800;
}

.oonp-photo-hero__dock-label span {
  margin-top: 3px;
  color: var(--oonp-muted);
  font-size: 14px;
}

.oonp-photo-hero__dock .oonp-actions {
  margin-top: 0;
  flex-wrap: nowrap;
}

@media (max-width: 1024px) {
  .oonp-photo-hero {
    min-height: 660px;
  }

  .oonp-photo-hero__image {
    object-position: 70% center;
  }

  .oonp-photo-hero__inner {
    padding-block: 56px 150px;
  }
}

@media (max-width: 640px) {
  .page-template-page-oon-html .all-cars-list-arch .col-xs-6:has(.card-proposed){
  width: 100%;
}

  .oonp-photo-hero {
    min-height: 620px;
  }

  .oonp-photo-hero__image {
    object-position: 78% center;
    filter: brightness(1.05) saturate(1.05);
  }

  .oonp-photo-hero__shade {
    background:
      linear-gradient(180deg, rgba(8, 12, 20, .72) 0%, rgba(8, 12, 20, .42) 46%, rgba(8, 12, 20, .58) 100%),
      linear-gradient(90deg, rgba(8, 12, 20, .65) 0%, rgba(8, 12, 20, .15) 72%, rgba(8, 12, 20, 0) 100%);
  }

  .oonp-photo-hero__inner {
    padding-block: 44px 128px;
  }

  .oonp-photo-hero h1 {
    font-size: clamp(32px, 9vw, 42px);
  }

  .oonp-photo-hero p {
    font-size: 16px;
  }

  .oonp-photo-hero__dock {
    position: relative;
  }

  .oonp-photo-hero__dock-inner {
    flex-direction: column;
    align-items: flex-start;
    padding-block: 16px;
  }

  .oonp-photo-hero__dock .oonp-actions {
    width: 100%;
  }

  .oonp-photo-hero__dock .oonp-btn {
    flex: 1;
  }
}

/* ===== PROOF STRIP ===== */

.oonp-proof-strip {
  background: var(--oonp-ink);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.oonp-proof-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.oonp-proof-strip__inner--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.oonp-proof-strip__inner>div {
  padding: 22px 24px;
  border-left: 1px solid rgba(255, 255, 255, .1);
}

.oonp-proof-strip__inner>div:last-child {
  border-right: 1px solid rgba(255, 255, 255, .1);
}

.oonp-proof-strip__inner--five>div:first-child strong {
  color: #ffd1da;
}

.oonp-proof-strip strong,
.oonp-proof-strip span {
  display: block;
}

.oonp-proof-strip strong {
  font-family: var(--oonp-font-head);
  font-size: 14px;
}

.oonp-proof-strip span {
  margin-top: 4px;
  color: rgba(255, 255, 255, .65);
  font-size: 13px;
}

/* ===== SECTIONS ===== */

.oonp-section {
  padding-block: 80px;
  background: var(--oonp-paper);
}

.oonp-section--light {
  background: var(--oonp-soft-2);
  border-block: 1px solid var(--oonp-warm-line);
}

.oonp-section--ink {
  background: var(--oonp-ink);
  color: #fff;
}

.oonp-section--ink h2,
.oonp-section--ink h3 {
  color: #fff;
}

.oonp-section--ink p {
  color: rgba(255, 255, 255, .78);
}

/* ===========================================================================
   UNIVERSAL HEADING → SIBLING SPACING
   ---------------------------------------------------------------------------
   Catches every pattern that puts a heading directly above a paragraph/list/
   action without its own component-level spacing rule. Examples:
   .oonp-info-card, .oonp-promo-block, .oonp-split text column,
   .oonp-rich-text, .oonp-article, .oonp-info-card--lg, .oonp-faq-ask, etc.

   Specificity is intentionally low (uses `:where()`) so component-specific
   rules (e.g. .oonp-info-card p { margin-top: 10px }) always win. */
/* Demo swatch used in the color-utilities showcase — a small inline-block
   pill that can host any .oonp-section--* background to demonstrate text
   contrast against ink/red/white. */
.oonp-swatch {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
}

:where(.oonp) :where(h1, h2)+ :where(p, ul, ol, dl, table, .oonp-actions) {
  margin-top: 20px;
}

:where(.oonp) :where(h3, h4)+ :where(p, ul, ol, dl, table, .oonp-actions) {
  margin-top: 18px;
}

:where(.oonp) :where(p, ul, ol, dl, table)+ :where(p, ul, ol, dl, table) {
  margin-top: 12px;
}

:where(.oonp) :where(p, ul, ol, dl)+ :where(.oonp-actions, .oonp-btn, a.oonp-btn) {
  margin-top: 24px;
}

:where(.oonp) :where(.oonp-kicker)+ :where(h1, h2) {
  margin-top: 0;
}

:where(.oonp) :where(.oonp-kicker)+ :where(h3, h4) {
  margin-top: 0;
}

/* ========================================================================= */

.oonp-section-head {
  max-width: 760px;
  margin-bottom: 38px;
}

.oonp-section-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  align-items: end;
  gap: 32px;
}

.oonp-section h2 {
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.15;
}

.oonp-section h3 {
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  line-height: 1.2;
}

.oonp-section h4 {
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

.oonp-section-head p {
  margin-top: 20px;
  color: var(--oonp-text);
  font-size: 17px;
  line-height: 1.55;
}

/* ===== WHAT'S NEW: 3-card grid ===== */

.oonp-whatsnew-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.oonp-whatsnew-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius-lg);
  background: #fff;
  box-shadow: var(--oonp-shadow-soft);
  overflow: hidden;
}

.oonp-whatsnew-card>img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.oonp-whatsnew-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 28px;
}

.oonp-whatsnew-card .oonp-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--oonp-red-soft);
  color: var(--oonp-red);
  font-family: var(--oonp-font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Vertical rhythm — same scale as .oonp-service-panel. tag→h3 (14px),
   h3→p (12px), p→ul (20px). */
.oonp-whatsnew-card .oonp-tag {
  margin-bottom: 14px;
}

.oonp-whatsnew-card h3 {
  margin: 0;
}

.oonp-whatsnew-card p {
  margin-top: 12px;
  color: var(--oonp-text);
}

.oonp-whatsnew-card ul {
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.oonp-whatsnew-card li {
  position: relative;
  padding-left: 24px;
  color: var(--oonp-text);
  font-size: 15px;
  line-height: 1.5;
}

/* Round red-donut bullet — `top: 0.75em` = half of line-height: 1.5, centering bullet on first-line middle. */
.oonp-whatsnew-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--oonp-red);
  box-shadow: inset 0 0 0 3.5px #fff, 0 0 0 1px var(--oonp-red);
}

/* ===== COMPARISON TABLE: 2025 vs 2024 ===== */

.oonp-vs-wrap {
  margin-top: 28px;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--oonp-shadow-soft);
}

.oonp-vs-table {
  width: 100%;
  border-collapse: collapse;
}

.oonp-vs-table th,
.oonp-vs-table td {
  padding: 16px 22px;
  text-align: left;
  border-bottom: 1px solid var(--oonp-line);
  vertical-align: top;
  z-index: 10;
  position: relative;
}

.oonp-vs-table thead th {
  background: var(--oonp-ink);
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.oonp-vs-table thead th:first-child {
  background: var(--oonp-ink-2);
  color: rgba(255, 255, 255, .68);
}

.oonp-vs-table tbody th {
  width: 30%;
  background: var(--oonp-soft-2);
  color: var(--oonp-muted);
  font-family: var(--oonp-font-head);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.oonp-vs-table td {
  color: var(--oonp-text);
  font-size: 16px;
}

/* The 2025 column was previously highlighted with a soft red tint to flag
   what's new vs the 2024 model. Per design feedback, we now keep all cells
   on the same neutral background and convey the "this is the upgrade" signal
   with bold weight + dark ink only — quieter, more confident. */

.oonp-vs-table td.oonp-vs-new {
  font-weight: 700;
  color: var(--oonp-ink);
}

.oonp-vs-table tr:last-child th,
.oonp-vs-table tr:last-child td {
  border-bottom: 0;
}

/* ===== FULL SPECS TABLE =====
   Lives alongside the 2024 vs 2025 comparison so spec tables share a
   visual language. Uses dark thead, red-accented group headers, alternating
   borders, and a centered note at the bottom for disclaimer copy. */

.oonp-specs-wrap {
  margin-top: 36px;
  background: var(--oonp-paper);
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius-lg);
  box-shadow: var(--oonp-shadow-soft);
  overflow: hidden;
}

.oonp-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-family: var(--oonp-font-body);
}

.oonp-specs-table thead th {
  padding: 18px 22px;
  background: var(--oonp-ink);
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: left;
}

.oonp-specs-table thead th:nth-child(2),
.oonp-specs-table thead th:nth-child(3) {
  width: 22%;
  text-align: center;
}

/* Section header row (e.g. "Powertrain & Performance") — uses kicker red */

.oonp-specs-table .oonp-specs-group-head th {
  padding: 14px 22px;
  background: var(--oonp-soft);
  color: var(--oonp-red);
  font-family: var(--oonp-font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: left;
  border-top: 1px solid var(--oonp-line);
  border-bottom: 1px solid var(--oonp-line);
}

.oonp-specs-table tbody tr:not(.oonp-specs-group-head) {
  border-bottom: 1px solid var(--oonp-line);
}

.oonp-specs-table tbody tr:last-child {
  border-bottom: none;
}

.oonp-specs-table tbody th[scope="row"] {
  padding: 14px 22px;
  color: var(--oonp-ink);
  font-family: var(--oonp-font-body);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.oonp-specs-table tbody td {
  padding: 14px 22px;
  color: var(--oonp-text);
  font-size: 15px;
  text-align: center;
}

.oonp-specs-table tbody tr:not(.oonp-specs-group-head):hover {
  background: var(--oonp-soft-2);
}

.oonp-specs-na {
  color: var(--oonp-muted);
  font-style: italic;
}

@media (max-width: 720px) {
  .oonp-specs-table {
    font-size: 14px;
  }

  .oonp-specs-table thead th,
  .oonp-specs-table tbody th[scope="row"],
  .oonp-specs-table tbody td,
  .oonp-specs-table .oonp-specs-group-head th {
    padding: 12px 14px;
  }

  .oonp-specs-table thead th:nth-child(2),
  .oonp-specs-table thead th:nth-child(3) {
    width: auto;
  }
}

/* ===== STATS SECTION ===== */

.oonp-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-block: 1px solid rgba(255, 255, 255, .12);
}

.oonp-stats>div {
  padding: 36px 24px;
  border-left: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
}

.oonp-stats>div:first-child {
  border-left: 0;
}

.oonp-stats strong {
  display: block;
  font-family: var(--oonp-font-head);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -1px;
}

.oonp-stats span {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
  font-family: var(--oonp-font-head);
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* ===== INSIDE THE ARMADA: 3-feature image grid ===== */

.oonp-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* `.oonp-whatsnew-card--compact` — feature-tile variant of the whatsnew
   card. Replaces the deprecated `.oonp-feature-card`. Use when the card
   is "image + title + paragraph" (no tag, no bullet list) and the photo
   reads better in 4:3 than 16:9. Card body uses tighter padding (24px). */
.oonp-whatsnew-card--compact > img {
  aspect-ratio: 4 / 3;
}

.oonp-whatsnew-card--compact .oonp-whatsnew-card__body {
  padding: 24px;
}

.oonp-whatsnew-card--compact h3 {
  font-size: 20px;
  line-height: 1.25;
}

.oonp-whatsnew-card--compact p {
  font-size: 15px;
}

/* ===== WHY CHICAGO: split section ===== */

.oonp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}

.oonp-split__media img {
  width: 100%;
  height: auto;
  border-radius: var(--oonp-radius-lg);
  box-shadow: var(--oonp-shadow);
}

.oonp-split p {
  margin-top: 20px;
  color: var(--oonp-text);
  font-size: 17px;
}

.oonp-split__list {
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  list-style: none;
}

.oonp-split__list li {
  position: relative;
  padding-left: 28px;
  color: var(--oonp-text);
  font-size: 17px;
  line-height: 1.55;
}

/* Round red-donut bullet — same alignment rule as .oonp-checklist.
   `top: 0.775em` = half of line-height: 1.55, centering bullet on first-line middle. */
.oonp-split__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.775em;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--oonp-red);
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px var(--oonp-red);
}

/* ===== TRIM SHOWCASE =====
   Drivetrain-toggle UI was removed; each trim card now shows both 4×2 and
   4×4 prices in a single .oonp-trims-grid. */

.oonp-trims-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* 3-on-top, 2-below-centered for the 4×4 block (5 cards total) */

.oonp-trims-grid--five {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.oonp-trims-grid--five>.oonp-trim-card {
  grid-column: span 2;
}

.oonp-trims-grid--five>.oonp-trim-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.oonp-trims-grid--five>.oonp-trim-card:nth-child(5) {
  grid-column: 4 / span 2;
}

/* 6-trim layout — 3 across × 2 rows on desktop. Inherits the base
   .oonp-trims-grid media rules (2-up at ≤980px, 1-up at ≤640px). Use for
   models with a full six-grade lineup (e.g. Rogue: S, SV, Dark Armor,
   Rock Creek, SL, Platinum). */
.oonp-trims-grid--six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.oonp-trims-grid--two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oonp-trim-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--oonp-shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}

.oonp-trim-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--oonp-shadow);
}

.oonp-trim-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
}

.oonp-trim-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 28px 26px;
  gap: 22px;
}

/* Header (name + tagline) — gives each trim a personality without badges. */

.oonp-trim-card__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oonp-trim-card__name {
  margin: 0;
  font-family: var(--oonp-font-head);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--oonp-ink);
  letter-spacing: -0.3px;
}

.oonp-trim-card__tagline {
  margin: 0;
  color: var(--oonp-muted);
  font-family: var(--oonp-font-head);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.2px;
}

/* Dual-drivetrain price block — 4×2 + 4×4 prices stacked. Subtle divider.
   Topped with a "STARTING MSRP" label that makes clear these are starting
   prices, not finals. Final transaction prices vary by configuration, dealer
   fees, incentives, and the rest of the standard footnote material. */

.oonp-trim-card__prices {
  display: grid;
  gap: 0;
  padding: 4px 18px 12px;
  border-radius: 8px;
  background: var(--oonp-soft-2);
  border: 1px solid var(--oonp-line);
}

.oonp-trim-card__prices::before {
  content: "Starting MSRP";
  display: block;
  padding-top: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--oonp-line);
  color: var(--oonp-muted);
  font-family: var(--oonp-font-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  line-height: 1.2;
}

.oonp-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  min-height: 32px;
}

.oonp-price-row+.oonp-price-row {
  border-top: 1px solid var(--oonp-line);
}

.oonp-price-row__drive {
  color: var(--oonp-muted);
  font-family: var(--oonp-font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.oonp-price-row__amount {
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  letter-spacing: -0.2px;
}

.oonp-price-row--note {
  justify-content: flex-start;
}

.oonp-price-row--note span {
  color: var(--oonp-muted);
  font-size: 12px;
  font-style: italic;
  font-family: var(--oonp-font-body);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  line-height: 1.4;
}

/* Features block — wraps the list with a small label above and inheritance below */

.oonp-trim-card__features-block {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.oonp-trim-card__features-label {
  margin: 0 0 14px;
  color: var(--oonp-muted);
  font-family: var(--oonp-font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.oonp-trim-card__inheritance {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--oonp-line);
  color: var(--oonp-muted);
  font-size: 13px;
  font-style: italic;
  line-height: 1.4;
}

/* ===== UNIFIED DISCLAIMER =====
   Single class for ALL legal/footnote text on the page. Use on the trims
   section, offers section, specs section, or anywhere else that needs a
   small italic muted "fine print" note. Edits to this rule apply
   everywhere — no more per-section disclaimer classes to keep in sync.

   Selector is scoped under `.oonp` (0,2,0) to beat the base
   `.oonp p { margin: 0 }` reset (0,1,1). */

.oonp .oonp-disclaimer {
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  max-width: 880px;
  color: var(--oonp-muted);
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  text-align: center;
}

/* Underlined links inside any disclaimer (tel: links etc.) */

.oonp .oonp-disclaimer a {
  color: inherit;
  text-decoration: underline;
}

/* Context override — when the disclaimer is nested INSIDE the specs
   table wrapper, it becomes an inset table footer instead of a standalone
   note. No top margin, gets padding + a top divider + soft background. */

.oonp .oonp-specs-wrap .oonp-disclaimer {
  margin: 0;
  max-width: none;
  padding: 16px 22px;
  background: var(--oonp-soft);
  border-top: 1px solid var(--oonp-line);
}

/* Features list — generous spacing, fills available space so CTA sits at the
   bottom of every card regardless of feature count. */

.oonp-trim-card__features {
  flex: 1 1 auto;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 0;
  list-style: none;
}

.oonp-trim-card__features li {
  position: relative;
  padding-left: 24px;
  color: var(--oonp-text);
  font-size: 15px;
  line-height: 1.5;
}

/* Trim-card features keep the ✓ glyph (Armada original).
   Anchored via line-height: 1 + top: 0 + center align with first text line. */
.oonp-trim-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  line-height: inherit;
  color: var(--oonp-red);
  font-weight: 800;
}

.oonp-trim-card__cta {
  padding-top: 18px;
  border-top: 1px solid var(--oonp-line);
}

.oonp-trim-card__cta .oonp-btn {
  width: 100%;
  min-height: 42px;
  font-size: 13px;
  padding: 0 16px;
}

/* ===== WHY OON ===== */

.oonp-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.oonp-info-card {
  padding: 26px;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius-lg);
  background: #fff;
}

.oonp-info-card__num {
  font-family: var(--oonp-font-head);
  font-size: 28px;
  font-weight: 800;
  color: var(--oonp-red);
}

.oonp-info-card h4 {
  margin-top: 4px;
  font-size: 18px;
}

.oonp-section .oonp-info-card .oonp-info-card__headline{
  margin-top: 4px;
  font-size: 18px;
  font-family: var(--oonp-font-head);
  text-transform: none;
  letter-spacing: 0;
  color: var(--oonp-ink);
  font-weight: 800;
  line-height: 1.25;
  font-style: normal;
  margin-bottom: 10px;
}

.oonp-info-card p {
  margin-top: 10px;
  color: var(--oonp-text);
  font-size: 15px;
}

/* ===== OFFERS / INCENTIVES =====
   Lease + finance, side-by-side cards. No left-edge accent — the cards
   carry their identity through the kicker + title + red checkmarks + CTA.
   Generous internal vertical rhythm so the kicker, title, lead, list, and
   button each have their own breathing room. Cards are equal-height via
   flex; CTAs anchor to the bottom regardless of list length. */

.oonp-offers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 36px;
  align-items: stretch;
}

/* --triple modifier — 3-up grid for offer variant showcases
   (default / quiet / dark). Used on pages that need to communicate
   visual hierarchy options, not just lease vs. finance. */
.oonp-offers-grid--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.oonp-offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Generous padding gives the typography room to breathe.
     Bottom is intentionally tighter (the CTA already has its own visual weight). */
  padding: 44px 40px 40px;
  background: var(--oonp-paper);
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius-lg);
  box-shadow: var(--oonp-shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}

.oonp-offer-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--oonp-shadow);
}

/* Color variants — placed after the base rule so they win the cascade. */
.oonp-offer-card.oonp-offer-card--quiet {
  background: var(--oonp-soft-2);
}

.oonp-offer-card.oonp-offer-card--dark {
  background: var(--oonp-ink);
  border-color: var(--oonp-ink);
  color: #fff;
}

.oonp .oonp-offer-card--dark h3,
.oonp .oonp-offer-card--dark .oonp-offer-card__title,
.oonp .oonp-offer-card--dark p,
.oonp .oonp-offer-card--dark .oonp-offer-card__lead {
  color: #fff;
}

.oonp .oonp-offer-card--dark .oonp-kicker {
  color: #ffd0db;
}

.oonp .oonp-offer-card--dark .oonp-kicker::before {
  background: #ffd0db;
}

/* Kicker → title: a tight pair (small gap) */

.oonp-offer-card .oonp-kicker {
  margin-bottom: 16px;
}

.oonp-offer-card__title {
  margin: 0 0 20px;
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.3px;
}

/* Title → lead → list: medium → larger gap (clear separator before the list) */

.oonp-offer-card__lead {
  margin: 0 0 32px;
  color: var(--oonp-text);
  font-size: 16px;
  line-height: 1.6;
}

.oonp-offer-card__list {
  display: grid;
  gap: 16px;
  /* List → CTA: handled by `margin-top: auto` on .oonp-offer-card__cta,
     so the CTA pins to the bottom regardless of list length. */
  margin: 0 0 36px;
  list-style: none;
  padding: 0;
}

.oonp-offer-card__list li {
  position: relative;
  padding-left: 30px;
  color: var(--oonp-ink-2);
  font-size: 15.5px;
  line-height: 1.55;
}

/* Custom red checkmark — drawn as a corner of two borders, rotated 45°.
   Positioned to sit visually centered with the first line of text. */

.oonp-offer-card__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--oonp-red);
  border-bottom: 2px solid var(--oonp-red);
  transform: rotate(-45deg);
}

.oonp-offer-card__cta {
  margin-top: auto;
  padding-top: 8px;
  /* small extra breathing room above the CTA */
}

.oonp-offer-card__cta .oonp-btn {
  width: 100%;
  min-height: 52px;
  /* a touch taller, feels more confident at full width */
}

@media (max-width: 980px) {
  .oonp-offers-grid--triple {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 950px) {
  .page-template-page-oon-html .card-proposed .bolt {
    display: block;
 }
}

@media (max-width: 768px) {

  .oonp-offers-grid,
  .oonp-offers-grid--triple {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 28px;
  }

  .oonp-offer-card {
    padding: 34px 28px 28px;
  }

  .oonp-offer-card__title {
    font-size: 24px;
    margin-bottom: 16px;
  }

  .oonp-offer-card__lead {
    margin-bottom: 26px;
  }

  .oonp-offer-card__list {
    gap: 14px;
    margin-bottom: 28px;
  }

  .oonp-card-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Defensive overrides for the offer card — WP themes commonly
   reset margins on h3, p, ul, and li. These use the .oonp wrapper for
   higher specificity (0,2,1) which beats both our :where()-wrapped reset
   and most WP theme rules without needing !important. */

.oonp .oonp-offer-card__title {
  margin: 0 0 20px;
  font-size: 30px;
  line-height: 1.15;
  color: var(--oonp-ink);
}

.oonp .oonp-offer-card__lead {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.6;
}

.oonp .oonp-offer-card__list {
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.oonp .oonp-offer-card__list li {
  margin: 0;
  padding-left: 30px;
  list-style: none;
}

/* ===== INVENTORY CTA BANNER ===== */

.oonp-inventory-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--oonp-radius-lg);
  background: linear-gradient(135deg, var(--oonp-red), var(--oonp-red-dark));
  color: #fff;
}

.oonp-inventory-banner h3 {
  color: #fff;
  font-size: clamp(22px, 2.4vw, 32px);
}

.oonp-inventory-banner p {
  margin-top: 12px;
  color: rgba(255, 255, 255, .82);
  font-size: 17px;
}

.oonp-inventory-banner .oonp-actions {
  margin-top: 20px;
}

.oonp-inventory-banner .oonp-actions .oonp-btn--ghost {
  border-color: rgba(255, 255, 255, .5);
}

.oonp-inventory-banner__list {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: var(--oonp-radius);
  background: rgba(0, 0, 0, .18);
}

/* Each list item is now a clickable link with a trailing arrow.
   Hover lifts the background slightly so it reads as interactive. */

.oonp-inventory-banner__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--oonp-radius);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: inherit;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.oonp-inventory-banner__link:hover,
.oonp-inventory-banner__link:focus-visible {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .28);
  transform: translateX(2px);
  outline: none;
}

.oonp-inventory-banner__link:hover .oonp-inventory-banner__arrow,
.oonp-inventory-banner__link:focus-visible .oonp-inventory-banner__arrow {
  transform: translateX(3px);
  color: #fff;
}

.oonp-inventory-banner__link>div {
  min-width: 0;
}

.oonp-inventory-banner__list strong {
  display: block;
  font-family: var(--oonp-font-head);
  font-size: 16px;
  color: #fff;
  line-height: 1.25;
}

.oonp-inventory-banner__list span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  line-height: 1.4;
}

.oonp-inventory-banner__arrow {
  flex: 0 0 auto;
  font-family: var(--oonp-font-head);
  font-size: 22px;
  font-weight: 700;
  color: rgba(255, 255, 255, .65);
  line-height: 1;
  transition: transform .2s ease, color .2s ease;
}

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

.oonp-faq {
  display: grid;
  gap: 12px;
}

.oonp-faq details {
  padding: 18px 22px;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius);
  background: #fff;
}

.oonp-faq summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-family: var(--oonp-font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--oonp-ink);
  list-style: none;
}

.oonp-faq summary::-webkit-details-marker {
  display: none;
}

.oonp-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 22px;
  color: var(--oonp-red);
  transition: transform .2s ease;
}

.oonp-faq details[open] summary::after {
  content: "−";
}

.oonp-faq details p {
  margin-top: 14px;
  color: var(--oonp-text);
  font-size: 16px;
}

/* ===== FINAL CTA ===== */

.oonp-final-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  margin-top: var(--oonp-stack-xl);
  padding: clamp(36px, 5vw, 56px);
  border-radius: var(--oonp-radius-lg);
  overflow: hidden;
  color: #fff;
  /* Dealership interior photo (lounge/amenities) layered under a strong dark
     gradient. The image is mid-bright (avg luminance ~152), so we need a heavy
     overlay (top ~72%, bottom ~85%) to keep white text fully legible.
     Top-down gradient adds a touch of warmth where the headline sits. */
  background:
    linear-gradient(180deg, rgba(15, 18, 25, .78) 0%, rgba(15, 18, 25, .84) 45%, rgba(15, 18, 25, .88) 100%),
    url('https://www.oldorchardnissan.com/wp-content/uploads/amenities.webp') center / cover no-repeat;
}

/* Soft inner vignette keeps the corners darker — extra insurance for text legibility. */

.oonp-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse at 70% 100%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .35) 100%);
}

.oonp-final-cta>* {
  position: relative;
  z-index: 1;
}

.oonp-final-cta h2 {
  color: #fff;
  font-size: clamp(26px, 3vw, 38px);
}

.oonp-final-cta p {
  margin-top: 14px;
  color: rgba(255, 255, 255, .78);
  font-size: 17px;
}

.oonp-final-cta__details {
  display: grid;
  gap: 14px;
}

.oonp-final-cta__details a,
.oonp-final-cta__details>div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--oonp-radius);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font-family: var(--oonp-font-head);
  font-weight: 700;
}

.oonp-final-cta__details a:hover {
  background: #fff;
  color: var(--oonp-ink);
}

.oonp-final-cta__details span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.oonp-final-cta__details strong {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  color: inherit;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1024px) {
  .oonp-hero__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-block: 64px;
  }

  .oonp-section-head--split {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .oonp-whatsnew-grid,
  .oonp-features-grid,
  .oonp-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .oonp-trims-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* On medium screens, drop the 6-col centering and just go 2-up */
  .oonp-trims-grid--five {
    grid-template-columns: repeat(2, 1fr);
  }

  .oonp-trims-grid--five>.oonp-trim-card,
  .oonp-trims-grid--five>.oonp-trim-card:nth-child(4),
  .oonp-trims-grid--five>.oonp-trim-card:nth-child(5) {
    grid-column: auto;
  }

  .oonp-stats {
    grid-template-columns: 1fr 1fr;
  }

  .oonp-stats>div:nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-left: 0;
  }

  .oonp-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .oonp-inventory-banner,
  .oonp-final-cta {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .oonp-proof-strip__inner,
  .oonp-proof-strip__inner--five {
    grid-template-columns: repeat(2, 1fr);
  }

  .oonp-proof-strip__inner>div:nth-child(n+3) {
    border-top: 1px solid rgba(255, 255, 255, .1);
  }

  .oonp-proof-strip__inner--five>div:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .oonp-section {
    padding-block: 56px;
  }

  .oonp-whatsnew-grid,
  .oonp-features-grid,
  .oonp-info-grid,
  .oonp-trims-grid,
  .oonp-trims-grid--five,
  .oonp-trims-grid--two{
    grid-template-columns: 1fr;
  }

  .oonp-stats {
    grid-template-columns: 1fr;
  }

  .oonp-stats>div {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }

  .oonp-stats>div:first-child {
    border-top: 0;
  }

  .oonp-proof-strip__inner,
  .oonp-proof-strip__inner--five {
    grid-template-columns: 1fr;
  }

  .oonp-proof-strip__inner>div {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }

  .oonp-proof-strip__inner>div:first-child {
    border-top: 0;
  }

  .oonp-vs-table {
    font-size: 14px;
  }

  .oonp-vs-table th,
  .oonp-vs-table td {
    padding: 12px 14px;
  }

  /* The 2024 vs 2025 comparison has three distinct columns and several long
     values ("Selectable 4WD with low range", "ProPILOT Assist 2.1...").
     Below 640px the table is wider than the viewport, so let it scroll
     horizontally inside the wrapper and pin a min-width so columns don't
     compress to unreadable widths. */
  .oonp-vs-wrap {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .oonp-vs-table {
    min-width: 560px;
  }

  /* Subtle gradient on the right edge hints that the table can scroll. */
  .oonp-vs-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85));
  }
}

/* ===== DEFENSIVE OVERRIDES =====
   Higher specificity (.oonp wrapper + class) wins against the WP theme.
   `text-decoration` keeps !important because the theme has
   `a:focus, a:hover { text-decoration: none !important }` — we want the
   same value but need to match the theme's force level so any future
   theme tweak doesn't put underlines back on our buttons. */

.oonp .oonp-btn {
  text-decoration: none !important;
  font-family: var(--oonp-font-head);
}

.oonp .oonp-btn.dealer-form-btn.m-3{
  margin: 15px;
}

.oonp .oonp-btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #cf234b, var(--oonp-red));
  border-color: var(--oonp-red);
}

.oonp .oonp-btn--white {
  color: var(--oonp-red);
  background: #fff;
  border-color: #fff;
}

.oonp .oonp-btn--ghost {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .35);
}

.oonp .oonp-btn--light {
  color: var(--oonp-ink);
  background: #fff;
  border-color: var(--oonp-line);
}

/* Dark sections — white text on all relevant elements. The .oonp wrapper
   gives 0,2,1+ specificity which beats anything in the cardealer/cardealer-
   child theme (verified — theme has no global h2/h3/p color rules). */

.oonp .oonp-hero,
.oonp .oonp-hero h1,
.oonp .oonp-hero p,
.oonp .oonp-photo-hero,
.oonp .oonp-photo-hero h1,
.oonp .oonp-proof-strip,
.oonp .oonp-proof-strip strong,
.oonp .oonp-section--ink,
.oonp .oonp-section--ink h2,
.oonp .oonp-section--ink h3,
.oonp .oonp-section--ink h4,
.oonp .oonp-stats strong,
.oonp .oonp-spotlight,
.oonp .oonp-spotlight h2,
.oonp .oonp-final-cta,
.oonp .oonp-final-cta h2,
.oonp .oonp-final-cta__details,
.oonp .oonp-final-cta__details a,
.oonp .oonp-final-cta__details strong,
.oonp .oonp-inventory-banner,
.oonp .oonp-inventory-banner h3,
.oonp .oonp-inventory-banner__list strong,
.oonp .oonp-intent-card strong {
  color: #fff;
}

.oonp .oonp-hero p,
.oonp .oonp-photo-hero p,
.oonp .oonp-proof-strip span,
.oonp .oonp-section--ink p,
.oonp .oonp-stats span,
.oonp .oonp-spotlight p,
.oonp .oonp-final-cta p,
.oonp .oonp-final-cta__details span,
.oonp .oonp-inventory-banner p,
.oonp .oonp-inventory-banner__list span,
.oonp .oonp-intent-card span {
  color: rgba(255, 255, 255, .82);
}

/* Light sections — dark text on all relevant elements.
   Wrapped in `:where()` so the selector matches but contributes ZERO
   specificity. That way more-specific rules (utility classes like .white,
   nested rules like .oonp-inventory-banner h3, etc.) easily override.
   Final specificity here is 0,0,1 (just the element). */

:where(.oonp .oonp-section:not(.oonp-section--ink)) h2,
:where(.oonp .oonp-section:not(.oonp-section--ink)) h3,
:where(.oonp .oonp-section:not(.oonp-section--ink)) h4,
:where(.oonp .oonp-trim-card) h4,
:where(.oonp .oonp-vs-table) td,
:where(.oonp .oonp-vs-table tbody) td.oonp-vs-new {
  color: var(--oonp-ink);
}

.oonp .oonp-section--ink h2,
.oonp .oonp-section--ink h3,
.oonp .oonp-section--ink h4 {
  color: #fff;
}

/* FAQ summary defensive */

.oonp .oonp-faq summary {
  color: var(--oonp-ink);
}

.oonp .oonp-faq details p {
  color: var(--oonp-text);
}

/* Hyperlinks within prose stay readable */

.oonp a {
  color: inherit;
}

/* Kicker contrast on dark/red backgrounds — pink kicker text reads on
   ink + on red. 0,3,0 specificity beats the base .oonp-kicker rule. */

.oonp .oonp-hero .oonp-kicker,
.oonp .oonp-photo-hero .oonp-kicker,
.oonp .oonp-section--ink .oonp-kicker,
.oonp .oonp-spotlight .oonp-kicker,
.oonp .oonp-final-cta .oonp-kicker {
  color: #ff9caf;
}

.oonp .oonp-inventory-banner .oonp-kicker {
  color: #ffe1e7;
}

/* The kicker's leading horizontal line uses currentColor — already inherits
   the new pink, so no separate background override needed. (Was forcing
   `background: currentColor !important` redundantly.) */

.oonp .oonp-hero .oonp-kicker::before,
.oonp .oonp-photo-hero .oonp-kicker::before,
.oonp .oonp-section--ink .oonp-kicker::before,
.oonp .oonp-spotlight .oonp-kicker::before,
.oonp .oonp-final-cta .oonp-kicker::before,
.oonp .oonp-inventory-banner .oonp-kicker::before {
  background: currentColor;
}

/* Intent-card hover — background flips white, text must flip dark */

.oonp .oonp-intent-card a:hover,
.oonp .oonp-intent-card a:focus-visible {
  background: #fff;
}

.oonp .oonp-intent-card a:hover strong,
.oonp .oonp-intent-card a:focus-visible strong {
  color: var(--oonp-ink);
}

.oonp .oonp-intent-card a:hover span,
.oonp .oonp-intent-card a:focus-visible span {
  color: var(--oonp-muted);
}

/* Final-CTA detail-link hover — same pattern */

.oonp .oonp-final-cta__details a:hover,
.oonp .oonp-final-cta__details a:focus-visible {
  background: #fff;
}

.oonp .oonp-final-cta__details a:hover,
.oonp .oonp-final-cta__details a:hover strong,
.oonp .oonp-final-cta__details a:focus-visible,
.oonp .oonp-final-cta__details a:focus-visible strong {
  color: var(--oonp-ink);
}

.oonp .oonp-final-cta__details a:hover span,
.oonp .oonp-final-cta__details a:focus-visible span {
  color: var(--oonp-muted);
}

/* ===== TRIM CARD — defensive typography =====
   These rules use the .oonp wrapper for higher specificity (0,2,1+) which
   beats the WP theme cascade naturally. No !important needed — verified
   against the live cardealer / cardealer-child theme CSS, which doesn't
   set generic h4/li/ul/strong typography globally. If the theme ever
   changes to be more aggressive, restore the !important flags from
   _snapshots/oon-master-execution.css.before-important-cleanup. */

.oonp .oonp-trim-card {
  background: #fff;
}

.oonp .oonp-trim-card__name {
  font-family: var(--oonp-font-head);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--oonp-ink);
  margin: 0;
  text-transform: none;
  letter-spacing: -0.3px;
}

.oonp .oonp-trim-card__tagline {
  font-family: var(--oonp-font-head);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--oonp-muted);
  margin: 0;
  text-transform: none;
  font-style: normal;
}

.oonp .oonp-trim-card__prices {
  background: var(--oonp-soft-2);
  border: 1px solid var(--oonp-line);
  border-radius: 8px;
}

.oonp .oonp-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
}

.oonp .oonp-price-row__drive {
  font-family: var(--oonp-font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--oonp-muted);
  line-height: 1.2;
}

.oonp .oonp-price-row__amount {
  font-family: var(--oonp-font-head);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: var(--oonp-ink);
  letter-spacing: -0.2px;
}

.oonp .oonp-price-row--note span {
  font-family: var(--oonp-font-body);
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  color: var(--oonp-muted);
  letter-spacing: 0;
  text-transform: none;
}

.oonp .oonp-trim-card__features-label {
  font-family: var(--oonp-font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--oonp-muted);
  margin: 0 0 14px;
}

.oonp .oonp-trim-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.oonp .oonp-trim-card__features li {
  font-family: var(--oonp-font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--oonp-text);
  padding-left: 24px;
  position: relative;
  list-style: none;
  margin: 0;
}

.oonp .oonp-trim-card__features li+li {
  margin-top: 12px;
}

.oonp .oonp-trim-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  line-height: inherit;
  color: var(--oonp-red);
  font-weight: 800;
}

.oonp .oonp-trim-card__inheritance {
  font-family: var(--oonp-font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--oonp-muted);
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--oonp-line);
  line-height: 1.4;
}

.oonp .oonp-trim-card__cta {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--oonp-line);
}

/* ===== OON PAGE — color utility classes =====
   Scoped under .oonp so they can't collide with theme/plugin classes.
   Apply via class names instead of inline styles:
       <h2 class="white">…</h2>
       <p class="bg-red">…</p>
       <span class="black">…</span>
   Multiple classes can stack on the same element.

   SPECIFICITY NOTE: each selector doubles the class (e.g. `.white.white`)
   so the rule scores 0,3,0 instead of 0,2,0. That's high enough to beat
   the section-level heading rules (`.oonp .oonp-section h2` = 0,2,1),
   so the utility wins on element-level headings. The double match still
   only requires class="white" on the element. */

.oonp .white.white {
  color: #ffffff !important;
}

.oonp .red.red {
  color: var(--oonp-red) !important;
}

/* The .red utility colours TEXT, but on theme buttons (.button.red) red is the
   fill: the rule above made the button text red on a red background. Buttons
   are excluded. */
.oonp .button.red.red,
.oonp button.red.red {
  color: #fff !important;
}

/* Find It For Me form heading - centred above the form (the form is 600px, centred). */
.oonp #oon-fifm-form-title {
  text-align: center;
  margin-bottom: 20px;
}

.oonp .black.black {
  color: var(--oonp-ink) !important;
}

.oonp .bg-white.bg-white {
  background-color: #ffffff !important;
}

.oonp .bg-red.bg-red {
  background-color: var(--oonp-red) !important;
}

.oonp .bg-black.bg-black {
  background-color: var(--oonp-ink) !important;
}

/* Tel-link styling for disclaimers now lives with the .oonp-disclaimer
   rule itself (single source of truth). These selectors stay as a
   compatibility shim for the deprecated .oonp-specs-note / .oonp-offers-note
   classes — remove them once all pages migrate to .oonp-disclaimer. */

.oonp .oonp-specs-note a,
.oonp .oonp-offers-note a {
  color: inherit;
  text-decoration: underline;
}

/* ===========================================================================
   PATTERNS PORTED FROM oon-master-page.html (catalog) — Phase A
   ===========================================================================
   These additions were lifted from the older `oo-*` catalog and re-implemented
   in the `oonp-*` system. Where an existing class already covered the use case
   we reused it; only genuinely new components got new class names.
   ========================================================================= */

/* ── SECTION HEAD: --center modifier ──────────────────────────────────────
   Centers the kicker, heading, and lead p inside a max-width: 720px column.
   Use for hub pages where a centered headline reads more like an editorial
   intro than a left-aligned section opener. */
.oonp-section-head--center {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.oonp-section-head--center .oonp-kicker {
  /* Kicker is inline-flex by default; center the flex item itself. */
  justify-content: center;
  margin-inline: auto;
}

/* ── FADE-UP scroll animation ─────────────────────────────────────────────
   Add `class="oonp-fade-up"` to any element, then the IntersectionObserver
   script (loaded inline in the HTML) toggles `.is-visible` when the element
   scrolls into view. Stagger sibling reveals with --d1 through --d5.

   The animation only runs if the `html.js-fade` class is set BEFORE first
   paint (script in <head>), so non-JS users and prefers-reduced-motion get
   the content immediately. */
.oonp-fade-up {
  opacity: 1;
  transform: none;
  transition:
    opacity .7s cubic-bezier(.4, 0, .2, 1),
    transform .7s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}

html.js-fade .oonp-fade-up:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
}

html.js-fade .oonp-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.oonp-fade-up--d1 { transition-delay: 0.08s; }
.oonp-fade-up--d2 { transition-delay: 0.16s; }
.oonp-fade-up--d3 { transition-delay: 0.24s; }
.oonp-fade-up--d4 { transition-delay: 0.32s; }
.oonp-fade-up--d5 { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  html.js-fade .oonp-fade-up,
  html.js-fade .oonp-fade-up:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── TRUST STRIP: 4-up icon row (light surface) ───────────────────────────
   Sits under the hero on service / why-here pages. Each item = SVG icon +
   title + one-line desc. Designed for exactly 4 items (3-col on tablet,
   1-col on mobile). Vertical dividers between items at desktop. */
.oonp-trust-strip {
  border-block: 1px solid var(--oonp-warm-line);
  background: #fff;
}

.oonp-trust-strip__inner {
  max-width: var(--oonp-container);
  margin-inline: auto;
  padding-block: 28px;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.oonp-trust-strip__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-inline: 24px;
  border-inline-end: 1px solid var(--oonp-line);
}

.oonp-trust-strip__item:last-child { border-inline-end: none; }
.oonp-trust-strip__item:first-child { padding-inline-start: 0; }
.oonp-trust-strip__item:last-child { padding-inline-end: 0; }

.oonp-trust-strip__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--oonp-red-soft);
  color: var(--oonp-red);
}

.oonp-trust-strip__title {
  display: block;
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.oonp-trust-strip__desc {
  display: block;
  margin-top: 4px;
  color: var(--oonp-muted);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .oonp-trust-strip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .oonp-trust-strip__item { border-inline-end: none; padding-inline: 16px; }
  .oonp-trust-strip__item:nth-child(odd) { border-inline-end: 1px solid var(--oonp-line); }
}

@media (max-width: 560px) {
  .oonp-trust-strip__inner { grid-template-columns: 1fr; gap: 18px; }
  .oonp-trust-strip__item:nth-child(odd) { border-inline-end: none; }
  .oonp-card-grid{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* ── AWARD STRIP: navy band with year lockup ──────────────────────────────
   Compact navy band for "Dealer of the Year · 2019 · 2023 · 2024". Use on
   about pages, why-here pages, trust-heavy contexts. */
.oonp-award-strip {
  background: var(--oonp-navy);
  color: #fff;
}

.oonp-award-strip__inner {
  max-width: var(--oonp-container);
  margin-inline: auto;
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
}

.oonp-award-strip__label {
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.oonp-award-strip__years {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, .88);
  font-family: var(--oonp-font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
}

.oonp-award-strip__year {
  position: relative;
  padding-inline-end: 14px;
}

.oonp-award-strip__year + .oonp-award-strip__year::before {
  content: "·";
  position: absolute;
  left: -14px;
  color: rgba(255, 255, 255, .55);
}

.oonp-award-strip__year:last-child { padding-inline-end: 0; }

/* ── WHY-SECTION: photo collage + numbered differentiator list ────────────
   Two-column section for "About / Why us" pages. Left column is a 3-image
   collage (1 tall + 2 short). Right column reuses the standard kicker / h2 /
   lead-p stack and adds a numbered list with circular red number badges. */
.oonp-why-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.oonp-why-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}

.oonp-why-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--oonp-radius-lg);
  box-shadow: var(--oonp-shadow-soft);
  display: block;
}

.oonp-why-photos img:first-child {
  /* The "tall" image spans both rows of the left column. */
  grid-row: span 2;
  min-height: 360px;
}

.oonp-why-list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 22px;
}

.oonp-why-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.oonp-why-num {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--oonp-red);
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.oonp-why-num--navy { background: var(--oonp-navy); }

/* Each list item has its own h4 + p; reuse generic h4/p typography from the
   .oonp-section element selectors. Just zero out the top margins so the
   number badge aligns with the first line of text. */
.oonp .oonp-why-list h4 { margin: 0; font-size: 18px; line-height: 1.25; }
.oonp .oonp-why-list p { margin-top: 6px; font-size: 15px; line-height: 1.55; }

@media (max-width: 980px) {
  .oonp-why-grid { grid-template-columns: 1fr; gap: 36px; }
  .oonp-why-photos img:first-child { min-height: 240px; }
}

@media (max-width: 560px) {
  .oonp-why-photos { grid-template-columns: 1fr; grid-template-rows: auto; }
  .oonp-why-photos img:first-child { grid-row: auto; min-height: 220px; aspect-ratio: 16 / 10; }
  .oonp-why-photos img { aspect-ratio: 16 / 10; }
}

/* ── REVIEW CARD enhancements ────────────────────────────────────────────
   The base .oonp-review-card already exists. Add optional sub-elements:
   __source line, __cta footer (rating + read-more link), so it can play
   both standalone and inside the testimonial band below. */
.oonp-review-card__source {
  display: block;
  margin-top: 4px;
  color: var(--oonp-muted);
  font-size: 13px;
}

.oonp-review-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--oonp-line);
}

.oonp-review-card__rating {
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 18px;
  font-weight: 800;
}

.oonp-review-card__rating-label {
  margin-left: 6px;
  color: var(--oonp-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── TESTIMONIAL BAND: photo bg + dark overlay + 3 frosted review cards ───
   Use 1× per page as a trust block on Service hub / About / Financing pages.
   Cards inside reuse .oonp-review-card with --frosted modifier for the
   semi-transparent white treatment over the photo. */
.oonp-testimonial-band {
  position: relative;
  overflow: hidden;
  padding-block: 72px;
  color: #fff;
  background: var(--oonp-ink);
}

.oonp-testimonial-band__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .42;
  z-index: 0;
}

.oonp-testimonial-band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20, 20, 20, .55), rgba(20, 20, 20, .82));
}

.oonp-testimonial-band__header,
.oonp-testimonial-band__grid {
  position: relative;
  z-index: 1;
  max-width: var(--oonp-container);
  margin-inline: auto;
  padding-inline: 24px;
}

.oonp-testimonial-band__header { text-align: center; }
.oonp-testimonial-band__header .oonp-kicker { justify-content: center; color: #ffd0db; }
.oonp .oonp-testimonial-band__header h2 { color: #fff; }

.oonp-testimonial-band__grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Frosted glass card variant — used inside .oonp-testimonial-band */
.oonp-review-card--frosted {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--oonp-radius-lg);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.oonp .oonp-review-card--frosted p,
.oonp .oonp-review-card--frosted strong {
  color: #fff;
}

.oonp .oonp-review-card--frosted .oonp-review-card__source {
  color: rgba(255, 255, 255, .72);
}

@media (max-width: 860px) {
  .oonp-testimonial-band__grid { grid-template-columns: 1fr; }
  .oonp-testimonial-band { padding-block: 56px; }
}

/* ── AREA CLUSTER: editorial city-link card for local SEO ─────────────────
   White card with a red top accent stripe + eyebrow + title + intro + grid
   of city pills + footer CTA. Drives internal-link equity to geo pages.
   Place near the bottom of geo landing pages, service hub, contact. */
.oonp-area-cluster {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius-lg);
  background: #fff;
  box-shadow: var(--oonp-shadow-soft);
  overflow: hidden;
}

.oonp-area-cluster::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--oonp-red);
}

/* Reuse standard kicker + h3 + p inside the card — no new typography classes.
   Just zero default margins so the rhythm we want is explicit below. */
.oonp .oonp-area-cluster h3 {
  margin: 0;
  color: var(--oonp-ink);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
}

.oonp .oonp-area-cluster > .oonp-kicker { margin-bottom: 10px; }
.oonp .oonp-area-cluster > p { margin-top: 14px; max-width: 720px; }

.oonp-area-cluster ul {
  margin-top: 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.oonp-area-cluster ul li { display: inline-block; }

.oonp-area-cluster ul li a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 30px;
  border: 1px solid var(--oonp-line);
  border-radius: 999px;
  background: var(--oonp-soft-2);
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* Red location dot before each city pill */
.oonp-area-cluster ul li a::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--oonp-red);
  box-shadow: 0 0 0 2px rgba(195, 0, 47, .18);
}

.oonp-area-cluster ul li a span {
  color: var(--oonp-muted);
  font-size: 12px;
  font-weight: 600;
}

.oonp-area-cluster ul li a:hover {
  background: var(--oonp-red);
  border-color: var(--oonp-red);
  color: #fff;
}

.oonp-area-cluster ul li a:hover::before { background: #fff; box-shadow: none; }
.oonp-area-cluster ul li a:hover span { color: rgba(255, 255, 255, .85); }

.oonp .oonp-area-cluster__cta {
  margin-top: 22px;
  color: var(--oonp-muted);
  font-size: 14px;
}

.oonp .oonp-area-cluster__cta a {
  color: var(--oonp-red);
  font-weight: 700;
  text-decoration: none;
}

.oonp .oonp-area-cluster__cta a:hover { text-decoration: underline; }

/* ── MAP CTA: location + directions block ─────────────────────────────────
   Two-column block for "Visit us" pages — clickable map preview on the
   left, content + dual CTA on the right. Drop near contact / about /
   service-hub footers. Stacks vertically on mobile. The map image itself
   is wrapped in an anchor so the whole tile clicks through to directions
   (mirroring the redundant "Get Directions" button below).
   Reuses .oonp-kicker, h2/p, .oonp-actions, .oonp-btn — no new typography. */
.oonp-map-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* No box-shadow / border-radius / overflow:hidden — the image itself
   has feathered edges that blend into the section background, so a
   contained tile with a hard rounded edge would fight the fade. */
.oonp-map-cta__map {
  display: block;
  transition: transform .25s ease;
}

.oonp-map-cta__map:hover,
.oonp-map-cta__map:focus-visible {
  transform: translateY(-3px);
}

.oonp-map-cta__map img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

@media (max-width: 860px) {
  .oonp-map-cta {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .oonp-map-cta__map img {
    aspect-ratio: 16 / 10;
  }
}

/* ── INVENTORY GRID + VEHICLE TILE ────────────────────────────────────────
   A real in-stock listing card. Ported from the legacy .oo-card--vehicle
   pattern and retuned to .oonp tokens.

   DISTINCT from .oonp-vehicle-card (the single decorative model card) —
   this is a multi-VIN inventory tile used in a grid (model pages, inventory
   hubs, "in stock now" sections).

   The whole tile is a single <a> to the VDP; the "View Details" button is a
   presentational <span class="oonp-btn"> (never a nested <a>), so the markup
   stays valid and the entire card is one tap target.

   LIVE-DATA FIELDS: image, promo, name, meta/stock #, MSRP, your-price,
   savings, VDP href. Devs populate these server-side from the inventory
   feed — never hardcode prices in production. */
.oonp-inventory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 980px) {
  .oonp-inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .oonp-inventory-grid { grid-template-columns: 1fr; }
}

.oonp-vehicle-tile {
  /* Single source of truth for body padding. The price-block / savings
     full-width bleed reads from this, so the two never drift apart
     (fixes the legacy hardcoded -22px coupling). */
  --tile-pad: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius-lg);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.oonp-vehicle-tile:hover,
.oonp-vehicle-tile:focus-visible {
  border-color: var(--oonp-red);
  box-shadow: var(--oonp-shadow-soft);
  transform: translateY(-3px);
  outline: none;
}

.oonp-vehicle-tile__img-wrap {
  position: relative;
  overflow: hidden;
}

.oonp-vehicle-tile__img {
  width: 100%;
  height: 200px;
  object-fit: cover;        /* uniform grid; crops slightly. Swap to
                               'contain' + a bg if whole-car framing matters. */
  background: var(--oonp-ink);
  transition: transform .4s ease;
}

.oonp-vehicle-tile:hover .oonp-vehicle-tile__img { transform: scale(1.03); }

/* Promo strip — red overlay band pinned to the bottom of the photo.
   Optional: omit the element when there's no offer. */
.oonp-vehicle-tile__promo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 12px;
  background: var(--oonp-red);
  color: #fff;
  font-family: var(--oonp-font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}

.oonp-vehicle-tile__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px var(--tile-pad) var(--tile-pad);
}

/* 0,2,1 beats the section-level `h3 { color: ink }` rule without !important. */
.oonp .oonp-vehicle-tile__name {
  margin: 0 0 4px;
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.2px;
  line-height: 1.25;
}

.oonp-vehicle-tile__meta {
  margin: 0 0 16px;
  color: var(--oonp-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Optional VIN line — real listings only. Sits just under the spec/stock
   meta (the negative top margin tucks it close to the meta line above).
   Live-data field: devs populate from the inventory feed. Monospaced-ish
   tracking so the 17-char VIN reads as a real, scannable identifier. */
.oonp-vehicle-tile__vin {
  margin: -10px 0 16px;
  color: var(--oonp-muted);
  font-family: var(--oonp-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
}

/* Price block — MSRP (struck) | Your Price (red). Bleeds edge-to-edge using
   the --tile-pad var so it always matches body padding. */
.oonp-vehicle-tile__price-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 calc(var(--tile-pad) * -1);
  padding: 14px var(--tile-pad);
  background: var(--oonp-soft-2);
  border-block: 1px solid var(--oonp-line);
}

.oonp-vehicle-tile__price-msrp,
.oonp-vehicle-tile__price-final {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.oonp-vehicle-tile__price-final {
  padding-left: 16px;
  border-left: 1px solid var(--oonp-line);
}

.oonp-vehicle-tile__price-label {
  color: var(--oonp-muted);
  font-family: var(--oonp-font-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.oonp-vehicle-tile__price-strike {
  color: var(--oonp-muted);
  font-family: var(--oonp-font-head);
  font-size: 16px;
  font-weight: 600;
  text-decoration: line-through;
}

.oonp-vehicle-tile__price-value {
  color: var(--oonp-red);
  font-family: var(--oonp-font-head);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

/* Savings — full-width pink band under the price block */
.oonp-vehicle-tile__savings {
  display: block;
  margin: 0 calc(var(--tile-pad) * -1) 18px;
  padding: 8px 0;
  background: var(--oonp-red-soft);
  color: var(--oonp-red);
  font-family: var(--oonp-font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .8px;
  text-align: center;
}

/* CTA pinned to the bottom of every tile, regardless of copy length above */
.oonp-vehicle-tile__cta {
  margin-top: auto;
}

/* Tiles with studio model photos (Global Incentives): the shots have transparent
   or light backgrounds and varying aspect ratios - show them whole on white
   rather than cropping them against a dark background. */
.oonp-inventory-grid--models {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

@media (max-width: 980px) {
  .oonp-inventory-grid--models { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

@media (max-width: 700px) {
  .oonp-inventory-grid--models { grid-template-columns: 1fr; gap: 20px; }
}

/* A wider, airier tile: only the frame and the inner padding grow - the photo
   height, the name and the button stay the same. */
.oonp-inventory-grid--models .oonp-vehicle-tile {
  --tile-pad: 32px;
}

.oonp-inventory-grid--models .oonp-vehicle-tile__img {
  /* The tile grew wider (3 per row), but the photo keeps the same size it had
     in the 4-per-row grid: the image width is capped and centred, and the
     difference goes into the padding around it. */
  display: block;
  width: 100%;
  max-width: 268px;
  margin: 0 auto;
  height: 190px;
  object-fit: contain;
  background: #fff;
  padding: 10px 14px;
}

.oonp-inventory-grid--models .oonp-vehicle-tile__img-wrap {
  border-bottom: 1px solid var(--oonp-line);
}

.oonp-inventory-grid--models .oonp-vehicle-tile__body {
  align-items: center;
  text-align: center;
}

.oonp-inventory-grid--models .oonp-vehicle-tile__cta {
  width: 100%;
  padding-top: 4px;
}

.oonp-vehicle-tile__cta .oonp-btn {
  width: 100%;
}

/* The tile already provides the lift on hover; neutralize the button's own
   translate so it doesn't double-animate inside the card. */
.oonp-vehicle-tile:hover .oonp-vehicle-tile__cta .oonp-btn {
  transform: none;
}

.oonp h1,
.oonp h2,
.oonp h3,
.oonp h4,
.oonp h5,
.oonp h6 {
  font-family: var(--oonp-font-head);
  text-transform: none;
  letter-spacing: 0;
}

/* for white */
.oonp .oonp-disclaimer{
  text-shadow: 0 0 1px #ffffff, 0 0 1px #ffffff !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0) 100%) !important;
}

/* for grey #f3f4f6 */
.oonp .oonp-specs-wrap .oonp-disclaimer, .oonp .oonp-specs-wrap .oonp-disclaimer a{
  background-image: linear-gradient(180deg, rgba(249,250,251,0.01) 0%, rgba(249,250,251,0) 100%) !important;
  text-shadow: 0 0 1px #f3f4f6, 0 0 1px #f3f4f6 !important;
}

.vc_column_container>.vc_column-inner .oonp,
.entry-content>.oonp{
  margin-bottom: 35px;
}

/* Padding of the text block.
   The rule used to hang off the WPBakery wrapper .vc_column_container > .vc_column-inner.
   As pages are converted to plain HTML that wrapper disappears and the text block
   is left with the inline padding:0 from the markup itself - the card collapses.
   The second selector matches the block by its own structure, independently of
   the builder, so it works on converted and legacy pages alike. */
.vc_column_container>.vc_column-inner .oonp-rich-text,
.oonp>.oonp-rich-text{
  padding: 30px 15px 10px!important;
  margin-bottom: 35px !important;
  margin-top: 0px!important;
}

.vc_column_container .oonp-vs-table tbody th,
.oonp .oonp-vs-table tbody th {
  width: 20%;
}

.vc_column_container .oonp-rich-text ul li,
.oonp .oonp-rich-text ul li{
  list-style: none;
}

.vc_column_container .oonp-faq,
.oonp .oonp-faq{
  margin-top:20px;
  margin-bottom: 20px;
}

.vc_column_container .oonp-rich-text p, .vc_column_container .oonp-rich-text li, .vc_column_container .oonp-rich-text td,
.oonp .oonp-rich-text p, .oonp .oonp-rich-text li, .oonp .oonp-rich-text td {
  line-height: 1.55;
}

.vc_column_container .oonp-rich-text ul, .vc_column_container .oonp-rich-text ol,
.oonp .oonp-rich-text ul, .oonp .oonp-rich-text ol{
  padding-left: 0;
}

.vc_column_container .oonp-faq details.open,
.oonp .oonp-faq details.open{
  padding-bottom: 0;
}

.vc_column_container .oonp-rich-text .oonp-faq ul, .vc_column_container .oonp-rich-text .oonp-faq ol,
.oonp .oonp-rich-text .oonp-faq ul, .oonp .oonp-rich-text .oonp-faq ol{
  margin-top: 0;
  padding-bottom: 0;
}

.vc_column_container .oonp-vs-wrap,
.oonp .oonp-vs-wrap{
  box-shadow: none;
}

.oonp-rich-text .oonp-faq h3{
  margin-top: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

.vc_row-fluid:has(.oo-disclaimer) + .vc_row-fluid:has(.oonp) > .oonp-rich-text{
  margin-top: 0!important;
}
/* ═══════════════════════════════════════════════════════════════════
   TEAM DIRECTORY  —  /staff/
   A department-grouped people grid. Source photos arrive in mixed
   aspect ratios (1080×1080 squares, 280×373 portraits, a couple of
   landscape placeholders), so the frame is a fixed 1:1 box and the
   image covers it, biased upward so faces stay in view.
   ═══════════════════════════════════════════════════════════════ */

.oonp-team-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oonp-team-nav__link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--oonp-line);
  border-radius: 999px;
  background: var(--oonp-paper);
  color: var(--oonp-ink);
  font-family: var(--oonp-font-head);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.oonp-team-nav__link:hover,
.oonp-team-nav__link:focus {
  background: var(--oonp-red);
  border-color: var(--oonp-red);
  color: #fff;
  text-decoration: none;
}

.oonp-team-nav__count {
  font-size: 13px;
  font-weight: 500;
  opacity: .6;
}

.oonp-team-nav__link:hover .oonp-team-nav__count,
.oonp-team-nav__link:focus .oonp-team-nav__count {
  opacity: .85;
}

.oonp-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 32px 24px;
}

/* Leadership reads better as a short, wider row. */
.oonp-team-grid--lead {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  max-width: 780px;
}

.oonp-person {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Deep links land on a single person (/staff/#gary-dewig). html already
     carries scroll-padding-top:160px, so this only adds a little breathing
     room above the card rather than a second full header's worth. */
  scroll-margin-top: 24px;
}

.oonp-person__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--oonp-line);
  border-radius: var(--oonp-radius-lg);
  background: var(--oonp-soft);
  box-shadow: var(--oonp-shadow-soft);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.oonp-person__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias upward: portrait sources put the face in the top third. */
  object-position: 50% 22%;
  transition: transform .45s ease;
}

.oonp-person:hover .oonp-person__frame,
.oonp-person:focus-within .oonp-person__frame {
  transform: translateY(-3px);
  border-color: rgba(195, 0, 47, .35);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
}

.oonp-person:hover .oonp-person__frame img,
.oonp-person:focus-within .oonp-person__frame img {
  transform: scale(1.045);
}

.oonp-person__name {
  margin: 16px 0 0;
  /* Reserve two lines: names like "Kostiantyn Molodanov" wrap while their
     neighbours do not, and without this the roles and phone rules below
     stagger across the row. */
  min-height: 2.6em;
  font-family: var(--oonp-font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--oonp-ink);
  letter-spacing: -0.01em;
}

.oonp-person__role {
  margin: 6px 0 0;
  font-family: var(--oonp-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--oonp-muted);
}

/* Thin red rule between role and phone — the one brand accent per card. */
.oonp-person__tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid var(--oonp-red);
  align-self: flex-start;
  font-family: var(--oonp-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--oonp-ink);
  text-decoration: none;
  transition: color .18s ease;
}

.oonp-person__tel:hover,
.oonp-person__tel:focus {
  color: var(--oonp-red);
  text-decoration: none;
}

.oonp-person__tel svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: currentColor;
  opacity: .75;
}

@media (max-width: 640px) {
  .oonp-team-grid,
  .oonp-team-grid--lead {
    /* Two columns beat one on a phone: 21 sales consultants in a single
       column is an endless scroll. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 14px;
    max-width: none;
  }

  .oonp-person__name { font-size: 15px; margin-top: 12px; }
  .oonp-person__role { font-size: 13px; }
  .oonp-person__tel  { font-size: 13px; }

  .oonp-team-nav {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .oonp-team-nav::-webkit-scrollbar { display: none; }
  .oonp-team-nav__link { flex: none; padding: 9px 15px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .oonp-person__frame,
  .oonp-person__frame img {
    transition: none;
  }
  .oonp-person:hover .oonp-person__frame { transform: none; }
  .oonp-person:hover .oonp-person__frame img { transform: none; }
}