/* ==========================================================================
   Octane Site Widgets — widget styles
   Ported from the original styles.css (108rem artboard; html font-size 90%
   is set by the Octane theme). Breakpoints match the original: 1600 / 1280 /
   1024 / 767px. Every selector is prefixed .oct- so nothing leaks into other
   content. Elementor style controls override these values when set.
   ========================================================================== */

:root {
  --oct-gutter: 7.5rem;
  --oct-container: 93rem;
  --oct-blue: #2B64DC;
  --oct-blue-bright: #005CFF;
  --oct-navy: #000030;
  --oct-font-hero: 'Halfre', 'Cal Sans', 'Poppins', sans-serif;
  --oct-font-heading: 'Cal Sans', 'Poppins', sans-serif;
  --oct-font-body: 'Poppins', sans-serif;
  --oct-font-ui: 'Roboto', 'Poppins', sans-serif;
}
@media (max-width: 1600px) { :root { --oct-gutter: 5rem; } }
@media (max-width: 1280px) { :root { --oct-gutter: 3rem; } }
@media (max-width: 767px)  { :root { --oct-gutter: 1.25rem; } }

.oct-hero, .oct-hero *,
.oct-finder, .oct-finder *,
.oct-offer-grid, .oct-offer-grid *,
.oct-why-grid, .oct-why-grid *,
.oct-appointment, .oct-appointment *,
.oct-contact, .oct-contact * { box-sizing: border-box; }

/* Line breaks that only apply on larger screens (e.g. <br class="oct-br-desktop"> in a Heading). */
@media (max-width: 767px) { br.oct-br-desktop { display: none; } }

/* Long-form legal text (Privacy Policy, Terms): add the CSS class "oct-legal" to a
   Text Editor widget. Body size/colour come from the widget's own Style controls;
   this styles the headings, lists and spacing inside it. */
.elementor-widget.oct-legal { font-family: var(--oct-font-body); }
.elementor-widget.oct-legal p { margin: 0 0 2.0625rem; }
.elementor-widget.oct-legal p:last-child { margin-bottom: 0; }
.elementor-widget.oct-legal h2,
.elementor-widget.oct-legal h3 {
  margin: 0 0 0.875rem;
  font-family: var(--oct-font-body);
  font-weight: 700;
  font-size: 1.8438rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: inherit;
}
.elementor-widget.oct-legal h3 { font-size: 1.375rem; }
.elementor-widget.oct-legal p + h2,
.elementor-widget.oct-legal ul + h2 { margin-top: -0.5rem; }
.elementor-widget.oct-legal ul,
.elementor-widget.oct-legal ol { margin: 0 0 2.0625rem; padding-left: 2.1875rem; }
.elementor-widget.oct-legal li { margin: 0; padding-left: 0.125rem; }
.elementor-widget.oct-legal ul li::marker { font-size: 0.85em; }
.elementor-widget.oct-legal strong { font-weight: 700; }
.elementor-widget.oct-legal a { color: var(--oct-blue); text-decoration: underline; }
@media (max-width: 767px) {
  .elementor-widget.oct-legal p,
  .elementor-widget.oct-legal ul,
  .elementor-widget.oct-legal ol { margin-bottom: 1.25rem; }
  .elementor-widget.oct-legal h2 { font-size: 1.375rem; margin-bottom: 0.625rem; }
  .elementor-widget.oct-legal p + h2,
  .elementor-widget.oct-legal ul + h2 { margin-top: 0.5rem; }
  .elementor-widget.oct-legal ul,
  .elementor-widget.oct-legal ol { padding-left: 1.5rem; }
}

/* Decorative images placed with Elementor's absolute positioning */
.elementor-widget.oct-decor { pointer-events: none; z-index: 0; }
/* Keep the real content above a decorative shape placed in the same container. */
.e-con:has(> .oct-decor) > .elementor-element:not(.oct-decor),
.e-con-inner:has(> .oct-decor) > .elementor-element:not(.oct-decor) { position: relative; z-index: 1; }
.elementor-widget.oct-decor img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Pill label
   -------------------------------------------------------------------------- */
