@charset "UTF-8";
/* ==========================================================================
   Brass Kisses - design tokens
   Extracted verbatim from the design handoff README. Values are locked;
   change them here, never inline.
   ========================================================================== */
:root {
  /* --- Surfaces ------------------------------------------------------- */
  --bk-black:        #0a0a0a;
  /* primary dark section bg */
  --bk-black-pure:   #000000;
  /* hero only - no gradient, locked */
  --bk-panel:        #141414;
  /* secondary dark panel */
  --bk-panel-hover:  #242424;
  --bk-border:       #2a2a2a;
  --bk-border-alt:   #232323;
  --bk-bone:         #F1EDE4;
  /* page bg + light text on dark */
  /* --- Brand accents -------------------------------------------------- */
  --bk-red:          #D40D18;
  --bk-red-hover:    #78030A;
  --bk-yellow:       #F5C900;
  /* --- Text ----------------------------------------------------------- */
  --bk-text-dark:      #3a3833;
  /* body on light */
  --bk-text-dark-mute: #5c5850;
  --bk-text-light:     #F1EDE4;
  /* body on dark */
  --bk-text-light-1:   #d9d5cc;
  --bk-text-light-2:   #c9c4ba;
  --bk-text-light-3:   #9a958b;
  --bk-text-light-4:   #8a857c;
  --bk-text-light-5:   #76716A;
  --bk-text-light-6:   #6d6a63;
  /* --- Type ----------------------------------------------------------- */
  --bk-font-display: 'Oswald', Impact, sans-serif;
  --bk-font-body:    Georgia, serif;
  --bk-font-ui:      Arial, Helvetica, sans-serif;
  /* --- Layout --------------------------------------------------------- */
  --bk-max:      1440px;
  --bk-gutter:   32px;
  --bk-band-gap: 3px;
  /* the 2-image band gap */
  /* --- The locked drip device ---------------------------------------- */
  --bk-drip-height:   560px;
  --bk-drip-fade:     500px; }

/* ==========================================================================
   Primitives
   No rounded corners anywhere on this site. No drop shadows on cards.
   Flat, high-contrast blocks are the visual device.
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bk-bone);
  font-family: var(--bk-font-ui);
  -webkit-font-smoothing: antialiased; }

a {
  color: var(--bk-red); }

a:hover {
  color: var(--bk-red-hover); }

img {
  max-width: 100%; }

.bk-wrap {
  max-width: var(--bk-max);
  margin: 0 auto;
  padding-left: var(--bk-gutter);
  padding-right: var(--bk-gutter); }

/* --- Display type ---------------------------------------------------- */
.bk-h1, .bk-h2, .bk-h3 {
  font-family: var(--bk-font-display);
  font-weight: 800;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  margin: 0; }

.bk-h1 {
  font-size: 76px;
  line-height: 1.02;
  letter-spacing: -0.5px; }

.bk-h2 {
  font-size: 46px;
  line-height: 1.1; }

.bk-h3 {
  font-size: 26px;
  line-height: 1.15; }

/* --- Eyebrow label --------------------------------------------------- */
.bk-eyebrow {
  font-family: var(--bk-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase; }

.bk-eyebrow--tight {
  font-size: 11px;
  letter-spacing: 1.5px; }

.bk-eyebrow--red {
  color: var(--bk-red); }

.bk-eyebrow--yellow {
  color: var(--bk-yellow); }

/* --- Body copy ------------------------------------------------------- */
.bk-lede {
  font-family: var(--bk-font-body);
  font-size: 19px;
  line-height: 1.5;
  color: var(--bk-text-light-2);
  margin: 0; }

.bk-prose {
  font-family: var(--bk-font-body);
  font-size: 17px;
  line-height: 1.6;
  margin: 0; }

/* --- Buttons --------------------------------------------------------- */
.bk-btn {
  display: inline-block;
  font-family: var(--bk-font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 30px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease; }

.bk-btn--yellow {
  background: var(--bk-yellow);
  color: var(--bk-black); }

.bk-btn--yellow:hover {
  background: var(--bk-bone);
  color: var(--bk-black); }

.bk-btn--black {
  background: var(--bk-black);
  color: var(--bk-bone); }

.bk-btn--black:hover {
  background: var(--bk-panel-hover);
  color: var(--bk-bone); }

.bk-btn--outline {
  border: 1.5px solid var(--bk-bone);
  color: var(--bk-bone);
  background: transparent; }

.bk-btn--outline:hover {
  border-color: var(--bk-red);
  color: var(--bk-red); }

.bk-btn--sm {
  padding: 14px 26px;
  font-size: 13px;
  letter-spacing: 0.5px; }

.bk-btn--nav {
  padding: 12px 22px;
  font-size: 12.5px;
  letter-spacing: 0.6px; }

/* --- Text links ------------------------------------------------------ */
.bk-link {
  font-family: var(--bk-font-ui);
  font-size: 13.5px;
  text-decoration: underline;
  color: var(--bk-bone);
  transition: color .15s ease; }

.bk-link:hover {
  color: var(--bk-red); }

.bk-link--mute {
  color: var(--bk-text-light-4); }

.bk-link--mute:hover {
  color: var(--bk-bone); }

/* --- Sections -------------------------------------------------------- */
.bk-section {
  padding: 80px var(--bk-gutter); }

.bk-section--dark {
  background: var(--bk-black); }

.bk-section--panel {
  background: var(--bk-panel); }

/* Reduced top padding so the header drip hangs over the eyebrow without
   crossing body copy. Locked - see README notes on the reverted
   negative-margin approach. */
.bk-section--under-drip {
  padding: 100px var(--bk-gutter) 60px; }

/* --- The drip device -------------------------------------------------
   Absolutely positioned, full-bleed, bottom-faded. Appears ONLY directly
   under the header - never in the footer, never mid-page. */
.bk-drip {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--bk-drip-height);
  overflow: hidden;
  /* Below page copy (z-30), above section backgrounds - so the paint pours
     into the hero and over the packshot while the headline stays readable. */
  z-index: 6;
  pointer-events: none;
  /* The lacquer PNG is transparent between the drips, and this element hangs
     below the header over div.body, which has no background of its own - so
     the cream <body> showed through the gaps as a pale band under the nav.
     The paint has to read as running down the dark header surface, so the
     strip carries its own black. The mask below still fades it out at the
     bottom, so it blends into whatever section follows. */
  background: linear-gradient(to bottom, var(--bk-black) 0, var(--bk-black) 110px, rgba(10, 10, 10, 0) 210px);
  -webkit-mask-image: linear-gradient(to bottom, black 0, black var(--bk-drip-fade), transparent var(--bk-drip-height));
  mask-image: linear-gradient(to bottom, black 0, black var(--bk-drip-fade), transparent var(--bk-drip-height)); }

.bk-drip img {
  width: 100%;
  display: block;
  height: auto; }

/* DEAD CODE. No template uses .bk-drip--hero any more - it double-stacked
   the paint. Kept only so an old cached template does not render unstyled. */
.bk-drip--hero {
  top: 0;
  height: 280px;
  z-index: 5;
  -webkit-mask-image: linear-gradient(to bottom, black 0, black 265px, transparent 280px);
  mask-image: linear-gradient(to bottom, black 0, black 265px, transparent 280px); }

.bk-drip--hero img {
  margin-top: calc(var(--bk-drip-height) * -1); }

/* --- 2-image band pattern (Home + American Made) --------------------- */
.bk-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bk-band-gap);
  background: var(--bk-black);
  padding: 0; }

.bk-band__cell {
  position: relative; }

.bk-band__cell img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block; }

.bk-band__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 30px;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0));
  pointer-events: none; }

.bk-band__num {
  font-family: var(--bk-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bk-yellow);
  margin-bottom: 6px; }

.bk-band__title {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--bk-bone); }

/* --- Product card ---------------------------------------------------- */
.bk-card {
  background: var(--bk-panel);
  padding: 20px;
  display: flex;
  flex-direction: column; }

.bk-card__img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  margin-bottom: 16px;
  display: block; }

.bk-card__family {
  font-family: var(--bk-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bk-yellow);
  margin-bottom: 6px; }

.bk-card__caliber {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.3px;
  color: var(--bk-bone);
  margin-bottom: 6px; }

