/*
 * GRUMPS GARAGE FOOTER SUCCESSOR
 * M7B2 R2
 *
 * Visual doctrine:
 * accepted Header V1 family
 * dark custom-shop fabrication
 * satin metal, not mirror chrome
 * restrained rally red
 */

body.gg-footer-lab-active .et-l--footer,
body.gg-footer-lab-active #main-footer {
  display: none !important;
}

.ggf-shell,
.ggf-shell * {
  box-sizing: border-box;
}

.ggf-shell {
  --g-black: #080909;
  --g-ink: #0c0e0f;
  --g-charcoal: #131516;
  --g-panel: #191b1c;
  --g-panel-hi: #222425;

  --g-steel: #aaa9a3;
  --g-steel-hi: #d2d0c9;
  --g-steel-lo: #606365;

  --g-cream: #ede8df;
  --g-muted: #b2afa8;
  --g-muted-lo: #868783;

  --g-red: #b42923;
  --g-red-dark: #741813;
  --g-focus: #ff6659;

  width: 100%;
  margin: 0;

  color: var(--g-cream);

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.011) 0,
      rgba(255,255,255,.011) 1px,
      transparent 1px,
      transparent 5px
    ),
    linear-gradient(
      180deg,
      #111314 0%,
      #090b0c 100%
    );

  border-top: 1px solid #595c5e;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  line-height: 1.45;
}

.ggf-shell a {
  color: inherit;
}

.ggf-shell a:focus-visible {
  outline: 3px solid var(--g-focus);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ---------------------------------------------------------
   HEADER-MATCHED TOP DIVIDER
   --------------------------------------------------------- */

.ggf-top-rule {
  position: relative;

  height: 24px;

  border-top: 1px solid #777a7b;
  border-bottom: 1px solid #333638;

  background:
    linear-gradient(
      180deg,
      #090a0b,
      #111314
    );
}

.ggf-top-rule::before,
.ggf-top-rule::after {
  content: "";

  position: absolute;

  top: 10px;

  height: 2px;

  width: calc(50% - 24px);
}

.ggf-top-rule::before {
  left: 0;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      var(--g-red-dark) 60%,
      var(--g-red) 100%
    );
}

.ggf-top-rule::after {
  right: 0;

  background:
    linear-gradient(
      270deg,
      transparent 0%,
      var(--g-red-dark) 60%,
      var(--g-red) 100%
    );
}

.ggf-rule-diamond {
  position: absolute;

  left: 50%;
  top: 5px;

  width: 13px;
  height: 13px;

  transform:
    translateX(-50%)
    rotate(45deg);

  border: 1px solid var(--g-red);

  background: #0d0f10;
}


/* ---------------------------------------------------------
   MAIN FOOTER
   --------------------------------------------------------- */

.ggf-main {
  width: min(1440px, calc(100% - 52px));

  margin: 0 auto;

  padding:
    42px
    0
    36px;

  display: grid;

  grid-template-columns:
    minmax(285px, .98fr)
    minmax(0, 2.45fr);

  gap:
    clamp(40px, 4vw, 68px);

  align-items: start;
}


/* ---------------------------------------------------------
   BRAND
   --------------------------------------------------------- */

.ggf-brand {
  min-width: 0;
}

.ggf-logo {
  display: block;

  width: fit-content;
  max-width: 100%;

  text-decoration: none;
}

.ggf-logo-image {
  display: block;

  width: min(300px, 100%);
  height: auto;

  max-height: 115px;

  object-fit: contain;
  object-position: left center;
}

.ggf-logo-image[hidden] {
  display: none !important;
}

.ggf-logo-fallback {
  display: inline-block;

  color: var(--g-steel-hi);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.9rem;
  font-style: italic;

  letter-spacing: .025em;

  text-shadow:
    0 1px 0 #000,
    0 0 10px rgba(255,255,255,.07);
}

.ggf-logo-fallback[hidden] {
  display: none !important;
}

.ggf-brand-copy {
  max-width: 430px;

  margin:
    17px
    0
    0;

  color: var(--g-muted);

  font-size: .90rem;
  line-height: 1.56;
}


/* ---------------------------------------------------------
   COMPACT CONTACT PLATE
   --------------------------------------------------------- */

