/* ==========================================================================
   Chepstow OMODA JAECOO – style.css
   Mobile-first base styles. Tablet overrides in tablet.css, desktop in desktop.css.
   Organised by page section: Global → Homepage → Inner Pages
   ========================================================================== */


/* ==========================================================================
   GLOBAL — Custom Properties
   ========================================================================== */

:root {
  --oj-blue:   #67b3c4;
  --oj-silver: #b2b3b3;
  --oj-white:  #ffffff;
  --oj-dark:   #2e3a42;
  --oj-black:  #000000;
  --oj-grey:   #2a2d2f;

  --font-color:   #2e3a42;
  --font-primary: Calibri, "Segoe UI", Arial, sans-serif;

  --transition-base: 0.3s ease;
}


/* ==========================================================================
   GLOBAL — Reset & Base
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-primary);
  background-color: var(--oj-dark);
  color: var(--oj-white);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

a {
  color: var(--oj-blue);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover { color: var(--oj-white); }

img { max-width: 100%; height: auto; display: block; }


/* ==========================================================================
   GLOBAL — Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  color: var(--oj-white);
}

h1 { font-size: clamp(2rem,   4vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 2rem); }

p { margin-top: 0; }


/* ==========================================================================
   GLOBAL — Layout & Utilities
   ========================================================================== */

.layout-container {
  margin: 0 auto;
  padding: 0;
}

.row>* {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.row {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.text-blue   { color: var(--oj-blue); }
.text-orange { color: var(--oj-blue); }
.text-muted  { color: var(--oj-silver); }
.bg-dark     { background-color: var(--oj-dark); }
.bg-mid      { background-color: var(--oj-dark); }
.section-pad { padding: 3rem 0; }

.section-divider {
  width: 60px;
  height: 3px;
  background: var(--oj-blue);
  margin: 1rem 0;
}
.section-divider--orange { background: var(--oj-dark); }

/* Drupal status messages */
.messages--status  { background: #1a3a1a; border-color: #4caf50; color: #fff; }
.messages--warning { background: #3a2c00; border-color: #c87800; color: #fff; }
.messages--error   { background: #3a0000; border-color: #f44336; color: #fff; }


/* ==========================================================================
   GLOBAL — Buttons
   ========================================================================== */

.btn-oj-primary {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--oj-blue);
  color: var(--oj-dark);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: none;
  border: 2px solid var(--oj-blue);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.btn-oj-primary:hover {
  background: transparent;
  color: var(--oj-blue);
}

.btn-oj-outline {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: transparent;
  color: var(--oj-white);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: none;
  border: 2px solid var(--oj-white);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.btn-oj-outline:hover {
  background: var(--oj-white);
  color: var(--oj-dark);
}

.btn-oj-orange {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--oj-dark);
  color: var(--oj-white);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 2px solid var(--oj-dark);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.btn-oj-orange:hover {
  background: transparent;
  color: var(--oj-white);
  border-color: var(--oj-white);
}

.btn-oj-outline--light {
  display: inline-block;
  padding: 0.7rem 1.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.4);
  color: var(--oj-white);
  transition: border-color 0.3s, background 0.3s;
}
.btn-oj-outline--light:hover {
  border-color: var(--oj-white);
  background: rgba(255,255,255,0.08);
  color: var(--oj-white);
}

/* Dark rectangle button — used on vehicle brochure CTAs */
.btn-oj-dark {
  display: inline-block;
  padding: 0.7rem 1.75rem;
  background-color: var(--oj-blue);
  color: var(--oj-white);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: normal;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-primary);
  text-decoration: none;
  transition: background 0.3s;
}
.btn-oj-dark:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--oj-white);
  color: var(--oj-white);
}


/* ==========================================================================
   GLOBAL — Animations
   ========================================================================== */

[data-oj-fade] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-oj-fade].oj-visible { opacity: 1; transform: none; }

@keyframes oj-scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
  50%       { opacity: 1;   transform: scaleY(1); }
}


/* ==========================================================================
   GLOBAL — Drupal Admin UI
   ========================================================================== */

/* Push fixed header down when admin toolbar is active */
body.toolbar-fixed .oj-header { top: 39px; }
body.toolbar-fixed.toolbar-horizontal .oj-header { top: 79px; }

main.oj-main { 
  /* padding-top: 64px;  */
}
body.toolbar-fixed main.oj-main { padding-top: 103px; }
body.toolbar-fixed.toolbar-horizontal main.oj-main { padding-top: 143px; }

/* Local task tabs (View / Edit / Revisions) */
.oj-local-tasks { padding: 0.5rem 0 0; }
.oj-local-tasks ul.tabs--primary {
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 2px solid rgba(103,179,196,0.2);
}
.oj-local-tasks ul.tabs--primary li a {
  display: block;
  padding: 0.5rem 1.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--oj-silver);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}
.oj-local-tasks ul.tabs--primary li a:hover,
.oj-local-tasks ul.tabs--primary li.is-active a {
  color: var(--oj-blue);
  border-bottom-color: var(--oj-blue);
}
.oj-local-actions { padding: 0.75rem 0; }

.oj-breadcrumb { padding: 0.75rem 0; font-size: 0.8rem; color: var(--oj-silver); }
.oj-breadcrumb a { color: var(--oj-silver); }
.oj-breadcrumb a:hover { color: var(--oj-blue); }
.oj-breadcrumb .separator { margin: 0 0.4rem; opacity: 0.4; }


/* ============================================================================
   ●  HOMEPAGE
   ============================================================================ */


/* ==========================================================================
   HOMEPAGE — Navigation
   ========================================================================== */

.oj-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--oj-black) !important;
  border-bottom: 1px solid rgba(103, 179, 196, 0.2);
  padding: .5rem 0;
}

.oj-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 2rem;
}

.oj-header__brand img { height: 15px; width: auto; }

/* Mobile nav: hidden by default, shown when .is-open */
.oj-header__nav {
  display: none;
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--oj-black);
  flex-direction: column;
  gap: 0;
  padding: 1rem 0;
  list-style: none;
  margin: 0;
}
.oj-header__nav.is-open { display: flex; }
.oj-header__nav.is-open .oj-header__nav { display: flex; position: static; background: transparent; padding: 0; }

.oj-header__nav a {
  color: var(--oj-white);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: capitalize;
  padding: 0.85rem 1.5rem;
  display: block;
  border-top: 1px solid rgba(0,0,0,0.06);
  transition: color var(--transition-base);
  -webkit-transition: color var(--transition-base);
  -moz-transition: color var(--transition-base);
  -ms-transition: color var(--transition-base);
  -o-transition: color var(--transition-base);
}
.oj-header__nav a:hover,
.oj-header__nav a.is-active { color: var(--oj-blue); }

/* Mobile hamburger toggle */
.oj-header__toggle {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--oj-blue);
}

/* Scroll-anchor offset so fixed header doesn't cover section headings */
[id] { scroll-margin-top: 74px; }

/* Dropdown arrow indicator */
.oj-nav-arrow {
  color: var(--oj-blue);
  display: inline-block;
  font-size: 0.55rem;
  margin-left: 0.35rem;
  vertical-align: middle;
  transition: transform 0.2s ease;
  line-height: 1;
}

/* Dropdown wrapper */
.oj-header__nav .has-dropdown { position: relative; }

/* Subnav panel: hidden by default */
.oj-header__subnav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 900;
  min-width: 220px;
  background-color: var(--oj-black);
  border-top: 2px solid var(--oj-blue);
  border-radius: 0 0 4px 4px;
  padding: 0.5rem 0 0.5rem 1rem;
  list-style: none;
  margin: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  -ms-border-radius: 0 0 4px 4px;
  -o-border-radius: 0 0 4px 4px;
}
.oj-header__subnav li { display: block; padding-left: .5rem }
.oj-header__subnav a {
  display: block;
  padding: 0.6rem 1.25rem;
  color: var(--oj-white) !important;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-bottom: none !important;
  border-top: none !important;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.oj-header__subnav a:hover {
  background: rgba(103,179,196,0.25);
  color: var(--oj-blue) !important;
}

/* Show subnav on hover/focus (desktop) */
.oj-header__nav .has-dropdown:hover > .oj-header__subnav,
.oj-header__nav .has-dropdown:focus-within > .oj-header__subnav { display: block; }

/* Rotate arrow when subnav is open */
.oj-header__nav .has-dropdown:hover > a .oj-nav-arrow,
.oj-header__nav .has-dropdown:focus-within > a .oj-nav-arrow { transform: rotate(180deg); }

/* Mobile: subnav shown inline so all anchor links are reachable */
@media (max-width: 991px) {
  .oj-header__subnav {
    display: block;
    position: static;
    box-shadow: none;
    border-top: none;
    border-left: 2px solid var(--oj-blue);
    border-radius: 0;
    background: rgba(0,0,0,0.25);
    padding: 0.25rem 0 0.25rem 0.5rem;
    margin: 0.25rem 0 0.5rem 1rem;
  }
  .oj-header__subnav a {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }
}


/* ==========================================================================
   HOMEPAGE — Hero
   ========================================================================== */

.oj-front-page { width: 100%; overflow-x: hidden; }

.oj-front-hero {
  position: relative;
  min-height: max(70vh, 400px);
  display: flex;
  align-items: flex-end;
  background: var(--oj-dark) url('../assets/images/hero-bg.webp') center center / cover no-repeat;
  overflow: hidden;
}

.oj-front-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13,14,14,0.30) 0%,
    rgba(13,14,14,0.60) 60%,
    rgba(13,14,14,0.88) 100%
  );
  z-index: 1;
}

.oj-front-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 7rem 1.5rem 3.5rem;
  color: var(--oj-white);
}

.oj-front-hero__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oj-blue);
  font-weight: 600;
  margin-bottom: 1rem;
}

.oj-front-hero__title {
  font-size: clamp(1.6rem, 5vw, 3rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin-bottom: 2rem;
  color: var(--oj-white);
}

.oj-front-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}