.bk-card__meta {
  font-family: var(--bk-font-ui);
  font-size: 13px;
  color: var(--bk-text-light-3);
  margin-bottom: 14px; }

.bk-card__cta {
  margin-top: auto;
  font-family: var(--bk-font-ui);
  font-size: 12.5px;
  color: var(--bk-bone);
  text-decoration: none;
  border-top: 1px solid var(--bk-border);
  padding-top: 14px;
  transition: color .15s ease; }

.bk-card__cta:hover {
  color: var(--bk-red); }

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

.bk-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px; }

/* ==========================================================================
   Responsive
   The designs are desktop-first at 1440px. These are the minimum breakpoints
   needed to keep them usable; they do not restyle anything above 1024px.
   ========================================================================== */
@media (max-width: 1024px) {
  .bk-h1 {
    font-size: 52px; }
  .bk-h2 {
    font-size: 36px; }
  .bk-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 768px) {
  .bk-h1 {
    font-size: 40px;
    letter-spacing: -0.3px; }
  .bk-h2 {
    font-size: 28px; }
  .bk-h3 {
    font-size: 22px; }
  .bk-lede {
    font-size: 17px; }
  .bk-section {
    padding: 52px 20px; }
  .bk-section--under-drip {
    padding: 64px 20px 40px; }
  .bk-grid-2, .bk-grid-3, .bk-band {
    grid-template-columns: 1fr; }
  .bk-band__cell img {
    height: 300px; }
  :root {
    --bk-gutter: 20px;
    --bk-drip-height: 240px;
    --bk-drip-fade: 210px; } }

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important; } }

/* Honeypot. Must be unreachable to humans and assistive tech, but a real
   rendered input so bots that ignore CSS still find it. Never display:none
   alone - some bots skip hidden inputs. */
.bk-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important; }

/* ==========================================================================
   Brass Kisses - header & footer
   ========================================================================== */
/* --- Header ---------------------------------------------------------- */
.bk-header {
  background: var(--bk-black);
  position: relative; }

.bk-header__utility {
  background: var(--bk-red);
  color: var(--bk-bone);
  text-align: center;
  padding: 8px 16px;
  font-family: var(--bk-font-ui);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase; }

.bk-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--bk-max);
  margin: 0 auto;
  padding: 18px var(--bk-gutter); }

.bk-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0; }

.bk-header__brand img {
  height: 42px;
  width: auto;
  display: block; }

.bk-header__brand span {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bk-bone); }

.bk-header__nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap; }

.bk-header__nav a {
  font-family: var(--bk-font-ui);
  font-size: 12.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bk-bone);
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s ease; }

.bk-header__nav a:hover {
  color: var(--bk-red); }

/* Active state, driven entirely by the data-active attribute on the header.
   No per-page markup, no JS. */
.bk-header[data-active="products"] a[data-nav="products"],
.bk-header[data-active="american-made"] a[data-nav="american-made"],
.bk-header[data-active="where-to-buy"] a[data-nav="where-to-buy"],
.bk-header[data-active="dealers"] a[data-nav="dealers"],
.bk-header[data-active="support"] a[data-nav="support"],
.bk-header[data-active="about"] a[data-nav="about"] {
  color: var(--bk-red);
  font-weight: 700; }

.bk-header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  flex-shrink: 0; }

.bk-header__legacy {
  font-size: 11.5px; }

/* Mobile toggle - hidden on desktop */
.bk-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--bk-border);
  cursor: pointer;
  padding: 0 10px; }

.bk-header__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--bk-bone); }

.bk-header__mobile {
  display: none; }

@media (max-width: 1100px) {
  .bk-header__nav {
    gap: 18px; }
  .bk-header__nav a {
    font-size: 11.5px; }
  .bk-header__legacy {
    display: none; } }

@media (max-width: 900px) {
  .bk-header__nav {
    display: none; }
  .bk-header__toggle {
    display: flex; }
  .bk-header__actions {
    order: 2; }
  .bk-header__mobile {
    display: block;
    border-top: 1px solid var(--bk-border);
    padding: 8px var(--bk-gutter) 16px; }
  .bk-header__mobile[hidden] {
    display: none; }
  .bk-header__mobile a {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid var(--bk-border-alt);
    color: var(--bk-bone);
    text-decoration: none;
    font-family: var(--bk-font-ui);
    font-size: 13px;
    letter-spacing: 0.6px;
    text-transform: uppercase; }
  .bk-header__mobile a:last-child {
    border-bottom: 0; } }

@media (max-width: 560px) {
  .bk-header__utility {
    font-size: 9.5px;
    letter-spacing: 0.5px; }
  .bk-header__actions .bk-btn {
    padding: 10px 14px;
    font-size: 11px; }
  .bk-header__brand span {
    font-size: 16px; }
  .bk-header__brand img {
    height: 34px; } }

/* --- Footer ---------------------------------------------------------- */
.bk-footer {
  background: var(--bk-black);
  color: var(--bk-bone);
  padding: 64px var(--bk-gutter) 28px;
  font-family: var(--bk-font-ui); }

.bk-footer__grid {
  max-width: var(--bk-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr;
  gap: 40px; }

.bk-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 14px; }

.bk-footer__brand img {
  height: 36px;
  width: auto; }

.bk-footer__brand span {
  font-family: 'Arial Black', Impact, sans-serif;
  color: var(--bk-bone);
  font-size: 17px;
  text-transform: uppercase; }

.bk-footer__blurb {
  font-size: 13px;
  color: var(--bk-text-light-3);
  line-height: 1.6;
  max-width: 280px;
  margin: 0; }

.bk-footer__label {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bk-text-light-5);
  margin-bottom: 16px; }

.bk-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px; }

.bk-footer__links a {
  color: var(--bk-text-light-1);
  text-decoration: none;
  font-size: 13.5px;
  transition: color .15s ease; }

.bk-footer__links a:hover {
  color: var(--bk-red); }

.bk-footer__note {
  font-size: 12.5px;
  color: var(--bk-text-light-3);
  margin: 0 0 12px;
  line-height: 1.5; }

.bk-footer__input {
  width: 100%;
  background: var(--bk-panel);
  border: 1px solid var(--bk-border);
  color: var(--bk-bone);
  padding: 11px 12px;
  font-size: 13px;
  font-family: var(--bk-font-ui);
  margin-bottom: 10px;
  border-radius: 0; }

.bk-footer__input:focus-visible {
  outline: 2px solid var(--bk-yellow);
  outline-offset: 1px; }

.bk-footer__check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11.5px;
  color: var(--bk-text-light-3);
  margin-bottom: 8px;
  line-height: 1.4;
  cursor: pointer; }

.bk-footer__check input {
  margin-top: 2px;
  flex-shrink: 0; }

.bk-footer__submit {
  background: var(--bk-yellow);
  color: var(--bk-black);
  border: 0;
  border-radius: 0;
  padding: 11px 20px;
  font-family: var(--bk-font-ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
  transition: background .15s ease; }

.bk-footer__submit:hover {
  background: var(--bk-bone); }

.bk-footer__status {
  font-size: 12px;
  margin: 10px 0 0;
  line-height: 1.45; }

.bk-footer__status--ok {
  color: var(--bk-yellow); }

.bk-footer__status--err {
  color: #ff6b6b; }

.bk-footer hr {
  border: none;
  border-top: 1px solid var(--bk-border-alt);
  margin: 44px auto 22px;
  max-width: var(--bk-max); }

.bk-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11.5px;
  color: var(--bk-text-light-6);
  max-width: var(--bk-max);
  margin: 0 auto; }

@media (max-width: 1024px) {
  .bk-footer__grid {
    grid-template-columns: 1fr 1fr 1fr; } }

@media (max-width: 640px) {
  .bk-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px; }
  .bk-footer__signup {
    grid-column: 1 / -1; } }

/* ==========================================================================
   Brass Kisses - page-level composition
   ========================================================================== */
.bk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0; }

/* --- Hero ------------------------------------------------------------
   Pure black, no gradient or glow overlay. Locked - do not add fades. */
