/* Bryant Automotive — light build on the Jack's Brake & Alignment template.
 * Layout styles stay inline on each element (template convention), so this
 * file holds only site-wide defaults and the mobile-nav toggle rules
 * (et-topbar / et-desknav / et-menubtn).
 *
 * Palette — surfaces sampled off the shop building in the hero photo
 * (exposure-normalised first; the file is graded ~1.3 stops dark).
 * All ratios measured.
 *   paper #F4F6F9 · concrete #E8ECF2 · deep #DBE1EA   (white corrugated siding, cool cast)
 *   ink #15181D (16.43:1) · secondary #333A44 · muted #566070 (5.87:1)
 *   navy #183059 (12.08:1) · burgundy #87181A (8.92:1) · white-on-navy (12.08:1)
 *   (the rose #E9A9A2 accent text was retired 2026-10-01 at the client's request)
 *   borders #CCD3DC (subtle) · #B6BFCB · #7A8596 (outline buttons, 3.45:1)
 *   BUILDING STRIPE — the red/gold band that wraps the shop front, under the blue
 *   wall: shop-blue #4275BA · burgundy #87181A · shop-gold #D8A43A. Used as a
 *   12px horizontal rule under the hero and on the top edge of the footer.
 *   It replaces the donor template's 45-degree hazard stripe. */