/* ==========================================================================
   HOMEPAGE — Hero Slideshow (vvjs)
   ========================================================================== */

/* Prevent horizontal scrollbar from 100vw full-bleed */
/* body { overflow-x: hidden; } */

/* Break hero block out of layout-container to viewport edge */
.block-views-blocklanding-hero-slideshow-block-landing-hero {
  width: 100%;
  margin: 0;
}

.block-views-blocklanding-hero-slideshow-block-landing-hero > .content { padding: 0; }

/* Reset Bootstrap .row negative margins inside the view */
.view-landing-hero-slideshow .view-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* vvjs containers: full width, no unexpected overflow */
.view-landing-hero-slideshow .vvjs,
.view-landing-hero-slideshow .vvjs-inner,
.view-landing-hero-slideshow .vvjs-items { width: 100%; max-width: 100%; }

/* Slide container: set height, position context for overlay */
.view-landing-hero-slideshow .vvjs-item-inner {
  position: relative;
  height: 65vh;
  padding: 0;
  overflow: hidden;
}

/* Slide image: fills container with cover crop */
.view-landing-hero-slideshow .vvjs-item-inner > img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 5%;
  display: block;
  max-width: none;
}

/* Hide the separator div between image and overlay text */
.view-landing-hero-slideshow .vvjs-separator { display: none; }

/* Subtle top-gradient for text legibility without obscuring the car */
.view-landing-hero-slideshow .vvjs-item-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.38) 0%,
    rgba(0,0,0,0.12) 35%,
    transparent 65%
  );
  z-index: 1;
  pointer-events: none;
}

/* Overlay text: centered, upper area of slide */
.view-landing-hero-slideshow .landing-hero__overlay-text {
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  bottom: auto;
  right: auto;
  width: 90%;
  max-width: 700px;
  text-align: center;
  z-index: 2;
}

.view-landing-hero-slideshow .landing-hero__overlay-text h2 {
  font-size: clamp(1.2rem, 5vw, 1.25rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.view-landing-hero-slideshow .landing-hero__overlay-text h3,
.view-landing-hero-slideshow .landing-hero__overlay-text h4,
.view-landing-hero-slideshow .landing-hero__overlay-text p {
  font-size: clamp(0.9rem, 3vw, 1.85rem);
  font-weight: 400;
  color: rgba(255,255,255,0.88);
  line-height: 1.3;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* CTA button wrappers */
.view-landing-hero-slideshow .landing-hero__cta-primary,
.view-landing-hero-slideshow .landing-hero__cta-secondary { display: inline-block; margin-top: 1.25rem; }
.view-landing-hero-slideshow .landing-hero__cta-primary { margin-right: 0.75rem; }

/* CTA buttons: compact rectangles, no border-radius */
.view-landing-hero-slideshow .landing-hero__cta-primary a,
.view-landing-hero-slideshow .landing-hero__cta-secondary a {
  display: inline-block;
  padding: 0.55rem 1.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.view-landing-hero-slideshow .landing-hero__cta-primary a {
  background: var(--oj-blue);
  color: #fff;
  border: 1px solid var(--oj-blue);
}
.view-landing-hero-slideshow .landing-hero__cta-primary a:hover {
  background: var(--oj-dark);
  border-color: var(--oj-dark);
}

.view-landing-hero-slideshow .landing-hero__cta-secondary a {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.65);
}
.view-landing-hero-slideshow .landing-hero__cta-secondary a:hover {
  border-color: var(--oj-blue);
  color: var(--oj-blue);
}


/* ==========================================================================
   HOMEPAGE — Hero Quick-link Icon Stack
   ========================================================================== */

/* Fix icon stack to viewport right edge — reliable across all DOM nesting */
#block-chepstow-omoda-quicklinks {
  position: fixed;
  right: 0;
  top: 15%;            /* align to bottom of fixed nav */
  z-index: 20;
  width: fit-content;   /* shrink-wrap so right:0 anchors to viewport right, not left:auto stretch */
  margin: 0;
  padding: 0;
}

/* Admin toolbar offsets */
body.toolbar-fixed #block-chepstow-omoda-quicklinks { top: 103px; }
body.toolbar-fixed.toolbar-horizontal #block-chepstow-omoda-quicklinks { top: 143px; }

/* Strip wrapper padding */
#block-chepstow-omoda-quicklinks > .content { padding: 0; }
#block-chepstow-omoda-quicklinks .field__item,
#block-chepstow-omoda-quicklinks p { margin: 0; padding: 0; }

/* Each icon: dark square tile with blue divider */
#block-chepstow-omoda-quicklinks a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(10, 20, 25, 0.82);
  border-bottom: 1px solid var(--oj-blue);
  text-decoration: none;
  transition: background 0.2s;
}
#block-chepstow-omoda-quicklinks p:last-child a { border-bottom: none; }
#block-chepstow-omoda-quicklinks a:hover { background: rgba(103, 179, 196, 0.25); }

/* Icon images: white, fixed size */
#block-chepstow-omoda-quicklinks img {
  width: 26px;
  height: auto;
  max-width: none;
  filter: brightness(0) invert(1);
  display: block;
}


/* ==========================================================================
   HOMEPAGE — Brand Intro
   ========================================================================== */

#block-chepstow-omoda-frontpagebrandintro {
  background-color: var(--oj-black);
  color: var(--oj-white);
  padding: 4rem 1.5rem;
  margin: 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Angular pale accent shape */
#block-chepstow-omoda-frontpagebrandintro::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -120px;
  width: 360px;
  height: 360px;
  background: rgba(255,255,255,0.09);
  transform: rotate(35deg);
  pointer-events: none;
}

#block-chepstow-omoda-frontpagebrandintro .oj-bio__inner {
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.oj-bio__logo-lockup { margin-bottom: 1.5rem; }

#block-chepstow-omoda-frontpagebrandintro .oj-bio__inner img {
  height: clamp(15px, 1.8vw, 22px);
  width: auto;
  object-fit: cover;
  margin: 0 auto 3rem;

}

.oj-bio__tagline {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255,255,255,0.9);
  margin-bottom: 1.5rem;
}

.oj-bio__body {
  font-size: 1rem;
  line-height: 1.3;
  color: rgba(255,255,255,0.8);
  margin-bottom: 0;
  text-align: left;
  max-width: 580px;
  margin: 0 auto;
}


/* ==========================================================================
   HOMEPAGE — Vehicles
   ========================================================================== */

#block-chepstow-omoda-content .node__content {
  margin: 0;
  padding: 0;
}

/* Outer container — sets the blue background behind all vehicle sections */
.oj-vehicle-showcase { background: var(--oj-blue); }

/* Individual vehicle section wrapper */
.oj-showcase-section {
  position: relative;
  background: var(--oj-blue);
  border-top: 2px solid rgba(255,255,255,0.6);
  overflow: hidden;
}

/* Subtle gradient overlay for depth */
.oj-showcase-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.10) 0%, transparent 45%, rgba(0,0,0,0.08) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Angular pale accent shape */
.oj-showcase-shape {
  position: absolute;
  top: -60px;
  right: -80px;
  width: 360px;
  height: 360px;
  background: rgba(255,255,255,0.08);
  transform: rotate(30deg);
  pointer-events: none;
  z-index: 0;
}

/* Second accent shape — lower left */
.oj-showcase-shape::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: rgba(0,0,0,0.06);
  transform: rotate(-20deg);
  pointer-events: none;
}

/* Title bar */
.oj-showcase-title-wrap {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 4rem 1.5rem 2.75rem;
  border-bottom: 2px solid rgba(255,255,255,0.6);
}

.oj-showcase-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--oj-white);
  margin: 0;
}

/* Collage grid — mobile: stacked */
.oj-showcase-collage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Image panels */
.oj-showcase-image {
  overflow: hidden;
  flex-shrink: 0;
  background-color: #1a3040;
  background-size: cover;
  background-position: center;
}
.oj-showcase-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.oj-showcase-image img[src=""] { display: none; }
.oj-showcase-section:hover .oj-showcase-image--main img { transform: scale(1.03); }

/* Mobile aspect ratios */
.oj-showcase-image--main     { aspect-ratio: 16 / 9; }
.oj-showcase-image--side     { aspect-ratio: 4 / 3; }
.oj-showcase-image--detail   { aspect-ratio: 4 / 3; }
.oj-showcase-image--interior { aspect-ratio: 4 / 3; }

/* Placeholder panels used when no image is uploaded */
.oj-showcase-image__placeholder { width: 100%; height: 100%; min-height: 200px; background: var(--oj-blue); }
.oj-showcase-image__placeholder--alt  { background: rgba(61,143,163,0.7); }
.oj-showcase-image__placeholder--dark { background: rgba(0,0,0,0.45); }

