/**
 * PROPRIETARY SOFTWARE NOTICE
 *
 * This website, source code, database structure, administrative system,
 * and all related components were developed by Pro Star CMS Development.
 *
 * Unauthorized copying, modification, distribution, disclosure, reverse
 * engineering, reuse, or reproduction of any portion of this system is
 * prohibited without prior written authorization.
 *
 * Chad Sanders - Pro Star CMS Development - 256-550-1988
 * All rights reserved.
 */

/* ==========================================================================
   Smith Poultry Supply - design system
   Barn red, weathered steel, corn gold. Built to read as an established
   regional supplier, not a template.
   ========================================================================== */

:root {
  /* Brand */
  --barn:        #7a1f1f;
  --barn-dk:     #5c1616;
  --barn-lt:     #9c3030;
  /* The brand red does two jobs. Behind white words it must stay deep; used as
     the words themselves on a dark card it must be light. Dark mode lightens
     --barn, which left white-on-red buttons at 4.6:1 and red links on dark cards
     at 3.6:1, so each job has its own shade. In light mode both are the brand red. */
  --barn-fill:    #7a1f1f;   /* behind white text: 10.3:1 */
  --barn-fill-dk: #5c1616;
  --barn-text:    #7a1f1f;   /* red words on light backgrounds */
  --gold:        #b07c1e;
  --gold-text:   #825a10;   /* gold WORDS on light backgrounds: 5.5:1 on the page, 6.1:1 on white */
  --gold-lt:     #d4a53f;

  /* Neutrals - warm, not grey */
  --ink:         #201c18;
  --ink-2:       #4a4239;
  --ink-3:       #675e55;   /* was #7a7065 (4.3:1 on the page); now 5.7:1 */
  --line:        #ddd2c0;
  --line-2:      #ebe3d6;
  --paper:       #f7f2e8;
  --paper-2:     #fffdf8;
  --card:        #ffffff;

  /* Feedback */
  --ok:          #2f6b3a;
  --warn:        #8a6100;
  --err:         #a3271f;

  /* Type */
  --font-head:   "Bitter", Georgia, "Times New Roman", serif;
  --font-body:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Space + shape */
  --wrap:        1180px;
  --wrap-narrow: 860px;
  --gutter:      16px;
  --r-sm:        6px;
  --r:           10px;
  --r-lg:        16px;

  --shadow-1:    0 1px 2px rgba(32,28,24,.06), 0 2px 6px rgba(32,28,24,.06);
  --shadow-2:    0 2px 4px rgba(32,28,24,.07), 0 12px 28px rgba(32,28,24,.10);
  --shadow-3:    0 8px 20px rgba(32,28,24,.12), 0 24px 56px rgba(32,28,24,.16);

  --nav-h:       76px;
  --ease:        cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --barn:     #c05149;
    --barn-dk:  #9a3a33;
    --barn-lt:  #d4726a;
    --barn-fill:    #9a3a33;   /* white on it 6.9:1 */
    --barn-fill-dk: #7f2d27;
    --barn-text:    #e08a82;   /* 6.5:1 on dark cards, 7.2:1 on the page */
    --gold:     #dda63f;
    --gold-text: #dda63f;   /* 7.6:1 on dark cards */
    --gold-lt:  #eec25f;

    --ink:      #f2ece1;
    --ink-2:    #c3b9a9;
    --ink-3:    #948a7c;
    --line:     #3b332a;
    --line-2:   #2c261f;
    --paper:    #151210;
    --paper-2:  #1c1815;
    --card:     #221d19;

    --ok:       #6fbb7d;
    --warn:     #d9a52e;
    --err:      #e8796e;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.5);
    --shadow-3: 0 8px 20px rgba(0,0,0,.45), 0 24px 56px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --barn:#c05149; --barn-dk:#9a3a33; --barn-lt:#d4726a;
  --barn-fill:#9a3a33; --barn-fill-dk:#7f2d27; --barn-text:#e08a82; --gold:#dda63f; --gold-lt:#eec25f; --gold-text:#dda63f;
  --ink:#f2ece1; --ink-2:#c3b9a9; --ink-3:#948a7c; --line:#3b332a; --line-2:#2c261f;
  --paper:#151210; --paper-2:#1c1815; --card:#221d19;
  --ok:#6fbb7d; --warn:#d9a52e; --err:#e8796e;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 4px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.5);
  --shadow-3:0 8px 20px rgba(0,0,0,.45), 0 24px 56px rgba(0,0,0,.6);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* SVG and other non-HTML elements do not honour the hidden attribute on
   their own in every engine - without this both icons render at once. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--barn-text); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3.8vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); }