.ggf-contact-plate {
  position: relative;

  max-width: 445px;

  margin-top: 20px;

  padding:
    16px
    20px
    13px;

  border: 1px solid #747779;
  border-radius: 3px;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.016) 0,
      rgba(255,255,255,.016) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(
      180deg,
      #202223 0%,
      #151718 100%
    );

  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    inset 0 -1px rgba(0,0,0,.5),
    0 6px 18px rgba(0,0,0,.22);
}

.ggf-contact-plate h2 {
  margin:
    0
    0
    9px;

  color: #d94a41;

  font-family:
    "Arial Narrow",
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .78rem;
  font-weight: 900;

  text-transform: uppercase;
  letter-spacing: .19em;
}

.ggf-screw {
  position: absolute;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 35%,
      #deddd7 0 18%,
      #7d807e 36%,
      #2b2d2e 75%
    );
}

.ggf-screw-a {
  left: 7px;
  top: 7px;
}

.ggf-screw-b {
  right: 7px;
  top: 7px;
}

.ggf-screw-c {
  left: 7px;
  bottom: 7px;
}

.ggf-screw-d {
  right: 7px;
  bottom: 7px;
}

.ggf-contact-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    0
    14px;
}

.ggf-contact-grid a {
  display: grid;

  grid-template-columns:
    20px
    minmax(0, 1fr);

  gap: 7px;

  align-items: center;

  min-height: 39px;

  color: var(--g-cream);

  font-size: .82rem;
  font-weight: 700;

  text-decoration: none;
}

.ggf-contact-grid a:nth-child(3) {
  grid-column: 1 / -1;
}

.ggf-contact-grid a > span:first-child {
  color: var(--g-red);

  text-align: center;
}

.ggf-contact-grid a:hover {
  color: #fff;

  text-decoration: underline;

  text-decoration-color:
    var(--g-red);

  text-underline-offset: 4px;
}

.ggf-contact-note {
  margin:
    7px
    0
    0;

  padding-top: 8px;

  border-top: 1px solid #414446;

  color: #999892;

  font-size: .73rem;
}


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

.ggf-nav-grid {
  display: grid;

  grid-template-columns:
    1fr
    1.15fr
    .85fr
    .92fr;

  min-width: 0;
}

.ggf-nav-column {
  min-width: 0;

  padding:
    0
    clamp(18px, 2vw, 32px);

  border-left:
    1px solid
    rgba(174,174,168,.22);
}

.ggf-nav-column:first-child {
  padding-left: 0;
  border-left: 0;
}

.ggf-nav-column:last-child {
  padding-right: 0;
}

.ggf-nav-column h2,
.ggf-popular h2 {
  margin:
    0
    0
    14px;

  color: #d5d3cc;

  font-family:
    "Arial Narrow",
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .72rem;
  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: .19em;
  line-height: 1.25;
}

.ggf-nav-column h2::after,
.ggf-popular h2::after {
  content: "";

  display: block;

  width: 32px;
  height: 3px;

  margin-top: 8px;

  background: var(--g-red);
}

.ggf-nav-column a {
  display: flex;
  align-items: center;

  width: fit-content;
  max-width: 100%;

  min-height: 44px;

  color: var(--g-cream);

  font-size: .88rem;
  font-weight: 620;

  line-height: 1.32;

  text-decoration: none;
}

.ggf-nav-column a:hover {
  color: #fff;

  text-decoration: underline;

  text-decoration-color:
    var(--g-red);

  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}


/* ---------------------------------------------------------
   POPULAR DISCOVERY RAIL
   --------------------------------------------------------- */

.ggf-popular {
  border-top:
    1px solid
    rgba(185,185,179,.25);

  background:
    linear-gradient(
      180deg,
      #151718,
      #101213
    );
}

.ggf-popular-inner {
  width: min(1440px, calc(100% - 52px));

  margin: 0 auto;

  padding:
    17px
    0
    18px;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap: 24px;

  align-items: center;
}

.ggf-popular h2 {
  margin: 0;

  white-space: nowrap;
}

.ggf-popular-links {
  display: flex;
  flex-wrap: wrap;

  gap:
    6px
    8px;
}

.ggf-popular-links a {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  min-height: 39px;

  padding:
    5px
    11px;

  border: 1px solid #45484a;
  border-radius: 2px;

  background:
    linear-gradient(
      180deg,
      #17191a,
      #111314
    );

  color: #dcd9d2;

  font-size: .76rem;
  font-weight: 660;

  text-decoration: none;
}

