/* ============================================================
   Runnin' Dove Tack & More — Rebrand 2026
   Western, warm, artisan: parchment / leather / copper / olive
   ============================================================ */

:root {
  --ink:        #1a140e;   /* deep charcoal — leather/arena dust */
  --ink-soft:   #4f4338;   /* warm brown for body text */
  --paper:      #f4ead8;   /* warm parchment */
  --paper-2:    #e6d6b6;   /* warm sand */
  --line:       #cdb98e;   /* tan hairline */
  --accent:     #b15a2c;   /* burnt copper-rust */
  --accent-dk:  #8a4220;
  --leather:    #6f4428;   /* saddle leather brown */
  --saddle:     #8a5a34;   /* lighter saddle brown */
  --sage:       #75805c;   /* muted olive */
  --sage-dk:    #565f42;
  --gold:       #c69a4b;   /* antique gold */
  --gold-dk:    #8c6829;
  --sage-tint:  #e6e6d3;
  --gold-tint:  #efe2c6;
  --rust-tint:  #f0ddcd;
  --white:      #fffdf6;   /* warm off-white for cards */
  --shadow:     0 14px 40px rgba(42, 32, 24, .12);
  --radius:     14px;
  --maxw:       1180px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --shadow-sm:  0 4px 16px rgba(42,32,24,.08);
  --shadow-lg:  0 26px 60px -12px rgba(42,32,24,.26);
  --glow-rust:  rgba(179,92,46,.18);
  --glow-sage:  rgba(117,128,92,.18);
  --glow-gold:  rgba(183,138,64,.16);
  --turquoise:    #1f9fa3;    /* southwestern stone turquoise */
  --turquoise-dk: #0c5f64;    /* deep turquoise */
  --turq-tint:    #d6ecec;
  --glow-turq:    rgba(31,159,163,.20);
  --tx-rustic:    url("../assets/texture-rustic.jpg");
  --tx-turq:      url("../assets/texture-turquoise.webp");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Soft grain texture overlay — adds warmth and depth */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: "Zilla Slab", Georgia, serif;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.25rem; }

p { color: var(--ink-soft); }

a { color: var(--accent); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--accent-dk); }

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

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 88px 0; }

.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.lead { font-size: 1.15rem; max-width: 620px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  cursor: pointer;
  border: 1.5px solid transparent;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #d06a36 50%, var(--accent-dk) 100%);
  color: var(--white);
  box-shadow: 0 6px 18px -4px rgba(191, 92, 46, .4);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-dk) 0%, var(--accent) 100%);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -6px rgba(191, 92, 46, .55);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--white);
  transform: translateY(-2px);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, .72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.site-header.scrolled {
  background: rgba(250, 248, 244, .92);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(20,20,20,.06);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  transition: height .3s var(--ease);
}
.site-header.scrolled .nav { height: 66px; }
.brand img {
  height: 46px; width: auto;
  transition: height .3s var(--ease);
}
.site-header.scrolled .brand img { height: 40px; }
.brand { display: flex; align-items: center; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}
.nav-links a {
  color: var(--ink);
  font-weight: 500;
  font-size: .96rem;
  position: relative;
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width .25s var(--ease);
}
.nav-links a:not(.btn):hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--accent); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: .3s var(--ease);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 78% 8%, var(--glow-rust), transparent 60%),
    radial-gradient(ellipse 60% 70% at 8% 95%, var(--glow-sage), transparent 60%),
    radial-gradient(ellipse 50% 50% at 95% 90%, var(--glow-gold), transparent 60%),
    var(--paper);
  padding: 104px 0 96px;
  overflow: hidden;
  isolation: isolate;
}
/* drifting gradient-glow blobs behind the hero */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: .9;
}
.hero::before {
  width: 540px; height: 540px;
  top: -180px; right: -120px;
  background: radial-gradient(circle, var(--glow-rust), transparent 70%);
  animation: drift-a 16s var(--ease) infinite alternate;
}
.hero::after {
  width: 440px; height: 440px;
  bottom: -200px; left: -100px;
  background: radial-gradient(circle, var(--glow-sage), transparent 70%);
  animation: drift-b 21s var(--ease) infinite alternate;
}
@keyframes drift-a {
  to { transform: translate3d(-70px, 60px, 0) scale(1.18) rotate(20deg); }
}
@keyframes drift-b {
  to { transform: translate3d(80px, -50px, 0) scale(1.2) rotate(-15deg); }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
}
.hero h1 { margin-bottom: 20px; }
.hero h1 .accent {
  color: var(--accent-dk);
  font-style: italic;
  position: relative;
  white-space: nowrap;
}
.hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  border-radius: 3px;
  opacity: .85;
}
.hero p { font-size: 1.18rem; margin-bottom: 32px; max-width: 520px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-visual {
  position: relative;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 30% 20%, #2a2a2a, var(--ink) 70%);
  aspect-ratio: 4 / 3.4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 80%, rgba(191,92,46,.28), transparent 60%);
  pointer-events: none;
}
.hero-visual img { padding: 48px; filter: invert(1); position: relative; }
.hero-visual .tag {
  position: absolute;
  bottom: 22px; left: 22px; right: 22px;
  color: var(--gold);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* ---------- Stats strip ---------- */
.strip {
  background: var(--ink);
  color: var(--white);
  padding: 40px 0;
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.strip .num {
  font-family: "Zilla Slab", Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
}
.strip .lbl {
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* ---------- Section heading ---------- */
.sec-head { max-width: 640px; margin-bottom: 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head p { margin-top: 12px; }

/* ---------- Cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card .ic {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  font-size: 1.3rem;
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: .96rem; }

/* ---------- Alt section ---------- */
.alt { background: var(--paper-2); }

/* ---------- Split feature ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split.reverse .split-text { order: 2; }
.split-media {
  background: var(--ink);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
.split-media img { padding: 56px; filter: invert(1); opacity: .9; }
.split-text ul { list-style: none; margin-top: 22px; }
.split-text li {
  padding: 10px 0 10px 30px;
  position: relative;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.split-text li:last-child { border-bottom: 0; }
.split-text li::before {
  content: "";
  position: absolute; left: 0; top: 18px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 3px solid var(--accent);
}

/* ---------- Brand logos row ---------- */
.brands-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.brand-chip {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
}

/* ---------- Team grid ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px;
}
.rider {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.rider:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.rider .photo {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--paper-2), var(--line));
  display: flex; align-items: center; justify-content: center;
  font-family: "Zilla Slab", Georgia, serif;
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--accent);
}
.rider .info { padding: 18px 14px; }
.rider .info strong { display: block; font-family: "Zilla Slab", Georgia, serif; }
.rider .info span { font-size: .85rem; color: var(--ink-soft); }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink);
  color: var(--white);
  text-align: center;
  border-radius: var(--radius);
  padding: 64px 40px;
}
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: rgba(255,255,255,.7); max-width: 520px; margin: 0 auto 28px; }
.cta-band .btn-primary { background: var(--accent); }
.cta-band .btn-primary:hover { background: var(--white); color: var(--ink); }

/* ---------- Page hero (inner) ---------- */
.page-hero {
  position: relative;
  background:
    radial-gradient(ellipse 70% 90% at 90% -10%, var(--glow-rust), transparent 60%),
    radial-gradient(ellipse 50% 80% at 0% 110%, var(--glow-sage), transparent 60%),
    var(--paper-2);
  padding: 76px 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero h1 { margin-bottom: 12px; }
.page-hero p { max-width: 560px; }
.crumbs { font-size: .85rem; color: var(--ink-soft); margin-bottom: 16px; }
.crumbs a { color: var(--ink-soft); }

/* ---------- Prose ---------- */
.prose { max-width: 720px; }
.prose h2 { margin: 40px 0 14px; }
.prose h3 { margin: 28px 0 8px; }
.prose p { margin-bottom: 16px; }
.prose ul { margin: 0 0 18px 22px; }
.prose li { color: var(--ink-soft); margin-bottom: 6px; }

/* ---------- Info / policy accordion-ish blocks ---------- */
.policy {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 30px;
  margin-bottom: 18px;
}
.policy h3 { margin-bottom: 6px; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.contact-line {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.contact-line:last-child { border-bottom: 0; }
.contact-line .ic {
  width: 40px; height: 40px; flex: none;
  border-radius: 10px;
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
}
.contact-line strong { font-family: "Zilla Slab", Georgia, serif; display: block; font-size: .95rem; }
.contact-line span, .contact-line a { font-size: .95rem; color: var(--ink-soft); }

.form-field { margin-bottom: 18px; }
.form-field label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: .95rem;
  background: var(--paper);
  transition: border .2s var(--ease);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-field textarea { resize: vertical; min-height: 120px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.7);
  padding: 64px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.site-footer img { height: 40px; filter: invert(1); margin-bottom: 16px; }
.site-footer h4 {
  color: #fff;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: rgba(255,255,255,.7); font-size: .93rem; }
.site-footer a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .85rem;
}

/* ---------- Reveal animation ---------- */
/* Only hide when JS is present, so no-JS visitors still see everything */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .split-text.reveal, .js .split-media.reveal, .js .hero-visual.reveal {
    opacity: 1; transform: none; transition: none;
  }
  .hero::before, .hero::after, .hero-visual img,
  .hero h1 .accent, .strip .num {
    animation: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Shop page ---------- */
.shop-hero p { max-width: 640px; }
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.chip {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  transition: all .2s var(--ease);
}
.chip:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* Category overview cards */
.cat-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.cat-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}
.cat-card-logo {
  height: 60px;
  display: flex; align-items: center; justify-content: flex-start;
  border-radius: 12px;
  margin-bottom: 18px;
  padding: 8px 14px;
}
.cat-card-logo img {
  max-height: 100%;
  max-width: 170px;
  width: auto;
  object-fit: contain;
}
.cat-card h3 { font-size: 1.2rem; margin-bottom: 8px; color: var(--ink); }
.cat-card p { font-size: .92rem; flex: 1; }
.cat-card-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .86rem;
  font-weight: 600;
}
.cat-card-meta span:first-child { color: var(--ink-soft); }
.cat-card-meta span:last-child { color: var(--accent); }

/* Catalog intro band */
.catalog-intro {
  background: var(--ink);
  color: var(--white);
  padding: 64px 0 60px;
}
.catalog-intro h2 { color: var(--white); margin: 10px 0 12px; }
.catalog-intro p { color: rgba(255,255,255,.7); max-width: 620px; }

/* Catalog sections */
.catalog-sec { padding: 64px 0; border-bottom: 1px solid var(--line); }
.cat-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 34px;
}
.cat-icon {
  font-size: 1.8rem;
  width: 60px; height: 60px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  border-radius: 16px;
}
.cat-head h2 { font-size: 1.7rem; margin-bottom: 2px; }
.cat-head p { font-size: .95rem; }
.cat-count {
  margin-left: auto;
  align-self: flex-start;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  white-space: nowrap;
}
.subcat {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 30px 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.subcat span {
  font-size: .72rem;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
}
.catalog-sec:nth-of-type(even) .subcat span { background: var(--paper); }

/* Product cards */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.prod {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.prod:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}
.prod-img {
  aspect-ratio: 1 / 1;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 12px;
  overflow: hidden;
}
.prod-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .35s var(--ease-out);
}
.prod:hover .prod-img img { transform: scale(1.06); }
.prod-img-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2);
  text-align: center;
}
.prod-img-empty span {
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .6;
}
.prod-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.prod-body h4 {
  font-family: "Zilla Slab", Georgia, serif;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  flex: 1;
}
.prod .price {
  font-family: "Zilla Slab", Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
}

/* Placeholder shown until the Shopify embed is pasted in */
.shop-embed-placeholder {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 56px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-embed-placeholder strong {
  font-family: "Zilla Slab", Georgia, serif;
  font-size: 1.15rem;
  color: var(--ink);
}
.shop-embed-placeholder span {
  font-size: .95rem;
  color: var(--ink-soft);
  max-width: 520px;
  margin: 0 auto;
}
.shop-embed-placeholder code {
  background: var(--paper-2);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: .88em;
}

/* Gentle harmony for the injected Shopify Buy Button widget */
.shopify-buy__product,
.shopify-buy__collection-products { font-family: "Inter", sans-serif !important; }
.shopify-buy__btn { border-radius: 999px !important; }

/* Featured products on the homepage */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.featured-slot {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 6px;
}
.featured-slot .lbl {
  font-family: "Zilla Slab", Georgia, serif;
  font-weight: 600;
  color: var(--ink);
}
.featured-slot span { font-size: .88rem; color: var(--ink-soft); }

/* ---------- Color splashes (secondary palette) ---------- */
/* Rotating tints on homepage feature-card icons */
.cards .card:nth-child(3n+1) .ic { background: var(--rust-tint); }
.cards .card:nth-child(3n+2) .ic { background: var(--sage-tint); }
.cards .card:nth-child(3n+3) .ic { background: var(--gold-tint); }

/* Category-overview cards — colored top accent + hover tint */
.cat-card { border-top: 3px solid var(--line); }
.cat-card:nth-child(4n+1) { border-top-color: var(--accent); }
.cat-card:nth-child(4n+2) { border-top-color: var(--sage); }
.cat-card:nth-child(4n+3) { border-top-color: var(--gold); }
.cat-card:nth-child(4n+4) { border-top-color: var(--ink); }
.cat-card:nth-child(4n+2):hover { border-color: var(--sage); }
.cat-card:nth-child(4n+3):hover { border-color: var(--gold); }

/* Catalog-section icon tiles — colored via explicit accent classes */
.cat-icon.acc-rust { background: var(--accent); }
.cat-icon.acc-sage { background: var(--sage); }
.cat-icon.acc-gold { background: var(--gold); }
.cat-icon.acc-ink  { background: var(--ink); }

/* Badges */
.badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.badge-gold { background: var(--gold-tint); color: var(--gold-dk); }
.badge-sage { background: var(--sage-tint); color: var(--sage-dk); }
.badge-rust { background: var(--rust-tint); color: var(--accent-dk); }

/* Special-order / affiliate section */
.special-sec { background: var(--ink); color: var(--white); }
.special-sec .cat-head h2 { color: var(--white); }
.special-sec .cat-head p { color: rgba(255,255,255,.7); }
.special-sec .cat-icon { background: var(--gold); }
.special-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.special-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-top: 3px solid var(--gold);
  border-radius: 12px;
  padding: 22px 22px 24px;
}
.special-card h4 {
  font-family: "Zilla Slab", Georgia, serif;
  font-size: 1.1rem;
  color: var(--white);
  margin-bottom: 6px;
}
.special-card p { font-size: .9rem; color: rgba(255,255,255,.66); margin-bottom: 14px; }
.special-card .badge { margin-bottom: 14px; }
.special-card .so-cta {
  font-family: "Zilla Slab", Georgia, serif;
  font-weight: 600;
  font-size: .92rem;
  color: var(--gold);
}

/* "More lines" coming-soon cards */
.line-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.line-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 22px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.line-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.line-card h4 {
  font-family: "Zilla Slab", Georgia, serif;
  font-size: 1.08rem;
  color: var(--ink);
  margin: 10px 0 6px;
}
.line-card p { font-size: .9rem; }

/* ============================================================
   Polish layer — depth, micro-interactions, finishing touches
   ============================================================ */

::selection { background: var(--accent); color: #fff; }

/* Refined focus ring for keyboard users */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Eyebrow gets a small leading tick */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--accent);
  display: inline-block;
}
.sec-head.center .eyebrow { justify-content: center; }

/* Buttons — light sweep on hover */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg);
  transition: left .55s var(--ease-out);
}
.btn:hover::after { left: 140%; }
.btn-primary:hover { box-shadow: 0 12px 30px -6px rgba(191,92,46,.45); }
.btn:active { transform: translateY(0) scale(.98); }