.bk-hero {
  position: relative;
  background: var(--bk-black-pure);
  /* There is ONE drip on the site, hanging from the header, and it is clipped
     to 190px there - it does not reach into the hero. The old .bk-drip--hero
     rendered a second slice of the same asset offset by -190px and overlapped
     the header drip by 109px, which is why the paint looked like a slab with a
     hard cut. It has been removed. This padding is ordinary hero spacing; it is
     NOT compensating for the drip, so it does not need retuning when the
     lacquer art changes. */
  padding: 70px var(--bk-gutter) 80px;
  overflow: hidden; }

.bk-hero__inner {
  position: relative;
  max-width: var(--bk-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center; }

.bk-hero__eyebrow {
  margin-bottom: 18px; }

.bk-hero__title {
  color: var(--bk-bone);
  margin-bottom: 22px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); }

.bk-hero__title span {
  color: var(--bk-red); }

.bk-hero__lede {
  max-width: 520px;
  margin-bottom: 34px; }

.bk-hero__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px; }

.bk-hero__media {
  position: relative; }

.bk-hero__media video {
  position: relative;
  width: 100%;
  max-width: 780px;
  display: block;
  margin: 0 auto; }

/* --- Two paths ------------------------------------------------------- */
.bk-paths__title {
  color: var(--bk-black);
  margin-bottom: 44px;
  text-align: center;
  font-size: 34px; }

.bk-path {
  padding: 44px; }

.bk-path--dealer {
  background: var(--bk-black); }

.bk-path--shooter {
  background: var(--bk-red); }

.bk-path__rule {
  width: 44px;
  height: 4px;
  margin-bottom: 22px; }

.bk-path--dealer .bk-path__rule {
  background: var(--bk-yellow); }

.bk-path--shooter .bk-path__rule {
  background: var(--bk-black); }

.bk-path__eyebrow-dark {
  color: var(--bk-black); }

.bk-path__heading {
  color: var(--bk-bone);
  margin: 12px 0 18px; }

.bk-path__list {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px; }

.bk-path__list li {
  color: var(--bk-text-light-2);
  font-size: 14.5px;
  font-family: var(--bk-font-ui);
  line-height: 1.45; }

.bk-path__list--light li {
  color: var(--bk-bone); }

/* --- Lineup ---------------------------------------------------------- */
.bk-lineup__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px; }

.bk-lineup__title {
  color: var(--bk-bone);
  font-size: 34px;
  margin-top: 10px; }

/* --- American made intro --------------------------------------------- */
.bk-am__intro {
  padding: 80px var(--bk-gutter) 60px; }

.bk-am__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center; }

.bk-am__title {
  color: var(--bk-bone);
  margin: 14px 0 20px; }

.bk-am__body {
  color: var(--bk-text-light-2);
  margin-bottom: 24px; }

.bk-am__cta {
  font-weight: 700; }

/* --- Trust proof ----------------------------------------------------- */
.bk-trust {
  padding: 60px var(--bk-gutter); }

.bk-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center; }

.bk-trust__item img {
  height: 44px;
  width: auto;
  margin-bottom: 14px; }

.bk-trust__title {
  font-family: var(--bk-font-display);
  font-weight: 800;
  letter-spacing: -0.3px;
  font-size: 16px;
  color: var(--bk-bone);
  margin-bottom: 6px;
  text-transform: uppercase; }

.bk-trust__body {
  font-family: var(--bk-font-ui);
  font-size: 13.5px;
  color: var(--bk-text-light-3);
  line-height: 1.5; }

/* --- Red CTA strip --------------------------------------------------- */
.bk-strip {
  background: var(--bk-red);
  padding: 60px var(--bk-gutter); }

.bk-strip__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-left: 0;
  padding-right: 0; }

.bk-strip__title {
  color: var(--bk-bone);
  font-size: 28px;
  margin-bottom: 8px; }

.bk-strip__body {
  font-family: var(--bk-font-ui);
  font-size: 14.5px;
  color: #f6d8da;
  margin: 0; }

.bk-strip__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap; }

.bk-btn--bone {
  background: var(--bk-bone);
  color: var(--bk-black); }

.bk-btn--bone:hover {
  background: var(--bk-yellow);
  color: var(--bk-black); }

/* --- Legacy order strip ---------------------------------------------- */
.bk-legacy {
  background: var(--bk-bone);
  padding: 36px var(--bk-gutter);
  border-bottom: 1px solid #C9C3B7; }

.bk-legacy__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-left: 0;
  padding-right: 0; }

.bk-legacy__text {
  font-family: var(--bk-font-ui);
  font-size: 14px;
  color: var(--bk-text-dark); }

.bk-legacy__link {
  font-family: var(--bk-font-ui);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bk-red);
  text-decoration: underline; }

.bk-legacy__link:hover {
  color: var(--bk-red-hover); }

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 1024px) {
  .bk-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px; }
  .bk-hero__media {
    order: -1; }
  .bk-hero {
    padding-top: 40px; }
  .bk-paths__title, .bk-lineup__title {
    font-size: 28px; }
  .bk-trust__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px; } }

@media (max-width: 768px) {
  .bk-trust__grid {
    grid-template-columns: 1fr;
    gap: 36px; }
  .bk-path {
    padding: 32px 24px; }
  .bk-strip__inner, .bk-legacy__inner {
    flex-direction: column;
    align-items: flex-start; }
  .bk-hero__ctas .bk-btn {
    flex: 1 1 auto;
    text-align: center; } }

/* ==========================================================================
   Brass Kisses - age gate
   Opaque fixed overlay. Content underneath stays in the DOM (crawlers can
   read it); humans are blocked until the gate is dismissed by JS.
   ========================================================================== */
/* Scroll lock only - deliberately NOT visibility:hidden on body children. */
html.bk-locked, html.bk-locked body {
  overflow: hidden !important; }

#bk-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Fully opaque: the page behind must not be readable through it. */
  background: #0a0a0a;
  background-image: radial-gradient(ellipse at 50% -10%, #241f1a 0%, #0a0a0a 68%);
  font-family: var(--bk-font-ui, Arial, Helvetica, sans-serif);
  overflow-y: auto; }

/* Once unlocked the overlay is removed from the DOM; this is belt-and-braces. */
html:not(.bk-locked) #bk-gate {
  display: none; }

.bk-gate__card {
  width: 100%;
  max-width: 460px;
  text-align: center;
  color: #F1EDE4; }

.bk-gate__logo {
  height: 54px;
  width: auto;
  margin: 0 auto 24px;
  display: block; }

.bk-gate__title {
  font-family: var(--bk-font-display, "Oswald", Impact, sans-serif);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  margin: 0 0 14px; }

.bk-gate__body {
  font-family: var(--bk-font-body, Georgia, serif);
  font-size: 15px;
  line-height: 1.55;
  color: #a8a29a;
  margin: 0 0 26px; }

.bk-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 10px; }