.ggf-popular-links a b {
  color: var(--g-red);

  font-size: 1.05rem;
  font-weight: 700;
}

.ggf-popular-links a:hover {
  border-color: #79332e;

  color: #fff;

  background:
    linear-gradient(
      180deg,
      #201a1a,
      #151313
    );
}


/* ---------------------------------------------------------
   BOTTOM RAIL
   --------------------------------------------------------- */

.ggf-bottom {
  border-top:
    3px solid
    var(--g-red-dark);

  background: #070808;
}

.ggf-bottom-inner {
  width: min(1440px, calc(100% - 52px));

  min-height: 58px;

  margin: 0 auto;

  padding:
    8px
    0;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 22px;
}

.ggf-social {
  display: flex;
  flex-wrap: wrap;

  gap:
    2px
    17px;
}

.ggf-social a,
.ggf-legal a {
  display: inline-flex;
  align-items: center;

  min-height: 40px;

  color: #aaa8a1;

  font-size: .74rem;
  font-weight: 660;

  text-decoration: none;
}

.ggf-social a:hover,
.ggf-legal a:hover {
  color: #fff;

  text-decoration: underline;

  text-decoration-color:
    var(--g-red);

  text-underline-offset: 4px;
}

.ggf-legal {
  display: flex;
  flex-wrap: wrap;

  justify-content: flex-end;

  gap:
    4px
    8px;

  color: #898984;

  font-size: .73rem;
}

.ggf-legal a {
  min-height: auto;

  color: #d8d5cf;

  font-weight: 780;
}

.ggf-dot {
  color: var(--g-red);
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1080px) {

  .ggf-main {
    grid-template-columns: 1fr;

    gap: 34px;
  }

  .ggf-brand {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, .9fr);

    gap:
      8px
      34px;
  }

  .ggf-logo,
  .ggf-brand-copy {
    grid-column: 1;
  }

  .ggf-contact-plate {
    grid-column: 2;
    grid-row: 1 / span 2;

    margin-top: 0;
  }

  .ggf-nav-grid {
    padding-top: 27px;

    border-top:
      1px solid
      rgba(185,185,179,.20);
  }
}


/* ---------------------------------------------------------
   SMALL TABLET
   --------------------------------------------------------- */

