/* HEISENBERG HOME — direction A (bold). Skin-only, reversible.
   Loaded ONLY by Skins/Default/Views/Home/Index.cshtml (the home-page view override).
   Everything is scoped under #hba-home; all classes are prefixed hh- so nothing collides with bootstrap / custom.css.
   Light tokens are the defaults; dark tokens apply under html.hba-dark (the site's theme class, see hba-dark.css).
   The hero, the photo tiles, the lead tile and the gun-show band are dark in BOTH modes (photography sits on black);
   the finder, the product rows, the trust bar and the brand pills follow the theme.
   Revert: delete Skins/Default/Views/Home/Index.cshtml (this file then loads nowhere). */

#hba-home {
	--hh-bg: #fff;
	--hh-panel: #fff;
	--hh-panel2: #f1f1f2;
	--hh-line: #dadadd;
	--hh-line2: #c8c8cc;
	--hh-text: #161616;
	--hh-head: #0f0f0f;
	--hh-muted: #6b6b72;
	--hh-red: #bc241f;
	--hh-red2: #d92c26;
	--hh-well: #fff;
	--hh-shadow: 0 18px 40px rgba(0, 0, 0, .14);
	--hh-fd: "Tektur", "Inter", system-ui, sans-serif;
	--hh-fb: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-family: var(--hh-fb);
	font-size: 15px;
	line-height: 1.5;
	color: var(--hh-text);
	-webkit-font-smoothing: antialiased;
	margin: -32px 0 8px;   /* main has 32px padding-top; the hero should touch the nav */
}
html.hba-dark #hba-home {
	--hh-bg: #111;
	--hh-panel: #1c1c1e;
	--hh-panel2: #232326;
	--hh-line: #333;
	--hh-line2: #444;
	--hh-text: #e8e8e8;
	--hh-head: #f5f5f5;
	--hh-muted: #a0a0a0;
	--hh-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
