/* ============ Krazy Kester's Fireworks - shared stylesheet ============
   Bright patriotic "signage" world (committed single theme). Squared edges:
   border-radius is 0 across the board for a bold, poster-like retail feel. */

/* Self-hosted condensed display face. Replaces the old system-font stack
   (Haettenschweiler et al.) that only existed on Windows and rendered
   inconsistently/illegibly everywhere else. Anton is the closest legible,
   cross-platform match to that bold poster look. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/anton-latin.woff2") format("woff2");
}

:root {
  --red:    #e11d2a;
  --red-dk: #b4141f;
  --navy:   #0b2a6b;
  --navy-dk:#07204f;
  --blue:   #1d74d0;
  --yellow: #ffce00;
  --yellow-dk:#e6b000;
  --cream:  #fff7ec;
  --paper:  #ffffff;
  --ink:    #16130f;
  --muted:  #6a6257;
  --line:   #e7ddcb;

  --shadow: 0 10px 30px rgba(11,42,107,.14);
  --shadow-sm: 0 4px 14px rgba(11,42,107,.12);
  /* Depth for display headings on dark/photo skins: a hard 3px offset gives the
     painted-sign edge, the soft 20px pass grounds the glyphs so they stop
     floating on the striped fields. Dark skins only - on yellow it reads dirty. */
  --head-depth: 0 3px 0 rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.30);
  /* Shared scrim for the per-page photo bands - keeps the copy legible over any
     of them, and means a tweak lands on all eight at once. */
  --pb-scrim: linear-gradient(90deg, rgba(4,14,38,.93) 0%, rgba(7,29,74,.66) 52%, rgba(7,29,74,.22) 100%);
  --maxw: 1200px;
  --navh: 84px;

  --display: "Anton", "Haettenschweiler", "Arial Narrow", "Impact", "Franklin Gothic Bold", sans-serif;
  --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }

/* Visually-hidden (screen-reader only) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Keyboard skip-to-content link (visually hidden until focused) */
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 300;
  background: var(--navy); color: #fff; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; font-size: 14px; padding: 12px 18px;
  box-shadow: var(--shadow); transition: top .16s ease; }
.skip-link:focus { top: 12px; outline: 3px solid var(--yellow); outline-offset: 2px; }

.display {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  letter-spacing: .02em; line-height: .92; text-wrap: balance;
}

/* Heavy all-caps display words need a little tracking to stay legible, and the
   loose inherited body line-height (1.55) looks awkward on stacked headings -
   tighten it to a poster-like rhythm. */
.marquee-title, .pagehero h1, .sec-head h2, .kdeal h2, .photoband h2,
.story .txt h2, .visit .info h2, .signup h2, .safety-card h2, .safety b {
  letter-spacing: .02em; line-height: 1.05;
}
.card h3, .why .w h3, .brand .word .n, .burst, .vmodal-title, .map-fallback b { letter-spacing: .015em; }

/* Utility bar */
.util { background: var(--navy); color: #fff; font-size: 13px; font-weight: 600; }
.util .wrap { display: flex; gap: 8px 22px; align-items: center; justify-content: center;
  min-height: 38px; flex-wrap: wrap; text-align: center; padding-block: 10px; }
.util b { color: var(--yellow); letter-spacing: .02em; }
.util a:hover { color: var(--yellow); }

/* Countdown marquee */
.marquee {
  background: var(--red);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 22px, transparent 22px 44px);
  color: #fff; border-top: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow);
}
.marquee .wrap { display: flex; align-items: center; justify-content: center; gap: 10px 18px;
  min-height: 62px; flex-wrap: wrap; text-align: center; padding-block: 12px; }
.marquee-title { font-family: var(--display); text-transform: uppercase;
  font-size: clamp(20px, 3.4vw, 30px); letter-spacing: .02em; }
.marquee-title span { color: var(--yellow); }
.clock { display: flex; gap: 8px; font-variant-numeric: tabular-nums; }
.clock .unit { background: rgba(0,0,0,.28); border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 0; padding: 5px 9px; min-width: 58px; text-align: center; }
.clock .num { font-family: var(--display); font-size: 26px; line-height: 1; }
.clock .lab { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }

/* Header */
/* Transparent nav overlaid on the hero (no white bar). The header sits in flow
   after the top bars, then pulls the hero up under it with a negative margin so
   the nav rides on the hero image. A soft top-scrim keeps the links legible. */
header.site { position: relative; z-index: 50; background: transparent;
  margin-bottom: calc(-1 * var(--navh)); }
header.site::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,8,24,.55) 0%, rgba(3,8,24,.16) 62%, transparent 100%); }
/* Centered nav: logo (when present) left, nav dead-center, toggle right */
header.site .wrap { position: relative; z-index: 2; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: var(--navh); }
header.site .wrap > .brand { grid-column: 1; justify-self: start; }
header.site .wrap > nav.main { grid-column: 2; justify-self: center; }
header.site .wrap > .navtoggle { grid-column: 3; justify-self: end; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark { width: 62px; height: 41px; flex: none; object-fit: contain; }
/* Brand logo lockup (actual Krazy Kester's flag mark) */
.brand .mark.mark-logo { width: auto; height: 64px; }
.mascot-inline { float: right; width: 180px; height: auto; margin: 4px 0 12px 22px; }
.brand .word { font-family: var(--display); text-transform: uppercase; line-height: .82; }
.brand .word .k { display: block; font-size: 15px; color: var(--red); letter-spacing: .06em; }
.brand .word .n { display: block; font-size: 30px; color: var(--navy); letter-spacing: .005em; }
.brand .word .n em { font-style: normal; color: var(--red); }

nav.main { display: flex; gap: 32px; align-items: center; }
nav.main a { font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.55); padding: 6px 0; position: relative; }
nav.main a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 3px;
  background: var(--red); transition: right .22s ease; }
nav.main a:hover::after, nav.main a:focus-visible::after, nav.main a.active::after { right: 0; }
nav.main a.active { color: var(--yellow); }
/* Logo, phone CTA and the hours/address block — only shown inside the mobile
   overlay menu, where they are the things people open the menu looking for. */
.nav-logo, .nav-cta, .nav-meta { display: none; }
/* Lock background scroll while the mobile overlay menu is open */
body.nav-open { overflow: hidden; }