@media (max-width: 820px) {

  .ggf-main,
  .ggf-popular-inner,
  .ggf-bottom-inner {
    width: min(
      calc(100% - 32px),
      1440px
    );
  }

  .ggf-brand {
    display: block;
  }

  .ggf-contact-plate {
    margin-top: 19px;
  }

  .ggf-nav-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      27px
      0;
  }

  .ggf-nav-column:nth-child(3) {
    padding-left: 0;

    border-left: 0;
  }

  .ggf-popular-inner {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .ggf-popular h2 {
    white-space: normal;
  }

  .ggf-bottom-inner {
    align-items: flex-start;

    flex-direction: column;

    gap: 0;

    padding:
      10px
      0
      12px;
  }

  .ggf-legal {
    justify-content: flex-start;
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 540px) {

  .ggf-main {
    padding:
      31px
      0
      27px;

    gap: 27px;
  }

  .ggf-logo-image {
    width: min(275px, 100%);
  }

  .ggf-brand-copy {
    font-size: .86rem;
  }

  .ggf-contact-plate {
    padding:
      15px
      16px
      12px;
  }

  .ggf-contact-grid {
    grid-template-columns: 1fr;
  }

  .ggf-contact-grid a,
  .ggf-contact-grid a:nth-child(3) {
    grid-column: auto;

    min-height: 44px;
  }

  .ggf-nav-grid {
    grid-template-columns: 1fr;

    padding-top: 22px;

    gap: 0;
  }

  .ggf-nav-column,
  .ggf-nav-column:first-child,
  .ggf-nav-column:nth-child(3),
  .ggf-nav-column:last-child {
    padding:
      19px
      0;

    border-left: 0;

    border-top:
      1px solid
      rgba(185,185,179,.16);
  }

  .ggf-nav-column:first-child {
    padding-top: 0;

    border-top: 0;
  }

  .ggf-popular-links {
    display: grid;

    grid-template-columns: 1fr;
  }

  .ggf-popular-links a {
    min-height: 44px;
  }

  .ggf-social {
    display: grid;

    grid-template-columns:
      repeat(2, auto);

    column-gap: 20px;
  }

  .ggf-legal {
    display: block;
  }

  .ggf-legal > span {
    display: block;

    margin-top: 4px;
  }

  .ggf-dot {
    display: none !important;
  }
}


@media (prefers-reduced-motion: reduce) {

  .ggf-shell *,
  .ggf-shell *::before,
  .ggf-shell *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

}

/* =========================================================
   M7B3 CONTACT PLATE BOUNDS CORRECTION
   ---------------------------------------------------------
   The M7B2 contact grid used two columns inside a relatively
   narrow brand column. The email address could exceed the
   visual plate boundary.

   This correction:
   - constrains all plate content to the plate's inner width;
   - stacks contact rows intentionally;
   - permits safe text wrapping;
   - preserves minimum accessible target height;
   - prevents visual spill across the fabricated-metal frame.
   ========================================================= */

.ggf-contact-plate {
  width: 100%;
  max-width: 445px;
  min-width: 0;

  overflow: hidden;
}

.ggf-contact-plate h2,
.ggf-contact-grid,
.ggf-contact-note {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.ggf-contact-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap: 0;

  overflow: hidden;
}

.ggf-contact-grid a,
.ggf-contact-grid a:nth-child(3) {
  grid-column: 1;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  grid-template-columns:
    20px
    minmax(0, 1fr);

  padding-right: 2px;
}

.ggf-contact-grid a > span {
  min-width: 0;
  max-width: 100%;
}

.ggf-contact-grid a > span:last-child {
  overflow-wrap: anywhere;
  word-break: normal;
}

.ggf-contact-grid a[href^="mailto:"] > span:last-child {
  font-size: .80rem;
  letter-spacing: -.01em;
}

.ggf-contact-note {
  overflow-wrap: anywhere;
  word-break: normal;
}

/*
 * The content frame remains visibly inset from the outer
 * metal plate, so text never rides against the plate edge.
 */
.ggf-contact-plate::after {
  content: "";

  position: absolute;

  inset: 7px;

  pointer-events: none;

  border:
    1px solid
    rgba(196, 196, 190, .28);

  border-radius: 2px;
}

/*
 * Keep actual content above the inset boundary graphic.
 */
.ggf-contact-plate > * {
  position: relative;
  z-index: 1;
}

/*
 * Screws remain part of the outer plate rather than being
 * pushed above the inset frame.
 */
.ggf-contact-plate > .ggf-screw {
  position: absolute;
}

/*
 * Give text a deliberate inner safety margin from the new
 * inset bounding line.
 */
.ggf-contact-plate h2,
.ggf-contact-grid,
.ggf-contact-note {
  padding-left: 5px;
  padding-right: 5px;
}

@media (max-width: 540px) {

  .ggf-contact-plate {
    max-width: 100%;
  }

  .ggf-contact-grid a {
    min-height: 44px;
  }

  .ggf-contact-grid a[href^="mailto:"] > span:last-child {
    font-size: .78rem;
  }

}

/* =========================================================
   M7B3 R2 WCAG CORRECTIVE DELTA

   This block intentionally supersedes the earlier M7B3
   contact-plate overflow rule.

   The inset plate boundary remains decorative only.
   Content and focus outlines are never clipped.
   ========================================================= */

.ggf-contact-plate {
  overflow: visible;
}

/*
 * Preserve the requested inset/bounded plate graphic.
 * It remains behind the content and cannot intercept input.
 */
.ggf-contact-plate::after {
  pointer-events: none;
  z-index: 0;

  border-color:
    rgba(205, 205, 198, .34);
}

/*
 * Keep real plate content above the inset graphic.
 */
.ggf-contact-plate h2,
.ggf-contact-grid,
.ggf-contact-note {
  position: relative;
  z-index: 1;

  min-width: 0;
  max-width: 100%;

  padding-left: 6px;
  padding-right: 6px;
}

/*
 * The heading is small text, so use a red that clears
 * normal-text AA contrast on the darkest/lighter plate
 * surfaces while remaining visually restrained.
 */
.ggf-contact-plate h2 {
  color: #e85a50;
}

/*
 * Continue using a single constrained column rather than
 * allowing the email address to pressure the plate edge.
 */
.ggf-contact-grid {
  grid-template-columns:
    minmax(0, 1fr);
}

.ggf-contact-grid a,
.ggf-contact-grid a:nth-child(3) {
  grid-column: 1;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  min-height: 44px;

  grid-template-columns:
    21px
    minmax(0, 1fr);

  gap: 8px;
}

/*
 * Wrap instead of clipping or overflowing.
 */
.ggf-contact-grid a > span,
.ggf-contact-note {
  min-width: 0;
  max-width: 100%;
}

.ggf-contact-grid a > span:last-child,
.ggf-contact-note {
  overflow-wrap: anywhere;
  word-break: normal;
}

/*
 * Explicitly protect keyboard focus visibility.
 */
.ggf-contact-grid a:focus-visible {
  position: relative;
  z-index: 4;

  outline: 3px solid #ff6659;
  outline-offset: 3px;

  border-radius: 2px;
}

/*
 * Keep plate hardware visually above the decorative inset.
 */
.ggf-contact-plate > .ggf-screw {
  z-index: 2;
}

@media (max-width: 540px) {

  .ggf-contact-plate {
    overflow: visible;
    max-width: 100%;
  }

  .ggf-contact-grid a {
    min-height: 44px;
  }

}

/* =========================================================
   M7B4 R3 — GLOBAL AUTHORITY PRE-FOOTER
   ========================================================= */

.gga-authority,
.gga-authority * {
  box-sizing: border-box;
}

.gga-authority {
  position: relative;

  width: 100%;

  color: #292826;

  background:
    linear-gradient(
      180deg,
      #f3f0e9 0%,
      #ece8df 100%
    );

  border-top: 1px solid #8f8c84;
  border-bottom: 1px solid #666762;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}

.gga-authority::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      #681511,
      #b42923 38%,
      #b42923 62%,
      #681511
    );
}