.bk-gate__btn {
  display: block;
  width: 100%;
  padding: 15px 20px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: #0a0a0a;
  background: #F5C900;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background .15s ease; }

.bk-gate__btn:hover {
  background: #F1EDE4; }

.bk-gate__btn:disabled {
  opacity: .6;
  cursor: default; }

.bk-gate__btn--ghost {
  background: transparent;
  color: #F1EDE4;
  box-shadow: inset 0 0 0 1px #3a3733; }

.bk-gate__btn--ghost:hover {
  background: #1a1815;
  color: #F1EDE4; }

.bk-gate__choice {
  display: block;
  width: 100%;
  padding: 17px 20px;
  text-align: left;
  font-family: inherit;
  color: #F1EDE4;
  background: transparent;
  border: 1px solid #302d29;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease; }

.bk-gate__choice:hover {
  border-color: #F5C900;
  background: #17140f;
  color: #F1EDE4; }

.bk-gate__choice strong {
  display: block;
  font-family: var(--bk-font-display, "Oswald", Impact, sans-serif);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  margin-bottom: 4px; }

.bk-gate__choice span {
  display: block;
  font-size: 13px;
  color: #a8a29a;
  line-height: 1.45; }

/* Opt-in form */
.bk-gate__form {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 10px; }

.bk-gate__form input {
  width: 100%;
  padding: 14px;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 0;
  color: #F1EDE4;
  font-family: inherit;
  font-size: 13.5px; }

.bk-gate__form input::placeholder {
  color: #6b675f; }

.bk-gate__form input:focus-visible {
  outline: 2px solid #F5C900;
  outline-offset: 1px; }

.bk-gate__form button {
  grid-column: span 2; }

.bk-gate__status {
  font-size: 12.5px;
  line-height: 1.45;
  margin: 12px 0 0; }

.bk-gate__status--err {
  color: #ff8a8a; }

.bk-gate__status--ok {
  color: #F5C900; }

.bk-gate__link {
  display: inline-block;
  margin-top: 20px;
  font-family: inherit;
  font-size: 13px;
  color: #8a857d;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer; }

.bk-gate__link:hover {
  color: #F1EDE4; }

.bk-gate__fine {
  margin-top: 22px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #6b675f; }

.bk-gate__btn:focus-visible,
.bk-gate__choice:focus-visible,
.bk-gate__link:focus-visible {
  outline: 2px solid #F5C900;
  outline-offset: 3px; }

.bk-gate__step[hidden] {
  display: none; }

@media (max-width: 480px) {
  #bk-gate {
    padding: 20px;
    align-items: flex-start;
    padding-top: 8vh; }
  .bk-gate__title {
    font-size: 22px; }
  .bk-gate__form {
    grid-template-columns: 1fr; }
  .bk-gate__form button {
    grid-column: span 1; } }

@media (prefers-reduced-motion: reduce) {
  .bk-gate__btn, .bk-gate__choice, .bk-gate__link {
    transition: none; } }

/* ==========================================================================
   Brass Kisses - blog
   Reading-first: one column, generous measure, Georgia for body copy to
   match the editorial voice used elsewhere on the site.
   ========================================================================== */
/* --- Index ----------------------------------------------------------- */
.bk-bloglist {
  padding: 90px var(--bk-gutter); }

.bk-bloglist__inner {
  max-width: 820px;
  margin: 0 auto; }

.bk-bloglist__title {
  color: var(--bk-black);
  margin: 12px 0 44px; }

.bk-bloglist__items {
  list-style: none;
  margin: 0;
  padding: 0; }

.bk-postcard {
  padding: 28px 0;
  border-top: 1px solid #C9C3B7; }

.bk-postcard:last-child {
  border-bottom: 1px solid #C9C3B7; }

.bk-postcard__date {
  display: block;
  font-family: var(--bk-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bk-text-dark-mute);
  margin-bottom: 10px; }

.bk-postcard__title {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  margin: 0 0 8px; }

.bk-postcard__title a {
  color: var(--bk-black);
  text-decoration: none; }

.bk-postcard__title a:hover {
  color: var(--bk-red); }

.bk-postcard__desc {
  font-family: var(--bk-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--bk-text-dark-mute);
  margin: 0;
  max-width: 640px; }

/* --- Post ------------------------------------------------------------ */
.bk-post {
  padding: 90px var(--bk-gutter) 100px;
  background: var(--bk-bone); }

.bk-post__inner {
  max-width: 720px;
  margin: 0 auto; }

.bk-post__title {
  color: var(--bk-black);
  margin: 12px 0 32px; }

.bk-post__body {
  font-family: var(--bk-font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--bk-text-dark); }

.bk-post__body > *:first-child {
  margin-top: 0; }

.bk-post__body p {
  margin: 0 0 24px; }

.bk-post__body h2,
.bk-post__body h3,
.bk-post__body h4 {
  font-family: var(--bk-font-display);
  font-weight: 800;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--bk-black);
  margin: 44px 0 16px; }

.bk-post__body h2 {
  font-size: 26px; }

.bk-post__body h3 {
  font-size: 20px; }

.bk-post__body h4 {
  font-size: 17px; }

.bk-post__body ul,
.bk-post__body ol {
  margin: 0 0 24px;
  padding-left: 24px; }

.bk-post__body li {
  margin-bottom: 10px; }

.bk-post__body a {
  color: var(--bk-red);
  text-decoration: underline;
  text-underline-offset: 2px; }

.bk-post__body a:hover {
  color: var(--bk-red-hover); }

.bk-post__body blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--bk-yellow); }

.bk-post__body blockquote p {
  margin: 0;
  font-size: 19px;
  color: var(--bk-text-dark); }

.bk-post__body hr {
  border: none;
  border-top: 1px solid #C9C3B7;
  margin: 40px 0; }

.bk-post__body em {
  font-style: italic; }

.bk-post__body strong {
  font-weight: 700; }

.bk-post__back {
  margin: 48px 0 0; }

.bk-post__back a {
  color: var(--bk-red); }

@media (max-width: 768px) {
  .bk-bloglist {
    padding: 52px 20px; }
  .bk-post {
    padding: 52px 20px 64px; }
  .bk-post__body {
    font-size: 17px; }
  .bk-post__body h2 {
    font-size: 22px; }
  .bk-postcard__title {
    font-size: 20px; } }

/* ==========================================================================
   Product detail
   ========================================================================== */
/* --- Breadcrumb ------------------------------------------------------- */
.bk-crumbs {
  padding: 200px var(--bk-gutter) 0;
  font-family: var(--bk-font-ui);
  font-size: 12.5px;
  color: var(--bk-text-light-5); }

.bk-crumbs a {
  color: var(--bk-text-light-5);
  text-decoration: none; }

.bk-crumbs a:hover {
  color: var(--bk-red);
  text-decoration: underline; }

.bk-crumbs span {
  color: var(--bk-black); }

/* --- Main block ------------------------------------------------------- */
.bk-pdp {
  padding: 30px var(--bk-gutter) 70px; }

.bk-pdp__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding-left: 0;
  padding-right: 0; }

/* This image is the transparent variant, so it sits on the cream page
   directly - no panel behind it. */
.bk-pdp__media img {
  width: 100%;
  max-width: 460px;
  display: block; }

.bk-pdp__title {
  color: var(--bk-black);
  font-size: 38px;
  margin: 10px 0 14px; }

.bk-pdp__blurb {
  font-size: 16px;
  color: var(--bk-text-dark);
  max-width: 440px;
  margin: 0 0 26px; }

.bk-pdp__note {
  font-family: var(--bk-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bk-red);
  margin: -14px 0 22px; }

.bk-pdp__retail {
  background: var(--bk-black);
  padding: 20px 24px;
  margin-bottom: 26px; }

.bk-pdp__retail-title {
  font-family: var(--bk-font-ui);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bk-yellow);
  margin-bottom: 6px; }

.bk-pdp__retail-body {
  font-family: var(--bk-font-ui);
  font-size: 13.5px;
  color: var(--bk-text-light-2);
  line-height: 1.55; }

.bk-pdp__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap; }

.bk-btn--outline-dark {
  border: 1.5px solid var(--bk-black);
  color: var(--bk-black);
  background: transparent; }

.bk-btn--outline-dark:hover {
  border-color: var(--bk-red);
  color: var(--bk-red); }

/* On this page the yellow CTA inverts on hover rather than going bone. */
.bk-pdp__ctas .bk-btn--yellow:hover {
  background: var(--bk-black);
  color: var(--bk-bone); }

/* --- Specs table. dl/dt/dd rather than divs: it is a description list. */
.bk-specs {
  padding: 0 var(--bk-gutter) 70px; }

.bk-specs__title {
  color: var(--bk-black);
  font-size: 22px;
  margin-bottom: 20px; }

.bk-specs__table {
  border: 1px solid #C9C3B7;
  margin: 0; }

.bk-spec {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: 1px solid #C9C3B7; }

.bk-specs__table .bk-spec:last-child {
  border-bottom: 0; }

.bk-spec__k {
  padding: 14px 20px;
  margin: 0;
  background: var(--bk-black);
  color: var(--bk-bone);
  font-family: var(--bk-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase; }

.bk-spec__v {
  padding: 14px 20px;
  margin: 0;
  font-family: var(--bk-font-ui);
  font-size: 14px;
  color: var(--bk-black); }

/* --- Red band --------------------------------------------------------- */
.bk-pdp__band {
  background: var(--bk-red);
  padding: 60px var(--bk-gutter); }

.bk-pdp__band-inner {
  max-width: var(--bk-max);
  margin: 0 auto;
  text-align: center; }

.bk-pdp__band-title {
  color: var(--bk-bone);
  font-size: 28px;
  margin-bottom: 12px; }

.bk-pdp__band-body {
  font-family: var(--bk-font-body);
  font-size: 15.5px;
  color: #f6d8da;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.55; }

/* --- Related ---------------------------------------------------------- */
.bk-related {
  padding: 70px var(--bk-gutter); }

.bk-related__title {
  color: var(--bk-black);
  font-size: 24px;
  margin-bottom: 30px; }

@media (max-width: 1024px) {
  .bk-pdp__inner {
    grid-template-columns: 1fr;
    gap: 36px; }
  .bk-pdp__media img {
    max-width: 360px;
    margin: 0 auto; }
  .bk-pdp__title {
    font-size: 30px; } }

@media (max-width: 768px) {
  .bk-crumbs {
    padding: 120px 20px 0; }
  .bk-pdp {
    padding: 24px 20px 48px; }
  .bk-specs {
    padding: 0 20px 48px; }
  .bk-related {
    padding: 48px 20px; }
  .bk-spec {
    grid-template-columns: 140px 1fr; }
  .bk-spec__k {
    padding: 12px 14px;
    font-size: 11px; }
  .bk-spec__v {
    padding: 12px 14px;
    font-size: 13px; }
  .bk-pdp__ctas .bk-btn {
    flex: 1 1 auto;
    text-align: center; } }

/* ==========================================================================
   Product spec labels — maps BigCommerce custom-field names to display text

   The live catalog stores specs as custom fields with machine-style names:
     type=ammunition  brand=Brass Kisses  caliber=7.62x39mm
     grains=123       numrounds=20        condition=New

   Rendering those raw would put "caliber" and "numrounds" on the page as
   labels. Relabelling in Handlebars would mean depending on a comparison
   helper whose availability varies by theme version, and failing silently
   when it is absent. CSS is deterministic and needs no helper.

   Adding a new custom field in the admin needs no template change: an
   unmapped field falls back to its own name, capitalised.
   ========================================================================== */
/* Fallback for any field we have not explicitly mapped. */
.bk-spec__k {
  text-transform: capitalize; }

/* Internal / duplicated fields: not specs, so hide the whole row.
   `type` is the ammunition-vs-merch discriminator and `brand` duplicates
   the product's own brand field. */
.bk-spec:has([data-field="type"]),
.bk-spec:has([data-field="brand"]) {
  display: none; }

/* Explicit labels. The raw text is replaced rather than appended. */
.bk-spec__k[data-field]::after {
  text-transform: none; }

.bk-spec__k[data-field="caliber"],
.bk-spec__k[data-field="grains"],
.bk-spec__k[data-field="numrounds"],
.bk-spec__k[data-field="condition"],
.bk-spec__k[data-field="bullettype"],
.bk-spec__k[data-field="velocity"],
.bk-spec__k[data-field="casing"],
.bk-spec__k[data-field="usecase"],
.bk-spec__k[data-field="family"] {
  /* Hide the raw name; the ::before below supplies the label. */
  font-size: 0;
  letter-spacing: 0; }

.bk-spec__k[data-field="caliber"]::before {
  content: "Caliber"; }

.bk-spec__k[data-field="grains"]::before {
  content: "Bullet Weight (gr)"; }

.bk-spec__k[data-field="numrounds"]::before {
  content: "Rounds per Box"; }

.bk-spec__k[data-field="condition"]::before {
  content: "Condition"; }

.bk-spec__k[data-field="bullettype"]::before {
  content: "Bullet Type"; }

.bk-spec__k[data-field="velocity"]::before {
  content: "Muzzle Velocity"; }

.bk-spec__k[data-field="casing"]::before {
  content: "Casing"; }

.bk-spec__k[data-field="usecase"]::before {
  content: "Intended Use"; }

.bk-spec__k[data-field="family"]::before {
  content: "Family"; }

/* Restore the real type scale on the injected label. */
.bk-spec__k[data-field]::before {
  font-size: 12.5px;
  letter-spacing: 0.5px; }

/* :has() is widely supported, but if it is unavailable the internal rows
   would show. Belt and braces: also hide them by row attribute. */
.bk-spec[data-field="type"],
.bk-spec[data-field="brand"] {
  display: none; }

/* ==========================================================================
   Ammunition Lineup
   ========================================================================== */
/* 190px top: this heading sits clear of the drip rather than under it. */
.bk-lineup__hero {
  background: var(--bk-black);
  padding: 190px var(--bk-gutter) 50px; }

.bk-lineup__h1 {
  color: var(--bk-bone);
  font-size: 48px;
  margin: 14px 0; }

.bk-lineup__lede {
  color: var(--bk-text-light-2);
  max-width: 600px;
  margin: 0; }

/* --- Filter chips ----------------------------------------------------- */
.bk-filters {
  padding: 28px var(--bk-gutter) 0; }

.bk-filters__inner {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 0;
  padding-right: 0; }

.bk-chip {
  background: transparent;
  color: var(--bk-black);
  border: 1.5px solid var(--bk-black);
  border-radius: 0;
  padding: 9px 18px;
  font-family: var(--bk-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease; }

.bk-chip:hover {
  border-color: var(--bk-red);
  color: var(--bk-red); }

.bk-chip.is-active {
  background: var(--bk-red);
  border-color: var(--bk-red);
  color: var(--bk-bone); }

.bk-chip:focus-visible {
  outline: 2px solid var(--bk-red);
  outline-offset: 2px; }

/* --- Grid ------------------------------------------------------------- */
.bk-lineup {
  padding: 36px var(--bk-gutter) 80px; }

.bk-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px; }

.bk-lineup__empty {
  font-family: var(--bk-font-ui);
  font-size: 14px;
  color: var(--bk-text-dark-mute);
  padding: 40px 0; }

.bk-lineup__reset {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--bk-red);
  text-decoration: underline;
  cursor: pointer; }

/* --- Light card (white, for this page and related products) -----------
   Product images used here are the #ffffff-flattened variant, so the card
   background must stay #ffffff or a seam appears. */
.bk-lcard {
  background: #ffffff;
  border: 1px solid #C9C3B7;
  padding: 18px;
  display: flex;
  flex-direction: column; }

.bk-lcard__imglink {
  display: block; }

.bk-lcard__img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  margin-bottom: 14px;
  display: block; }

.bk-lcard__family {
  font-family: var(--bk-font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bk-red);
  margin-bottom: 6px; }

.bk-lcard__caliber {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.3px;
  color: var(--bk-black);
  margin-bottom: 4px; }

.bk-lcard__meta {
  font-family: var(--bk-font-ui);
  font-size: 12.5px;
  color: var(--bk-text-light-5);
  margin-bottom: 12px; }

.bk-lcard__note {
  font-family: var(--bk-font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--bk-red);
  margin-bottom: 12px;
  line-height: 1.4; }

.bk-lcard__cta {
  margin-top: auto;
  font-family: var(--bk-font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--bk-black);
  text-decoration: none;
  border-top: 1px solid #C9C3B7;
  padding-top: 12px;
  transition: color .15s ease; }

.bk-lcard__cta:hover {
  color: var(--bk-red); }

/* --- Dealer line sheet strip ------------------------------------------ */
.bk-linesheet {
  background: var(--bk-yellow);
  padding: 44px var(--bk-gutter); }

.bk-linesheet__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-left: 0;
  padding-right: 0; }

.bk-linesheet__title {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--bk-black); }

@media (max-width: 1200px) {
  .bk-grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 900px) {
  .bk-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 768px) {
  .bk-lineup__hero {
    padding: 120px 20px 40px; }
  .bk-lineup__h1 {
    font-size: 34px; }
  .bk-lineup {
    padding: 28px 20px 56px; }
  .bk-filters {
    padding: 24px 20px 0; }
  .bk-chip {
    padding: 8px 14px;
    font-size: 11.5px; } }

@media (max-width: 480px) {
  .bk-grid-4 {
    grid-template-columns: 1fr; } }

/* ==========================================================================
   Become a Dealer
   ========================================================================== */
/* Hero: 200px bottom padding leaves room for the drip to hang over the
   eyebrow without crossing the headline. Locked - see README on the
   reverted negative-margin approach. */
.bk-dhero {
  background: var(--bk-black);
  padding: 70px var(--bk-gutter) 200px; }

.bk-dhero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
  padding-left: 0;
  padding-right: 0; }

.bk-dhero__title {
  font-size: 48px;
  line-height: 1.1;
  color: var(--bk-bone);
  margin: 14px 0 18px; }

.bk-dhero__lede {
  font-size: 17px;
  color: var(--bk-text-light-2);
  max-width: 480px;
  margin-bottom: 28px; }

.bk-dhero__pack {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5)); }

/* --- Benefits -------------------------------------------------------- */
.bk-benefits {
  padding: 60px var(--bk-gutter); }

.bk-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-left: 0;
  padding-right: 0; }

.bk-benefit__title {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--bk-black);
  margin-bottom: 8px; }

.bk-benefit__body {
  font-family: var(--bk-font-ui);
  font-size: 13.5px;
  color: var(--bk-text-dark-mute);
  line-height: 1.5; }

/* --- How it works ---------------------------------------------------- */
.bk-steps {
  padding: 60px var(--bk-gutter); }

.bk-steps__title {
  color: var(--bk-bone);
  font-size: 24px;
  text-align: center;
  margin-bottom: 30px; }

.bk-steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px; }