h4 { font-size: 1.08rem; }
p  { margin: 0 0 1.1em; }

.wrap        { width: 100%; max-width: var(--wrap);        margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--barn-fill); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- eyebrow / section heads ---------- */
.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-text); margin: 0 0 .6rem;
}
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--tint { background: var(--paper-2); border-block: 1px solid var(--line-2); }
/* Closing call-to-action band (city pages, Service Areas). Its buttons are the
   gold one and the white-outline "on dark" one, so the band must be dark: it
   had no style at all and the outline button was white on cream (1.1:1). */
.section--cta { background: var(--barn-fill); color: #fff; }
.section--cta h2, .section--cta p { color: #fff; }
.section-head { max-width: 760px; margin-bottom: 2.5rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-2); font-size: 1.08rem; margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font: inherit; font-weight: 650; line-height: 1;
  padding: .92rem 1.55rem; border-radius: var(--r-sm);
  border: 2px solid transparent; cursor: pointer;
  text-decoration: none; text-align: center;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--barn-fill); color: #fff; border-color: var(--barn-fill); }
.btn--primary:hover { background: var(--barn-fill-dk); border-color: var(--barn-fill-dk); color: #fff; }

.btn--gold { background: var(--gold); color: #1d1608; border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-lt); border-color: var(--gold-lt); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--barn); color: var(--barn-text); background: transparent; }

.btn--on-dark { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.btn--on-dark:hover { background: #fff; color: var(--barn-dk); border-color: #fff; }

.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.06rem; }
.btn--block { width: 100%; justify-content: center; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--nav-h);
}
/* The logo wordmark already says 'Smith Poultry Supply', so the masthead
   carries no repeated text beside it.

   The artwork itself has an opaque white background, so it is given a rounded
   plate of its own rather than sitting on the page as a hard white rectangle.
   The plate is white in both themes because the logo needs white behind it. */
.brand { display: flex; align-items: center; text-decoration: none; color: inherit; flex-shrink: 0; }
.brand img {
  height: 46px; width: auto; display: block;
  background: #fff; border-radius: 10px; padding: 3px 7px;
}

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  display: block; padding: .6rem .82rem; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem;
  white-space: nowrap; transition: color .15s, background .15s;
}
.nav a:hover { color: var(--barn-text); background: var(--line-2); }
.nav a[aria-current="page"] { color: var(--barn-text); }
.nav a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; background: var(--gold);
  margin-top: 3px; border-radius: 2px;
}

/* dropdown */
.nav__item { position: relative; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; font: inherit; font-weight: 600; font-size: .95rem;
  color: var(--ink-2); padding: .6rem .82rem; border-radius: var(--r-sm); cursor: pointer;
}
.nav__toggle:hover { color: var(--barn-text); background: var(--line-2); }
.nav__toggle svg { transition: transform .2s var(--ease); }
.nav__item.is-open .nav__toggle svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-3);
  padding: .45rem; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  max-height: 72vh; overflow-y: auto;
}
.nav__item.is-open .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu a { font-weight: 500; font-size: .93rem; padding: .55rem .7rem; }
.nav__menu a::after { display: none; }

