/* June Digitals brand pass. Loaded after the base Webflow stylesheet, so these
   rules override it: pure black backgrounds everywhere, solid PS-blue buttons
   (no border/gradient), permanently solid navbar, footer fading to solid blue. */

:root {
  --grey--grey-900: #000;
  --grey--grey-800: #000;
  --_colors-2---bg-primary: #000;
  --base--blue: #0137e2;
}

/* use the Coming Soon panel's own side margin (1.75rem) as the page's
   one consistent side margin everywhere, instead of Webflow's own
   responsive padding-global values. */
.padding-global { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }

/* logo sits too far from the edge relative to the rest of the navbar -- pull
   it in on the left only, leave the hamburger/buttons side untouched. */
.navbar .padding-global.is-navbar { padding-left: 1rem !important; }

.navbar { background-color: #000 !important; background-image: none !important; }
.navbar_list { background-color: #0a0a0a !important; }

/* push nav links to the right of the topbar (next to the hamburger), and
   stop them from being forced to uppercase (frog's .text-sm default) */
.nav_wrap { flex: 1 1 auto; justify-content: flex-end !important; margin-right: 1.5rem; }
.navbar_list .text-sm { text-transform: none !important; }

/* white underline under the nav link matching the current page */
.navbar_list a.link { position: relative; }
.navbar_list a.link.is-current-page::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: #fff; border-radius: 999px;
}
.footer .text-sm { text-transform: none !important; }

.button_left,
.button_left:where(.w-variant-16339642-0577-1bb6-ab84-e46e09c4ed4d) {
  background-image: none !important;
  background-color: #fff !important;
  border: none !important;
}
.button_left .button_text { color: #0a0a0a !important; }

.button.is-secondary {
  background-color: #fff !important;
  border: none !important;
  color: #0a0a0a !important;
}

.footer {
  background: linear-gradient(135deg, #123b8f 0%, var(--base--blue, #2562ff) 100%);
}

/* Kill the navy gradient panel + white-bordered "segmented pill" tabs
   (Pricing PH/SG/AU, and any other .tab-link-button group): every tab
   becomes its own full pill, no border, solid white when active -- no
   more blue gradient or line-container look anywhere. */
.section_pricing2, .section-2 {
  background-image: none !important;
  background-color: #000 !important;
}

.tab-link-button,
.tab-link-button.tab-link-button-left,
.tab-link-button.tab-link-button-right {
  border: none !important;
  border-radius: 999px !important;
  background-color: #16171f !important;
  background-image: none !important;
  color: #fff9 !important;
}
.tab-link-button.w--current,
.tab-link-button.tab-link-button-left.w--current,
.tab-link-button.tab-link-button-left.w--current:active {
  background-color: #fff !important;
  background-image: none !important;
  color: #0a0a0a !important;
}
.rental-tabs-top.w-tab-menu, .w-tab-menu {
  gap: 0.4rem;
}

/* pricing cards: drop the white outline, keep just a soft panel */
.pricing_card-item {
  border: none !important;
  background-color: #14151c;
}

/* Webflow's own injected "Made in Webflow" badge */
.w-webflow-badge { display: none !important; }

/* on mobile the fixed navbar is taller relative to the page than desktop, and
   frog's own spacer padding shrinks at this breakpoint -- so section content
   (page titles, hero text) renders half-hidden underneath it. Give sections
   more top clearance on small screens instead. */
@media screen and (max-width: 767px) {
  :root { --_sizes---padding-section--small: 4.5rem; }
}

/* Kill FridayFrog's leftover hover/reveal/slide animations (button text swap,
   hamburger morph, popout/modal reveals, scroll-triggered fades) -- static,
   instant states everywhere instead. */
.button_banner-text.is-bottom { display: none !important; }
.button_left, .clip_intro, .button_text, .button_banner-text,
.nav-button_line, .menu-button, .w-nav-button, .w-nav-overlay,
[data-animation], [data-w-id] {
  transition: none !important;
  animation: none !important;
}
/* Light mode -- navbar/footer stay dark "chrome"; the page body and content
   sections (which carry all visible text via .rc-root's own --rc-text token)
   flip to a light background. Toggled by #rcThemeToggle in catalog.js, which
   sets data-theme="light"|"dark" on <html> and persists it in localStorage. */
[data-theme="light"] body,
[data-theme="light"] .section_pricing2,
[data-theme="light"] .section-2 {
  background-color: #f4f5f7 !important;
}
[data-theme="light"] .navbar { background-color: #fff !important; background-image: none !important; }
[data-theme="light"] .navbar_list { background-color: #fff !important; }
[data-theme="light"] .navbar_list .text-sm { color: #0a0a0f !important; }
[data-theme="light"] .navbar_list a.link.is-current-page::after { background: #0a0a0f; }
[data-theme="light"] .navbar_logo-link img { filter: invert(1); }
[data-theme="light"] .rc-menu-line { background: #0a0a0f; }
[data-theme="light"] .rc-rules-nav-btn { background: var(--rc-blue, #0137e2) !important; color: #fff !important; }

/* Webflow's native menu-button toggle rotates/morphs the 3 lines into an X via
   inline JS styles (not CSS transitions), so transition:none above can't stop
   it -- pin the lines' transform with !important instead, which does win over
   the inline style Webflow sets. */
.nav-button_line.is-first { transform: translate(0, -.5rem) !important; }
.nav-button_line.is-second { transform: none !important; }
.nav-button_line.is-third { transform: translate(0, .5rem) !important; }
html.w-mod-js:not(.w-mod-ix3) :is([animation="first"], [animation="second"], [navbar="item"], .hero_img) {
  visibility: visible !important;
}