.elementor-kit-22{--e-global-color-primary:#FF4500;--e-global-color-secondary:#E11833;--e-global-color-text:#222222;--e-global-color-accent:#363636;--e-global-color-1077da0:#FFFFFF;--e-global-color-5bcc117:#FFFFFF7A;--e-global-color-20e45ca:#FFFFFFAD;--e-global-color-c60a3c0:#000000;--e-global-color-2fe8db2:#00000080;--e-global-color-201b6c5:#000000BA;--e-global-color-bb571ed:#00000000;--e-global-color-or_light:#F4F4F4;--e-global-color-or_cardhov:#860F1F;--e-global-color-or_meta:#7A8292;--e-global-color-or_muted:#ADAFB1;--e-global-typography-primary-font-family:"Koulen";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Lato";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Lato";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Lato";--e-global-typography-accent-font-weight:700;--e-global-typography-02ad4e2-font-size:1.2rem;--e-global-typography-93031e8-font-weight:bold;--e-global-typography-9a8c69b-font-size:1.125rem;--e-global-typography-ff29a5e-font-size:0.875rem;--e-global-typography-ff8b1b3-font-family:"Koulen";--e-global-typography-ff8b1b3-font-size:clamp(2.5rem, 1.8846rem + 2.7350vw, 4rem);--e-global-typography-ff8b1b3-font-weight:400;--e-global-typography-c300c38-font-family:"Koulen";--e-global-typography-c300c38-font-size:clamp(2.4rem, 2.1231rem + 1.2308vw, 3rem);--e-global-typography-c300c38-font-weight:400;--e-global-typography-5a2b337-font-family:"Lato";--e-global-typography-5a2b337-font-size:clamp(2.1rem, 1.9154rem + 0.8205vw, 2.5rem);--e-global-typography-5a2b337-font-weight:700;--e-global-typography-f46c5f2-font-family:"Lato";--e-global-typography-f46c5f2-font-size:clamp(1.8rem, 1.7077rem + 0.4103vw, 2rem);--e-global-typography-f46c5f2-font-weight:700;--e-global-typography-d47b8cf-font-family:"Lato";--e-global-typography-d47b8cf-font-size:clamp(1.6rem, 1.5308rem + 0.3077vw, 1.75rem);--e-global-typography-d47b8cf-font-weight:700;--e-global-typography-cf8abfd-font-family:"Lato";--e-global-typography-cf8abfd-font-size:clamp(1.4rem, 1.3538rem + 0.2051vw, 1.5rem);--e-global-typography-cf8abfd-font-weight:700;--e-global-typography-515e9a9-font-family:"Lato";--e-global-typography-515e9a9-font-size:clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem);--e-global-typography-515e9a9-font-weight:700;}.elementor-kit-22 e-page-transition{background-color:#FFBC7D;}.elementor-kit-22 a{color:var( --e-global-color-text );}.elementor-kit-22 a:hover{color:var( --e-global-color-201b6c5 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =====================================================================
   Oriental 4WD - site-wide kit CSS
   Element/page custom CSS is emitted per-page into post-<id>.css, so ANY rule
   shared across pages must live here, not on a page. See conventions.md.
   ===================================================================== */

/* ---------- HERO ----------
   Live's stack (.section_header5 / .header5_background-image-wrapper / .header5_background-image):
     layer 0  banner-background.png, 50% 100%, size 100% 100%,
              background-attachment: FIXED  <- the parallax: the mountain plate stays
              pinned while the page and the foreground truck scroll over it
     layer 1  the truck cut-out, object-fit cover, mix-blend-mode: darken, z-index 0
     layer 2  the scrim #00000082, z-index 5 - ABOVE the truck, not under it
   Plus max-height 60rem and a 20px bottom radius. */
.hero-banner {
  position: relative;
  overflow: hidden;
  max-height: 60rem;
  background-attachment: fixed !important;
  background-position: 50% 100% !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(0, 0, 0, .51), rgba(0, 0, 0, .51)), url("https://www.oriental4wd.com.au/wp-content/uploads/2026/09/647c9e5bc011590d320ac55d_banner-foreground.png");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px;
  pointer-events: none;
}
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, .51);
  pointer-events: none;
}
.hero-banner > .elementor-element,
.hero-banner > .e-con { position: relative; z-index: 2; }
.hero-banner .elementor-button { border-radius: 10px; }