/* The phone button in the masthead.
   `.nav a` (0,1,1) outranks `.btn--primary` (0,1,0), so the button was
   inheriting the muted nav link colour and rendering at 2.4:1 against the
   barn-red fill - well under WCAG AA. These rules restore the intended white
   and are specific enough to hold. */
.nav__cta { margin-left: .5rem; }
.nav a.nav__cta,
.nav a.nav__cta:hover,
.nav a.nav__cta:focus-visible {
  color: #fff;
  background: var(--barn-fill);
  border-color: var(--barn-fill);
}
.nav a.nav__cta:hover {
  background: var(--barn-fill-dk);
  border-color: var(--barn-fill-dk);
}
.nav a.nav__cta::after { display: none; }   /* no active-page underline on a button */

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .55rem .7rem; cursor: pointer; color: var(--ink);
}

@media (max-width: 1040px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--nav-h) 0 0 auto; width: min(360px, 88vw);
    background: var(--card); border-left: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem; overflow-y: auto;
    transform: translateX(100%); transition: transform .28s var(--ease);
    box-shadow: var(--shadow-3);
  }
  .nav.is-open { transform: translateX(0); }
  .nav a, .nav__toggle { padding: .8rem .6rem; width: 100%; text-align: left; font-size: 1rem; }
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; margin-left: .6rem; padding-left: .4rem;
    display: none; max-height: none;
  }
  .nav__item.is-open .nav__menu { display: block; }
  .nav__cta { margin: .8rem 0 0; }

  /* Logo centred at the top of the page on phones and tablets. The bar becomes
     three columns - spacer, logo, menu button - so the logo is centred against
     the page, not against the space the button happens to leave over. */
  .site-header__bar {
    display: grid;
    grid-template-columns: var(--nav-btn) 1fr var(--nav-btn);
    align-items: center; gap: .5rem;
    min-height: 0; padding-block: .45rem;
  }
  .site-header__bar::before { content: ""; }   /* the balancing spacer */
  .brand { grid-column: 2; justify-self: center; }
  .brand img { height: 42px; }
  .nav-toggle { grid-column: 3; justify-self: end; }
  .nav { inset: auto 0 0 auto; top: var(--nav-h-mobile); height: calc(100dvh - var(--nav-h-mobile)); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; min-height: min(88vh, 760px);
  display: flex; align-items: center;
  background: var(--barn-dk); color: #fff; overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media iframe {
  width: 100%; height: 100%; object-fit: cover; border: 0;
}
/* The iframe is sized larger than the frame so YouTube's letterboxing and
   any chrome sit outside the visible area. */
.hero__media iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.77vh;
  transform: translate(-50%, -50%); pointer-events: none;
}
/* Vignette: the edges of the frame fall away to near-black while the middle
   stays almost clear, so the footage reads through the centre and the text at
   the left still has something solid to sit on. The elliptical radial does the
   edge darkening; the two linears keep the headline legible and anchor the
   bottom where the location strip meets it. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(130% 115% at 50% 45%,
      rgba(12,5,5,0)    0%,
      rgba(12,5,5,.06) 28%,
      rgba(12,5,5,.30) 55%,
      rgba(12,5,5,.68) 78%,
      rgba(10,4,4,.93) 100%),
    linear-gradient(100deg, rgba(20,8,8,.80) 0%, rgba(20,8,8,.46) 38%, rgba(20,8,8,0) 68%),
    linear-gradient(to top, rgba(14,6,6,.78) 0%, rgba(14,6,6,0) 42%);
}

/* A very slow drift on the footage, so the hero breathes without distracting. */
.hero__media img,
.hero__media iframe {
  animation: heroDrift 34s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroDrift {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.6%, -1.2%, 0); }
}
/* The iframe is already centred by a transform, so it drifts from there. */
.hero__media iframe {
  animation-name: heroDriftFrame;
}
@keyframes heroDriftFrame {
  from { transform: translate(-50%, -50%) scale(1.02); }
  to   { transform: translate(-51.4%, -51%) scale(1.09); }
}
/* The horizontal padding has to be stated. This rule sits after .wrap in the
   cascade, so a `padding: X 0` shorthand here silently cancelled .wrap's
   gutter and let the hero copy run flush to the screen edge on phones. */
