/* GANTRY5 DEVELOPMENT MODE ENABLED.
 *
 * WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost!
 *
 * For more information on modifying CSS, please read:
 *
 * http://docs.gantry.org/gantry5/configure/styles
 * http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
 */

@charset "UTF-8";
/* ======================================
   NAV LOGO + MENU CELLS (GLOBAL)
   ====================================== */
/* Navigation logo cell: bright border, centered content */
#g-navigation .logo-cell {
  display: flex;
  /* keep centered if not already */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* include border in width calc */
  border: 3px solid #ffeb3b;
  /* bright border */
  border-radius: 8px;
  /* tweak or remove if you want square corners */
  padding: 6px;
  /* space between border and logo */
  background-clip: padding-box;
  /* keep bg out of the border area */
}
#g-navigation .menu-cell {
  display: flex;
  /* keep centered if not already */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 3px solid #ffeb3b;
  border-radius: 8px;
  padding: 6px;
  background-clip: padding-box;
}
/* ======================================
   GLOBAL ROOT VAR (USED BY JS)
   ====================================== */
:root {
  --nav-h: 126px;
  /* Updated dynamically by JS */
}
/* ======================================
   HOME PAGE (itemid-101) – HERO & STRUCTURE
   ====================================== */
body.view-featured.itemid-101 {
  --nav-overlay: rgba(0,0,0,0.0);
  --nav-bg-charcoal: #262933;
  /* charcoal used when nav becomes solid */
  /* Header (full viewport hero) */
  /* === HERO FULL VIEWPORT HEIGHT === */
  /* Image fill */
  /* Light unified color wash over slides */
  /* Bright readable text overlay */
  /* Intro section begins directly below hero */
  /* Responsive tuning */
}
body.view-featured.itemid-101 #g-header {
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  background: transparent !important;
  z-index: 1;
}
body.view-featured.itemid-101 #g-header > .g-container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}
body.view-featured.itemid-101 #g-header .g-grid {
  margin: 0 !important;
  padding: 0 !important;
}
body.view-featured.itemid-101 #g-owlcarousel-owlcarousel-2455.g-owlcarousel {
  height: 100dvh;
  min-height: 100svh;
  /* Ensure inner wrappers stretch fully */
  /* Let the hero overlay never block clicks */
}
@supports not (height: 1dvh) {
  body.view-featured.itemid-101 #g-owlcarousel-owlcarousel-2455.g-owlcarousel {
    height: 100vh;
  }
}
body.view-featured.itemid-101 #g-owlcarousel-owlcarousel-2455.g-owlcarousel .owl-stage-outer, body.view-featured.itemid-101 #g-owlcarousel-owlcarousel-2455.g-owlcarousel .owl-stage, body.view-featured.itemid-101 #g-owlcarousel-owlcarousel-2455.g-owlcarousel .owl-item, body.view-featured.itemid-101 #g-owlcarousel-owlcarousel-2455.g-owlcarousel .g-owlcarousel-item, body.view-featured.itemid-101 #g-owlcarousel-owlcarousel-2455.g-owlcarousel .g-owlcarousel-item-wrapper, body.view-featured.itemid-101 #g-owlcarousel-owlcarousel-2455.g-owlcarousel .g-owlcarousel-item-img {
  height: 100% !important;
}
body.view-featured.itemid-101 #g-owlcarousel-owlcarousel-2455.g-owlcarousel::before {
  pointer-events: none !important;
}
body.view-featured.itemid-101 #g-owlcarousel-owlcarousel-2455 .g-owlcarousel-item-img {
  position: relative;
  overflow: hidden;
}
body.view-featured.itemid-101 #g-owlcarousel-owlcarousel-2455 .g-owlcarousel-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  /* prevent image from swallowing clicks */
}
body.view-featured.itemid-101 #g-owlcarousel-owlcarousel-2455.has-color-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 1;
  pointer-events: none;
}
body.view-featured.itemid-101 #g-owlcarousel-owlcarousel-2455 .g-owlcarousel-item-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  padding: clamp(16px, 4vw, 48px);
}
body.view-featured.itemid-101 #g-intro {
  margin-top: 0 !important;
}
@media (max-width: 991.98px) {
  body.view-featured.itemid-101 #g-owlcarousel-owlcarousel-2455 .g-owlcarousel-item-content {
    padding: 2rem 1rem;
    font-size: 0.95rem;
  }
  body.view-featured.itemid-101 #g-navigation {
    --nav-overlay: rgba(0,0,0,0.40);
  }
}
/* ======================================
   HOME – NAV HEIGHT / PADDING TWEAKS
   ====================================== */