html, body { margin: 0; padding: 0; background: #F4F6F9; }
body {
  font-family: 'Open Sans', sans-serif;
  color: #15181D;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
*, *::before, *::after { box-sizing: border-box; }
img { display: block; max-width: 100%; height: auto; }
a { color: #87181A; text-decoration: none; }
a:hover { color: #6E1315; }
::selection { background: #87181A; color: #F4F6F9; }
h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Services dropdown — CSS-only, hover + focus-within. Reset by the mobile
 * media query below which hides .et-desknav entirely. */
.et-dropdown-menu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 300px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  border: 1px solid #CCD3DC;
  border-top: 3px solid #87181A;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
  z-index: 100;
  pointer-events: none;
}
.et-dropdown:hover .et-dropdown-menu,
.et-dropdown:focus-within .et-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.et-dropdown-menu a {
  display: block;
  padding: 11px 20px;
  color: #15181D;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.et-dropdown-menu a:hover,
.et-dropdown-menu a:focus {
  color: #87181A;
  background: rgba(204, 0, 0, 0.06);
  border-left-color: #87181A;
  outline: none;
}
.et-dropdown-divider {
  height: 1px;
  background: #CCD3DC;
  margin: 6px 12px;
}
.et-dropdown-menu .et-dropdown-all {
  color: #87181A;
  font-weight: 600;
}

/* Blog — index cards (build.py emits <a class="blog-card">...</a> for each post)
 * and per-post article body. Match the dark theme. */
.blog-card {
  display: block;
  padding: 32px 28px;
  background: rgb(232, 236, 242);
  border: 1px solid rgb(204, 211, 220);
  border-left: 4px solid rgb(135, 24, 26);
  color: rgb(21, 24, 29);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.blog-card:hover { border-color: rgb(135, 24, 26); color: rgb(21, 24, 29); transform: translateY(-2px); }
.blog-card .date {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: #87181A;
  text-transform: uppercase;
}
.blog-card h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 12px 0 12px;
  line-height: 1.2;
  color: rgb(21, 24, 29);
}
.blog-card p {
  color: rgb(86, 96, 112);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px;
}
.blog-card .more {
  color: #87181A;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.5px;
}

.blog-article h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgb(21, 24, 29);
  margin: 36px 0 14px;
}
.blog-article h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 2vw, 22px);
  color: rgb(21, 24, 29);
  margin: 28px 0 12px;
}
.blog-article p {
  font-size: 17px;
  line-height: 1.75;
  color: rgb(51, 58, 68);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.blog-article ul, .blog-article ol {
  padding-left: 24px;
  margin: 0 0 22px;
  list-style: revert;
}
.blog-article li {
  font-size: 16.5px;
  line-height: 1.7;
  color: rgb(51, 58, 68);
  margin-bottom: 8px;
}
.blog-article a { color: #87181A; text-decoration: underline; text-decoration-color: rgba(204,0,0,0.4); text-underline-offset: 3px; }
.blog-article a:hover { text-decoration-color: #87181A; }
.blog-article strong { color: rgb(21, 24, 29); }

/* Mobile-nav toggle — desktop shows .et-topbar + .et-desknav, mobile swaps
 * to .et-menubtn. The design ships all three classes but the visibility
 * switch is our job. */
/* Hamburger button — 3 horizontal bars stacked. Hidden on desktop. */
.et-menubtn {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid rgb(182, 191, 203);
  align-items: center; justify-content: center; flex-direction: column;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
}
.et-menubtn-bar {
  width: 20px; height: 2px;
  background: #15181D;
  transition: transform .2s ease, opacity .2s ease;
}

/* The invisible checkbox that drives the menu open/close state.
 * Kept off-screen and unfocusable — the labels toggle it. */
.mm-toggle {
  position: absolute;
  top: -100px; left: -100px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Both the mobile drawer and the backdrop that dims content behind it
 * default to hidden. Tapping the backdrop (a <label> pointing at the
 * checkbox) toggles the menu closed. */
.et-mobile-menu { display: none; }
.et-mobile-backdrop { display: none; }
.et-mobile-callbar { display: none; }

@media (max-width: 940px) {
  .et-topbar { display: none !important; }
  .et-desknav { display: none !important; }
  .et-header-call { display: none !important; }
  .et-menubtn { display: flex !important; }

  /* Shrink the header so the fixed logo doesn't eat the phone screen. */
  .et-header { min-height: 76px !important; padding: 6px 16px !important; }
  .et-logo img { height: 56px !important; }

  /* Hamburger → X transformation when the drawer is open. */
  .mm-toggle:checked ~ .et-topbar + .et-header .et-menubtn .et-menubtn-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .mm-toggle:checked ~ .et-topbar + .et-header .et-menubtn .et-menubtn-bar:nth-child(2) {
    opacity: 0;
  }
  .mm-toggle:checked ~ .et-topbar + .et-header .et-menubtn .et-menubtn-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Backdrop: full-viewport tap target that closes the menu. */
  .mm-toggle:checked ~ .et-mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 55;
  }

  /* The drawer itself — slides in from the top of the viewport, below
   * the sticky header. Scrollable if content overflows. */
  .mm-toggle:checked ~ .et-mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 76px; left: 0; right: 0;
    max-height: calc(100dvh - 76px - 64px);
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    border-top: 3px solid #87181A;
    z-index: 60;
    padding: 8px 0;
  }
  .et-mobile-menu a {
    display: block;
    padding: 14px 22px;
    color: #15181D;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-left: 3px solid transparent;
  }
  .et-mobile-menu a:hover, .et-mobile-menu a:focus {
    background: rgba(204, 0, 0, 0.1);
    border-left-color: #87181A;
    color: #87181A;
  }
  .et-mobile-menu-group {
    padding: 14px 22px 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    color: #87181A;
    text-transform: uppercase;
    margin-top: 6px;
    border-top: 1px solid #CCD3DC;
  }
  .et-mobile-menu a.et-mobile-menu-sub {
    padding-left: 40px;
    font-size: 14px;
    color: #c9c4bb;
  }

  /* Persistent tap-to-call bar pinned to the bottom of the viewport.
   * On iOS Safari the dynamic URL bar can push a plain `bottom: 0`
   * fixed element offscreen during scroll momentum, so we:
   *   - Force a compositing layer (translate3d + backface-hidden) so the
   *     browser keeps it painted independent of the URL-bar animation.
   *   - Anchor `bottom` to the safe-area inset rather than 0 so it never
   *     hides under the iPhone home-bar indicator.
   *   - Use !important + isolation to defend against any ancestor CSS
   *     that could otherwise create a containing block and break fixed.
   */
  .et-mobile-callbar {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    background: #87181A;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    z-index: 90;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.45);
    isolation: isolate;
    will-change: transform;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  .et-mobile-callbar:hover, .et-mobile-callbar:focus { color: #ffffff; }

  /* Keep the last bit of page content clear of the pinned bar. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* Kill any transforms/filters on html/body that could accidentally
   * turn our fixed elements into absolute ones. */
  html, body { transform: none !important; filter: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* FAQ accordion (native <details>) */
.et-faq { overflow: hidden; }
.et-faq-summary::-webkit-details-marker { display: none; }
.et-faq-summary::marker { display: none; content: ""; }
.et-faq .et-faq-icon::before { content: "+"; }
.et-faq[open] .et-faq-icon::before { content: "\2013"; }
.et-faq[open] > summary { border-bottom: 1px solid rgb(204, 211, 220); }
.et-faq-summary:hover span:first-child { color: rgb(21, 24, 29); }
.et-faq-summary:focus-visible { outline: 2px solid rgb(135, 24, 26); outline-offset: -2px; }

/* Footer — explicit responsive grid (replaces the old auto-fit minmax
 * that broke into an awkward L-shape at 1024-1280 widths because the
 * short logo column paired with the tall Services column). Now the
 * layout is a defined 4-col at desktop, 2-col at tablet, 1-col at
 * mobile — no more orphaned wrapping. */

.jb-footer-grid {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  grid-template-columns: 1.15fr 1fr 1fr 1fr;   /* logo column slightly wider */
}
.jb-footer-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3px;
  /* the footer sits on navy, so this heading keeps a light colour rather than
     the ink the light-theme conversion applied everywhere else */
  color: rgb(244, 246, 249);
  text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(90, 112, 148);
  margin-bottom: 22px;
}
.jb-footer-col a:hover { color: rgb(21, 24, 29); }

@media (max-width: 1023px) {
  .jb-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .jb-footer-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Top-bar Facebook + email icons — subtle hover brighten so they feel
 * like proper affordances, not tiny glyphs. */
.et-topbar-icons a { transition: color .12s ease, transform .12s ease; }
.et-topbar-icons a:hover { color: #ffffff !important; transform: translateY(-1px); }

/* ─────────────────────────────────────────────────────────────────────
 * COUPONS PAGE
 *
 * The live Squarespace site published all eight offers as flat JPGs, so
 * none of the dollar amounts were indexable, selectable, or readable by
 * a screen reader. These rules rebuild that same printed-coupon look in
 * text: gold header bar, diamond-plate frame, clip-out card, price tag.
 *
 * Markup is generated by build.py from coupons.json — a monthly refresh
 * is a JSON edit, not a CSS or HTML edit. Four templates:
 *   .cpn-card    gold header bar + white body  (brake, A/C, mount, susp.)
 *   .cpn-tier-*  the Super Saver discount ladder
 *   .cpn-banner  dark card with a yellow price tag (oil, tires)
 *   .cpn-cutout  dashed clip-out coupon (military)
 * ───────────────────────────────────────────────────────────────────── */

.cpn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 370px), 1fr));
  gap: 26px;
  align-items: start;
}
.cpn-grid > .cpn-wide { grid-column: 1 / -1; }

/* Diamond-plate frame. The printed coupons all sit on a tread-plate
 * background; this is a CSS approximation — two opposing hatch layers
 * plus a soft highlight — so no image request is needed. */
.cpn-plate {
  background-color: #17181a;
  background-image:
    repeating-linear-gradient(45deg, rgba(21, 24, 29, .05) 0 3px, transparent 3px 17px),
    repeating-linear-gradient(-45deg, rgba(21, 24, 29, .05) 0 3px, transparent 3px 17px),
    radial-gradient(120% 90% at 25% 0%, rgba(255, 255, 255, .055), transparent 65%);
  border: 1px solid #CCD3DC;
  padding: clamp(14px, 1.6vw, 20px);
}
.cpn-plate-dark { padding: clamp(28px, 3.4vw, 44px) clamp(20px, 3vw, 40px); text-align: center; }

/* ── Template: gold header bar + white body ───────────────────────── */
.cpn-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
/* Text block left, logo lockup right — the arrangement on the printed bar. */
.cpn-head {
  background: #183059;
  padding: 15px 20px 14px;
  color: #E8ECF2;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.cpn-head-txt { flex: 1 1 auto; min-width: 0; }
.cpn-logo {
  flex: 0 0 auto;
  width: clamp(88px, 12vw, 118px);
  height: auto;
  align-self: center;
}
.cpn-head h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(21px, 2.7vw, 28px);
  line-height: 1.04;
  letter-spacing: -.2px;
  text-transform: uppercase;
}
.cpn-dates { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px; margin-top: 7px; }
.cpn-head p { font-size: 11.5px; line-height: 1.4; margin-top: 6px; }

.cpn-body { padding: 26px 20px 22px; text-align: center; color: #E8ECF2; }
.cpn-offer {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5.6vw, 54px);
  line-height: .97;
  text-transform: uppercase;
  letter-spacing: -.5px;
}
.cpn-offer-sub {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.5vw, 25px);
  line-height: 1.1;
  text-transform: uppercase;
  margin-top: 4px;
}
.cpn-detail {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-top: 11px;
}
.cpn-code {
  display: inline-block;
  background: #183059;
  color: #E8ECF2;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 2.6vw, 25px);
  letter-spacing: 1px;
  padding: 11px 36px;
  border-radius: 999px;
  margin-top: 20px;
}
.cpn-site {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-top: 15px;
}

/* Two-location phone pills — dark label slug inside a gold pill, as printed. */
.cpn-phones { display: grid; gap: 9px; margin-top: 16px; }
/* The 3px container padding is the single source of truth for the inset
 * around the dark label — left, top and bottom all read the same. The
 * label stretches to the row height rather than sizing itself, so the
 * inset stays uniform as the number's font-size scales with the viewport. */
.cpn-phone {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 3px;
  background: #183059;
  border-radius: 999px;
  color: #E8ECF2;
  transition: filter .12s ease;
}
.cpn-phone:hover { color: #E8ECF2; filter: brightness(1.08); }
.cpn-phone span {
  display: flex;
  align-items: center;
  align-self: stretch;
  background: #2b2d31;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 0 17px;
  border-radius: 999px;
  white-space: nowrap;
}
.cpn-phone strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.9vw, 18px);
  /* 8px not 11px: the 3px container inset above adds back the difference,
   * keeping the pill at its original ~49px height. */
  padding: 8px 16px;
  white-space: nowrap;
}

.cpn-phone-red { background: #87181A; color: #ffffff; }
.cpn-phone-red strong { color: #ffffff; }
.cpn-ico { flex: 0 0 auto; width: 17px; height: 17px; }
/* On the dark plates the pills sit on tread plate, not white card stock. */
.cpn-plate-dark .cpn-phones {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* ── Template: Super Saver discount ladder ────────────────────────── */
.cpn-tiers-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.02;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: -.5px;
}
.cpn-tiers-title b { color: #183059; font-weight: 700; }
/* Multi-column rather than grid: the printed coupon reads column-major
 * ($15 down to $45 in the left column, $55 to $85 in the right), and
 * column-count balances that for any number of tiers — so adding or
 * removing a tier in coupons.json needs no CSS change. */
.cpn-tier-list {
  column-count: 1;
  column-gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(22px, 3vw, 34px);
  text-align: left;
}
@media (min-width: 700px) {
  .cpn-tier-list { column-count: 2; }
}
.cpn-tier {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  break-inside: avoid;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  line-height: 1.05;
}
.cpn-tier:last-child { margin-bottom: 0; }
.cpn-tier b { color: #183059; font-weight: 700; font-size: clamp(20px, 2.8vw, 31px); }
.cpn-tier em {
  color: #ffffff;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(15px, 1.9vw, 21px);
}
.cpn-note {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.6vw, 15px);
  text-transform: uppercase;
  color: #15181D;
  margin-top: clamp(20px, 2.6vw, 28px);
}
.cpn-tiers-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(18px, 2.4vw, 24px);
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, .13);
  text-align: left;
}
.cpn-finance { flex: 0 0 auto; }
.cpn-finance span {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.12;
  color: #183059;
}
.cpn-fine {
  flex: 1 1 260px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #beb9b0;
  text-transform: uppercase;
  letter-spacing: .2px;
}

/* ── Template: dark banner with a price tag ───────────────────────── */
.cpn-banner-head {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.04;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: -.3px;
}
/* The tag silhouette from the artwork: notched point on the right, with a
 * punched eyelet. clip-path handles the notch, the ::after dot the hole. */
.cpn-tag {
  position: relative;
  display: inline-block;
  background: #183059;
  color: #E8ECF2;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(42px, 7vw, 68px);
  line-height: 1;
  padding: 16px 52px 16px 30px;
  margin-top: clamp(14px, 2vw, 20px);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
}
.cpn-tag::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 26px;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #17181a;
}
.cpn-banner-sub {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 2.3vw, 25px);
  line-height: 1.2;
  text-transform: uppercase;
  color: #ffffff;
  margin-top: clamp(16px, 2.2vw, 22px);
}
.cpn-plate-dark .cpn-fine { flex: none; margin-top: 16px; text-align: center; }

/* ── Template: dashed clip-out coupon (military) ──────────────────── */
.cpn-plate-flag {
  background-color: #17181a;
  background-image:
    repeating-linear-gradient(45deg, rgba(21, 24, 29, .05) 0 3px, transparent 3px 17px),
    repeating-linear-gradient(-45deg, rgba(21, 24, 29, .05) 0 3px, transparent 3px 17px),
    linear-gradient(180deg, rgba(204, 0, 0, .30) 0%, rgba(20, 40, 104, .30) 100%);
}
.cpn-cutout {
  background: #ffffff;
  border: 3px dashed #4a4d52;
  border-radius: 6px;
  padding: clamp(26px, 3.4vw, 40px) clamp(20px, 3vw, 34px);
  text-align: center;
  color: #E8ECF2;
}
.cpn-cutout h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cpn-cutout-offer {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 52px);
  line-height: 1;
  text-transform: uppercase;
  color: #87181A;
  margin-top: 14px;
}
.cpn-cutout p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 440px;
  margin: 16px auto 0;
}

