:root {
  --bs-primary: #1b4fd6;
  --bs-primary-rgb: 27, 79, 214;
  --bs-link-color: #1b4fd6;
  --bs-link-color-rgb: 27, 79, 214;
  --bs-link-hover-color: #2fa8e0;
  --bs-link-hover-color-rgb: 47, 168, 224;
}

/* Prevent the page from panning/scrolling sideways on mobile if any
   element momentarily runs wider than the viewport (e.g. a non-wrapping
   nav row or an unloaded image before it gets sized). Uses overflow-x:
   clip instead of hidden because hidden forces overflow-y to compute as
   auto, which breaks position: sticky on the header (notably in iOS
   Safari). */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

/* Nav rows use flex-nowrap; let flex items shrink instead of forcing the
   row (and page) wider than the viewport. */
.navbar > .container,
.navbar-brand {
  min-width: 0;
}

.navbar-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Current-page indicator in the header nav (About/Services/Locations/
   Projects/Resources): Bootstrap's default .nav-link.active barely changes
   color, so mark it more clearly with the brand color and a matching
   underline. */
.navbar-nav .nav-link.active {
  color: var(--bs-primary);
  font-weight: 600;
}

@media (min-width: 768px) {
  .navbar-nav .nav-link.active {
    box-shadow: inset 0 -2px 0 var(--bs-primary);
  }
}

/* Below md, the expanding nav menu must not participate in the header's
   flex/grid flow: its growing height (submenus etc.) was forcing the
   hamburger button + menu column to wrap onto a new row under the logo.
   Taking it out of flow keeps the toggle button fixed in place and lets
   the open menu overlay on top of everything below/beside it (including
   the logo) instead of pushing layout around. A fixed 90vw width (rather
   than shrink-to-fit) keeps the panel a consistent, comfortably tappable
   size regardless of how few items are visible before expanding a
   submenu. */
@media (max-width: 767.98px) {
  #navMenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1030;
    /* 100vh on mobile browsers is the *largest* possible viewport (as if
       the address bar were hidden), which can make this taller than what's
       actually visible — pushing the last item(s) below the fold with no
       way to reach them, since the panel's own overflow-y:auto only
       engages once content exceeds this (already-too-generous) max-height.
       100svh (the *smallest* viewport, chrome fully shown) avoids that;
       the plain vh rule is kept first as a fallback for older browsers. */
    max-height: calc(100vh - 100px);
    max-height: calc(100svh - 100px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background-color: #fff;
    padding: 1rem 1.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }

  /* Services/Locations submenus use data-bs-display="static" (disabling
     Popper) so this plain CSS position can render them in-flow, accordion-
     style, inside the scrollable panel above instead of floating — a
     Popper-positioned menu inside a scrolling, absolutely-positioned
     ancestor clips/mispositions on mobile. */
  #navMenu .dropdown-menu {
    position: static;
    float: none;
    border: 0;
  }

  /* Mobile submenu: a plain vertical expand/collapse list, right-aligned to
     match the top-level nav-links, with no per-item borders/lines and no
     leftover .container gutter from the desktop mega-menu markup. */
  #navMenu .navbar-nav {
    align-items: stretch;
  }

  /* .nav-link's display:block doesn't make a <button> (the Services/
     Locations toggles) stretch to fill its <li> the way an <a> does —
     buttons keep their content-based (shrink-to-fit) width regardless of
     display, so without an explicit width they render as a small
     left-aligned box instead of lining up with the plain links. */
  #navMenu .nav-link,
  #navMenu .mega-menu-link {
    display: block;
    width: 100%;
    text-align: right;
  }

  #navMenu .mega-menu .container {
    padding: 0;
  }

  /* Neutralize the Bootstrap grid's own gutter (negative row margin +
     column padding) now that the Services panel uses a .row/.col to place
     its image next to the link list — without this the list would hang
     slightly outside #navMenu's own padding. The image column itself is
     d-none below md, so this only ever affects the link column here. */
  #navMenu .mega-menu .row {
    margin: 0;
  }

  #navMenu .mega-menu .row > * {
    padding: 0;
  }

  #navMenu .mega-menu-link {
    border-bottom: 0;
  }
}

/* Square corners on the Services/Locations submenus — Bootstrap's default
   rounded .dropdown-menu read as too casual for this design. */
.navbar .dropdown-menu {
  border-radius: 0;
}

/* Services/Locations submenus render as a full-width panel below the whole
   header (a "mega menu"), not a small box under the link, matching the
   pattern requested from spectracf.com. Only applies at/above the desktop
   breakpoint — below it the mobile rule above keeps the submenu static/
   in-flow inside the collapsible nav panel instead. */