/* Tighten menu item vertical padding */
body.view-featured.itemid-101 #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {
  padding-top: 4px !important;
  /* tweak 2–8px to taste */
  padding-bottom: 0px !important;
}
/* ======================================
   HOME – STICKY NAV + SCROLL COLOR CHANGE
   ====================================== */
/* Sticky nav, transparent over hero */
body.view-featured.itemid-101 #g-navigation {
  position: fixed;
  /* stick to top */
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: transparent;
  /* transparent over hero */
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter: none;
  /* drop blur */
}
/* keep inner bits transparent */
body.view-featured.itemid-101 #g-navigation .g-container, body.view-featured.itemid-101 #g-navigation .g-grid, body.view-featured.itemid-101 #g-navigation .logo-cell, body.view-featured.itemid-101 #g-navigation .menu-cell, body.view-featured.itemid-101 #g-navigation nav.g-main-nav {
  background: transparent !important;
}
/* solid charcoal state once we scroll past the trigger offset (JS adds .nav-solid on <body>) */
body.view-featured.itemid-101.nav-solid #g-navigation {
  background-color: var(--nav-bg-charcoal);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
/* Remove any old overlay pseudo-element */
body.view-featured.itemid-101 #g-navigation::before {
  content: none !important;
}
/* Ensure nav content sits above any old overlays if they exist elsewhere */
body.view-featured.itemid-101 #g-navigation > .g-container, body.view-featured.itemid-101 #g-navigation .g-grid, body.view-featured.itemid-101 #g-navigation .g-content {
  position: relative;
  z-index: 1;
}
/* Dropdowns solid & readable (home) */
body.view-featured.itemid-101 #g-navigation .g-dropdown {
  background: rgba(15, 15, 15, 0.95) !important;
  border: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
/* ======================================
   HOME – OWL CAROUSEL ARROWS HOTFIX
   ====================================== */
.g-home-particles #g-owlcarousel-owlcarousel-2455 {
  position: relative;
  /* anchor absolute children */
}
/* Make the nav layer span the slide and sit above overlays */
.g-home-particles #g-owlcarousel-owlcarousel-2455 .owl-nav {
  position: absolute;
  inset: 0;
  /* top:0; right:0; bottom:0; left:0 */
  z-index: 2002;
  /* above hero overlay & text */
  pointer-events: none;
  /* container ignores clicks... */
}
/* ...but the buttons receive clicks */
.g-home-particles #g-owlcarousel-owlcarousel-2455 .owl-nav .owl-prev, .g-home-particles #g-owlcarousel-owlcarousel-2455 .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Pull to edges (base) */
.g-home-particles #g-owlcarousel-owlcarousel-2455 .owl-nav .owl-prev {
  left: 14px;
}
.g-home-particles #g-owlcarousel-owlcarousel-2455 .owl-nav .owl-next {
  right: 14px;
}
/* Ensure the chevrons are visible on dark/light images */
.g-home-particles #g-owlcarousel-owlcarousel-2455 .owl-nav .owl-prev i, .g-home-particles #g-owlcarousel-owlcarousel-2455 .owl-nav .owl-next i {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  font-size: 20px;
}
/* Keep dots above overlay, near bottom center */
.g-home-particles #g-owlcarousel-owlcarousel-2455 .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 2002;
}
/* Move Owl arrows closer to center (home only) via CSS var */
.g-home-particles {
  --hero-arrow-inset: 7%;
  /* Set how far from the edges the arrows sit */
}
.g-home-particles #g-owlcarousel-owlcarousel-2455 .owl-nav .owl-prev {
  left: var(--hero-arrow-inset);
}
.g-home-particles #g-owlcarousel-owlcarousel-2455 .owl-nav .owl-next {
  right: var(--hero-arrow-inset);
}
/* Optional: tighten a bit less on small screens */
@media (max-width: 768px) {
  .g-home-particles {
    --hero-arrow-inset: 5%;
  }
}
/* ============================================
   WHAT WE DO PAGES (117 / 118 / 119)
   Fixed nav + watermark + footer behavior
   ============================================ */