@media (max-width: 599px) {
  /* Stack the Super Saver footer so the fine print never squeezes the
   * financing callout into two-character-wide columns. */
  .cpn-tiers-foot { flex-direction: column; align-items: flex-start; }
  .cpn-tier-list { column-gap: 0; }
}

/* BOOK NOW pill on the banner coupons, as printed. */
.cpn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(16px, 2.2vw, 22px);
  background: #183059;
  color: #E8ECF2;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.9vw, 19px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 13px 30px;
  border-radius: 999px;
  transition: filter .12s ease;
}
.cpn-cta:hover { color: #E8ECF2; filter: brightness(1.08); }
.cpn-cta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E8ECF2;
  color: #183059;
  font-size: 13px;
  line-height: 1;
}
/* Divider between the two promo claims in the homepage bar. Once they
 * stack it has nothing to separate, so it goes away. */
@media (max-width: 700px) {
  .jb-bar-div { display: none; }
}

/* Homepage "Current Specials" — six cards. auto-fit packed four across at
 * desktop and orphaned the last two on a half-empty row; fixed column counts
 * keep every row full: 3 + 3 wide, 2 + 2 + 2 at tablet, stacked on phones. */
.jb-specials-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 620px) {
  .jb-specials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 940px) {
  .jb-specials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}