/* ---------- BRAND CARDS ---------- */
.brand-card { position: relative; overflow: hidden; min-height: 30rem; }
.brand-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(34, 34, 34, .45);
  transition: background-color .35s ease;
  z-index: 0;
}
.brand-card:hover::before { background-color: rgba(134, 15, 31, .7); }
.brand-card > .e-con-inner,
.brand-card > .elementor-element { position: relative; z-index: 1; }
.brand-row, .brand-row > .e-con-inner {
  gap: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
}

/* ---------- TESTIMONIAL MARQUEE ----------
   No native Elementor widget does a seamless infinite marquee; the track is
   8 cards duplicated to 16, exactly as live builds it. */
#testimonial-marquee { overflow: hidden; }
#testimonial-track {
  width: max-content !important;
  flex-wrap: nowrap !important;
  animation: oriental-marquee 90s linear infinite;
  will-change: transform;
}
#testimonial-track > .e-con { width: 400px !important; flex: 0 0 400px !important; }
#testimonial-marquee:hover #testimonial-track { animation-play-state: paused; }
/* 16 cards x 400px + 15 gaps x 32px = 6880; half is 3440 but one full pitch is
   8 x 432 = 3456, hence the extra half-gap. Same correction as the logo track. */
@keyframes oriental-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 16px)); }
}

/* ---------- SPLIT SECTIONS ---------- */
.split-row, .split-row > .e-con-inner {
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  min-height: 900px;
}
.split-media { padding: 0 !important; }
.split-media .elementor-widget-image,
.split-media .elementor-widget-image > .elementor-widget-container,
.split-media figure,
.split-media figure > a { height: 100%; display: block; margin: 0; }
.split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* live .header37_content: max-width 40rem, margin-left/right 5rem -> the copy
   sits 80px in from each side of its 720px column (560px wide), not 5vw. */
.split-copy { padding: 90px 80px !important; justify-content: center; }
.split-copy > .elementor-widget { max-width: 40rem; width: 100%; }
/* live's right-hand copy column is .header37_content-right: margin-left 5rem but
   margin-right 5vw, so the flipped splits are slightly wider than the left ones */
.split-row > .split-copy:last-child { padding-right: 5vw !important; }

/* ---------- LOGO STRIP ---------- */
.logo-strip, .logo-strip > .e-con-inner {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
}
.logo-strip img { height: 56px; width: auto !important; object-fit: contain; }

/* ---------- FORMINATOR ----------
   Forminator injects its own inline stylesheet keyed on
   `.forminator-ui#forminator-module-21 ...` with !important, so a class-only
   kit rule silently loses. Every rule here therefore carries the module ID and
   !important. (The pre-fidelity rules did not, and never applied at all.)
   Two skins, both measured off live:
     in-body  = .form-input-3   transparent, 1px black bottom rule, Lato 15px
     hero     = .form-input-hero  #F4F4F4 ground, Lato 12.8px, 32px min-height
   Submit is live's .button-primary in both: Koulen 20px / ls .5px / radius 10px. */
.forminator-ui#forminator-module-21 .forminator-label { display: none !important; }
.forminator-ui#forminator-module-21 .forminator-description { display: none !important; }
.forminator-ui#forminator-module-21 .forminator-row { margin-bottom: 0 !important; }
.forminator-ui#forminator-module-21 .forminator-col { margin-bottom: 24px !important; }
/* NB: do NOT zero the last col's margin - it is the gap between the message box
   and the submit button (they are in two separate .forminator-row wrappers).
   The hero panel escaped this rule by specificity, which is why only the
   in-body form lost the gap. */
.forminator-ui#forminator-module-21 .forminator-row:last-of-type { margin-bottom: 24px !important; }