/* Per-node fallback background images — replaced by real uploads when provided */
/* OMODA C5 HEV */
[data-history-node-id="4"] .oj-showcase-image--main     { background-image: url('../assets/images/vehicle-c5hev-banner.jpg'); background-position: center; }
[data-history-node-id="4"] .oj-showcase-image--side     { background-image: url('../assets/images/vehicle-c5hev-banner.jpg'); background-position: right center; }
[data-history-node-id="4"] .oj-showcase-image--detail   { background-image: url('../assets/images/vehicle-c5hev-banner.jpg'); background-position: 30% 60%; }
[data-history-node-id="4"] .oj-showcase-image--interior { background-image: url('../assets/images/vehicle-omoda-c5.png'); background-color: #1e3a4a; background-size: contain; background-repeat: no-repeat; }
/* OMODA E5 */
[data-history-node-id="6"] .oj-showcase-image--main     { background-image: url('../assets/images/vehicle-e5-banner.webp'); background-position: center; }
[data-history-node-id="6"] .oj-showcase-image--side     { background-image: url('../assets/images/vehicle-e5-banner.webp'); background-position: right center; }
[data-history-node-id="6"] .oj-showcase-image--detail   { background-image: url('../assets/images/vehicle-e5-banner.webp'); background-position: left 60%; }
[data-history-node-id="6"] .oj-showcase-image--interior { background-image: url('../assets/images/vehicle-omoda-e5.png'); background-color: #1e3a4a; background-size: contain; background-repeat: no-repeat; }
/* JAECOO J6 EV (reuses J7 banner — no dedicated image yet) */
[data-history-node-id="7"] .oj-showcase-image--main     { background-image: url('../assets/images/vehicle-j7phev-banner.jpg'); background-position: center; }
[data-history-node-id="7"] .oj-showcase-image--side     { background-image: url('../assets/images/vehicle-j7phev-banner.jpg'); background-position: right center; }
[data-history-node-id="7"] .oj-showcase-image--detail   { background-image: url('../assets/images/vehicle-j7phev-banner.jpg'); background-position: 40% 70%; }
[data-history-node-id="7"] .oj-showcase-image--interior { background-image: url('../assets/images/vehicle-jaecoo-j7.png'); background-color: #1e3a4a; background-size: contain; background-repeat: no-repeat; }
/* JAECOO J7 PHEV */
[data-history-node-id="9"] .oj-showcase-image--main     { background-image: url('../assets/images/vehicle-j7phev-banner.jpg'); background-position: center; }
[data-history-node-id="9"] .oj-showcase-image--side     { background-image: url('../assets/images/vehicle-j7phev-banner.jpg'); background-position: right 30%; }
[data-history-node-id="9"] .oj-showcase-image--detail   { background-image: url('../assets/images/vehicle-j7phev-banner.jpg'); background-position: 20% 80%; }
[data-history-node-id="9"] .oj-showcase-image--interior { background-image: url('../assets/images/vehicle-jaecoo-j7.png'); background-color: #1e3a4a; background-size: contain; background-repeat: no-repeat; }
/* JAECOO J8 PHEV */
[data-history-node-id="10"] .oj-showcase-image--main     { background-image: url('../assets/images/vehicle-j8phev-banner.jpg'); background-position: center; }
[data-history-node-id="10"] .oj-showcase-image--side     { background-image: url('../assets/images/vehicle-j8phev-banner.jpg'); background-position: right center; }
[data-history-node-id="10"] .oj-showcase-image--detail   { background-image: url('../assets/images/vehicle-j8phev-banner.jpg'); background-position: 30% 65%; }
[data-history-node-id="10"] .oj-showcase-image--interior { background-image: url('../assets/images/vehicle-jaecoo-j8.png'); background-color: #1e3a4a; background-size: contain; background-repeat: no-repeat; }

/* Copy block */
.oj-showcase-copy {
  padding: 3rem 1.5rem;
  background: rgba(0,0,0,0.20);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.oj-showcase-tagline {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 300;
  color: var(--oj-white);
  margin: 0;
  line-height: 1.3;
}

.oj-showcase-overview {
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.85);
  margin: 0;
}

.oj-showcase-hl-heading {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--oj-silver);
  margin: 0 0 0.75rem;
}

.oj-showcase-hl-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.oj-showcase-hl-list li {
  font-size: 1rem;
  color: rgba(255,255,255,0.92);
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.55;
}
.oj-showcase-hl-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--oj-silver);
  font-size: 0.8rem;
  top: 0.15em;
}

.oj-showcase-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding-top: 0.5rem;
}

.oj-showcase-discover {
  color: var(--oj-white);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 2px solid rgba(255,255,255,0.5);
  padding-bottom: 3px;
  transition: border-color 0.2s, color 0.2s;
}
.oj-showcase-discover:hover {
  color: var(--oj-silver);
  border-bottom-color: var(--oj-silver);
}

/* Spec strip — mobile: 2-column grid */
.oj-showcase-specs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: rgba(0,0,0,0.48);
  border-top: 2px solid rgba(255,255,255,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.oj-showcase-spec-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.5rem 1.25rem;
  border-right: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.oj-showcase-spec-item:nth-child(even) { border-right: none; }

.oj-showcase-spec-icon { flex-shrink: 0; color: var(--oj-silver); opacity: 0.9; margin-top: 2px; }
.oj-showcase-spec-icon svg { width: 32px; height: 32px; }

.oj-showcase-spec-text { display: flex; flex-direction: column; gap: 0.4rem; }

.oj-showcase-spec-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oj-silver);
  font-weight: 600;
}

.oj-showcase-spec-value {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--oj-white);
  line-height: 1.35;
}

/* ==========================================================================
   HOMEPAGE — Vehicle Sections (landing_vehicles View row template)
   Each vehicle is a .landing-vehicle section rendered from the View.
   ========================================================================== */

#block-chepstow-omoda-views-block-landing-vehicles-sec {
  background: var(--oj-black);
  margin: 0;
}

.view-landing-vehicles .view-content {
  margin: 0;
  padding: 0 1rem;
 }

/* Outer wrapper rendered by the View block */
.landing-vehicles { display: block; }

/* One vehicle per section. DOM order: title → images → content-row → specs. */
.landing-vehicle {
  position: relative;
  background: var(--oj-black);
  border-top: .125rem solid var(--oj-blue);
  overflow: hidden;
  display: block;
}

/* Subtle pale geometric accent shape for depth */
.landing-vehicle::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -80px;
  width: 360px;
  height: 360px;
  background: rgba(255,255,255,0.07);
  transform: rotate(30deg);
  pointer-events: none;
  z-index: 0;
}

/* Image collage — mobile: stacked column */
.landing-vehicle__images {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 1.2rem;
  position: relative;
  z-index: 1;
}

.landing-vehicle__image {
  overflow: hidden;
  flex-shrink: 0;
}
.landing-vehicle__image img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
  transition: transform 0.6s ease; 
}

.landing-vehicle:hover .landing-vehicle__image--main img { transform: scale(1.03); }

/* Mobile aspect ratios */
.landing-vehicle__image--main     { aspect-ratio: 16 / 9; }
.landing-vehicle__image--side     { aspect-ratio: 3 / 2; }
.landing-vehicle__image--detail   { aspect-ratio: 3 / 2; }
.landing-vehicle__image--extra    { aspect-ratio: 3 / 2; }
.landing-vehicle__image--placeholder { min-height: 200px; background: var(--oj-blue); }

/* Title bar — first in DOM; no order trick needed */
.landing-vehicle__title-wrap {
  text-align: center;
  padding: 3rem 1.5rem 2.5rem;
  position: relative;
  z-index: 1;
}
.landing-vehicle__title {
  font-size: clamp(1.55rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--oj-blue);
  margin: 0;
}

/* Copy block — no dark overlay; sits on the vehicle's blue background */
.landing-vehicle__copy {
  padding: 0 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  z-index: 1;
}
.landing-vehicle__tagline {
  font-size: clamp(1.3rem, 4vw, 1.85rem);
  font-weight: 300;
  color: var(--oj-blue);
  margin: 0;
  line-height: 1.35;
}
.landing-vehicle__description { 
  font-size: 1rem; 
  line-height: 1.85; 
  color: rgba(255,255,255,0.85);
   width: 100%;
   max-width: 560px;
}
.landing-vehicle__description p { margin: 0; }

.landing-vehicle__highlights { padding-top: 0.25rem; }
.landing-vehicle__hl-heading { font-size: 0.88rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--oj-blue); margin: 0 0 0.55rem; }
.landing-vehicle__hl-list { list-style: square; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.1rem; padding-left: 1rem; }
.landing-vehicle__hl-list li { font-size: 0.95rem; color: rgba(255,255,255,0.92); padding-left: .5rem; position: relative; line-height: 1.5; }


.landing-vehicle__ctas { 
  padding-top: 0.5rem; 
}

.landing-vehicle__discover {
   color: var(--oj-blue);
   font-size: 1.35rem;
   font-weight: 600;
   letter-spacing: 0.04em;
   text-decoration: none;
   margin-bottom: .5rem;
}


/* Content row: copy block + companion image — mobile: stacked */
.landing-vehicle__content-row {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: relative;
  z-index: 1;
  /* max-height: 520px; */
}

/* Companion image (field_vehicle_detail_image shown beside copy at desktop) */
.landing-vehicle__companion {
  overflow: hidden;
  width: 100%;
}

.landing-vehicle__companion img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Spec strip — mobile: 2-column dark strip */
.landing-vehicle__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: var(--oj-black);
  position: relative;
  z-index: 1;
}

.landing-vehicle__spec {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.5rem 1.25rem;
}

.landing-vehicle__spec-icon-wrapper {
  width: 100%;
}

.landing-vehicle__spec-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
}

.landing-vehicle__spec:nth-child(even) { border-right: none; }
.landing-vehicle__spec-icon { font-size: 1.25rem; color: var(--oj-white); line-height: 1; }
.landing-vehicle__spec-icon--png { 
  width: 50px; height: 50px; object-fit: contain; display: block; 
  float: left;
}
.landing-vehicle__spec-label { font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oj-white); font-weight: 600; }
.landing-vehicle__spec-value { 
  font-size: 1rem; font-weight: 400; color: var(--oj-white); line-height: 1.3; 
  width: 100%;
  max-width: 180px;
}


/* ── Older oj-fvs vehicle section (kept for template compatibility) ── */
.oj-fvs { border-top: 1px solid rgba(255,255,255,0.12); }

.oj-fvs__header { text-align: center; padding: 2.5rem 1.5rem 1.5rem; }

.oj-fvs__title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oj-white);
  margin: 0;
}

.oj-fvs__body { display: flex; flex-direction: column; }

.oj-fvs__media {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--oj-dark);
  flex-shrink: 0;
}
.oj-fvs__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.oj-fvs:hover .oj-fvs__media img { transform: scale(1.03); }

