/*
 * overrides.css — nav patches for running without webflow.js
 * Load order: AFTER webflow.css and abilene-group-195d66.webflow.css
 */

/* ── 0a. Global UX baseline ─────────────────────────────────────────────── */

/* Consistent focus ring for keyboard accessibility */
:focus-visible {
  outline: 2px solid #0082f3;
  outline-offset: 3px;
  border-radius: 3px;
}

/* Remove ugly default outline only when using mouse */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── 0b. Button UX ──────────────────────────────────────────────────────── */
.button,
.w-button,
.text-button,
.nav-link,
.mega-nav-link-item,
.w-tab-link,
.footer-link {
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease,
    transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* Subtle lift on primary buttons */
.button:hover,
.w-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* ── 0c. Form accessibility ─────────────────────────────────────────────── */
/* Style the labels we add programmatically */
.field-label-accessible {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  color: inherit;
  opacity: 0.7;
}

/* Consistent focus on inputs */
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #0082f3 !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 4px rgba(0,130,243,.12) !important;
}

/* ── 0d. Nav link hover indicator ──────────────────────────────────────── */
.nav-link:not(.w-dropdown-toggle):not(.w--current) {
  position: relative;
}
.nav-link:not(.w-dropdown-toggle)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transition: left 0.2s ease, right 0.2s ease, opacity 0.2s ease;
}
.nav-link:not(.w-dropdown-toggle):hover::after {
  left: 0;
  right: 0;
  opacity: 0.4;
}

/* ── 0e. Tab link hover ─────────────────────────────────────────────────── */
.w-tab-link:not(.w--current) {
  opacity: 0.55;
}
.w-tab-link:not(.w--current):hover {
  opacity: 0.85;
}
.w-tab-link.w--current {
  opacity: 1;
}

/* ── 0f. Mega-menu item hover ───────────────────────────────────────────── */
.mega-nav-link-item:hover {
  background-color: rgba(128,128,128,.08);
  border-radius: 6px;
}

/* ── 0c. Section layout — remove ALL Webflow sticky-stack constructs ────── */
/*
 * Webflow IX used three stacked sticky contexts:
 *  1. .section.main            (sticky, z:0, 100vh hero)
 *  2. .section.secondary-section.laptop (relative, z:3, 100vh, top:100px company tabs)
 *  3. .wrapper                 (sticky, z:2, margin-top:-100vh)
 *       └ .spacer              (100vh phantom height)
 *       └ .section.statistic   (sticky, 100vh stats)
 * Without Webflow's IX animations these crash into each other.
 * Override ALL of them to normal document flow.
 */