.hero__inner { position: relative; padding: clamp(3.5rem, 9vw, 6.5rem) var(--gutter); max-width: 760px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #f5d587; margin-bottom: 1rem;
}
.hero__eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--gold); }
.hero h1 { color: #fff; margin-bottom: 1.15rem; text-wrap: balance; }
.hero__lede {
  font-size: clamp(1.06rem, 2.1vw, 1.28rem); color: rgba(255,255,255,.92);
  max-width: 58ch; margin-top: 0; margin-bottom: 1.9rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* The three stores. Cards inside the page width, lifted over the foot of the
   banner so they read as part of it rather than a strip bolted underneath.
   Solid card backgrounds, so the words never depend on the photo behind. */
.hero__strip { position: relative; z-index: 2; margin-top: -2.6rem; }
.hero__strip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hero__strip .store-call {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.05rem 1.15rem; border-radius: var(--r);
  background: var(--card); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-top: 3px solid var(--gold);
  box-shadow: 0 10px 28px rgba(30,20,12,.16), 0 2px 6px rgba(30,20,12,.08);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.hero__strip .store-call:hover,
.hero__strip .store-call:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(30,20,12,.22), 0 3px 8px rgba(30,20,12,.1);
  border-top-color: var(--barn-fill);
}
.store-call__icon {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--barn-fill); color: #fff;
}
.store-call__body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.hero__strip .loc  { display: flex; align-items: center; gap: .1rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.hero__strip .tel  { font-size: 1.32rem; font-weight: 700; font-family: var(--font-head); color: var(--ink); line-height: 1.15; }
.hero__strip .addr { font-size: .82rem; color: var(--ink-3); }
.store-call__cue {
  display: none;             /* only when the cards stack full-width (below) */
  margin-left: auto; flex: none; align-self: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--barn-text); white-space: nowrap;
}
/* The video pause button sits in the banner's bottom corner; keep it clear of the cards. */
.hero .hero__vidbtn { bottom: 3.6rem; }
@media (max-width: 1040px) {
  .hero__strip-grid { grid-template-columns: 1fr; gap: .7rem; }
  .store-call__cue { display: inline; }
  .hero__strip { margin-top: -1.6rem; }
  .hero .hero__vidbtn { bottom: 2.4rem; }
}
@media (max-width: 420px) { .store-call__cue { display: none; } }

/* video control */
.hero__vidbtn {
  position: absolute; right: 16px; bottom: 16px; z-index: 5;
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(20,8,8,.62); color: #fff;
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  padding: .5rem .95rem; font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; backdrop-filter: blur(8px);
  transition: background .18s var(--ease);
}
.hero__vidbtn:hover { background: rgba(122,31,31,.9); }
.hero__vidbtn[hidden] { display: none; }

/* Autoplaying background video with no visible control. The pause control is
   kept for WCAG 2.2.2 (a way to stop motion that starts by itself) but is
   clipped out of sight until focused, so it costs nobody a button in the hero
   and still gives keyboard and screen-reader users a way to stop the video. */
.hero__vidbtn--quiet {
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hero__vidbtn--quiet:focus-visible {
  width: auto; height: auto; padding: .5rem .95rem; margin: 0;
  overflow: visible; clip: auto; white-space: normal;
  border: 1px solid rgba(255,255,255,.4);
}

/* ==========================================================================
   Intro animation
   Elements start hidden only when JS confirms it can animate them, so a
   JS failure never leaves the page blank.
   ========================================================================== */
/* Nothing is ever hidden unless JavaScript is running and has confirmed it can
   reveal it again, so a script failure can never leave the page blank. */
[data-anim] { opacity: 1; }

.js-anim [data-anim] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity   .72s var(--ease),
    transform .72s var(--ease);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}
.js-anim [data-anim="fade"]  { transform: none; }
.js-anim [data-anim="left"]  { transform: translate3d(-28px, 0, 0); }
.js-anim [data-anim="right"] { transform: translate3d(28px, 0, 0); }
.js-anim [data-anim="scale"] { transform: scale(.955); }
.js-anim [data-anim].is-in   { opacity: 1; transform: none; }

/* The hero gets a slightly richer entrance than the rest of the page: the
   headline lifts, the supporting text follows, the buttons pop last. */
.js-anim .hero [data-anim] { transition-duration: .86s; }
.js-anim .hero h1[data-anim],
.js-anim .hero h1 [data-anim] { transform: translate3d(0, 34px, 0); }
.js-anim .hero .hero__actions[data-anim] { transform: translate3d(0, 20px, 0) scale(.985); }

/* These hero rules carry an element name (h1) or an extra class, which makes
   them MORE specific than the generic .is-in rule above. Without a matching
   landed rule here, the headline and buttons kept their travel offset forever:
   the h1 sat 34px low over the lede and the two overlapped on every screen.
   Each starting offset needs its own landed counterpart at equal specificity. */
.js-anim .hero h1[data-anim].is-in,
.js-anim .hero h1 [data-anim].is-in,
.js-anim .hero .hero__actions[data-anim].is-in { transform: none; }

/* The location strip slides up under the hero once it has settled. */
.js-anim .hero__strip a {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js-anim .hero__strip.is-in a { opacity: 1; transform: none; }
.js-anim .hero__strip.is-in a:nth-child(1) { transition-delay: .50s; }
.js-anim .hero__strip.is-in a:nth-child(2) { transition-delay: .60s; }
.js-anim .hero__strip.is-in a:nth-child(3) { transition-delay: .70s; }

/* ==========================================================================
   Cards / grids
   ========================================================================== */
.grid { display: grid; gap: 1.4rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-1);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--barn); }
.card__media { background: var(--paper-2); border-bottom: 1px solid var(--line-2); padding: 1.3rem; display: grid; place-items: center; min-height: 128px; }
.card__media img { max-height: 84px; width: auto; object-fit: contain; }
.card__body { padding: 1.25rem 1.35rem 1.45rem; flex: 1; display: flex; flex-direction: column; }
.card__cat { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; margin-bottom: .3rem; }
.card__title { font-family: var(--font-head); font-size: 1.16rem; font-weight: 700; margin: 0 0 .4rem; color: var(--ink); }
.card__text { color: var(--ink-2); font-size: .94rem; margin: 0 0 1rem; flex: 1; }
.card__more { font-weight: 650; font-size: .9rem; color: var(--barn-text); display: inline-flex; align-items: center; gap: .35rem; }
.card--link:hover .card__more { gap: .6rem; }
.card a.stretched::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }

/* ---------- location cards ---------- */
.loc-card { text-align: left; }
.loc-card__photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--line-2); }
.loc-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-card__name { font-family: var(--font-head); font-size: 1.3rem; margin: 0 0 .15rem; }
.loc-card__badge { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1d1608; background: var(--gold); padding: .18rem .5rem; border-radius: 3px; vertical-align: middle; margin-left: .4rem; }
.loc-card address { font-style: normal; color: var(--ink-2); margin: 0 0 1rem; font-size: .96rem; }
.loc-card__tel {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--barn-fill); color: #fff; text-decoration: none;
  font-family: var(--font-head); font-size: 1.24rem; font-weight: 700;
  padding: .8rem 1rem; border-radius: var(--r-sm); margin-bottom: .6rem;
  transition: background .18s var(--ease);
}
.loc-card__tel:hover { background: var(--barn-fill-dk); color: #fff; }
.loc-card__map { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 600; color: var(--barn-text); text-decoration: none; }
.loc-card__map:hover { text-decoration: underline; }

/* ---------- staff ---------- */
.staff-group + .staff-group { margin-top: 2.6rem; }
.staff-group__title { font-family: var(--font-head); font-size: 1.3rem; padding-bottom: .5rem; border-bottom: 2px solid var(--gold); margin-bottom: 1.2rem; }
.staff-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-1); }
.staff-card__name { font-family: var(--font-head); font-weight: 700; font-size: 1.06rem; margin: 0 0 .1rem; }
.staff-card__title { font-size: .84rem; color: var(--ink-3); margin: 0 0 .7rem; }
.staff-card__email { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; font-weight: 700; font-size: .92rem; color: var(--barn-text); text-decoration: underline; text-underline-offset: 3px; }
.staff-card__email:hover { text-decoration-thickness: 2px; }
.staff-card__tel { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--barn-text); text-decoration: none; font-size: 1.02rem; }
.staff-card__tel:hover { text-decoration: underline; }
.staff-card__photo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: .7rem; background: var(--line-2); }