.btn { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  border: none; border-radius: 0; font-size: 14px; line-height: 1;
  padding: 13px 22px; font-family: var(--sans);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.btn:active { transform: translateY(1px); }
.btn-cta { background: var(--yellow); color: var(--navy); box-shadow: 0 4px 0 var(--yellow-dk); }
.btn-cta:hover { background: #ffd726; box-shadow: 0 6px 0 var(--yellow-dk); transform: translateY(-1px); }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 4px 0 var(--red-dk); }
.btn-red:hover { background: #f22633; box-shadow: 0 6px 0 var(--red-dk); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.65); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn-lg { font-size: 16px; padding: 16px 28px; }
.ic-inline { width: 1.05em; height: 1.05em; vertical-align: -.16em; flex: none; }

.navtoggle { display: none; position: relative; z-index: 90; background: transparent; color: #fff;
  border: none; border-radius: 0; width: 46px; height: 42px; cursor: pointer; }
.navtoggle span, .navtoggle span::before, .navtoggle span::after {
  content: ""; display: block; width: 22px; height: 2.5px; background: #fff; margin: 0 auto;
  position: relative; transition: .2s; }
.navtoggle span::before { position: absolute; top: -7px; }
.navtoggle span::after { position: absolute; top: 7px; }
/* Animate the three bars into an X when the menu is open (driven by aria-expanded) */
.navtoggle[aria-expanded="true"] span { background: transparent; }
.navtoggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.navtoggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Home hero (over store photo) */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(29,116,208,.5), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(225,29,42,.4), transparent 55%),
    linear-gradient(180deg, #0b2a6b 0%, #071d4a 100%); }
.hero.home { background: #0a0e18; }
.hero.home::before { display: none; }
.hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* image layer — fills the hero (cover) and crops to the frame. Centered so the
   building (which spans the full width and sits vertically centered) is never
   cropped out. Daytime photo: no brightness boost, just a touch of pop.

   This is a real <img> rather than a CSS background so it can carry
   fetchpriority="high" and srcset. As a background it was invisible to the
   preload scanner — the browser only discovered it after parsing this
   stylesheet, which put the hero at the back of the download queue and made it
   the LCP element at 6.6s on throttled mobile. */
.hero-photo__img { position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(1.08) contrast(1.03); }
/* text-legibility scrim (not filtered): the hero content is centered, so a
   center vignette darkens the middle band where the logo, headline and info
   sit, with top + bottom fades for the nav and foreground. */
.hero-photo::after { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(135% 110% at 50% 44%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.32) 40%, rgba(0,0,0,.08) 72%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 32%, rgba(0,0,0,0) 52%),
    linear-gradient(0deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 28%); }
#fw { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: .9; }
.hero .wrap { position: relative; z-index: 2;
  padding-top: calc(var(--navh) + clamp(28px, 5vw, 54px));
  padding-bottom: clamp(64px, 9vw, 120px); }
.hero-inner { max-width: 820px; margin-inline: auto; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px;
  background: var(--red); color: #fff; font-weight: 900; text-transform: uppercase;
  letter-spacing: .12em; font-size: 12px; padding: 7px 14px; border-radius: 0; box-shadow: var(--shadow-sm); }
/* Brand logo as the hero topper (replaces the old eyebrow).
   The vw term is sized off the phone range, not the desktop one. At 12.5vw the
   middle term only overtook the 92px floor past 736px, so every phone rendered
   an identical 92px logo adrift in the sky - 360px and 390px viewports measured
   pixel-for-pixel the same. 30vw starts scaling immediately and still lands on
   the same 150px cap from ~500px up, so desktop is untouched. */
.hero .hero-logo { display: block; width: auto; height: clamp(92px, 30vw, 150px);
  margin: 0 auto 26px; filter: drop-shadow(0 5px 14px rgba(0,0,0,.5)); }
/* Same story: 9vw did not clear the 52px floor until 578px, so the headline was
   stuck at its minimum on every phone while ~35% of the column sat empty beside
   it. Widest line is "THE BOOMS"; at 17vw it fills the column without wrapping
   down to a 320px viewport, and still caps at the original 104px. */
.hero h1 { margin: 4px 0 14px; font-size: clamp(52px, 17vw, 104px); color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.3); }
/* Extra soft shadow so the headline holds up over the bright daytime photo */
.hero.home h1 { text-shadow: 0 3px 0 rgba(0,0,0,.3), 0 2px 16px rgba(0,0,0,.5); }
.hero h1 .pop { display: inline-block; margin-top: .18em; color: var(--yellow); -webkit-text-stroke: 2px rgba(0,0,0,.15); }
.hero p.lede { font-size: clamp(17px, 2vw, 20px); max-width: 46ch; color: rgba(255,255,255,.92); margin: 0 0 26px; }
/* Hero info (home) — address / phone / hours as clean centered lines directly
   on the hero, no box or container. White text, yellow accents. */
.hero-info { margin: 22px auto 0; display: flex; flex-direction: column;
  align-items: center; gap: 12px; width: auto; max-width: 100%; }
.hi-row { display: inline-flex; align-items: center; gap: 11px; padding: 0;
  color: #fff; text-decoration: none; text-shadow: 0 1px 6px rgba(0,0,0,.65); }
.hi-row > svg { width: 24px; height: 24px; flex: none; color: var(--yellow);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
a.hi-row { transition: color .14s ease; }
a.hi-row:hover { color: var(--yellow); }
a.hi-row:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
/* Phone + hours share one larger size */
.hi-num { font-family: var(--sans); font-weight: 900; font-size: 27px; line-height: 1.1;
  letter-spacing: .01em; color: var(--yellow); }
.hh-line { font-family: var(--sans); font-weight: 800; font-size: 27px; line-height: 1.1;
  letter-spacing: .01em; color: #fff; }
.hh-line b { color: var(--yellow); font-weight: 900; }
.hh-line small { font-size: .72em; font-weight: 800; }
/* Third line - parking reassurance. Deliberately quieter than phone + hours so
   the hierarchy stays: call us > when we're open > and yes, you can park. */
.hi-row.hi-park { gap: 9px; margin-top: 2px; }
.hi-row.hi-park > svg { width: 19px; height: 19px; }
.hi-park span { font-family: var(--sans); font-weight: 800; font-size: 18px;
  line-height: 1.1; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255,255,255,.93); }
/* Keep the range intact so it never breaks mid-token ("10AM-\n6PM") */
.hh-line > span { white-space: nowrap; }
@media (max-width: 540px) {
  /* The phone number is the page's primary action - at 20px it read as caption
     text under a headline nearly three times its size. */
  .hi-num, .hh-line { font-size: 23px; }
  .hi-park span { font-size: 15px; letter-spacing: .04em; }
  .hi-row.hi-park > svg { width: 17px; height: 17px; }
}

/* Neon phone (home hero) - glows like the storefront sign */
.neon-phone { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--sans); font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  font-size: 25.5px; line-height: 1; padding: 18px 30px; color: #fff;
  border: 2px solid #ff444e; background: rgba(0,0,0,.28);
  text-shadow: 0 0 6px rgba(255,90,100,.9), 0 0 14px rgba(225,29,42,.7);
  box-shadow: 0 0 10px rgba(225,29,42,.75), 0 0 24px rgba(225,29,42,.45), inset 0 0 12px rgba(225,29,42,.4);
  transition: transform .12s ease; }
.neon-phone:hover { transform: translateY(-1px); }
.neon-phone svg { filter: drop-shadow(0 0 5px rgba(255,90,100,.9)); }
@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 9px rgba(225,29,42,.7), 0 0 20px rgba(225,29,42,.4), inset 0 0 10px rgba(225,29,42,.32); }
  50%      { box-shadow: 0 0 14px rgba(225,29,42,.95), 0 0 34px rgba(225,29,42,.6), inset 0 0 15px rgba(225,29,42,.5); }
}
@media (prefers-reduced-motion: no-preference) { .neon-phone { animation: neonPulse 2.4s ease-in-out infinite; } }

/* Interior page hero */
.pagehero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.pagehero::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 10%, rgba(29,116,208,.5), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(225,29,42,.4), transparent 55%),
    linear-gradient(180deg,#0b2a6b,#071d4a); }
.pagehero .wrap { position: relative; z-index: 1;
  padding-top: calc(var(--navh) + clamp(24px,4vw,40px));
  padding-bottom: clamp(40px,6vw,74px); text-align: center; }
.pagehero .kick { color: var(--yellow); font-weight: 900; text-transform: uppercase; letter-spacing: .16em; font-size: 13px; }
/* 7vw cleared the 40px floor only past 571px, leaving every interior hero - and
   the brand pages built on it - at a flat 40px on mobile, visibly weaker than
   the 52px home headline. 13vw scales through the phone range to the same cap. */
.pagehero h1 { font-family: var(--display); text-transform: uppercase; margin: 8px 0 0;
  font-size: clamp(40px,13vw,82px); color: #fff; }
.pagehero p { max-width: 58ch; margin: 12px auto 0; color: rgba(255,255,255,.85); }

/* Trust strip */
.trust { background: var(--cream); border-bottom: 1px solid var(--line); }
.trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 24px; }
.trust .item { display: flex; gap: 12px; align-items: center; }
.trust .ic { width: 40px; height: 40px; flex: none; color: var(--red); }
.trust .item b { display: block; font-size: 15px; color: var(--navy); }
.trust .item span { font-size: 13px; color: var(--muted); }

/* Section frame */
section.band { padding-block: clamp(52px, 7vw, 84px); }
.band.navy { background: var(--navy); color: #fff; }
.band.cream { background: var(--cream); }
.sec-head { text-align: center; margin-bottom: 40px; }
.sec-head .kick { font-weight: 900; text-transform: uppercase; letter-spacing: .16em; font-size: 13px; color: var(--red-dk); }
.band.navy .sec-head .kick { color: var(--yellow); }
.sec-head h2 { font-family: var(--display); text-transform: uppercase; margin: 8px 0 0;
  font-size: clamp(34px, 5.5vw, 60px); color: var(--navy); }
.band.navy .sec-head h2 { color: var(--cream); }
.sec-head p { margin: 10px auto 0; max-width: 56ch; color: var(--muted); }
.band.navy .sec-head p { color: rgba(255,255,255,.8); }

.stardiv { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.stardiv i { height: 3px; width: 60px; background: var(--red); display: block; border-radius: 0; }
.band.navy .stardiv i { background: var(--yellow); }
.stardiv svg { width: 22px; height: 22px; color: var(--red); }
.band.navy .stardiv svg { color: var(--yellow); }

/* Search + filter + product grid */
.searchbar { display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto 20px;
  border: 2px solid var(--line); background: var(--paper); padding: 2px 14px; }
.searchbar:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(29,116,208,.22); }
.searchbar .s-ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
.searchbar input { flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 15px; font-family: var(--sans); color: var(--ink); padding: 13px 0; }
.searchbar input:focus, .searchbar input:focus-visible { outline: none; box-shadow: none; }
.searchbar .s-count { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); flex: none; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; }
.chip { border: 2px solid var(--line); background: var(--paper); color: var(--navy);
  font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 12.5px;
  padding: 12px 18px; border-radius: 0; cursor: pointer; transition: .14s; }
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }

.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 0; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--yellow); }
.card .thumb { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden; background: #fff; padding: 10px; }
.card .thumb svg { width: 76%; height: 76%; }
.card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.ribbon { position: absolute; top: 12px; left: -34px; transform: rotate(-45deg);
  width: 130px; text-align: center; font-weight: 900; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; padding: 5px 0; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.ribbon.hot { background: var(--red); }
.ribbon.new { background: var(--blue); }
.card .info { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card .cat-lab { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--red); }
.card h3 { font-family: var(--display); text-transform: uppercase; font-size: 22px; margin: 0; color: var(--navy); line-height: .98; }
.card .desc { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.card .foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.price { font-family: var(--display); font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.price small { font-size: 12px; color: var(--muted); font-family: var(--sans); display: block; text-transform: uppercase; letter-spacing: .06em; }
.reserve { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  color: var(--navy); border: 2px solid var(--navy); border-radius: 0; padding: 11px 15px; transition: .14s; }
.reserve:hover { background: var(--navy); color: #fff; }
.instore-note { text-align: center; margin-top: 26px; font-size: 13px; color: var(--muted); }
.center-cta { text-align: center; margin-top: 36px; }

/* Preview-firework button (on product cards) */
.preview { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; background: var(--red); border: none; padding: 11px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); transition: background .14s; }
.preview::before { content: ""; width: 0; height: 0; border-left: 9px solid #fff;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.preview:hover { background: #f22633; }

/* Video preview modal */
.vmodal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.vmodal.open { display: flex; }
.vmodal-backdrop { position: absolute; inset: 0; background: rgba(4,8,20,.82); }
.vmodal-inner { position: relative; z-index: 1; width: min(960px, 100%); background: #000;
  border: 3px solid var(--yellow); box-shadow: var(--shadow); }
.vmodal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--navy); color: #fff; padding: 10px 14px; }
.vmodal-title { font-family: var(--display); text-transform: uppercase; font-size: 18px; letter-spacing: .03em; }
.vmodal-close { background: none; border: none; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; padding: 0 6px; }
.vmodal-close:hover { color: var(--yellow); }
.vmodal-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vmodal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Starburst "pop-out" badges (poster phrases) - text nearly fills the star */
.burst {
  position: relative; width: 344px; height: 344px;
  display: grid; place-items: center; text-align: center; padding: 48px;
  clip-path: polygon(50.0% 0.0%, 58.5% 13.0%, 71.7% 5.0%, 73.7% 20.3%, 89.1% 18.8%, 84.2% 33.5%, 98.7% 38.9%, 88.0% 50.0%, 98.7% 61.1%, 84.2% 66.5%, 89.1% 81.2%, 73.7% 79.7%, 71.7% 95.0%, 58.5% 87.0%, 50.0% 100.0%, 41.5% 87.0%, 28.3% 95.0%, 26.3% 79.7%, 10.9% 81.2%, 15.8% 66.5%, 1.3% 61.1%, 12.0% 50.0%, 1.3% 38.9%, 15.8% 33.5%, 10.9% 18.8%, 26.3% 20.3%, 28.3% 5.0%, 41.5% 13.0%);
  color: #fff; font-family: var(--display); text-transform: uppercase; line-height: .93;
  letter-spacing: .01em; font-size: 38px;
  filter: drop-shadow(0 6px 10px rgba(11,42,107,.28));
}
.burst span { display: block; }
.burst .em { color: var(--yellow); }
.burst.red { background: var(--red); }
.burst.blue { background: var(--blue); }
.burst.navy { background: var(--navy); }
.burst.yellow { background: var(--yellow); color: var(--navy); }
.burst.yellow .em { color: var(--red); }
.burst.big { width: 420px; height: 420px; font-size: 48px; }

/* Scattered decorative bursts that fill blank side space (wide screens only) */
.burst.scatter { position: absolute; z-index: 1; pointer-events: none; }
@media (max-width: 1180px) { .burst.scatter { display: none; } }

/* Sections that host scattered bursts: crop the bleed, keep content on top */
.hero, .pagehero, .kdeal, .photoband, .signup, section.band { position: relative; overflow: hidden; }
.hero > .wrap, .pagehero > .wrap, .kdeal > .wrap, .photoband > .wrap,
.signup > .wrap, section.band > .wrap { position: relative; z-index: 2; }

/* Krazy deal / celebration banner */
.kdeal { background: var(--red); color: #fff; text-align: center;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 26px, transparent 26px 52px); }
.kdeal .wrap { padding-block: clamp(40px,6vw,64px); }
.kdeal .kick { font-weight: 900; text-transform: uppercase; letter-spacing: .2em; font-size: 13px; color: var(--yellow); }
/* Cream rather than pure #fff: at display sizes a solid white heading glares
   against the saturated red/navy skins. Costs almost no contrast (4.76:1 ->
   4.48:1 on red, 13.5:1 -> 12.7:1 on navy) but drops the clinical blue-white
   edge. The hero h1 stays pure white by design. */
.kdeal h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(38px,7vw,76px); margin: 8px 0 6px;
  color: var(--cream); text-shadow: var(--head-depth); }
.kdeal p { max-width: 54ch; margin: 0 auto 22px; font-size: 16px; opacity: .95; }

/* Compact variant of the celebration banner, plus colour skins.
   Used by the "Our Brands" and "Plenty Of Parking" bands so they read as the
   same poster-banner family as "Your Celebration Headquarters", just quieter. */
.kdeal.kdeal-sm .wrap { padding-block: clamp(30px,4.2vw,46px); }
.kdeal.kdeal-sm h2 { font-size: clamp(30px,4.6vw,52px); margin: 6px 0 8px; }
.kdeal.kdeal-sm p { max-width: 60ch; font-size: 15.5px; margin-bottom: 20px; }
/* background-color (not the `background` shorthand) so the diagonal stripe
   background-image inherited from .kdeal survives on these skins */
.kdeal.navy { background-color: var(--navy); }
.kdeal.yellow { background-color: var(--yellow); color: var(--navy);
  /* white stripes vanish on yellow - restate them in navy at the same pitch */
  background-image: repeating-linear-gradient(135deg, rgba(11,42,107,.045) 0 26px, transparent 26px 52px); }
.kdeal.yellow .kick { color: var(--red); }
/* the cream h2 above is a direct rule, so it beats the navy `color` this skin
   sets on the section - restate it or the heading goes cream-on-yellow. The
   depth shadow is dropped too: navy-on-yellow is already high contrast, and a
   dark shadow under it just reads as grime. */
.kdeal.yellow h2 { color: var(--navy); text-shadow: none; }
.kdeal.yellow p { color: rgba(11,42,107,.86); opacity: 1; }

/* Smaller starburst for the compact bands */
.burst.sm { width: 196px; height: 196px; font-size: 21px; padding: 26px; }

/* Brand wall - white cards keep every mark legible no matter what colours the
   manufacturer's logo uses, and give the row one consistent silhouette. */
/* Centred flex rather than a grid: with an odd brand count a grid strands the
   last mark at the start of its own row. Flex + centre means any leftover row
   self-centres at every width, so no orphan rule is needed. Item width is set
   so all seven still make one row inside --maxw before they wrap. */
.brandwall { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: clamp(16px, 2.4vw, 30px) clamp(14px, 2vw, 26px); }
/* Marks sit straight on the navy field - no cards. The two supplied PNGs that
   shipped matted (raccoon on white, fox reversed on black) have had those
   mattes knocked out in the asset itself, so this band MUST stay on a dark
   skin: on a light one fox's reversed wordmark would vanish. */
/* 140px max is not arbitrary: 7 marks x 140 + 6 x 26px gap = 1136, which is the
   most that still clears the 1160px inner width of --maxw at desktop. Larger and
   the last brand wraps to a row of its own. */
.brandwall li { width: clamp(104px, 11.5vw, 140px); padding: 2px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: transform .16s ease; }
.brandwall li:hover { transform: translateY(-4px); }
.brandwall .bl { min-height: 112px; display: grid; place-items: center; }
/* --s carries each mark's resting scale so :hover can multiply it. Without it a
   flat hover scale would override .airy and make Fox shrink on hover. */
.brandwall img { --s: 1; max-height: 104px; max-width: 100%; width: auto; height: auto; display: block;
  transform: scale(var(--s));
  /* lifts the marks off the striped navy the way the cards used to */
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.38));
  transition: transform .18s ease, filter .18s ease; }
.brandwall li:hover img { transform: scale(calc(var(--s) * 1.07));
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)) brightness(1.06); }
/* Optical nudges so a tall mark and a wide one carry the same visual weight */
.brandwall .tall img { max-height: 122px; }
/* Fox is wide with a lot of internal air, so at the same box width it reads
   lighter than the dense circular marks. It is width-constrained, not
   height-constrained, so max-height cannot grow it - scale visually instead
   and let it borrow a few px of the gap. */