.oj-fvs__content {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.oj-fvs__tagline { font-size: clamp(1.2rem, 3vw, 1.75rem); font-weight: 400; color: var(--oj-white); margin: 0; line-height: 1.3; }
.oj-fvs__overview { font-size: 0.95rem; line-height: 1.8; color: rgba(255,255,255,0.8); margin: 0; }

.oj-fvs__hl-heading { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--oj-silver); margin: 0 0 0.75rem; }
.oj-fvs__hl-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.oj-fvs__hl-list li { font-size: 0.95rem; color: rgba(255,255,255,0.92); padding-left: 1.5rem; position: relative; line-height: 1.55; }
.oj-fvs__hl-list li::before { content: '▸'; position: absolute; left: 0; color: var(--oj-silver); font-size: 0.8rem; top: 0.1em; }

.oj-fvs__ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.oj-fvs__discover { color: var(--oj-white); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; border-bottom: 2px solid rgba(255,255,255,0.5); padding-bottom: 3px; transition: border-color 0.2s, color 0.2s; }
.oj-fvs__discover:hover { color: var(--oj-silver); border-bottom-color: var(--oj-silver); }

.oj-fvs__specs { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--oj-dark); border-top: 1px solid rgba(46,58,66,0.55); }
.oj-fvs__spec-item { padding: 1.25rem 1rem; text-align: center; border-right: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
.oj-fvs__spec-item:nth-child(even) { border-right: none; }
.oj-fvs__spec-label { display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oj-silver); margin-bottom: 0.5rem; font-weight: 600; }
.oj-fvs__spec-value { display: block; font-size: 0.88rem; font-weight: 600; color: var(--oj-white); line-height: 1.35; }


/* ==========================================================================
   HOMEPAGE — Test Drive Form
   ========================================================================== */

.oj-front-test-drive {
  background: var(--oj-blue);
  padding: 5rem 1.5rem;
  position: relative;
  overflow: hidden;
  border-top: 3px solid rgba(255,255,255,0.55);
}

/* Large angular pale shape on the right — matches designer PDF */
.oj-front-test-drive::before {
  content: '';
  position: absolute;
  right: -10%;
  top: 10%;
  width: 50%;
  height: 85%;
  background: rgba(255,255,255,0.45);
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  z-index: 0;
}

