/* ==========================================================================
   Stockyard Social — footer / hero flow / sticky nav patch — 2026-08-26
   Isolated on purpose: loads after every other stylesheet so it wins
   without having to fight the layered !important rules in the older
   CSS files. Safe to remove on its own if something needs to roll back.
   ========================================================================== */

/* ---------- Hero: consistent vertical rhythm ---------- */
.heroSplitPanel{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.heroSplitPanel .kicker{margin:0}
.heroSplitPanel h1{margin:0}
.heroSplitPanel .heroLead{margin:0}
.heroSplitPanel .heroLocation{margin:0;display:flex;align-items:center;gap:10px;font:700 .68rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#cfc4b0}
.heroSplitPanel .heroLocation img{width:15px;height:15px;opacity:.85}
.heroSplitPanel .buttonRow{margin:4px 0 0}
.heroSplitPanel .conceptLabel{margin:22px 0 0;opacity:.6}
@media(max-width:900px){.heroSplitPanel{gap:14px}.heroSplitPanel .conceptLabel{margin-top:16px}}

/* ---------- Homepage: scrolling banner + overlapping 3D stamp,
   directly under the split hero ---------- */
.heroMarquee{position:relative;overflow:hidden;background:var(--ink,#121212);border-bottom:4px solid var(--rust);padding:20px 0;z-index:1}
.marqueeTrack{display:flex;align-items:center;width:max-content;animation:stockyardMarquee 34s linear infinite}
.heroMarquee:hover .marqueeTrack{animation-play-state:paused}
.marqueeTrack span{white-space:nowrap;font:700 .82rem "Oswald",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f4ebdd;padding:0 26px}
.marqueeTrack span.dot{color:var(--rust);padding:0;font-size:.65rem}
@keyframes stockyardMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marqueeTrack{animation:none}}

@media(max-width:700px){
  .heroMarquee{padding:14px 0}
  .marqueeTrack span{font-size:.7rem;padding:0 18px}
}

/* ---------- Pricing / Pack Perks section: real spacing instead of
   the 2px hairline seams that made the boxes look like they were
   touching with no breathing room ---------- */
.pricingGrid{gap:28px!important}
.pricingGrid article{border-radius:4px}
.roundGrid{gap:28px!important}
.packPerks{margin:40px auto!important;border-radius:4px}
.coolerCallout{margin:0 auto 40px!important;border-radius:4px}
@media(max-width:800px){.pricingGrid{gap:20px!important}.roundGrid{gap:20px!important}}

/* ---------- Sticky nav: bigger text, darker ground ---------- */
.nav,.nav.nav-scrolled{background:#0b0a08!important}
.nav.nav-scrolled{background:rgba(8,7,6,.97)!important}

/* Nav links were rendering in var(--ink) (near-black) from an old
   cream-nav-theme rule that never got cleaned up — invisible-looking
   against the dark bar. Force the bright cream everywhere but hover. */
.navLinks a{font-size:.78rem!important;letter-spacing:.09em;color:#f7f1e4!important;opacity:1!important}
.navLinks a:hover{color:#F3C875!important}
.navLinks .smallCta{font-size:.74rem!important;color:var(--ink)!important}
.navLinks .navLogin{opacity:.85!important}
@media(max-width:900px){.navLinks a{font-size:1rem!important}}

/* ---------- FAQ dropdown under Membership ---------- */
.navDropdown{position:relative}
.navDropdown>a{display:inline-flex;align-items:center;gap:5px}
.navDropdownArrow{font-size:.65em;transition:transform .2s ease}
.navDropdown:hover .navDropdownArrow,.navDropdown:focus-within .navDropdownArrow{transform:rotate(180deg)}
.navDropdownMenu{display:none;position:absolute;top:calc(100% + 1px);left:0;margin-top:0;min-width:190px;background:#0b0a08;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:8px;box-shadow:0 18px 35px rgba(0,0,0,.4);z-index:1003}
.navDropdown:hover .navDropdownMenu,.navDropdown:focus-within .navDropdownMenu{display:block}
.navDropdownMenu a{display:block!important;padding:9px 12px;font-size:.72rem!important;white-space:nowrap;border-radius:4px}
.navDropdownMenu a:hover{background:rgba(255,255,255,.06)}
.navExperienceMenu{display:none;grid-template-columns:repeat(2,minmax(170px,1fr));min-width:390px}
.navDropdown:hover .navExperienceMenu,.navDropdown:focus-within .navExperienceMenu{display:grid}
@media(max-width:900px){
  .navDropdown{width:100%}
  .navDropdownArrow{display:none}
  .navDropdownMenu{display:block!important;position:static;background:none;border:0;box-shadow:none;padding:0 0 0 18px;margin-top:6px}
  .navExperienceMenu{min-width:0!important;grid-template-columns:1fr!important}
  .navDropdownMenu a{padding:8px 0!important;font-size:.85rem!important}
}

/* The mobile hamburger button was forced to display:inline-flex by an
   accessibility min-height rule that had no media-query guard, so it
   showed on desktop next to the full nav. Only show it under 900px. */
.menuButton{display:none!important}
@media(max-width:900px){.menuButton{display:inline-flex!important}}

/* Nav logo: the dark wordmark was invisible on the dark nav — using the
   light/reversed lockup instead. It's a taller image (includes the horns
   mark) so give it a little more vertical room and align it naturally. */
.brandLogo{height:56px!important;justify-content:flex-start}
.brandLogo img{object-position:left center!important}
@media(max-width:900px){.brandLogo{height:46px!important}}
.menuButton{color:var(--cream)!important}

/* ---------- Homepage: "ahead campaign" (people walking) now gets a
   big headline like the other photo sections, brighter contrast via a
   stronger scrim, and the CTA button gets a subtle shimmer sweep ---------- */
.aheadCampaign{position:relative}
.aheadCampaignShade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,7,.78) 8%,rgba(10,9,7,.1) 48%,rgba(10,9,7,.5) 100%);pointer-events:none}
.aheadCampaignCopy{position:absolute;z-index:2;left:7vw;right:7vw;top:7vw}
.aheadCampaignCopy .kicker{color:#F3C875;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.aheadCampaignCopy h2{font-size:clamp(2.4rem,5.6vw,5rem);line-height:.98;max-width:15ch;color:#fff;text-shadow:0 6px 28px rgba(0,0,0,.55);margin:.5rem 0 0}
.aheadCampaign>a.aheadCampaignCta{position:absolute;left:7vw;bottom:7vw;z-index:2;overflow:hidden}
.aheadCampaign>a.aheadCampaignCta::after{content:"";position:absolute;top:0;left:-60%;width:35%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:aheadShimmer 3.4s ease-in-out infinite}
@keyframes aheadShimmer{0%{left:-60%}55%{left:130%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.aheadCampaign>a.aheadCampaignCta::after{animation:none;display:none}}
@media(max-width:700px){.aheadCampaignCopy{left:5vw;right:5vw;top:6vw}.aheadCampaignCopy h2{max-width:none}}

/* ---------- Homepage: Dog Universe / Stockyard Lens teaser — new
   Find/Collect/Earn/Build feature row, and the poster image now leads
   on mobile so it stacks image-first like the other photo sections ---------- */
.homeLensFeatures{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem 1.8rem;margin:0 0 2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.16)}
.homeLensFeatures b{display:block;font:700 .76rem "Oswald",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#F3C875;margin-bottom:5px}
.homeLensFeatures span{font-size:.84rem;line-height:1.55;color:#cfc4b0}
.homeLensImage img{object-position:center 26%}
.homeLensImage{height:auto!important;align-self:stretch!important}
@media(max-width:800px){
  .homeLensImage{order:-1}
  .homeLensFeatures{grid-template-columns:1fr;gap:1rem}
}

/* ---------- Fix a real pre-existing bug: overflow-x:hidden on <body>
   forces the browser to auto-convert overflow-y to "auto" per spec,
   turning body into its own independent scroll container. Since body's
   content never actually overflows its own box, real scrolling happens
   on <html> instead — which silently breaks position:sticky for every
   direct child of body, including the nav. Has likely never stuck
   correctly. <html> alone already prevents horizontal overflow. ---------- */
body{overflow-x:visible!important;overflow-y:visible!important}

/* ---------- Sticky announcement bar + nav, stacked ----------
   Both are pinned; the bar shrinks on scroll and the nav's sticky
   offset (--announceBarH) is kept in sync with its live height by
   main.js, so there's never a gap or overlap between the two. */
.announceBar{position:sticky!important;top:0;z-index:60;transition:min-height .25s ease,padding .25s ease}
.nav,.nav.nav-scrolled{position:sticky!important;top:var(--announceBarH,64px)!important;z-index:50;transition:top .25s ease}
.announceBar.announceBar-scrolled{min-height:0!important;padding:6px 18px!important}
.announceBar.announceBar-scrolled .announceBar-main,
.announceBar.announceBar-scrolled .announceCountdown{font-size:.72rem!important}
.announceBar.announceBar-scrolled .announceBar-cta{padding:6px 12px!important;font-size:.65rem!important}
@media(max-width:700px){
  .announceBar.announceBar-scrolled{padding:6px 16px!important}
}

/* ---------- Legal pages: the stamp watermark was overlapping the
   headline instead of sitting quietly in the corner ---------- */
.legalHero:after,.simpleHero:after{
  background-image:url('/assets/brand/STAMPS/Stockyard_Icon_Circle.png')!important;
  width:120px!important;height:120px!important;
  right:2vw!important;top:2vw!important;
  transform:none!important;
  opacity:.9!important;
}
@media(max-width:900px){
  .legalHero:after,.simpleHero:after{width:88px!important;height:88px!important}
}
@media(max-width:640px){
  .legalHero:after,.simpleHero:after{width:68px!important;height:68px!important;top:1.5rem!important;right:1.5rem!important;display:block!important}
}

/* ---------- Footer v5: dropdowns at every breakpoint, true full width ---------- */
.siteFooter{width:100%;background:#171914;border-top:4px solid var(--rust);padding:0 5vw;box-sizing:border-box}

.footerTop{display:flex;flex-direction:row-reverse;align-items:flex-start;justify-content:space-between;gap:56px;width:100%;margin:0;padding:20px 0 8px}
.footerLogoBox{flex:none;padding-top:2px}
.footerLogoBox img{width:118px;height:118px;display:block}

.footerColumns{display:flex;flex-wrap:wrap;gap:56px;flex:1}
.footerCol{border:0;min-width:150px}
.footerCol summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font:700 .88rem "Oswald",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#e08a4a;padding:4px 0}
.footerCol summary::-webkit-details-marker{display:none}
.footerChevron{display:inline-block;font-size:.8rem;transition:transform .2s ease;color:#e08a4a}
.footerCol[open] .footerChevron{transform:rotate(180deg)}
.footerColBody{display:flex;flex-direction:column;align-items:flex-start;gap:11px;padding-top:14px}
.footerColBody a{color:#f4ebdd;text-decoration:none;font-size:.9rem;opacity:.92}
.footerColBody a:hover{opacity:1;text-decoration:underline}
.footerSocialRow{display:flex;gap:10px;margin-bottom:2px}
.footerSocialRow a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:var(--cream);transition:border-color .2s ease,color .2s ease}
.footerSocialRow a svg{width:15px;height:15px}
.footerSocialRow a:hover{border-color:#F3C875;color:#F3C875}

.footerBottomBar{display:block;width:100%;margin:0;padding:20px 0 24px;border-top:1px solid rgba(255,255,255,.1);text-align:center}
.footerFindPack{display:block;font:700 .62rem "Oswald",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8f8a78;margin-bottom:8px}
.footerBottomBar p{margin:0;font-size:.8rem;color:#c9c2b3}
.footerBottomBar a{color:#c9c2b3;text-decoration:underline;text-underline-offset:2px}
.footerBottomBar a:hover{color:#F3C875}

@media(max-width:820px){
  .footerTop{flex-direction:column;align-items:center;gap:22px;padding:28px 0 4px}
  .footerLogoBox img{width:104px;height:104px}
  .footerColumns{flex-direction:column;width:100%;gap:0}
  .footerCol{width:100%;border-bottom:1px solid rgba(255,255,255,.12);padding:14px 0}
  .footerColBody{padding-top:12px}
  .footerBottomBar p{line-height:1.7}
}

/* ---------- Cookie consent banner ---------- */
/* The [hidden] guard here is critical: without it, this rule (an author
   style) overrides the browser's built-in [hidden]{display:none} default
   regardless of the hidden attribute — meaning the banner would render on
   every page load no matter what consent.js decided, ignoring localStorage
   entirely. This was the actual cause of it "never going away." */
.cookieConsent:not([hidden]){position:fixed;left:16px;right:16px;bottom:16px;z-index:1001;max-width:640px;margin:0 auto;background:#171914;color:#f4ebdd;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;box-shadow:0 20px 45px rgba(0,0,0,.35);font-size:.86rem;line-height:1.5}
.cookieConsent p{margin:0;flex:1 1 260px}
.cookieConsent a{color:#F3C875;text-decoration:underline;text-underline-offset:2px}
.cookieConsentActions{display:flex;gap:10px;flex:0 0 auto}
.cookieConsentActions button{font:700 .72rem "Oswald",sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:11px 18px;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,.3);background:transparent;color:#f4ebdd}
.cookieConsentAccept{background:var(--rust)!important;border-color:var(--rust)!important;color:#fff!important}
.cookieConsentDecline:hover{border-color:#fff}
.cookieConsentAccept:hover{filter:brightness(1.1)}
@media(max-width:480px){.cookieConsent{flex-direction:column;align-items:stretch;text-align:center}.cookieConsent p{flex:none}.cookieConsentActions{justify-content:center}}

/* ---------- Checkout trust bar ---------- */
.trustBar{display:flex;align-items:center;gap:9px;padding:11px 14px;margin:4px 0 16px;background:#eef4ea;border:1px solid #cddbc4;border-radius:6px;font-size:.76rem;color:#3c4a33}
.trustBar svg{width:17px;height:17px;flex:none;color:var(--sage,#4A4D2A)}

/* ---------- FAQ page ---------- */
.faqHero{padding-bottom:3rem!important}
.faqSection{max-width:880px;margin:0 auto;padding:2rem 2rem 6rem}
.faqGroup{margin-bottom:2.6rem}
.faqGroup h2{font-size:1.5rem;margin-bottom:1rem;color:var(--ranch,#4A4D2A)}
.faqList{border-top:1px solid var(--line,rgba(18,18,18,.18))}
.faqItem{border-bottom:1px solid var(--line,rgba(18,18,18,.18));padding:4px 0}
.faqItem summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 2px;font-weight:600;font-size:1.02rem}
.faqItem summary::-webkit-details-marker{display:none}
.faqPlus{flex:none;font-size:1.3rem;line-height:1;color:var(--rust);transition:transform .2s ease}
.faqItem[open] .faqPlus{transform:rotate(45deg)}
.faqItem p{margin:0 0 18px;padding-right:36px;line-height:1.7;color:#4a463d}
.faqItem p a{color:var(--rust)}
.faqNotice{margin:0 0 3.2rem;padding:22px 24px;border-left:4px solid #F3C875;background:#ebe1ce;color:#302d27}
.faqNotice strong{display:block;font:700 .76rem "Oswald",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--rust);margin-bottom:7px}
.faqNotice p{margin:0;line-height:1.65}
.faqItem summary{position:relative;z-index:1;touch-action:manipulation}
.faqAnswer{padding:0 36px 18px 2px;line-height:1.7;color:#4a463d}
.faqAnswer p{margin:0 0 12px;padding:0;color:inherit}
.faqAnswer p:last-child{margin-bottom:0}
.faqAnswer ul{margin:0 0 14px;padding-left:1.25rem}
.faqAnswer li{margin:.5rem 0}
.faqAnswer a{color:var(--rust);font-weight:600}
.faqFinalCta{margin-top:4.5rem;padding:3rem;background:#1a1c17;color:var(--cream);text-align:center;border-top:4px solid var(--rust)}
.faqFinalCta h2{font-size:clamp(2rem,4vw,3.8rem);margin-bottom:1.4rem}
.faqFinalCta .buttonRow{justify-content:center;flex-wrap:wrap}
.faqSecondary{border:1px solid rgba(255,255,255,.45);color:var(--cream)}
@media(max-width:640px){.faqSection{padding-left:1.2rem;padding-right:1.2rem}.faqAnswer{padding-right:4px}.faqFinalCta{padding:2.2rem 1.25rem}.faqFinalCta .button{width:100%}}
.faqMore{text-align:center;margin-top:3rem;font-size:1.05rem}
.faqMore a{color:var(--rust);text-decoration:underline}

/* ---------- 404 page ---------- */
.notFound{min-height:calc(100vh - 160px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:8vw 7vw;background:var(--ink,#121212);color:var(--cream,#F5F1E6)}
.notFound h1{font-size:clamp(2.6rem,6vw,5rem);margin:.6rem 0 1.2rem}
.notFound p{max-width:52ch;font-size:1.1rem;line-height:1.7;color:#cfc4b0}
.notFound .buttonRow{margin:28px 0 40px}
.notFoundLinks{display:flex;flex-wrap:wrap;gap:10px 26px;border-top:1px solid rgba(255,255,255,.15);padding-top:22px;width:100%}
.notFoundLinks a{font:700 .72rem "Oswald",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#cfc4b0;text-decoration:none}
.notFoundLinks a:hover{color:#fff}