.brandwall .airy img { --s: 1.14; }
/* Scroll reveal - .reveal/.shown are added by app.js, so the wall renders
   normally when the script does not run. The transform sits on the li's
   children, leaving the li's own transform free for :hover. */
.brandwall.reveal li > * { opacity: 0; transform: translateY(20px); }
.brandwall.reveal.shown li > * { opacity: 1; transform: none;
  transition: opacity .5s ease, transform .58s cubic-bezier(.22,.7,.28,1);
  transition-delay: calc(var(--i, 0) * 80ms); }
/* Every mark carries its own wordmark, so the caption is a quiet backstop, not
   a label - cream at low emphasis (navy would be invisible now the card is gone) */
.brandwall .bn { font-family: var(--display); text-transform: uppercase; font-size: 13px;
  letter-spacing: .06em; line-height: 1.05; color: rgba(255,247,236,.62); text-align: center; }
@media (prefers-reduced-motion: reduce) { .brandwall li { transition: none; }
  .brandwall li:hover { transform: none; }
  .brandwall img { transition: none; }
  /* belt and braces - app.js already skips the reveal when motion is reduced */
  .brandwall.reveal li > * { opacity: 1; transform: none; } }
@media (max-width: 560px) { .brandwall li { width: calc((100% - 40px) / 2); }
  .brandwall .bl { min-height: 92px; } .brandwall img { max-height: 84px; }
  .brandwall .tall img { max-height: 98px; } }