/* Header row: logo + nav + the Request Service / phone stack.
   Both the nav and the stack take `margin-left: auto`, so the row's spare
   width splits evenly into two gaps — logo | nav | stack — instead of pooling
   entirely to the nav's right and leaving the logo crowded. */
.et-desknav    { margin-left: auto; }
.et-header-call { margin-left: auto; }

/* Between the 992px hamburger breakpoint and ~1100px the three blocks are
   ~50px wider than the row, so the stack was dropping to a second line.
   Trim the pieces just in that window. */
@media (min-width: 992px) and (max-width: 1100px) {
  .et-logo img   { height: 46px !important; }
  .et-desknav    { font-size: 12.5px !important; letter-spacing: 1px !important; gap: 8px 14px !important; }
  .et-header-call a { padding-left: 18px !important; padding-right: 18px !important; }
}


/* ---------------------------------------------------------------------------
   Hero on phones and small tablets.
   The desktop hero is a left-to-right NAVY scrim over the shop photo, so the
   white headline holds up even where the scrim thins out. Below 992px the
   headline spans the whole viewport, so the hero stacks instead: copy on flat
   navy, then the photo UNCROPPED at its own 16:7 — which also keeps the
   marquee sign (left) and the robot sculpture (right) in frame, the two things
   that identify the shop.
--------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .bry-hero {
    min-height: 0 !important;
    padding-bottom: 0 !important;
    background: rgb(24, 48, 89) !important;
    display: flex;
    flex-direction: column;
  }
  .bry-hero-inner { order: 1; padding-bottom: 36px !important; }
  .bry-hero-media {
    position: static !important;
    order: 2;
    width: 100%;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  .bry-hero-media img { width: 100%; height: auto !important; aspect-ratio: 16 / 7; object-fit: cover; }
  .bry-hero-scrim { display: none !important; }
  .bry-hero-stripe { position: static !important; order: 3; }
}



/* Trust strip under the hero. Four equal columns need ~1124px; below that
   `auto-fit` was leaving a 3 + 1 orphan row, so step straight to 2x2, then to
   a single column on phones. Items stretch so all four headings share a top
   edge and all four rules are the same height. */