.oct-pill {
  --oct-pill-a: #4274E2;
  --oct-pill-b: #2E4A8A;
  --oct-pill-c: #1B1D22;
  display: inline-flex;
  align-items: center;
  height: 3.375rem;
  margin: 0;
  padding: 0 1.75rem;
  border-radius: 62.4375rem;
  background: linear-gradient(90deg, var(--oct-pill-a) 0%, var(--oct-pill-b) 50%, var(--oct-pill-c) 100%);
  color: #FFFFFF;
  font-family: var(--oct-font-heading);
  font-weight: 400;
  font-size: 1.7188rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .oct-pill { height: 2.625rem; font-size: 1.1875rem; padding: 0 1.125rem; white-space: normal; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.oct-hero {
  --oct-hero-bg: #FFFFFF;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - var(--oct-nav-h, 5.25rem));
  height: calc(100svh - var(--oct-nav-h, 5.25rem));
  min-height: 34rem;
  background: var(--oct-hero-bg);
  border-radius: 0 0 3.75rem 3.75rem;
  overflow: hidden;
}
.oct-hero__media {
  --oct-hero-fade: 8.75rem;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56%;
}
.oct-hero__media::before {
  /* blends the photo's left edge into the background */
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--oct-hero-fade);
  background: linear-gradient(90deg, var(--oct-hero-bg, #FFFFFF) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
}
.oct-hero .oct-hero__img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
.oct-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--oct-container) + var(--oct-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--oct-gutter);
}
.oct-hero__title {
  --oct-hero-a: #2B64DC;
  --oct-hero-b: #000000;
  display: inline-block;
  margin: 0 0 0 -0.25rem;
  font-family: var(--oct-font-hero);
  font-weight: 400;
  font-size: 7.375rem;
  line-height: 6.4375rem;
  letter-spacing: -0.025em;
  background: linear-gradient(90deg, var(--oct-hero-a) 0%, var(--oct-hero-b) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--oct-hero-a);
}
.oct-hero__subtitle {
  margin: 0.8125rem 0 0;
  font-family: var(--oct-font-hero);
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #010101;
}
.oct-hero__actions {
  display: flex;
  gap: 1.0625rem;
  margin-top: 4rem;
}
.oct-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19.0625rem;
  height: 4.0625rem;
  border-radius: 62.4375rem;
  font-family: var(--oct-font-hero);
  font-size: 2.125rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.oct-hero__btn:hover { transform: translateY(-0.125rem); }
.oct-hero__btn--solid { background: #000000; color: #FFFFFF; }
.oct-hero__btn--solid:hover,
.oct-hero__btn--solid:focus { color: #FFFFFF; }
.oct-hero__btn--outline { border: 0.0938rem solid #000000; color: #000000; }
.oct-hero__btn--outline:hover,
.oct-hero__btn--outline:focus-visible { background: #000000; color: #FFFFFF; }

@media (max-width: 1600px) {
  .oct-hero__title { font-size: 7rem; line-height: 5.875rem; }
}
@media (max-width: 1280px) {
  .oct-hero__title { font-size: 6rem; line-height: 5.125rem; }
  .oct-hero__subtitle { font-size: 2.625rem; }
}
@media (max-width: 1024px) {
  .oct-hero__media { width: 100%; opacity: 0.35; }
  .oct-hero__media::before { width: 100%; background: linear-gradient(90deg, #FFFFFF 10%, rgba(255, 255, 255, 0.2) 100%); }
}
@media (max-width: 767px) {
  .oct-hero { border-radius: 0 0 2rem 2rem; }
  .oct-hero__title { font-size: 3.875rem; line-height: 3.5rem; }
  .oct-hero__subtitle { font-size: 1.75rem; margin-top: 0.875rem; }
  .oct-hero__actions { flex-direction: column; gap: 0.875rem; margin-top: 2.5rem; }
  .oct-hero__btn { width: 100%; max-width: 20rem; height: 3.5rem; font-size: 1.625rem; }
}

/* Hero slider: slides are stacked and cross-fade; the first one is visible
   without JavaScript. Inactive slides are visibility:hidden so their links
   cannot be tabbed to. */
.oct-hero--slider { display: block; }
.oct-hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
.oct-hero__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0s;
}
.oct-hero__slide .oct-hero__inner > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}
.oct-hero__slide.is-active .oct-hero__inner > * { opacity: 1; transform: none; }
.oct-hero__slide.is-active .oct-hero__inner > *:nth-child(2) { transition-delay: 0.3s; }
.oct-hero__slide.is-active .oct-hero__inner > *:nth-child(3) { transition-delay: 0.4s; }
.oct-hero--slider .oct-hero__subtitle { max-width: 40rem; }

.oct-hero__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.5rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: calc(var(--oct-container) + var(--oct-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--oct-gutter);
  pointer-events: none;
}
.oct-hero__dots { display: flex; align-items: center; gap: 0.625rem; pointer-events: auto; }
.oct-hero .oct-hero__dot {
  width: 0.75rem;
  height: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0.125rem solid #000000;
  border-radius: 62.4375rem;
  background: transparent;
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.oct-hero .oct-hero__dot:hover { background: rgba(0, 0, 0, 0.25); }
.oct-hero .oct-hero__dot.is-active {
  width: 2.25rem;
  border-color: var(--oct-blue);
  background: var(--oct-blue);
}
.oct-hero .oct-hero__toggle {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0.125rem solid #000000;
  border-radius: 62.4375rem;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  pointer-events: auto;
}
.oct-hero .oct-hero__toggle:hover { background: #FFFFFF; }
/* Pause icon (two bars) / play icon (triangle). */
.oct-hero__toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.625rem;
  height: 0.75rem;
  transform: translate(-50%, -50%);
  border-left: 0.1875rem solid #000000;
  border-right: 0.1875rem solid #000000;
}
.oct-hero__toggle.is-paused span {
  width: 0;
  height: 0;
  margin-left: 0.0625rem;
  border-style: solid;
  border-width: 0.375rem 0 0.375rem 0.625rem;
  border-color: transparent transparent transparent #000000;
}
.oct-hero .oct-hero__dot:focus-visible,
.oct-hero .oct-hero__toggle:focus-visible { outline: 0.125rem solid var(--oct-blue); outline-offset: 0.1875rem; }

@media (max-width: 767px) {
  .oct-hero__controls { bottom: 1.25rem; gap: 0.875rem; }
  .oct-hero .oct-hero__toggle { width: 2rem; height: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .oct-hero__slide,
  .oct-hero__slide.is-active,
  .oct-hero__slide .oct-hero__inner > * { transition: none; }
}

/* --------------------------------------------------------------------------
   Hero card carousel (.oct-hero--cards)
   Rounded campaign cards; the active one is centred and its neighbours peek
   in. Card colour per slide via --oct-card-bg (Elementor "Card colour").
   -------------------------------------------------------------------------- */
.oct-hero.oct-hero--cards {
  --oct-card-w: 86%;
  --oct-card-gap: 1.5rem;
  --oct-card-radius: 1.75rem;
  display: block;
  height: auto;
  min-height: 0;
  padding: 2.25rem 0 1.75rem;
  border-radius: 0;
  background: #F2F2F2;
  overflow: hidden;
}
.oct-cards__viewport { position: relative; width: 100%; overflow: visible; }
.oct-cards__track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--oct-card-gap);
  will-change: transform;
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.oct-cards__track.no-anim { transition: none; }
/* Before JS: show the first card centred without peeks. */
.oct-hero--cards:not(.is-ready) .oct-cards__track { justify-content: center; }
.oct-hero--cards:not(.is-ready) .oct-card-slide:not(:first-child) { display: none; }

.oct-hero--cards .oct-hero__slide.oct-card-slide {
  position: relative;
  inset: auto;
  z-index: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease;
}
.oct-card-slide {
  --oct-card-bg: #2B64DC;
  /* Colour of the photo fade and the surface behind the text: the same navy on every slide
     (taken from the "Bulk Fuel Delivered On Time" slide). --oct-card-bg still colours the label text. */
  --oct-card-fade: #000030;
  flex: 0 0 var(--oct-card-w);
  display: flex;
  flex-direction: column;
  border-radius: var(--oct-card-radius);
  overflow: hidden;
  background: var(--oct-card-fade);
  color: #FFFFFF;
  isolation: isolate;
}
.oct-hero--cards.is-ready .oct-card-slide:not(.is-active) { opacity: 0.85; }

.oct-card-slide__body {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr);
  min-height: 31rem;
  overflow: hidden;
}

/* Full-bleed photo with a smooth gradient in the card colour behind the text
   (text sits on the right on desktop/tablet, at the bottom on mobile). */
.oct-card-slide__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--oct-card-fade);
}
.oct-card-slide .oct-card-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.oct-card-slide__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--oct-card-fade) 0%, transparent) 0%,
    color-mix(in srgb, var(--oct-card-fade) 8%, transparent) 26%,
    color-mix(in srgb, var(--oct-card-fade) 55%, transparent) 44%,
    color-mix(in srgb, var(--oct-card-fade) 88%, transparent) 58%,
    var(--oct-card-fade) 72%);
}
.oct-card-slide__title,
.oct-card-slide__text { text-shadow: 0 0.125rem 1.25rem rgba(0, 0, 0, 0.25); }

.oct-card-slide__content {
  position: relative;
  z-index: 1;
  grid-column: 2; /* the photo layer is absolutely positioned, so place the text explicitly */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.75rem 3rem 3rem 1rem;
  text-align: center;
}

/* Eyebrow label: small pill with a blue gradient outline. One text colour on every slide,
   kept apart from the white CTA buttons (no white fill, no white border). */