body:has(#hba-home) { overflow-x: hidden; }

#hba-home *, #hba-home *::before, #hba-home *::after { box-sizing: border-box; }
#hba-home a { color: inherit; text-decoration: none; }
#hba-home a:hover, #hba-home a:focus { text-decoration: none; }
#hba-home img { display: block; max-width: 100%; border: 0; }
#hba-home svg { display: block; }
#hba-home .hh-wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
#hba-home .hh-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
#hba-home .hh-eyebrow { font-family: var(--hh-fd); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; font-size: 12px; color: var(--hh-red2); }
#hba-home h2.hh-sec { font-family: var(--hh-fd); font-weight: 800; font-size: 34px; letter-spacing: .01em; text-transform: uppercase; margin: 0; color: var(--hh-head); line-height: 1.05; padding: 0; border: 0; }
#hba-home .hh-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
#hba-home .hh-sec-head p { margin: 6px 0 0; color: var(--hh-muted); max-width: 560px; font-size: 15px; }

/* ---------- buttons / pills ---------- */
#hba-home .hh-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--hh-fd); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; line-height: 1.2; padding: 14px 22px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; white-space: nowrap; }
#hba-home .hh-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
#hba-home .hh-btn-red { background: var(--hh-red); color: #fff; border-color: var(--hh-red); }
#hba-home .hh-btn-red:hover, #hba-home .hh-btn-red:focus { background: var(--hh-red2); border-color: var(--hh-red2); color: #fff; }
#hba-home .hh-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
#hba-home .hh-btn-ghost:hover, #hba-home .hh-btn-ghost:focus { border-color: #fff; color: #fff; }
#hba-home .hh-btn-line { background: transparent; color: var(--hh-text); border-color: var(--hh-line2); }
#hba-home .hh-btn-line:hover, #hba-home .hh-btn-line:focus, #hba-home a:hover .hh-btn-line { border-color: var(--hh-red); color: var(--hh-red2); }
#hba-home .hh-btn-sm { padding: 9px 14px; font-size: 12px; }

/* ---------- hero ---------- */
#hba-home .hh-hero { position: relative; height: 579px; overflow: hidden; background: #000; color: #fff; }
#hba-home .hh-hero-bg { position: absolute; inset: 0; background: url(/images/hba_home/hero_cartridges.jpg?v=2) center 40% / cover no-repeat; animation: hh-kb 22s ease-in-out infinite alternate; transform-origin: 60% 50%; }
@keyframes hh-kb { from { transform: scale(1.02); } to { transform: scale(1.12); } }
#hba-home .hh-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 38%, rgba(0, 0, 0, .15) 70%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, var(--hh-bg) 100%); }
#hba-home .hh-hero .hh-wrap { position: relative; height: 100%; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; }
#hba-home .hh-hero .hh-eyebrow { color: var(--hh-red2); }
#hba-home .hh-hero h1 { font-family: var(--hh-fd); font-weight: 900; font-size: 86px; line-height: .94; letter-spacing: -.01em; text-transform: uppercase; margin: 14px 0 20px; color: #fff; }
#hba-home .hh-hero h1 em { font-style: normal; color: var(--hh-red2); }
#hba-home .hh-hero p { font-size: 18px; line-height: 1.55; color: #d9d9d9; max-width: 520px; margin: 0 0 30px; }
#hba-home .hh-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- finder ---------- */
#hba-home .hh-finder { position: relative; z-index: 2; margin-top: -46px; }
#hba-home .hh-finder-box { background: var(--hh-panel); border: 1px solid var(--hh-line); border-left: 5px solid var(--hh-red); border-radius: 8px; box-shadow: var(--hh-shadow); padding: 20px 24px; display: grid; grid-template-columns: auto 1fr 1fr 1fr auto; gap: 14px; align-items: center; }
#hba-home .hh-finder-lbl { font-family: var(--hh-fd); font-weight: 800; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; text-align: center; padding-right: 18px; border-right: 1px solid var(--hh-line); color: var(--hh-head); }
#hba-home .hh-finder-lbl small { display: block; font-family: var(--hh-fb); font-weight: 400; font-size: 12px; color: var(--hh-muted); letter-spacing: 0; text-transform: none; margin-top: 3px; }
#hba-home .hh-finder label { display: block; font-family: var(--hh-fd) !important; font-weight: 600 !important; font-size: 11px; letter-spacing: .14em !important; text-transform: uppercase; color: var(--hh-muted); margin: 0 0 6px; }
#hba-home .hh-finder select { width: 100%; height: 46px; border-radius: 4px; border: 1px solid var(--hh-line2); background-color: var(--hh-bg); color: var(--hh-text); padding: 0 12px; font-family: var(--hh-fb); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; box-shadow: none; }
#hba-home .hh-finder select:focus { outline: none; border-color: var(--hh-red); }
#hba-home .hh-finder .hh-btn { height: 46px; margin-top: 20px; }

/* ---------- category grid ---------- */
#hba-home .hh-grid-sec { padding: 64px 0 24px; }
#hba-home .hh-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (min-width: 1101px) { #hba-home .hh-tiles:not(.hh-wide) .hh-tile:last-child:nth-child(4n+3) { grid-column: span 2; aspect-ratio: 2.86 / 1; } } /* desktop only: odd tile count -> last tile fills the row */
#hba-home .hh-tiles.hh-wide { grid-template-columns: 1fr 1fr; margin-top: 16px; }
#hba-home .hh-tile { position: relative; border-radius: 8px; overflow: hidden; background: #000; aspect-ratio: 3 / 2.15; display: block; isolation: isolate; color: #fff; }
#hba-home .hh-tiles.hh-wide .hh-tile { aspect-ratio: 2.35 / 1; }
#hba-home .hh-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; filter: saturate(.95); }
#hba-home .hh-tile:hover img { transform: scale(1.06); }
#hba-home .hh-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .78) 100%); }
#hba-home .hh-tile .hh-t { position: absolute; left: 22px; right: 80px; bottom: 18px; z-index: 2; color: #fff; }
#hba-home .hh-tile .hh-t b { display: block; font-family: var(--hh-fd); font-weight: 800; font-size: 30px; letter-spacing: .02em; text-transform: uppercase; line-height: 1; color: #fff; }
#hba-home .hh-tile .hh-t b::after { content: ""; display: block; width: 44px; height: 4px; background: var(--hh-red); margin-top: 10px; border-radius: 2px; transition: width .3s; }
#hba-home .hh-tile:hover .hh-t b::after { width: 88px; }
#hba-home .hh-tile .hh-t span { display: block; font-size: 13px; color: #d6d6d6; margin-top: 8px; }
#hba-home .hh-tile .hh-arrow { position: absolute; right: 18px; bottom: 18px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); display: grid; place-items: center; color: #fff; }
#hba-home .hh-tile .hh-arrow svg { width: 16px; height: 16px; }

/* ---------- product rows ---------- */
#hba-home .hh-car-sec { padding: 56px 0 8px; }
#hba-home .hh-car { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
#hba-home .hh-car.hh-lead { grid-template-columns: 1.55fr repeat(4, 1fr); }
/* 2026-10-02 FN builder: row 1 "Just landed" (27 cards) = one horizontal strip on desktop/tablet, 6 visible, arrows scroll it (hba-home.js scrollBy +-300). Phone (<=820) keeps its flex scroller. Revert: delete these 3 lines + the tablet line below. */
#hba-home #hh-row1 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 70px)/6); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-top: 4px; margin-top: -4px; }   /* 4 px room for the .hh-card:hover lift (overflow clips it); margin cancels the shift */
#hba-home #hh-row1 > * { scroll-snap-align: start; }
#hba-home #hh-row1::-webkit-scrollbar { display: none; }
#hba-home .hh-card { background: var(--hh-panel); border: 1px solid var(--hh-line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform .2s, border-color .2s; color: var(--hh-text); }
#hba-home .hh-card:hover, #hba-home .hh-card:focus { transform: translateY(-4px); border-color: var(--hh-line2); color: var(--hh-text); }
#hba-home .hh-media { position: relative; aspect-ratio: 1 / 1; background: var(--hh-well); overflow: hidden; }
#hba-home .hh-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#hba-home .hh-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
#hba-home .hh-brand { font-family: var(--hh-fd); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--hh-muted); }
#hba-home .hh-name { font-weight: 600; font-size: 13.5px; line-height: 1.3; color: var(--hh-head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 35px; }
#hba-home .hh-cta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }
#hba-home .hh-cta .hh-btn { padding: 8px 12px; font-size: 11.5px; }
/* 2026-10-01 FN-Cody — Cody picked option D off the mockup: the caliber chip was muted grey text and
   read as a stray label. Now a red outline chip, so it reads as a tag and echoes the shape of the
   "See price" button beside it. Deliberately NOT solid red (mockup option E): red is the CTA colour
   here and this chip repeats on every card, which would fight the Shop/Add buttons across a full grid.
   Uses --hh-red/--hh-red2, so it follows day/night mode on its own. Revert: restore the one-line rule
   { font-family: var(--hh-fd); font-size: 11px; letter-spacing: .06em; color: var(--hh-muted); } */
#hba-home .hh-cal {
	font-family: var(--hh-fd); font-size: 11px; font-weight: 700; letter-spacing: .08em;
	color: var(--hh-red2); border: 1.5px solid var(--hh-red); border-radius: 3px;
	padding: 4px 8px; white-space: nowrap;
}
#hba-home .hh-leadtile { position: relative; border-radius: 8px; overflow: hidden; min-height: 100%; background: #000; color: #fff; display: flex; align-items: flex-end; isolation: isolate; }
#hba-home .hh-leadtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#hba-home .hh-leadtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .85)); }
#hba-home .hh-leadtile .hh-t { position: relative; z-index: 2; padding: 24px; }
#hba-home .hh-leadtile .hh-t b { display: block; font-family: var(--hh-fd); font-weight: 800; font-size: 28px; line-height: 1.02; text-transform: uppercase; margin: 8px 0 10px; color: #fff; }
#hba-home .hh-leadtile .hh-t p { margin: 0 0 16px; color: #d8d8d8; font-size: 13.5px; }
#hba-home .hh-arrows { display: flex; gap: 8px; }
#hba-home .hh-arrows button { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--hh-line2); background: var(--hh-panel); color: var(--hh-text); display: grid; place-items: center; cursor: pointer; }
#hba-home .hh-arrows button:hover { border-color: var(--hh-red); color: var(--hh-red2); background: var(--hh-panel); }
#hba-home .hh-arrows svg { width: 16px; height: 16px; }