/* ==========================================================================
   Vendor / product detail
   ========================================================================== */
.vendor-hero { background: var(--card); border-bottom: 1px solid var(--line); padding: clamp(2rem,5vw,3.4rem) 0; }
.vendor-hero__grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2rem; align-items: center; }
.vendor-hero__logo { max-height: 96px; width: auto; }
@media (max-width: 720px) { .vendor-hero__grid { grid-template-columns: 1fr; } }

.vsec { padding: clamp(2.2rem,5vw,3.6rem) 0; border-bottom: 1px solid var(--line-2); }
.vsec:last-of-type { border-bottom: 0; }
.vsec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,3.2rem); align-items: center; }
.vsec:nth-of-type(even) .vsec__media { order: -1; }
.vsec--noimg .vsec__grid { grid-template-columns: 1fr; max-width: 78ch; }
.vsec__media img { border-radius: var(--r); box-shadow: var(--shadow-2); width: 100%; }
@media (max-width: 820px) {
  .vsec__grid { grid-template-columns: 1fr; }
  .vsec:nth-of-type(even) .vsec__media { order: 0; }
}

.breadcrumb { font-size: .86rem; color: var(--ink-3); padding: .9rem 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumb li::after { content: "/"; margin-left: .4rem; color: var(--line); }
.breadcrumb li:last-child::after { display: none; }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--barn-text); text-decoration: underline; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 650; font-size: .92rem; margin-bottom: .35rem; color: var(--ink); }
.field .req { color: var(--err); }
.field .hint { font-size: .82rem; color: var(--ink-3); margin-top: .3rem; }
.input, .textarea, .select {
  width: 100%; font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .78rem .9rem; transition: border-color .15s, box-shadow .15s;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--barn); box-shadow: 0 0 0 3px rgba(122,31,31,.14); outline: none;
}
.textarea { min-height: 150px; resize: vertical; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: .95rem 1.1rem; border-radius: var(--r-sm); margin-bottom: 1.3rem; border: 1px solid; font-size: .95rem; }
.alert--ok   { background: rgba(47,107,58,.09);  border-color: var(--ok);   color: var(--ok); }
.alert--err  { background: rgba(163,39,31,.08);  border-color: var(--err);  color: var(--err); }
.alert--warn { background: rgba(138,97,0,.09);   border-color: var(--warn); color: var(--warn); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #1a1512; color: rgba(255,255,255,.76); padding: clamp(2.5rem,6vw,4rem) 0 0; margin-top: auto; }
:root[data-theme="dark"] .site-footer,
@media (prefers-color-scheme: dark) { .site-footer { background: #100d0b; } }
.site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,.76); text-decoration: none; }
.site-footer a:hover { color: var(--gold-lt); text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; padding-bottom: 2.5rem; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.footer__logo { height: 52px; width: auto; margin-bottom: 1rem; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 1.3rem 0;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .85rem; color: rgba(255,255,255,.55);
}

/* ==========================================================================
   Right-click quick menu
   ========================================================================== */
.qmenu {
  position: fixed; z-index: 9999; min-width: 232px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-3);
  padding: .4rem; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: scale(.96);
  transform-origin: top left;
  transition: opacity .13s var(--ease), transform .13s var(--ease), visibility .13s;
}
.qmenu.is-open { opacity: 1; visibility: visible; transform: scale(1); }
.qmenu__head {
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; padding: .5rem .7rem .4rem;
  border-bottom: 1px solid var(--line-2); margin-bottom: .3rem;
}
.qmenu button, .qmenu a {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  background: none; border: 0; font: inherit; font-size: .93rem; font-weight: 550;
  color: var(--ink); text-align: left; text-decoration: none;
  padding: .62rem .7rem; border-radius: var(--r-sm); cursor: pointer;
}
.qmenu button:hover, .qmenu a:hover,
.qmenu button:focus-visible, .qmenu a:focus-visible { background: var(--barn-fill); color: #fff; }
.qmenu svg { flex-shrink: 0; opacity: .75; }
.qmenu button:hover svg, .qmenu a:hover svg { opacity: 1; }

/* ---------- utility ---------- */
.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;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }
.muted { color: var(--ink-3); }
.lede { font-size: 1.12rem; color: var(--ink-2); }

@media print {
  .site-header, .site-footer, .qmenu, .hero__vidbtn, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   Light text on dark or moving backgrounds
   The hero sits over video, so no fixed background colour can be assumed and
   contrast ratios alone do not guarantee legibility - a bright frame can wash
   out white text at any moment. A shadow under every light string keeps the
   words readable against whatever happens to be behind them, and costs nothing
   where the background is already dark.
   ========================================================================== */
:root {
  --text-shadow-light: 0 1px 2px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.38);
  --text-shadow-light-lg: 0 2px 4px rgba(0,0,0,.55), 0 4px 22px rgba(0,0,0,.42);
  --nav-btn: 44px;
  --nav-h-mobile: 62px;
}

/* Only contexts where the text is genuinely light. .vendor-hero is NOT one of
   them: it is the pale hero on About and the vendor pages, with dark ink, and a
   shadow under dark text only smudges it. The rule is absolute - no shadow on
   dark text, ever - so site.js also removes the shadow from anything that ends
   up dark after all (a colour chosen in the editor, the dark colour scheme). */
.hero h1,
.hero__lede,
.hero__eyebrow,
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark p,
.section--cta h2, .section--cta p,
.service-band h2, .service-band p,
.site-footer h3, .site-footer h4, .site-footer p, .site-footer a, .site-footer address,
.qmenu__head {
  text-shadow: var(--text-shadow-light);
}
.hero h1 { text-shadow: var(--text-shadow-light-lg); }

/* Set by site.js on any element whose computed text colour is dark. */
.no-text-shadow { text-shadow: none !important; }

/* Buttons and chips carry their own solid background, so a shadow on the label
   would only muddy it. */
.btn, .nav a, .nav__toggle, .badge, .loc-card__badge { text-shadow: none; }

/* ==========================================================================
   Page-to-page transitions
   Chromium browsers get a real cross-document view transition: the outgoing
   page cross-fades into the incoming one, so there is no blank flash between
   them. Browsers without the API simply navigate as they always have - the
   fallback is "no transition", never "content hidden until a script runs",
   because a failed animation must never cost anybody the page.
   ========================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .34s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
/* A true crossfade: the new page fades up while the old one fades out over the
   same moment, so the two overlap instead of flashing through the background. */
::view-transition-old(root) { animation-name: pageFadeOut; mix-blend-mode: normal; }
::view-transition-new(root) { animation-name: pageFadeIn;  mix-blend-mode: normal; }
@keyframes pageFadeOut { from { opacity: 1 } to { opacity: 0 } }
@keyframes pageFadeIn  { from { opacity: 0 } to { opacity: 1 } }

/* The masthead is the one element that should not cross-fade with the rest -
   it is in the same place on both pages, so it stays put and the body changes
   underneath it. */
.site-header { view-transition-name: site-header; }
::view-transition-old(site-header),
::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; }