.bk-step {
  border: 1px solid var(--bk-border);
  padding: 24px; }

.bk-step__n {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.3px;
  color: var(--bk-red);
  margin-bottom: 10px; }

.bk-step__title {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--bk-bone);
  margin-bottom: 8px; }

.bk-step__body {
  font-family: var(--bk-font-ui);
  font-size: 12.5px;
  color: var(--bk-text-light-3);
  line-height: 1.5; }

/* --- Small company / serious support. Both halves locked at 480px. --- */
.bk-support2 {
  display: grid;
  grid-template-columns: 1fr 1.1fr; }

.bk-support2 > img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block; }

.bk-support2__panel {
  background: var(--bk-red);
  padding: 70px 60px;
  height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center; }

.bk-support2__title {
  color: var(--bk-bone);
  margin-bottom: 16px; }

.bk-support2__body {
  font-family: var(--bk-font-body);
  font-size: 15px;
  color: #f6d8da;
  max-width: 440px;
  margin: 0 0 20px;
  line-height: 1.55; }

.bk-support2__link {
  font-family: var(--bk-font-ui);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bk-black);
  text-decoration: underline; }

.bk-support2__link:hover {
  color: var(--bk-bone); }

/* --- Dealer incentive ------------------------------------------------ */
.bk-incentive {
  background: var(--bk-yellow);
  display: grid;
  grid-template-columns: 1fr 1.1fr; }