/* ---------- trust bar ---------- */
#hba-home .hh-trust { margin: 56px 0 0; border-top: 1px solid var(--hh-line); border-bottom: 1px solid var(--hh-line); background: var(--hh-panel2); }
#hba-home .hh-trust .hh-wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
#hba-home .hh-trust .hh-it { display: flex; align-items: center; gap: 14px; padding: 22px 18px; border-right: 1px solid var(--hh-line); color: var(--hh-text); }
#hba-home .hh-trust .hh-it:last-child { border-right: 0; }
#hba-home .hh-trust .hh-ic { width: 42px; height: 42px; border-radius: 8px; background: rgba(188, 36, 31, .14); color: var(--hh-red2); display: grid; place-items: center; flex: 0 0 auto; }
#hba-home .hh-trust .hh-ic svg { width: 22px; height: 22px; }
#hba-home .hh-trust b { display: block; font-family: var(--hh-fd); font-weight: 800; font-size: 22px; line-height: 1; color: var(--hh-head); }
#hba-home .hh-trust span { font-size: 12.5px; color: var(--hh-muted); }

/* ---------- gun show band ---------- */
#hba-home .hh-show { margin: 64px 0 0; position: relative; overflow: hidden; background: #000; color: #fff; border-radius: 8px; }
#hba-home .hh-show > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
#hba-home .hh-show .hh-in { position: relative; padding: 54px 48px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: center; background: linear-gradient(90deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .35)); }
#hba-home .hh-show h3 { font-family: var(--hh-fd); font-weight: 900; font-size: 44px; line-height: .98; text-transform: uppercase; margin: 10px 0 12px; color: #fff; }
#hba-home .hh-show p { margin: 0; color: #d5d5d5; max-width: 540px; font-size: 16px; }
#hba-home .hh-show .hh-r { justify-self: end; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
#hba-home .hh-states { display: flex; gap: 8px; }
#hba-home .hh-states i { font-style: normal; font-family: var(--hh-fd); font-weight: 700; font-size: 13px; letter-spacing: .1em; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 4px; }