/* Four across needs ~1124px, three across ~860px. Each strip steps down to a
   layout that divides evenly, so neither is ever left with an orphan row. */
@media (max-width: 1123px) { .bry-trust-4 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width:  860px) { .bry-trust-3 { grid-template-columns: 1fr !important; } }
@media (max-width:  560px) { .bry-trust-4 { grid-template-columns: 1fr !important; } }


/* Homepage hero: copy in the left 40%, photo in the right 60%.
   A grid rather than a scrim over a full-bleed photo. The old scrim had to stay
   near-opaque across most of the width to keep the headline legible, so the
   photo never really read. Copy now sits on solid navy — contrast is a fixed
   13.08:1 whatever the photo does — and the photo owns its 60% outright.
   The copy column is a grid track, so it cannot overrun the photo's edge the
   way a max-width inside a centred container did. */
.bry-hero-grid {
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: stretch;
  min-height: 400px;
}
.bry-hero-copy {
  align-self: center;
  min-width: 0;
  overflow-wrap: break-word;
  padding: clamp(34px, 3.2vw, 46px) clamp(18px, 2vw, 28px) clamp(38px, 3.2vw, 48px) clamp(20px, 4vw, 48px);
  /* pull the copy in line with the 1240px content column used further down */
  padding-left: max(clamp(20px, 4vw, 48px), calc((100vw - 1240px) / 2));
}
.bry-hero-media { position: relative; min-height: 400px; }
/* Blend the navy into the photo over a long, eased ramp. The copy sits on the
   solid navy column, so nothing here has to protect text — this is purely the
   seam, and a short 90px fade still read as a hard edge. The extra stops keep
   it from banding: a two-stop linear ramp over this distance shows steps. */