/* Card depth — richer lift + soft glow on hover */
.card, .cat-card, .rider, .line-card, .policy, .contact-card {
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
              border-color .3s var(--ease-out);
}
.card:hover, .cat-card:hover, .rider:hover, .line-card:hover {
  box-shadow: var(--shadow-lg);
}
.policy:hover { box-shadow: var(--shadow-sm); border-color: var(--accent); }

/* Card icon tiles get a gentle pop on hover */
.card .ic {
  transition: transform .3s var(--ease-out);
}
.card:hover .ic {
  transform: translateY(-3px) rotate(-4deg);
}
.cat-card-logo img { transition: transform .3s var(--ease-out); }
.cat-card:hover .cat-card-logo img { transform: scale(1.05); }

/* Product cards — crisper interaction */
.prod {
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out),
              border-color .25s var(--ease-out);
}
.prod:hover { box-shadow: var(--shadow-lg); }
.prod:hover h4 { color: var(--accent-dk); }
.prod h4 { transition: color .2s var(--ease); }

/* Brand chips */
.brand-chip {
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out),
              color .25s var(--ease-out), background .25s var(--ease-out);
}
.brand-chip:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  color: var(--accent-dk);
}

/* Section heading: stronger rhythm */
.sec-head h2, .cat-head h2 { letter-spacing: -0.02em; }

/* Dark stat strip — subtle top/bottom hairline + number emphasis */
.strip {
  position: relative;
  background:
    radial-gradient(circle at 15% 50%, rgba(191,92,46,.14), transparent 45%),
    radial-gradient(circle at 85% 50%, rgba(111,130,104,.12), transparent 45%),
    var(--ink);
}
.strip .num { transition: transform .3s var(--ease-out); }
.strip > .wrap > div:hover .num { transform: translateY(-3px); }

/* CTA band — gradient glow surface */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(191,92,46,.22), transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(111,130,104,.16), transparent 55%),
    var(--ink);
}

/* Hero visual + split media: faint inner ring for craftsmanship */
.hero-visual, .split-media {
  outline: 1px solid rgba(255,255,255,.06);
  outline-offset: -1px;
}

/* Nav toggle → animated X */
.nav-toggle span { transform-origin: center; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Footer links slide slightly on hover */
.site-footer a { transition: color .2s var(--ease), padding-left .2s var(--ease); }
.site-footer li a:hover { padding-left: 4px; }

/* Custom scrollbar (desktop) */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 11px; }
  ::-webkit-scrollbar-track { background: var(--paper-2); }
  ::-webkit-scrollbar-thumb {
    background: #cdbfa8; border-radius: 6px;
    border: 3px solid var(--paper-2);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
}

/* Anchored sections clear the sticky header when jumped to */
[id] { scroll-margin-top: 96px; }

/* ============================================================
   Pretty pass v2 — bolder color, richer motion
   ============================================================ */

@keyframes shimmer { to { background-position: 200% center; } }

/* Gradient text utility for headline accents */
.grad {
  background: linear-gradient(105deg, var(--accent), var(--gold) 60%, var(--accent-dk));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Warmer, gradient-washed alternating sections */
section.alt {
  background:
    radial-gradient(ellipse 60% 100% at 100% 0%, var(--rust-tint), transparent 55%),
    radial-gradient(ellipse 60% 100% at 0% 100%, var(--sage-tint), transparent 55%),
    var(--paper-2);
}
.catalog-sec.alt {
  background:
    radial-gradient(ellipse 50% 90% at 95% 5%, var(--gold-tint), transparent 55%),
    var(--paper-2);
}

/* Colored hairline between catalog sections */
.catalog-sec { position: relative; }
.catalog-sec::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--sage), var(--gold));
  opacity: .5;
}

/* Per-line colored glow on product-card hover */
.prod[data-cat="haychix"]:hover      { box-shadow: 0 18px 40px -10px rgba(111,130,104,.45); border-color: var(--sage); }
.prod[data-cat="iconoclast"]:hover   { box-shadow: 0 18px 40px -10px rgba(192,138,62,.45);  border-color: var(--gold); }
.prod[data-cat="pht-magnacu"]:hover  { box-shadow: 0 18px 40px -10px rgba(191,92,46,.45);   border-color: var(--accent); }
.prod[data-cat="prime-performance"]:hover { box-shadow: 0 18px 40px -10px rgba(20,20,20,.4); border-color: var(--ink); }

/* Price gets a soft tinted pill */
.prod .price {
  align-self: flex-start;
  background: var(--rust-tint);
  padding: 3px 12px;
  border-radius: 999px;
}
.prod[data-cat="haychix"] .price { background: var(--sage-tint); color: var(--sage-dk); }
.prod[data-cat="iconoclast"] .price { background: var(--gold-tint); color: var(--gold-dk); }

/* Eyebrow tick grows in when revealed */
.js .reveal .eyebrow::before,
.js .eyebrow.reveal::before { width: 0; transition: width .6s var(--ease-out) .2s; }
.js .reveal.in .eyebrow::before,
.js .eyebrow.reveal.in::before { width: 22px; }

/* Directional reveals — uses existing classes, no markup change */
.js .split-text.reveal  { transform: translateX(-44px); }
.js .split-media.reveal { transform: translateX(44px); }
.js .hero-visual.reveal { transform: scale(.92); opacity: 0; }
.js .split-text.reveal.in,
.js .split-media.reveal.in,
.js .hero-visual.reveal.in { transform: none; opacity: 1; }

/* Section headings — animated gradient underline accent */
.sec-head h2, .cat-head h2 { position: relative; }

/* Gradient sweep across the dark catalog intro */
.catalog-intro {
  background:
    radial-gradient(ellipse 50% 120% at 12% 50%, rgba(191,92,46,.28), transparent 60%),
    radial-gradient(ellipse 45% 120% at 90% 50%, rgba(111,130,104,.22), transparent 60%),
    var(--ink);
}

/* Category chips on the shop hero — colorful active states */
.chip:nth-child(5n+1):hover { background: var(--accent); border-color: var(--accent); color:#fff; }
.chip:nth-child(5n+2):hover { background: var(--sage);   border-color: var(--sage);   color:#fff; }
.chip:nth-child(5n+3):hover { background: var(--gold);   border-color: var(--gold);   color:#fff; }

/* Brand chips on the homepage rotate through the palette on hover */
.brand-chip:nth-child(3n+1):hover { border-color: var(--accent); color: var(--accent-dk); }
.brand-chip:nth-child(3n+2):hover { border-color: var(--sage);   color: var(--sage-dk); }
.brand-chip:nth-child(3n+3):hover { border-color: var(--gold);   color: var(--gold-dk); }

/* Feature-card top accent bar, colored per position — now always visible for the icon-less look */
.cards .card { position: relative; overflow: hidden; padding-top: 28px; }
.cards .card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  transform: scaleX(1); transform-origin: left;
  transition: transform .4s var(--ease-out), opacity .3s var(--ease-out);
  opacity: .9;
}
.cards .card:nth-child(3n+1)::before { background: linear-gradient(90deg, var(--accent), var(--accent-dk)); }
.cards .card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--sage), var(--sage-dk)); }
.cards .card:nth-child(3n+3)::before { background: linear-gradient(90deg, var(--gold), var(--gold-dk)); }
.cards .card:hover::before { opacity: 1; }

/* Headline polish for icon-less cards — slab-serif title, short underline, palette-coordinated color */
.cards .card h3 {
  font-family: var(--font-display, "Zilla Slab", serif);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--ink);
  margin: 4px 0 12px;
  position: relative;
  padding-bottom: 12px;
}
.cards .card h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 38px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transition: width .4s var(--ease-out);
}
.cards .card:nth-child(3n+1) h3 { color: var(--accent-dk); }
.cards .card:nth-child(3n+1) h3::after { background: var(--accent); }
.cards .card:nth-child(3n+2) h3 { color: var(--sage-dk); }
.cards .card:nth-child(3n+2) h3::after { background: var(--sage); }
.cards .card:nth-child(3n+3) h3 { color: var(--gold-dk); }
.cards .card:nth-child(3n+3) h3::after { background: var(--gold); }
.cards .card:hover h3::after { width: 64px; }

/* Brand-card titles stay centered to match the centered logo */
.card.brand-card h3 { padding-bottom: 14px; }
.card.brand-card h3::after { left: 50%; transform: translateX(-50%); }

/* Rider photo tiles — gradient instead of flat */
.rider .photo {
  background: linear-gradient(140deg, var(--rust-tint), var(--gold-tint) 55%, var(--sage-tint));
}
.rider:nth-child(even) .photo {
  background: linear-gradient(140deg, var(--sage-tint), var(--rust-tint));
}

/* Stat strip numbers shimmer subtly */
.strip .num {
  background: linear-gradient(100deg, #fff 30%, var(--gold) 50%, #fff 70%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 7s linear infinite;
}

/* Soft float on the hero visual's logo (avoids clashing with reveal transform) */
@keyframes floaty { 50% { transform: translateY(-12px); } }
.hero-visual img { animation: floaty 7s var(--ease) infinite; }

/* ============================================================
   Western detail layer — leather, saddle-stitch, ranch craft
   ============================================================ */

/* Headings: slab serif, a touch heavier and tighter for ranch-sign feel */
h1, h2, h3, h4 { font-weight: 600; }
h1 { font-weight: 700; letter-spacing: -0.015em; }

/* Buttons — rugged uppercase tracking + warm leather ring */
.btn {
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .82rem;
  font-weight: 600;
  padding: 15px 30px;
}
.btn-ghost {
  border-color: var(--leather);
  color: var(--leather);
}
.btn-ghost:hover { background: var(--leather); border-color: var(--leather); }

/* Saddle-stitch — dashed inner border on cards (the signature western touch) */
.card, .cat-card, .policy, .contact-card, .line-card,
.rider, .featured-slot, .prod {
  position: relative;
}
.card::after, .cat-card::after, .policy::after, .contact-card::after,
.line-card::after, .rider::after, .featured-slot::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed var(--line);
  border-radius: inherit;
  pointer-events: none;
  opacity: .55;
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
}
.card:hover::after, .cat-card:hover::after, .policy:hover::after,
.contact-card:hover::after, .line-card:hover::after, .rider:hover::after {
  opacity: 1;
  border-color: var(--accent);
}

/* Warm leather borders + softer card surfaces */
.card, .cat-card, .policy, .contact-card, .line-card, .rider,
.prod, .shop-embed-placeholder, .featured-slot {
  border-color: var(--line);
}

/* Decorative western rule — a centered diamond between major sections */
.western-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto;
  max-width: 220px;
  color: var(--accent);
}
.western-rule::before, .western-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--leather));
}
.western-rule::after { background: linear-gradient(90deg, var(--leather), transparent); }
.western-rule span {
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--accent);
}

/* Eyebrow labels — leather-tone, ranch-sign tracking */
.eyebrow {
  color: var(--accent);
  letter-spacing: .2em;
  font-weight: 700;
}
.eyebrow::before { background: var(--leather); }

/* Section headings get a subtle warm underline flourish */
.sec-head h2::after {
  content: "";
  display: block;
  width: 54px; height: 3px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  border-radius: 2px;
}
.sec-head.center h2::after { margin-left: auto; margin-right: auto; }

/* Inputs — warm parchment fields */
.form-field input, .form-field textarea {
  background: var(--white);
  border-color: var(--line);
}

/* Footer — leather-dark with a copper top edge */
.site-footer {
  border-top: 3px solid var(--accent);
  background:
    radial-gradient(ellipse 60% 100% at 100% 0%, rgba(179,92,46,.14), transparent 55%),
    var(--ink);
}

/* Header — parchment with a faint leather underline when scrolled */
.site-header.scrolled { border-bottom-color: var(--leather); }

/* Soft warm vignette on dark panels so they feel lit, not flat */
.strip, .catalog-intro, .special-sec, .cta-band {
  box-shadow: inset 0 0 120px rgba(0,0,0,.25);
}

/* ============================================================
   Homepage redesign — hero, brands, featured, CTA elements
   ============================================================ */

/* Text-style button (hero third CTA) */
.btn-text {
  background: transparent;
  border-color: transparent;
  color: var(--accent-dk);
  padding: 15px 12px;
  box-shadow: none;
}
.btn-text:hover { color: var(--accent); background: transparent; transform: translateY(-2px); }
.btn-text::after { display: none; }

/* Hero trust badges */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}
.hero-trust span {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--leather);
  display: flex; align-items: center; gap: 8px;
}
.hero-trust span::before {
  content: "";
  width: 14px; height: 14px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Card icons — SVG line icons in tinted leather tiles */
.card .ic {
  width: 54px; height: 54px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--accent);
}
.card .ic svg { width: 28px; height: 28px; }
.cards .card:nth-child(3n+1) .ic { color: var(--accent); }
.cards .card:nth-child(3n+2) .ic { color: var(--sage-dk); }
.cards .card:nth-child(3n+3) .ic { color: var(--gold-dk); }

/* Brand strip — authorized dealer logos */
.brand-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.brand-logo {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: 116px;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.brand-logo:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}
.brand-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }

/* Brand cards — used on Product Info "What we carry" — pairs a brand logo with name + description */
.card.brand-card { text-align: center; padding-top: 22px; }
.brand-card-logo {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  height: 96px;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 18px;
  margin: 0 auto 14px;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.brand-card:hover .brand-card-logo {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}
.brand-card-logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.brand-card h3 { margin-top: 4px; }

.brand-more {
  text-align: center;
  margin-top: 26px;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* Featured-product placeholders — finished-looking dashed cards */
.featured-slot {
  background:
    radial-gradient(ellipse 80% 80% at 50% 0%, var(--rust-tint), transparent 70%),
    var(--white);
  border: 1px solid var(--line);
  gap: 10px;
  padding: 38px 26px;
}
.fs-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 4px;
}
.fs-icon svg { width: 24px; height: 24px; }
.featured-slot .lbl { font-size: 1.02rem; }
.featured-slot span:last-child { font-size: .86rem; max-width: 230px; margin: 0 auto; }

/* Final CTA band — stronger closing banner */
.cta-band .eyebrow { color: var(--gold); justify-content: center; }
.cta-band .eyebrow::before { background: var(--gold); }
.cta-band h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.cta-actions {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-top: 28px;
}
.cta-band .btn-ghost {
  border-color: rgba(255,255,255,.45);
  color: #fff;
}
.cta-band .btn-ghost:hover {
  background: #fff; color: var(--ink); border-color: #fff;
}

/* Eyebrow tick visible on dark intro panels */
.catalog-intro .eyebrow { color: var(--gold); }
.catalog-intro .eyebrow::before { background: var(--gold); }

/* ============================================================
   Turquoise accents + rust background graphics + extra motion
   ============================================================ */

/* Hero accent: solid rust-dk italic with a thin gradient underline — replaces the prior gradient-clipped text */
.hero h1 .accent {
  color: var(--accent-dk);
}

/* (spinning horseshoe removed) */

/* Turquoise sunburst behind a section for color contrast */
/* (sunburst emblem removed) */
section.alt, .catalog-sec.alt { position: relative; }

/* Brand-logo strip: classier, uniform tile, mute→full color on hover */
.brand-logo {
  background: var(--white);
  height: 150px;
  padding: 26px;
  filter: saturate(.85);
  transition: filter .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.brand-logo img {
  max-height: 100%; max-width: 100%;
  object-fit: contain;
  transition: transform .35s var(--ease-out);
}
.brand-logo:hover {
  filter: saturate(1.1);
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--turquoise);
}
.brand-logo:hover img { transform: scale(1.04); }

/* Chips: rotate through 4 colors now including turquoise */
.chip:nth-child(4n+1):hover { background: var(--accent);    border-color: var(--accent);    color:#fff; }
.chip:nth-child(4n+2):hover { background: var(--sage);      border-color: var(--sage);      color:#fff; }
.chip:nth-child(4n+3):hover { background: var(--gold);      border-color: var(--gold);      color:#fff; }
.chip:nth-child(4n+4):hover { background: var(--turquoise); border-color: var(--turquoise); color:#fff; }

/* Brand chips on homepage cycle in 4 colors too */
.brand-chip:nth-child(4n+4):hover { border-color: var(--turquoise); color: var(--turquoise-dk); }

/* "Visit the Online Store" / strip numbers shimmer includes turquoise */
.strip .num {
  background: linear-gradient(100deg, #fff 25%, var(--turquoise) 45%, var(--gold) 55%, #fff 75%);
  background-size: 220% auto;
}

/* Section dividers — colored hairline trio (rust/turquoise/gold) */
.sec-head h2::after {
  background: linear-gradient(90deg, var(--accent), var(--turquoise) 50%, var(--gold));
}

/* Eyebrow tick alternates per section for variety */
section:nth-of-type(4n+2) .eyebrow::before { background: var(--turquoise); }
section:nth-of-type(4n+3) .eyebrow::before { background: var(--gold-dk); }
section:nth-of-type(4n+4) .eyebrow::before { background: var(--sage-dk); }

/* Card icon colors include turquoise option */
.cards .card:nth-child(4n+4) .ic { color: var(--turquoise-dk); }

/* Rider tiles — turquoise mood for some */
.rider:nth-child(3n+1) .photo { background: linear-gradient(140deg, var(--rust-tint), var(--gold-tint)); color: var(--accent); }
.rider:nth-child(3n+2) .photo { background: linear-gradient(140deg, var(--turq-tint), var(--sage-tint)); color: var(--turquoise-dk); }
.rider:nth-child(3n+3) .photo { background: linear-gradient(140deg, var(--gold-tint), var(--rust-tint)); color: var(--gold-dk); }

/* CTA band — turquoise glow in the corner */
.cta-band {
  background:
    radial-gradient(circle at 18% 0%, rgba(179,92,46,.30), transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(47,138,140,.22), transparent 55%),
    var(--ink);
}

/* Fun extras */
.btn-primary:hover { animation: nudge .35s var(--ease-out); }
@keyframes nudge {
  30% { transform: translateY(-5px) rotate(-1deg); }
  60% { transform: translateY(-2px) rotate(1deg); }
  100% { transform: translateY(-3px); }
}

/* Trust badges get a sparkle bounce on load */
.hero-trust span { animation: badge-pop .8s var(--ease-out) both; }
.hero-trust span:nth-child(1) { animation-delay: .8s; }
.hero-trust span:nth-child(2) { animation-delay: .95s; }
.hero-trust span:nth-child(3) { animation-delay: 1.1s; }
@keyframes badge-pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Subtle saddle-stitch turquoise accent on featured slots */
.featured-slot::after { border-color: var(--turquoise) !important; opacity: .35; }

/* ============================================================
   Texture pass — rustic + turquoise, layered for 3D depth
   ============================================================ */

/* Body — rustic atmospheric foundation under a parchment veil */
body {
  background:
    linear-gradient(rgba(244,234,216,.93), rgba(244,234,216,.93)),
    url("../assets/texture-rustic.jpg") center / cover fixed;
}

/* Reusable utilities */
.texture-rustic {
  background-image:
    linear-gradient(rgba(26,20,14,.78), rgba(26,20,14,.78)),
    url("../assets/texture-rustic.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
}
.texture-turquoise {
  background-image: url("../assets/texture-turquoise.webp");
  background-size: cover;
  background-position: center;
}
.parchment-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 18px 40px -18px rgba(20,14,8,.35);
}
.raised-card {
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 22px 48px -22px rgba(20,14,8,.45);
}
.section-overlay {
  position: relative;
  isolation: isolate;
}
.section-overlay::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(26,20,14,.72), rgba(26,20,14,.85));
}

/* Hero — rustic atmosphere with parchment veil */
.hero {
  background:
    linear-gradient(rgba(244,234,216,.82), rgba(244,234,216,.94) 70%),
    url("../assets/texture-rustic.jpg") center / cover;
}

/* Hero visual dark box — rustic with deep overlay + turquoise corner glow */
.hero-visual {
  background:
    radial-gradient(circle at 22% 18%, rgba(31,159,163,.30), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(177,90,44,.32), transparent 60%),
    linear-gradient(rgba(15,11,7,.78), rgba(15,11,7,.92)),
    url("../assets/texture-rustic.jpg") center / cover;
}

/* Inner pages — page-hero with rustic + parchment veil */
.page-hero {
  background:
    radial-gradient(ellipse 70% 90% at 90% -10%, var(--glow-rust), transparent 60%),
    radial-gradient(ellipse 50% 80% at 0% 110%, var(--glow-turq), transparent 60%),
    linear-gradient(rgba(244,234,216,.88), rgba(230,214,182,.88)),
    url("../assets/texture-rustic.jpg") center / cover;
}

/* Stats strip — rustic with deep leather veil */
.strip {
  background:
    radial-gradient(circle at 15% 50%, rgba(177,90,44,.25), transparent 50%),
    radial-gradient(circle at 85% 50%, rgba(31,159,163,.18), transparent 50%),
    linear-gradient(rgba(15,11,7,.82), rgba(15,11,7,.90)),
    url("../assets/texture-rustic.jpg") center / cover;
}

/* Dark catalog intro band */
.catalog-intro {
  background:
    radial-gradient(ellipse 50% 120% at 12% 50%, rgba(177,90,44,.32), transparent 60%),
    radial-gradient(ellipse 45% 120% at 90% 50%, rgba(31,159,163,.22), transparent 60%),
    linear-gradient(rgba(15,11,7,.85), rgba(15,11,7,.92)),
    url("../assets/texture-rustic.jpg") center / cover;
}

/* Special-order section — dark rustic with gold glow */
.special-sec {
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(198,154,75,.20), transparent 55%),
    linear-gradient(rgba(15,11,7,.88), rgba(15,11,7,.93)),
    url("../assets/texture-rustic.jpg") center / cover;
}

/* CTA band — rustic + rust + turquoise corner glow */
.cta-band {
  background:
    radial-gradient(circle at 18% 0%, rgba(177,90,44,.34), transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(31,159,163,.26), transparent 55%),
    linear-gradient(rgba(15,11,7,.84), rgba(15,11,7,.94)),
    url("../assets/texture-rustic.jpg") center / cover;
}

/* Alt sections — keep parchment but the body texture peeks through subtly */
section.alt {
  background:
    linear-gradient(rgba(230,214,182,.78), rgba(230,214,182,.92)),
    url("../assets/texture-rustic.jpg") center / cover;
}
.catalog-sec.alt {
  background:
    radial-gradient(ellipse 50% 90% at 95% 5%, var(--gold-tint), transparent 55%),
    linear-gradient(rgba(230,214,182,.82), rgba(230,214,182,.92)),
    url("../assets/texture-rustic.jpg") center / cover;
}

/* Cards sit RAISED above the textured ground for depth */
.card, .cat-card, .policy, .contact-card, .line-card, .rider,
.featured-slot, .prod, .brand-logo, .shop-embed-placeholder {
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 14px 32px -14px rgba(20,14,8,.30);
}
.card:hover, .cat-card:hover, .prod:hover, .brand-logo:hover,
.line-card:hover, .rider:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 24px 56px -18px rgba(20,14,8,.42);
}

/* Turquoise top accent strip on cards (premium accent per the brief) */
.featured-slot, .rider {
  border-top: 3px solid transparent;
  background-clip: padding-box;
}
.featured-slot {
  border-image: linear-gradient(90deg, var(--turquoise), var(--gold)) 1;
  border-top: 3px solid var(--turquoise);
}
.rider {
  border-top: 3px solid var(--turquoise);
}

/* Authorized Dealer panel — turquoise stone accent strip */
section.alt .sec-head .eyebrow {
  background: var(--tx-turq);
  background-image:
    linear-gradient(rgba(31,159,163,.65), rgba(12,95,100,.85)),
    url("../assets/texture-turquoise.webp");
  background-size: cover;
  color: #fff;
  padding: 6px 14px 6px 18px;
  border-radius: 999px;
  box-shadow: 0 4px 14px -4px rgba(12,95,100,.45);
}
section.alt .sec-head .eyebrow::before {
  background: rgba(255,255,255,.85);
}

/* Western-panel utility (used elsewhere) */
.western-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  position: relative;
}
.western-panel::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px dashed var(--line); border-radius: inherit; pointer-events: none;
}

/* Turquoise badge utility */
.turquoise-accent {
  display: inline-block;
  padding: 6px 14px;
  background-image:
    linear-gradient(rgba(31,159,163,.7), rgba(12,95,100,.85)),
    url("../assets/texture-turquoise.webp");
  background-size: cover;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px -4px rgba(12,95,100,.45);
}

/* Footer — rustic + dark, with copper top edge */
.site-footer {
  border-top: 3px solid var(--accent);
  background:
    radial-gradient(ellipse 60% 100% at 100% 0%, rgba(177,90,44,.14), transparent 55%),
    radial-gradient(ellipse 50% 80% at 0% 100%, rgba(31,159,163,.10), transparent 55%),
    linear-gradient(rgba(15,11,7,.92), rgba(15,11,7,.96)),
    url("../assets/texture-rustic.jpg") center / cover;
}

/* Header — parchment with rustic warmth coming through */
.site-header {
  background:
    linear-gradient(rgba(244,234,216,.86), rgba(244,234,216,.86)),
    url("../assets/texture-rustic.jpg") center / cover;
  backdrop-filter: blur(8px) saturate(1.2);
}
.site-header.scrolled {
  background:
    linear-gradient(rgba(244,234,216,.96), rgba(244,234,216,.96)),
    url("../assets/texture-rustic.jpg") center / cover;
}

/* Button hover with turquoise stone shimmer accent */
.btn-ghost:hover {
  background: var(--ink);
  border-color: var(--turquoise);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(31,159,163,.18);
}

/* Section turquoise dividers — thin stone strip between transitions */
.cta-band, .strip, .catalog-intro, .special-sec {
  border-top: 1px solid rgba(31,159,163,.4);
}

/* Hero-visual tag readability already fixed above (gold + shadow) */

/* ============================================================
   Turquoise-rock buttons + rust borders on text boxes & cards
   ============================================================ */

/* Primary buttons — turquoise stone texture */
.btn-primary {
  background-image:
    linear-gradient(135deg, rgba(31,159,163,.55), rgba(12,95,100,.75)),
    url("../assets/texture-turquoise.webp");
  background-size: 220% auto, cover;
  background-position: 0% center, center;
  color: #fff;
  border: 1.5px solid var(--turquoise-dk);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 8px 22px -6px rgba(12,95,100,.55);
}
.btn-primary:hover {
  background-image:
    linear-gradient(135deg, rgba(12,95,100,.55), rgba(31,159,163,.45)),
    url("../assets/texture-turquoise.webp");
  background-position: 100% center, center;
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 14px 32px -8px rgba(12,95,100,.7);
  border-color: var(--turquoise);
  color: #fff;
  animation: none;
}

/* CTA band override → keep turquoise stone too (don't revert to rust) */
.cta-band .btn-primary {
  background-image:
    linear-gradient(135deg, rgba(31,159,163,.55), rgba(12,95,100,.75)),
    url("../assets/texture-turquoise.webp");
}
.cta-band .btn-primary:hover { background-position: 100% center, center; }

/* Rust borders on actual text-input boxes */
.form-field input,
.form-field textarea {
  border: 2px solid var(--accent);
  background: var(--white);
  color: var(--ink);
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--accent-dk);
  box-shadow: 0 0 0 3px rgba(177,90,44,.20);
}

/* Rust borders on content "text boxes" — every card/panel that holds copy */
.card,
.cat-card,
.policy,
.contact-card,
.line-card,
.featured-slot,
.prod,
.rider,
.brand-logo,
.shop-embed-placeholder,
.western-panel {
  border: 1.5px solid var(--accent);
}
/* Slightly tighter colors on hover so it stays cohesive */
.card:hover, .cat-card:hover, .policy:hover, .contact-card:hover,
.line-card:hover, .featured-slot:hover, .prod:hover, .rider:hover,
.brand-logo:hover, .western-panel:hover {
  border-color: var(--accent-dk);
}

/* The dashed inner saddle-stitch also goes rust, so the two borders feel paired */
.card::after, .cat-card::after, .policy::after, .contact-card::after,
.line-card::after, .rider::after, .featured-slot::after {
  border-color: rgba(177,90,44,.55);
}

/* Featured-slot keeps its turquoise top edge (was set earlier) — but make
   sure the rust border on the other 3 sides reads. */
.featured-slot { border-top: 3px solid var(--turquoise); }
.rider { border-top: 3px solid var(--turquoise); }

/* Inner-page hero text panels — wrap in a faint rust frame on the headline area */
.page-hero h1 { border-left: 3px solid var(--accent); padding-left: 14px; }

/* Hero text panel (homepage): subtle rust frame on the headline only */
.hero h1 { border-left: 3px solid var(--accent); padding-left: 16px; }

/* ============================================================
   Clean pass — turquoise-rock borders, prominent rustic bg,
   simpler card system, smooth transitions
   ============================================================ */

/* Body: let the rustic image come through clearly */
body {
  background:
    linear-gradient(rgba(244,234,216,.78), rgba(244,234,216,.86)),
    url("../assets/texture-rustic.jpg") center / cover fixed;
}

/* Sections: much lighter veils so the page reads as ONE continuous
   rustic backdrop, with subtle warmth shifts between blocks.        */
section.alt {
  background:
    linear-gradient(rgba(230,214,182,.62), rgba(230,214,182,.70)),
    url("../assets/texture-rustic.jpg") center / cover;
}
.catalog-sec.alt {
  background:
    linear-gradient(rgba(230,214,182,.66), rgba(230,214,182,.74)),
    url("../assets/texture-rustic.jpg") center / cover;
}
.hero {
  background:
    linear-gradient(rgba(244,234,216,.66), rgba(244,234,216,.86) 75%),
    url("../assets/texture-rustic.jpg") center / cover;
}
.page-hero {
  background:
    linear-gradient(rgba(244,234,216,.72), rgba(230,214,182,.80)),
    url("../assets/texture-rustic.jpg") center / cover;
}

/* Soft fades between sections — eliminate hard seam lines */
section, .catalog-sec {
  position: relative;
}
section + section::before,
.catalog-sec + .catalog-sec::before,
section + .catalog-sec::before,
.catalog-sec + section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(to bottom, rgba(244,234,216,.35), transparent);
  pointer-events: none;
}

