*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
p,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

:root {
  --color-page-bg: #f4f4f4;
  --color-surface: #ffffff;
  --color-header-bg: #000000;
  --color-surface-dark: #00102e;
  /* Reused for heading text on light surfaces too, not a duplicate value. */
  --color-heading: var(--color-surface-dark);

  --color-text: #233452;
  --color-text-on-dark: #ffffff;

  --color-muted: #5a5a5a; /* light surface only, fails on dark */
  --color-muted-on-dark: #b8c2e0; /* dark surface only (header or footer), fails on light */

  --color-link: #0000ff;
  --color-link-hover: #0000a0;

  --color-cta: #dd0000;
  --color-cta-hover: #a30000; /* 8.21:1 white-label contrast */

  --color-btn-green: #006400; /* 7.44:1 white-label contrast */
  --color-btn-green-hover: #004b00; /* 10.47:1 white-label contrast */
  --color-btn-blue-hover: #0000a0; /* 13.93:1 white-label contrast */

  --color-border: #e0e0e0;
  --color-image-border: var(--color-heading);

  --color-focus: #dd0000;
  --color-focus-on-dark: #ffffff;

  --color-success: #006400;
  --color-danger: #dd0000;

  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --step-body: 1rem;
  --step-small: 0.875rem;
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --step-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --step-h1: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --width-prose: 65ch;
  --width-wide: 1200px;

  --z-nav: 100;

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease-out: ease-out;
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-page-bg);
}

h1,
h2,
h3 {
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-heading);
}

h1 {
  font-size: var(--step-h1);
}

h2 {
  font-size: var(--step-h2);
}

h3 {
  font-size: var(--step-lead);
}

p {
  max-width: var(--width-prose);
}

a {
  color: var(--color-link);
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--color-link-hover);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.site-footer :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.container {
  width: 100%;
  max-width: var(--width-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-nav);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: var(--space-4);
}

/* Uses an explicit outer margin plus calc() width, not .container's
   padding-only pattern: main is itself the visible white surface, so a
   padding-only approach would leave no page-background gutter around it. */
main {
  display: block;
  width: calc(100% - 2 * var(--space-4));
  max-width: var(--width-wide);
  margin: var(--space-6) auto var(--space-8);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
  padding: var(--space-6) var(--space-4);
}

@media (min-width: 48rem) {
  main {
    padding: var(--space-8);
  }
}

.site-header {
  background: var(--color-header-bg);
  border-bottom: 10px solid var(--color-cta);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

/* Text, not the supplied logo image: that asset is flattened to a white
   background with no transparency, so it would render as a white box on
   this black header. */
.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-style: italic;
  font-size: var(--step-lead);
  color: var(--color-text-on-dark);
  text-decoration: none;
}

.site-header__logo:hover {
  color: var(--color-muted-on-dark);
}

.site-header__logo img {
  width: 48px;
  height: 48px;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-weight: 600;
}

/* :not(.btn) is required: .site-nav a (0,1,1) otherwise outranks .btn--cta
   (0,1,0) regardless of source order, repainting the filled Contact
   button's white label in --color-text (2.35:1 against the red fill,
   failing 4.5:1) while Lighthouse still scores the page 95. */
.site-nav a:not(.btn) {
  color: var(--color-text-on-dark);
}

.site-nav a:not(.btn):hover {
  color: var(--color-muted-on-dark);
}

/* Default and current-page link colors are both white here (--color-link
   fails at 2.44:1 against the black header), so bold plus underline is the
   only signal distinguishing the current page; there is no color fallback
   to rely on. */
.site-nav a[aria-current]:not(.btn) {
  font-weight: 700;
  text-decoration: underline;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--step-small);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.btn--cta {
  background: var(--color-cta);
  color: var(--color-text-on-dark);
}

/* Darkened red, not --color-link-hover: a red CTA hovering to blue reads as
   a color mismatch rather than a hover state. 8.21:1 white-label contrast. */
.btn--cta:hover {
  background: var(--color-cta-hover);
}

/* No separate on-dark border patch needed: fill-vs-surface contrast already
   clears the WCAG 1.4.11 3:1 floor on both dark surfaces (header 4.07:1,
   footer 3.66:1). If either surface color changes, recheck this before
   assuming the fill alone still reads against it. */

.btn--green {
  background: var(--color-btn-green);
  color: var(--color-text-on-dark);
}

.btn--green:hover {
  background: var(--color-btn-green-hover);
}

.btn--blue {
  background: var(--color-link);
  color: var(--color-text-on-dark);
}

.btn--blue:hover {
  background: var(--color-btn-blue-hover);
}

.btn[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.site-footer {
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark);
  border-top: 10px solid var(--color-cta);
  margin-top: var(--space-8);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-7);
}