/* ==========================================================================
   Hero logo
   Sits to the right of the copy on wide screens only. The mark is dark ink on
   an opaque white ground, so it needs a plate of its own: dropped straight onto
   the video it would read as a white rectangle with a hard edge. The plate is
   rounded, slightly translucent and blurred, which keeps the mark legible over
   any frame without turning into a solid block.
   ========================================================================== */
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  padding-inline: var(--gutter);
}
.hero__copy { min-width: 0; }

.hero__logo { display: none; }

@media (min-width: 1041px) {
  /* The copy keeps its measure; the logo takes what is left, capped so it
     never competes with the headline. */
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 340px);
    max-width: var(--wrap);
  }
  .hero__logo {
    display: flex; justify-self: end; align-items: center; justify-content: center;
    padding: 1.15rem 1.35rem;
    background: rgba(255, 255, 255, .93);
    border-radius: 18px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .42), 0 2px 6px rgba(0, 0, 0, .3);
    backdrop-filter: blur(3px);
  }
  .hero__logo img {
    width: 100%; height: auto; display: block;   /* height:auto keeps the ratio */
    max-width: 300px;
  }
}

/* Tablet keeps the logo but lets it sit above the copy rather than beside it,
   because at this width a side column squeezes the headline into slivers. */
@media (min-width: 721px) and (max-width: 1040px) {
  .hero__logo {
    display: flex; justify-self: start; align-items: center;
    order: -1;
    padding: .9rem 1.1rem;
    background: rgba(255, 255, 255, .93);
    border-radius: 16px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
    margin-bottom: .25rem;
  }
  .hero__logo img { width: 100%; height: auto; display: block; max-width: 230px; }
  .hero__inner { gap: 1.5rem; }
}

