.elementor-kit-229{--e-global-color-primary:#FF6629;--e-global-color-secondary:#FF8A57;--e-global-color-text:#FFFFFF;--e-global-color-accent:#7A2A08;--e-global-color-brand:#FF6629;--e-global-color-ground:#000000;--e-global-color-band:#08090A;--e-global-color-card:#121314;--e-global-color-line:rgba(255,255,255,0.07);--e-global-color-w60:rgba(255,255,255,0.6);--e-global-color-w40:rgba(255,255,255,0.4);--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:300;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-letter-spacing:0.5px;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:22px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-letter-spacing:0.5px;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:12px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:2.2px;color:#FFFFFF;font-family:"Inter", Sans-serif;font-size:16px;line-height:1.65em;}.elementor-kit-229 e-page-transition{background-color:#FFBC7D;}.elementor-kit-229 a{color:#FF6629;}.elementor-kit-229 a:hover{color:#FF8A57;}.elementor-kit-229 button,.elementor-kit-229 input[type="button"],.elementor-kit-229 input[type="submit"],.elementor-kit-229 .elementor-button{border-radius:0px 0px 0px 0px;}.elementor-kit-229 img{border-radius:0px 0px 0px 0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}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 */html{scroll-behavior:smooth}
body{background:#000;overflow-x:hidden}
::selection{background:#FF6629;color:#000}
.elementor-button{transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.elementor-field-group input,.elementor-field-group textarea,.elementor-field-group select{color-scheme:dark}
.elementor-field-group select option{background:#08090A;color:#fff}
.elementor-field-group ::placeholder{color:rgba(255,255,255,.35)}
.elementor-field-type-acceptance .elementor-field-label{display:none}
.elementor-field-option label{color:rgba(255,255,255,.55);font-size:12.5px;line-height:1.55}
.elementor-message.elementor-message-success{color:#FF8A57}
.e-con[id]{scroll-margin-top:118px}
.elementor-field-group select{appearance:none;-webkit-appearance:none}
/* Elementor lays galleries and form rows out with negative gutters that push
   a few pixels past a 360px screen. Neutralise the gutter, not the layout. */
@media (max-width:767px){
.elementor-widget-image-gallery .gallery{margin:0!important}
.elementor-widget-image-gallery .gallery-item{margin:0!important;padding:4px!important}
.elementor-form-fields-wrapper{margin-inline:0!important}
.elementor-form-fields-wrapper>.elementor-field-group{padding-inline:0!important}
}
/* ==========================================================================
   iCAUR Springs — pre-launch fix pack  (v1.2)
   Generated 23 Aug 2026 from an Impeccable critique of icaursprings.co.za

   WHERE TO PASTE
   Elementor → hamburger menu → Site Settings → Custom CSS
   (or WP Admin → Appearance → Customise → Additional CSS)

   Everything below is additive and reversible — delete the whole block
   at launch, when the real site replaces the holding page. Nothing here
   touches the existing stylesheets.

   v1.2 — section 4 (mobile menu hiding) is commented out at your request.
   Everything else is unchanged from v1.1.

   NOTE ON CASCADE  — why the !importants are here
   Elementor compiles Site Settings CSS into the KIT stylesheet (post-229),
   which it loads at position 4 — BEFORE widget-icon-list (9), the page's own
   post-303 (10), and the header/footer post-297 / post-298 (13, 14). Anything
   here with equal specificity to those files therefore loses on source order.
   Every declaration that competes with one of them carries !important.
   Separately, the mobile bar ships its own <style> block inside <body>, later
   than every stylesheet — that is why the .ich-* rules carry an extra .ich
   class rather than relying on position.

   Sections
     1. Gutters                    2. Horizontal overflow
     3. Duplicate <h1>             4. Dead mobile menu
     5. Desktop header             6. Contrast
     7. Focus rings                8. Tap targets
     9. Stray theme colours
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. One gutter token, used everywhere below
   -------------------------------------------------------------------------- */
:root{
  --ic-gutter: clamp(20px, 5vw, 64px);
  --ic-orange: #FF6629;
  --ic-ink:    #0A0A0A;
}


/* --------------------------------------------------------------------------
   1. GUTTERS
   The hero container ships --padding-left:0 / --padding-right:0, so at every
   width up to 1440 the eyebrow, the H1, the strapline, the paragraph and the
   CALL button all start at pixel 0 and the first glyph is clipped by the
   viewport edge. The header strip and footer have the same problem.
   -------------------------------------------------------------------------- */
.elementor-303 .elementor-element.elementor-element-cs00009{
  --padding-left:  var(--ic-gutter) !important;
  --padding-right: var(--ic-gutter) !important;
}

.elementor-location-header > .e-con.e-parent,
.elementor-location-footer > .e-con.e-parent{
  --padding-left:  var(--ic-gutter) !important;
  --padding-right: var(--ic-gutter) !important;
}

/* The hand-coded mobile bar already has its own 16px inset — keep the two
   in step so the logo lines up with the hero text below it. */
@media (max-width:1024px){
  .ich .ich-bar{ padding-left: var(--ic-gutter); padding-right: var(--ic-gutter); }
}


/* --------------------------------------------------------------------------
   2. HORIZONTAL OVERFLOW  (8px of sideways scroll at 768 / 1024 / 1440)
   Elementor's widget-icon-list.min.css sets `margin-inline:-8px` on inline
   icon lists and never compensates with container padding. One element is
   responsible at every width: the footer's "Privacy and Web Policies" list.
   At 390 the same rule clips it 8px off the left edge instead.
   -------------------------------------------------------------------------- */
.elementor-icon-list-items.elementor-inline-items{
  margin-inline: 0 !important;
}
.elementor-icon-list-items.elementor-inline-items .elementor-inline-item{
  margin-inline: 0 16px !important;
}
.elementor-icon-list-items.elementor-inline-items .elementor-inline-item:last-child{
  margin-inline-end: 0 !important;
}


/* --------------------------------------------------------------------------
   3. THE DUPLICATE <h1>
   hello-elementor prints the elementor_library record's own title above the
   hero — a second <h1> reading "iCAUR Coming Soon" in the theme's default
   type system. On an iPhone it is the largest, brightest text on the fold and
   it carries no information, pushing the real headline below the fold.
   -------------------------------------------------------------------------- */
.single-elementor_library .page-header{
  display: none;
}


/* --------------------------------------------------------------------------
   4. THE DEAD MOBILE MENU  [P0]  — DISABLED, see below
   post-303.css already strips the navigation on this template — the comment
   there reads "the nav would link back to itself". That rule matches
   .elementor-widget-nav-menu, but the mobile bar is a custom HTML widget, so
   it was never matched. Ten of its eleven destinations return the same page.
   This finishes the decision that was already made.

   Prefer this to leaving the menu in place. If you would rather keep the
   items visible as non-interactive "From launch" labels, delete this section
   and see the fix-pack notes instead.
   -------------------------------------------------------------------------- */
/* DISABLED at your request, 23 Aug — the mobile menu is back exactly as it was.
   Ten of its eleven destinations still return the same holding page, so the P0
   from the critique stands until those pages exist. Re-enable by deleting the
   comment markers around the block below.

@media (max-width:1024px){
  .ich .ich-burger,
  .ich .ich-veil,
  .ich .ich-sheet{ display: none !important; }

  .ich .ich-bar{ gap: 0; }
  .ich .ich-logo{ margin-right: auto; }
}

*/


/* --------------------------------------------------------------------------
   5. DESKTOP HEADER
   Above 1025px the page currently has no navigation and no call to action:
   a 97px sticky bar containing a logo and an empty 1152×0 flex column.
   -------------------------------------------------------------------------- */
@media (min-width:1025px){

  /* stop the logo ballooning on wide screens (it renders ~600px at 1920) */
  .elementor-location-header .elementor-widget-image img{
    width: 222px !important;
    height: auto;
  }

  /* push whatever the bar holds to the right, so a CTA added later lands
     opposite the logo rather than floating in the middle */
  .elementor-element-ic0000a{ justify-content: flex-end !important; }
}

/* ---- OPTIONAL, and read this before you enable it -------------------------
   Un-hides the header's "Book a test drive" button on desktop, so the
   masthead carries an action at every width.

   DO NOT enable until you have retargeted that button in Elementor from
   /contact/#enquire to #enquire, and added the enquiry block to this page.
   Enabled early, it just puts a dead button in the header.

@media (min-width:1025px){
  .elementor-location-header .elementor-element-ic00009{ display: flex !important; }
}
--------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   6. CONTRAST
   Measured against WCAG AA (4.5:1 body, 3:1 for large text), with per-glyph
   pixel sampling for anything sitting over the hero photograph.
   -------------------------------------------------------------------------- */

/* 6a. The primary mobile CTA: white on #FF6629 measures 2.92:1.
       Black on the same orange measures 7.18:1 — and that treatment already
       exists ten pixels away on the hero CALL button. Match it. */
.ich .ich-pill,
.ich .ich-cta{
  color: var(--ic-ink) !important;
  box-shadow: 0 2px 10px rgba(255,102,41,.28);
}

/* 6b. The 90° scrim is tuned for a wide canvas. On a phone the crop puts
       bright bodywork under the text, so the same paragraph goes from 1.5%
       of glyph pixels failing at 1440 to 11.5% at 390.

       Do NOT fix this by darkening the whole scrim — the V23 is the strongest
       asset on the page and a uniform 0.85 overlay erases it. Instead, band
       the darkening behind the text block only, fading to nothing top and
       bottom so the car still reads above and below the copy. */
@media (max-width:1024px){
  .elementor-303 .elementor-element.elementor-element-cs00009::before,
  .elementor-303 .elementor-element.elementor-element-cs00009 > .elementor-background-video-container::before,
  .elementor-303 .elementor-element.elementor-element-cs00009 > .e-con-inner > .elementor-background-video-container::before{
    background-image: linear-gradient(
      180deg,
      rgba(0,0,0,.30) 0%,
      rgba(0,0,0,.62) 26%,
      rgba(0,0,0,.66) 80%,
      rgba(0,0,0,.30) 100%
    ) !important;
  }
}

/* 6c. Text opacities. Each of these was measured below 4.5:1. */
.elementor-303 .elementor-element.elementor-element-cs00003 .elementor-heading-title{
  color: rgba(255,255,255,.86) !important;   /* "Authorised iCAUR dealer · Springs, Gauteng" */
}
.elementor-303 .elementor-element.elementor-element-cs00004{
  color: rgba(255,255,255,.88) !important;   /* hero paragraph */
}
.elementor-303 .elementor-element.elementor-element-cs00008{
  color: rgba(255,255,255,.72) !important;   /* M7 Group / pricing disclaimer — was .34 */
}

/* Header strip and footer sit on solid black, so these are simple. */
.elementor-location-header [style*="rgba(255,255,255,0.45)"],
.elementor-location-header .elementor-widget-text-editor,
.elementor-location-header .elementor-icon-list-text{
  color: rgba(255,255,255,.72) !important;   /* was .45 → 4.41:1 */
}
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-icon-list-text{
  color: rgba(255,255,255,.72) !important;   /* was .40 → 3.66:1 */
}

/* 6d. The hero paragraph runs ~185 characters on one line at 1440.
       Cap the measure without touching the layout. */
.elementor-303 .elementor-element.elementor-element-cs00004{
  max-width: 58ch !important;
}


/* --------------------------------------------------------------------------
   7. FOCUS RINGS
   hello-elementor leaves the UA default, which computes to
   `rgb(16,16,16) auto 1px` — a near-black ring on a #000 page. Keyboard users
   currently cannot see where they are.
   -------------------------------------------------------------------------- */
.elementor-location-header a:focus-visible,
.elementor-location-header button:focus-visible,
.elementor-location-footer a:focus-visible,
.elementor-303 a:focus-visible,
.elementor-303 .elementor-button:focus-visible,
.skip-link:focus{
  outline: 2px solid var(--ic-orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* The pill's own ring is orange offset 3px from an orange fill — legible on
   the black bar, but tight. Give it a white inner edge so it reads on both. */
.ich .ich-pill:focus-visible,
.ich .ich-cta:focus-visible{
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   8. TAP TARGETS  (44 × 44 CSS px minimum)
   Measured on an iPhone 13: burger 34×28, logo 112×34.5, header pill
   149×42.4, CALL 213.8×43.5 (half a pixel short), M7 GROUP 70×14,
   Privacy 148×26.4. Only WHATSAPP US passed.
   -------------------------------------------------------------------------- */
/* The burger is 34x28 as shipped. Now that section 4 is disabled and it is
   back on screen, it needs a real target — it is the only nav affordance
   on the site. Padding rather than width, so the icon itself stays 18px. */
.ich .ich-burger{
  min-width: 44px;
  min-height: 44px;
  padding: 8px 13px;
}

.ich .ich-logo{
  min-height: 44px;
  align-items: center;
}
.ich .ich-pill{
  min-height: 44px;
  padding-block: 11px;
}
.elementor-303 .elementor-element .elementor-button{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.elementor-location-footer a{
  display: inline-flex !important;
  align-items: center;
  min-height: 44px !important;
}

/* The utility strip only exists above 1025px, where the pointer is a mouse,
   so 44px would just inflate the bar. Bring it to the WCAG 2.2 minimum. */
.elementor-location-header .elementor-icon-list-item a,
.elementor-location-header a[href^="tel:"]{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 5px;
}


/* --------------------------------------------------------------------------
   9. STRAY THEME COLOURS
   hello-elementor's reset.css ships `button:hover,button:focus{
   background-color:#c36}`. It paints the mobile burger and the Models
   accordion raspberry-pink — a colour that exists nowhere in the brand.
   (Harmless once section 4 hides those controls, but leave this in: it will
   bite again the moment any other button is added.)
   -------------------------------------------------------------------------- */
.ich button:hover,
.ich button:focus,
.elementor-303 button:hover,
.elementor-303 button:focus{
  background-color: transparent;
}


/* --------------------------------------------------------------------------
   10. MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .ich .ich-pill,
  .elementor-303 .elementor-button{
    transition: none !important;
    transform: none !important;
  }
}

/* == button standard == one geometry and one type treatment sitewide */
.elementor-button,.gform_button,.v2m-cta,.kv-btn,.v2n-td,.icp-all,.ich-cta{
  border-radius:0!important;font-size:12px!important;font-weight:700!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;
  line-height:1!important;padding:16px 24px!important;min-height:46px!important;
  box-shadow:none!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important}
/* the two that live inside a 60px header bar stay compact */
.elementor-element-ic00009 .elementor-button,.ich .ich-pill{
  font-size:11px!important;font-weight:700!important;letter-spacing:.08em!important;
  text-transform:uppercase!important;border-radius:0!important;
  padding:13px 18px!important;min-height:40px!important;box-shadow:none!important}
/* the service-page CTA carries a 18px glyph, not the 22x8 arrow */
.icp-all{padding:15px 24px!important}
.icp-all svg{width:14px!important;height:14px!important}

/* == gravity forms == Orbital theme, retuned to the dark form styling it replaced */
.gform_wrapper.gform-theme{
 --gf-color-primary:#FF6629;--gf-color-primary-rgb:255,102,41;
 --gf-color-primary-contrast:#000;
 --gf-ctrl-bg-color:rgba(255,255,255,.06);
 --gf-ctrl-border-color:rgba(255,255,255,.22);
 --gf-ctrl-color:#fff;--gf-ctrl-radius:0px;--gf-ctrl-size:40px;
 --gf-ctrl-font-size:14px;--gf-ctrl-placeholder-color:rgba(255,255,255,.35);
 --gf-ctrl-label-color-primary:rgba(255,255,255,.62);
 --gf-ctrl-label-color-secondary:rgba(255,255,255,.45);
 --gf-ctrl-desc-color:rgba(255,255,255,.45);
 --gf-local-color:#fff}
form.ic-form .gfield_label{
 margin:0 0 7px!important;font-size:11px!important;font-weight:500!important;
 letter-spacing:2px!important;text-transform:uppercase!important;
 color:rgba(255,255,255,.62)!important}
form.ic-form .gfield_required{color:#FF6629!important}
form.ic-form input[type=text],form.ic-form input[type=email],
form.ic-form input[type=tel],form.ic-form input[type=number],
form.ic-form input[type=date],form.ic-form select,form.ic-form textarea{
 width:100%!important;background:rgba(255,255,255,.06)!important;color:#fff!important;
 border:1px solid rgba(255,255,255,.22)!important;border-radius:0!important;
 font-family:inherit!important;font-size:14px!important;font-weight:400!important;
 line-height:1.4!important;padding:8px 16px!important;height:40px!important;
 min-height:40px!important;box-shadow:none!important}
form.ic-form textarea{height:90px!important;min-height:90px!important;
 padding:10px 16px!important;resize:vertical}
form.ic-form select{padding:5px 34px 5px 14px!important;appearance:none;
 background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.55) 50%),
  linear-gradient(135deg,rgba(255,255,255,.55) 50%,transparent 50%)!important;
 background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px!important;
 background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important}
form.ic-form select option{background:#08090A;color:#fff}
form.ic-form ::placeholder{color:rgba(255,255,255,.35)!important}
form.ic-form input:focus,form.ic-form select:focus,form.ic-form textarea:focus{
 outline:none!important;border-color:#FF6629!important;
 background:rgba(255,255,255,.09)!important}
form.ic-form .gform_fields{row-gap:16px!important}
form.ic-form .gfield--type-consent>.gfield_label{display:none!important}
form.ic-form .gfield--type-consent .gchoice{display:flex;align-items:flex-start;gap:10px}
form.ic-form .gfield--type-consent label{
 font-size:12.5px!important;line-height:1.55!important;letter-spacing:0!important;
 text-transform:none!important;font-weight:400!important;
 color:rgba(255,255,255,.62)!important;margin:0!important}
form.ic-form input[type=checkbox]{width:17px!important;height:17px!important;
 min-height:0!important;margin:1px 0 0!important;flex:none;accent-color:#FF6629;
 padding:0!important;border-radius:0!important}
form.ic-form .gform_footer{margin:20px 0 0!important;padding:0!important}
form.ic-form .gform_button{background:#FF6629!important;border:0!important;
 color:#000!important;cursor:pointer;width:auto!important}
form.ic-form .gform_button:hover{background:#E4551D!important;color:#fff!important}
form.ic-form .gfield_validation_message,form.ic-form .validation_message{
 background:none!important;border:0!important;padding:4px 0 0!important;
 font-size:12px!important;color:#FF8A57!important}
form.ic-form .gform_validation_errors{
 background:rgba(255,102,41,.08)!important;border:1px solid rgba(255,102,41,.35)!important;
 box-shadow:none!important;border-radius:0!important}
form.ic-form .gform_validation_errors h2,form.ic-form .gform_validation_errors a{
 color:#fff!important;font-size:14px!important}
.gform_confirmation_message{font-size:15px;line-height:1.6;color:#fff;
 padding:18px 20px;background:rgba(255,102,41,.08);
 border:1px solid rgba(255,102,41,.35)}

/* required marker as an asterisk, to match the note under the form */
form.ic-form .gfield_required_text{display:none}
form.ic-form .gfield_required::after{content:"*";color:#FF6629;font-weight:700}
form.ic-form .gfield_required{font-size:13px;line-height:1}

/* == dark map == the Google embed is cross-origin, so it can only be
   re-toned from outside; invert + hue-rotate keeps roads and labels legible
   and lands the pin close to the brand orange */
.elementor-widget-google_maps iframe{
 filter:invert(92%) hue-rotate(180deg) saturate(.32) brightness(.88) contrast(1.1)}
.elementor-widget-google_maps .elementor-custom-embed{
 border:1px solid rgba(255,255,255,.07);line-height:0}
@media (prefers-contrast:more){
 .elementor-widget-google_maps iframe{filter:none}
}/* End custom CSS */