/* ---- Brand pages (/brands and /brands/*) ---- */
/* Breadcrumb - small, quiet, sits above the brand name */
.crumbs { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .03em;
  color: rgba(255,255,255,.62); margin-bottom: 16px; }
.crumbs a { color: rgba(255,255,255,.82); text-decoration: none; }
.crumbs a:hover { color: var(--yellow); text-decoration: underline; }
.crumbs span { margin: 0 7px; }
.crumbs [aria-current] { color: var(--yellow); margin: 0; }
/* Brand hero - the mark sits beside the name rather than above it, so the page
   is identifiable from the logo before any text is read. .pagehero centres its
   copy; with the mark pinned left that reads lopsided, so this variant opts out. */
.brandhero .wrap { text-align: left; }
/* .pagehero p centres its block with `margin: 12px auto 0`; left-aligning the
   text alone leaves the paragraph floating right of the headline. */
.brandhero .wrap > p { margin-left: 0; }
/* Reuse the home-page fireworks canvas as page art. Sits behind the copy and
   dimmer than on the hero, where it is the main event rather than a backdrop.
   app.js only starts it when #fw exists and motion is not reduced.
   Keyed off .pagehero, not .brandhero, so every interior hero gets it - the
   brand pages are .pagehero too, so they render exactly as they did. */
.pagehero { isolation: isolate; }
.pagehero #fw { z-index: 0; opacity: .55; }
/* Category grid reads better as a contained block than full bleed */
.band .tickitems { max-width: 860px; margin-inline: auto; }
.bh-row { display: flex; align-items: center; gap: clamp(18px, 3.5vw, 40px); flex-wrap: wrap; }
.bh-mark { flex: none; display: grid; place-items: center; min-width: 132px; }
.bh-mark img { max-height: 132px; max-width: 168px; width: auto; height: auto; display: block;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
.bh-txt { flex: 1 1 320px; }
.bh-txt h1 { margin-top: 6px; }
.bh-txt p { max-width: 52ch; margin: 14px 0 0; color: rgba(255,255,255,.9); font-size: 17px; }
/* Readable measure for long-form brand copy */
.prose { max-width: 74ch; }
.prose h2 { font-family: var(--display); text-transform: uppercase; color: var(--navy);
  font-size: clamp(24px, 3.2vw, 34px); margin: 36px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 17px; line-height: 1.62; margin: 0 0 14px; }
.tickitems { list-style: none; margin: 4px 0 18px; padding: 0;
  display: grid; gap: 8px 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tickitems li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.45; }
.tickitems li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; background: var(--red); }
/* Hub grid (/brands). Sits on the navy skin for the same reason the home-page
   wall does - Fox and Raccoon are knocked-out marks that would disappear on a
   light band. Whole card is the link target, not just the name. */