.bry-hero-media::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 46%; z-index: 2;
  background: linear-gradient(90deg,
    rgb(24, 48, 89) 0%,
    rgba(24, 48, 89, 0.97) 8%,
    rgba(24, 48, 89, 0.88) 20%,
    rgba(24, 48, 89, 0.72) 34%,
    rgba(24, 48, 89, 0.52) 50%,
    rgba(24, 48, 89, 0.32) 66%,
    rgba(24, 48, 89, 0.15) 82%,
    rgba(24, 48, 89, 0.05) 92%,
    rgba(24, 48, 89, 0) 100%);
  pointer-events: none;
}

/* 992-1199px: a 40% column is too narrow for the headline and the two CTAs
   side by side, so give the copy a little more and ease the buttons. */
@media (min-width: 992px) and (max-width: 1199px) {
  .bry-hero-grid { grid-template-columns: 50% 50%; }
  .bry-hero-copy a { padding: 12px 16px !important; font-size: 14px !important; }
}

@media (max-width: 991px) {
  /* stacked: copy on flat navy, photo full width underneath, uncropped */
  .bry-hero-grid  { grid-template-columns: 1fr; min-height: 0; }
  .bry-hero-copy  { padding-left: clamp(20px, 4vw, 48px); padding-bottom: 36px; }
  .bry-hero-media { min-height: 0; }
  .bry-hero-media::before { display: none; }
  .bry-hero-media img { height: auto !important; }
}


/* Credential badges above the footer. Four across needs ~900px; below that the
   flex row wraps 3+1 and then 2+1+1, so step to an even 2x2 instead. */
@media (max-width: 899px) {
  .bry-badges {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: 24px 28px !important;
  }
}

/* 2026-10-01: the client asked for a bigger logo in the header. The row is
   logo | nav | Request Service stack, so the logo can only grow where the row
   has the width for it; below 1180px it stays at the sizes that fit. */
@media (min-width: 1100px) and (max-width: 1180px) { .et-logo img { height: 56px !important; } }
@media (min-width: 1280px) { .et-logo img { height: 78px !important; } }
@media (max-width: 940px) { .et-logo img { height: auto !important; width: min(307px, calc(100vw - 118px)) !important; } }