.site-footer a {
  color: var(--color-text-on-dark);
}

.site-footer a:hover {
  color: var(--color-muted-on-dark);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-style: italic;
}

.site-footer__brand img {
  width: 40px;
  height: 40px;
}

.site-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.site-footer__nav-list a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.site-footer__meta {
  font-size: var(--step-small);
  color: var(--color-muted-on-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: var(--space-4);
}

.site-footer__meta a {
  color: var(--color-text-on-dark);
  text-decoration: underline;
}

/* Padding is small deliberately: the links themselves already carry the
   44px target height below, so a full block padding on top would double
   up the visual rhythm. */
.breadcrumb {
  padding-block: var(--space-1);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step-small);
  color: var(--color-muted);
}

.breadcrumb__list li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-2);
  color: var(--color-border);
}

/* min-height, not font-size, to reach the 44x44 target: an earlier version
   measured 37x16 and 40x16 CSS px here, under WCAG 2.2 SC 2.5.8's 24x24
   floor, while Lighthouse still scored Accessibility 100. Padding keeps
   that fix without changing the trail's visual weight. */
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
}

.hero {
  padding-block: var(--space-7);
}

/* Plain block flow, not CSS Grid: grid's gap does not participate in
   margin collapsing, so it was stacking on top of .button-group's own
   margin-top below it, producing an 80px gap above the buttons here versus
   48px on every other page using the same button-group pattern. */
.hero__inner {
  display: block;
}

.hero__media img {
  width: 100%;
  height: auto;
  border: 2px solid var(--color-image-border);
  border-radius: var(--radius-md);
}

.hero__eyebrow {
  display: inline-block;
  background: var(--color-heading);
  color: var(--color-text-on-dark);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--step-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
}

/* Explicit margin, not the grid gap removed above: scoped to the hero so
   it does not change h1-to-content spacing on any other page. */
.hero__inner h1 {
  margin-bottom: var(--space-4);
}

.hero__media {
  margin-top: var(--space-6);
}

/* Generic, not .hero__actions: also used on store pages and 404, which
   share no other block with the hero. */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  /* Asymmetric on purpose: the preceding <p> or <dl> carries no bottom
     margin of its own, so this top margin is the entire visible gap above
     the buttons; the bottom margin has no such dependency. */
  margin-top: var(--space-7);
  margin-bottom: var(--space-5);
}

.figure {
  margin-block: var(--space-6);
}

.figcaption {
  font-size: var(--step-small);
  color: var(--color-muted);
  margin-top: var(--space-2);
}

/* Scoped to captioned content figures only, not the hero or logo marks,
   which carry their own border rules. */
.figure > .media-link > img,
.figure > img {
  border: 2px solid var(--color-image-border);
  border-radius: var(--radius-md);
}

.figure > .media-link > img {
  width: 100%;
  height: auto;
}

.address-card-list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .address-card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .address-card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.address-card {
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-link);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition:
    border-left-color var(--duration-fast) var(--ease-out),
    border-right-color var(--duration-fast) var(--ease-out),
    border-bottom-color var(--duration-fast) var(--ease-out);
}

.address-card__link {
  display: block;
  text-decoration: none;
  color: var(--color-text);
}

.address-card__label {
  display: block;
  font-weight: 700;
  color: var(--color-link);
  margin-bottom: var(--space-2);
}

.address-card:hover,
.address-card:focus-within {
  border-left-color: var(--color-link);
  border-right-color: var(--color-link);
  border-bottom-color: var(--color-link);
}

.address-card address {
  font-style: normal;
  color: var(--color-text);
}

.store-detail {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-link);
  border-radius: var(--radius-md);
  margin-block: var(--space-6);
}

.store-detail dt {
  font-weight: 600;
  color: var(--color-muted);
  font-size: var(--step-small);
}

.store-detail dd {
  margin: 0 0 var(--space-3);
}

.form {
  max-width: var(--width-prose);
}

.form__field {
  margin-block-end: var(--space-5);
}

.form__field label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.form__field input,
.form__field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  background: var(--color-surface);
}

.form__field textarea {
  min-height: 8rem;
}

.form__field input:focus-visible,
.form__field textarea:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}

.form__error {
  color: var(--color-danger);
  font-size: var(--step-small);
  margin-top: var(--space-2);
}

.form__success {
  color: var(--color-success);
  font-weight: 600;
}

/* Off-screen positioning, not display:none or visibility:hidden: this
   field must stay in the tab order for bots that fill every field, and
   both of those properties remove it (and some bots skip display:none
   fields entirely). */
.form__honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.section {
  padding-block: var(--space-7);
}

.page-intro {
  padding-block: var(--space-6);
}

@media (max-width: 39.99rem) {
  .hero__inner {
    text-align: center;
  }
}