.brandgrid { list-style: none; margin: 0; padding: 0; display: grid;
  gap: clamp(14px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.brandgrid a { display: flex; flex-direction: column; align-items: center; gap: 10px;
  height: 100%; padding: 26px 18px 22px; text-decoration: none; text-align: center;
  background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.14);
  transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.brandgrid a:hover { background: rgba(255,255,255,.10); border-color: var(--yellow);
  transform: translateY(-4px); }
.brandgrid a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.brandgrid .bg-mark { display: grid; place-items: center; min-height: 96px; }
.brandgrid img { max-height: 88px; max-width: 100%; width: auto; height: auto; display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.brandgrid .bg-name { font-family: var(--display); text-transform: uppercase;
  font-size: 19px; letter-spacing: .03em; color: var(--cream); }
.brandgrid .bg-blurb { font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.72);
  max-width: 30ch; }
@media (prefers-reduced-motion: reduce) {
  .brandgrid a { transition: none; }
  .brandgrid a:hover { transform: none; } }

/* Trademark / independence notice - deliberately small and grey. It is a legal
   necessity, not a design element, and must not read as body copy. */
.brandnote { font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 78ch; }
/* ...which is why it no longer gets a section of its own. Tucked into the
   bottom-right corner of the photo band instead: still legible, still present
   on every brand page, but it is not a stop on the way down the page.
   Anchored inside .wrap so it lines up with the copy column rather than the
   viewport edge on wide screens; the CTA is left-aligned so they never meet. */
.photoband .pb-note { position: absolute; right: 20px; bottom: 0; margin: 0;
  max-width: 42ch; text-align: right; font-size: 11px; line-height: 1.5;
  color: rgba(255,255,255,.5); text-shadow: 0 1px 4px rgba(0,0,0,.55); }
@media (max-width: 900px) {
  /* No room to sit beside the button - back into the flow underneath it. */
  .photoband .pb-note { position: static; max-width: 100%; text-align: left;
    margin-top: 22px; }
}
.backlink { margin-top: 18px; }
/* Used to sit in a section of its own at the foot of every brand page - one
   link stranded on an otherwise empty strip. It now closes the "known for"
   block, so it centres to match the item list it follows. */
.band .backlink { text-align: center; margin-top: 30px; }
.backlink a { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em;
  color: var(--navy); text-decoration: none; font-size: 16px; }
.backlink a:hover { color: var(--red); text-decoration: underline; }
/* The CTA band carries two buttons, so give them room to sit side by side */
.center-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
/* ...but the photo band's copy is left-aligned, so a centred button floats
   away from the text it belongs to */
.photoband .center-cta { justify-content: flex-start; }
@media (max-width: 640px) {
  .bh-row { gap: 18px; }
  .bh-mark { min-width: 96px; }
  .bh-mark img { max-height: 96px; max-width: 120px; }
}

/* Parking band - quick reassurance pills under the headline */
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 10px; justify-content: center; }
.pills li { display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy); color: #fff; padding: 9px 15px;
  font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.pills svg { width: 17px; height: 17px; flex: none; color: var(--yellow); }
/* A pill that is actually a link (the phone number). The anchor takes over the
   padding so the whole chip is a tap target, and the border is pre-declared
   transparent so the hover outline does not resize the chip. Same lift-and-
   highlight as the cards. */
.pills li.pill-link { padding: 0; border: 2px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.pills li.pill-link a { display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; color: #fff; }
.pills li.pill-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm);
  border-color: var(--yellow); }
.pills li.pill-link:hover a { color: var(--yellow); }
.pills li.pill-link:focus-within { border-color: var(--yellow); }
@media (prefers-reduced-motion: reduce) {
  .pills li.pill-link { transition: none; }
  .pills li.pill-link:hover { transform: none; } }

/* Photo band (store) */
.photoband { position: relative; min-height: 440px; display: flex; align-items: center; color: #fff; overflow: hidden; }
.photoband .bg { position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(90deg, rgba(7,29,74,.93) 0%, rgba(11,42,107,.6) 55%, rgba(11,42,107,.15) 100%),
    url("images/store-line.webp?v=2026072601");
  background-size: cover; background-position: center; }
/* One band image per page, so no two pages share a banner. Two are the store's
   own photographs; the rest are generic fireworks (Pexels, free commercial use)
   and are deliberately NOT tied to any brand's own imagery. All are dark, so
   they take a lighter scrim than the daytime home-page band - over-tinting
   loses the shells entirely. */
.photoband.pb-night .bg,
.photoband.pb-day .bg,
.photoband.pb-gold-burst .bg,
.photoband.pb-blue-burst .bg,
.photoband.pb-red-radial .bg,
.photoband.pb-red-fan .bg,
.photoband.pb-silver-willow .bg,
.photoband.pb-inside .bg,
.photoband.pb-gold-sphere .bg { background-position: center 45%; }
.photoband.pb-night .bg { background-image: var(--pb-scrim), url("images/store-night.jpg?v=2026080404"); }
.photoband.pb-day .bg { background-image: var(--pb-scrim), url("images/store.jpg?v=2026080404"); }
.photoband.pb-gold-burst .bg { background-image: var(--pb-scrim), url("images/bands/gold-burst.webp?v=2026072601"); }
.photoband.pb-blue-burst .bg { background-image: var(--pb-scrim), url("images/bands/blue-burst.webp?v=2026072601"); }
.photoband.pb-red-radial .bg { background-image: var(--pb-scrim), url("images/bands/red-radial.webp?v=2026072601"); }
.photoband.pb-red-fan .bg { background-image: var(--pb-scrim), url("images/bands/red-fan.webp?v=2026072601"); }
.photoband.pb-silver-willow .bg { background-image: var(--pb-scrim), url("images/bands/silver-willow.webp?v=2026072601"); }
.photoband.pb-gold-sphere .bg { background-image: var(--pb-scrim), url("images/bands/gold-sphere.webp?v=2026072601"); }
.photoband.pb-inside .bg { background-image: var(--pb-scrim), url("images/bands/store-inside.webp?v=2026080401"); }
.photoband .wrap { position: relative; z-index: 1; }
.photoband .kick { color: var(--yellow); font-weight: 900; text-transform: uppercase; letter-spacing: .16em; font-size: 13px; }
.photoband h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(34px,5.5vw,62px); margin: 8px 0 12px;
  color: var(--cream); text-shadow: var(--head-depth); }
.photoband p { max-width: 44ch; margin: 0 0 22px; color: rgba(255,255,255,.9); font-size: 17px; }

/* About story */
.story { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; }
.story .txt h2 { font-family: var(--display); text-transform: uppercase; color: var(--navy);
  font-size: clamp(30px,4.4vw,50px); margin: 0 0 14px; }
.story .txt p { color: var(--ink); margin: 0 0 14px; }
.story figure { margin: 0; }
.story figure img { width: 100%; height: auto; border: 3px solid var(--navy); box-shadow: var(--shadow); }
.story figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; text-align: center; }

/* Remodel photo row (about) - the three-beat build story under the main copy.
   Sources are phone shots at wildly different sizes, so the cells are locked to
   4:3 and the images cover, rather than letting each photo set its own height. */
.remodel { margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(26px, 4vw, 40px);
  border-top: 3px solid var(--line); }
.remodel h3 { font-family: var(--display); text-transform: uppercase; color: var(--navy);
  font-size: clamp(26px, 3.4vw, 38px); letter-spacing: .02em; margin: 0 0 8px; text-align: center; }
.remodel .remodel-lede { max-width: 62ch; margin: 0 auto clamp(22px, 3vw, 30px);
  text-align: center; color: var(--muted); }
.remodel-shots, .photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.remodel-shots figure, .photo-row figure { margin: 0; }
.remodel-shots img, .photo-row img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border: 3px solid var(--navy); box-shadow: var(--shadow-sm); }
.remodel-shots figcaption, .photo-row figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; text-align: center; }
@media (max-width: 700px) { .remodel-shots, .photo-row { grid-template-columns: 1fr; } }

/* Occasion photo strip under the cards. Same gentle lift the brand wall uses -
   these are tiles, not links, so it stays subtle. */
.photo-strip { margin-top: clamp(30px, 4vw, 46px); padding-top: clamp(24px, 3.5vw, 36px);
  border-top: 3px solid var(--line); }
.photo-row img { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.photo-row figure:hover img { transform: translateY(-4px); box-shadow: var(--shadow);
  border-color: var(--yellow); }
@media (prefers-reduced-motion: reduce) {
  .photo-row img { transition: none; }
  .photo-row figure:hover img { transform: none; } }

/* Product pair (events) - wedding sparklers and gender reveals sit side by side
   in one section rather than as two stacked full-width rows. The two photos are
   mixed orientation (a portrait pack shot, a landscape shelf shot), so they are
   height-matched and contained rather than cropped to a shared box - a wide
   crop would slice the length off the sparkler, which is the whole subject. */
.prodpair { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 3.6vw, 52px); align-items: start; }
.prodpair figure { margin: 0 0 18px; display: flex; flex-direction: column; align-items: center; }
.prodpair figure img { width: auto; max-width: 100%; height: clamp(230px, 24vw, 330px);
  object-fit: contain; border: 3px solid var(--navy); box-shadow: var(--shadow-sm); }
.prodpair figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; text-align: center; }
.prodpair h2 { font-family: var(--display); text-transform: uppercase; color: var(--navy);
  font-size: clamp(26px, 3vw, 40px); letter-spacing: .02em; margin: 0 0 12px; }
.prodpair p { color: var(--ink); margin: 0 0 13px; font-size: 15.5px; }
.prodpair p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .prodpair { grid-template-columns: 1fr; gap: 32px; }
  .prodpair .prod + .prod { padding-top: 30px; border-top: 3px solid var(--line); }
}