/* FIX NAV BAR ON SUBPAGES (What We Do pages) */
body.itemid-117 #g-navigation, body.itemid-118 #g-navigation, body.itemid-119 #g-navigation {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000 !important;
  /* above watermark and content */
  background: #2c2f3a !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  /* optional */
}
/* Prevent content from sliding underneath the fixed nav */
body.itemid-117 #g-page-surround, body.itemid-118 #g-page-surround, body.itemid-119 #g-page-surround {
  margin-top: 120px;
  /* adjust to match nav height */
}
/* ---------------------------------------
   What We Do – watermark layering
   Applied to the content section (#g-above)
   --------------------------------------- */
/* Make wrappers transparent so watermark can show through (not footer) */
body.itemid-117 #g-page-surround, body.itemid-117 #g-main, body.itemid-117 #g-above {
  background: transparent !important;
}
body.itemid-118 #g-page-surround, body.itemid-118 #g-main, body.itemid-118 #g-above {
  background: transparent !important;
}
body.itemid-119 #g-page-surround, body.itemid-119 #g-main, body.itemid-119 #g-above {
  background: transparent !important;
}
/* Ensure #g-above can host a layered background */
body.itemid-117 #g-above, body.itemid-118 #g-above, body.itemid-119 #g-above {
  position: relative;
  z-index: 0;
}
/* Keep the actual content above the watermark */
body.itemid-117 #g-above > .g-container, body.itemid-118 #g-above > .g-container, body.itemid-119 #g-above > .g-container {
  position: relative;
  z-index: 1;
}
/* === IDEA INVESTIGATION watermark === */
body.itemid-117 #g-above::before {
  content: "";
  position: fixed;
  /* stays put while text scrolls */
  top: 120px;
  /* approx nav height – tweak as needed */
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../../../../images/quavant/Watermark_IdeaInvestigation.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  /* use 'cover' if you want more fill */
  opacity: 0.18;
  /* watermark subtlety */
  pointer-events: none;
  /* don't block clicks */
  z-index: 0;
}
/* === STUDIO & SHOP watermark (itemid 118) === */
body.itemid-118 #g-above::before {
  content: "";
  position: fixed;
  top: 120px;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../../../../images/quavant/Watermark_StudioShop.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
/* === LAB SERVICES watermark (itemid 119) === */
body.itemid-119 #g-above::before {
  content: "";
  position: fixed;
  top: 120px;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../../../../images/quavant/Watermark_LabServices.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
/* ---------------------------------------
   What We Do pages: keep overall background light
   --------------------------------------- */
body.itemid-117, body.itemid-118, body.itemid-119 {
  background-color: #ffffff !important;
}
/* ============================================
   Sticky, full-width charcoal footer on What We Do pages
   ============================================ */