.bk-incentive__copy {
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center; }

.bk-incentive__eyebrow {
  color: var(--bk-black);
  margin-bottom: 12px; }

.bk-incentive__title {
  font-size: 28px;
  color: var(--bk-black);
  margin-bottom: 16px; }

.bk-incentive__body {
  font-family: var(--bk-font-body);
  font-size: 15px;
  color: var(--bk-text-dark);
  max-width: 440px;
  margin: 0;
  line-height: 1.55; }

.bk-incentive__media {
  position: relative;
  background: var(--bk-black);
  overflow: hidden; }

.bk-incentive__media img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  filter: brightness(0.65) contrast(1.05); }

/* The display is not in production yet. This disclaimer is deliberate -
   the page promises it as a free incentive, so the caveat stays. */
.bk-incentive__disclaimer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 18px;
  background: rgba(10, 10, 10, 0.75);
  font-family: var(--bk-font-ui);
  font-size: 11px;
  line-height: 1.5;
  color: var(--bk-text-light-2); }

/* --- Retail shelves -------------------------------------------------- */
.bk-shelves {
  padding: 70px var(--bk-gutter); }

.bk-shelves__head {
  text-align: center;
  margin-bottom: 34px; }

.bk-shelves__title {
  color: var(--bk-black);
  font-size: 26px;
  margin-top: 10px; }

.bk-shelves__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; }

.bk-shelves__grid img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block; }

/* --- FAQ: native details/summary ------------------------------------- */
.bk-faq {
  padding: 70px var(--bk-gutter); }

.bk-faq__inner {
  max-width: 1000px;
  margin: 0 auto; }

.bk-faq__title {
  color: var(--bk-black);
  font-size: 24px;
  text-align: center;
  margin-bottom: 30px; }

.bk-faq__item {
  border-bottom: 1px solid #C9C3B7; }

.bk-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: var(--bk-font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--bk-black); }

.bk-faq__item summary::-webkit-details-marker {
  display: none; }

.bk-faq__item summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0; }

.bk-faq__item[open] summary::after {
  content: "\2212"; }

.bk-faq__item summary:focus-visible {
  outline: 2px solid var(--bk-red);
  outline-offset: 2px; }

.bk-faq__a {
  padding: 0 0 18px;
  font-family: var(--bk-font-ui);
  font-size: 14px;
  color: var(--bk-text-dark-mute);
  line-height: 1.6;
  max-width: 820px; }

/* --- Application form ------------------------------------------------ */
.bk-apply {
  background: var(--bk-black);
  padding: 70px var(--bk-gutter) 90px; }

.bk-apply__inner {
  max-width: 900px;
  margin: 0 auto; }

.bk-apply__title {
  color: var(--bk-bone);
  font-size: 30px;
  text-align: center;
  margin-bottom: 10px; }

.bk-apply__sub {
  font-family: var(--bk-font-ui);
  font-size: 14px;
  color: var(--bk-text-light-3);
  text-align: center;
  margin: 0 0 40px; }

.bk-apply__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px; }

.bk-span2 {
  grid-column: span 2; }

.bk-apply__form input,
.bk-apply__form select,
.bk-apply__form textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--bk-panel);
  border: 1px solid var(--bk-border);
  border-radius: 0;
  color: var(--bk-bone);
  font-family: var(--bk-font-ui);
  font-size: 13.5px; }

.bk-apply__form textarea {
  min-height: 80px;
  resize: vertical; }

.bk-apply__form input::placeholder,
.bk-apply__form textarea::placeholder {
  color: var(--bk-text-light-5); }

.bk-apply__form input:focus-visible,
.bk-apply__form select:focus-visible,
.bk-apply__form textarea:focus-visible {
  outline: 2px solid var(--bk-yellow);
  outline-offset: 1px; }

.bk-apply__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--bk-font-ui);
  font-size: 12.5px;
  color: var(--bk-text-light-3);
  line-height: 1.45;
  cursor: pointer; }

.bk-apply__check input {
  width: auto;
  margin-top: 2px;
  flex-shrink: 0; }

.bk-apply__submit {
  background: var(--bk-red);
  color: var(--bk-bone);
  border: 0;
  border-radius: 0;
  padding: 16px;
  font-family: var(--bk-font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease; }

.bk-apply__submit:hover {
  background: var(--bk-red-hover); }

.bk-apply__submit:disabled {
  opacity: .6;
  cursor: default; }

.bk-apply__status {
  font-family: var(--bk-font-ui);
  font-size: 13px;
  margin: 0;
  line-height: 1.5; }

.bk-apply__status--ok {
  color: var(--bk-yellow); }

.bk-apply__status--err {
  color: #ff8a8a; }

.bk-apply__done {
  background: var(--bk-panel);
  border: 1px solid var(--bk-border);
  padding: 40px;
  text-align: center; }

.bk-apply__done-title {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--bk-yellow);
  margin-bottom: 10px; }

.bk-apply__done-body {
  font-family: var(--bk-font-ui);
  font-size: 14px;
  color: var(--bk-text-light-2); }

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 1024px) {
  .bk-dhero {
    padding: 50px var(--bk-gutter) 140px; }
  .bk-dhero__inner {
    grid-template-columns: 1fr;
    gap: 36px; }
  .bk-dhero__title {
    font-size: 36px; }
  .bk-benefits__grid {
    grid-template-columns: repeat(2, 1fr); }
  .bk-steps__grid {
    grid-template-columns: repeat(2, 1fr); }
  .bk-support2, .bk-incentive {
    grid-template-columns: 1fr; }
  .bk-support2 > img, .bk-support2__panel,
  .bk-incentive__media img {
    height: 360px; }
  .bk-support2__panel {
    padding: 44px 32px; }
  .bk-incentive__copy {
    padding: 44px 32px; } }

