/* ==========================================================================
   clone.css - design-reference clone patches for the offline sigsauer mirror.

   Ground rule: touch as little as possible. The production stylesheet
   (a2e730bdea24eaba342e68824bbf1749.min.css) already carries the real design,
   including the full slick-carousel ruleset and the video-background classes.
   Everything here exists only to replace something the stripped JavaScript
   used to do, or to hide a widget shell that JS used to fill.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Mega menu
   The production CSS already opens the level-1 submenu on :hover / :focus-within
   and already hardcodes `top: 75px`. The only thing the live JS added was an
   inline `style="top: <header height>px"`. clone.js reproduces that inline
   style; this rule is the no-JS fallback so the menu is never mispositioned.
   -------------------------------------------------------------------------- */
nav.main .main-list .main-item:hover .main__inner-list--level1,
nav.main .main-list .main-item:focus-within .main__inner-list--level1 {
  top: var(--clone-header-height, 75px);
}

/* --------------------------------------------------------------------------
   1b. Fixed header anchoring + mobile drawer containing block
   `.fixed-menu .main-menu-container` is position:fixed but the theme never
   sets `top`, so with top:auto the header paints at its flow position and
   slides OUT of the viewport as soon as the page scrolls (the live JS kept
   it anchored). Pin it to the viewport top, matching live behaviour.

   `nav.main.active .main-wrapper` (the open mobile drawer) is authored as
   position:absolute with `top:calc(51px + 55px)` and
   `height:calc(100% - 51px - 35px - 55px)` - offsets that only make sense
   against the VIEWPORT, and its own :before/:after are already
   position:fixed. But inside the fixed 55px header its containing block is
   the header, so the height calc goes negative and the drawer collapses to
   0. Promote the panel itself to position:fixed so every authored offset
   resolves against the viewport as intended.
   -------------------------------------------------------------------------- */
.fixed-menu .main-menu-container {
  top: 0;
}
nav.main.active .main-wrapper {
  position: fixed;
}

/* --------------------------------------------------------------------------
   2. Product carousels
   `div[data-appearance=carousel] .product-items.widget-product-carousel` paints
   a loading spinner and hides `.product-item-details` until `.slick-initialized`
   lands on it. clone.js initialises slick, so the normal path is covered.
   A carousel with zero products can never initialise, so clone.js tags it
   `.clone-empty` and we remove it from the flow entirely (the live homepage had
   exactly one such instance: an empty personalization widget).
   -------------------------------------------------------------------------- */
.widget-product-carousel.clone-empty,
.widget-product-carousel:empty {
  display: none !important;
}

/* Also collapse the wrapper so the empty widget leaves no gap or spinner. */
[data-content-type='products'].clone-empty,
[data-appearance='carousel'].clone-empty {
  display: none !important;
}

/* Slick needs the arrows to sit above the slides; the theme styles them but
   only inside an initialised slider, so nothing to add unless init failed. */