.forminator-ui#forminator-module-21 .forminator-input,
.forminator-ui#forminator-module-21 .forminator-textarea {
  width: 100% !important;
  background-color: transparent !important;
  color: #222222 !important;
  border: 1px solid transparent !important;
  border-bottom: 1px solid #000000 !important;
  border-radius: 0 !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  box-shadow: none !important;
}
.forminator-ui#forminator-module-21 .forminator-textarea {
  min-height: 80px !important;
  padding: 12px !important;
  resize: vertical !important;
}
.forminator-ui#forminator-module-21 .forminator-input:focus,
.forminator-ui#forminator-module-21 .forminator-textarea:focus {
  border-bottom-color: #FF4500 !important;
  outline: none !important;
}
.forminator-ui#forminator-module-21 .forminator-input::placeholder,
.forminator-ui#forminator-module-21 .forminator-textarea::placeholder {
  color: rgba(0, 0, 0, .6) !important;
  opacity: 1;
}
.forminator-ui#forminator-module-21 .forminator-button-submit {
  background-color: #FF4500 !important;
  color: #FFFFFF !important;
  border: 1px solid #FF4500 !important;
  border-radius: 10px !important;
  min-width: 121px !important;
  width: auto !important;
  padding: 12px 24px !important;
  font-family: "Koulen", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: .5px !important;
  line-height: 20px !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.forminator-ui#forminator-module-21 .forminator-button-submit:hover {
  background-color: #222222 !important;
  border-color: #222222 !important;
  transform: scale(.95);
}
.forminator-ui .forminator-response-message.forminator-success {
  background-color: #222222; color: #F4F4F4; border-left: 4px solid #FF4500;
}
.forminator-ui .forminator-response-message.forminator-error { background-color: #860F1F; color: #F4F4F4; }

/* hero-panel skin = live's .form-input-hero */
.ihero-panel .forminator-ui#forminator-module-21 .forminator-col { margin-bottom: 16px !important; }
.ihero-panel .forminator-ui#forminator-module-21 .forminator-input,
.ihero-panel .forminator-ui#forminator-module-21 .forminator-textarea {
  background-color: #F4F4F4 !important;
  min-height: 32px !important;
  font-size: 12.8px !important;
  padding: 8px 12px !important;
}
.ihero-panel .forminator-ui#forminator-module-21 .forminator-textarea {
  min-height: 60px !important;
}
@media (max-width: 991px) {
  .forminator-ui#forminator-module-21 .forminator-button-submit { font-size: 16px !important; }
}
@media (max-width: 479px) {
  .forminator-ui#forminator-module-21 .forminator-button-submit {
    width: 100% !important; font-size: 20px !important;
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
  /* live's hero parallax is scroll-attached below desktop (iOS ignores fixed anyway) */
  .hero-banner { background-attachment: scroll !important; max-height: none; }
  .split-row, .split-row > .e-con-inner { flex-direction: column !important; min-height: 0; }
  /* live keeps the split imagery at its full 900px when the columns stack at 991,
     dropping to 600px at 767 and 400px at 479. Clamping these to 320/240 left the
     whole site 22% shorter than live at 768. Measured on .header37_image-wrapper. */
  .split-media img { min-height: 900px; height: 900px; }
  .split-copy { padding: 56px 5% !important; }
}
@media (max-width: 767px) {
  /* live: 6 full-bleed 390x200 cards in one column */
  .brand-card { min-height: 200px; }
  .brand-row { padding: 0 !important; }

  .logo-strip > .e-con { width: auto !important; flex: 0 0 auto !important; }
  .logo-strip img { height: 30px; }
  .split-media img { min-height: 600px; height: 600px; }
}

/* ---------- MOTION / FAIL-SAFE ----------
   Elementor hides entrance-animated elements with .elementor-invisible until its
   JS runs - an a11y problem and a fail-safe risk if that JS never loads. */