@media (max-width: 768px) {
  .bk-benefits__grid, .bk-steps__grid, .bk-shelves__grid {
    grid-template-columns: 1fr; }
  .bk-apply__form {
    grid-template-columns: 1fr; }
  .bk-span2 {
    grid-column: span 1; }
  .bk-shelves__grid img {
    height: 240px; }
  .bk-apply {
    padding: 52px 20px 64px; } }

/* ==========================================================================
   Where to Buy
   ========================================================================== */
/* Reduced top padding so the drip sits under the header without crossing
   the heading. Locked - see README on the reverted 288px negative margin. */
.bk-wtb__hero {
  padding: 100px var(--bk-gutter) 60px; }

.bk-wtb__hero-inner {
  max-width: var(--bk-max);
  margin: 0 auto;
  text-align: center; }

.bk-wtb__title {
  color: var(--bk-bone);
  font-size: 44px;
  margin: 14px 0 16px; }

.bk-wtb__lede {
  font-size: 16.5px;
  color: var(--bk-text-light-2);
  max-width: 560px;
  margin: 0 auto; }

/* --- Request form ----------------------------------------------------- */
.bk-wtb {
  padding: 60px var(--bk-gutter); }

.bk-wtb__inner {
  max-width: 760px;
  margin: 0 auto; }

.bk-wtb__form {
  background: #ffffff;
  border: 1px solid #C9C3B7;
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px; }

.bk-wtb__form input,
.bk-wtb__form select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #C9C3B7;
  border-radius: 0;
  background: #fff;
  color: var(--bk-text-dark);
  font-family: var(--bk-font-ui);
  font-size: 13.5px; }

.bk-wtb__form input::placeholder {
  color: #8d8880; }

.bk-wtb__form input:focus-visible,
.bk-wtb__form select:focus-visible {
  outline: 2px solid var(--bk-red);
  outline-offset: 1px; }

.bk-wtb__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--bk-font-ui);
  font-size: 12.5px;
  color: var(--bk-text-dark-mute);
  line-height: 1.45;
  cursor: pointer; }

.bk-wtb__check input {
  width: auto;
  margin-top: 2px;
  flex-shrink: 0; }

.bk-wtb__submit {
  background: var(--bk-red);
  color: var(--bk-bone);
  border: 0;
  border-radius: 0;
  padding: 16px;
  font-family: var(--bk-font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease; }

.bk-wtb__submit:hover {
  background: var(--bk-red-hover); }

.bk-wtb__submit:disabled {
  opacity: .6;
  cursor: default; }

.bk-wtb__status {
  font-family: var(--bk-font-ui);
  font-size: 13px;
  margin: 0;
  line-height: 1.5; }

.bk-wtb__status--ok {
  color: #1c7a3c; }

.bk-wtb__status--err {
  color: var(--bk-red); }

.bk-wtb__done {
  background: var(--bk-black);
  padding: 44px;
  text-align: center; }

.bk-wtb__done-title {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--bk-yellow);
  margin-bottom: 10px; }

.bk-wtb__done-body {
  font-family: var(--bk-font-ui);
  font-size: 14px;
  color: var(--bk-text-light-2);
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto; }

/* --- Dealer cross-sell ------------------------------------------------ */
.bk-wtb__dealer {
  background: var(--bk-red);
  padding: 50px var(--bk-gutter); }

.bk-wtb__dealer-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center; }

.bk-wtb__dealer-title {
  color: var(--bk-bone);
  font-size: 24px;
  margin-bottom: 10px; }

.bk-wtb__dealer-body {
  font-family: var(--bk-font-ui);
  font-size: 14.5px;
  color: #f6d8da;
  margin: 0 0 20px; }

@media (max-width: 768px) {
  .bk-wtb__hero {
    padding: 64px 20px 40px; }
  .bk-wtb__title {
    font-size: 30px; }
  .bk-wtb {
    padding: 40px 20px; }
  .bk-wtb__form {
    grid-template-columns: 1fr;
    padding: 24px; }
  .bk-span2 {
    grid-column: span 1; }
  .bk-wtb__done {
    padding: 32px 24px; } }

/* ==========================================================================
   American Made
   ========================================================================== */
/* 100/60 padding: the drip crosses the heading but the nav stays fully
   visible. A negative-margin approach was tried and reverted. Locked. */
.bk-am2__hero {
  background: var(--bk-black);
  padding: 100px var(--bk-gutter) 60px; }

.bk-am2__hero-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center; }

.bk-am2__title {
  color: var(--bk-bone);
  margin: 14px 0 20px; }

.bk-am2__lede {
  color: var(--bk-text-light-2);
  margin: 0; }

/* --- Pillars ---------------------------------------------------------- */
.bk-pillars {
  padding: 70px var(--bk-gutter); }

.bk-pillars__title {
  color: var(--bk-black);
  font-size: 30px;
  text-align: center;
  margin-bottom: 16px; }

.bk-pillars__lede {
  font-size: 15.5px;
  color: var(--bk-text-dark);
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center; }

.bk-pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px; }

.bk-pillar {
  background: var(--bk-black);
  padding: 26px; }

.bk-pillar__title {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--bk-yellow);
  margin-bottom: 10px; }

.bk-pillar__body {
  font-family: var(--bk-font-ui);
  font-size: 13px;
  color: var(--bk-text-light-2);
  line-height: 1.55; }

/* --- Veteran strip ---------------------------------------------------- */
.bk-vet {
  background: var(--bk-yellow);
  padding: 50px var(--bk-gutter); }

.bk-vet__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-left: 0;
  padding-right: 0; }

.bk-vet__inner > img {
  height: 48px;
  width: auto; }

.bk-vet__copy {
  flex: 1;
  min-width: 260px; }

.bk-vet__title {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--bk-black); }

.bk-vet__body {
  font-family: var(--bk-font-ui);
  font-size: 13.5px;
  color: var(--bk-text-dark); }

/* On yellow, the outline button inverts to black-on-yellow. */
.bk-vet__cta:hover {
  background: var(--bk-black);
  color: var(--bk-yellow);
  border-color: var(--bk-black); }

/* --- Claim disclaimer ------------------------------------------------- */
.bk-claimnote {
  padding: 44px var(--bk-gutter); }

.bk-claimnote__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--bk-font-ui);
  font-size: 12.5px;
  color: var(--bk-text-light-5);
  line-height: 1.6; }

@media (max-width: 1024px) {
  .bk-pillars__grid {
    grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 768px) {
  .bk-am2__hero {
    padding: 64px 20px 40px; }
  .bk-pillars {
    padding: 48px 20px; }
  .bk-pillars__title {
    font-size: 24px; }
  .bk-pillars__grid {
    grid-template-columns: 1fr; }
  .bk-vet {
    padding: 36px 20px; }
  .bk-vet__cta {
    width: 100%;
    text-align: center; } }

/* ==========================================================================
   Ethos
   ========================================================================== */
/* 200px top: this heading clears the full drip rather than sitting under it. */
.bk-ethos__hero {
  background: var(--bk-black);
  padding: 200px var(--bk-gutter) 60px; }

.bk-ethos__hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  padding-left: 0;
  padding-right: 0; }

.bk-ethos__title {
  color: var(--bk-bone);
  font-size: 40px;
  line-height: 1.15;
  margin: 14px 0 18px; }

.bk-ethos__lede {
  font-size: 16px;
  color: var(--bk-text-light-2);
  max-width: 460px;
  margin: 0; }

.bk-ethos__badge {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  display: block; }

/* --- Principles ------------------------------------------------------- */
.bk-principles {
  padding: 70px var(--bk-gutter); }

.bk-principles__label {
  text-align: center;
  margin-bottom: 16px; }

.bk-principles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px; }

.bk-principle {
  border-left: 3px solid var(--bk-red);
  padding-left: 20px; }

.bk-principle__n {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.3px;
  color: var(--bk-red);
  margin-bottom: 8px; }

.bk-principle__title {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--bk-black);
  margin-bottom: 8px; }