/* Buttons → use the new "turquoise 2" stone image */
.btn-primary {
  background-image:
    linear-gradient(135deg, rgba(31,159,163,.45), rgba(12,95,100,.65)),
    url("../assets/texture-turquoise-2.jpg");
  background-size: cover, cover;
  background-position: center, center;
  border: 1.5px solid var(--turquoise-dk);
}
.btn-primary:hover {
  background-image:
    linear-gradient(135deg, rgba(12,95,100,.50), rgba(31,159,163,.35)),
    url("../assets/texture-turquoise-2.jpg");
  background-position: center, 30% center;
}
.cta-band .btn-primary {
  background-image:
    linear-gradient(135deg, rgba(31,159,163,.45), rgba(12,95,100,.65)),
    url("../assets/texture-turquoise-2.jpg");
}

/* Text boxes & cards: the actual turquoise rock as the BORDER */
.card, .cat-card, .policy, .contact-card, .line-card,
.featured-slot, .prod, .rider, .brand-logo,
.shop-embed-placeholder, .western-panel,
.form-field input, .form-field textarea {
  border: 4px solid transparent;
  border-image: url("../assets/texture-turquoise-2.jpg") 30 round;
  border-image-outset: 0;
}
/* Solid turquoise fallback for browsers without border-image */
.card, .cat-card, .policy, .contact-card, .line-card,
.featured-slot, .prod, .rider, .brand-logo,
.shop-embed-placeholder, .western-panel {
  border-color: var(--turquoise);
}
.form-field input, .form-field textarea { border-color: var(--turquoise-dk); }
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(31,159,163,.25);
  border-image-source: url("../assets/texture-turquoise-2.jpg");
}

/* Clean up — drop the noisy dashed saddle-stitch inner border and the
   rust frame on the H1s. Single elegant turquoise frame instead. */
.card::after, .cat-card::after, .policy::after, .contact-card::after,
.line-card::after, .rider::after, .featured-slot::after { display: none; }

.hero h1, .page-hero h1 { border-left: 0; padding-left: 0; }

/* Slightly softer card shadows for the cleaner look */
.card, .cat-card, .policy, .contact-card, .line-card, .rider,
.featured-slot, .prod, .brand-logo {
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 10px 24px -12px rgba(20,14,8,.28);
}

/* Featured-slot keeps its turquoise top accent (still consistent) */
.featured-slot, .rider { border-top: 4px solid transparent; }

/* Make sure dark sections still feel dark (rustic prominent + dark veil) */
.strip, .catalog-intro, .special-sec, .cta-band {
  background-blend-mode: normal;
}

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  section { padding: 64px 0; }
  .hero-grid, .split, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .split.reverse .split-text { order: 0; }
  .cards { grid-template-columns: 1fr 1fr; }
  .featured-grid { grid-template-columns: 1fr; }
  .cat-card-grid { grid-template-columns: 1fr 1fr; }
  .brand-strip { grid-template-columns: repeat(3, 1fr); }
  .strip-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-visual { aspect-ratio: 16/10; }
  .cat-head { flex-wrap: wrap; gap: 14px; }
  .cat-count { margin-left: 0; }

  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset: 78px 0 auto 0;
    background: var(--paper);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 12px 24px 24px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-120%);
    transition: transform .35s var(--ease);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links li { width: 100%; }
  .nav-links a:not(.btn) {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    width: 100%;
  }
  .nav-links .btn { margin-top: 14px; }
}

@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .cat-card-grid { grid-template-columns: 1fr; }
  .brand-strip { grid-template-columns: 1fr 1fr; gap: 12px; }
  .prod-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .strip-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .cta-band { padding: 48px 24px; }
  .hero { padding: 64px 0; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .cta-actions { flex-direction: column; }
}

/* Small phones ~380px */
@media (max-width: 400px) {
  .wrap { padding: 0 18px; }
  h1 { font-size: 2rem; }
  .prod-grid { grid-template-columns: 1fr; }
  .brand-strip { grid-template-columns: 1fr; }
  .strip-grid { grid-template-columns: 1fr; gap: 22px; }
  .btn { width: 100%; justify-content: center; }
  .nav-links .btn { width: 100%; }
}

/* ============================================================================
   CLIENT-REVIEW POLISH PASS (v=11)
   - IM Fell DW Pica display font
   - Turquoise-rock title system
   - Stronger Shop Now button contrast
   - Refined page heroes, eyebrows, cards, CTA bands
   ============================================================================ */

:root {
  --font-display: "IM Fell DW Pica", "Zilla Slab", Georgia, serif;
  --tx-turq-url: url("../assets/texture-turquoise-2.jpg");
  --tx-rust-url: url("../assets/texture-rustic.jpg");
}

/* ===== Headline typography — IM Fell DW Pica for display ============= */
.hero h1,
.page-hero h1,
.cta-band h2,
.sec-head h2,
.split-text h2,
section h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .005em;
}

.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1.05;
  font-style: normal;
}
.hero h1 .accent {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent-dk);
}

.page-hero h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  line-height: 1.08;
}

.sec-head h2,
.split-text h2,
section h2,
.cta-band h2 {
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  line-height: 1.12;
}

/* Card titles keep the slab face — IM Fell would be too delicate at 1.3rem */
.card h3, .cards .card h3, .featured-slot .lbl,
.brand-card h3, .policy h3, .rider .info strong,
.contact-line strong {
  font-family: "Zilla Slab", Georgia, serif;
}

/* ===== Turquoise-rock title accent system ============================ */
/* Centered section heads (sec-head.center) get a stone underline */
.sec-head.center h2,
.cta-band h2 { position: relative; padding-bottom: 22px; display: inline-block; }
.sec-head.center { text-align: center; }
.sec-head.center h2::after,
.cta-band h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 140px;
  height: 8px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.55) inset,
    0 4px 10px -4px rgba(20,14,8,.45);
  opacity: .95;
}

/* Left-aligned sec-heads get a short stone bar above the h2 */
.sec-head:not(.center) h2 { position: relative; padding-top: 18px; }
.sec-head:not(.center) h2::before {
  content: "";
  display: block;
  width: 72px;
  height: 6px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  border-radius: 4px;
  margin-bottom: 14px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.5) inset;
}

/* Split-text h2 also gets the stone bar */
.split-text h2 { position: relative; padding-top: 18px; }
.split-text h2::before {
  content: "";
  display: block;
  width: 72px;
  height: 6px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  border-radius: 4px;
  margin-bottom: 14px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.5) inset;
}

/* ===== Page hero — stronger, more western frame ====================== */
.page-hero {
  position: relative;
  padding: 90px 0 70px;
  background:
    linear-gradient(180deg, rgba(28,22,16,.84), rgba(28,22,16,.72)),
    var(--tx-rust-url) center / cover;
  color: var(--parchment, #efe2cb);
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset, 0 -2px 6px rgba(0,0,0,.3);
}
.page-hero h1 {
  color: var(--parchment, #efe2cb);
  border-left: 0;
  padding-left: 0;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.page-hero p {
  color: rgba(255,253,247,.86);
  max-width: 640px;
  font-size: 1.12rem;
}
.page-hero .crumbs {
  color: rgba(255,253,247,.7);
  margin-bottom: 14px;
  font-family: "Inter", sans-serif;
  font-size: .9rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.page-hero .crumbs a { color: var(--gold); text-decoration: none; }
.page-hero .crumbs a:hover { color: var(--turquoise, #5fc6c9); }

/* ===== Eyebrow refinement (turquoise-stone style) ==================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-dk);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 4px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  border-radius: 3px;
}
section.alt .eyebrow { color: var(--gold-dk); }
.page-hero .eyebrow { color: var(--gold); }
.page-hero .eyebrow::before { background-image: var(--tx-turq-url); }

/* ===== Shop Now button — strong contrast, white text, lift ============ */
.btn.btn-primary {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
  background-image: var(--tx-turq-url);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0,0,0,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 8px 20px -8px rgba(20,14,8,.55);
  font-weight: 700;
  letter-spacing: .02em;
}
.btn.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 100%);
  pointer-events: none;
  border-radius: inherit;
}
.btn.btn-primary { position: relative; overflow: hidden; }
.btn.btn-primary:hover {
  filter: brightness(1.08) saturate(1.1);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 14px 28px -10px rgba(20,14,8,.6);
}
.btn.btn-primary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* Nav Shop Now stays compact + readable */
.nav-links .btn.btn-primary {
  padding: 11px 22px;
  font-size: .95rem;
  letter-spacing: .04em;
}

/* Ghost + text buttons retain contrast against page-hero dark bg */
.page-hero .btn.btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.page-hero .btn.btn-ghost:hover { background: rgba(255,255,255,.1); }

/* ===== Stats strip — darker leather with turquoise top accent ======== */
.strip { position: relative; border-top: 0; }
.strip::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 6px;
  background-image: var(--tx-turq-url);
  background-size: cover;
}

/* ===== Card hover refinement ========================================= */
.cards .card { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out); }
.cards .card:hover { border-color: rgba(20,14,8,.18); }

/* Brand-strip tiles get a subtle turquoise hover frame */
.brand-logo {
  border: 1px solid var(--line);
  position: relative;
}
.brand-logo:hover {
  border-color: transparent;
  box-shadow:
    0 0 0 2px var(--turquoise, #5fc6c9),
    0 14px 28px -12px rgba(20,14,8,.4);
}

/* ===== CTA band — heavier western band with stone trim ============== */
.cta-band {
  position: relative;
  background:
    linear-gradient(180deg, rgba(28,22,16,.86), rgba(28,22,16,.78)),
    var(--tx-rust-url) center / cover;
  color: var(--parchment, #efe2cb);
  border-radius: 18px;
  padding: 70px 40px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(20,14,8,.6);
}
.cta-band::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 8px;
  background-image: var(--tx-turq-url);
  background-size: cover;
}
.cta-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 8px;
  background-image: var(--tx-turq-url);
  background-size: cover;
}
.cta-band h2 { color: var(--parchment, #efe2cb); }
.cta-band p { color: rgba(255,253,247,.85); max-width: 620px; margin: 0 auto 26px; font-size: 1.08rem; }
.cta-band .eyebrow { color: var(--gold); }

/* ===== Footer polish ================================================= */
.site-footer {
  position: relative;
  background:
    linear-gradient(180deg, rgba(20,14,8,.94), rgba(20,14,8,.96)),
    var(--tx-rust-url) center / cover;
  color: rgba(255,253,247,.82);
  padding-top: 64px;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 6px;
  background-image: var(--tx-turq-url);
  background-size: cover;
}
.site-footer h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold);
  letter-spacing: .02em;
  margin-bottom: 14px;
}
.site-footer a { color: rgba(255,253,247,.82); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,253,247,.15);
  color: rgba(255,253,247,.6);
}

/* ===== Header polish ================================================= */
.site-header {
  background: rgba(245,235,217,.92);
  backdrop-filter: blur(8px) saturate(1.05);
  border-bottom: 1px solid rgba(20,14,8,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 14px -6px rgba(20,14,8,.15);
}
.nav-links a:not(.btn) {
  color: var(--ink);
  font-weight: 500;
  font-size: .95rem;
  position: relative;
  padding: 8px 2px;
  transition: color .2s var(--ease-out);
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn).active { color: var(--accent-dk); }
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).active::after { transform: scaleX(1); }

/* ===== Rider tiles — turquoise top, parchment frame ================== */
.rider {
  border-top: 4px solid transparent;
  background-image: var(--tx-turq-url);
  background-size: cover;
  background-clip: border-box;
  position: relative;
  overflow: hidden;
}
.rider::before {
  content: "";
  position: absolute;
  inset: 4px 0 0;
  background: var(--white);
  border-radius: inherit;
  z-index: 0;
}
.rider > * { position: relative; z-index: 1; }

/* ===== Form polish =================================================== */
.form-field input, .form-field textarea {
  font-family: "Inter", sans-serif;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,253,247,.95);
  padding: 14px 16px;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--turquoise, #5fc6c9);
  box-shadow: 0 0 0 4px rgba(31,159,163,.18);
  background: #fff;
}
.form-field label {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

/* ===== Contact card polish =========================================== */
.contact-line {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.contact-line:last-child { border-bottom: 0; }
.contact-line strong {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-dk);
  margin-bottom: 4px;
}

/* ===== Policy card polish ============================================ */
.policy {
  padding: 28px 32px;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  margin-bottom: 18px;
  position: relative;
  border-left: 4px solid transparent;
  background-clip: padding-box;
}
.policy::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  border-radius: 14px 0 0 14px;
}
.policy h3 {
  font-family: "Zilla Slab", Georgia, serif;
  margin-bottom: 10px;
  color: var(--accent-dk);
}

/* ===== Catalog category heads (shop page) — clean, no icon =========== */
.cat-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 2px solid transparent;
  margin-bottom: 24px;
  position: relative;
}
.cat-head::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 120px;
  height: 6px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.5) inset;
}
.cat-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  line-height: 1.1;
  margin: 0 0 4px;
  color: var(--ink);
}
.cat-head p { margin: 0; color: var(--ink-soft); font-size: .98rem; max-width: 540px; }
.cat-head .cat-count {
  font-family: "Inter", sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-dk);
  white-space: nowrap;
}

/* ===== Product cards ================================================== */
.prod {
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
  display: flex;
  flex-direction: column;
}
.prod:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -18px rgba(20,14,8,.35);
  border-color: rgba(20,14,8,.18);
}
.prod-img {
  aspect-ratio: 1/1;
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
}
.prod-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.prod-body { padding: 16px 18px 20px; }
.prod-body h4 {
  font-family: "Zilla Slab", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 6px;
  line-height: 1.25;
  color: var(--ink);
}
.prod-body .price {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: var(--accent-dk);
  font-size: 1.05rem;
}

/* ===== Catalog intro + special-sec ==================================== */
.catalog-intro, .special-sec {
  position: relative;
  padding: 36px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,253,247,.96), rgba(255,253,247,.92)),
    var(--tx-rust-url) center / cover;
  margin: 28px 0;
  border-left: 6px solid transparent;
  background-clip: padding-box;
}
.catalog-intro::before, .special-sec::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 6px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  border-radius: 14px 0 0 14px;
}

/* ===== Sponsored-rider photo tiles (placeholder initials) ============ */
.rider .photo {
  height: 220px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 3.6rem;
  color: rgba(20,14,8,.35);
  letter-spacing: .04em;
}

/* ===== Reduce-motion safety ========================================== */
@media (prefers-reduced-motion: reduce) {
  .btn.btn-primary:hover { transform: none; }
  .nav-links a:not(.btn)::after { transition: none; }
}

/* ===== Responsive polish ============================================= */
@media (max-width: 920px) {
  .page-hero { padding: 72px 0 56px; }
  .cta-band { padding: 54px 28px; }
  .sec-head.center h2::after { width: 110px; height: 6px; }
}
@media (max-width: 600px) {
  .page-hero h1 { font-size: 2.1rem; }
  .hero h1 { font-size: 2.2rem; }
  .sec-head.center h2::after { width: 88px; height: 5px; }
  .cta-band { padding: 44px 22px; border-radius: 14px; }
  .cards .card { padding: 28px 22px; padding-top: 24px; }
  .policy { padding: 22px 22px 22px 24px; }
}

/* ============================================================================
   v=12 — Cowhide header + Top-bar (Connie + phone)
   ============================================================================ */