/* Occasions grid (events) - one card per thing people search for */
.occasions { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: clamp(14px, 2vw, 22px); }
.occasions li { background: var(--paper); border: 1px solid var(--line);
  border-top: 5px solid var(--red); padding: 22px 20px; box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
/* Same lift-and-highlight as .card / .brandgrid. Only the three thin sides go
   yellow - the thick top border is the card's colour code, so it stays put. */
.occasions li:hover { transform: translateY(-5px); box-shadow: var(--shadow);
  border-right-color: var(--yellow); border-bottom-color: var(--yellow);
  border-left-color: var(--yellow); }
.occasions li:nth-child(4n+2) { border-top-color: var(--navy); }
.occasions li:nth-child(4n+3) { border-top-color: var(--blue); }
.occasions li:nth-child(4n+4) { border-top-color: var(--yellow-dk); }
.occasions h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .02em;
  font-size: 23px; color: var(--navy); margin: 0 0 4px; }
.occasions .when { display: block; font-weight: 900; text-transform: uppercase;
  letter-spacing: .1em; font-size: 11.5px; color: var(--red-dk); margin-bottom: 9px; }
.occasions p { margin: 0; color: var(--muted); font-size: 14.5px; }
/* Seven single-file cards ran to ~3000px on a phone. Two up, tightened. */
@media (max-width: 700px) {
  .occasions { grid-template-columns: 1fr 1fr; gap: 12px; }
  .occasions li { padding: 16px 14px; }
  .occasions h3 { font-size: 17px; }
  .occasions .when { font-size: 10.5px; letter-spacing: .07em; margin-bottom: 7px; }
  .occasions p { font-size: 13px; line-height: 1.45; }
}

/* FAQ (events) - a <details> accordion. The answers stay in the DOM (and the
   FAQPage JSON-LD is separate), so collapsing them costs nothing for search;
   it just stops six answers occupying most of a phone screen. */
.faq { display: grid; gap: 10px; max-width: 82ch; margin-inline: auto; }
.faq .q { background: var(--paper); border: 1px solid var(--line);
  border-left: 5px solid var(--red); box-shadow: var(--shadow-sm);
  transition: box-shadow .16s ease, border-color .16s ease; }
.faq .q:nth-child(even) { border-left-color: var(--navy); }
.faq .q:hover { box-shadow: var(--shadow); border-top-color: var(--yellow);
  border-right-color: var(--yellow); border-bottom-color: var(--yellow); }
.faq summary { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 15px 20px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.faq h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .02em;
  font-size: 19px; color: var(--navy); margin: 0; }
.faq .faq-caret { width: 19px; height: 19px; flex: none; color: var(--red);
  transition: transform .18s ease; }
.faq .q[open] .faq-caret { transform: rotate(180deg); }
.faq .q > p { margin: 0; padding: 0 20px 18px; font-size: 15px; color: var(--ink); }
.faq a { color: var(--red-dk); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.faq a:hover { color: var(--navy); }

/* Occasion photo strip - sits directly under the hero as a banner. Purely
   decorative (the occasions are named in the cards below), so it is
   aria-hidden and the images carry empty alt. */
.photostrip { background: var(--navy-dk); }
.photostrip .photo-row { gap: 0; }
.photostrip img { display: block; width: 100%; height: clamp(150px, 19vw, 260px);
  object-fit: cover; border: 0; box-shadow: none; }
@media (max-width: 700px) {
  .photostrip .photo-row { grid-template-columns: repeat(3, 1fr); }
  .photostrip img { height: 108px; }
}

@media (prefers-reduced-motion: reduce) {
  .occasions li { transition: none; }
  .occasions li:hover { transform: none; }
  .faq .faq-caret { transition: none; } }

/* Why us */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why .w { background: var(--paper); border: 1px solid var(--line); border-top: 5px solid var(--red);
  border-radius: 0; padding: 26px 22px; box-shadow: var(--shadow-sm); }
.why .w:nth-child(2) { border-top-color: var(--navy); }
.why .w:nth-child(3) { border-top-color: var(--blue); }
.why .w .ic { width: 42px; height: 42px; color: var(--navy); margin-bottom: 12px; }
.why .w h3 { font-family: var(--display); text-transform: uppercase; font-size: 24px; color: var(--navy); margin: 0 0 8px; }
.why .w p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* Safety */
.safety { background: var(--yellow); color: var(--navy); }
.safety .wrap { display: flex; align-items: center; gap: 20px; padding-block: 26px; flex-wrap: wrap; justify-content: center; text-align: center; }
.safety svg { width: 40px; height: 40px; flex: none; }
.safety b { font-family: var(--display); text-transform: uppercase; font-size: 26px; letter-spacing: .02em; }
.safety span { font-weight: 600; }
.safety a { text-decoration: underline; text-underline-offset: 3px; }
.safety a:hover { color: var(--red); }
.safety .bang { font-size: 40px; line-height: 0; vertical-align: -4px; margin-left: 5px; }

/* Safety page cards */
.safety-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.safety-card { background: var(--paper); border: 1px solid var(--line); border-top: 5px solid var(--red);
  padding: 26px 24px; box-shadow: var(--shadow-sm); }
.safety-card:nth-child(2) { border-top-color: var(--navy); }
.safety-card:nth-child(3) { border-top-color: var(--blue); }
.safety-card:nth-child(4) { border-top-color: var(--navy); }
.safety-card h2 { font-family: var(--display); text-transform: uppercase; color: var(--navy); font-size: 26px; margin: 0 0 12px; }
.safety-card ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.safety-card li { font-size: 14.5px; color: var(--ink); }
@media (max-width: 900px) { .safety-cols { grid-template-columns: 1fr; } }

/* Visit */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 34px;
  grid-template-areas: "info map" "dir map"; align-items: start; }