@media (prefers-reduced-motion: reduce) {
  .elementor-invisible { visibility: visible !important; opacity: 1 !important; animation: none !important; }
  #testimonial-track { animation: none; }
  .brand-card::before { transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
.no-js .elementor-invisible { visibility: visible !important; }


/* ---------- HERO H1 ----------
   Elementor's title_text_shadow control would not emit even with its _type
   toggle set, and the clamp topped out at 120px where live computes 126px
   at 1440 (1.2rem + 7.4167vw resolves to exactly 126 there). */
.hero-banner h1.elementor-heading-title {
  font-size: clamp(3rem, 1.2rem + 7.4167vw, 7.875rem);
}
.hero-banner h1.elementor-heading-title {
  text-shadow: 0 6px 20px rgba(0, 0, 0, .29);
}


/* ---------- HERO fine-tuning against live's computed values ----------
   live: h1 line-height 151.2px on a 126px font = 1.2
         .button-primary.hero { width: 30vw }  -> 432px at 1440, not auto */
.hero-banner h1.elementor-heading-title { line-height: 1.2; }
.hero-banner .elementor-button {
  width: 30vw;
  max-width: 460px;
  justify-content: center;
}
.hero-banner .elementor-widget-button { width: 100%; }
@media (max-width: 767px) {
  .hero-banner .elementor-button { width: 100%; max-width: none; }
}
/* ================= FIDELITY PASS (measured against live) ================= */

/* Live (>=992): the truck <img> has mix-blend-mode:darken, but its wrapper is
   z-index:5 + #00000082, an isolated stacking context, so it blends against that
   scrim only, never the mountain. darken over black == the scrim gradient layered
   over the image, which is what ::before now paints. A raw darken on ::before
   blends against the mountain and ghosts the truck. Below 992 live swaps to a
   wrapper with no scrim, so the gradient is dropped there. */
.hero-banner::after { display: none !important; }
@media (max-width: 991px) {
  .hero-banner::before { background-image: url("https://www.oriental4wd.com.au/wp-content/uploads/2026/09/647c9e5bc011590d320ac55d_banner-foreground.png"); }
}

/* Live's resting brand-card overlay is rgba(0,0,0,.7); #860f1f is HOVER only.
   Label is vertically centred, not bottom-pinned. */
.brand-card::before { background-color: rgba(0, 0, 0, .7); }
.brand-card:hover::before { background-color: rgba(134, 15, 31, .7); }
.brand-card, .brand-card > .e-con-inner {
  justify-content: center !important;
  align-items: center !important;
}
.brand-card .elementor-heading-title { line-height: 1.2; margin: 20px 0 10px; }

/* Heading rhythm: live's .heading-medium is line-height 1.3 with 20px/10px margins */
.elementor-widget-heading .elementor-heading-title { margin-block: 0; }
.split-copy .elementor-widget-heading .elementor-heading-title { margin: 0 0 10px; }

/* Why-choose tiles: live's icons are 80px, titles line-height 1.4 */
.elementor-widget-icon-box .elementor-icon svg,
.elementor-widget-icon-box .elementor-icon i { width: 80px; height: 80px; font-size: 80px; }
.elementor-widget-icon-box .elementor-icon-box-title { line-height: 1.4; margin: 20px 0 10px; }

/* Body copy = .text-size-regular: Lato 400 18px / 1.6rem */
.split-copy p, .elementor-widget-text-editor p { font-family: "Lato", sans-serif; }

/* "More Details": live puts a 14px chevron at the RIGHT edge, not a left icon.
   NOTE the icon is a SIBLING of .elementor-toggle-title (the inner <a>), both
   inside .elementor-tab-title - so the positioned ancestor must be the tab
   title, not the link. Getting this wrong (session 1) left the absolute icon
   resolving against the viewport. Live's collapsed row is 60px tall. */
.elementor-widget-toggle .elementor-tab-title {
  position: relative;
  min-height: 60px;
  padding-right: 40px;
  display: flex;
  align-items: center;
}
.elementor-widget-toggle .elementor-toggle-icon {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 14px; font-size: 14px; float: none; margin: 0;
}
.elementor-widget-toggle .elementor-toggle-icon svg { width: 14px; height: 14px; }
.elementor-widget-toggle .elementor-toggle-icon.elementor-toggle-icon-left { left: auto; right: 0; }

/* ---- Footer: live is Lato throughout, orange 32px icons, 25px orange socials ---- */
.elementor-location-footer .elementor-icon-list-text {
  font-family: "Lato", sans-serif; font-size: 18px; line-height: 25.6px;
}
.elementor-location-footer .elementor-icon-list-icon svg,
.elementor-location-footer .elementor-icon-list-icon i { width: 24px; height: 24px; font-size: 20px; color: #FF4500; }
.elementor-location-footer .elementor-nav-menu a.elementor-item {
  font-family: "Lato", sans-serif; font-weight: 400; font-size: 16px;
  padding-top: 8px; padding-bottom: 8px;
}
/* live's footer column headings carry a 1px orange rule beneath */
.elementor-location-footer h3.elementor-heading-title {
  font-family: "Lato", sans-serif; font-size: 16px; line-height: 20px; font-weight: 400;
  border-bottom: 1px solid #FF4500; padding-bottom: 8px; margin-bottom: 10px;
}
.elementor-location-footer .elementor-social-icon {
  background-color: transparent !important;
  width: 25px; height: 25px; font-size: 20px;
}
.elementor-location-footer .elementor-social-icon svg,
.elementor-location-footer .elementor-social-icon i { fill: #FF4500; color: #FF4500; }
.elementor-location-footer .elementor-social-icon:hover svg,
.elementor-location-footer .elementor-social-icon:hover i { fill: #FFFFFF; color: #FFFFFF; }

/* Live's logo strip pitch is 224px, not 166 */
.logo-strip > .e-con { flex: 1 1 auto; }

/* =====================================================================
   INTERIOR / BRAND HERO  (.ihero) - measured against live 2026-09-15
   Live: section_header5 carries banner-background.png at background-attachment:
   fixed, 50% 100%, size 100% 100%, 20px bottom radius. The per-page <img>
   (warehouse etc.) sits in a z-index:-1 wrapper and therefore paints BEHIND
   that background - it never renders. Matching live, per user decision.
   Layout: .header-100vh min-height 100vh / max-height 60rem, content 80vw,
   two 568px columns with a 16px gap at 1440.
   ===================================================================== */
.ihero {
  position: relative;
  overflow: hidden;
  max-height: 60rem;
  background-attachment: fixed !important;
  background-position: 50% 100% !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.ihero-row {
  width: 80vw;
  max-width: 100%;
  margin-inline: auto;
  padding: 0 !important;
}
/* content_width:full renders .e-con-full with NO .e-con-inner - children are
   direct descendants (conventions.md). Elementor's per-element width rule
   outspecifies a bare `flex`, hence the explicit basis + !important. */
.ihero-copy { padding: 0 !important; }
.ihero-row > .e-con {
  width: calc(50% - 8px) !important;
  flex: 0 0 calc(50% - 8px) !important;
  min-width: 0;
}

@media (max-width: 991px) {
  .ihero { background-attachment: scroll !important; }
}
@media (max-width: 767px) {
  /* live collapses .grid-3 to one column at 767 and drops the plate to size:auto */
  .ihero { background-size: auto !important; max-height: none; }
  .ihero-row, .ihero-row > .e-con-inner { flex-direction: column !important; }
  .ihero-row > .e-con { width: 100% !important; flex: 0 0 auto !important; }
}

/* =====================================================================
   CONTENT WIDTH - live's .page-padding is 5% and .container-large caps at
   110rem, so the content column is min(90vw, 1760px): 1296px at 1440, where
   Elementor's stock boxed container is 1140. Scoped to top-level (.e-parent)
   containers so nested boxed ones don't compound the 90%.
   ===================================================================== */
.e-con.e-parent.e-con-boxed > .e-con-inner { max-width: min(90vw, 110rem) !important; }

/* =====================================================================
   LOGO STRIP MARQUEE - live is an infinite 2 x 7 track, 200px cells with a
   24px gap (224px pitch), 3152px wide, moving ~60px/s (one 1568px cycle in
   ~26s). Same mechanism as the testimonial marquee; no native widget does it.
   ===================================================================== */
.logo-strip { overflow: hidden; }
#logo-track {
  width: max-content !important;
  padding: 0 !important;
  /* it is a flex item of .logo-strip; without flex:0 0 auto it gets shrunk back
     to the section width and translateX(-50%) then jumps instead of looping */
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  animation: oriental-logo-marquee 26s linear infinite;
  will-change: transform;
}
#logo-track > .e-con {
  width: 200px !important;
  flex: 0 0 200px !important;
  justify-content: center;
  padding: 0 !important;
}
#logo-track img { height: 56px; width: auto !important; object-fit: contain; }
.logo-strip:hover #logo-track { animation-play-state: paused; }
@keyframes oriental-logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 12px)); }
}
@media (max-width: 767px) {
  /* live drops the cells to 10rem below 767 */
  #logo-track > .e-con { width: 160px !important; flex: 0 0 160px !important; }
  #logo-track img { height: 48px; }
  @keyframes oriental-logo-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 12px)); }
  }
}
@media (prefers-reduced-motion: reduce) { #logo-track { animation: none; } }

/* ---------- WHY-CHOOSE TILES ----------
   live .layout299_list: 4 columns of 300px with a 2rem gap inside the 1296
   content box, icon 80px, content centred at the top of each cell. */
.why-row > .e-con { min-width: 0; padding-left: 0 !important; padding-right: 0 !important; }
.why-row .elementor-widget-icon-box { width: 100%; }
.why-row .elementor-icon-box-wrapper { text-align: center; }
@media (max-width: 991px) {
  /* live drops to 2 columns at 991 and 1 at 479 */
  .why-row, .why-row > .e-con-inner { flex-wrap: wrap !important; }
  .why-row > .e-con { width: calc(50% - 16px) !important; }
}
@media (max-width: 479px) {
  .why-row > .e-con { width: 100% !important; }
}

/* ---------- HEADER / FOOTER CONTENT WIDTH ----------
   live: the navbar uses .container-regular (max-width 95% -> 1368 at 1440) while
   the footer uses .padding-global (5% side padding -> 1296). Elementor's stock
   boxed container is 1140 for both. */
.nav-row > .e-con-inner    { max-width: 95% !important; }
.footer-row > .e-con-inner { max-width: min(90vw, 110rem) !important; }

/* live has a 479 tier that dev's breakpoints do not; split imagery drops to 400px */
@media (max-width: 479px) {
  .split-media img { min-height: 400px; height: 400px; }
}

/* the brand band is full-bleed on live at mobile - drop the section's side padding */
@media (max-width: 767px) {
  .brand-row, .brand-row > .e-con-inner { flex-direction: column !important; }
  #testimonial-track > .e-con { width: 288px !important; flex: 0 0 288px !important; }
}

/* =====================================================================
   HOME CONTACT + MAP  (.home-contact) - live's .contact-home
   Full-bleed #F4F4F4. .contact8_component is a 1fr 1fr grid with a 5rem
   column gap (680px columns at 1440); the copy carries margin 100px 0 100px
   100px, and .html-embed-2 is width/height 100% so the map fills its column
   edge-to-edge and top-to-bottom. Dev had align-items:center on both columns,
   which shrink-wrapped the form to 201px and left the iframe at its raw 300x450.
   ===================================================================== */
.home-contact, .home-contact > .e-con-inner { padding: 0 !important; }
.hc-row {
  padding: 0 !important;
  gap: 80px !important;
  align-items: stretch !important;
}
.hc-row > .e-con {
  width: calc(50% - 40px) !important;
  flex: 0 0 calc(50% - 40px) !important;
  min-width: 0;
}
/* live insets the copy by 100px inside its column; border-box keeps the column at 680 */
.hc-copy {
  padding: 100px 0 100px 100px !important;
  justify-content: center;
}
/* the map column takes its height from the copy column, exactly as live's does,
   so the iframe is pinned rather than sized - a % height on a stretched flex
   item is not reliably resolvable. */
.hc-map { position: relative; padding: 0 !important; }
.hc-map > .elementor-widget-html { position: absolute; inset: 0; }
.hc-map .elementor-widget-container { width: 100%; height: 100%; }
.hc-map iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}
@media (max-width: 991px) {
  .hc-copy { padding-left: 50px !important; }
}
@media (max-width: 767px) {
  /* live stacks to one column and fixes the map at 300px */
  .hc-row, .hc-row > .e-con-inner { flex-direction: column !important; }
  .hc-row > .e-con { width: 100% !important; flex: 0 0 auto !important; }
  .hc-copy { padding: 56px 50px !important; }
  .hc-map { height: 300px; }
  .hc-map > .elementor-widget-html { position: static; height: 300px; }
  .hc-map iframe { height: 300px !important; }
}
@media (max-width: 479px) {
  .hc-copy { padding: 48px 20px !important; }
}