:root {
  --tx-cowhide-url: url("../assets/cowhide.svg");
  --turq-bright: #2bc8c9;
  --turq-glow: #5fe3e4;
  --leather-dark: #15110a;
}

/* ----- TOP BAR ------------------------------------------------------------- */
.top-bar {
  background: var(--leather-dark);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15)),
    var(--tx-rust-url);
  background-size: cover;
  background-position: center;
  border-bottom: 3px solid rgba(0,0,0,.45);
  position: relative;
  z-index: 50;
}
.top-bar::before, .top-bar::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 4px;
  background-image: var(--tx-turq-url);
  background-size: cover;
}
.top-bar::before { top: 0; }
.top-bar::after  { bottom: 0; }
.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 14px 0;
  text-align: center;
  flex-wrap: wrap;
}
.top-bar .tb-name,
.top-bar .tb-phone {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  letter-spacing: .025em;
  color: var(--turq-bright);
  text-shadow:
    0 1px 0 rgba(0,0,0,.5),
    0 2px 14px rgba(43,200,201,.4),
    0 0 24px rgba(43,200,201,.22);
  line-height: 1.05;
}
.top-bar .tb-phone {
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, text-shadow .2s ease, transform .2s ease;
}
.top-bar .tb-phone:hover,
.top-bar .tb-phone:focus-visible {
  color: var(--turq-glow);
  text-shadow:
    0 1px 0 rgba(0,0,0,.5),
    0 2px 18px rgba(95,227,228,.6),
    0 0 32px rgba(95,227,228,.32);
  transform: translateY(-1px);
}
.top-bar .tb-sep {
  display: inline-block;
  width: 12px; height: 12px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.4) inset,
    0 0 12px rgba(43,200,201,.4);
}

/* ----- COWHIDE HEADER ------------------------------------------------------ */
.site-header {
  background: #efe2c4;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.05) 60%, rgba(0,0,0,.18)),
    var(--tx-cowhide-url);
  background-size: cover;
  background-position: center;
  backdrop-filter: none;
  border-bottom: 4px solid var(--leather-dark);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 8px 22px -10px rgba(20,14,8,.4);
  position: relative;
}
.site-header::before {
  /* extra warmth + cohesion */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246,236,212,.15), rgba(246,236,212,0) 30%, rgba(246,236,212,.25));
  pointer-events: none;
}
.site-header .nav { position: relative; z-index: 1; padding: 18px 0; }

/* Brand logo lifts above the cowhide for clarity */
.site-header .brand img {
  filter: drop-shadow(0 2px 4px rgba(20,14,8,.45));
}

/* Nav links over cowhide: strong contrast plate + readable */
.nav-links a:not(.btn) {
  color: #fffaee;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.4);
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(20,14,8,.55);
  transition: background .2s, color .2s, transform .2s;
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn).active {
  color: var(--turq-glow);
  background: rgba(20,14,8,.72);
  text-shadow:
    0 1px 3px rgba(0,0,0,.85),
    0 0 12px rgba(95,227,228,.5);
}
.nav-links a:not(.btn)::after { display: none; }

/* Hamburger lines get a darker background to read on cowhide */
.nav-toggle { background: rgba(20,14,8,.6); border-radius: 8px; padding: 6px; }
.nav-toggle span { background: #fffaee; }

/* Push body content down to clear the new top-bar */
body { padding-top: 0; }

/* ----- HERO BARREL-RACING PHOTO LAYER ------------------------------------- */
/* hero-visual gets a barrel-racing photo background behind the logo.
   Drop the file at assets/connie-barrel.jpg (or .png) and it lights up. */
.hero-visual {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  isolation: isolate;
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,14,8,.25), rgba(20,14,8,.45)),
    url("../assets/connie-barrel.jpg") center / cover no-repeat;
  z-index: -1;
  transition: transform 12s linear, filter .4s ease;
  transform: scale(1.02);
}
.hero-visual:hover::before { transform: scale(1.06); }
.hero-visual img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55));
}
.hero-visual .tag {
  position: relative;
  z-index: 1;
  background: rgba(20,14,8,.78);
  color: var(--turq-glow);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.55);
}

/* ----- Responsive: top-bar collapses gracefully --------------------------- */
@media (max-width: 600px) {
  .top-bar-inner { gap: 12px; padding: 10px 0; }
  .top-bar .tb-name,
  .top-bar .tb-phone { font-size: 1.25rem; }
  .top-bar .tb-sep { width: 8px; height: 8px; }
}

@media (max-width: 920px) {
  .nav-links {
    background: rgba(20,14,8,.94);
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.2)),
      var(--tx-rust-url);
    background-size: cover;
    border-top: 3px solid var(--turq-bright);
  }
  .nav-links a:not(.btn) {
    background: transparent;
    color: #fffaee;
  }
}

/* ============================================================================
   v=13 — Cleaner top-bar, bolder header, real-cowhide hook, no hero veil
   ============================================================================ */

:root {
  /* Real cowhide jpg if present, falls through to SVG */
  --tx-cowhide-url: url("../assets/cowhide.jpg"), url("../assets/cowhide.svg");
}

/* ----- Darker, cleaner top-bar (less tacky, more "saloon nameplate") ----- */
.top-bar {
  background:
    linear-gradient(180deg, #0d0a06 0%, #14100a 50%, #0d0a06 100%);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.18) 50%, rgba(0,0,0,.5)),
    var(--tx-rust-url);
  background-size: cover;
  background-position: center;
  border-bottom: 2px solid rgba(0,0,0,.6);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
}
.top-bar::before, .top-bar::after {
  /* keep the thin turquoise rock strips but mute them slightly */
  height: 3px;
  opacity: .85;
}
.top-bar-inner {
  padding: 16px 0;
  gap: 26px;
}
.top-bar .tb-name,
.top-bar .tb-phone {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  letter-spacing: .03em;
  color: #4adee0;
  /* Subtler glow than before — clean, not neon */
  text-shadow:
    0 1px 0 rgba(0,0,0,.7),
    0 1px 4px rgba(0,0,0,.6);
}
.top-bar .tb-phone:hover,
.top-bar .tb-phone:focus-visible {
  color: #7feaeb;
  text-shadow:
    0 1px 0 rgba(0,0,0,.7),
    0 0 18px rgba(95,227,228,.45);
}
.top-bar .tb-sep {
  width: 9px;
  height: 9px;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.35) inset,
    0 0 8px rgba(74,222,224,.32);
}

/* ----- Bolder, beefier site-header (cowhide stays) ---------------------- */
.site-header {
  /* prefer real cowhide jpg, fall back to SVG via the variable */
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.04) 60%, rgba(0,0,0,.22)),
    var(--tx-cowhide-url) center / cover;
  border-bottom: 5px solid #0d0a06;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 10px 26px -12px rgba(20,14,8,.5);
}
.site-header .nav { padding: 22px 0; }

/* Logo gets larger + heavier drop-shadow */
.site-header .brand img {
  height: 92px;
  width: auto;
  max-width: 100%;
  filter:
    drop-shadow(0 3px 6px rgba(20,14,8,.6))
    drop-shadow(0 0 12px rgba(255,250,238,.35));
}
@media (max-width: 920px) {
  .site-header .brand img { height: 74px; }
}
@media (max-width: 600px) {
  .site-header .brand img { height: 60px; }
}

/* Hamburger: bigger, bolder, stronger plate */
.nav-toggle {
  padding: 10px;
  background: rgba(13,10,6,.82);
  border: 1.5px solid rgba(255,250,238,.18);
  border-radius: 10px;
  box-shadow:
    0 4px 10px -4px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-toggle span {
  width: 28px;
  height: 4px;
  margin: 4px 0;
  background: #fffaee;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,.5);
  display: block;
}
.nav-toggle:hover { background: rgba(13,10,6,.95); }

/* ----- Hero visual: just the logo, no photo veil ------------------------ */
.hero-visual {
  background: transparent;
}
.hero-visual::before { display: none !important; }
.hero-visual img {
  filter: drop-shadow(0 8px 22px rgba(20,14,8,.35));
  max-height: 460px;
}
.hero-visual .tag {
  background: rgba(20,14,8,.86);
  color: #7feaeb;
}

/* ----- Featured-rider profile card (Macy Jennings & beyond) ------------ */
.featured-rider {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) 1.4fr;
  gap: 36px;
  align-items: stretch;
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -28px rgba(20,14,8,.45);
  margin: 28px 0;
  position: relative;
}
.featured-rider::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 6px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  z-index: 1;
}
.fr-photos {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr 1fr;
  gap: 6px;
  background: var(--paper-2);
  min-height: 480px;
}
.fr-photos .fr-photo {
  background: var(--paper-2) center / cover no-repeat;
  border: 0;
  position: relative;
  overflow: hidden;
}
.fr-photos .fr-photo::after {
  /* parchment-tinted overlay only on placeholder; vanishes when image loads */
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  color: rgba(20,14,8,.45);
  font-style: italic;
  background: rgba(246,236,212,.55);
  letter-spacing: .04em;
  text-align: center;
  padding: 16px;
  pointer-events: none;
  transition: opacity .3s ease;
}
.fr-photos .fr-photo.has-image::after { opacity: 0; }
.fr-body {
  padding: 36px 38px 36px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-dk);
  margin-bottom: 14px;
}
.fr-eyebrow::before {
  content: "";
  width: 28px;
  height: 4px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  border-radius: 3px;
}
.fr-name {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  line-height: 1.05;
  margin: 0 0 4px;
  color: var(--ink);
}
.fr-tag {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.fr-stats {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 18px;
  font-size: .98rem;
}
.fr-stats dt {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: .78rem;
  text-transform: uppercase;
  color: var(--accent-dk);
  align-self: center;
}
.fr-stats dd {
  margin: 0;
  color: var(--ink);
}
.fr-quote {
  border-left: 3px solid var(--turquoise, #1f9fa3);
  padding: 10px 0 10px 18px;
  margin: 0;
  font-family: "Zilla Slab", Georgia, serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 920px) {
  .featured-rider { grid-template-columns: 1fr; }
  .fr-photos { min-height: 380px; grid-template-rows: 1.4fr 1fr; }
  .fr-body { padding: 28px 24px; }
}
@media (max-width: 600px) {
  .fr-photos { grid-template-rows: 1.2fr 1fr; min-height: 340px; }
  .fr-stats { grid-template-columns: 1fr; }
  .fr-stats dt { margin-top: 6px; }
}

/* ============================================================================
   v=14 — Remove cowhide look from header (revert to clean parchment)
   ============================================================================ */

.site-header {
  background: #f5ebd9;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(246,236,212,.65) 50%, rgba(232,216,179,.6));
  border-bottom: 1px solid rgba(20,14,8,.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 4px 14px -6px rgba(20,14,8,.15);
  backdrop-filter: blur(8px) saturate(1.05);
}
.site-header::before { display: none; }

/* Brand logo: keep bold/large + soft shadow, drop the cream glow that was for cowhide */
.site-header .brand img {
  filter: drop-shadow(0 2px 6px rgba(20,14,8,.25));
}

/* Nav links: ink-on-parchment, no dark plate; turquoise underline on hover */
.nav-links a:not(.btn) {
  color: var(--ink);
  font-weight: 600;
  text-shadow: none;
  background: transparent;
  padding: 8px 6px;
  border-radius: 0;
  position: relative;
}
.nav-links a:not(.btn)::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn).active {
  color: var(--accent-dk);
  background: transparent;
  text-shadow: none;
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).active::after { transform: scaleX(1); }

/* Hamburger: clean ink-on-parchment, bold but not plated */
.nav-toggle {
  background: transparent;
  border: 1.5px solid rgba(20,14,8,.4);
  border-radius: 8px;
  padding: 8px;
  box-shadow: none;
}
.nav-toggle span {
  width: 26px;
  height: 3.5px;
  margin: 4px 0;
  background: var(--ink);
  border-radius: 2px;
  box-shadow: none;
}
.nav-toggle:hover {
  background: rgba(20,14,8,.06);
  border-color: var(--accent-dk);
}
.nav-toggle:hover span { background: var(--accent-dk); }

/* Mobile nav drawer: simple cream, not cowhide leather */
@media (max-width: 920px) {
  .nav-links {
    background: rgba(245,235,217,.98);
    background-image: linear-gradient(180deg, rgba(255,255,255,.4), rgba(232,216,179,.55));
    border-top: 2px solid var(--turquoise, #1f9fa3);
  }
  .nav-links a:not(.btn) {
    color: var(--ink);
  }
}

/* ============================================================================
   v=15 — Kill hero-visual box, tame the header at fullscreen
   ============================================================================ */

/* ----- Hero visual: just the logo. No box. No frame. No invert. -------- */
.hero-visual,
.hero-visual.reveal {
  background: none !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  isolation: auto !important;
}
.hero-visual::before,
.hero-visual::after { display: none !important; content: none !important; }

.hero-visual img {
  background: none !important;
  filter: none !important;          /* kill the old invert + drop-shadow */
  padding: 0 !important;
  border-radius: 0 !important;
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  margin: 0 auto;
  display: block;
  position: relative;
  z-index: 1;
}

/* small gold/turquoise tag pill now floats UNDER the logo, no box behind it */
.hero-visual .tag {
  position: static;
  display: inline-block;
  margin-top: 18px;
  background: transparent;
  color: var(--accent-dk);
  font-family: var(--font-display, "IM Fell DW Pica", serif);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: .04em;
  padding: 0;
  border: 0;
  box-shadow: none;
  text-transform: none;
  text-align: center;
  width: 100%;
}
.hero-visual .tag::before {
  content: "— ";
  color: var(--gold-dk);
  letter-spacing: 0;
}
.hero-visual .tag::after {
  content: " —";
  color: var(--gold-dk);
  letter-spacing: 0;
}

/* keep the reveal animation but don't shrink/scale into a "box" anymore */
.js .hero-visual.reveal { transform: translateY(20px); opacity: 0; }
.js .hero-visual.reveal.in { transform: none; opacity: 1; }

/* the slow float on the logo also stays — but anchor it less dramatic */
@keyframes floatyLogo { 50% { transform: translateY(-8px); } }
.hero-visual img { animation: floatyLogo 7s ease-in-out infinite; }

/* ----- Header at fullscreen: trimmer, balanced ------------------------- */
.site-header .nav { height: auto; padding: 16px 0; }
.site-header.scrolled .nav { padding: 12px 0; }

.site-header .brand img {
  height: 64px;
  max-height: 64px;
  width: auto;
  filter: drop-shadow(0 2px 5px rgba(20,14,8,.22));
}
.site-header.scrolled .brand img { height: 56px; max-height: 56px; }

@media (max-width: 1024px) {
  .site-header .brand img { height: 58px; max-height: 58px; }
}
@media (max-width: 920px) {
  .site-header .brand img { height: 54px; max-height: 54px; }
}
@media (max-width: 600px) {
  .site-header .brand img { height: 46px; max-height: 46px; }
}

/* Nav-links spacing — tighter so the row doesn't look stretched at wide widths */
.nav-links { gap: 22px; }
.nav-links a:not(.btn) { font-size: .92rem; font-weight: 600; padding: 6px 2px; }
.nav-links .btn.btn-primary {
  padding: 10px 20px;
  font-size: .9rem;
  letter-spacing: .03em;
  margin-left: 6px;
}

/* Cap the inner nav width so it doesn't fly out to the edges on big screens */
.site-header .wrap.nav { max-width: 1240px; }

/* ============================================================================
   v=17 — Real <img> rider photos with natural aspect, full responsive sweep
   ============================================================================ */

/* ---- Featured-rider photo grid (real <img> tags, proper aspect handling) -- */
.featured-rider {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.3fr;
  gap: 28px;
  align-items: stretch;
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -28px rgba(20,14,8,.45);
  margin: 28px 0;
  position: relative;
}

.fr-photos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--paper-2);
  min-height: 0;             /* lets flex children shrink correctly */
}
.fr-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--paper-2);
  object-fit: cover;
}
/* The portrait action shot gets the bigger top tile, capped so it doesn't
   dominate the card on tall windows. The buckle (landscape) sits below at
   a smaller height. */