.gga-authority-inner {
  width:
    min(
      1160px,
      calc(100% - 52px)
    );

  margin: 0 auto;

  padding:
    clamp(58px, 6vw, 82px)
    0
    clamp(60px, 6vw, 86px);
}

.gga-authority-header {
  max-width: 930px;

  margin:
    0
    0
    28px;
}

.gga-authority h2 {
  margin: 0;

  color: #262522;

  font-size:
    clamp(
      1.55rem,
      2.2vw,
      2rem
    );

  font-weight: 720;
  line-height: 1.22;

  letter-spacing: -.018em;
}

.gga-authority h2::after {
  content: "";

  display: block;

  width: 48px;
  height: 3px;

  margin-top: 18px;

  background: #a6231d;
}

.gga-authority-copy {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap:
    clamp(
      38px,
      5vw,
      72px
    );

  align-items: start;
}

.gga-authority-column {
  min-width: 0;
}

.gga-authority p {
  margin:
    0
    0
    18px;

  color: #3f3d39;

  font-size: 1rem;
  font-weight: 480;

  line-height: 1.68;
}

.gga-authority p:last-child {
  margin-bottom: 0;
}

.gga-authority a {
  color: #84221d;

  font-weight: 680;

  text-decoration-line: underline;
  text-decoration-thickness: 1px;

  text-decoration-color:
    rgba(
      132,
      34,
      29,
      .45
    );

  text-underline-offset: 3px;
}

.gga-authority a:hover {
  color: #5d1512;

  text-decoration-thickness: 2px;
  text-decoration-color: #8f211b;
}

.gga-authority a:focus-visible {
  outline:
    3px solid
    #9d211b;

  outline-offset: 3px;

  border-radius: 2px;
}

.gga-authority-close {
  color: #292826 !important;
  font-weight: 650 !important;
}

@media (max-width: 820px) {

  .gga-authority-inner {
    width:
      min(
        calc(100% - 34px),
        1160px
      );

    padding:
      48px
      0
      52px;
  }

  .gga-authority-copy {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .gga-authority-header {
    margin-bottom: 23px;
  }

}

@media (max-width: 540px) {

  .gga-authority-inner {
    width:
      calc(100% - 30px);

    padding:
      40px
      0
      44px;
  }

  .gga-authority h2 {
    font-size: 1.45rem;
  }

  .gga-authority p {
    font-size: .96rem;
    line-height: 1.64;
  }

}

@media (prefers-reduced-motion: reduce) {

  .gga-authority *,
  .gga-authority *::before,
  .gga-authority *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

}