/* Hero */
.section.main {
  position: relative !important;
  height: auto !important;
  overflow: hidden !important;
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

/* Company tabs (laptop) */
.section.secondary-section.laptop {
  position: relative !important;
  height: auto !important;
  top: 0 !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* Company tabs (mobile) — shown at ≤767 px; just needs normal flow */
.section.secondary-section.mobile {
  position: relative !important;
  height: auto !important;
  top: 0 !important;
}

/* Stats wrapper + phantom spacer */
.wrapper {
  position: relative !important;
  margin-top: 0 !important;
}
.spacer {
  display: none !important;
}

/* Stats section */
.section.statistic {
  position: relative !important;
  height: auto !important;
  padding: 5rem 4rem !important;
}

/* General: no enforced min-height on any section */
.section {
  min-height: auto !important;
}

/* Keep the nav sticky at the top */
#Navigator {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ── 0. Brand tabs: fix overflow bleed-over ────────────────────────────── */
/*
 * The site CSS sets .tabs-content { height: 100%; overflow: visible; }
 * which overrides webflow.css's overflow: hidden, letting active tab pane
 * content visually spill out and overlap the sections below.
 */
.tabs-content {
  height: auto !important;
  overflow: hidden !important;
}

/* ── 1. Locale flag toggle: always 25 px circle ────────────────────────── */
.image-11 {
  width: 25px !important;
  height: 25px !important;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

/* ── 2. Desktop mega-menu: viewport-fixed overlay ──────────────────────── */
/*
 * We use position:fixed so the dropdown is anchored to the viewport,
 * never pushes page content down, and never makes the page taller.
 * JS sets --nav-bottom on :root whenever a dropdown opens so the
 * panel appears flush under the nav bar.
 */

/* Break .w-dropdown out of its own relative context so the list can go fixed */
.nav-container.laptop .nav-menu-list-item,
.nav-container.laptop .nav-menu-dropdown.w-dropdown {
  position: static;
}

.nav-container.laptop .nav-mega-menu-dropdown-list.w-dropdown-list {
  position: fixed !important;
  top:    var(--nav-bottom, 70px) !important;
  left:   0 !important;
  right:  0 !important;
  width:  100vw !important;
  max-height: calc(100vh - var(--nav-bottom, 70px) - 24px) !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
  background: transparent !important;
  /* webflow.css still controls display:none / .w--open → display:block */
}

/* Wrapper inside: compact single-row panel */
.nav-container.laptop .nav-mega-menu-dropdown-list .mega-nav-dropdown-list-wrapper {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  padding: 1rem 2rem !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
}

/* ── 5. Compact mega-menu content ───────────────────────────────────────── */
/*
 * Force all 4 brand groups into ONE row (override desktop-3-column).
 * Hide per-item descriptions to cut height in half.
 * Shrink icons + tighten gaps.
 */

/* Inner brand grid: 4 equal columns, one row */
.nav-container.laptop .nav-mega-menu-dropdown-list .mega-nav-dropdown-list-wrapper .w-layout-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  grid-gap: 1.5rem !important;
}

/* Outer wrapper ul: single full-width cell */
.nav-container.laptop .nav-mega-menu-dropdown-list .mega-nav-dropdown-list-wrapper > ul {
  grid-template-columns: 1fr !important;
}

/* No descriptions in the desktop mega-menu */
.nav-container.laptop .nav-mega-menu-dropdown-list .paragraph-sm {
  display: none !important;
}

/* Smaller icon */
.nav-container.laptop .nav-mega-menu-dropdown-list .icon-medium {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex-shrink: 0;
}

/* Tighter item rows */
.nav-container.laptop .nav-mega-menu-dropdown-list .mega-nav-link-item {
  padding: 0.3rem 0.4rem !important;
  gap: 0.5rem !important;
  align-items: center;
}

/* Tight list gap */
.nav-container.laptop .nav-mega-menu-dropdown-list .nav-mega-menu-list {
  row-gap: 0 !important;
}

/* Eyebrow spacing */
.nav-container.laptop .nav-mega-menu-dropdown-list .eyebrow {
  margin-bottom: 0.5rem !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.08em;
}

/* ── 3. Tablet hamburger nav (480 – 991 px) ─────────────────────────────── */
/*
 * At ≤991 px the hamburger appears inside .nav-container.laptop.
 * The .nav-menu is a sibling (not inside the button) – controlled via
 * [data-nav-menu-open] set by JS.
 */
@media screen and (max-width: 991px) {

  /* Hide nav menu until hamburger opens it */
  .nav-container.laptop .w-nav-menu:not([data-nav-menu-open]) {
    display: none !important;
  }

  .nav-container.laptop .w-nav-menu[data-nav-menu-open] {
    display: block !important;
    position: fixed !important;
    top:    var(--nav-bottom, 70px) !important;
    left:   0 !important;
    right:  0 !important;
    width:  100vw !important;
    max-height: calc(100vh - var(--nav-bottom, 70px) - 16px) !important;
    overflow-y: auto !important;
    z-index: 9999;
    background-color: var(--ai-gen-82921b10-4b39-48f0-b346-808cf4903d29-1746182661554---background-color--bg-primary, #fff);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }

  /* Inside the open mobile menu, dropdowns expand inline */
  .nav-container.laptop .w-nav-menu[data-nav-menu-open] .w-dropdown-list.w--open,
  .nav-container.laptop .w-nav-menu[data-nav-menu-open] .nav-mega-menu-dropdown-list.w--open {
    position: relative !important;
    top:   auto !important;
    left:  auto !important;
    right: auto !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  .nav-container.laptop .w-nav-menu[data-nav-menu-open] .mega-nav-dropdown-list-wrapper {
    position: relative !important;
    inset: auto !important;
    max-height: none !important;
  }
}

/* ── 6. Desktop tab menu: span full width, all 5 tabs in one row ────────── */
/*
 * The original CSS places the .w-tab-menu at grid-area: 1/2/2/5
 * (only cols 2–4 of the 5-col outer grid), so with 5 tab items in a
 * 3-column inner grid they wrap onto a second row.
 * Fix: push the menu to span all 5 columns and give it 5 equal cols.
 */
#Company-Laptop .w-tab-menu {
  grid-area: 1 / 1 / 2 / 6 !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-column-gap: 0 !important;
}
/* Tab content still fills full width (already grid-area: 2/1/3/6) */
#Company-Laptop .w-tab-content {
  grid-area: 2 / 1 / 3 / 6 !important;
}

/* ── 7. Inner brand card grid: clean 3-col proportional layout ─────────── */
/*
 * Original: 7 equal columns with w-node-* placing items at spans [2, 3, 2].
 * This creates an oversized empty logo card when the text card is tall.
 * Fix: use a proportional 3-column grid, reset all w-node grid placements,
 * and stop the logo card from stretching to match the text card height.
 */
.tabs-content .grid-layout.desktop-5-column.mobile-landscape-1-column.grid-gap-sm:not(.mobile) {
  grid-template-columns: 1.4fr 2.4fr 2.2fr !important;
  grid-template-rows: auto !important;
  height: auto !important;
  align-items: stretch !important;
  grid-column-gap: 1.5rem !important;
}

/* Reset every w-node-* grid-area so items flow in DOM order */
.tabs-content .grid-layout.desktop-5-column.mobile-landscape-1-column.grid-gap-sm:not(.mobile) > * {
  grid-area: auto !important;
}

/* Logo card: align to top — no more giant empty dark box */
.tabs-content .grid-layout.desktop-5-column.mobile-landscape-1-column.grid-gap-sm:not(.mobile) > .card:first-child {
  align-self: start !important;
}

/* Cover image: fill the row height set by the text card */
.tabs-content .grid-layout.desktop-5-column.mobile-landscape-1-column.grid-gap-sm:not(.mobile) > .image.cover-image {
  align-self: stretch !important;
  min-height: 300px;
  max-height: 500px;
  border-radius: 10px;
  overflow: hidden;
}

/* Reduce gap between heading and inner grid inside the tab pane */
.tabs-content .flex-vertical.flex-gap-md {
  gap: 1.5rem !important;
}

/* ── 7b. Tablet: collapse brand grid to single column ───────────────────── */
@media screen and (max-width: 991px) {
  .section.secondary-section.laptop {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  /* Outer tabs grid: stacked */
  #Company-Laptop .w-tabs {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }
  /* Tab menu: auto-fit on tablet */
  #Company-Laptop .w-tab-menu {
    grid-area: auto !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    grid-column-gap: 0 !important;
  }
  #Company-Laptop .w-tab-content {
    grid-area: auto !important;
  }
  /* Inner brand card grid: single column on tablet */
  .tabs-content .grid-layout.desktop-5-column.mobile-landscape-1-column.grid-gap-sm:not(.mobile) {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .tabs-content .grid-layout.desktop-5-column.mobile-landscape-1-column.grid-gap-sm:not(.mobile) > .card:first-child {
    align-self: auto !important;
  }
  .tabs-content .grid-layout.desktop-5-column.mobile-landscape-1-column.grid-gap-sm:not(.mobile) > .image.cover-image {
    min-height: 200px;
  }
}

/* ── 8. Stats section (dark bg) — readable cards ────────────────────────── */
.section.statistic .card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px;
}
.section.statistic .h3-heading {
  line-height: 1.1;
}
/* Stats image: limit height so it doesn't dominate */
.section.statistic .cover-image.utility-aspect-4x3 {
  border-radius: 10px;
  overflow: hidden;
  max-height: 380px;
}

/* ── 9. Tab pane card hover ──────────────────────────────────────────────── */
.card.card-on-secondary {
  border-radius: 10px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card.card-on-secondary:hover {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.18), 0 8px 28px rgba(0,0,0,.32) !important;
  transform: translateY(-2px);
}

/* ── 10. Section statistic at tablet ────────────────────────────────────── */
@media screen and (max-width: 991px) {
  .section.statistic {
    padding: 3rem 2rem !important;
  }
}
@media screen and (max-width: 479px) {
  .section.statistic {
    padding: 2.5rem 1rem !important;
  }
}

/* ── 11. Hero images — constrain height so they don't overflow ──────────── */
.section.main .grid-layout.tablet-1-column.grid-gap-xs.home {
  max-height: 70vh;
  overflow: hidden;
}
.section.main .grid-layout.tablet-1-column.grid-gap-xs.home .cover-image {
  border-radius: 8px;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 12. Contact hero: constrained height, full-width image fill ─────────── */

/* 12a. Header: fixed height, remove flex so grid can fill it properly */
header.section.utility-padding-all-0.utility-overflow-hidden {
  height: 68vh !important;
  min-height: 420px !important;
  display: block !important;
  position: relative !important;
}

/* 12b. Grid: stretch to fill the header */
header.section.utility-padding-all-0.utility-overflow-hidden
  .w-layout-grid.grid-layout.contact {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* 12c. Image container: fill the grid */
header.section.utility-padding-all-0.utility-overflow-hidden
  .utility-position-relative.utility-min-height-100dvh {
  position: absolute !important;
  inset: 0 !important;
  min-height: 0 !important;
}

/* cover-image fills its absolute container naturally via width:100%; height:100%; object-fit:cover */

/* 12f. Text content: pin to the bottom of the hero */
header.section.utility-padding-all-0.utility-overflow-hidden
  .container.utility-z-index-2 {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 3 !important;
  padding-bottom: 3.5rem !important;
  padding-top: 0 !important;
}


/* ── 14. Contact section — tighter, proportionate padding ───────────────── */
.section.unique {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* ── 15. Contact section layout — responsive flex row ───────────────────── */
.div-block-5 {
  gap: 4rem !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

/* Left heading block */
.div-block-132 {
  flex: 1 1 260px !important;
  max-width: 380px !important;
  padding-top: 0.5rem !important;
}

/* Right form wrapper */
.form-block {
  flex: 1 1 380px !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

/* ── 16. Contact form card — polished UX ────────────────────────────────── */
.form-2 {
  width: 100% !important;
  min-width: 0 !important;
  padding: 2rem !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15) !important;
  gap: 1.25rem !important;
}

/* Name + email fields: side-by-side row */
.div-block-113 {
  gap: 1rem !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
.div-block-113 > div {
  flex: 1 1 150px !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
}

/* Accessible field labels */
.field-label-accessible {
  display: block !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #444 !important;
  margin-bottom: 0.25rem !important;
}

/* Text inputs: full width, refined style */
.text-field {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0.7rem 0.9rem !important;
  border: 1.5px solid #d8d8d8 !important;
  border-bottom: 1.5px solid #d8d8d8 !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
  background: #f8f8f8 !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
}
.text-field:focus {
  border-color: #003e52 !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 62, 82, 0.1) !important;
}

/* Textarea row */
.div-block-131 {
  align-items: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  width: 100% !important;
}
.textarea {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0.7rem 0.9rem !important;
  border: 1.5px solid #d8d8d8 !important;
  border-radius: 8px !important;
  min-height: 140px !important;
  font-size: 0.95rem !important;
  background: #f8f8f8 !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.textarea:focus {
  border-color: #003e52 !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 62, 82, 0.1) !important;
}

/* Submit button row */
.div-block-130 {
  max-width: 100% !important;
  width: 100% !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

/* Branded submit button */
.submit-button-2 {
  background-color: #003e52 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.85rem 2.5rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  min-width: auto !important;
  width: auto !important;
  letter-spacing: 0.01em !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}
.submit-button-2:hover {
  background-color: #005470 !important;
  transform: translateY(-1px) !important;
}
.submit-button-2:active {
  transform: translateY(0) !important;
}

/* ── 17. Info cards: 2-column grid (only 2 cards exist) ─────────────────── */
ul.grid-layout.contact {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto !important;
  margin-top: 3rem !important;
}

/* ── 18. Contact page responsive breakpoints ─────────────────────────────── */
@media screen and (max-width: 767px) {
  .div-block-5 {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  .div-block-132 {
    max-width: 100% !important;
  }
  ul.grid-layout.contact {
    grid-template-columns: 1fr !important;
    margin-top: 2rem !important;
  }
  .section.unique {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}
@media screen and (max-width: 479px) {
  .div-block-113 {
    flex-direction: column !important;
  }
  .form-2 {
    padding: 1.5rem !important;
  }
  header.section.utility-padding-all-0.utility-overflow-hidden {
    height: 55vh !important;
    min-height: 320px !important;
  }
}

/* ── 4. Mobile portrait container (≤ 479 px) ───────────────────────────── */
.nav-container.mobile .w-nav-menu:not([data-nav-menu-open]) {
  display: none !important;
}

.nav-container.mobile .w-nav-menu[data-nav-menu-open] {
  display: block !important;
  position: fixed !important;
  top:    var(--nav-bottom, 70px) !important;
  left:   0 !important;
  right:  0 !important;
  width:  100vw !important;
  max-height: calc(100vh - var(--nav-bottom, 70px) - 16px) !important;
  overflow-y: auto !important;
  z-index: 9999;
  background-color: var(--ai-gen-82921b10-4b39-48f0-b346-808cf4903d29-1746182661554---background-color--bg-primary, #fff);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Sub-dropdowns inside mobile nav: inline */
.nav-container.mobile .w-nav-menu .w-dropdown-list.w--open {
  position: relative !important;
  top:   auto !important;
  left:  auto !important;
  right: auto !important;
  width: 100% !important;
}

.nav-container.mobile .w-nav-menu .mega-nav-dropdown-list-wrapper {
  position: relative !important;
  inset: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER RESPONSIVE FIXES
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 19a. Fix footer flex row: stack container + copyright bar vertically ── */
footer#Footer {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  height: auto !important;
}

/* ── 19. Logo brand row: constrain images and restore 2-col grid ────────── */

/* Cap logo images at a readable height at all sizes */
.image-4,
.image-5,
.image-6 {
  max-height: 2.5rem !important;
  width: auto !important;
  max-width: 220px !important;
}

/* Remove fixed 250px height on the logos container – let it grow naturally */
.div-block-2 {
  height: auto !important;
  gap: 0 !important;
}

/* Keep logo + social icons on the same row (logo left, icons right) at ALL
   breakpoints – overrides Webflow's 767px collapse to 1 column */
@media screen and (max-width: 767px) {
  .footer-grid-3-column {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }
}

/* ── 20. Footer top section: contact details + nav links ────────────────── */

/* Tighten the contact-details gap on mobile so it doesn't feel spread out */
@media screen and (max-width: 767px) {
  .contact-details {
    grid-row-gap: 1.25rem !important;
  }
  .address,
  .business-hours,
  .phone {
    grid-column-gap: 16px !important;
    grid-row-gap: 16px !important;
  }
}

/* ── 21. Footer nav link columns: readable on all sizes ─────────────────── */
@media screen and (max-width: 479px) {
  .footer-grid-3-column {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .image-4,
  .image-5,
  .image-6 {
    max-height: 2rem !important;
    max-width: 160px !important;
  }
}