/* Region wrapper: override Bootstrap .row, constrain width */
.oj-front-test-drive .region-front-test-drive {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Section heading */
.oj-ftd__header {
  text-align: left;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.oj-ftd__header .oj-section-heading__label { color: rgba(255,255,255,0.65); margin-bottom: 0.5rem; }

.oj-ftd__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 300;
  color: var(--oj-white);
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}

.oj-ftd__sub { font-size: 0.9rem; color: rgba(255,255,255,0.8); line-height: 1.65; max-width: 55ch; margin: 0; }

/* Form base class (all contexts) */
.oj-test-drive-form .form-item { margin-bottom: 0; }
.oj-test-drive-form .mb-3 { margin-bottom: 0 !important; }

/* Front-page form variant: visually hide labels */
.oj-test-drive-form--front label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Light-coloured inputs on teal — matches designer PDF */
.oj-test-drive-form--front input[type="text"],
.oj-test-drive-form--front input[type="email"],
.oj-test-drive-form--front input[type="tel"],
.oj-test-drive-form--front input[type="date"],
.oj-test-drive-form--front select,
.oj-test-drive-form--front textarea {
  background: rgba(235, 248, 250, 0.92) !important;
  color: var(--oj-dark) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 1rem 1.25rem !important;
  min-height: 56px;
  width: 100%;
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: none !important;
  transition: background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.oj-test-drive-form--front input[type="text"]:focus,
.oj-test-drive-form--front input[type="email"]:focus,
.oj-test-drive-form--front input[type="tel"]:focus,
.oj-test-drive-form--front input[type="date"]:focus,
.oj-test-drive-form--front select:focus,
.oj-test-drive-form--front textarea:focus {
  background: rgba(235, 248, 250, 1) !important;
  outline: 2px solid rgba(255,255,255,0.55);
  box-shadow: none !important;
}

.oj-test-drive-form--front input::placeholder,
.oj-test-drive-form--front textarea::placeholder { color: var(--oj-dark); }

.oj-test-drive-form--front textarea { min-height: 150px; resize: vertical; }

/* Select: custom dark arrow */
.oj-test-drive-form--front select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231d2a2d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 12px 8px !important;
  padding-right: 2.5rem !important;
}
.oj-test-drive-form--front select option { background: #fff; color: #1d2a2d; }

.oj-test-drive-form--front input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }

/* Mobile: single column, full-width submit */
.oj-test-drive-form--front.webform-submission-form { display: flex; flex-direction: column; gap: 0.75rem; }

.oj-test-drive-form--front .webform-actions,
.oj-test-drive-form--front .form-actions { display: flex; justify-content: stretch; margin-top: 0.25rem; }

/* Submit button: dark rectangle */
.oj-test-drive-form--front .webform-button--submit,
.oj-test-drive-form--front input[type="submit"],
.oj-test-drive-form--front .form-actions input {
  background: #1a2529 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 1rem 2rem !important;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-transform: none;
  box-shadow: none !important;
  transition: background 0.2s;
  width: 100%;
}
.oj-test-drive-form--front .webform-button--submit:hover,
.oj-test-drive-form--front input[type="submit"]:hover { background: var(--oj-dark) !important; }

.oj-test-drive-form--front .form-required::after { color: rgba(255,255,255,0.7); }

/* Hide Preferred Date on homepage */
.oj-test-drive-form--front .js-form-item-preferred-date { display: none !important; }


/* ==========================================================================
   HOMEPAGE — Lower Section
   ========================================================================== */

/* Wrapper — silver background */
.oj-front-lower {
  background: var(--oj-silver);
  color: #2a2d30;
  border-top: 3px solid rgba(20,60,70,0.45);
}

/* ── Promo cards row ── */
.oj-front-promo-row { padding: 3rem 1.5rem 0; }

.oj-front-promo-row__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* let block children participate directly in the flex container */
.oj-front-promo-row .region-front-promo { display: contents; }
.oj-front-promo-row .region-front-promo > .block { flex: 1 1 0; min-width: 0; }

.oj-promo-card { display: flex; flex-direction: column; gap: 0; }
.oj-promo-card__image-link { display: block; text-decoration: none; }
.oj-promo-card__img { width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: #c8cdd2; }
.oj-promo-card__title { font-size: 2rem; font-weight: 600; color: #2a2d30; margin: 1.25rem 0 0.5rem; letter-spacing: -0.02em; line-height: 1.2; }
.oj-promo-card__text { font-size: 0.9rem; color: #555; margin: 0 0 0.75rem; line-height: 1.5; }
.oj-promo-card__more { display: none; }
.oj-promo-card__rule { border: none; border-top: 1px solid rgba(0,0,0,0.18); margin: 0.75rem 0 0; }

/* ── Info row ── */
.oj-front-info-row {
  padding: 2.5rem 1.5rem 2rem;
  border-top: 1px solid rgba(0,0,0,0.18);
}

.oj-front-info-row__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.oj-front-info-row .region-front-contact-strip { display: contents; }
.oj-front-info-row .region-front-contact-strip > .block { min-width: 0; }

/* Nav column — override the header nav styles for this context */
.oj-front-info-row .oj-header__nav {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
  position: static;
}
.oj-front-info-row .oj-header__nav a {
  color: #2a2d30;
  padding: 0.25rem 0;
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  display: block;
  border-bottom: none;
  border-top: none;
  text-transform: none;
  letter-spacing: normal;
}
.oj-front-info-row .oj-header__nav a:hover,
.oj-front-info-row .oj-header__nav a.is-active { color: var(--oj-blue); border-bottom: none; }

/* Bootstrap .nav fallback */
.oj-front-info-row .block-system-menu-block .nav { flex-direction: column; gap: 0.3rem; }
.oj-front-info-row .block-system-menu-block .nav-link { color: #2a2d30; padding: 0.25rem 0; font-size: 0.9rem; text-decoration: none; display: block; }
.oj-front-info-row .block-system-menu-block .nav-link:hover { color: var(--oj-blue); }
.oj-front-info-row .block-system-menu-block .nav-link.active { color: var(--oj-blue); }

/* Business details column */
.oj-info-business p { font-size: 0.85rem; line-height: 1.6; color: #2a2d30; margin: 0 0 0.5rem; }
.oj-info-business a { color: #2a2d30; text-decoration: none; }
.oj-info-business a:hover { color: var(--oj-blue); }
.oj-info-business { border-left: 1px solid rgba(0,0,0,0.18); padding-left: 1.25rem; }

/* Map column */
.oj-info-map .oj-info-map__label { font-size: 0.85rem; color: #2a2d30; margin: 0 0 0.5rem; }
.oj-info-map iframe { display: block; width: 100%; border: 0; }
.oj-info-map { border-left: 1px solid rgba(0,0,0,0.18); padding-left: 1.25rem; }

/* Newsletter / social column */
.oj-info-newsletter { border-left: 1px solid rgba(0,0,0,0.18); padding-left: 1.25rem; }
.oj-info-newsletter__title { font-size: 1.1rem; font-weight: 600; color: #2a2d30; margin: 0 0 0.25rem; }
.oj-info-newsletter__sub { font-size: 0.85rem; color: #555; margin: 0 0 0.75rem; }

.oj-newsletter-form { margin-bottom: 1.5rem; }
.oj-newsletter-form__row { display: flex; gap: 0; }
.oj-newsletter-form__input { flex: 1; padding: 0.65rem 1rem; background: #fff; border: 1px solid #aaa; border-right: none; font-size: 0.85rem; color: #2a2d30; outline: none; }
.oj-newsletter-form__input:focus { border-color: var(--oj-blue); }
.oj-newsletter-form__btn { padding: 0.65rem 1rem; background: #2a2d30; color: #fff; border: 1px solid #2a2d30; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.oj-newsletter-form__btn:hover { background: var(--oj-blue); border-color: var(--oj-blue); }

.oj-info-newsletter__social-title { font-size: 1rem; font-weight: 600; color: #2a2d30; margin: 0 0 0.5rem; }
.oj-info-newsletter__social-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.oj-social-icon { display: flex; align-items: center; justify-content: center; color: var(--oj-dark); text-decoration: none; transition: color 0.2s; }
.oj-social-icon svg { width: 32px; height: 32px; }
.oj-social-icon:hover { color: var(--oj-blue); }
.oj-social-label { font-size: 0.85rem; color: #2a2d30; }

/* Mobile: remove left borders on info columns (added back at tablet+) */
.oj-info-business,
.oj-info-map,
.oj-info-newsletter { border-left: none; padding-left: 0; }

/* Divider between promo row and info row */
.oj-front-lower hr,
.oj-front-lower__divider { border: none; border-top: 1px solid rgba(0,0,0,0.18); margin: 0 1.5rem; }

/* ── Legal bar ── */
.oj-front-legal { border-top: 1px solid rgba(0,0,0,0.18); padding: 1rem 1.5rem; }

.oj-front-legal__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.oj-front-legal__copy { font-size: 0.8rem; color: #555; }

.oj-front-legal__links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
.oj-front-legal__links li::before { content: none; }
.oj-front-legal__links li:not(:first-child)::before { content: '|'; padding: 0 0.65rem; color: #777; font-size: 0.75rem; }
.oj-front-legal__links a { font-size: 0.8rem; color: #555; text-decoration: none; transition: color 0.2s; }
.oj-front-legal__links a:hover { color: var(--oj-blue); }

/* Misc: hide empty news view message on front page */
.oj-news-section .view-empty { display: none; }

/* ============================================================================
   ●  INNER PAGES
   ============================================================================ */


/* ==========================================================================
   INNER PAGES — Shared
   ========================================================================== */

.oj-section { padding: 3.5rem 0; }
.oj-section--dark { background: var(--oj-dark); color: var(--oj-white); }
.oj-section-heading { margin-bottom: 2rem; }
.oj-section-heading__label { display: block; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oj-blue); font-weight: 600; margin-bottom: 0.75rem; }
.oj-section-heading__title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 300; letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 1rem; }
.oj-section-heading__sub { color: var(--oj-silver); font-size: 1rem; max-width: 54ch; margin: 0 auto; line-height: 1.6; }

/* Inner page hero (not the front page hero) */
.oj-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--oj-dark) url('../assets/images/hero-bg.webp') center center / cover no-repeat;
  overflow: hidden;
}
.oj-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,14,14,0.85) 0%, rgba(13,14,14,0.45) 60%, rgba(13,14,14,0.75) 100%); z-index: 1; }
.oj-hero__content { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; padding-top: 72px; color: var(--oj-white); }
.oj-hero__eyebrow { font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oj-blue); margin-bottom: 1.25rem; font-weight: 600; }
.oj-hero__title { font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.oj-hero__title-accent { color: var(--oj-blue); display: block; font-weight: 700; }
.oj-hero__subtitle { font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(255,255,255,0.75); max-width: 42ch; margin-bottom: 2.5rem; line-height: 1.6; }
.oj-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }
.oj-hero__scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; }
.oj-hero__scroll-indicator span { display: block; width: 1px; height: 60px; background: linear-gradient(to bottom, transparent, var(--oj-blue)); margin: 0 auto; animation: oj-scroll-pulse 2s ease-in-out infinite; }

/* Shorter inner hero (used on /news, /contact etc.) */
.oj-inner-hero { position: relative; padding: 5.5rem 1rem 3rem; background: var(--oj-dark) center center / cover no-repeat; color: var(--oj-white); overflow: hidden; }
.oj-inner-hero--dark { background-color: var(--oj-dark); }
.oj-inner-hero__overlay { position: absolute; inset: 0; background: rgba(13, 14, 14, 0.7); z-index: 1; }
.oj-inner-hero .container-xl,
.oj-inner-hero > .container-xl { position: relative; z-index: 2; }
.oj-inner-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 0.75rem; }
.oj-inner-hero__sub { font-size: 1rem; color: rgba(255,255,255,0.7); max-width: 56ch; line-height: 1.65; margin-top: 0.75rem; }

/* Old inner-page brand intro (different from homepage .oj-brand-intro-official) */
.oj-brand-intro { background: var(--oj-dark); color: var(--oj-white); }
.oj-brand-intro__inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.oj-brand-intro__tagline { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 300; color: var(--oj-blue); margin-bottom: 1.25rem; line-height: 1.5; }
.oj-brand-intro__body { color: rgba(255,255,255,0.7); line-height: 1.75; margin-bottom: 2rem; }
.oj-brand-intro__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.oj-brand-intro__brands { display: flex; flex-direction: column; gap: 1.5rem; }
.oj-brand-pill { border: 1px solid rgba(103, 179, 196, 0.3); padding: 1.5rem 2rem; transition: border-color 0.3s, background 0.3s; }
.oj-brand-pill:hover { border-color: var(--oj-blue); background: rgba(103, 179, 196, 0.05); }
.oj-brand-pill__name { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.05em; color: var(--oj-white); margin-bottom: 0.25rem; }
.oj-brand-pill__desc { font-size: 0.85rem; color: var(--oj-blue); letter-spacing: 0.1em; text-transform: uppercase; }

/* CTA block */
.oj-cta-block--dark { background: var(--oj-dark); border-top: 1px solid rgba(103, 179, 196, 0.2); border-bottom: 1px solid rgba(103, 179, 196, 0.2); }
.oj-cta-block__inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
.oj-cta-block__title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 300; color: var(--oj-white); margin-bottom: 0.75rem; }
.oj-cta-block__body { color: rgba(255,255,255,0.65); line-height: 1.6; max-width: 50ch; }
.oj-cta-block__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* Contact strip (inner pages) */
.oj-contact-strip { border-top: 1px solid rgba(103, 179, 196, 0.15); }
.oj-contact-strip__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.oj-contact-strip__item { display: flex; align-items: flex-start; gap: 1rem; color: rgba(255,255,255,0.8); }
.oj-contact-strip__icon { color: var(--oj-blue); flex-shrink: 0; margin-top: 0.25rem; }
.oj-contact-strip__label { display: block; color: var(--oj-white); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4rem; }
.oj-contact-strip p { font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.65); margin: 0; }
.oj-contact-strip a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s; }
.oj-contact-strip a:hover { color: var(--oj-blue); }


/* ==========================================================================
   INNER PAGES — Vehicle
   ========================================================================== */

/* Vehicle cards (listing page) */
.oj-vehicle-card { background: var(--oj-dark); border: 1px solid rgba(255,255,255,0.06); transition: border-color 0.3s, transform 0.3s; display: flex; flex-direction: column; height: 100%; }
.oj-vehicle-card:hover { border-color: var(--oj-blue); transform: translateY(-4px); }
.oj-vehicle-card__image-link { display: block; overflow: hidden; }
.oj-vehicle-card__image-wrap { overflow: hidden; aspect-ratio: 16 / 9; background: var(--oj-dark); background-size: cover; background-position: center; }
.oj-vehicle-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }
.oj-vehicle-card__image-wrap img[src=""] { display: none; }
.oj-vehicle-card:hover .oj-vehicle-card__image-wrap img { transform: scale(1.06); }
.oj-vehicle-card__image-placeholder { display: flex; align-items: center; justify-content: center; color: var(--oj-silver); font-size: 0.8rem; }
.oj-vehicle-card__image-placeholder span { display: none; }

/* Per-node fallback banner images for vehicle listing cards */
[data-history-node-id="4"]  .oj-vehicle-card__image-wrap { background-image: url('../assets/images/vehicle-c5hev-banner.jpg'); }
[data-history-node-id="6"]  .oj-vehicle-card__image-wrap { background-image: url('../assets/images/vehicle-e5-banner.webp'); }
[data-history-node-id="7"]  .oj-vehicle-card__image-wrap { background-image: url('../assets/images/vehicle-j7phev-banner.jpg'); }
[data-history-node-id="8"]  .oj-vehicle-card__image-wrap { background-image: url('../assets/images/vehicle-j7phev-banner.jpg'); }
[data-history-node-id="9"]  .oj-vehicle-card__image-wrap { background-image: url('../assets/images/vehicle-j7phev-banner.jpg'); }
[data-history-node-id="10"] .oj-vehicle-card__image-wrap { background-image: url('../assets/images/vehicle-j8phev-banner.jpg'); }

.oj-vehicle-card__body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.oj-vehicle-card__badges { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.oj-badge { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.6rem; font-weight: 600; }
.oj-badge--brand { background: transparent; border: 1px solid var(--oj-blue); color: var(--oj-blue); }
.oj-badge--powertrain { background: rgba(103, 179, 196, 0.12); color: var(--oj-blue); }
.oj-vehicle-card__title { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.25rem; line-height: 1.3; }
.oj-vehicle-card__title a { color: var(--oj-white); text-decoration: none; }
.oj-vehicle-card__title a:hover { color: var(--oj-blue); }
.oj-vehicle-card__model-code { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--oj-silver); margin-bottom: 0.5rem; }
.oj-vehicle-card__tagline { font-size: 0.9rem; color: rgba(255,255,255,0.6); line-height: 1.5; margin-bottom: 0.75rem; flex: 1; }
.oj-vehicle-card__specs { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.08); }
.oj-vehicle-card__spec { font-size: 0.8rem; color: var(--oj-silver); }
.oj-vehicle-card__cta { margin-top: auto; }

/* Vehicle full-page hero */
.oj-vehicle-hero { position: relative; min-height: 55vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--oj-dark); }
.oj-vehicle-hero__image { position: absolute; inset: 0; z-index: 1; }
.oj-vehicle-hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oj-vehicle-hero__image--placeholder { background-color: var(--oj-dark); background-size: cover; background-position: center; opacity: 0.85; }

/* Per-vehicle hero banner fallbacks */
.page-node-4  .oj-vehicle-hero__image--placeholder { background-image: url('../assets/images/vehicle-c5hev-banner.jpg'); }
.page-node-6  .oj-vehicle-hero__image--placeholder { background-image: url('../assets/images/vehicle-e5-banner.webp'); }
.page-node-7  .oj-vehicle-hero__image--placeholder { background-image: url('../assets/images/vehicle-j7phev-banner.jpg'); }
.page-node-8  .oj-vehicle-hero__image--placeholder { background-image: url('../assets/images/vehicle-j7phev-banner.jpg'); }
.page-node-9  .oj-vehicle-hero__image--placeholder { background-image: url('../assets/images/vehicle-j7phev-banner.jpg'); }
.page-node-10 .oj-vehicle-hero__image--placeholder { background-image: url('../assets/images/vehicle-j8phev-banner.jpg'); }

.oj-vehicle-hero__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(13,14,14,0.92) 0%, rgba(13,14,14,0.5) 50%, rgba(13,14,14,0.2) 100%); }
.oj-vehicle-hero__content { position: relative; z-index: 3; width: 100%; padding: 3rem 0 2rem; color: var(--oj-white); }
.oj-vehicle-hero__badges { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.oj-vehicle-hero__model-code { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oj-silver); margin-bottom: 0.5rem; }
.oj-vehicle-hero__title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 0.75rem; }
.oj-vehicle-hero__tagline { font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(255,255,255,0.75); margin-bottom: 2rem; max-width: 50ch; }
.oj-vehicle-hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; flex-direction: column; }