.fr-photo-main {
  aspect-ratio: 3 / 4;
  max-height: 520px;
  object-position: center 18%;     /* keep Macy + horse's head in frame */
}
.fr-photo-side {
  aspect-ratio: 4 / 3;
  max-height: 240px;
  object-position: center 35%;     /* keep buckle + rider in frame */
}
.fr-body {
  padding: 38px 38px 38px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---- Responsive: tablet (≤1024px) — slim the card padding ---------------- */
@media (max-width: 1024px) {
  .featured-rider { gap: 22px; }
  .fr-body { padding: 32px 28px 32px 8px; }
  .fr-photo-main { max-height: 460px; }
  .fr-photo-side { max-height: 220px; }
}

/* ---- Responsive: iPad / small tablet (≤920px) — photos go side-by-side --- */
@media (max-width: 920px) {
  .featured-rider {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .fr-photos {
    flex-direction: row;
    padding: 10px;
    gap: 8px;
  }
  .fr-photo {
    flex: 1 1 0;
    min-width: 0;
    max-height: 360px;
  }
  .fr-photo-main {
    aspect-ratio: 3 / 4;
  }
  .fr-photo-side {
    aspect-ratio: 4 / 3;
  }
  .fr-body { padding: 28px 28px 32px; }
}

/* ---- Responsive: phones (≤600px) — full-bleed photos, no side margins --- */
@media (max-width: 600px) {
  /* Pull the rider card out to the screen edges so photos are edge-to-edge.
     Uses calc() to neutralize the .wrap padding (18px) on each side. */
  .featured-rider {
    margin-left: calc(-1 * (50vw - 50%));
    margin-right: calc(-1 * (50vw - 50%));
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: 0 20px 40px -28px rgba(20,14,8,.45);
  }
  .fr-photos {
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: transparent;
  }
  .fr-photo {
    max-height: none;
    flex: none;
    width: 100%;
    border-radius: 0;
    display: block;
  }
  .fr-photo-main {
    aspect-ratio: 4 / 5;
    max-height: none;
    object-position: center 12%;
  }
  .fr-photo-side {
    aspect-ratio: 5 / 3;
    object-position: center 40%;
  }
  .fr-name { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .fr-body { padding: 28px 22px 30px; }
  .fr-stats { grid-template-columns: 1fr; }
  .fr-stats dt { margin-top: 6px; }
  .fr-quote { font-size: .95rem; padding-left: 14px; }
  .rider-gallery img {
    aspect-ratio: 5 / 3;
    border-radius: 8px;
  }
}

/* ============================================================================
   v=17b — Site-wide responsive sweep
   ============================================================================ */

/* ---- Hero on every breakpoint ------------------------------------------- */
@media (max-width: 1100px) {
  .hero-grid { gap: 36px; }
}
@media (max-width: 920px) {
  .hero { padding: 56px 0 64px; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: left;
  }
  .hero-visual {
    max-width: 360px;
    margin: 0 auto;
  }
  .hero-visual img { max-height: 320px; }
  .hero-cta { flex-wrap: wrap; }
  .hero-cta .btn { flex: 0 1 auto; }
}
@media (max-width: 600px) {
  .hero { padding: 40px 0 48px; }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.4rem); }
  .hero p { font-size: 1rem; }
  .hero-visual { max-width: 280px; }
  .hero-visual img { max-height: 240px; }
  .hero-visual .tag { font-size: .95rem; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; width: 100%; }
}

/* ---- Page hero on every breakpoint -------------------------------------- */
@media (max-width: 920px) {
  .page-hero { padding: 70px 0 56px; }
}
@media (max-width: 600px) {
  .page-hero { padding: 56px 0 44px; }
  .page-hero h1 { font-size: clamp(1.9rem, 7.5vw, 2.4rem); }
  .page-hero p { font-size: 1rem; }
  .page-hero .crumbs { font-size: .78rem; }
}

/* ---- Top bar on small phones ------------------------------------------- */
@media (max-width: 600px) {
  .top-bar-inner {
    gap: 10px;
    padding: 12px 0;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .top-bar .tb-name,
  .top-bar .tb-phone { font-size: clamp(1.05rem, 5vw, 1.45rem); }
  .top-bar .tb-sep { width: 6px; height: 6px; }
}
@media (max-width: 380px) {
  .top-bar-inner { gap: 8px; }
  .top-bar .tb-name { font-size: 1.05rem; }
  .top-bar .tb-phone { font-size: 1.05rem; }
}

/* ---- Brand strip — graceful 5→3→2→1 stepping ---------------------------- */
@media (max-width: 1100px) {
  .brand-strip { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .brand-logo { height: 130px; padding: 18px; }
}
@media (max-width: 920px) {
  .brand-strip { grid-template-columns: repeat(3, 1fr); }
  .brand-logo { height: 120px; }
}
@media (max-width: 600px) {
  .brand-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  .brand-logo { height: 100px; padding: 14px; }
}
@media (max-width: 400px) {
  .brand-strip { grid-template-columns: 1fr; }
  .brand-logo { height: 110px; }
}

/* ---- Cards (homepage/value/etc) ----------------------------------------- */
@media (max-width: 920px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .cards .card { padding: 24px 22px 26px; }
}

/* ---- Product grid (shop) ------------------------------------------------- */
@media (max-width: 1100px) {
  .prod-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 760px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 420px) {
  .prod-grid { grid-template-columns: 1fr; }
}

/* ---- Catalog category head (shop) — stack at narrow widths ------------- */
@media (max-width: 600px) {
  .cat-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .cat-head .cat-count { font-size: .76rem; }
}

/* ---- Sponsorship rider grid -------------------------------------------- */
@media (max-width: 760px) {
  .team-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 420px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ---- Contact + split layouts ------------------------------------------- */
@media (max-width: 920px) {
  .contact-grid, .split { grid-template-columns: 1fr; gap: 36px; }
  .split-media img { max-width: 320px; margin: 0 auto; display: block; }
}

/* ---- CTA band ---------------------------------------------------------- */
@media (max-width: 600px) {
  .cta-band { padding: 40px 22px; border-radius: 14px; }
  .cta-band h2 { font-size: clamp(1.7rem, 6vw, 2.1rem); }
  .cta-band p { font-size: 1rem; }
}

/* ---- Footer grid ------------------------------------------------------- */
@media (max-width: 920px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ---- Nav — hamburger appears earlier so the bar never crowds ----------- */
@media (max-width: 1024px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px 24px 24px;
    transform: translateY(-110%);
    transition: transform .3s var(--ease);
    z-index: 40;
    border-top: 2px solid var(--turquoise, #1f9fa3);
    box-shadow: 0 20px 30px -16px rgba(20,14,8,.35);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links li { width: 100%; }
  .nav-links a:not(.btn) {
    display: block;
    padding: 14px 6px;
    border-bottom: 1px solid rgba(20,14,8,.08);
    font-size: 1.02rem;
  }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links li:last-child { margin-top: 12px; }
  .nav-links .btn { width: 100%; justify-content: center; padding: 14px 22px; }
  .site-header .nav { position: relative; }
}

/* ---- Wrap padding tightens on phones ----------------------------------- */
@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  section { padding: 56px 0; }
}
@media (max-width: 380px) {
  .wrap { padding: 0 14px; }
  section { padding: 48px 0; }
}

/* ---- Images everywhere — never overflow their container ---------------- */
img { max-width: 100%; height: auto; }
.prod-img img { max-height: 100%; }
.brand-logo img { max-height: 100%; max-width: 100%; }

/* ---- Typography safety net at very small widths ------------------------ */
@media (max-width: 380px) {
  h1 { font-size: 1.9rem; line-height: 1.1; }
  h2 { font-size: 1.45rem; line-height: 1.15; }
  h3 { font-size: 1.15rem; }
  .eyebrow { font-size: .72rem; }
}

/* ============================================================================
   v=18 — Featured-slot product preview cards, apply-list, beta cleanup
   ============================================================================ */

/* Homepage Featured Products are now real anchor cards (a.featured-slot) */
a.featured-slot {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 26px;
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--line);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
a.featured-slot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  opacity: .9;
}
a.featured-slot:hover,
a.featured-slot:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(20,14,8,.16);
  box-shadow: 0 26px 50px -22px rgba(20,14,8,.4);
  outline: none;
}
a.featured-slot .fs-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--paper-2);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 4px;
}
a.featured-slot .lbl {
  font-family: "Zilla Slab", Georgia, serif;
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin-top: 4px;
}
a.featured-slot .fs-sub {
  font-size: .94rem;
  color: var(--ink-soft);
  line-height: 1.45;
  flex: 1;
}
a.featured-slot .fs-cta {
  margin-top: 6px;
  font-family: "Inter", sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-dk);
  transition: color .2s, transform .2s;
}
a.featured-slot:hover .fs-cta {
  color: var(--accent);
  transform: translateX(3px);
}

/* "How to Apply" list on the Sponsorship page */
.apply-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 22px;
}
.apply-list li {
  position: relative;
  padding-left: 22px;
  font-family: "Inter", sans-serif;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--ink);
}
.apply-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 12px;
  height: 4px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  border-radius: 2px;
}