/* ---------- brands ---------- */
/* Contact form on the home page, in place of the brand pill band
   (Cody, 2026-09-10 17:23-17:25). The .hh-brands rules below are kept because the band may
   come back; they cost nothing while no .hh-brands section is rendered.
   Fields are labels wrapping their own input, so the whole label is a hit target and no
   for/id pairing can drift. Two columns on desktop, one on phones, message always full width. */
#hba-home .hh-contact { padding: 56px 0 24px; }
/* the phone number Cody put in the standfirst (2026-09-11 09:01) — make it read as a
   link rather than plain muted text, and keep it tappable on a phone */
#hba-home .hh-contact .hh-sec-head p a { color: var(--hh-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
#hba-home .hh-contact .hh-sec-head p a:hover, #hba-home .hh-contact .hh-sec-head p a:focus { color: var(--hh-red2); }
/* Cody, 2026-09-11 09:04: break after the phone number so 'Mon' starts the second line.
   Suppressed on narrow screens — there the first half already wraps, and a forced break
   on top of that leaves a stranded third line. */
#hba-home .hh-contact .hh-sec-head p .hh-cbr { display: inline; }
@media (max-width: 700px) { #hba-home .hh-contact .hh-sec-head p .hh-cbr { display: none; } }
#hba-home .hh-cform { max-width: 720px; }
#hba-home .hh-creq { font-family: var(--hh-fd); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin: 0 0 14px; }
#hba-home .hh-creq span { color: #e0342d; }
/* quick-contact row: Call / Text / Telegram pills under the contact standfirst (FN-Gabe 2026-10-20, Gabe TG 16:08).
   Reuses .hh-btn-line / .hh-btn-red / .hh-btn-sm; only the pill radius + row layout are new.
   Revert: delete this block + the .hh-qc div in Index.cshtml, css token ?v=35 -> ?v=34. */
#hba-home .hh-qc { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 24px; max-width: 720px; }
#hba-home .hh-qc .hh-btn { border-radius: 999px; gap: 8px; }
#hba-home .hh-qc .hh-btn svg { width: 15px; height: 15px; }
@media (max-width: 700px) { #hba-home .hh-qc { gap: 8px; } #hba-home .hh-qc .hh-btn { flex: 1 1 auto; justify-content: center; } }
#hba-home .hh-cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#hba-home .hh-cf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#hba-home .hh-cf-wide { grid-column: 1 / -1; }
#hba-home .hh-cf > span { font-family: var(--hh-fd); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hh-muted); }
#hba-home .hh-cf > span b { color: #e0342d; font-weight: 700; }
#hba-home .hh-cf input, #hba-home .hh-cf textarea { width: 100%; font-family: var(--hh-fb); font-size: 14px; color: var(--hh-text); background: var(--hh-bg); border: 1px solid var(--hh-line2); border-radius: 4px; padding: 0 12px; height: 46px; }
#hba-home .hh-cf textarea { height: auto; min-height: 112px; padding: 12px; resize: vertical; line-height: 1.5; }
#hba-home .hh-cf input:focus, #hba-home .hh-cf textarea:focus { outline: none; border-color: var(--hh-red); }
#hba-home .hh-cform .hh-btn { margin-top: 18px; }

#hba-home .hh-brands { padding: 56px 0 20px; }
#hba-home .hh-brands .hh-row { display: flex; flex-wrap: wrap; gap: 10px; }
#hba-home .hh-brands .hh-row a { font-family: var(--hh-fd); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 12px 18px; border: 1px solid var(--hh-line); border-radius: 999px; background: var(--hh-panel); color: var(--hh-text); transition: border-color .18s, color .18s; }
#hba-home .hh-brands .hh-row a:hover, #hba-home .hh-brands .hh-row a:focus { border-color: var(--hh-red); color: var(--hh-red2); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	#hba-home .hh-hero-bg { animation: none; }
	#hba-home .hh-tile img, #hba-home .hh-card { transition: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 820px) {
	#hba-home .hh-wrap { padding: 0 16px; }
	#hba-home .hh-hero { height: auto; min-height: 560px; }
	#hba-home .hh-hero-bg { background-image: url(/images/hba_home/hero_ak_portrait.jpg); background-position: center 30%; }
	#hba-home .hh-hero .hh-wrap { grid-template-columns: 1fr; padding: 56px 20px 96px; align-content: end; gap: 28px; }
	#hba-home .hh-hero h1 { font-size: 52px; }
	#hba-home .hh-hero p { font-size: 15.5px; }
	#hba-home .hh-finder { margin-top: -30px; }
	#hba-home .hh-finder-box { grid-template-columns: 1fr; padding: 18px; }
	#hba-home .hh-finder-lbl { border-right: 0; border-bottom: 1px solid var(--hh-line); padding: 0 0 12px; font-size: 21px; }
	#hba-home .hh-finder .hh-btn { margin-top: 4px; width: 100%; justify-content: center; }
	#hba-home .hh-cgrid { grid-template-columns: 1fr; }
	#hba-home .hh-contact { padding: 40px 0 20px; }
	#hba-home .hh-grid-sec { padding: 44px 0 8px; }
	#hba-home h2.hh-sec { font-size: 28px; }
	#hba-home .hh-tiles, #hba-home .hh-tiles.hh-wide { grid-template-columns: 1fr; gap: 12px; }
	#hba-home .hh-tile, #hba-home .hh-tiles.hh-wide .hh-tile { aspect-ratio: 16 / 9; }
	#hba-home .hh-car, #hba-home .hh-car.hh-lead { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; gap: 12px; padding-bottom: 8px; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
	#hba-home .hh-car > * { flex: 0 0 68%; scroll-snap-align: start; }
	#hba-home .hh-car.hh-lead > .hh-leadtile { flex-basis: 84%; min-height: 300px; }
	#hba-home .hh-sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
	#hba-home .hh-arrows { display: none; }
	#hba-home .hh-trust .hh-wrap { grid-template-columns: 1fr 1fr; padding: 0; }
	#hba-home .hh-trust .hh-it { border-bottom: 1px solid var(--hh-line); padding: 16px 12px; }
	#hba-home .hh-trust .hh-it:nth-child(even) { border-right: 0; }
	#hba-home .hh-trust b { font-size: 18px; }
	#hba-home .hh-show .hh-in { grid-template-columns: 1fr; padding: 36px 22px; }
	#hba-home .hh-show h3 { font-size: 34px; }
	#hba-home .hh-show .hh-r { justify-self: start; align-items: flex-start; }
	#hba-home .hh-states { flex-wrap: wrap; }
}
@media (max-width: 1100px) and (min-width: 821px) {
	#hba-home .hh-hero h1 { font-size: 64px; }
	#hba-home .hh-car { grid-template-columns: repeat(3, 1fr); }
	#hba-home .hh-car.hh-lead { grid-template-columns: 1.4fr repeat(2, 1fr); }
	#hba-home #hh-row1 { grid-auto-columns: calc((100% - 28px)/3); }   /* 2026-10-02: row-1 strip, 3 visible on tablet */
	#hba-home .hh-car.hh-lead .hh-card:nth-child(n+4) { display: none; }
	#hba-home .hh-tiles { grid-template-columns: repeat(2, 1fr); }
	#hba-home .hh-tiles:not(.hh-wide) .hh-tile:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 2.35 / 1; }
}

/* v10 (2026-09-09, Gabe 'let's try A'): Night Shift reel loops in the hero's right column; the whole tile links to Instagram */
#hba-home .hh-reel { position: relative; display: block; justify-self: end; align-self: start; width: 300px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); text-decoration: none; color: #fff; }
#hba-home .hh-reel-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#hba-home .hh-reel-top { position: absolute; top: 12px; left: 14px; font-family: var(--hh-fd); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
#hba-home .hh-reel-chip { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 9px; padding: 14px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .85)); font-family: var(--hh-fd); font-weight: 800; font-size: 15px; letter-spacing: .02em; color: #fff; }
#hba-home .hh-reel-chip svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; }
#hba-home .hh-reel:hover .hh-reel-chip { background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(210, 35, 35, .9)); }
@media (max-width: 820px) { #hba-home .hh-reel { display: none; } }

/* 2026-09-10 13:10 FN-Gabe: the /contactus mail path fails (535, Entra); the form told
   customers 'sent' while nothing was delivered, so the whole section was hidden.
   2026-09-11 FN-Cody, at Cody's ask ("customers need to be able to reach out to us"): the
   SECTION is back, but only the FORM stays hidden. Hiding the section removed every route to
   us from the home page, which is the opposite of what Cody wants; hiding just the form keeps
   the broken channel shut while the phone - which works today - is front and centre.
   2026-09-11 00:28 Cody, after I explained the mail failure in full: "I need it to look
   exactly like this. The way it used to." So the FORM IS VISIBLE AGAIN on his explicit
   instruction, with the phone panel kept directly beneath it as a route that works.
   HIS DECISION, AND IT IS HIS TO MAKE - but the consequence is on the record here and in
   Telegram: until the mailer is fixed, /contactus tells the customer "your email has sent"
   and delivers nothing. To shut the form again, restore this one rule and bump ?v=:
   #hba-home .hh-contact .hh-cform { display: none !important; } */

/* 2026-09-21 FN-Gabe: STORE MAIL WORKS - the "mail is being connected" notice under the Send
   Message button and its three rules are gone; the form POSTs to /contactus for real. (?v=28) */
#hba-home .hh-chold { margin: 10px 0 0; font-family: var(--hh-fb); font-size: 13px; line-height: 1.6; color: var(--hh-muted); max-width: 46ch; }
#hba-home .hh-chold a { color: var(--hh-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
#hba-home .hh-chold a:hover, #hba-home .hh-chold a:focus { color: var(--hh-red2); }

/* .hh-ccall: the phone panel Cody had me remove on 2026-09-11 00:35 ("We have that info
   at the bottom of the page" — correct, the footer carries address, phone and hours).
   Rules kept because the panel may come back; they cost nothing with no such element. */
#hba-home .hh-ccall { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; padding: 22px 24px; border: 1px solid var(--hh-line); border-left: 5px solid var(--hh-red); border-radius: 8px; background: var(--hh-panel); max-width: 720px; }
#hba-home .hh-ccall-num { font-family: var(--hh-fd); font-weight: 800; font-size: 34px; letter-spacing: .02em; color: var(--hh-head); white-space: nowrap; }
#hba-home .hh-ccall-num:hover, #hba-home .hh-ccall-num:focus { color: var(--hh-red2); }
#hba-home .hh-ccall-meta { font-family: var(--hh-fb); font-size: 13.5px; line-height: 1.75; color: var(--hh-muted); min-width: 0; }
#hba-home .hh-ccall-meta b { color: var(--hh-text); font-weight: 600; }
#hba-home .hh-ccall-meta a { color: var(--hh-muted); text-decoration: underline; text-underline-offset: 2px; }
#hba-home .hh-ccall-meta a:hover, #hba-home .hh-ccall-meta a:focus { color: var(--hh-red2); }
@media (max-width: 700px) {
	#hba-home .hh-ccall { gap: 8px 0; padding: 18px; }
	#hba-home .hh-ccall-num { font-size: 30px; }
}

/* ---------- brass club band (FN-Cody 2026-10-06; Cody approved 00:39Z) ----------
   Sits between "Just landed" and "Range day picks". Dark in BOTH modes on purpose: the gold card
   needs a dark ground, and it separates the membership pitch from the white product rows either side.
   Revert: delete this block, delete <section class="hh-club-sec"> from Index.cshtml, css ?v=32 -> 31. */
#hba-home .hh-club-sec { background: #0d0d0e; padding: 54px 0; margin: 40px 0 0; }
#hba-home .hh-club { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 44px; align-items: center; }
#hba-home .hh-club-art img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
/* 2026-10-06 17:57 Cody: "Membership" moved from the eyebrow to a kicker UNDER the h2 - big and bold,
   but deliberately smaller than the ships-free line. Revert: restore the .hh-eyebrow rule here and drop .hh-club-kicker. */
#hba-home .hh-club-copy .hh-club-kicker { font-family: var(--hh-fd); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; font-size: clamp(22px, 3.2vw, 34px); color: #e3b23c; margin: 4px 0 0; }
#hba-home .hh-club-copy h2.hh-sec { color: #fff; margin: 0; }
/* 2026-10-06 17:52 Cody: "short and simple ... dont let the customer know what shipping costs ... i want the ship free part to be big and bold. make it all sound exciting."
   Replaces the old paragraph + .hh-club-pay break-even line. Revert: restore the two rules below this comment. */
#hba-home .hh-club-copy .hh-club-big { font-family: var(--hh-fd); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; font-size: clamp(30px, 5.2vw, 56px); color: #fff; margin: 18px 0 0; }
#hba-home .hh-club-copy .hh-club-big span { display: block; color: #e3b23c; }
#hba-home .hh-club-copy .hh-club-sub { font-family: var(--hh-fd); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 15px; color: #c9c9cf; margin: 16px 0 0; }
#hba-home .hh-club-copy .hh-btn { margin-top: 22px; }
@media (max-width: 820px) {
	#hba-home .hh-club { grid-template-columns: 1fr; gap: 26px; }
	#hba-home .hh-club-art { max-width: 300px; margin: 0 auto; }
	#hba-home .hh-club-copy { text-align: center; }
	#hba-home .hh-club-copy p { margin-left: auto; margin-right: auto; }
}