/* Vehicle overview */
.oj-vehicle-overview { background: var(--oj-dark); color: var(--oj-white); }
.oj-vehicle-overview .oj-section-heading__title { color: var(--oj-white); }
.oj-vehicle-overview__body { font-size: 1.05rem; line-height: 1.8; color: rgba(255,255,255,0.75); }

/* Spec grid */
.oj-vehicle-specs { border-top: 1px solid rgba(103, 179, 196, 0.2); }
.oj-spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid rgba(255,255,255,0.08); }
.oj-spec-item { padding: 1.25rem 1rem; border-right: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); text-align: center; transition: background 0.2s; }
.oj-spec-item:hover { background: rgba(103, 179, 196, 0.06); }
.oj-spec-item__icon { color: var(--oj-blue); margin-bottom: 0.75rem; display: flex; justify-content: center; }
.oj-spec-item__value { font-size: 0.95rem; font-weight: 600; color: var(--oj-white); margin-bottom: 0.3rem; line-height: 1.3; }
.oj-spec-item__label { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oj-silver); }

/* Key features */
.oj-vehicle-features { background: var(--oj-dark); color: var(--oj-white); }
.oj-vehicle-features .oj-section-heading__title { color: var(--oj-white); }
.oj-features-body ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.oj-features-body ul li { padding: 0.85rem 1.25rem; border-left: 2px solid var(--oj-blue); background: rgba(103, 179, 196, 0.05); color: rgba(255,255,255,0.8); font-size: 0.9rem; line-height: 1.4; }
.oj-features-body em { font-size: 0.8rem; color: var(--oj-silver); font-style: italic; display: block; margin-top: 1rem; }

/* Exterior colours */
.oj-vehicle-colours { border-top: 1px solid rgba(103, 179, 196, 0.1); }
.oj-colours-list { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* Gallery */
.oj-vehicle-gallery { background: var(--oj-dark); color: var(--oj-white); }
.oj-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; }
.oj-gallery-grid img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.4s; }
.oj-gallery-grid img:hover { transform: scale(1.03); }

/* Vehicle CTA strip */
.oj-vehicle-cta-strip__inner { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.oj-vehicle-cta-strip__item { padding: 1.5rem; border: 1px solid rgba(255,255,255,0.08); }
.oj-vehicle-cta-strip__item--highlight { background: rgba(103, 179, 196, 0.08); border-color: rgba(103, 179, 196, 0.3); }
.oj-vehicle-cta-strip__item h3 { font-size: 1.25rem; font-weight: 600; color: var(--oj-white); margin-bottom: 0.5rem; }
.oj-vehicle-cta-strip__item p { color: rgba(255,255,255,0.6); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.25rem; }

/* Bottom CTA strip on vehicle inner pages */
.oj-vehicle-cta-strip { background: var(--oj-blue); color: var(--oj-white); }
.oj-vehicle-cta-strip__heading { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 300; margin-bottom: 1.5rem; line-height: 1.4; }
.oj-vehicle-cta-strip__actions { display: flex; flex-direction: column; gap: 0.75rem; }

/* Breadcrumb wrapper (inner vehicle pages) */
.oj-vehicle-breadcrumb-wrap { background: var(--oj-dark); border-bottom: 1px solid rgba(255,255,255,0.06); }


/* ==========================================================================
   INNER PAGES — News
   ========================================================================== */

.oj-news-card { background: var(--oj-dark); border: 1px solid rgba(255,255,255,0.06); transition: border-color 0.3s, transform 0.3s; display: flex; flex-direction: column; height: 100%; }
.oj-news-card:hover { border-color: var(--oj-blue); transform: translateY(-4px); }
.oj-news-card__image-link { display: block; overflow: hidden; }
.oj-news-card__image-wrap { overflow: hidden; aspect-ratio: 16 / 9; background: var(--oj-dark); }
.oj-news-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }
.oj-news-card:hover .oj-news-card__image-wrap img { transform: scale(1.06); }
.oj-news-card__body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.oj-news-card__date { font-size: 0.75rem; color: var(--oj-blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.6rem; }
.oj-news-card__title { font-size: 1.05rem; font-weight: 600; line-height: 1.35; margin-bottom: 0.75rem; }
.oj-news-card__title a { color: var(--oj-white); text-decoration: none; }
.oj-news-card__title a:hover { color: var(--oj-blue); }
.oj-news-card__summary { font-size: 0.9rem; color: rgba(255,255,255,0.6); line-height: 1.6; flex: 1; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.oj-news-card__read-more { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oj-blue); text-decoration: none; margin-top: auto; transition: gap 0.2s; }
.oj-news-card__read-more:hover { gap: 0.7rem; color: var(--oj-blue); }

/* News full page */
.oj-news-hero { position: relative; height: 40vh; min-height: 240px; overflow: hidden; background: var(--oj-dark); }
.oj-news-hero__image { position: absolute; inset: 0; }
.oj-news-hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oj-news-hero__image--placeholder { background: var(--oj-dark); }
.oj-news-hero__overlay { position: absolute; inset: 0; background: rgba(13,14,14,0.45); }

.oj-news-article { padding: 3rem 0 4rem; background: var(--oj-dark); color: var(--oj-white); }
.oj-news-article__date { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oj-blue); margin-bottom: 1rem; }
.oj-news-article__title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 1.5rem; color: var(--oj-white); }
.oj-news-article__summary { font-size: 1.1rem; color: rgba(255,255,255,0.75); line-height: 1.65; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.oj-news-article__body { font-size: 1rem; line-height: 1.85; color: rgba(255,255,255,0.75); margin-bottom: 2.5rem; }
.oj-news-article__body h2, .oj-news-article__body h3 { color: var(--oj-white); margin-top: 2rem; margin-bottom: 0.75rem; }
.oj-news-article__body a { color: var(--oj-blue); }
.oj-news-article__back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oj-blue); text-decoration: none; transition: gap 0.2s; }
.oj-news-article__back-link:hover { gap: 0.7rem; color: var(--oj-blue); }


/* ==========================================================================
   INNER PAGES — Contact
   ========================================================================== */

.oj-contact-detail-list { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; }
.oj-contact-detail-item { display: flex; gap: 1rem; align-items: flex-start; }
.oj-contact-detail-item__icon { color: var(--oj-blue); flex-shrink: 0; margin-top: 0.2rem; }
.oj-contact-detail-item strong { display: block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oj-silver); margin-bottom: 0.3rem; }
.oj-contact-detail-item p { font-size: 0.95rem; line-height: 1.6; margin: 0; color: var(--oj-white); }
.oj-contact-detail-item a { color: var(--oj-white); text-decoration: none; transition: color 0.2s; }
.oj-contact-detail-item a:hover { color: var(--oj-blue); }

.oj-map-placeholder { background: var(--oj-dark); border: 1px solid rgba(255,255,255,0.08); min-height: 280px; display: flex; align-items: center; justify-content: center; margin-top: 2rem; }
.oj-map-placeholder__inner { text-align: center; color: rgba(255,255,255,0.5); padding: 2rem; }
.oj-map-placeholder__inner svg { opacity: 0.4; margin-bottom: 1rem; }
.oj-map-placeholder__inner p { font-size: 0.9rem; line-height: 1.5; margin-bottom: 1rem; }

.oj-contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.oj-contact-form-col .oj-webform-wrapper { margin-top: 0; }

.oj-contact-map-section { padding: 0 0 4rem; }
.oj-map-embed { width: 100%; overflow: hidden; border: 1px solid rgba(103, 179, 196, 0.15); }
.oj-map-embed iframe { display: block; width: 100%; height: 380px; border: 0; }
.oj-map-embed .simple-gmap-link { display: inline-block; margin-top: 0.75rem; font-size: 0.85rem; color: var(--oj-blue); text-decoration: none; }
.oj-map-embed .simple-gmap-link:hover { text-decoration: underline; }


/* ==========================================================================
   INNER PAGES — Test Drive Page
   ========================================================================== */

.oj-test-drive-form-wrap { padding: 3rem 0 4rem; background: var(--oj-dark); color: var(--oj-white); }