.widget-product-carousel:not(.slick-initialized) .slick-prev,
.widget-product-carousel:not(.slick-initialized) .slick-next {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. PageBuilder video backgrounds
   clone.js injects the theme's own markup:
     .video-background-outer > .video-background-inner > video.video
   The theme already sizes and centres those. The only problem is stacking:
   `.video-background-outer` is `z-index:-2`, which paints *behind* the row's
   own background-color, so the row would cover the video. We give the row a
   stacking context, drop its background colour, and lift the real content.
   -------------------------------------------------------------------------- */
.clone-has-video {
  position: relative;
  background-color: transparent !important;
}

.clone-has-video > .video-background-outer {
  z-index: 0;
}

.clone-has-video > *:not(.video-background-outer) {
  position: relative;
  z-index: 1;
}

.clone-has-video .video-background-inner > video.video {
  object-fit: cover;
  /* Guarantee full coverage even when the intrinsic aspect ratio differs. */
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

/* --------------------------------------------------------------------------
   4. Mobile navigation
   The theme ships a complete `nav.main.active` mobile drawer and a `.menu-menu`
   hamburger, but the show/hide JS was inline. clone.js toggles `.active`;
   these rules only cover the drill-down submenu, for which the theme has no
   mobile ruleset at all (the live JS built it dynamically).
   -------------------------------------------------------------------------- */
@media screen and (max-width: 63.99em) {
  /* The hamburger is display:none above 64em in the theme; below it, show it. */
  .main-menu-container .main-menu-globals > div.menu-menu {
    display: inline-block;
  }

  /* The drawer is closed unless clone.js adds .active to nav.main. */
  nav.main:not(.active) .main-wrapper {
    display: none;
  }

  /* Submenu panels slide over the parent list, matching the live drill-down. */
  nav.main.active .main__inner-list {
    display: none;
  }

  /* Fixed rather than absolute: the theme makes every parent row
     position:relative (for the expand strip) and clone.js writes an inline
     top equal to the header height, so an absolute panel would land under
     the tapped row instead of over the list. Pinned below the header. */
  nav.main.active .main__inner-list.clone-open {
    position: fixed;
    z-index: 2;
    top: var(--clone-header-height, 75px) !important;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: auto;
    min-height: 0;
    overflow-y: auto;
    background: #151515;
  }

  nav.main.active .main__inner-list.clone-open > .menu-inner > ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The 44px strip on the right of a parent row is the expand hit area. */
  nav.main.active .main-list .clone-expand {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 100%;
    cursor: pointer;
  }

  nav.main.active .main-list [class*='-parent'] {
    position: relative;
  }

  /* The theme styles .menu-back-link (including its "Back to " ::before)
     but never emits one; clone.js inserts it. */
  nav.main.active .main-list .menu-back-link {
    cursor: pointer;
  }
}

/* clone.js inserts the drill-down back link into every parent panel; the
   theme only styles it inside the open drawer, so keep it out of the desktop
   hover panel. */
nav.main:not(.active) .menu-back-link {
  display: none;
}

/* --------------------------------------------------------------------------
   5. Dead widget shells
   These containers are emptied by the script strip and have no CSS of their own
   anywhere in the bundle, so they would render as stray boxes.
   `.sbm-modal` and `.restriction-overlay` are NOT listed here - they already
   carry their own `display:none` (inline <style> block / `.no-display` class).
   -------------------------------------------------------------------------- */
#authenticationPopup {
  display: none !important;
}

/* Minicart dropdown: the knockout template never renders, leaving an empty
   bordered panel hanging under the cart icon on some breakpoints. */
.block.block-minicart {
  display: none !important;
}

/* --------------------------------------------------------------------------
   6. Freeze mode (?freeze=1)
   clone.js pauses background video on the first frame and adds .clone-frozen to
   <html> so transitions/animations settle for pixel-diff screenshots.
   -------------------------------------------------------------------------- */
html.clone-frozen *,
html.clone-frozen *::before,
html.clone-frozen *::after {
  /* Zero duration, NOT paused: pausing freezes entrance animations on their
     FIRST frame (the header's `slidedown` starts at translateY(-100%), which
     hid the header and, because a transformed element becomes the containing
     block for fixed descendants, collapsed the mobile drawer). Zero duration
     completes every animation instantly to its settled state. */
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition: none !important;
}

/* --------------------------------------------------------------------------
   7. Magento cookie-status banner
   Live Magento renders the banner then hides it with an inline script
   (display:none) unless cookies are actually disabled. The JS-strip removed
   that script, so hide it here to match live rendering.
   -------------------------------------------------------------------------- */
.cookie-status-message {
  display: none;
}

/* --------------------------------------------------------------------------
   8. THE MAVERICK rebrand — logo lockup + footer
   Replaces the inline SIG SAUER SVGs. "THE" sits in the SIG position
   (leading, larger, italic), "MAVERICK" in the SAUER position. White on the
   black bar, 0.2s hover to the house gold, same as the original mark.
   -------------------------------------------------------------------------- */
.mav-lockup {
  display: inline-flex;
  align-items: baseline;
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;            /* Stratum2 Black is registered at 700 */
  font-style: italic;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  transition: 0.2s color ease-in-out;
  text-transform: uppercase;
}
.mav-lockup .mav-the {
  font-size: 1em;
  margin-right: 0.18em;
  letter-spacing: 0.02em;
}
.mav-lockup .mav-maverick {
  font-size: 1.5em;
  letter-spacing: -0.01em;
}
.main-menu-container .main-menu-logo a {
  display: inline-flex;
  align-items: center;
  max-width: none; /* the SVG rule capped the link at 140px; text must not overflow into the nav */
  width: auto;
}
.main-menu-container .main-menu-logo a .badge .mav-lockup { font-size: 14px; }
.main-menu-container .main-menu-logo a .full-logo {
  line-height: 0; /* the span itself; lockup restores its own line-height */
}
.main-menu-container .main-menu-logo a .full-logo .mav-lockup { font-size: 20px; }
.main-menu-container .main-menu-logo a:hover .mav-lockup { color: #eeaf00; }

.footer-logo { line-height: 0; }
.footer-logo .mav-lockup { font-size: 16px; }
.footer-logo:hover .mav-lockup { color: #eeaf00; }

.mav-footer-tagline {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #9b9b9b;
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   9. Maverick Products listing (pistols.html layout)
   -------------------------------------------------------------------------- */
.mav-plp-intro {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  font-size: 18px;
  letter-spacing: 0.02em;
  padding: 28px 16px;
  max-width: 900px;
  margin: 0 auto;
}
.mav-image-container {
  width: 320px;
  max-width: 100%;
}
.mav-image-container span.product-image-wrapper {
  padding-bottom: 78.125%; /* same 320x250 ratio the SIG grid uses */
}
.mav-placeholder-tile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1a1a1a;
}
.mav-placeholder-name {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 0 12px;
}
.mav-placeholder-note {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9b9b9b;
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   10. Maverick content bands (services / blog / article / contact)
   SIG design language only: black, white, #eeaf00 gold, Stratum2.
   -------------------------------------------------------------------------- */
.mav-hero {
  background-color: #151515;
  background-size: cover;
  background-position: center;
  padding: 88px 24px 64px;
}
.mav-hero-inner { max-width: 1140px; margin: 0 auto; }
.mav-hero h1 {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-size: 52px;
  line-height: 1.05;
  margin: 0;
}
.mav-rule { width: 84px; height: 4px; background: #eeaf00; margin: 18px 0; }
.mav-hero-sub {
  color: #d5d5d5;
  font-size: 17px;
  line-height: 1.6;
  max-width: 760px;
  margin: 0;
}
.mav-band { padding: 56px 24px; background: #fff; }
/* Anchor landings (services.html#appraisal etc., linked from the homepage
   Services cards) clear the 75px fixed .main-menu-container. */
.mav-band[id] { scroll-margin-top: 75px; }
.mav-band--tint { background: #f5f5f5; }
.mav-band--dark { background: #151515; color: #fff; }
.mav-band-inner { max-width: 1140px; margin: 0 auto; }
.mav-kicker {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: #b98900;
  margin: 0 0 10px;
}
.mav-band--dark .mav-kicker { color: #eeaf00; }
.mav-band h2 {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 30px;
  margin: 0 0 14px;
}
.mav-band p { font-size: 16px; line-height: 1.75; max-width: 840px; margin: 0 0 16px; }
.mav-band .pagebuilder-button-primary { margin-top: 8px; }

/* Blog index card */
.mav-post-card {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
  border: 1px solid #e3e3e3;
  background: #fff;
  padding: 24px;
  max-width: 1000px;
}
.mav-post-card img { width: 380px; max-width: 100%; height: auto; display: block; }
.mav-post-card-body { flex: 1 1 320px; min-width: 280px; }
.mav-post-card h3 {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 24px;
  margin: 0 0 10px;
}
.mav-post-card h3 a { color: #151515; }
.mav-post-card h3 a:hover { color: #b98900; text-decoration: none; }

/* Article */
.mav-article { max-width: 760px; margin: 0 auto; padding: 56px 24px; }
.mav-article h2 {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 24px;
  margin: 40px 0 14px;
}
.mav-article p { font-size: 17px; line-height: 1.8; margin: 0 0 18px; }
.mav-article figure { margin: 28px 0; }
.mav-article figure img { width: 100%; height: auto; display: block; }
.mav-article figcaption {
  font-size: 13px;
  color: #6b6b6b;
  padding-top: 8px;
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 12px;
}
.mav-article .mav-byline {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: #444;
  margin-bottom: 4px;
}
.mav-pullquote {
  border-left: 4px solid #eeaf00;
  padding: 8px 0 8px 20px;
  margin: 28px 0;
  font-size: 21px;
  line-height: 1.5;
  font-style: italic;
  color: #222;
}
.mav-two-col { display: flex; flex-wrap: wrap; gap: 24px; margin: 28px 0; }
.mav-spec-list {
  flex: 1 1 300px;
  background: #151515;
  color: #fff;
  padding: 24px;
}
.mav-spec-list h3 {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  color: #eeaf00;
  margin: 0 0 6px;
}
.mav-spec-list .mav-spec-sub { color: #bbb; font-size: 13px; margin: 0 0 16px; }
.mav-spec-list ul { list-style: none; margin: 0; padding: 0; }
.mav-spec-list li { padding: 7px 0; border-top: 1px solid #333; font-size: 14px; line-height: 1.5; }
.mav-spec-list li:first-child { border-top: 0; }
.mav-spec-list li b {
  display: block;
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #eeaf00;
}
.mav-article .mav-closing { font-size: 15px; color: #6b6b6b; font-style: italic; }

/* --------------------------------------------------------------------------
   11. Maverick Products banner overlay
   The approved banner photo is busy where the headline sits; a left-weighted
   dark gradient keeps the text legible (same trick SIG's banner-shade uses).
   Class names are the page's generated background classes for that banner.
   -------------------------------------------------------------------------- */
.background-image-6a7c64a70128f,
.background-image-6a7c64a7012bf,
.background-image-6a7c64a70200a,
.background-image-6a7c64a70202d {
  position: relative;
}
.background-image-6a7c64a70128f::before,
.background-image-6a7c64a7012bf::before,
.background-image-6a7c64a70200a::before,
.background-image-6a7c64a70202d::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.15) 100%);
  pointer-events: none;
}
.background-image-6a7c64a70128f > *,
.background-image-6a7c64a7012bf > *,
.background-image-6a7c64a70200a > *,
.background-image-6a7c64a70202d > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   12. Footer emblem — Maverick emblem replaces the SIG emblem watermark.
   Image-only swap; position/size come from the original shorthand rule in
   the production bundle.
   -------------------------------------------------------------------------- */
.footer-container .footer-options .footer-contacts:before {
  background-image: url("/maverick/footer-maverick-emblem.png");
}

/* --------------------------------------------------------------------------
   13. Homepage "About the General" band
   Replaces the SIG Infinite Guarantee Ceros embed that used to sit directly
   under the hero. Layout geometry is borrowed from coffee-tech.com's About
   section (12-column grid, portrait in columns 2-4, statement in 7-11, the
   empty 5-6 gutter, 4:5 rounded figure); palette and type are SIG only -
   #151515 ground, white copy, #eeaf00 accents, Stratum2.

   The copy is VISIBLE BY DEFAULT. clone.js only adds [data-anim="ready"]
   once GSAP + ScrollTrigger + SplitText are all present and motion is
   allowed, so with JS off, GSAP blocked, ?freeze=1 or reduced-motion the
   band still reads as a finished section.
   -------------------------------------------------------------------------- */
.mav-about {
  background-color: #151515;
  color: #fff;
  padding: 120px 0 96px;
  overflow: hidden;
}

.mav-about-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 46px;
  align-items: center;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 74px;
}

.mav-about-figure {
  grid-column: 2 / 5;
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 13px;
  overflow: hidden;
  background-color: #0d0d0d;
}

/* The image overshoots its frame by 10% so the parallax has somewhere to
   travel without ever exposing an edge. */
.mav-about-figure img {
  position: absolute;
  top: -5%;
  left: 0;
  display: block;
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: 50% 22%;
}

.mav-about-text {
  grid-column: 7 / 12;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mav-about-lead {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 28px;
}

.mav-about-body {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 28px;
}

.mav-about-signoff {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.02em;
  color: #eeaf00;
  margin: 0 0 40px;
}

.mav-about-link {
  align-self: flex-start;
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #fff;
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid #eeaf00;
  transition: color .2s ease-in-out, border-color .2s ease-in-out;
}

.mav-about-link:hover,
.mav-about-link:focus {
  color: #eeaf00;
  border-bottom-color: #fff;
  text-decoration: none;
}

/* Reveal gate — only applies once clone.js has confirmed GSAP is usable.
   SplitText wraps each visual line in .line inside an overflow:clip mask, so
   the lines rise out of nothing rather than fading in place. */
.mav-about[data-anim="ready"] .mav-about-signoff,
.mav-about[data-anim="ready"] .mav-about-link {
  visibility: hidden;
}

.mav-about .line {
  will-change: transform;
}

/* --- below the desktop breakpoint (64em, same switch clone.css §4 uses) --- */
@media only screen and (max-width: 63.99em) {
  .mav-about {
    padding: 72px 0 64px;
  }

  .mav-about-grid {
    display: block;
    padding: 0 24px;
  }

  .mav-about-figure {
    width: 100%;
    max-width: 420px;
    margin: 0 0 40px;
  }

  .mav-about-lead {
    font-size: 22px;
  }

  .mav-about-body,
  .mav-about-signoff {
    font-size: 22px;
  }
}

/* --------------------------------------------------------------------------
   14. Homepage "From the Maverick" Field Journal band
   Sits directly under the Z-DRILL Ceros banner, above the grey support row.
   Layout geometry is borrowed from coffee-tech.com's "From Our Blog" section
   (eyebrow, two-line headline, prev/next arrows top-right, a 3-up row of
   image/tag/title/excerpt cards); palette and type are SIG only - #000
   ground, white copy, #eeaf00 accents, Stratum2, square corners. It shares
   the §13 container geometry so the two hand-built Maverick bands line up.

   The track is a plain scroll-snap flex row: it works as a readable,
   drag-scrollable row with no JS at all, and clone.js §14 only adds the
   arrow buttons' paging and end-state. Copy is VISIBLE BY DEFAULT - the
   reveal rules below are gated on [data-anim="ready"], which clone.js sets
   only once GSAP + ScrollTrigger + SplitText are all present and motion is
   allowed.
   -------------------------------------------------------------------------- */
.mav-journal {
  background-color: #000;
  color: #fff;
  padding: 56px 0 96px;
  overflow: hidden;
  /* The Z-DRILL Ceros experience paints a hairline of its own white page
     background along the bottom edge of its canvas. It used to be invisible
     against the grey support row that followed it; against this dark band it
     reads as a white rule. The iframe is cross-origin so its contents cannot
     be restyled - the band simply starts two pixels higher and covers it. */
  margin-top: -2px;
}

.mav-journal-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 74px;
}

/* Headline left, arrows right, both sitting on the same baseline. */
.mav-journal-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin: 0 0 48px;
}

.mav-journal .mav-kicker {
  color: #eeaf00;
  margin: 0 0 18px;
}

.mav-journal-title {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
}

.mav-journal-nav {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
  padding-bottom: 6px;
}

/* Square, not circular - the SIG language has no rounded controls. The
   chevron is a rotated half-border so no icon font or SVG is needed. */
.mav-journal-arrow {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
  background: transparent;
  position: relative;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}

.mav-journal-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transition: border-color 0.25s ease;
}

.mav-journal-arrow[data-dir="next"]::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

.mav-journal-arrow[data-dir="prev"]::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

/* The theme styles bare button:focus / button:active (specificity 0,1,1) with
   a light grey fill, which outranks a plain .mav-journal-arrow rule. Restating
   the transparent ground on the pseudo-classes takes it back. */
.mav-journal-arrow:hover,
.mav-journal-arrow:focus,
.mav-journal-arrow:active {
  background: transparent;
  box-shadow: none;
}

.mav-journal-arrow:focus,
.mav-journal-arrow:active {
  border-color: rgba(255, 255, 255, 0.35);
}

.mav-journal-arrow:hover,
.mav-journal-arrow:focus-visible {
  border-color: #eeaf00;
}

.mav-journal-arrow:hover::before {
  border-top-color: #eeaf00;
  border-right-color: #eeaf00;
}

.mav-journal-arrow:focus-visible {
  outline: 2px solid #eeaf00;
  outline-offset: 2px;
}

.mav-journal-arrow[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

/* Scroll-snap track. Without JS this is still a usable horizontal row; the
   scrollbar is hidden because the arrows (or a swipe) are the affordance. */
.mav-journal-track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mav-journal-track::-webkit-scrollbar { display: none; }

.mav-journal-card {
  flex: 0 0 calc((100% - 64px) / 3);
  scroll-snap-align: start;
  min-width: 0;
}

/* overflow:hidden keeps the hover zoom inside the frame - the same
   containment fix commit 539bd05 applied to the Featured Categories tiles. */
.mav-journal-media {
  display: block;
  overflow: hidden;
  background-color: #0d0d0d;
  margin: 0 0 20px;
}

/* The General's portrait is a 4:5 head-and-shoulders; centring it in a 3:2
   frame would crop the top of the head off. */
.mav-journal-media--portrait img {
  object-position: 50% 20%;
}

.mav-journal-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.mav-journal-card:hover .mav-journal-media img {
  transform: scale(1.04);
}

.mav-journal-tag {
  display: inline-block;
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: #eeaf00;
  border: 1px solid rgba(238, 175, 0, 0.55);
  padding: 6px 12px;
  margin: 0 0 16px;
}

.mav-journal-card-title {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.mav-journal-card-title a {
  color: #fff;
  text-decoration: none;
  transition: color 0.25s ease;
}

.mav-journal-card-title a:hover {
  color: #eeaf00;
}

.mav-journal-excerpt {
  font-size: 15px;
  line-height: 1.7;
  color: #bbb;
  margin: 0;
}

/* Reveal gate - only applies once clone.js has confirmed GSAP is usable. */
.mav-journal[data-anim="ready"] .mav-journal-card {
  visibility: hidden;
}

.mav-journal .line {
  will-change: transform;
}

/* --- below the desktop breakpoint (64em, same switch clone.css §4 uses) --- */
@media only screen and (max-width: 63.99em) {
  .mav-journal {
    padding: 40px 0 64px;
  }

  .mav-journal-inner {
    padding: 0 24px;
  }

  .mav-journal-head {
    margin: 0 0 32px;
  }

  .mav-journal-title {
    font-size: 32px;
  }

  /* Native swipe replaces the arrows on touch widths. */
  .mav-journal-nav {
    display: none;
  }

  .mav-journal-track {
    gap: 20px;
  }

  .mav-journal-card {
    flex: 0 0 78%;
  }
}

/* --------------------------------------------------------------------------
   15. Field Journal on SIG's own Amasty blog markup
   blog.html (body.amblog-index-index) and the essay page
   (body.amblog-index-post) now use the SIG blog DOM verbatim, so the blog
   rules that ship unused in the production CSS bundle do the styling. This
   section only adds what SIG does not have: muted placeholder cards, the
   right-hand table of contents (a mirror of SIG's left share rail), and the
   essay components carried over from the old .mav-article page.
   -------------------------------------------------------------------------- */
/* Placeholder tiles/cards - same muted treatment as the products page. */
.mav-placeholder-pick .pick-card h3,
.mav-placeholder-card .amblog-title .amblog-link,
.mav-placeholder-card .amblog-date {
  font-style: italic;
  color: #9b9b9b;
}
.mav-placeholder-pick,
.mav-placeholder-card .amblog-wrapper a {
  filter: grayscale(1);
  opacity: 0.75;
}

/* Essay components (were scoped to .mav-article; the entry now lives in
   SIG's .blog-single-article wrapper). */
.blog-single-article .mav-byline {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: #444;
  margin: 0 0 4px;
}
.blog-single-article.entry p.mav-byline { margin: 0 0 4px; }
.blog-single-article.entry p.mav-standfirst {
  margin: 22px 0 0;
  font-size: 1.25rem;
  line-height: 1.45;
  color: #222;
}
.blog-single-article figure { margin: 28px 0; }
.blog-single-article figure img { width: 100%; height: auto; display: block; }
.blog-single-article figcaption {
  font-size: 13px;
  color: #6b6b6b;
  padding: 8px 0 12px;
  border-bottom: 1px solid #e3e3e3;
}
.blog-single-article .mav-spec-list li:before { display: none; }
.blog-single-article.entry .mav-spec-list li { font-size: 14px; }
.blog-single-article.entry .mav-spec-list p.mav-spec-sub { margin: 0 0 16px; font-size: 13px; }
.blog-single-article.entry p.mav-closing { font-size: 15px; color: #6b6b6b; font-style: italic; }
.blog-single-article.entry p.mav-closing a { color: #000; font-style: normal; border-bottom: 2px solid #eeaf00; }
.blog-single-article.entry p.mav-closing a:hover { color: #eeaf00; text-decoration: none; }
.blog-single-article.entry h2 { scroll-margin-top: 110px; }

/* Table of contents - mirrors .blog-single-share on the right-hand gutter.
   The absolute box spans the whole article (top:1em -> bottom:0) so the
   sticky inner block has room to travel. */
.blog-single .blog-single-toc {
  position: absolute;
  top: 1em;
  right: 2em;
  bottom: 0;
  width: 220px;
}
.blog-single-toc-inner { position: relative; }
/* Pinned states, toggled by clone.js (top/left/width set inline). */
.blog-single-toc-inner.toc-fixed { position: fixed; }
.blog-single-toc-inner.toc-end { position: absolute; top: auto; bottom: 0; }
.blog-single .blog-single-share.rail-end { top: auto; bottom: 1em; }
.blog-single-toc .toc-title {
  position: relative;
  display: block;
  margin-bottom: 1em;
  padding-bottom: 6px;
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.blog-single-toc .toc-title:after {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 33%;
  height: 3px;
  background-color: #eeaf00;
  content: "";
}
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list li { margin: 0; padding: 0; }
.toc-list a {
  display: block;
  padding: 6px 0 6px 12px;
  border-left: 2px solid #eee;
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #acacac;
  text-decoration: none;
  transition: color 0.2s ease-in, border-color 0.2s ease-in;
}
.toc-list a:hover { color: #eeaf00; text-decoration: none; }
.toc-list a.anchor-active { color: #000; border-color: #eeaf00; }
.toc-viewall {
  display: inline-block;
  margin-top: 18px;
  padding-bottom: 2px;
  border-bottom: 2px solid #eeaf00;
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
}
.toc-viewall:hover { color: #eeaf00; text-decoration: none; }
/* Narrow gutters (1200-1400px): the 900px column leaves ~150px a side. */
@media only screen and (max-width: 87.49em) {
  .blog-single .blog-single-toc { right: 1em; width: 120px; }
  .toc-list a { font-size: 11px; padding-left: 8px; }
}
/* Below 1200px there is no gutter: no rail, no TOC (owner's choice). */
@media only screen and (max-width: 74.99em) {
  .blog-single .blog-single-toc { display: none; }
}

/* Homepage journal band: "View All" beside the arrows (owner-approved). */
.mav-journal-viewall {
  align-self: center;
  margin-right: 12px;
  padding-bottom: 3px;
  border-bottom: 2px solid #eeaf00;
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.mav-journal-viewall:hover { color: #eeaf00; text-decoration: none; }
@media only screen and (max-width: 63.99em) {
  .mav-journal-nav { display: flex; }
  .mav-journal-arrow { display: none; }
}

/* --------------------------------------------------------------------------
   16. About the General (about.html) - sigsauer.com/history pattern
   Full-bleed parallax hero, white 12-column rows (heading left with the
   year bolded, paragraph right), black divider rows, full-bleed photo bands,
   closing CTA band. PageBuilder structural classes from the bundle carry the
   row/column semantics; the geometry below reproduces SIG's inline
   [data-pb-style] widths (8.33 / 41.67 / 41.67 / 8.33 etc.).
   -------------------------------------------------------------------------- */
.cms-history .page-main { max-width: 100%; padding: 0; }
.cms-history .page-main .columns .column.main { padding-bottom: 0; }
.cms-history .pagebuilder-column-line { display: flex; width: 100%; }
.cms-history .pagebuilder-column { box-sizing: border-box; }
.mav-col-1 { width: 8.33333%; align-self: stretch; }
.mav-col-2 { width: 16.6667%; align-self: stretch; }
.mav-col-5 { width: 41.6667%; padding: 0 25px; align-self: center; }
.mav-col-8 { width: 66.6667%; padding: 10px 20px; align-self: center; }
.mav-col-10 { width: 83.3333%; padding: 0 25px; align-self: center; }

/* Hero */
.mav-hist-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 70vh;
  margin: 0;
  padding: 80px 24px;
  text-align: center;
  background-color: #000;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.mav-hist-hero:before,
.mav-hist-cta:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.75) 100%);
}
.mav-hist-hero .banner-wrapper,
.mav-hist-cta .banner-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.mav-hist-hero .banner-item-inner,
.mav-hist-cta .banner-item-inner { max-width: 760px; }
.mav-hist-hero .headline { color: #fff; }
.mav-hist-hero .microheadline { color: #eeaf00; font-weight: 700; letter-spacing: 0.1em; }
.mav-hist-honour {
  margin: 18px 0 0;
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

/* Black strip carrying the five approved credential badges. */
.mav-hist-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 36px;
  margin: 0;
  padding: 20px 24px;
  background: #000;
}
.mav-hist-badges span {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #eeaf00;
}

/* White text rows */
.mav-hist-row {
  margin: 0;
  padding: 44px 0;
  background-color: #fff;
}
.mav-hist-row--tall { min-height: 50vh; display: flex; align-items: center; }
.mav-hist-row--tall .mav-col-5 { align-self: flex-start; }
.mav-hist-figure { margin: 28px 0 0; padding: 0; }
.mav-hist-figure img { display: block; width: 100%; height: auto; }
.cms-history [data-content-type="heading"] { border-bottom: 0; padding-bottom: 0; }
.mav-hist-row--tight { padding: 28px 0; }
.mav-hist-row h2 {
  margin: 0;
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.25;
  color: #000;
  text-align: left;
}
.mav-hist-row h2 strong { font-weight: 700; }
.mav-hist-row--center h2,
.mav-hist-row--center p { text-align: center; }
.mav-hist-row .microheadline {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #eeaf00;
}
.mav-hist-row p {
  margin: 0 0 18px;
  font-size: 20px;
  line-height: 1.55;
  font-weight: 500;
  color: #000;
}
.mav-hist-row p:last-child { margin-bottom: 0; }
.mav-hist-row--quote h2 {
  font-weight: 500;
  font-size: 1.625rem;
  line-height: 1.4;
}
.mav-hist-row--quote p {
  margin-top: 18px;
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
  color: #6b6b6b;
}
.mav-hist-divider { height: 14px; margin: 0; padding: 0; background: #000; }

/* Timeline spine (Record of Service / Landmarks / Road Map). A 2px grey line
   in the left gutter joins a gold dot on each entry heading. Rows abut with
   no margin, so per-row line segments read as one continuous line; the first
   and last row of each run trim theirs to the dot. */
.mav-hist-row--tl { position: relative; }
.mav-hist-row--tl .mav-col-5 { align-self: flex-start; }
.mav-hist-row--tl::before {
  content: "";
  position: absolute;
  left: calc(8.33333% - 20px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e3e3e3;
}
.mav-hist-row--tl-first::before { top: 66px; }
.mav-hist-row--tl-last::before { top: 0; bottom: auto; height: 66px; }
.mav-hist-row--tl-first.mav-hist-row--tl-last::before { display: none; }
.mav-hist-row--tl h2 { position: relative; }
.mav-hist-row--tl h2::before {
  content: "";
  position: absolute;
  left: -52px;
  top: calc(0.625em - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #eeaf00;
  box-shadow: 0 0 0 4px #fff;
}
.mav-hist-row--tl h2 strong.mav-hist-year { color: #eeaf00; }
@media only screen and (max-width: 63.99em) {
  .mav-hist-row--tl-first::before { top: 61px; }
  .mav-hist-row--tl-last::before { height: 61px; }
}

/* Full-bleed photo bands */
.mav-hist-band {
  min-height: 50vh;
  margin: 0;
  padding: 0;
  background-color: #000;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.mav-hist-band--short { min-height: 55vh; background-position: center 35%; }
/* Sindh ibex is a tall portrait photo: give it more height and crop from the face down. */
.mav-hist-band.background-image-mav-about-band-2 { min-height: 70vh; background-position: center 25%; }

/* Closing CTA band */
.mav-hist-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 70vh;
  margin: 0;
  padding: 80px 24px;
  text-align: center;
  background-color: #000;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.mav-hist-cta .headline { color: #fff; }
.mav-hist-cta p { margin: 18px auto 0; max-width: 560px; font-size: 18px; line-height: 1.5; color: #fff; }
.mav-hist-cta [data-content-type="buttons"] { margin-top: 28px; }
.mav-hist-cta [data-content-type="button-item"] { display: inline-block; margin: 6px 8px; vertical-align: middle; }
.mav-hist-cta .mav-hist-btn-ghost {
  display: inline-block;
  padding: 0.875rem 1.0625rem;
  border: 2px solid #fff;
  border-radius: 3px;
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
}
.mav-hist-cta .mav-hist-btn-ghost:hover { border-color: #eeaf00; color: #eeaf00; text-decoration: none; }

@media only screen and (min-width: 64em) {
  .mav-hist-row h2 { font-size: 2.25rem; }
  .mav-hist-row--quote h2 { font-size: 2rem; }
}
@media only screen and (max-width: 47.99em) {
  .cms-history .pagebuilder-column-line { flex-wrap: wrap; }
  .mav-col-1, .mav-col-2 { display: none; }
  .mav-col-5, .mav-col-8, .mav-col-10 { width: 100%; padding: 0 24px; }
  .mav-hist-row h2 { margin-bottom: 14px; }
  .mav-hist-row--tall { min-height: 0; }
  .mav-hist-figure { margin: 20px 0 8px; }
  .mav-hist-row--tl::before { left: 24px; }
  .mav-hist-row--tl .mav-col-5 { padding-left: 52px; }
  .mav-hist-row--tl h2::before { left: -35px; }
  .mav-hist-band { min-height: 36vh; }
  .mav-hist-band--short { min-height: 36vh; }
  .mav-hist-hero, .mav-hist-cta { min-height: 60vh; padding: 64px 20px; }
}

/* --------------------------------------------------------------------------
   17. Homepage Services cards
   Replaces the SIG "Homepage Blocks" Ceros iframe (the 2x2 Firearms Selector /
   Build a Custom Pistol / Optics / Apparel tiles) with three hand-built,
   full-bleed cards - Hunting Tours | Appraisal | Consultancy to Organizations
   - each linking to its band on services.html. The look is the SIG tile it
   replaces: photo under a dark scrim, centred white Stratum2 title, one-line
   subtitle, gold .pagebuilder-button-primary CTA, gentle zoom on hover.
   Copy is the approved one-line subtitles only (Maverick Website Content.html).
   -------------------------------------------------------------------------- */
.mav-services {
  background-color: #000;
  padding: 12px;
}

.mav-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mav-service {
  position: relative;
  /* Height comes from the ratio alone: a min-height here would transfer
     through aspect-ratio into a min-width and overflow the grid track on
     narrower viewports. min-height is only set where the ratio is off. */
  aspect-ratio: 4 / 3;
  min-width: 0;
  overflow: hidden;
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.mav-service-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.6);
  transition: transform .6s ease-in-out;
  will-change: transform;
}

.mav-service:hover .mav-service-img,
.mav-service:focus-within .mav-service-img {
  transform: scale(1.05);
}

.mav-service-body {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 24px;
  color: #fff;
}

.mav-service-title {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(28px, 2.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 10px;
}

.mav-service-sub {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 24px;
}

/* Band heading above the cards. Owner's spec (2026-09-07): 75px / 600 /
   82.5px line-height / #FFFFFF, same Stratum2 stack as the card titles,
   uppercase and centred like every other Stratum2 headline on the page. */
.mav-services-heading {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 75px;
  line-height: 82.5px;
  text-transform: uppercase;
  text-align: center;
  color: #FFFFFF;
  margin: 0;
  padding: 36px 12px 28px;
}

/* SIG's button carries a right/bottom margin for inline button rows. */
.mav-services .pagebuilder-button-primary {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mav-service-img {
    transition: none;
  }
  .mav-service:hover .mav-service-img,
  .mav-service:focus-within .mav-service-img {
    transform: none;
  }
}

@media (max-width: 1024px) {
  .mav-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mav-service:last-child {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  .mav-services-heading {
    font-size: 44px;
    line-height: 1.1;
    padding: 28px 12px 20px;
  }
  .mav-services-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mav-service,
  .mav-service:last-child {
    min-height: 280px;
    aspect-ratio: auto;
  }
  .mav-service-title {
    font-size: 26px;
  }
  .mav-service-sub {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   18. Services mega-panel (header "Services" item)
   Layout copied from wolverineworldwide.com's "Responsibility" dropdown at
   the owner's request: an intro column on the left (title, one line of copy,
   a "View" button pinned to the bottom) and three photo tiles with big labels
   on the right. Everything else is the SIG theme's own mega-panel chrome -
   the full-width #151515 panel, the gold rules and skewed gold accents on
   .menu-inner, the header-height `top` written by clone.js syncMenuOffset().

   Specificity note: the theme lays a level-1 panel out as five text columns
   and styles every `> ul > li > a` (inline-block, 1.2em, uppercase, gold
   underline) from a selector of weight (0,7,2), and it does so on :hover,
   which a tapped row in the mobile drawer also satisfies. So the desktop
   rules live under a min-width query and start from the theme's own chain
   plus .mav-mega-item / ul.mav-mega; the drawer rules under the max-width
   query use the same chain with nav.main.active so they win there.

   Copy: the Services door paragraph from Maverick Website Content.html and
   the approved service names. Photos: the homepage Services card photos.
   -------------------------------------------------------------------------- */

/* Small chevron after the "Services" label (owner's request, matching the
   Wolverine reference and the caret in the content file's nav). The theme
   lays each .main-link out as a flex column, so the chevron is positioned
   absolutely rather than flowed after the text. Drawn with borders so it
   inherits the label colour (white, gold on hover); flips up while open. */
@media screen and (min-width: 64em) {
  nav.main .main-list .main-item.mav-mega-item > a.main-link {
    position: relative;
    padding-right: 20px; /* theme: .375rem; room for the chevron */
  }
  nav.main .main-list .main-item.mav-mega-item > a.main-link::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  nav.main .main-list .main-item.mav-mega-item:hover > a.main-link::after,
  nav.main .main-list .main-item.mav-mega-item:focus-within > a.main-link::after {
    margin-top: -3px;
    transform: rotate(-135deg);
  }

  nav.main .main-list .main-item.mav-mega-item:hover .main__inner-list--level1 > .menu-inner,
  nav.main .main-list .main-item.mav-mega-item:focus-within .main__inner-list--level1 > .menu-inner {
    overflow: auto; /* theme says overflow:scroll, which paints permanent bars on Windows */
  }

  nav.main .main-list .main-item.mav-mega-item:hover .main__inner-list--level1 > .menu-inner > ul.mav-mega,
  nav.main .main-list .main-item.mav-mega-item:focus-within .main__inner-list--level1 > .menu-inner > ul.mav-mega {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(0, 1.5fr));
    gap: 12px;
    column-count: initial;
    column-gap: 0;
    column-width: auto;
    width: 100%;
    max-width: 1440px;
    margin: 16px auto 8px;
    padding: 0 1em;
    list-style: none;
    font-size: 1em;
  }

  nav.main .main-list .main-item.mav-mega-item:hover .main__inner-list--level1 > .menu-inner > ul.mav-mega > li,
  nav.main .main-list .main-item.mav-mega-item:focus-within .main__inner-list--level1 > .menu-inner > ul.mav-mega > li {
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  /* Take back the theme's column-heading link treatment for every direct
     link in the panel, then give each link its own look below. */
  nav.main .main-list .main-item.mav-mega-item:hover .main__inner-list--level1 > .menu-inner > ul.mav-mega > li > a,
  nav.main .main-list .main-item.mav-mega-item:focus-within .main__inner-list--level1 > .menu-inner > ul.mav-mega > li > a {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
  }
  nav.main .main-list .main-item.mav-mega-item:hover .main__inner-list--level1 > .menu-inner > ul.mav-mega > li > a::after,
  nav.main .main-list .main-item.mav-mega-item:focus-within .main__inner-list--level1 > .menu-inner > ul.mav-mega > li > a::after {
    content: none;
  }

  /* Intro column */
  nav.main .main-list .main-item.mav-mega-item:hover .main__inner-list--level1 > .menu-inner > ul.mav-mega > li.mav-mega-intro,
  nav.main .main-list .main-item.mav-mega-item:focus-within .main__inner-list--level1 > .menu-inner > ul.mav-mega > li.mav-mega-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #fff;
    padding: 4px 12px 4px 0;
  }

  nav.main .main-list .main-item.mav-mega-item:hover .main__inner-list--level1 > .menu-inner > ul.mav-mega > li.mav-mega-intro > a.mav-mega-title,
  nav.main .main-list .main-item.mav-mega-item:focus-within .main__inner-list--level1 > .menu-inner > ul.mav-mega > li.mav-mega-intro > a.mav-mega-title {
    display: block;
    font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 12px;
  }
  nav.main .main-list .main-item.mav-mega-item:hover .main__inner-list--level1 > .menu-inner > ul.mav-mega > li.mav-mega-intro > a.mav-mega-title:hover,
  nav.main .main-list .main-item.mav-mega-item:hover .main__inner-list--level1 > .menu-inner > ul.mav-mega > li.mav-mega-intro > a.mav-mega-title:focus,
  nav.main .main-list .main-item.mav-mega-item:focus-within .main__inner-list--level1 > .menu-inner > ul.mav-mega > li.mav-mega-intro > a.mav-mega-title:hover,
  nav.main .main-list .main-item.mav-mega-item:focus-within .main__inner-list--level1 > .menu-inner > ul.mav-mega > li.mav-mega-intro > a.mav-mega-title:focus {
    color: #eeaf00;
  }

  .mav-mega-sub {
    font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    max-width: 30ch;
    margin: 0 0 24px;
  }

  /* The gold SIG button stands in for Wolverine's "View" pill, pinned to
     the bottom of the column so it lines up with the tiles' bottom edge. */
  nav.main .main-list .main-item.mav-mega-item:hover .main__inner-list--level1 > .menu-inner > ul.mav-mega > li.mav-mega-intro > a.mav-mega-view,
  nav.main .main-list .main-item.mav-mega-item:focus-within .main__inner-list--level1 > .menu-inner > ul.mav-mega > li.mav-mega-intro > a.mav-mega-view {
    display: inline-block;
    margin: auto 0 0;
  }

  /* Photo tiles */
  nav.main .main-list .main-item.mav-mega-item:hover .main__inner-list--level1 > .menu-inner > ul.mav-mega > li.mav-mega-tile > a,
  nav.main .main-list .main-item.mav-mega-item:focus-within .main__inner-list--level1 > .menu-inner > ul.mav-mega > li.mav-mega-tile > a {
    position: relative;
    display: block;
    width: 100%;
    /* Height from the ratio alone - see the note in §17 about min-height. */
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: #111;
    color: #fff;
  }

  .mav-mega-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.8);
    transition: transform .6s ease-in-out;
    will-change: transform;
  }

  /* Bottom scrim keeps the label legible on bright photos. */
  .mav-mega-tile > a::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
    z-index: 1;
    pointer-events: none;
  }

  .mav-mega-tile > a > span {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 2;
    font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 1.8vw, 32px);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #fff;
    transition: color .2s ease;
  }

  .mav-mega-tile > a:hover img,
  .mav-mega-tile > a:focus img {
    transform: scale(1.05);
  }
  .mav-mega-tile > a:hover > span,
  .mav-mega-tile > a:focus > span {
    color: #eeaf00;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mav-mega-tile img {
    transition: none;
  }
  .mav-mega-tile > a:hover img,
  .mav-mega-tile > a:focus img {
    transform: none;
  }
}

/* Mobile drawer: clone.js turns the Services row into a drill-down page.
   Inside it the panel is a plain list again - no photos, no intro copy, no
   View button. The tapped row still matches :hover, so these carry the
   theme's own chain (plus nav.main.active) to outrank its hover rules. */
@media screen and (max-width: 63.99em) {
  nav.main.active .main-list .main-item.mav-mega-item .main__inner-list--level1 > .menu-inner > ul.mav-mega {
    position: static;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    column-count: initial;
    list-style: none;
    font-size: 1em;
  }
  nav.main.active .main-list .main-item.mav-mega-item .main__inner-list--level1 > .menu-inner > ul.mav-mega > li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  nav.main.active .main-list .main-item.mav-mega-item .main__inner-list--level1 > .menu-inner > ul.mav-mega > li > a {
    position: static;
    display: inline-block;
    width: 100%;
    margin: 0;
    aspect-ratio: auto;
    background: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
    letter-spacing: 0;
    line-height: inherit;
  }
  nav.main.active .main-list .main-item.mav-mega-item .main__inner-list--level1 > .menu-inner > ul.mav-mega > li > a::after,
  nav.main.active .main-list .main-item.mav-mega-item .main__inner-list--level1 > .menu-inner > ul.mav-mega > li > a::before {
    content: none;
  }
  nav.main.active .main-list .main-item.mav-mega-item .main__inner-list--level1 > .menu-inner > ul.mav-mega > li > a.mav-mega-view,
  nav.main.active .main-list .main-item.mav-mega-item .main__inner-list--level1 > .menu-inner > ul.mav-mega .mav-mega-sub,
  nav.main.active .main-list .main-item.mav-mega-item .main__inner-list--level1 > .menu-inner > ul.mav-mega img {
    display: none;
  }
  nav.main.active .main-list .main-item.mav-mega-item .main__inner-list--level1 > .menu-inner > ul.mav-mega > li > a > span {
    position: static;
    font: inherit;
    text-transform: none;
    letter-spacing: 0;
    color: inherit;
  }
}


/* --------------------------------------------------------------------------
   19. Gallery page (/gallery.html)
   Minimal photo grid on the SIG page shell (hero + rule, black band). Only
   photos already in /maverick/ are shown; alt text reuses the approved
   captions from the About page where one exists, otherwise it is empty.
   No visible captions until the General supplies them (PENDING).
   -------------------------------------------------------------------------- */
.mav-gallery {
  background-color: #000;
  padding: 12px;
}

.mav-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mav-gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background-color: #111;
}

.mav-gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease-in-out;
  will-change: transform;
}

.mav-gallery-item:hover img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .mav-gallery-item img {
    transition: none;
  }
  .mav-gallery-item:hover img {
    transform: none;
  }
}

@media (max-width: 1024px) {
  .mav-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mav-gallery-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   20. Contact form (/contact.html)
   Layout copied from sigsauer.com/customer-service-contact (Amasty Custom
   Form): centred headline, hairline rule, centred intro, then a bordered
   533px box holding half/full-width fields and a gold SUBMIT pinned right.
   The SIG bundle ships the Amasty base rules (.amform-form, .amcform-page-wrap
   flex wrap, .amcform-toolbar flex-end, gold .action.primary) but not the
   values measured on the live page; those are here.
   -------------------------------------------------------------------------- */
.mav-contact {
  background: #fff;
  padding: 40px 24px 72px;
}

.mav-contact-inner {
  max-width: 1267px;
  margin: 0 auto;
  text-align: center;
}

.mav-contact .section-headline {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #222;
  margin: 8px 0 30px;
}

.mav-contact-rule {
  width: 92%;
  max-width: 1167px;
  height: 0;
  border: 0;
  border-top: 1px solid #d9d9d9;
  margin: 0 auto 36px;
}

.mav-contact .entry p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin: 0 0 32px;
}

.mav-contact-form {
  max-width: 533px;
  margin: 0 auto;
  text-align: left;
}

.mav-contact-form .amcform-multi-page {
  border: 1px solid #d0d0d0;
  padding: 10px;
  background: #fff;
}

.mav-contact-form .amcform-page-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.mav-contact-form .field.form-group {
  width: 100%;
  margin: 0 0 15px;
}

.mav-contact-form .field.form-group.amform-layout-two {
  width: 48%;
  float: none;
  margin-right: 0;
}

.mav-contact-form .label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #222;
  margin: 0 0 5px;
}

.mav-contact-form .label .required {
  color: #e02b27;
}

.mav-contact-form .form-control {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 9px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background: #eee;
  border: 0.8px solid #737373;
  border-radius: 1px;
  box-shadow: none;
}

.mav-contact-form textarea.form-control {
  height: auto;
  min-height: 64px;
  padding: 6px 9px;
  resize: vertical;
}

.mav-contact-form .form-control:focus {
  outline: none;
  border-color: #eeaf00;
  box-shadow: 0 0 0 1px #eeaf00;
}

.mav-contact-form .amcform-toolbar {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 20px 0 10px;
}

.mav-contact-form .action.primary {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 7px 25px;
  color: #000;
  background: #eeaf00;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.mav-contact-form .action.primary:hover,
.mav-contact-form .action.primary:focus {
  background: #383838;
  color: #fff;
}

@media (max-width: 640px) {
  .mav-contact {
    padding: 28px 16px 56px;
  }
  .mav-contact .section-headline {
    font-size: 22px;
  }
  .mav-contact-form .field.form-group.amform-layout-two {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   21. Footer columns
   Round 10 reduced the footer to five columns of our own pages (Products /
   Services / Field Journal / The General / Legal). The theme lays the list
   out as CSS multi-column (column-count:3, height-balanced) and draws the
   dividers with three hard-coded .vline divs at 33% / 66% / 100%, so a fixed
   column count needs a deterministic grid, and the dividers become borders
   on the columns themselves (the vlines are hidden). The breakpoint is the
   theme's 62.5em nav|sign-up split (its own column rule only kicked in at
   64em, leaving a one-column band between 1000 and 1024px).
   -------------------------------------------------------------------------- */
@media screen and (min-width: 62.5em) {
  nav.footer .footer-list {
    column-count: initial;
    column-gap: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }
  nav.footer .footer-list > .footer-item-parent,
  nav.footer .footer-list .footer-item-parent + .footer-item-parent {
    margin: 0;
    min-width: 0;
    padding: 0 16px 24px;
  }
  nav.footer .footer-list > .footer-item-parent:first-child {
    padding-left: 0;
  }
  nav.footer .footer-list > .footer-item-parent + .footer-item-parent {
    border-left: 1px solid #1e1e1e;
  }
  nav.footer .footer-list ul {
    display: block;
    margin: 0;
  }
  nav.footer .footer-list > .footer-item-parent > a {
    width: 100%;
    margin-bottom: 1.125rem;
  }
  nav.footer .footer-list > .footer-item-parent > a::after {
    display: none;
  }
  .footer-container .footer-options .footer-nav .footer + .vline,
  .footer-container .footer-options .footer-nav .footer + .vline + .vline,
  .footer-container .footer-options .footer-nav .footer + .vline + .vline + .vline {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   22. Legal pages (privacy-policy / terms-and-conditions /
       licensing-and-compliance / cookie-policy)
   Long-form text on the .mav-article column (§10) plus the pieces that
   column lacks: sub-headings, lists, the "draft for review" notice and the
   closing contact line. All four pages are drafts awaiting the General's
   and counsel's sign-off (PENDING).
   -------------------------------------------------------------------------- */
.mav-legal {
  padding-top: 40px;
}

.mav-legal-notice {
  border-left: 4px solid #eeaf00;
  background: #fff8e1;
  padding: 14px 18px;
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

.mav-legal-meta {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: #444;
  margin: 0 0 24px;
}

.mav-legal h2:first-of-type {
  margin-top: 0;
}

.mav-legal h3 {
  font-family: "Stratum2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  margin: 26px 0 10px;
}

.mav-legal ul,
.mav-legal ol {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 18px 22px;
  padding: 0;
}

.mav-legal li {
  margin: 0 0 8px;
}

.mav-legal a {
  color: #b98900;
}

.mav-legal-contact {
  border-top: 1px solid #e3e3e3;
  padding-top: 18px;
  margin-top: 36px;
  font-size: 15px;
  line-height: 1.7;
  color: #444;
}

/* ==========================================================================
   23. Account menu + Field Journal topic filter (The Maverick, Round 11)

   The theme opens the header account dropdown on :hover only; :focus-within
   lets it open from the keyboard and on touch once account-menu.js has added
   .keep-in-display. The Browse bar's active topic borrows the theme's own
   hover colours (gold on black text).
   ========================================================================== */
.page-wrapper .main-menu-globals .menu-user:focus-within .logged-in.keep-in-display {
  display: inline-block;
}

.blog-filters .amblog-link.-active,
.blog-filters .amblog-link.-active:hover {
  background: #eeaf00;
  color: #000;
}