@media (max-width: 600px) {
  .apply-list { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================================================
   v=19 — Accessibility / readability pass
   Bump faded translucent text up to high contrast for older viewers.
   Targets: page-hero, CTA bands, footer, catalog-intro, special-order section,
   rider quote, brand-more line.
   ============================================================================ */

/* ---- Page hero text (dark rustic bg, parchment text) ------------------- */
.page-hero p { color: #f5e9ce !important; opacity: 1; }
.page-hero .crumbs { color: #efe2bd !important; }
.page-hero .crumbs a { color: #f3c66a !important; }
.page-hero .crumbs a:hover { color: #7feaeb !important; }

/* ---- CTA band (dark rustic) -------------------------------------------- */
.cta-band p { color: #f5e9ce !important; }
.cta-band h2 { color: #fffaee !important; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.cta-band .eyebrow { color: #f3c66a !important; }
.cta-band .btn-ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,.85) !important;
  background: rgba(255,255,255,.06);
}
.cta-band .btn-ghost:hover {
  background: rgba(255,255,255,.16);
  border-color: #fff !important;
}

/* ---- Footer (dark leather rustic) -------------------------------------- */
.site-footer { color: #f1e3c4 !important; }
.site-footer p { color: #f1e3c4 !important; }
.site-footer a { color: #efe0bc !important; }
.site-footer a:hover { color: #f3c66a !important; }
.site-footer h4 { color: #f3c66a !important; }
.site-footer .footer-bottom { color: #ddcfac !important; border-top: 1px solid rgba(255,253,247,.25); }
.site-footer .footer-bottom span { color: #ddcfac !important; }

/* ---- Catalog intro panel (dark) ---------------------------------------- */
.catalog-intro p { color: #f5e9ce !important; }
.catalog-intro h2 { color: #fffaee !important; }
.catalog-intro .eyebrow { color: #f3c66a !important; }

/* ---- Special-order / special-card (dark rustic) ----------------------- */
.special-sec .cat-head p,
.special-sec p { color: #f5e9ce !important; }
.special-sec h2 { color: #fffaee !important; }
.special-card p { color: #f1e3c4 !important; }
.special-card h3 { color: #fffaee !important; }
.special-card a { color: #7feaeb !important; }

/* ---- Stats strip labels & numbers -------------------------------------- */
.strip .num { color: #fffaee !important; opacity: 1 !important; }
.strip .lbl { color: #f1e3c4 !important; }

/* ---- Hero-trust badges on parchment ------------------------------------ */
.hero-trust span { color: var(--ink) !important; font-weight: 700; }

/* ---- Rider info label under tile --------------------------------------- */
.rider .info strong { color: var(--ink); }
.rider .info span { color: #5a4a38 !important; font-weight: 500; }

/* ---- Featured-rider quote (on white card) ------------------------------ */
.fr-quote { color: #3a2f24 !important; font-size: 1rem; }

/* ---- Body paragraph everywhere (light page) ---------------------------- */
/* --ink-soft is #4f4338 — that's already AAA on parchment.
   Bump --ink-soft slightly darker for guaranteed readability. */
:root { --ink-soft: #3f352a; }
p { color: var(--ink-soft); }

/* ---- "Plus Lameaway..." brand-more line was muted -- pop it ----------- */
.brand-more { color: #3f352a !important; font-size: .98rem; }

/* ---- Eyebrow on .alt sections -- ensure it's strong, not pale --------- */
section.alt .eyebrow { color: var(--accent-dk) !important; }
section.alt .sec-head .eyebrow { color: var(--accent-dk) !important; }

/* ---- Featured-slot card body text on homepage -------------------------- */
a.featured-slot .fs-sub { color: #3f352a !important; }
a.featured-slot .fs-cta { color: var(--accent-dk) !important; }

/* ---- Buttons on dark hero / CTA — make sure text is solid white ------- */
.cta-band .btn.btn-primary { color: #fff !important; }
.page-hero .btn.btn-primary { color: #fff !important; }

/* ---- Top bar — already strong; bump just slightly for clarity --------- */
.top-bar .tb-name,
.top-bar .tb-phone { color: #5be3e5 !important; }

/* ---- Catalog cat-head subtitle (light bg) ----------------------------- */
.cat-head p { color: #3f352a !important; opacity: 1; }
.cat-head .cat-count { color: var(--accent-dk) !important; }

/* ---- Policy card title + body ------------------------------------------ */
.policy h3 { color: var(--accent-dk) !important; }
.policy p { color: #3f352a !important; }

/* ---- Contact card lines ------------------------------------------------ */
.contact-line strong { color: var(--accent-dk) !important; }
.contact-line span,
.contact-line a { color: #3f352a !important; font-weight: 500; }
.contact-line a:hover { color: var(--accent-dk) !important; }

/* ---- Product card titles + prices -------------------------------------- */
.prod-body h4 { color: var(--ink) !important; }
.prod-body .price { color: var(--accent-dk) !important; }

/* ---- Card body paragraphs on white tiles ------------------------------- */
.card p, .cards .card p { color: #3f352a !important; }
.brand-card p { color: #3f352a !important; }

/* ============================================================================
   v=20 — Featured-rider landscape variant for Macy Batchelder (both photos
   are landscape 3:2 so they want landscape slots, not the 3:4 portrait main).
   ============================================================================ */

.featured-rider.fr-landscape .fr-photo-main {
  aspect-ratio: 3 / 2;
  max-height: 360px;
  object-position: center 30%;
}
.featured-rider.fr-landscape .fr-photo-side {
  aspect-ratio: 3 / 2;
  max-height: 280px;
  object-position: center center;
}
@media (max-width: 920px) {
  .featured-rider.fr-landscape .fr-photo-main,
  .featured-rider.fr-landscape .fr-photo-side {
    aspect-ratio: 3 / 2;
    max-height: 280px;
  }
}
@media (max-width: 600px) {
  .featured-rider.fr-landscape .fr-photo-main {
    aspect-ratio: 5 / 3;
    max-height: none;
    object-position: center 35%;
  }
  .featured-rider.fr-landscape .fr-photo-side {
    aspect-ratio: 5 / 3;
    max-height: none;
    object-position: center center;
  }
}

/* ============================================================================
   v=21 — FIX: catalog-intro & special-sec use a PARCHMENT background, but
   v=19 incorrectly painted their text in cream (cream-on-cream = invisible).
   Restore dark ink on parchment so "The four primary lines." reads clearly.
   ============================================================================ */

.catalog-intro {
  color: var(--ink) !important;
}
.catalog-intro h2 { color: var(--ink) !important; text-shadow: none; }
.catalog-intro p { color: #2f261c !important; font-size: 1.05rem; line-height: 1.55; }
.catalog-intro .eyebrow { color: var(--accent-dk) !important; }
.catalog-intro .eyebrow::before { background-image: var(--tx-turq-url); background-size: cover; }

.special-sec {
  color: var(--ink) !important;
}
.special-sec .cat-head h2,
.special-sec h2 { color: var(--ink) !important; }
.special-sec .cat-head p,
.special-sec p { color: #2f261c !important; }
.special-sec .eyebrow { color: var(--accent-dk) !important; }

.special-card {
  background: var(--white) !important;
  border: 1px solid var(--line);
  color: var(--ink);
}
.special-card h3,
.special-card h4 { color: var(--ink) !important; }
.special-card p { color: #3f352a !important; }
.special-card .so-cta,
.special-card a { color: var(--accent-dk) !important; }
.special-card a:hover { color: var(--accent) !important; }

/* ============================================================================
   v=22 — Subtle "Website created by Iron Sharp Media" footer credit
   ============================================================================ */

.site-credit {
  padding: 22px 0 28px;
  margin-top: 24px;
  border-top: 1px solid rgba(255,253,247,.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-credit a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,250,238,.55) !important;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .25s ease, opacity .25s ease;
  padding: 6px 10px;
  border-radius: 8px;
}
.site-credit a img {
  width: 32px;
  height: 32px;
  display: block;
  opacity: .85;
  transition: opacity .25s ease, transform .25s ease;
}
.site-credit a strong {
  font-weight: 700;
  color: rgba(95,227,228,.7);
  letter-spacing: .1em;
}
.site-credit a:hover,
.site-credit a:focus-visible {
  color: rgba(255,250,238,.9) !important;
}
.site-credit a:hover img,
.site-credit a:focus-visible img {
  opacity: 1;
  transform: scale(1.06);
}
.site-credit a:hover strong,
.site-credit a:focus-visible strong {
  color: rgba(127,234,235,1);
}

@media (max-width: 480px) {
  .site-credit { padding: 18px 0 22px; }
  .site-credit a { font-size: .72rem; gap: 10px; }
  .site-credit a img { width: 26px; height: 26px; }
}

/* ============================================================================
   v=23 — ISM logo now has transparent background + native colors.
   Update credit row to display the wordmark at correct aspect ratio.
   ============================================================================ */

.site-credit a img {
  width: auto !important;
  height: 36px !important;
  opacity: .92;
}
.site-credit a:hover img,
.site-credit a:focus-visible img {
  opacity: 1;
}
/* The wordmark now carries its own brand colors; let the surrounding text
   stay quiet cream and don't double-color the "Iron Sharp Media" string. */
.site-credit a strong {
  color: inherit;
  font-weight: 700;
}
.site-credit a:hover strong,
.site-credit a:focus-visible strong {
  color: rgba(255,250,238,1);
}
@media (max-width: 480px) {
  .site-credit a img { height: 30px !important; }
}

/* ============================================================================
   v=24 — Use mix-blend-mode: screen on the ISM logo so its black background
   blends invisibly into the dark footer while preserving the real turquoise
   + silver brand colors at full fidelity.
   ============================================================================ */

.site-credit a img {
  mix-blend-mode: screen;
  width: auto !important;
  height: 48px !important;
  opacity: 1 !important;
}
@media (max-width: 480px) {
  .site-credit a img { height: 40px !important; }
}

/* mix-blend-mode requires a fully opaque surface beneath it. Make sure the
   site-credit row sits over the footer's solid dark backdrop without any
   intervening translucent layer. */
.site-credit {
  isolation: auto;
  background: transparent;
}

/* ============================================================================
   v=25 — ISM logo image removed, text-only credit
   ============================================================================ */

.site-credit a img { display: none !important; }
.site-credit a {
  gap: 0;
  font-size: .78rem;
  letter-spacing: .14em;
  color: rgba(255,250,238,.6) !important;
}
.site-credit a strong {
  color: rgba(127,234,235,.85);
  font-weight: 700;
  letter-spacing: .14em;
}
.site-credit a:hover,
.site-credit a:focus-visible {
  color: rgba(255,250,238,.9) !important;
}
.site-credit a:hover strong,
.site-credit a:focus-visible strong {
  color: rgba(127,234,235,1);
}

/* ============================================================================
   v=26 — Homepage barrel-racing feature banner + faded turquoise text
   ============================================================================ */

/* --- Arena Feature banner --------------------------------------------------- */
.arena-feature {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
  padding: 100px 0;
  color: #f5e9ce;
  isolation: isolate;
}
.arena-feature-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  z-index: -2;
  transform: scale(1.04);
  filter: saturate(.9);
}
.arena-feature-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(13,10,6,.88) 0%, rgba(13,10,6,.72) 45%, rgba(13,10,6,.22) 100%);
  z-index: -1;
}
.arena-feature::before,
.arena-feature::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  z-index: 0;
  opacity: .8;
}
.arena-feature::before { top: 0; }
.arena-feature::after  { bottom: 0; }
.arena-feature-body {
  max-width: 600px;
  position: relative;
  z-index: 1;
}
.arena-feature-body .eyebrow {
  color: #f3c66a !important;
  margin-bottom: 18px;
}
.arena-feature-body .eyebrow::before {
  background-image: var(--tx-turq-url);
  background-size: cover;
}
.arena-feature-body h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  color: #fffaee !important;
  text-shadow: 0 3px 18px rgba(0,0,0,.55);
  margin-bottom: 20px;
}
.arena-feature-body p {
  color: #f5e9ce !important;
  font-size: 1.1rem;
  line-height: 1.55;
  margin-bottom: 28px;
  max-width: 540px;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
@media (max-width: 920px) {
  .arena-feature { min-height: 380px; padding: 70px 0; }
  .arena-feature-veil {
    background: linear-gradient(180deg, rgba(13,10,6,.74), rgba(13,10,6,.86));
  }
}
@media (max-width: 600px) {
  .arena-feature { padding: 50px 0; min-height: 320px; }
  .arena-feature-body h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .arena-feature-body p  { font-size: .98rem; }
}

/* --- Fade the saturated turquoise text in places where it competes with the
       background and is hard to read. The top-bar "Connie Dove" + phone, and
       the ISM credit link, both come down a couple of shades to a softer
       gold-cream so they read as warm-western rather than neon-blue. ------- */
.top-bar .tb-name,
.top-bar .tb-phone {
  color: #f3d999 !important;            /* warm cream / antique gold */
  text-shadow:
    0 1px 0 rgba(0,0,0,.6),
    0 1px 4px rgba(0,0,0,.6) !important;
}
.top-bar .tb-phone:hover,
.top-bar .tb-phone:focus-visible {
  color: #ffe7a8 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.6),
    0 0 14px rgba(243,217,153,.45) !important;
}
.top-bar .tb-sep {
  box-shadow:
    0 0 0 1.5px rgba(243,217,153,.35) inset !important;
}

/* ISM credit — softer parchment, no turquoise glow */
.site-credit a strong {
  color: rgba(245,233,206,.85) !important;
  font-weight: 700;
}
.site-credit a:hover strong,
.site-credit a:focus-visible strong {
  color: rgba(255,250,238,1) !important;
}

/* Nav hover underline (was full-turquoise rock) — slim it down a touch */
.nav-links a:not(.btn)::after {
  opacity: .75;
}

/* ============================================================================
   v=27 — New transparent-background Iron Sharp Media logo in footer credit.
   Re-enable the image, drop the mix-blend hack (no longer needed), size it.
   ============================================================================ */

.site-credit a img {
  display: inline-block !important;
  mix-blend-mode: normal !important;
  width: auto !important;
  height: 40px !important;
  opacity: .9;
  transition: opacity .25s ease, transform .25s ease;
}
.site-credit a:hover img,
.site-credit a:focus-visible img {
  opacity: 1;
  transform: scale(1.05);
}
.site-credit a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
@media (max-width: 480px) {
  .site-credit a { flex-direction: column; gap: 6px; text-align: center; }
  .site-credit a img { height: 34px !important; }
}

/* ============================================================================
   v=28 — Bailey Stuva-Orman featured card: honors list + action gallery
   Self-contained; does NOT alter the existing featured-rider cards.
   ============================================================================ */

/* ---- Honors / accomplishments list (used in place of fr-stats/fr-quote) --- */
.fr-honors {
  list-style: none;
  padding: 0;
  margin: 4px 0 18px;
  display: grid;
  gap: 9px;
}
.fr-honors li {
  position: relative;
  padding-left: 24px;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}
.fr-honors li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 14px; height: 5px;
  background-image: var(--tx-turq-url);
  background-size: cover;
  border-radius: 3px;
}

/* ---- Secondary action gallery (extra photos, sits inside .fr-body) -------- */
.rider-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
.rider-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 36px -22px rgba(20,14,8,.5);
}
@media (max-width: 600px) {
  .rider-gallery { grid-template-columns: 1fr; gap: 12px; }
  .fr-honors li { font-size: .96rem; }
}

/* ============================================================================
   v=29 — Bulletproof mobile nav (fix: hamburger menu peeking when closed)
   The earlier mobile rules hid the dropdown only with transform:translateY(-110%),
   which is relative to the menu's OWN height — so on phones / narrow windows the
   bottom of the closed menu slid down into the header and obstructed the screen.
   This authoritative override (loaded last) hides the closed menu independent of
   its height via opacity + visibility, and gives the open panel a solid backdrop.
   ============================================================================ */
@media (max-width: 1024px) {
  .nav-links {
    /* solid, readable panel for the OPEN state across the whole mobile range */
    background: rgba(20,14,8,.96);
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.20)),
      var(--tx-rust-url);
    background-size: cover;
    border-top: 3px solid var(--turq-bright, #5fe3e4);
    box-shadow: 0 24px 38px -18px rgba(20,14,8,.55);
    /* keep menu from overflowing tall on short screens */
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    /* CLOSED state — fully hidden regardless of menu height (no peek) */
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity .25s var(--ease),
      transform .25s var(--ease),
      visibility 0s linear .25s;
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity .25s var(--ease),
      transform .25s var(--ease),
      visibility 0s;
  }
}

/* ============================================================================
   v=30 — Single-photo featured card (.fr-solo) — used for Lacinda Rose
   One landscape photo fills the photo column at its natural 7:5 framing.
   ============================================================================ */
.featured-rider.fr-solo .fr-photos {
  padding: 8px;
  justify-content: center;
}
.featured-rider.fr-solo .fr-photo-solo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 5;
  max-height: 460px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 12px;
}
@media (max-width: 600px) {
  .featured-rider.fr-solo .fr-photos { padding: 0; }
  .featured-rider.fr-solo .fr-photo-solo {
    aspect-ratio: 5 / 3;
    max-height: none;
    border-radius: 0;
  }
}

/* ============================================================================
   v=31 — STOREFRONT HOMEPAGE + UNIVERSAL READABLE EYEBROWS
   1) Every section eyebrow becomes a bold WHITE label on a turquoise stone
      pill — readable for every age, on light parchment AND dark backgrounds.
      No more burnt-orange-over-color. Overrides all earlier eyebrow colors.
   2) Hero "storefront" mosaic so the homepage instantly reads as a shop.
   3) Clickable Shop-by-Category image tiles.
   4) Real rider photos in the homepage team grid.
   ============================================================================ */

/* ---- 1. UNIVERSAL EYEBROW — bold white on turquoise stone pill ---------- */
.eyebrow,
.sec-head .eyebrow,
section .eyebrow,
section.alt .eyebrow,
section.alt .sec-head .eyebrow,
.cta-band .eyebrow,
.catalog-intro .eyebrow,
.special-sec .eyebrow,
.page-hero .eyebrow,
.arena-feature-body .eyebrow,
.split-text .eyebrow {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: .12em;
  background-image:
    linear-gradient(rgba(31,159,163,.94), rgba(12,95,100,.97)),
    var(--tx-turq);
  background-size: cover;
  background-position: center;
  padding: 7px 16px;
  border-radius: 999px;
  box-shadow:
    0 6px 16px -7px rgba(12,95,100,.6),
    inset 0 0 0 1px rgba(255,255,255,.16);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
/* leading tick reads as a little white dash inside the pill */
.eyebrow::before,
.cta-band .eyebrow::before,
.catalog-intro .eyebrow::before,
.page-hero .eyebrow::before,
.arena-feature-body .eyebrow::before,
section.alt .sec-head .eyebrow::before {
  background: rgba(255,255,255,.92) !important;
  background-image: none !important;
  width: 16px !important;
  height: 3px !important;
}

/* ---- 2. Bigger primary call-to-action ---------------------------------- */
.btn.btn-xl { padding: 18px 40px; font-size: 1.08rem; }

/* ---- 3. HERO STOREFRONT MOSAIC ----------------------------------------- */
.hero-shop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
  align-self: center;
}
.hero-shop .hs-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 16px 36px -18px rgba(26,20,14,.55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  text-decoration: none;
}
.hero-shop .hs-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 46px -18px rgba(26,20,14,.62);
}
.hero-shop .hs-prod img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .45s var(--ease);
}
.hero-shop .hs-prod:hover img { transform: scale(1.06); }
.hero-shop .hs-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 14px 11px;
  background: linear-gradient(transparent, rgba(12,95,100,.92));
  color: #fff;
  font-family: "Zilla Slab", Georgia, serif;
  font-weight: 700; font-size: 1rem;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.hero-shop .hs-store {
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  gap: 9px; padding: 22px;
  color: #fff;
  background-image:
    linear-gradient(150deg, rgba(31,159,163,.96), rgba(12,95,100,.98)),
    var(--tx-turq);
  background-size: cover;
  border-color: transparent;
}
.hero-shop .hs-store-ey {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; opacity: .92;
}
.hero-shop .hs-store-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem); line-height: 1;
}
.hero-shop .hs-store-cta {
  margin-top: 2px; font-weight: 700; font-size: .92rem;
  border-bottom: 2px solid rgba(255,255,255,.65); padding-bottom: 2px;
}
.hero-shop .hs-store:hover .hs-store-cta { border-bottom-color: #fff; }

/* ---- 4. SHOP BY CATEGORY TILES ----------------------------------------- */
.cat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
.cat-tile {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit; text-decoration: none;
  box-shadow: 0 12px 28px -20px rgba(26,20,14,.55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cat-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 42px -18px rgba(26,20,14,.55);
}
.cat-tile .ct-media {
  display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #fff;
}
.cat-tile .ct-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s var(--ease);
}
.cat-tile:hover .ct-media img { transform: scale(1.06); }
.cat-tile .ct-body {
  padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 4px;
}
.cat-tile .ct-body strong {
  font-family: "Zilla Slab", Georgia, serif; font-size: 1.2rem; color: var(--ink);
}
.cat-tile .ct-body > span:not(.ct-cta) { color: var(--ink-soft); font-size: .92rem; }
.cat-tile .ct-cta {
  margin-top: 9px; color: var(--turquoise-dk); font-weight: 800;
  font-size: .9rem; letter-spacing: .02em;
}
.cat-tile:hover .ct-cta { color: var(--turquoise); }

/* ---- 5. RIDER PHOTOS in homepage team grid ----------------------------- */
a.rider { color: inherit; text-decoration: none; display: block; }
a.rider:hover { text-decoration: none; }
.rider .photo { padding: 0; }
.rider .photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---- Responsive: keep storefront tidy on phones ------------------------ */
@media (max-width: 600px) {
  .hero-shop { gap: 11px; }
  .hero-shop .hs-store-title { font-size: 1.5rem; }
  .btn.btn-xl { padding: 16px 30px; font-size: 1.02rem; }
}

/* ============================================================================
   v=32 — Client polish batch
   1) Running-horse marker replaces bullet dots/dashes on key lists
   2) Product images FILL their card (cover) for a clean, consistent look
   3) Floating logo with turquoise glow (no brown box) in split sections
   4) Mobile hamburger menu: white, readable links on the dark drawer
   5) Shop category cards get product photos; "More lines" alternates + new tag
   6) Facebook links made obviously clickable
   ============================================================================ */

/* ---- 1. RUNNING-HORSE MARKER (replaces orange dots / dashes) ------------ */
.split-text ul { list-style: none; }
.split-text li::before,
.apply-list li::before {
  content: "" !important;
  background: none !important;
  background-image: url("../assets/horse-marker.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.split-text li {
  padding-left: 40px;
}
.split-text li::before {
  width: 26px !important;
  height: 30px !important;
  left: 0 !important;
  top: 8px !important;
}
.apply-list li { padding-left: 30px; }
.apply-list li::before {
  width: 20px !important;
  height: 24px !important;
  left: 0 !important;
  top: 4px !important;
}

/* ---- 2. PRODUCT IMAGES FILL THE BOX (consistent, no sticker look) ------- */
a.featured-slot .fs-img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #fff;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.prod-img {
  background: #fff;
  padding: 0;
}
.prod-img img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}
/* Branded placeholder (Iconoclast bell boots) — logo sits centered, contained */
.prod-img.prod-img-brandph {
  background:
    radial-gradient(circle at 50% 40%, rgba(31,159,163,.10), transparent 70%),
    var(--paper);
  padding: 22px;
}
.prod-img.prod-img-brandph img {
  width: auto;
  height: auto;
  max-width: 78%;
  max-height: 70%;
  object-fit: contain;
  opacity: .92;
}

/* ---- 3. FLOATING LOGO + TURQUOISE GLOW (split sections) ----------------- */
.split-media {
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  aspect-ratio: auto !important;
  position: relative;
  padding: 30px 10px;
  overflow: visible;
}
.split-media::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 78%; height: 78%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(43,200,201,.55), rgba(31,159,163,.20) 45%, transparent 70%);
  filter: blur(26px);
  z-index: 0;
  animation: glowPulse 6s ease-in-out infinite;
}
.split-media img {
  position: relative;
  z-index: 1;
  padding: 0 !important;
  filter: drop-shadow(0 14px 26px rgba(12,95,100,.40)) !important;
  opacity: 1 !important;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  display: block;
  animation: floatLogo 6s ease-in-out infinite;
}
@keyframes floatLogo {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}
@keyframes glowPulse {
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .split-media img { animation: none; }
  .split-media::before { animation: none; }
}
@media (max-width: 920px) {
  .split-media img { max-width: 340px; }
}

/* ---- 4. MOBILE HAMBURGER MENU — white, readable links ------------------- */
@media (max-width: 1024px) {
  .nav-links a:not(.btn) {
    color: #ffffff !important;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
  }
  .nav-links a:not(.btn):hover,
  .nav-links a:not(.btn).active {
    color: var(--turq-bright, #5fe3e4) !important;
  }
  .nav-links a:not(.btn).active::after { display: none; }
}

/* ---- 5a. SHOP CATEGORY CARDS get a product photo ----------------------- */
.cat-card { padding-top: 0; overflow: hidden; }
.cat-card-img {
  display: block;
  margin: -1px -27px 0;            /* bleed to card edges over the side padding */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.cat-card-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s var(--ease);
}
.cat-card:hover .cat-card-img img { transform: scale(1.05); }
.cat-card > :not(.cat-card-img) { margin-left: 0; margin-right: 0; }
.cat-card-logo { margin-top: 18px; }

/* ---- 5b. INFO brand-card product photo -------------------------------- */
.brand-card-img {
  display: block;
  margin: 0 0 16px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}
.brand-card-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s var(--ease);
}
.brand-card:hover .brand-card-img img { transform: scale(1.05); }

/* ---- 5c. "MORE LINES" — alternating colors, turquoise outline, new tag -- */
.line-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--turquoise);
  border-radius: 12px;
}
.line-grid .line-card:nth-child(even) {
  background:
    linear-gradient(0deg, rgba(31,159,163,.04), rgba(31,159,163,.04)),
    var(--paper-2);
}
.line-grid .line-card:nth-child(odd) {
  background: var(--white);
}
/* Replace the little green pill with a clean turquoise tag */
.line-card .badge.badge-sage {
  background: transparent;
  color: var(--turquoise-dk);
  padding: 0 0 0 22px;
  border-radius: 0;
  position: relative;
  font-size: .72rem;
  display: inline-flex;
  align-items: center;
}
.line-card .badge.badge-sage::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 18px;
  background: url("../assets/horse-marker.png") center / contain no-repeat;
}

/* ---- 6. FACEBOOK LINKS — obviously clickable --------------------------- */
a[href*="facebook.com"]:not(.btn):not(.brand) {
  color: var(--turquoise-dk);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
a[href*="facebook.com"]:not(.btn):not(.brand):hover { color: var(--turquoise); }
.site-footer a[href*="facebook.com"] {
  color: #7feaeb !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer a[href*="facebook.com"]:hover { color: #aef3f4 !important; }

/* small helper under contact form */
.form-direct { font-size: .9rem; margin-top: 14px; color: var(--ink-soft); }

/* ============================================================================
   v=33 — Drop the turquoise eyebrow "pill" boxes and the little dash ticks.
   Every section label is now plain bold text led by the running-horse mark.
   The horse gets a drop shadow everywhere so it reads on any background.
   ============================================================================ */

/* ---- Strip the pill box + dash from ALL eyebrows ----------------------- */
.eyebrow,
.sec-head .eyebrow,
section .eyebrow,
section.alt .eyebrow,
section.alt .sec-head .eyebrow,
.cta-band .eyebrow,
.catalog-intro .eyebrow,
.special-sec .eyebrow,
.page-hero .eyebrow,
.arena-feature-body .eyebrow,
.split-text .eyebrow,
.fr-eyebrow {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-shadow: none !important;
  color: var(--turquoise-dk) !important;   /* bold dark turquoise on light bg */
  font-weight: 800 !important;
  gap: 8px;
}

/* ---- Running-horse marker replaces the dash tick before each label ------ */
.eyebrow::before,
.sec-head .eyebrow::before,
section.alt .sec-head .eyebrow::before,
.cta-band .eyebrow::before,
.catalog-intro .eyebrow::before,
.special-sec .eyebrow::before,
.page-hero .eyebrow::before,
.arena-feature-body .eyebrow::before,
.fr-eyebrow::before {
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 24px !important;
  background: none !important;
  background-image: url("../assets/horse-marker.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  -webkit-mask: none !important;
  mask: none !important;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55));
}

/* ---- Dark-background sections: light label text ------------------------ */
.page-hero .eyebrow,
.cta-band .eyebrow,
.arena-feature-body .eyebrow,
.catalog-intro .eyebrow,
.special-sec .eyebrow {
  color: #f4ebd3 !important;
}

/* ---- Make the horse visible on every list / tag, too ------------------- */
.split-text li::before,
.apply-list li::before,
.line-card .badge.badge-sage::before {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
}

/* ---- Kill the leftover dashed hero-trust divider ----------------------- */
.hero-trust { border-top: 1px solid var(--line) !important; }

/* ============================================================================
   v=37 — Fix "glowing bars" on the stats strip.
   The old gradient-text shimmer left a filled gradient box with invisible
   text (a later `background:` shorthand cancelled `background-clip:text`).
   Force the strip numbers back to solid, readable cream text.
   ============================================================================ */
.strip .num {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #fffaee !important;
  color: #fffaee !important;
  animation: none !important;
}

/* ---- Center + naturally size the "Shop the Full Store" button ---------- */
.shop-embed-placeholder .btn {
  align-self: center;          /* stop full-width stretch; size to content + center */
  margin-left: auto;
  margin-right: auto;
}
.shop-embed-placeholder .btn.btn-xl {
  font-size: 1.14rem;
  padding: 18px 50px;
  letter-spacing: .04em;
}

/* ===================== LATEST FROM FACEBOOK ===================== */
.fb-feed { padding: 64px 0; }
.fb-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 8px;
}
@media (max-width: 820px) {
  .fb-rail { grid-template-columns: 1fr; }
}
.fb-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: #fffdf6;
  border: 1px solid #e6d6b6;
  border-radius: 10px;
  color: #3f352a;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fb-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(26, 20, 14, .08);
  border-color: #cdb98e;
}
.fb-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1877f2;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: .02em;
  font-size: .85rem;
  text-transform: uppercase;
}
.fb-mark { width: 18px; height: 18px; flex-shrink: 0; }
.fb-card-body strong {
  display: block;
  font-family: "Zilla Slab", Georgia, serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: #1a140e;
  margin-bottom: 6px;
  line-height: 1.25;
}
.fb-card-body span {
  display: block;
  font-size: .95rem;
  line-height: 1.55;
  color: #3f352a;
}
.fb-card-cta {
  margin-top: auto;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  color: #b15a2c;
  font-size: .9rem;
  letter-spacing: .02em;
}
.fb-cta-wrap { text-align: center; margin-top: 34px; }
.fb-follow-btn { display: inline-flex; align-items: center; gap: 10px; }
.fb-follow-btn .fb-mark { width: 20px; height: 20px; }

/* ===================== ONLINE EVERYWHERE / 3D PREVIEW (OPTION B) ===================== */
.online-preview {
  padding: 90px 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(177, 90, 44, .06), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(31, 159, 163, .06), transparent 55%),
    #f4ead8;
  overflow: hidden;
}
.op-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 980px) {
  .op-wrap { grid-template-columns: 1fr; gap: 40px; }
  .online-preview { padding: 64px 0; }
}
.op-text h2 { margin-top: 8px; max-width: 480px; }
.op-text p { max-width: 460px; }

.op-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 30px;
  perspective: 1500px;
  min-height: 360px;
}

/* Desktop browser */
.op-desktop {
  width: 100%;
  max-width: 460px;
  background: #fffdf6;
  border: 1px solid #cdb98e;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transform: rotateY(14deg) rotateX(5deg);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
  box-shadow:
    -14px 24px 50px rgba(26, 20, 14, .18),
    0 0 0 1px rgba(26, 20, 14, .04);
  cursor: pointer;
  display: block;
}
.op-desktop:hover {
  transform: rotateY(4deg) rotateX(1deg) translateY(-4px);
  box-shadow: -10px 30px 60px rgba(26, 20, 14, .22), 0 0 0 1px rgba(26, 20, 14, .04);
}
.op-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: #f4ead8;
  border-bottom: 1px solid #cdb98e;
}
.op-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #cdb98e;
}
.op-url {
  flex: 1;
  margin-left: 10px;
  padding: 4px 10px;
  background: #fffdf6;
  border: 1px solid #cdb98e;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #3f352a;
  letter-spacing: .02em;
  text-align: center;
}
.op-screen {
  display: block;
  background: #fffdf6;
  color: #fffdf6;
  overflow: hidden;
  line-height: 0;
}
.op-screen-desktop { aspect-ratio: 1400 / 900; }
.op-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.op-shot-desktop { aspect-ratio: 1400 / 900; }
.op-shot-phone { aspect-ratio: 390 / 800; }
.op-brand {
  display: block;
  font-family: 'IM Fell DW Pica', Georgia, serif;
  font-style: italic;
  font-size: 30px;
  line-height: 1.05;
  color: #fffdf6;
  margin-bottom: 10px;
}
.op-sub {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: #f4ead8;
  margin-bottom: 16px;
  max-width: 320px;
}
.op-cta-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.op-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
}
.op-cta-primary {
  background: #b15a2c;
  color: #fffdf6;
}
.op-cta-secondary {
  background: transparent;
  color: #fffdf6;
  border: 1px solid #fffdf6;
}
.op-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.op-tile {
  aspect-ratio: 1;
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  padding: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #fffdf6;
  letter-spacing: .04em;
}

/* Phone */
.op-phone {
  position: absolute;
  right: 6%;
  bottom: -10px;
  width: 130px;
  background: #1a140e;
  border-radius: 22px;
  padding: 8px;
  overflow: hidden;
  text-decoration: none;
  transform: rotateY(-14deg) rotateX(4deg) translateY(-12px);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
  box-shadow:
    16px 18px 38px rgba(26, 20, 14, .25),
    0 0 0 2px #2a221a inset;
  cursor: pointer;
  display: block;
}
.op-phone:hover {
  transform: rotateY(-4deg) rotateX(0deg) translateY(-22px);
}
.op-phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 5px;
  background: #2a221a;
  border-radius: 4px;
  z-index: 2;
}
.op-screen-phone {
  border-radius: 14px;
  padding: 0;
  aspect-ratio: 390 / 800;
  overflow: hidden;
}
.op-brand-phone {
  display: block;
  font-family: 'IM Fell DW Pica', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  color: #fffdf6;
  margin-bottom: 6px;
  text-align: center;
}
.op-sub-phone {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  color: #f4ead8;
  margin-bottom: 12px;
  text-align: center;
  line-height: 1.4;
}
.op-cta-phone {
  display: block;
  width: 100%;
  padding: 5px 0;
  font-size: 9px;
  margin-bottom: 12px;
  text-align: center;
}
.op-phone-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.op-pt {
  aspect-ratio: 1;
  border-radius: 3px;
}

/* Tablet and mobile graceful degrade */
@media (max-width: 980px) {
  .op-stage { min-height: 320px; }
  .op-desktop {
    max-width: 380px;
    transform: rotateY(8deg) rotateX(3deg);
  }
  .op-phone {
    right: 2%;
    width: 105px;
  }
}
@media (max-width: 600px) {
  .op-stage { gap: 8px; min-height: 280px; }
  .op-desktop {
    max-width: 100%;
    transform: rotateY(6deg) rotateX(2deg);
  }
  .op-phone {
    width: 90px;
    right: -4px;
    bottom: -16px;
  }
  .op-brand { font-size: 24px; }
  .op-sub { font-size: 11px; }
}

/* Reduced motion / accessibility */
@media (prefers-reduced-motion: reduce) {
  .op-desktop, .op-phone {
    transition: none;
    transform: none;
  }
  .op-desktop { box-shadow: 0 10px 30px rgba(26,20,14,.12); }
  .op-phone {
    transform: none;
    position: relative;
    right: auto; bottom: auto;
    margin-top: 18px;
  }
}