.oj-webform-wrapper { background: var(--oj-dark); padding: 1.5rem; border: 1px solid rgba(103, 179, 196, 0.15); }
.oj-webform-wrapper .form-item label { color: rgba(255,255,255,0.85); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.4rem; display: block; }
.oj-webform-wrapper .form-control,
.oj-webform-wrapper input[type="text"],
.oj-webform-wrapper input[type="email"],
.oj-webform-wrapper input[type="tel"],
.oj-webform-wrapper input[type="date"],
.oj-webform-wrapper textarea,
.oj-webform-wrapper select { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); color: var(--oj-white); border-radius: 0; padding: 0.65rem 1rem; width: 100%; font-size: 0.95rem; transition: border-color 0.2s; }
.oj-webform-wrapper input:focus,
.oj-webform-wrapper textarea:focus,
.oj-webform-wrapper select:focus { outline: none; border-color: var(--oj-blue); background: rgba(103, 179, 196, 0.05); }
.oj-webform-wrapper .form-submit,
.oj-webform-wrapper [type="submit"] { background: var(--oj-blue); color: var(--oj-dark); border: none; padding: 0.85rem 2.5rem; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s; border-radius: 0; margin-top: 1rem; }
.oj-webform-wrapper .form-submit:hover,
.oj-webform-wrapper [type="submit"]:hover { background: var(--oj-white); color: var(--oj-dark); }

.oj-test-drive-sidebar { background: var(--oj-dark); padding: 1.5rem; border: 1px solid rgba(255,255,255,0.06); margin-top: 2rem; }
.oj-test-drive-sidebar__title { font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oj-blue); border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.oj-test-drive-sidebar__item { margin-bottom: 1.25rem; }
.oj-test-drive-sidebar__item strong { display: block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oj-silver); margin-bottom: 0.3rem; }
.oj-test-drive-sidebar__item p { font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.75); margin: 0; }
.oj-test-drive-sidebar__item a { color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.2s; }
.oj-test-drive-sidebar__item a:hover { color: var(--oj-blue); }

.oj-alert { padding: 1.5rem; background: rgba(46, 58, 66, 0.15); border: 1px solid rgba(46, 58, 66, 0.4); color: var(--oj-white); font-size: 0.95rem; line-height: 1.6; }
.oj-alert a { color: var(--oj-blue); }


/* ==========================================================================
   INNER PAGES — Footer
   ========================================================================== */

.oj-footer { background: var(--oj-blue); padding: 3rem 1rem; margin-top: auto; }

.oj-footer__top { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 2rem; 
  margin: 0 auto; 
  padding: 0 1.5rem 3rem; 
}

/* Neutralise Bootstrap .row negative margins on footer region wrappers */
.oj-footer__top .region:not(:last-of-type) { 
  --bs-gutter-x: 0; 
  margin-left: 0 !important; 
  margin-right: 0 !important; 
  padding-right: 1rem;
  min-width: 0; 
  padding-bottom: 1rem;
  border-bottom: .035rem solid var(--oj-dark);
}

.oj-footer__brand img { height: 48px; margin-bottom: 1rem; }
.oj-footer__brand-desc { font-size: 0.85rem; color: rgba(46,58,66,0.7); max-width: 280px; line-height: 1.7; }
.oj-footer__col-title { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--oj-blue); margin-bottom: 1rem; font-weight: 600; }
.oj-footer__nav { list-style: none; margin: 0; padding: 0; }
.oj-footer__nav li { margin-bottom: 0.5rem; 
  width: 100%;

}
.oj-footer__nav a {
  font-size: 0.85rem;
  color: var(--oj-dark);
  transition: color var(--transition-base);
  -webkit-transition: color var(--transition-base);
  -moz-transition: color var(--transition-base);
  -ms-transition: color var(--transition-base);
  -o-transition: color var(--transition-base);
}
.oj-footer__nav a:hover { color: var(--oj-blue); }

/* Footer nav uses menu--main.html.twig which outputs ul.oj-header__nav — override for dark footer column */
.oj-footer .oj-header__nav { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; margin: 0; padding: 0; background: transparent; position: static;  
  width: 100%;
}

.oj-footer .oj-header__nav li { margin: 0; width: 100%; }
.oj-footer .oj-header__nav a { 
  color: var(--oj-dark); font-size: 0.95rem; font-weight: 600; text-decoration: none; padding: 0; border: none; text-transform: none; letter-spacing: normal; display: block; transition: color var(--transition-base); 
  text-align: left;
  width: auto;
}
.oj-footer .oj-header__nav a:hover,
.oj-footer .oj-header__nav a.is-active { width: auto; max-width: 100px; color: var(--oj-white); border: none; }

.oj-footer #block-oj-footer-nav h2 { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--oj-blue); margin: 0 0 1rem; font-weight: 600; }

.oj-footer__contact-item { font-size: 0.85rem; color: var(--oj-dark); margin-bottom: 0.5rem; line-height: 1.5; font-weight: 600; }
.oj-footer__contact-item strong { color: var(--oj-dark); }
.oj-footer__contact-item a { font-size: 0.95rem; color: var(--oj-dark); text-decoration: none; }
.oj-footer__contact-item a:hover { color: var(--oj-white); }
.oj-footer__contact-item p { margin: 0;}

.oj-footer__bottom { border-top: .125rem solid var(--oj-dark); padding: 1.25rem 1.5rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; }
.oj-footer__copyright { font-size: 0.8rem; color: rgba(46,58,66,0.65); }
.oj-footer__legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.oj-footer__legal-links a { font-size: 0.8rem; color: rgba(46,58,66,0.65); }
.oj-footer__legal-links a:hover { color: var(--oj-blue); }

/* Newsletter bar (dark footer — inner pages) */
.oj-footer__newsletter-bar { background: var(--oj-dark); border-bottom: 1px solid rgba(255,255,255,0.08); }
.oj-footer__nl-inner { max-width: 1440px; margin: 0 auto; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.oj-footer__nl-label { display: block; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--oj-blue); font-weight: 600; margin-bottom: 0.75rem; }
.oj-footer__social-icons { display: flex; gap: 1rem; }
.oj-footer__social-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.2); color: var(--oj-silver); border-radius: 2px; transition: border-color 0.2s, color 0.2s; }
.oj-footer__social-icon:hover { border-color: var(--oj-blue); color: var(--oj-blue); }
/* Muted until real social links are added */
.oj-footer__social-icon[href="#"] { opacity: 0.45; pointer-events: none; cursor: default; }
.oj-footer__nl-fields { display: flex; gap: 0; }
.oj-footer__nl-input { flex: 1; padding: 0.65rem 1rem; background: var(--oj-white); border: 1px solid rgba(0,0,0,0.2); border-right: none; color: var(--oj-dark); font-size: 0.9rem; outline: none; }
.oj-footer__nl-input:focus { border-color: var(--oj-blue); }
.oj-footer__nl-btn { padding: 0.65rem 1.25rem; background: var(--oj-dark); color: var(--oj-white); border: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; white-space: nowrap; }
.oj-footer__nl-btn:hover { background: var(--oj-blue); }


/* ==========================================================================
   HOMEPAGE — Test Drive Section
   Blocks are in featured_bottom_first. Target by ID since no semantic
   CSS class is applied to these two block wrappers.
   ========================================================================== 
*/

.region-featured-bottom-first {
  padding: 0 1.5rem;
  background-color: var(--oj-black);
}

#block-chepstow-omoda-promoarrangeatestdrive,
#block-chepstow-omoda-testdrivewebformblock {
  background: var(--oj-black);
}

#block-chepstow-omoda-promoarrangeatestdrive {
  padding: 4rem 1.5rem 1.5rem;
  border-top: 3px solid var(--oj-blue);
  position: relative;
  overflow: hidden;
}

/* PDF-style pale angular shape on right */
#block-chepstow-omoda-promoarrangeatestdrive::before {
  content: '';
  position: absolute;
  right: -10%;
  top: 5%;
  width: 55%;
  height: 90%;
  background-color: rgba(255, 255, 255, 0.09);
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  z-index: 0;
}

/* Override the card-row .oj-promo-card__title default (dark text) for this block */
#block-chepstow-omoda-promoarrangeatestdrive .oj-promo-card__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  text-transform: inherit;
  font-weight: 600;
  color: var(--oj-blue);
  margin: 0;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

/* Form block: continues the teal section, constrains form width */
#block-chepstow-omoda-testdrivewebformblock {
  padding: 1rem 1.5rem 4rem;
}

#block-chepstow-omoda-testdrivewebformblock > .content {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

#block-chepstow-omoda-testdrivecountryselector {
  margin: 2rem 0 4rem;
}

#block-chepstow-omoda-testdrivecountryselector .container-xl {
  margin: 0;
  padding: 0 4rem 0;
}

#block-chepstow-omoda-testdrivecountryselector .oj-td-selector__label {
  font-weight: 600;
  display: none;
}

#block-chepstow-omoda-testdrivecountryselector .oj-td-selector__btn {
  max-width: 240px;
}

/* ==========================================================================
   HOMEPAGE — CTA / Promo Card Blocks (block-content-landing_cta_card)
   Three blocks in featured_bottom_second: news launch, test drive CTA, contact.
   ========================================================================== */