.bk-principle__body {
  font-family: var(--bk-font-ui);
  font-size: 13px;
  color: var(--bk-text-dark-mute);
  line-height: 1.5; }

/* --- Manifesto split -------------------------------------------------- */
.bk-manifesto {
  display: grid;
  grid-template-columns: 1fr 1fr; }

.bk-manifesto__panel {
  background: var(--bk-red);
  padding: 70px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center; }

.bk-manifesto__title {
  color: var(--bk-bone);
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 16px; }

.bk-manifesto__body {
  font-family: var(--bk-font-body);
  font-size: 14.5px;
  color: #f6d8da;
  max-width: 420px;
  margin: 0;
  line-height: 1.55; }

.bk-manifesto > img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block; }

/* --- CTA strip -------------------------------------------------------- */
.bk-ethos__cta {
  background: var(--bk-black);
  padding: 60px var(--bk-gutter); }

.bk-ethos__cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-left: 0;
  padding-right: 0; }

.bk-ethos__cta-title {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--bk-bone); }

.bk-ethos__cta-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap; }

@media (max-width: 1024px) {
  .bk-ethos__hero {
    padding: 140px var(--bk-gutter) 48px; }
  .bk-ethos__hero-inner {
    grid-template-columns: 1fr;
    gap: 32px; }
  .bk-ethos__badge {
    max-width: 140px; }
  .bk-ethos__title {
    font-size: 30px; }
  .bk-principles__grid {
    grid-template-columns: repeat(2, 1fr); }
  .bk-manifesto {
    grid-template-columns: 1fr; }
  .bk-manifesto__panel {
    padding: 44px 32px; }
  .bk-manifesto > img {
    height: 320px; } }

@media (max-width: 768px) {
  .bk-ethos__hero {
    padding: 110px 20px 40px; }
  .bk-principles {
    padding: 48px 20px; }
  .bk-principles__grid {
    grid-template-columns: 1fr; }
  .bk-ethos__cta {
    padding: 40px 20px; }
  .bk-ethos__cta-btns .bk-btn {
    flex: 1 1 auto;
    text-align: center; } }

/* ==========================================================================
   Support
   ========================================================================== */
/* 190px top: heading clears the drip. */
.bk-sup__hero {
  background: var(--bk-black);
  padding: 190px var(--bk-gutter) 50px; }

.bk-sup__title {
  color: var(--bk-bone);
  font-size: 44px;
  margin: 14px 0 10px; }

.bk-sup__lede {
  font-size: 16px;
  color: var(--bk-text-light-2);
  margin: 0; }

/* --- Legacy order support -------------------------------------------- */
.bk-legacysup {
  padding: 60px var(--bk-gutter); }

.bk-legacysup__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  padding-left: 0;
  padding-right: 0; }

.bk-legacysup__heading {
  color: var(--bk-black);
  font-size: 24px;
  margin-bottom: 14px; }

.bk-legacysup__body {
  font-family: var(--bk-font-ui);
  font-size: 14.5px;
  color: var(--bk-text-dark-mute);
  line-height: 1.6;
  max-width: 440px;
  margin: 0 0 10px; }

.bk-legacysup__note {
  font-family: var(--bk-font-ui);
  font-size: 13px;
  color: var(--bk-text-light-5);
  margin: 0; }

.bk-legacysup__form {
  background: #ffffff;
  border: 1px solid #C9C3B7;
  padding: 26px;
  display: grid;
  gap: 14px; }

.bk-legacysup__form input,
.bk-legacysup__form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #C9C3B7;
  border-radius: 0;
  background: #fff;
  color: var(--bk-text-dark);
  font-family: var(--bk-font-ui);
  font-size: 13.5px; }

.bk-legacysup__form textarea {
  min-height: 80px;
  resize: vertical; }

.bk-legacysup__form input::placeholder,
.bk-legacysup__form textarea::placeholder {
  color: #8d8880; }

.bk-legacysup__form input:focus-visible,
.bk-legacysup__form textarea:focus-visible {
  outline: 2px solid var(--bk-red);
  outline-offset: 1px; }

.bk-legacysup__submit {
  background: var(--bk-red);
  color: var(--bk-bone);
  border: 0;
  border-radius: 0;
  padding: 14px;
  font-family: var(--bk-font-ui);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease; }

.bk-legacysup__submit:hover {
  background: var(--bk-red-hover); }

.bk-legacysup__submit:disabled {
  opacity: .6;
  cursor: default; }

.bk-legacysup__status {
  font-family: var(--bk-font-ui);
  font-size: 13px;
  margin: 0;
  line-height: 1.5; }

.bk-legacysup__status--ok {
  color: #1c7a3c; }

.bk-legacysup__status--err {
  color: var(--bk-red); }

.bk-legacysup__done {
  background: var(--bk-black);
  padding: 34px;
  text-align: center;
  align-self: start; }

.bk-legacysup__done-title {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--bk-yellow);
  margin-bottom: 8px; }

.bk-legacysup__done-body {
  font-family: var(--bk-font-ui);
  font-size: 13.5px;
  color: var(--bk-text-light-2);
  line-height: 1.55; }

/* --- Guarantee -------------------------------------------------------- */
.bk-guarantee {
  background: var(--bk-black);
  padding: 60px var(--bk-gutter); }

.bk-guarantee__title {
  color: var(--bk-bone);
  font-size: 28px;
  margin: 12px 0 30px; }

.bk-guarantee__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none; }

.bk-gstep {
  border: 1px solid var(--bk-border);
  padding: 20px; }

.bk-gstep__n {
  font-family: var(--bk-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.3px;
  color: var(--bk-red);
  margin-bottom: 8px; }

.bk-gstep__t {
  font-family: var(--bk-font-ui);
  font-size: 13px;
  color: var(--bk-bone);
  line-height: 1.5; }

.bk-guarantee__fine {
  font-family: var(--bk-font-ui);
  font-size: 12.5px;
  color: var(--bk-text-light-5);
  margin: 24px 0 0;
  line-height: 1.6;
  max-width: 900px; }

/* --- Contact strip ---------------------------------------------------- */
.bk-supcontact {
  background: var(--bk-yellow);
  padding: 44px var(--bk-gutter); }

.bk-supcontact__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-left: 0;
  padding-right: 0;
  font-family: var(--bk-font-ui); }

.bk-supcontact__left {
  font-size: 14px;
  color: var(--bk-black); }

.bk-supcontact__right {
  font-size: 13px;
  color: var(--bk-black); }

.bk-supcontact a {
  color: var(--bk-black);
  text-decoration: underline; }

.bk-supcontact a:hover {
  color: var(--bk-bone); }

@media (max-width: 1024px) {
  .bk-legacysup__inner {
    grid-template-columns: 1fr;
    gap: 32px; }
  .bk-guarantee__steps {
    grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 768px) {
  .bk-sup__hero {
    padding: 120px 20px 40px; }
  .bk-sup__title {
    font-size: 30px; }
  .bk-legacysup {
    padding: 40px 20px; }
  .bk-guarantee {
    padding: 44px 20px; }
  .bk-guarantee__steps {
    grid-template-columns: 1fr; }
  .bk-supcontact {
    padding: 32px 20px; } }

/* A single-page category renders no prev/next links; hide the shell. */
.bk-pager:empty {
  display: none; }

/* --- Drip layering ----------------------------------------------------
   The drip hangs from the header at z-index 6 and now extends 380px, far
   enough to pour into the first section of every page. Anything that must
   stay readable has to sit above it; anything the paint should run over
   (the hero packshot/video) stays below. Without the first rule the
   headline ends up underneath the paint. */
.bk-hero__inner > div:first-child,
.bk-lineup__hero .bk-wrap,
.bk-am2__hero .bk-wrap,
.bk-dhero .bk-wrap,
.bk-ethos__hero .bk-wrap,
.bk-sup__hero .bk-wrap,
.bk-wtb__hero .bk-wrap,
.bk-pdp .bk-wrap {
  position: relative;
  z-index: 30; }

/* The packshot is a JPEG flattened on black - above the drip it punches an
   opaque rectangle through the paint. Below it, the paint pours over the box
   and its black blends into the hero. */
.bk-hero__media {
  position: relative;
  z-index: 1; }