/* ==========================================================================
   City / service-area pages
   ========================================================================== */
.city-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.city-figure { margin: 0; }
.city-figure img { width: 100%; height: auto; border-radius: var(--r); display: block; }

.city-brands { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.city-brands a {
  display: block; padding: .95rem 1.1rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); text-decoration: none;
  height: 100%; transition: border-color .15s, transform .15s;
}
.city-brands a:hover { border-color: var(--barn); transform: translateY(-2px); }
.city-brands strong { display: block; color: var(--barn-text); margin-bottom: .2rem; }
.city-brands span { font-size: .88rem; color: var(--ink-2); }
.city-brands__more { margin-top: 1.2rem; }

.city-nearby { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.city-nearby a {
  display: inline-block; padding: .5rem .9rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none;
  font-size: .92rem; font-weight: 600;
}
.city-nearby a:hover { border-color: var(--barn); color: var(--barn-text); }

/* Service areas hub */
.sa-store__head { margin-bottom: 1.3rem; }
.sa-store__meta { color: var(--ink-2); margin-bottom: .8rem; }
.sa-store__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.sa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sa-list a {
  display: block; padding: .7rem .9rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none;
}
.sa-list a:hover { border-color: var(--barn); }
.sa-list strong { display: block; color: var(--ink); }
.sa-list span { font-size: .82rem; color: var(--ink-3); }

.footer__list--inline li { display: inline-block; margin-right: .8rem; }

/* FAQ */
.faq dt { font-weight: 700; margin-top: 1.3rem; font-size: 1.02rem; }
.faq dd { margin: .45rem 0 0; color: var(--ink-2); }