/* live's "Major 4x4 Brands" heading block is a fixed 48rem wide and centred;
   dev's tracked the content width and wrapped to three lines at 1080. */
/* Elementor sets max-width:100% on the widget wrapper at equal specificity and
   wins on order, so this needs !important to bind. */
.brand-heading { width: 100%; max-width: 48rem !important; margin-inline: auto; }

/* ---------- BRAND CARD EMBLEMS ----------
   Live carries these <img>s but hides them all with .brand-logo-img{display:none}.
   Shown here as a deliberate improvement (user's call) - centred above the brand
   name, sized like live's width attribute (~80-99px). A drop-shadow keeps the
   darker emblems (Ford blue, Holden) legible against the card scrim. */
.brand-logo { width: 80px; margin-inline: auto; }
.brand-logo img {
  width: 80px;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.brand-card .brand-logo { margin-bottom: 4px; }
@media (max-width: 767px) {
  .brand-logo, .brand-logo img { width: 56px; }
}


/* =====================================================================
   MOBILE PASS (2026-10-15)
   ===================================================================== */

/* ---------- ENTRANCE ANIMATIONS ----------
   Elementor's fadeInUp starts at translate3d(0,100%,0) - 100% of the element's
   OWN height. Stacked split-copy blocks are 450-520px tall on mobile, so they
   lurched ~500px and left an empty band mid-scroll. Same fade, 24px travel.
   Durations: stock 1.25s / slow 2s read as sluggish. */
@keyframes oriental-fade-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: none; }
}
.elementor-element.animated.fadeInUp { animation-name: oriental-fade-up; }
.elementor-element.animated { animation-duration: .7s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
.elementor-element.animated.animated-slow { animation-duration: 1s; }
.elementor-element.animated.animated-fast { animation-duration: .5s; }

/* "More Details": live's label sits flush with the paragraph (x=80 at 1440,
   x=38 at 768). Elementor's 12px tab-title padding indented it. */
.elementor-widget-toggle .elementor-tab-title { padding-left: 0 !important; }

@media (max-width: 991px) {
  /* Header is in-flow on <=991 now (sticky nav row, see header 31), so the
     hero no longer needs 140px to clear a fixed header, and its min-height
     gives back the ~120px the header now occupies. */
  .hero-banner { padding-top: 56px !important; min-height: calc(var(--min-height, 80vh) - 120px) !important; }
  /* Splits stack here; live always puts the copy first. The flipped splits
     were stacking image-image back to back. */
  .split-row > .split-copy { order: -1 !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  /* 30vw = 230px wrapped "CALL US - 08 8384 6055" onto two lines */
  .hero-banner .elementor-button { width: max(30vw, 300px); white-space: nowrap; }
}

@media (max-width: 767px) {
  /* Hero: live shows the whole truck at the bottom on phones, not a
     cover-cropped bull bar behind the H1. The mountain plate was 100% 100%,
     i.e. squashed on a portrait screen. */
  .hero-banner { background-size: cover !important; background-position: 50% 0 !important; }
  .hero-banner::before { background-size: 100% auto; background-position: 50% 100%; }

  /* Brand grid: continuous cards like live - no seam between the two rows,
     no dark strip under the last card. */
  .e-con:has(> .brand-row) { row-gap: 0 !important; padding-bottom: 0 !important; }
  .e-con:has(> .brand-row) > .e-con:not(.brand-row) { margin-bottom: 40px; }
  .brand-row { margin-top: 0 !important; margin-bottom: 0 !important; }

  /* Split buttons full width, as live */
  .split-copy .elementor-widget-button,
  .split-copy .elementor-button { width: 100%; }
  .split-copy .elementor-button { justify-content: center; }

  /* Testimonials: was ~200px taller than live (90px pads, 10px nested insets) */
  .e-con:has(> #testimonial-marquee) > .e-con-inner,
  .e-con-full:has(> #testimonial-marquee) { padding-top: 56px !important; padding-bottom: 56px !important; }
  .e-con:has(+ #testimonial-marquee) { padding: 0 !important; row-gap: 16px; }
  .e-con:has(+ #testimonial-marquee) > .e-con { padding: 0 !important; width: 100%; }
  .e-con:has(+ #testimonial-marquee) .elementor-widget-button,
  .e-con:has(+ #testimonial-marquee) .elementor-button { width: 100%; justify-content: center; }
  #testimonial-marquee { padding-top: 0 !important; }

  /* Paired button rows (CTA band etc.) stack full width like live instead of
     two small side-by-side buttons. Hero + split rows are handled above. */
  .e-con:not(.split-copy):not(.hero-banner):has(> .elementor-widget-button + .elementor-widget-button) { flex-direction: column !important; row-gap: 16px !important; }
  .e-con:not(.split-copy):not(.hero-banner):has(> .elementor-widget-button + .elementor-widget-button) > .elementor-widget-button { width: 100%; margin: 0; }
  .e-con:not(.split-copy):not(.hero-banner):has(> .elementor-widget-button + .elementor-widget-button) .elementor-button { width: 100%; justify-content: center; padding-top: 12px; padding-bottom: 12px; }
}


@media (max-width: 991px) {
  /* Interior split images sat in a BOXED column (max-width 90vw), so they
     rendered 351px wide with 20px gutters. Live (and home) run them full-bleed. */
  .e-con.e-parent.e-con-boxed.split-media > .e-con-inner,
  .e-con.split-media > .e-con-inner { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
}/* End custom CSS */