.oct-card-slide__badge {
  --oct-eyebrow-text: #9FD0FF;
  --oct-eyebrow-fill: rgba(56, 156, 248, 0.12);
  --oct-eyebrow-a: #7FD4FF;
  --oct-eyebrow-b: #389CF8;
  --oct-eyebrow-c: #2B64DC;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border: 0.09375rem solid transparent;
  border-radius: 62.4375rem;
  background:
    linear-gradient(var(--oct-eyebrow-fill), var(--oct-eyebrow-fill)) padding-box,
    linear-gradient(#000030, #000030) padding-box,
    linear-gradient(90deg, var(--oct-eyebrow-a) 0%, var(--oct-eyebrow-b) 50%, var(--oct-eyebrow-c) 100%) border-box;
  color: var(--oct-eyebrow-text);
  font-family: var(--oct-font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.oct-card-slide__title {
  margin: 1.75rem 0 0;
  font-family: var(--oct-font-hero);
  font-weight: 400;
  font-size: 5.75rem;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.oct-card-slide__text {
  margin: 1.125rem 0 0;
  font-family: var(--oct-font-body);
  font-size: 1.375rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}
.oct-card-slide__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 1.75rem;
}
.oct-card-slide .oct-card-slide__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 13rem;
  height: 3.25rem;
  padding: 0 1.75rem;
  border: 0.125rem solid #FFFFFF;
  border-radius: 62.4375rem;
  font-family: var(--oct-font-hero);
  font-size: 1.625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.oct-card-slide .oct-card-slide__btn:hover { transform: translateY(-0.125rem); }
.oct-card-slide .oct-card-slide__btn--solid { background: #FFFFFF; color: #000030; }
.oct-card-slide .oct-card-slide__btn--solid:hover { background: #000000; border-color: #000000; color: #FFFFFF; }
.oct-card-slide .oct-card-slide__btn--outline { background: transparent; color: #FFFFFF; }
.oct-card-slide .oct-card-slide__btn--outline:hover { background: #FFFFFF; color: #000030; }
.oct-card-slide .oct-card-slide__btn:focus-visible { outline: 0.1875rem solid #FFFFFF; outline-offset: 0.1875rem; }

.oct-card-slide__note {
  position: absolute;
  right: 1.5rem;
  bottom: 0.875rem;
  z-index: 1;
  margin: 0;
  font-family: var(--oct-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.oct-card-slide__strip {
  padding: 1rem 1.5rem 1.05rem;
  background: #000000;
  font-family: var(--oct-font-heading);
  font-size: 2rem;
  line-height: 1.1;
  text-align: center;
  color: #FFFFFF;
}
.oct-card-slide__spark { color: #389CF8; margin-right: 0.25rem; }

/* Controls row under the cards */
.oct-hero--cards .oct-hero__controls {
  position: static;
  justify-content: center;
  max-width: none;
  margin-top: 1.5rem;
  padding: 0;
  pointer-events: auto;
}
.oct-hero .oct-hero__arrow {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0.125rem solid #000000;
  border-radius: 62.4375rem;
  background: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.oct-hero .oct-hero__arrow:hover { background: #000000; }
.oct-hero__arrow span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.1875rem solid #000000;
  border-right: 0.1875rem solid #000000;
  transform: translate(-65%, -50%) rotate(45deg);
}
.oct-hero__arrow--prev span { transform: translate(-35%, -50%) rotate(-135deg); }
.oct-hero .oct-hero__arrow:hover span { border-color: #FFFFFF; }
.oct-hero .oct-hero__arrow:focus-visible { outline: 0.125rem solid var(--oct-blue); outline-offset: 0.1875rem; }

@media (max-width: 1600px) {
  .oct-card-slide__title { font-size: 5.25rem; }
}
@media (max-width: 1280px) {
  .oct-card-slide__body { min-height: 27rem; }
  .oct-card-slide__title { font-size: 4rem; }
  .oct-card-slide__badge { font-size: 1rem; padding: 0.45rem 1.125rem; }
  .oct-card-slide__strip { font-size: 1.625rem; }
}
@media (max-width: 1024px) {
  .oct-hero.oct-hero--cards { --oct-card-w: 88%; --oct-card-gap: 1rem; padding-top: 1.75rem; }
  .oct-card-slide__body { grid-template-columns: 34% minmax(0, 1fr); min-height: 24rem; }
  .oct-card-slide__visual::after {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--oct-card-fade) 0%, transparent) 0%,
      color-mix(in srgb, var(--oct-card-fade) 45%, transparent) 30%,
      color-mix(in srgb, var(--oct-card-fade) 88%, transparent) 46%,
      var(--oct-card-fade) 62%);
  }
  .oct-card-slide__content { padding: 2.25rem 2rem 2.5rem 0.5rem; }
  .oct-card-slide__title { font-size: 3.375rem; }
  .oct-card-slide__text { font-size: 1.125rem; }
  .oct-card-slide .oct-card-slide__btn { min-width: 0; height: 3rem; font-size: 1.375rem; }
}
@media (max-width: 767px) {
  .oct-hero.oct-hero--cards { --oct-card-w: 86%; --oct-card-gap: 0.75rem; --oct-card-radius: 1.25rem; padding: 1.25rem 0 1.25rem; }
  .oct-card-slide__body { display: flex; flex-direction: column; min-height: 0; }
  /* Phones: the photo fills the top of the card and fades into the card colour. */
  .oct-card-slide__visual { bottom: auto; height: 17rem; }
  .oct-card-slide__visual::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--oct-card-fade) 0%, transparent) 0%,
      color-mix(in srgb, var(--oct-card-fade) 0%, transparent) 45%,
      color-mix(in srgb, var(--oct-card-fade) 60%, transparent) 72%,
      var(--oct-card-fade) 100%);
  }
  .oct-card-slide__content { grid-column: auto; flex: 1; justify-content: flex-start; padding: 13.5rem 1.125rem 2.25rem; }
  .oct-card-slide__badge { font-size: 0.875rem; padding: 0.4rem 0.9rem; letter-spacing: 0.12em; white-space: normal; }
  .oct-card-slide__title { margin-top: 1.125rem; font-size: 2.75rem; line-height: 1; }
  .oct-card-slide__text { font-size: 1rem; margin-top: 0.75rem; }
  .oct-card-slide__actions { flex-direction: column; align-items: stretch; width: 100%; gap: 0.625rem; margin-top: 1.25rem; }
  .oct-card-slide .oct-card-slide__btn { height: 2.875rem; font-size: 1.3125rem; padding: 0 1rem; }
  .oct-card-slide__note { position: static; margin: -1.25rem 1.125rem 1rem; text-align: center; font-size: 0.625rem; }
  .oct-card-slide__strip { font-size: 1.125rem; padding: 0.8rem 1rem; }
  .oct-hero--cards .oct-hero__controls { margin-top: 1.125rem; gap: 0.75rem; }
  .oct-hero .oct-hero__arrow { width: 2.25rem; height: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .oct-cards__track { transition: none; }
}

/* --------------------------------------------------------------------------
   Store locator
   -------------------------------------------------------------------------- */
.oct-finder {
  --oct-finder-accent: #2B64DC;
  padding: 4.6875rem 7rem 2.8125rem 5.1875rem;
  background: #FFFFFF;
  border-radius: 2.5rem;
  color: #222222;
  text-align: left;
}
.oct-finder__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-family: var(--oct-font-ui);
}
.oct-finder__label {
  margin: 0;
  font-family: var(--oct-font-ui);
  font-size: 0.9375rem;
  font-weight: 400;
  color: #333333;
  white-space: nowrap;
}
.oct-finder .oct-finder__input,
.oct-finder .oct-select__trigger {
  height: 2.125rem;
  margin: 0;
  border: 0.0625rem solid #CCCCCC;
  border-radius: 0.125rem;
  padding: 0 0.75rem;
  font-family: var(--oct-font-ui);
  font-size: 0.9375rem;
  line-height: normal;
  color: #000000;
  background: #FFFFFF;
  box-shadow: none;
}
.oct-finder .oct-finder__input:focus,
.oct-finder .oct-select__trigger:focus { outline: 0.125rem solid var(--oct-finder-accent); outline-offset: -0.0625rem; }
.oct-finder .oct-finder__input { width: 11.1875rem; }

.oct-select { position: relative; }
.oct-finder .oct-select__trigger { width: 5.625rem; text-align: left; cursor: pointer; }
.oct-finder .oct-select--sm .oct-select__trigger { width: 5.0625rem; }
.oct-select__list {
  position: absolute;
  top: calc(100% + 0.125rem);
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #FFFFFF;
  border: 0.0625rem solid #CCCCCC;
  box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.12);
  z-index: 600;
  display: none;
}
.oct-select.is-open .oct-select__list { display: block; }
.oct-select__list li {
  margin: 0;
  padding: 0.4375rem 0.75rem;
  font-family: var(--oct-font-ui);
  font-size: 0.875rem;
  cursor: pointer;
  white-space: nowrap;
  color: #222222;
}
.oct-select__list li:hover,
.oct-select__list li:focus,
.oct-select__list li.is-selected { background: #EEF3FD; color: var(--oct-finder-accent); outline: none; }

.oct-finder .oct-finder__search {
  width: 7.6875rem;
  height: 2.0625rem;
  margin: 0 0 0 0.4375rem;
  padding: 0;
  border-radius: 0.125rem;
  background: var(--oct-finder-accent);
  border: 0.0625rem solid #1F55C8;
  color: #FFFFFF;
  font-family: var(--oct-font-ui);
  font-size: 0.9375rem;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.2s ease, filter 0.2s ease;
}
.oct-finder .oct-finder__search:hover { filter: brightness(0.9); }

.oct-finder__body {
  display: grid;
  grid-template-columns: 19.875rem minmax(0, 1fr);
  gap: 1.25rem;
  margin: 2.4375rem 0 0 -0.625rem;
}
.oct-finder__list {
  position: relative;
  height: 33.9375rem;
  overflow-y: auto;
  font-family: var(--oct-font-ui);
  scrollbar-width: thin;
}
.oct-finder__loc {
  padding: 0.8125rem 0.625rem 0.75rem;
  border-bottom: 0.0625rem solid #E3E3E3;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.oct-finder__loc:hover,
.oct-finder__loc.is-active { background: #F5F8FE; }
.oct-finder__loc:focus-visible { outline: 0.125rem solid var(--oct-finder-accent); outline-offset: -0.125rem; }
.oct-finder__loc-title {
  margin: 0 0 0.375rem;
  font-family: var(--oct-font-ui);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--oct-finder-accent);
}
.oct-finder__loc-line { font-size: 1.0625rem; line-height: 1.3125rem; color: #333333; }
.oct-finder__loc-distance { margin-top: 1.625rem; font-size: 0.875rem; color: #333333; }
.oct-finder__loc-dir {
  display: inline-block;
  /* padding = bigger tap area; the negative margin keeps the layout */
  margin: -0.125rem 0 -0.25rem;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  color: #3367B5;
  text-decoration: none;
}
.oct-finder__loc-dir:hover { text-decoration: underline; }
.oct-finder__empty { padding: 1.875rem; text-align: center; color: #737373; }
.oct-finder__empty p { margin: 0 0 0.5rem; font-size: 0.9rem; }
.oct-finder__empty .oct-finder__empty-title { font-weight: 600; font-size: 1rem; }

.oct-finder__map-wrap {
  position: relative;
  height: 33.9375rem;
  overflow: hidden;
}
.oct-finder__map { width: 100%; height: 100%; background: #AADAFF; z-index: 0; }
.oct-finder__map img { max-width: none !important; } /* Leaflet tiles must not be constrained by theme img rules */

.oct-finder__view {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  z-index: 500;
  display: flex;
  background: #FFFFFF;
  box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.3);
  border-radius: 0.125rem;
}
.oct-finder .oct-finder__view-btn {
  height: 2.5rem;
  margin: 0;
  padding: 0 1.0625rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--oct-font-ui);
  font-size: 1.125rem;
  font-weight: 400;
  color: #565656;
  cursor: pointer;
}
.oct-finder .oct-finder__view-btn + .oct-finder__view-btn { border-left: 0.0625rem solid #E6E6E6; }
.oct-finder .oct-finder__view-btn.is-active { color: #000000; font-weight: 500; }

.oct-finder__zoom {
  position: absolute;
  bottom: 2rem;
  right: 0.875rem;
  z-index: 500;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25);
  border-radius: 0.25rem;
  overflow: hidden;
}
.oct-finder .oct-finder__zoom-btn {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--oct-font-ui);
  font-size: 1.5rem;
  line-height: 1;
  color: #666666;
  cursor: pointer;
}
.oct-finder .oct-finder__zoom-btn + .oct-finder__zoom-btn { border-top: 0.0625rem solid #E6E6E6; }
.oct-finder .oct-finder__zoom-btn:hover { color: #000000; }

.oct-finder__meta {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 500;
  display: flex;
  gap: 0.625rem;
  padding: 0.0625rem 0.375rem;
  background: rgba(255, 255, 255, 0.75);
  font-family: var(--oct-font-ui);
  font-size: 0.625rem;
  color: #333333;
}
.oct-finder__meta a { color: #333333; text-decoration: none; }
.oct-finder__meta a:hover { text-decoration: underline; }
.oct-finder__noscript { margin: 1rem 0 0; }

.oct-finder__popup { font-family: var(--oct-font-body); padding: 0.375rem; }
.oct-finder__popup h3 { margin: 0 0 0.25rem; color: #2B64DC; font-size: 1rem; font-weight: 700; }
.oct-finder__popup p { margin: 0 0 0.125rem; color: #404040; font-size: 0.85rem; }
.oct-finder__popup .oct-finder__popup-hours { color: #737373; font-size: 0.8rem; margin-bottom: 0.5rem; }
.oct-finder__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.5rem; }
.oct-finder__chip { background: #EBF2FF; color: #2B64DC; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.72rem; font-weight: 600; }
.oct-finder__popup-link { color: #2B64DC; font-weight: 600; font-size: 0.85rem; text-decoration: underline; }
.oct-finder .leaflet-popup-content-wrapper { border-radius: 0.625rem; }

@media (max-width: 1600px) {
  .oct-finder { padding: 3.75rem 3.75rem 2.5rem; }
}
@media (max-width: 1280px) {
  .oct-finder__body { grid-template-columns: 17.5rem minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  .oct-finder { padding: 2rem; border-radius: 1.75rem; }
  .oct-finder__body { grid-template-columns: minmax(0, 1fr); margin-left: 0; }
  .oct-finder__list { height: auto; max-height: 21.25rem; }
  .oct-finder__map-wrap { height: 26.25rem; }
}
@media (max-width: 767px) {
  .oct-finder { padding: 1.25rem; }
  .oct-finder__toolbar { gap: 0.5rem; }
  .oct-finder .oct-finder__input { width: 100%; }
}

/* --------------------------------------------------------------------------
   Offer cards
   -------------------------------------------------------------------------- */
.oct-offer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.3125rem;
}
.oct-offer-card {
  --oct-offer-mid: rgba(43, 91, 216, 0.72);
  --oct-offer-end: rgba(44, 92, 206, 0.95);
  position: relative;
  display: block;
  height: 26.625rem;
  border-radius: 2.5rem;
  overflow: hidden;
  isolation: isolate;
  color: #FFFFFF;
  text-decoration: none;
}
.oct-offer-card .oct-offer-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  z-index: -2;
}
.oct-offer-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43, 91, 216, 0) 42%, var(--oct-offer-mid) 68%, var(--oct-offer-end) 100%);
  z-index: -1;
}
.oct-offer-zoom-yes .oct-offer-card:hover .oct-offer-card__img { transform: scale(1.05); }
.oct-offer-card__title {
  position: absolute;
  left: 2.3125rem;
  right: 1.5rem;
  bottom: 2.25rem;
  margin: 0;
  font-family: var(--oct-font-body);
  font-weight: 600;
  font-size: 1.875rem;
  line-height: 2.3125rem;
  color: #FFFFFF;
}
@media (max-width: 1280px) {
  .oct-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .oct-offer-grid { grid-template-columns: 1fr; }
  .oct-offer-card { height: 22.5rem; border-radius: 1.75rem; }
}

/* --------------------------------------------------------------------------
   Feature cards ("Why Octane")
   -------------------------------------------------------------------------- */
.oct-why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.875rem 2rem;
}
.oct-why-card {
  --oct-why-bg: #0B0B0B;
  --oct-why-glow: rgba(14, 67, 137, 0.95);
  position: relative;
  height: 17.4375rem;
  display: grid;
  grid-template-columns: 8.625rem minmax(0, 1fr) 11.875rem;
  align-items: center;
  padding: 0 1.875rem 0 1.6875rem;
  border-radius: 1.5rem;
  border: 0.0938rem solid #5A5A5A;
  background:
    radial-gradient(38% 130% at 100% 35%, var(--oct-why-glow) 0%, rgba(10, 45, 100, 0.45) 50%, rgba(0, 0, 0, 0) 100%),
    var(--oct-why-bg);
  overflow: hidden;
  isolation: isolate;
}
.oct-why-grain-yes .oct-why-card::before {
  /* film grain */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.oct-why-num {
  --oct-why-divider: #1B3874;
  position: relative;
  align-self: center;
  height: 9.8125rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-right: 1.125rem;
  font-family: var(--oct-font-heading);
  font-size: 6.5rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #1C3577;
}
.oct-why-num::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0.125rem;
  background: var(--oct-why-divider);
}
.oct-why-title {
  margin: 0;
  padding-left: 1rem;
  font-family: var(--oct-font-body);
  font-weight: 600;
  font-size: 2.375rem;
  line-height: 2.9062rem;
  color: #FFFFFF;
}
.oct-why-card .oct-why-icon {
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: 7.8125rem;
}
@media (max-width: 1600px) {
  .oct-why-card { grid-template-columns: 8.75rem minmax(0, 1fr) 9.375rem; padding: 0 1.75rem 0 1.25rem; }
  .oct-why-num { font-size: 5.625rem; }
  .oct-why-title { font-size: 2rem; line-height: 2.5rem; }
  .oct-why-card .oct-why-icon { height: 6.5625rem; }
}
@media (max-width: 1280px) {
  .oct-why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .oct-why-card {
    height: auto;
    grid-template-columns: 5.75rem minmax(0, 1fr);
    padding: 1.625rem 1.25rem;
  }
  .oct-why-num { height: 6.875rem; font-size: 3.875rem; padding-right: 0.875rem; }
  .oct-why-title { font-size: 1.5rem; line-height: 1.9375rem; }
  .oct-why-card .oct-why-icon { display: none; }
  .oct-why-icon-mobile-yes .oct-why-card { grid-template-columns: 5.75rem minmax(0, 1fr) 4.5rem; }
  .oct-why-icon-mobile-yes .oct-why-card .oct-why-icon { display: block; height: 3.5rem; }
}

/* --------------------------------------------------------------------------
   Forms (shared)
   -------------------------------------------------------------------------- */
.oct-form { margin: 0; text-align: left; }
.oct-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.oct-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.oct-form__status { display: none; margin-top: 1rem; font-family: var(--oct-font-body); font-size: 0.9375rem; line-height: 1.4; }
.oct-form__status.is-success,
.oct-form__status.is-error { display: block; }
.oct-form__status.is-success { color: #00873C; }
.oct-form__status.is-error { color: #E53935; }
.oct-form__error {
  display: none;
  margin: 0.375rem 0 0 0.25rem;
  font-family: var(--oct-font-body);
  font-size: 0.8125rem;
  color: #E53935;
}
.oct-form__error.is-visible { display: block; }
.oct-form__editor-note {
  margin: 0.875rem 0 0 0.25rem;
  padding: 0.625rem 0.875rem;
  border: 0.0625rem dashed #93A9D8;
  border-radius: 0.375rem;
  font-family: var(--oct-font-body);
  font-size: 0.8125rem;
  color: #404040;
  background: #F4F7FD;
}
.oct-form .oct-form__submit {
  display: block;
  width: 100%;
  height: 3.5rem;
  margin: 1.5rem 0 0;
  padding: 0 1rem;
  border: 0;
  border-radius: 62.4375rem;
  background: #000000;
  color: #FFFFFF;
  font-family: var(--oct-font-body);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.oct-form .oct-form__submit:hover,
.oct-form .oct-form__submit:focus-visible { background: #2B64DC; color: #FFFFFF; }
.oct-form .oct-form__submit:disabled { opacity: 0.7; cursor: wait; }
.oct-form__caret {
  position: absolute;
  right: 0.8125rem;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -0.3125rem;
  border-left: 0.4375rem solid transparent;
  border-right: 0.4375rem solid transparent;
  border-top: 0.75rem solid #6E6E6E;
  pointer-events: none;
}

/* Appointment card */
.oct-appointment {
  width: 100%;
  max-width: 58.625rem;
  margin: 0 auto;
  padding: 2.3125rem 2.4375rem 2.5rem;
  border: 0.0625rem solid #C9D8F0;
  border-radius: 1.5rem;
  background: #FFFFFF;
  box-shadow: 0 0.25rem 0.875rem rgba(43, 100, 220, 0.08);
  text-align: left;
  scroll-margin-top: 6rem;
}
.oct-appointment__title {
  margin: 0 0 1.125rem;
  font-family: var(--oct-font-ui);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
  text-align: center;
  color: #000000;
}
.oct-form__group { margin-bottom: 1.5625rem; }
.oct-appointment .oct-form__group:last-of-type { margin-bottom: 0; }
/* Fields inside a two-column row: the row owns the spacing, so it stays even when
   the row stacks to one column on mobile (otherwise the first field gets margin + gap
   and the second field, being :last-of-type, gets none). */
.oct-form__row > .oct-form__group { margin-bottom: 0; }
.oct-appointment .oct-form__row { margin-bottom: 1.5625rem; }
.oct-form__label {
  display: block;
  margin: 0 0 0.125rem;
  font-family: var(--oct-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: #000000;
}
.oct-form .oct-form__control {
  display: block;
  width: 100%;
  height: 2.4375rem;
  margin: 0;
  padding: 0 0.6875rem;
  border: 0.0625rem solid #8A8A8A;
  border-radius: 0.25rem;
  font-family: var(--oct-font-body);
  font-size: 0.9375rem;
  line-height: normal;
  color: #000000;
  background: #FFFFFF;
  box-shadow: none;
}
.oct-form .oct-form__control::placeholder { color: #C4C4C4; opacity: 1; }
.oct-form .oct-form__control:focus { outline: none; border-color: #2B64DC; box-shadow: 0 0 0 0.1875rem rgba(43, 100, 220, 0.15); }
.oct-form .oct-form__control.is-error,
.oct-form .oct-field__control.is-error { border-color: #E53935; }
.oct-form__select-wrap { position: relative; }
.oct-form .oct-form__select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.5rem; }
.oct-form .oct-form__select:invalid { color: #C4C4C4; }
.oct-form .oct-form__select option { color: #000000; }
.oct-form .oct-form__textarea { height: 7.5rem; padding: 0.75rem 0.6875rem; resize: vertical; }
.oct-form .oct-form__textarea:placeholder-shown { padding-top: 3rem; resize: none; }

/* Contact card */
.oct-contact {
  --oct-contact-a: rgba(10, 10, 60, 0.35);
  --oct-contact-b: rgba(110, 110, 150, 0.85);
  max-width: 73.3125rem;
  margin: 0 auto;
  padding: 2.0625rem 1.8125rem 1.5625rem 1.9375rem;
  border-radius: 1.5rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(90deg, var(--oct-contact-a) 0%, rgba(80, 80, 120, 0.55) 60%, var(--oct-contact-b) 100%);
  -webkit-backdrop-filter: blur(0.375rem);
  backdrop-filter: blur(0.375rem);
  scroll-margin-top: 6rem;
}
.oct-contact__card {
  --oct-field-bg: #FFFFFF;
  padding: 2.5rem 2.125rem 1.8125rem 1.5625rem;
  border-radius: 1.25rem;
  background: #FFFFFF;
  text-align: left;
  color: #000000;
}
.oct-contact__card .oct-form__row { gap: 1.375rem; margin-bottom: 1.8125rem; }
.oct-contact__card .oct-form__row + .oct-field--message { margin-top: -0.25rem; }
.oct-field { position: relative; }
.oct-field__label {
  position: absolute;
  top: -0.625rem;
  left: 1.625rem;
  z-index: 1;
  margin: 0;
  padding: 0 0.5rem;
  background: var(--oct-field-bg, #FFFFFF);
  font-family: var(--oct-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: #000000;
  pointer-events: none;
}
.oct-form .oct-field__control {
  display: block;
  width: 100%;
  height: 2.5625rem;
  margin: 0;
  padding: 0.625rem 2.0625rem 0;
  border: 0.0625rem solid #A0A0A0;
  border-radius: 0.5rem;
  font-family: var(--oct-font-body);
  font-size: 0.9375rem;
  line-height: normal;
  color: #000000;
  background: #FFFFFF;
  box-shadow: none;
}
.oct-form .oct-field__control:focus { outline: none; border-color: #2B64DC; }
.oct-form .oct-field__select { appearance: none; -webkit-appearance: none; padding-top: 0.5rem; color: #C4C4C4; cursor: pointer; }
.oct-form .oct-field__select:focus,
.oct-form .oct-field__select.is-touched { color: #000000; }
.oct-form .oct-field__select option { color: #000000; }
.oct-field .oct-form__caret { right: 0.75rem; margin-top: -0.25rem; }
.oct-field--message { margin-left: 0.25rem; }
.oct-form .oct-field--message .oct-field__control { height: 14.75rem; padding: 1.25rem 1.625rem; resize: vertical; }
.oct-recaptcha { margin: 0.875rem 0 0 0.25rem; min-height: 4.875rem; }
.oct-form .oct-form__submit--contact {
  width: 32.1875rem;
  max-width: 100%;
  margin-top: 0.875rem;
  font-family: var(--oct-font-ui);
  font-weight: 500;
  letter-spacing: -0.03em;
}

@media (max-width: 767px) {
  .oct-form__row { grid-template-columns: 1fr; }
  .oct-appointment .oct-form__row { gap: 1.5625rem; }
  .oct-appointment { padding: 1.75rem 1.25rem; }
  .oct-contact { padding: 0.75rem; }
  .oct-contact__card { padding: 1.875rem 1.125rem 1.375rem; }
  .oct-contact__card .oct-form__row { gap: 1.875rem; }
  .oct-field--message { margin-left: 0; }
  .oct-recaptcha { margin-left: 0; transform-origin: 0 0; }
}
@media (max-width: 360px) {
  .oct-recaptcha { transform: scale(0.85); }
}

/* Elementor's "lazy load background images" sets background-image: none !important
   on below-the-fold containers and all their descendants until they scroll into
   view. These are CSS gradients (nothing to download), so keep them visible.
   The repeated classes only raise specificity above Elementor's rule. */
.elementor .e-con .oct-pill.oct-pill.oct-pill.oct-pill {
  background-image: linear-gradient(90deg, var(--oct-pill-a) 0%, var(--oct-pill-b) 50%, var(--oct-pill-c) 100%) !important;
}
.elementor .e-con .oct-card-slide__badge.oct-card-slide__badge.oct-card-slide__badge.oct-card-slide__badge {
  background-image:
    linear-gradient(var(--oct-eyebrow-fill), var(--oct-eyebrow-fill)),
    linear-gradient(#000030, #000030),
    linear-gradient(90deg, var(--oct-eyebrow-a) 0%, var(--oct-eyebrow-b) 50%, var(--oct-eyebrow-c) 100%) !important;
}
.elementor .e-con .oct-hero__title.oct-hero__title.oct-hero__title.oct-hero__title {
  background-image: linear-gradient(90deg, var(--oct-hero-a) 0%, var(--oct-hero-b) 92%) !important;
}
.elementor .e-con .oct-why-card.oct-why-card.oct-why-card.oct-why-card {
  background-image: radial-gradient(38% 130% at 100% 35%, var(--oct-why-glow) 0%, rgba(10, 45, 100, 0.45) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.elementor .e-con .oct-contact.oct-contact.oct-contact.oct-contact {
  background-image: linear-gradient(90deg, var(--oct-contact-a) 0%, rgba(80, 80, 120, 0.55) 60%, var(--oct-contact-b) 100%) !important;
}

/* Branding partner logo cards (gradient, so exempt from lazy load as above) */
.elementor .e-con .oct-logo-card.oct-logo-card.oct-logo-card.oct-logo-card {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 38%, #E5F3FE 75%, #D2EAFF 100%) !important;
}

/* Our Story: text column + frameless founder portrait, matching the static site.
   Text keeps its 55.625rem max; the portrait box takes the rest of the row and bleeds to
   1.5rem from the viewport edge. The portrait runs down to the section's bottom edge.
   Height: on wide screens the top of the head lines up with the "Our Story" pill (49.5rem);
   narrower, it is box width + a little, which keeps its outline 28px+ clear of the text
   (measured at 1025-2400px) and puts the head level with the heading. */
.elementor .e-con .oct-story-text.oct-story-text {
  width: min(55.625rem, 100% - 32.0625rem) !important;
  max-width: none !important;
  flex-shrink: 0;
}
.elementor .e-con .oct-story-portrait.oct-story-portrait {
  --story-portrait-extra: 20px;
  position: relative;
  align-self: stretch;
  flex: 1 1 0;
  width: auto !important;
  max-width: none !important;
  min-height: 30rem;
  margin: -0.75rem calc(1.5rem - var(--oct-gutter) - 0.3125rem - max(0px, (100vw - 2 * var(--oct-gutter) - 0.8125rem - 93rem) / 2)) -5.25rem 0;
  container-type: inline-size;
}
.elementor .e-con .oct-story-portrait.oct-story-portrait img {
  position: absolute;
  /* once the portrait is at full size, any spare box width goes on its right, keeping it beside the text */
  right: max(0px, calc(100cqw + var(--story-portrait-extra) - 49.5rem));
  bottom: 0;
  width: auto;
  height: min(49.5rem, calc(100cqw + var(--story-portrait-extra)));
  max-width: none;
  /* the source photo is cut off at its bottom-left; fade that edge into the background */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%);
}
@media (max-width: 1280px) {
  .elementor .e-con .oct-story-text.oct-story-text { width: calc(100% - 26.25rem - 3.75rem) !important; }
  .elementor .e-con .oct-story-portrait.oct-story-portrait { --story-portrait-extra: 60px; margin-left: 3.75rem; }
}
@media (max-width: 1024px) {
  .elementor .e-con .oct-story-text.oct-story-text { width: 100% !important; }
  /* stacked: portrait below the text, fading out at the bottom */
  .elementor .e-con .oct-story-portrait.oct-story-portrait {
    flex: none;
    min-height: 0;
    width: 100% !important;
    max-width: 32rem !important;
    margin: 0 auto;
    container-type: normal;
  }
  .elementor .e-con .oct-story-portrait.oct-story-portrait img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
  }
}
/* Why Octane Stands Out: no top padding at any width. What We Offer (also white) already
   ends with a full section gap above it, so the two paddings no longer stack. The id
   selector outranks Elementor's per-element padding. */
.elementor .e-con#why { --padding-top: 0px; padding-top: 0; }

/* Phones only: the portrait sits on the boundary with Our Vision (as on desktop), shown clean
   with no fade; Our Vision's own top padding provides the spacing. The id selector outranks
   Elementor's per-element mobile padding. */
@media (max-width: 767px) {
  .elementor .e-con#story { --padding-bottom: 0px; padding-bottom: 0; }
  .elementor .e-con .oct-story-portrait.oct-story-portrait img { -webkit-mask-image: none; mask-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  .oct-offer-card .oct-offer-card__img,
  .oct-hero__btn { transition: none; }
}

/* --------------------------------------------------------------------------
   Gallery (Gallery page): grid of rounded photos, lightbox on click
   -------------------------------------------------------------------------- */
.oct-gallery, .oct-gallery *,
.oct-stack, .oct-stack * { box-sizing: border-box; }

.oct-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.375rem;
}
.oct-gallery__item {
  position: relative;
  margin: 0;
  aspect-ratio: var(--oct-gallery-ratio, 1.68);
  border-radius: 1.875rem;
  overflow: hidden;
  background: #F6F6F6;
  box-shadow: 0 0.25rem 1.125rem rgba(0, 0, 0, 0.16);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.oct-gallery__link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.oct-gallery .oct-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.6s ease;
}
.oct-gallery__item:has(.oct-gallery__link:focus-visible) { outline: 0.1875rem solid var(--oct-blue); outline-offset: 0.25rem; }
.oct-gallery__link:focus-visible { outline: none; }
.oct-gallery__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--oct-font-body);
  font-size: 1rem;
  color: #737373;
  background: #EEEEEE;
}
@media (hover: hover) {
  .oct-gallery-hover-yes .oct-gallery__item:hover { transform: translateY(-0.25rem); box-shadow: 0 0.875rem 2.25rem rgba(0, 0, 0, 0.22); }
  .oct-gallery-hover-yes .oct-gallery__item:hover .oct-gallery__img { transform: scale(1.035); }
}
@media (max-width: 1024px) {
  .oct-gallery { gap: 2rem; }
  .oct-gallery__item { border-radius: 1.5rem; }
}
@media (max-width: 767px) {
  .oct-gallery { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .oct-gallery__item { border-radius: 1.25rem; }
}

/* Photo stack (Gallery banner): a front photo with two smaller photos peeking out
   above and below. Everything is relative to the widget width. */
.oct-stack { position: relative; padding: 14.6% 0 17.5%; }
.oct-stack__card {
  margin: 0;
  aspect-ratio: 1.68;
  border-radius: 1.5625rem;
  overflow: hidden;
  background: #1A1F4A;
}
.oct-stack .oct-stack__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}
.oct-stack__card--front { position: relative; z-index: 2; box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 20, 0.35); }
.oct-stack__card--top,
.oct-stack__card--bottom { position: absolute; left: 13.85%; width: 72.3%; z-index: 1; }
.oct-stack__card--top { top: 0; }
.oct-stack__card--bottom { bottom: 0; }
.oct-stack__card.is-empty { background: rgba(255, 255, 255, 0.12); outline: 0.0625rem dashed rgba(255, 255, 255, 0.5); }
@media (max-width: 767px) {
  .oct-stack__card { border-radius: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .oct-gallery__item,
  .oct-gallery .oct-gallery__img { transition: none; }
  .oct-gallery-hover-yes .oct-gallery__item:hover,
  .oct-gallery-hover-yes .oct-gallery__item:hover .oct-gallery__img { transform: none; }
}

/* --------------------------------------------------------------------------
   Safety Data Sheets page
   -------------------------------------------------------------------------- */
/* Banner image that bleeds off the bottom-right corner (add the CSS class
   "oct-hero-bleed" to an Image widget in a full-width banner container).
   Desktop: anchored to the corner, sized with the viewport like the banner
   photo behind it. Tablet/phone: sits under the title, bleeding to the right. */
.elementor-widget.oct-hero-bleed img { display: block; width: 100%; height: auto; max-width: none; }
@media (min-width: 1025px) {
  .elementor .e-con > .elementor-widget.oct-hero-bleed.oct-hero-bleed {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 49.36vw;
    max-width: none;
    margin: 0;
  }
}
@media (max-width: 1024px) {
  .elementor .e-con > .elementor-widget.oct-hero-bleed.oct-hero-bleed {
    align-self: flex-end;
    width: min(38rem, calc(100% + var(--oct-gutter)));
    max-width: none;
    margin-right: calc(-1 * var(--oct-gutter));
  }
}

/* Product cards: photo on the right fading into navy, fuel-pump icon, name, button */
.oct-sds-grid, .oct-sds-grid * { box-sizing: border-box; }
.oct-sds-grid {
  --oct-sds-gap-x: 1.8125rem;
  --oct-sds-gap-y: 2.3125rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--oct-sds-gap-x);
  row-gap: var(--oct-sds-gap-y);
}
.oct-sds-card {
  --oct-sds-bg: #121825;
  --oct-sds-accent: #1555C6;
  --f: 0.333333;
  position: relative;
  flex: 0 0 calc(var(--f) * (100% + var(--oct-sds-gap-x)) - var(--oct-sds-gap-x));
  min-width: 0;
  min-height: 19.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem;
  border-radius: 1.875rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--oct-sds-bg);
  color: #FFFFFF;
  box-shadow: 0 0.25rem 1.125rem rgba(0, 0, 0, 0.18);
}
.oct-sds-card::before {
  /* film grain, as on the Why Octane cards */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.oct-sds-card--half { --f: 0.5; }
.oct-sds-card--third { --f: 0.333333; }
.oct-sds-card--two-thirds { --f: 0.666667; }
.oct-sds-card--quarter { --f: 0.25; }
.oct-sds-card--three-quarters { --f: 0.75; }
.oct-sds-card--full { --f: 1; }
.oct-sds-card--narrow { --f: 0.389; }
.oct-sds-card--wide { --f: 0.611; }
.oct-sds-card__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 70%;
  z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}
.oct-sds-card .oct-sds-card__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right center;
  border-radius: 0;
  transition: transform 0.6s ease;
}
.oct-sds-card__icon { display: block; flex: none; width: 3.875rem; height: 3.875rem; color: #FFFFFF; opacity: 0.23; }
.oct-sds-card__title {
  margin: 1.5625rem 0 0;
  font-family: var(--oct-font-body);
  font-size: 2.8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: #FFFFFF;
  text-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.35);
}
.oct-sds-card .oct-sds-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  height: 2.625rem;
  margin-top: 2.125rem;
  padding: 0 1.75rem;
  border: 0.125rem solid var(--oct-sds-accent);
  border-radius: 62.4375rem;
  background: #FFFFFF;
  color: var(--oct-sds-accent);
  font-family: var(--oct-font-body);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.oct-sds-card__btn svg { width: 1.25rem; height: 1.25rem; flex: none; }
.oct-sds-card .oct-sds-card__btn:hover { background: var(--oct-sds-accent); color: #FFFFFF; }
.oct-sds-card .oct-sds-card__btn:focus-visible { outline: 0.1875rem solid #FFFFFF; outline-offset: 0.1875rem; }
.oct-sds-card__note {
  position: absolute;
  top: 1rem;
  right: 1rem;
  max-width: 60%;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  background: #FFF4C2;
  color: #5C4A00;
  font-family: var(--oct-font-body);
  font-size: 0.8125rem;
  line-height: 1.35;
}
@media (hover: hover) {
  .oct-sds-zoom-yes .oct-sds-card:hover .oct-sds-card__img { transform: scale(1.04); }
}
@media (max-width: 1024px) {
  .oct-sds-grid { --oct-sds-gap-x: 1.5rem; --oct-sds-gap-y: 1.5rem; }
  .oct-sds-grid .oct-sds-card { --f: 0.5; min-height: 17rem; }
  .oct-sds-grid .oct-sds-card:last-child:nth-child(odd) { --f: 1; }
  .oct-sds-card__title { font-size: 2.25rem; }
}
@media (max-width: 767px) {
  .oct-sds-grid { --oct-sds-gap-y: 1.25rem; }
  .oct-sds-grid .oct-sds-card { --f: 1; min-height: 15rem; padding: 1.5rem; border-radius: 1.25rem; }
  .oct-sds-card__media { width: 65%; }
  .oct-sds-card__icon { width: 3rem; height: 3rem; }
  .oct-sds-card__title { margin-top: 1.25rem; font-size: 1.875rem; }
  .oct-sds-card .oct-sds-card__btn { height: 2.5rem; margin-top: 1.5rem; padding: 0 1.375rem; font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .oct-sds-card .oct-sds-card__img { transition: none; }
  .oct-sds-zoom-yes .oct-sds-card:hover .oct-sds-card__img { transform: none; }
}

/* --------------------------------------------------------------------------
   Contact Us page: form cards (Enquiry / Careers), file upload, contact cards
   -------------------------------------------------------------------------- */
.oct-panel-form, .oct-panel-form *,
.oct-contact-cards, .oct-contact-cards * { box-sizing: border-box; }
.oct-panel-form {
  --oct-panel-field: #131C41;
  --oct-panel-border: #373F5E;
  padding: 2.5rem 2.75rem 2.75rem;
  border-radius: 1.875rem;
  background: #061037;
  color: #FFFFFF;
}
.oct-panel-form .oct-panel-form__title {
  margin: 0 0 2.4375rem;
  font-family: var(--oct-font-body);
  font-size: 2.375rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
  color: #FFFFFF;
}
.oct-panel-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4375rem;
  margin-bottom: 1.4375rem;
}
.oct-panel-form__row--single { grid-template-columns: minmax(0, 1fr); }
.oct-panel-form__field { position: relative; min-width: 0; }
.oct-panel-form .oct-panel-form__label {
  display: block;
  margin: 0 0 0.5rem;
  font-family: var(--oct-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #FFFFFF;
}
.oct-panel-form .oct-form .oct-panel-form__control {
  display: block;
  width: 100%;
  height: 2.375rem;
  margin: 0;
  padding: 0 0.9375rem;
  border: 0.0625rem solid var(--oct-panel-border);
  border-radius: 0.1875rem;
  background: var(--oct-panel-field);
  color: #FFFFFF;
  font-family: var(--oct-font-body);
  font-size: 0.9375rem;
  line-height: normal;
  box-shadow: none;
}
.oct-panel-form .oct-form textarea.oct-panel-form__control { height: 6.875rem; padding: 0.75rem 0.9375rem; resize: vertical; }
.oct-panel-form .oct-form .oct-panel-form__control::placeholder { color: #D9D9D9; opacity: 1; }
.oct-panel-form .oct-form .oct-panel-form__control:focus { outline: 0.125rem solid #389CF8; outline-offset: 0; border-color: #389CF8; }
.oct-panel-form .oct-form .oct-panel-form__control.is-error { border-color: #FF6B6B; }
.oct-panel-form__select { position: relative; }
.oct-panel-form__select::after {
  /* white triangle, as in the design */
  content: '';
  position: absolute;
  top: 50%;
  right: 0.9375rem;
  width: 0;
  height: 0;
  margin-top: -0.25rem;
  border-left: 0.375rem solid transparent;
  border-right: 0.375rem solid transparent;
  border-top: 0.5625rem solid #FFFFFF;
  pointer-events: none;
}
.oct-panel-form .oct-form select.oct-panel-form__control { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; }
.oct-panel-form .oct-form select.oct-panel-form__control:invalid { color: #D9D9D9; }
.oct-panel-form .oct-form select.oct-panel-form__control option { color: #000000; }

/* File upload: the real input is visually hidden but focusable; the label shows a button and the name. */
.oct-file { position: relative; display: inline-flex; align-items: center; gap: 1rem; max-width: 100%; cursor: pointer; }
.oct-panel-form .oct-form .oct-file__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
}
.oct-file__btn {
  display: inline-flex;
  align-items: center;
  height: 2.5625rem;
  padding: 0 1.125rem;
  border-radius: 0.1875rem;
  background: #FFFFFF;
  color: #000000;
  font-family: var(--oct-font-body);
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.oct-file:hover .oct-file__btn { background: #E6ECFA; }
.oct-file:focus-within .oct-file__btn { outline: 0.125rem solid #389CF8; outline-offset: 0.125rem; }
.oct-file__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--oct-font-body);
  font-size: 1rem;
  color: #8A8FA8;
}
.oct-file.has-file .oct-file__name { color: #FFFFFF; }
.oct-file__input.is-error + .oct-file__btn { outline: 0.125rem solid #FF6B6B; outline-offset: 0.125rem; }
.oct-file__hint { display: block; margin-top: 0.375rem; font-family: var(--oct-font-body); font-size: 0.875rem; color: #8A8FA8; }

.oct-panel-form .oct-form .oct-panel-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 3.375rem;
  margin: 0.9375rem 0 0;
  padding: 0 2.75rem;
  border-radius: 62.4375rem;
  background: #FFFFFF;
  color: #000000;
  font-size: 1.25rem;
  font-weight: 400;
  text-transform: uppercase;
}
.oct-panel-form .oct-form .oct-panel-form__submit:hover,
.oct-panel-form .oct-form .oct-panel-form__submit:focus-visible { background: #2B64DC; color: #FFFFFF; }
.oct-panel-form .oct-form__status.is-success { color: #7BE3A0; }
.oct-panel-form .oct-form__status.is-error { color: #FF8A80; }
.oct-panel-form .oct-form__editor-note { color: #FFE58F; }

/* Contact detail cards. Columns take the width of their text (plugin 1.0.18), so an email
   address stays on one line; below 1280px the cards stack. */
.oct-contact-cards { display: grid; grid-template-columns: repeat(3, auto); gap: 1.4375rem; }
.oct-contact-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 8.4375rem;
  padding: 1.5rem 1.75rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem;
  background: #0E0E0E;
  color: #FFFFFF;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.oct-contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a.oct-contact-card:hover { color: #FFFFFF; transform: translateY(-0.1875rem); box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.3); }
a.oct-contact-card:focus-visible { outline: 0.1875rem solid #389CF8; outline-offset: 0.1875rem; }
/* Icon in a round blue badge (the SVG's padding sets the glyph size inside it) */
.oct-contact-card__icon {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.875rem;
  border-radius: 50%;
  background: #2B64DC;
  color: #FFFFFF;
  transition: background-color 0.25s ease;
}
a.oct-contact-card:hover .oct-contact-card__icon { background: #005CFF; }
.oct-contact-card__text {
  min-width: 0;
  font-family: var(--oct-font-body);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: break-word;
}

@media (max-width: 1280px) {
  .oct-contact-cards { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .oct-contact-card { min-height: 6rem; }
}
@media (max-width: 1024px) {
  .oct-panel-form { padding: 2rem; }
  .oct-panel-form .oct-panel-form__title { font-size: 2rem; margin-bottom: 1.75rem; }
}
@media (max-width: 767px) {
  .oct-panel-form { padding: 1.5rem 1.25rem 1.75rem; border-radius: 1.25rem; }
  .oct-panel-form .oct-panel-form__title { font-size: 1.625rem; margin-bottom: 1.25rem; }
  .oct-panel-form__row { grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
  .oct-panel-form .oct-form .oct-panel-form__submit { width: 100%; }
  .oct-contact-card { padding: 1.25rem 1.375rem; gap: 1rem; }
  .oct-contact-card__icon { width: 2.75rem; height: 2.75rem; padding: 0.75rem; }
  .oct-contact-card__text { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .oct-contact-card, .oct-contact-card__icon { transition: none; }
  a.oct-contact-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Mobile refinements (plugin 1.0.15)
   -------------------------------------------------------------------------- */
/* One-column feature cards read 01, 02, 03, 04. The repeater is ordered for the
   two-column desktop grid (filled row by row), so order by the card number. */
@media (max-width: 1280px) {
  .oct-why-grid > .oct-why-card { order: var(--oct-why-order, 0); }
}
/* Form text of at least 16px on phones and tablets: iOS Safari zooms the page
   in when a field with smaller text is tapped. */
@media (max-width: 1024px) {
  .oct-form .oct-form__control,
  .oct-form .oct-field__control,
  .oct-panel-form .oct-form .oct-panel-form__control,
  .oct-finder .oct-finder__input { font-size: 16px; }
}
/* Carousel dots: same look, larger tap area */
.oct-hero .oct-hero__dot { position: relative; }
.oct-hero .oct-hero__dot::before { content: ""; position: absolute; inset: -0.75rem -0.3125rem; }
@media (max-width: 767px) {
  .oct-hero__dots { gap: 1rem; }
}
/* Long product names (e.g. "Unleaded + Ethanol") fit narrow phones */
@media (max-width: 480px) {
  .oct-sds-card__title { font-size: 1.625rem; overflow-wrap: anywhere; }
}