body.itemid-117 #g-page-surround, body.itemid-118 #g-page-surround, body.itemid-119 #g-page-surround {
  min-height: 100vh;
  /* stretch wrapper to full viewport height */
  display: flex;
  flex-direction: column;
}
/* Main content area flexes, pushes footer to bottom */
body.itemid-117 #g-above, body.itemid-118 #g-above, body.itemid-119 #g-above {
  flex: 1 0 auto;
}
/* Footer sits at bottom, does not shrink, full-width charcoal bar */
body.itemid-117 #g-footer, body.itemid-118 #g-footer, body.itemid-119 #g-footer {
  flex-shrink: 0;
  background-color: #2c2f3a !important;
  /* charcoal */
  margin-bottom: 0 !important;
}
/* Footer inner container stays transparent so only outer bar is colored */
body.itemid-117 #g-footer > .g-container, body.itemid-118 #g-footer > .g-container, body.itemid-119 #g-footer > .g-container {
  background: transparent !important;
}
/* ==========================
   GLOBAL NAV: tighten height
   ========================== */
/* Shrink vertical padding inside nav blocks (logo + menu) */
#g-navigation .g-block > .g-content {
  padding-top: 0px !important;
  /* tweak these two */
  padding-bottom: 0px !important;
}
/* Shrink the clickable area of top-level menu items */
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {
  padding-top: 4px !important;
  /* try 2–8px to taste */
  padding-bottom: 4px !important;
  line-height: 1.2 !important;
}
/* Limit logo SVG height so it doesn't force a tall bar */
/* Include all logo particles you use (home, header, footer) */
#logo-9749-particle svg, #logo-7070-particle svg, #logo-4565-particle svg {
  /* home nav logo */
  /* subpage nav logo */
  /* footer logo */
  max-height: 80px;
  /* try 40, then 32, etc. */
  height: auto;
  width: auto;
  display: block;
}
/* ================================
   GLOBAL FOOTER HEIGHT CONTROL
   ================================ */
:root {
  --footer-height: 110px;
  /* <<< Adjust this value to change footer height */
}
/* Ensure footer wrapper uses the variable */
#g-footer {
  min-height: var(--footer-height);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* Align content vertically like the navmenu */
  display: flex;
  align-items: center;
  /* centers content vertically */
}
/* Remove Gantry’s built-in padding inside container/grid */
#g-footer > .g-container, #g-footer .g-grid, #g-footer .g-block, #g-footer .g-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Optional: If spacing inside blocks is needed, add controlled padding */
#g-footer .g-content {
  padding: 10px 0;
  /* adjust as desired; affects ONLY inner text/logo spacing */
}
/* ============================================
   FULLY OPAQUE FOOTER ON ALL PAGES
   (Fixes bleed-through on watermark pages)
   ============================================ */
#g-footer, #g-footer *, #g-footer::before, #g-footer::after {
  background-color: #2c2f3a !important;
  /* solid charcoal */
  opacity: 1 !important;
  backdrop-filter: none !important;
}
/* Ensure Gantry wrapper layers do NOT bleed through */
body.itemid-117 #g-footer, body.itemid-118 #g-footer, body.itemid-119 #g-footer {
  position: relative;
  z-index: 10;
  /* ensure footer sits above watermark layer */
}
/* Kill watermark/background pseudo-elements BELOW the footer */
body.itemid-117 #g-footer::before, body.itemid-118 #g-footer::before, body.itemid-119 #g-footer::before {
  content: none !important;
}
/* Kill the #g-above::before watermark at the footer boundary */
body.itemid-117 #g-above::before, body.itemid-118 #g-above::before, body.itemid-119 #g-above::before {
  bottom: var(--footer-height, 0px);
  /* stop the watermark above footer */
}
/* Remove Gantry hidden overlay that sits behind modules */
#g-page-surround::after, #g-footer::after {
  content: none !important;
}
/* Contact form layout */
.q-contact-form .q-field {
  margin-bottom: 1rem;
}
.q-contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.q-contact-form input[type="text"], .q-contact-form input[type="email"], .q-contact-form select, .q-contact-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #ffffff;
}
/* Honeypot: visually hidden, but present in markup for bots */
.q-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Simple helper text style */
.q-human-check .q-help-text {
  display: block;
  font-size: 0.8rem;
  color: #aaa;
  margin-top: 0.25rem;
}
/*# sourceMappingURL=custom_21.css.map */