@media (min-width: 768px) {
  .navbar .nav-item.dropdown {
    /* Bootstrap's .dropdown sets position:relative so .dropdown-menu
       floats under just this link; overriding it to static lets the
       mega-menu position itself against the header (the next positioned
       ancestor, via sticky-top) and span its full width instead. */
    position: static;
  }

  .navbar .dropdown-menu.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
  }

  /* Below md the mega-menu list is a plain stacked <ul> (see .mega-menu-list
     base rule); at md+ it becomes the multi-column grid. */
  .mega-menu-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem 1.5rem;
  }

  /* Services: a single column of links alongside the image, rather than
     the 3-up grid Locations uses (Locations has no image column, so it
     keeps the full-width multi-column grid above). */
  .mega-menu-list.mega-menu-list-single {
    grid-template-columns: 1fr;
  }
}

/* Medium, fixed-height preview image next to the Services link list —
   object-fit keeps it a consistent size regardless of the source photo's
   own aspect ratio. */
.mega-menu-image {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.mega-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu-link {
  display: block;
  padding: 0.5rem 0;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mega-menu-link:hover,
.mega-menu-link:focus,
.mega-menu-link.active {
  color: var(--bs-primary);
}

.text-gold {
  color: #b8860b;
}

.card-img-top {
  height: 200px;
  object-fit: cover;
}

.photo-card {
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.photo-card:hover {
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.photo-card .card-img-top {
  transition: transform 0.35s ease;
}

.photo-card:hover .card-img-top {
  transform: scale(1.06);
}

.photo-card-title,
.photo-card-title a {
  color: #1a1a1a;
  transition: color 0.2s ease;
}

.photo-card:hover .photo-card-title,
.photo-card:hover .photo-card-title a {
  color: var(--bs-primary);
}

.related-links-list li:not(:last-child)::after {
  content: "\2022";
  color: #adb5bd;
  margin-left: 0.5rem;
}

.gallery-img {
  height: 500px;
  object-fit: cover;
}

.brand-logo {
  height: 79px;
}

@media (min-width: 576px) {
  .brand-logo {
    height: 79px;
  }
}

@media (min-width: 768px) {
  .brand-logo {
    height: 79px;
  }
}

@media (min-width: 1200px) {
  .brand-logo {
    height: 79px;
  }
}

.hero-section {
  position: relative;
  min-height: 560px;
  padding: 64px 0;
  background-image:
    linear-gradient(100deg, rgba(8, 12, 22, 0.85) 0%, rgba(8, 12, 22, 0.68) 35%, rgba(8, 12, 22, 0.32) 62%, rgba(8, 12, 22, 0.08) 100%),
    url("assets/main-photo-garage-epoxy-mobile.jpg");
  background-size: cover;
  background-position: right center;
}

@media (min-width: 768px) {
  .hero-section {
    background-image:
      linear-gradient(100deg, rgba(8, 12, 22, 0.85) 0%, rgba(8, 12, 22, 0.68) 35%, rgba(8, 12, 22, 0.32) 62%, rgba(8, 12, 22, 0.08) 100%),
      url("assets/main-photo-garage-epoxy.jpg");
    background-position: center;
  }
}

.hero-content {
  max-width: 620px;
}

@media (min-width: 768px) {
  .hero-content {
    max-width: 780px;
  }
}

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 600;
  color: #f2c14e;
}

.hero-subtext {
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
}

.text-gold-light {
  color: #f2c14e;
}

@media (min-width: 768px) {
  .hero-section {
    min-height: 680px;
    padding: 96px 0;
  }
}

/* Keep anchor-linked section titles clear of the sticky two-row header,
   with a little extra breathing room above the title. */
#services,
#why-us,
#contact {
  scroll-margin-top: 100px;
}

@media (min-width: 768px) {
  #services,
  #why-us,
  #contact {
    scroll-margin-top: 190px;
  }
}

.accent-bar {
  width: 56px;
  height: 4px;
  background: #b8860b;
  border-radius: 2px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.1rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.social-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #b8860b;
  color: #ffffff;
}

/* Generic auto-scrolling logo/image strip (logo_marquee() in
   _components.jinja). The track renders the item list twice back-to-back
   and animates exactly -50% (one full copy's width) so the loop point is
   invisible. */
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  animation: logo-marquee-scroll 14s linear infinite;
}

.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}

@keyframes logo-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.marquee-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}