.visit .info { grid-area: info; }
.visit .map { grid-area: map; align-self: stretch; }
.visit .directions { grid-area: dir; }
.visit .info h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(30px,4vw,44px); color: var(--navy); margin: 0 0 6px; }
.visit .addr { font-size: 17px; color: var(--ink); margin: 0 0 20px; }
.hours { width: 100%; border-collapse: collapse; margin: 8px 0 22px; }
.hours th, .hours td { text-align: left; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.hours th { color: var(--navy); font-weight: 800; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.hours tr.open td { color: var(--red); font-weight: 800; }
.bigphone { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.bigphone .num { font-weight: 800; font-size: 17px; color: var(--red); }
.visit .directions { padding-top: 20px; border-top: 1px solid var(--line); }
.visit .directions h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .02em;
  font-size: 22px; color: var(--navy); margin: 0 0 8px; }
.visit .directions p { font-size: 15.5px; line-height: 1.6; color: var(--ink); margin: 0; }
.visit .directions strong { color: var(--navy); font-weight: 800; }

.map { position: relative; border-radius: 0; overflow: hidden; min-height: 480px;
  border: 3px solid var(--navy); box-shadow: var(--shadow); background: #e8eef7; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.map-fallback { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px;
  color: var(--navy); text-decoration: none; }
.map-fallback svg { width: 46px; height: 46px; color: var(--red); filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.map-fallback b { font-family: var(--display); text-transform: uppercase; font-size: 22px; }
.map-fallback span { font-size: 13px; color: var(--muted); }
.map-fallback .mf-open { margin-top: 6px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--red); }
/* The embed is injected on click; once it is in, the placeholder steps aside. */
.map-fallback { cursor: pointer; }
.map.map-loaded .map-fallback { display: none; }

/* WCAG 2.5.8 wants a 24px minimum pointer target. These footer, utility-bar and
   inline links were rendering 16-21px tall. */
footer.site ul a, footer.site .legal a, .safety a, .util a {
  display: inline-block; padding-block: 4px; }

/* Newsletter */
.signup { background: var(--navy-dk); color: #fff; }
.signup .wrap { padding-block: clamp(40px,6vw,60px); text-align: center; }
.signup h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(30px,5vw,50px); margin: 0 0 8px; }
.signup p { max-width: 50ch; margin: 0 auto 22px; color: rgba(255,255,255,.82); }
.signup form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.signup input { flex: 1 1 240px; border: none; border-radius: 0; padding: 14px 20px; font-size: 15px; font-family: var(--sans); }
.signup input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.signup .msg { margin-top: 14px; min-height: 1em; color: var(--yellow); font-weight: 800; }

/* Footer */
footer.site { background: #05173a; color: rgba(255,255,255,.7); font-size: 14px; }
footer.site .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; padding-block: 48px; }
footer.site h3 { font-family: var(--display); text-transform: uppercase; color: #fff; font-size: 18px; letter-spacing: .04em; margin: 0 0 14px; }
footer.site a:hover { color: var(--yellow); }
footer.site ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
footer .brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; }
footer .brand .foot-logo { height: 76px; width: auto; }
footer .brand .word .k { color: var(--yellow); font-size: 13px; }
footer .brand .word .n { color: #fff; font-size: 26px; }
footer .brand .word .n em { color: var(--red); }
.tagstrip { background: var(--red); color: #fff; text-align: center; }
.tagstrip .wrap { padding-block: 12px; font-family: var(--display); text-transform: uppercase;
  letter-spacing: .06em; font-size: clamp(16px, 2.4vw, 22px); }
.legal { border-top: 1px solid rgba(255,255,255,.12); }
.legal .wrap { padding-block: 18px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, .chip:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 0; }

/* Responsive */
/* Six items with "Directions" on the end outgrows the centred bar just above
   the mobile breakpoint — tighten rather than wrap it onto two lines. */
@media (min-width: 901px) and (max-width: 1080px) {
  nav.main { gap: 22px; }
  nav.main a { font-size: 17px; }
}
@media (max-width: 900px) {
  /* Dropdown anchored directly below the sticky header bar (no magic offsets),
     revealed with a smooth fade + short slide. */
  /* Full-screen overlay menu: big centered links + a phone CTA at the bottom */
  nav.main { position: fixed; inset: 0; z-index: 80;
    background: linear-gradient(160deg, #0b2a6b 0%, #05173a 100%);
    flex-direction: column; justify-content: center; align-items: stretch; gap: 2px;
    padding: 92px 26px calc(36px + env(safe-area-inset-bottom));
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
    /* Logo + six links + call CTA + hours/address overruns a short phone, so the
       overlay scrolls. "safe center" keeps the top reachable when it does. */
    justify-content: safe center;
    overflow-y: auto; overscroll-behavior: contain; }
  /* The overlay is fixed with inset:0, but it is still a grid item of the header
     bar, and `justify-self: center` up there makes an abs-positioned box
     shrink-to-fit and centre itself inside the viewport — which rendered the
     menu as a narrow strip with the page showing down both sides. Stretch it. */
  header.site .wrap > nav.main { justify-self: stretch; }
  nav.main.open { opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .24s ease, transform .24s ease, visibility 0s; }
  nav.main a { color: #fff; text-shadow: none; text-align: center;
    font-family: var(--display); text-transform: uppercase; letter-spacing: .02em;
    font-size: clamp(25px, 6.6vw, 36px); line-height: 1; padding: 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,.12); transition: color .15s ease; }
  nav.main a:hover, nav.main a:focus-visible, nav.main a.active { color: var(--yellow); }
  nav.main a::after { display: none; }
  /* Brand logo pinned at the top of the overlay, above the links */
  nav.main .nav-logo { display: block; padding: 0; border-bottom: 0; margin: 0 auto 20px; }
  nav.main .nav-logo img { height: 84px; width: auto; display: block; }
  nav.main .nav-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 24px; border-bottom: 0; background: var(--red); color: #fff;
    font-family: var(--sans); font-weight: 900; font-size: 19px; letter-spacing: .03em;
    padding: 16px 20px; box-shadow: 0 4px 0 var(--red-dk); }
  nav.main .nav-cta:hover { background: #f22633; color: #fff; }
  nav.main .nav-cta svg { width: 20px; height: 20px; }
  /* Hours + address under the call button. Rows opt out of the big display-face
     link styling above; the address row taps through to turn-by-turn. */
  nav.main .nav-meta { display: block; margin-top: 22px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.14); }
  nav.main .nav-meta .nm-row { display: flex; align-items: center; justify-content: center;
    gap: 10px; margin: 0; padding: 8px 4px; border-bottom: 0; text-align: left;
    font-family: var(--sans); text-transform: none; letter-spacing: normal;
    font-size: 15px; line-height: 1.35; font-weight: 600; color: rgba(255,255,255,.85); }
  nav.main .nav-meta a.nm-row:hover, nav.main .nav-meta a.nm-row:focus-visible { color: var(--yellow); }
  nav.main .nav-meta .nm-row b { font-weight: 800; color: #fff; }
  nav.main .nav-meta .nm-row small { font-size: .72em; font-weight: 800; }
  nav.main .nav-meta .nm-row svg { width: 18px; height: 18px; flex: none; color: var(--yellow); }
  .navtoggle { display: block; }
  /* While the overlay is open, pin the toggle to the viewport. It lives in the
     header, so otherwise the X sits wherever the header happens to be - which
     landed it halfway down the open menu, on top of the links. */
  body.nav-open .navtoggle { position: fixed; top: 14px; right: 18px; }
  .trust .wrap { grid-template-columns: repeat(2, 1fr); }
  .products { grid-template-columns: repeat(2, 1fr); }
  .why { grid-template-columns: 1fr; }
  .visit { grid-template-columns: 1fr; grid-template-areas: "info" "map" "dir"; }
  .story { grid-template-columns: 1fr; }
  footer.site .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .products { grid-template-columns: 1fr; }
  .clock .unit { min-width: 50px; }
  footer.site .wrap { grid-template-columns: 1fr; }
  .header-cta-text { display: none; }
}