/* Neutralise Bootstrap .row gutter on both featured-bottom regions */
.region-featured-bottom-first,
.region-featured-bottom-second {
  --bs-gutter-x: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.region-featured-bottom-second {
  padding: 2rem 1.5rem;
  background-color: var(--oj-blue);

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 1rem 1.5rem;
}


/* Each card: silver background, full-width on mobile */
.block-content-landing_cta_card {
  width: 100%;
  border-bottom: .125rem solid var(--oj-dark);
}

/* Card image: cover-cropped 16:10; background shows before lazy images load */
.block-content-landing_cta_card .field--name-field-card-image { 
  overflow: hidden; 
  flex-shrink: 0; 
}

  .block-content-landing_cta_card .field--name-field-card-image img {
  width: 100%;
  /*aspect-ratio: 16 / 10;
  */object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
  max-width: none;
  height: auto;
  -webkit-transition: transform 0.6s ease;
  -moz-transition: transform 0.6s ease;
  -ms-transition: transform 0.6s ease;
  -o-transition: transform 0.6s ease;
}
.block-content-landing_cta_card:hover .field--name-field-card-image img {
  transform: scale(1.04);
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  -o-transform: scale(1.04);
}

/* Card text */
.block-content-landing_cta_card .field--name-body { padding: .5rem 0 0.5rem; margin-bottom: 1.55rem; }
.block-content-landing_cta_card .field--name-body h2,
.block-content-landing_cta_card .field--name-body h3 {
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--oj-dark);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.block-content-landing_cta_card .field--name-body p,
.block-content-landing_cta_card .field--name-body p a,
.block-content-landing_cta_card .field--name-body p button {
  font-size: 1.2rem;
  color: var(--oj-dark);
  margin: 0;
  line-height: 1.5;
  position: relative;
}

.block-content-landing_cta_card .field--name-body p button {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

/* Card link */
.block-content-landing_cta_card .field--name-field-card-link { padding: 0.75rem 1.5rem 1.75rem; margin-top: auto; }
.block-content-landing_cta_card .field--name-field-card-link a {
  display: inline-block;
  color: var(--oj-dark);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--oj-blue);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.block-content-landing_cta_card .field--name-field-card-link a:hover { color: var(--oj-blue); }

.block-content-landing_cta_card .field--name-body p a:hover,
.block-content-landing_cta_card .field--name-body p button:hover {
  color: var(--oj-white);
  text-decoration: underline;
}

/* ==========================================================================
   HOMEPAGE — Footer content refinements
   ========================================================================== */

/* Map iframe in footer */
.oj-info-map iframe { display: block; width: 100%; height: 200px; border: 0; }
.oj-info-map__label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oj-blue); font-weight: 600; margin: 0 0 0.75rem; }

/* Newsletter webform in footer */
#block-chepstow-omoda-footernewsletterandsocialicons .webform-submission-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#block-chepstow-omoda-footernewsletterandsocialicons .form-item-your-e-mail-address,
#block-chepstow-omoda-footernewsletterandsocialicons #edit-footer-subscription-header {
  margin: .5rem 0 !important;
}

#block-chepstow-omoda-footernewsletterandsocialicons input[type="email"],
#block-chepstow-omoda-footernewsletterandsocialicons .form-control {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 0;
  color: var(--oj-dark);
  background-color: var(--oj-white);
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  width: 100%;
}
#block-chepstow-omoda-footernewsletterandsocialicons input[type="email"]:focus {
  background: rgba(255,255,255,0.1);
  border-color: var(--oj-blue);
  outline: none;
  box-shadow: none;
}

#block-chepstow-omoda-footernewsletterandsocialicons input[type="submit"],
#block-chepstow-omoda-footernewsletterandsocialicons .webform-button--submit {
  background: var(--oj-dark);
  color: var(--oj-white);
  border: none;
  border-radius: 0;
  padding: 0.65rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  width: auto;
  align-self: flex-start;
}
#block-chepstow-omoda-footernewsletterandsocialicons input[type="submit"]:hover {
  background: var(--oj-blue);
  colo
}
#block-chepstow-omoda-footernewsletterandsocialicons label { display: none; }

/* Social/newsletter heading inside footer block */
#block-chepstow-omoda-footernewsletterandsocialicons h2,
#block-chepstow-omoda-footernewsletterandsocialicons h3 {
  font-size: 1.75rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--oj-dark);
  font-weight: 700;
  margin: 0 0 0.5rem;
}

/* "Sign up for our newsletter" subtitle */
#block-chepstow-omoda-footernewsletterandsocialicons .js-webform-type-webform-markup p {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--oj-dark);
  margin: 0;
}

/* Social row: Facebook icon + label side by side */
#block-chepstow-omoda-footernewsletterandsocialicons .field--name-field-webform-subscription-body .field__item > div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
#block-chepstow-omoda-footernewsletterandsocialicons .field--name-field-webform-subscription-body a {
  display: block;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transition: transform .3s ease-in;
  -webkit-transition: transform .3s ease-in;
  -moz-transition: transform .3s ease-in;
  -ms-transition: transform .3s ease-in;
  -o-transition: transform .3s ease-in;
}

#block-chepstow-omoda-footernewsletterandsocialicons .field--name-field-webform-subscription-body a:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
}

#block-chepstow-omoda-footernewsletterandsocialicons .field--name-field-webform-subscription-body a:last-of-type {
  width: 27px;
  height: 27px;
}

#block-chepstow-omoda-footernewsletterandsocialicons .field--name-field-webform-subscription-body a::after {
  content: '';
  width: 0;
}

#block-chepstow-omoda-footernewsletterandsocialicons .field--name-field-webform-subscription-body img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#block-chepstow-omoda-footernewsletterandsocialicons .field--name-field-webform-subscription-body p {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--oj-dark);
  letter-spacing: 0.02em;
}
/* Hide the extra line break after "Follow Us" heading */
#block-chepstow-omoda-footernewsletterandsocialicons .field--name-field-webform-subscription-body h3 br { display: none; }


/* ==========================================================================
   TEST DRIVE MODAL
   ========================================================================== */

.oj-modal .modal-backdrop { background-color: rgba(46,58,66,0.85); }

.oj-modal__content {
  background: var(--oj-blue);
  border: none;
  border-radius: 0;
}

.oj-modal__header {
  background: var(--oj-blue);
  border-bottom: 1px solid rgba(46,58,66,0.2);
  padding: 1.5rem 2rem;
  align-items: center;
}

.oj-modal__title {
  color: var(--oj-dark);
  font-family: var(--font-primary);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.oj-modal__close {
  background: transparent;
  border: none;
  color: var(--oj-dark);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  margin-left: auto;
  opacity: 0.7;
  transition: opacity var(--transition-base);
}
.oj-modal__close:hover { opacity: 1; }

.oj-modal__body {
  background: var(--oj-blue);
  padding: 2rem;
}

/* Form inside modal — override dark-theme wrapper to blue-theme */
.oj-modal__body .oj-webform-wrapper {
  background: transparent;
  border: none;
  padding: 0;
}

.oj-modal__body .form-item label,
.oj-modal__body .form-label,
.oj-modal__body label {
  color: var(--oj-dark);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oj-modal__body .form-control,
.oj-modal__body input[type="text"],
.oj-modal__body input[type="email"],
.oj-modal__body input[type="tel"],
.oj-modal__body input[type="date"],
.oj-modal__body select,
.oj-modal__body textarea {
  background: var(--oj-white);
  border: 1px solid rgba(46,58,66,0.25);
  color: var(--oj-dark);
  border-radius: 0;
}

.oj-modal__body input:focus,
.oj-modal__body select:focus,
.oj-modal__body textarea:focus {
  outline: none;
  border-color: var(--oj-dark);
  background: var(--oj-white);
  box-shadow: none;
}

.oj-modal__body input::placeholder,
.oj-modal__body textarea::placeholder { color: var(--oj-dark); }

.oj-modal__body select option { background: var(--oj-white); color: var(--oj-dark); }

.oj-modal__body .form-submit,
.oj-modal__body [type="submit"] {
  background: var(--oj-dark);
  color: var(--oj-white);
  border: none;
  border-radius: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.85rem 2.5rem;
  transition: background var(--transition-base);
}

#webform-submission-contact-us-node-1-add-form .form-actions {
  display: flex;
  justify-content: flex-end;
}

#webform-submission-contact-us-node-1-add-form #edit-actions-submit--2 {
  width: 100%;
  max-width: 200px;
}

@media (max-width: 575.98px) {
  #webform-submission-contact-us-node-1-add-form .form-actions {
    justify-content: stretch;
  }

  #webform-submission-contact-us-node-1-add-form #edit-actions-submit--2 {
    max-width: none;
  }
}

.oj-modal__body .form-submit:hover,
.oj-modal__body [type="submit"]:hover { background: rgba(46,58,66,0.8); }


/* ==========================================================================
   TEST DRIVE COUNTRY SELECTOR
   ========================================================================== */

.oj-td-selector {
  background: var(--oj-black);
  padding: 3rem 0;
}

.oj-td-selector__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 430px;
}

.oj-td-selector__field { width: 100%; }

.oj-td-selector__label {
  display: block;
  color: var(--oj-dark);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.oj-td-selector__select-wrap {
  position: relative;
  width: 100%;
}
.oj-td-selector__select-wrap::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--oj-dark);
  pointer-events: none;
}

.oj-td-selector__select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--oj-silver);
  border: 1px solid rgba(46,58,66,0.25);
  color: var(--oj-dark);
  padding: 0.85rem 2.5rem 0.85rem 1rem;
  font-family: var(--font-primary);
  font-size: 1rem;
  cursor: pointer;
  border-radius: 0;
  transition: border-color 0.2s;
}
.oj-td-selector__select:focus {
  outline: none;
  border-color: var(--oj-dark);
}
.oj-td-selector__select option {
  background: var(--oj-white);
  color: var(--oj-dark);
}

.oj-td-selector__btn {
  width: 100%;
  text-align: center;
  cursor: pointer;
  border: none;
}


.webform-confirmation-modal {
  background-color: var(--oj-silver) !important;
  border: none;
  border-radius: 0;
}

.webform-confirmation-modal .ui-dialog-titlebar {
  padding: 1rem .5rem !important;
  background-color: var(--oj-blue) !important;
}

.webform-confirmation-modal .webform-confirmation-modal--content {
  padding: 1rem .5rem !important;
  min-height: unset !important;
  color: var(--oj-blue) !important;
  font-weight: 600;
}

.webform-confirmation-modal .ui-dialog-titlebar-close {
  background: var(--oj-white) !important;
  color: var(--oj-dark) !important;
}