/* =========================================================
   Cowbell — Homepage banner carousel (replaces the old hero
   video). Product banners on blue/teal/navy waves, animated
   curved headline, round arrows, dots, swipe + autoplay.
   Loaded after style.css. Nothing here touches other pages.
========================================================= */
.hb{position:relative;overflow:hidden;background:#0a2a5e;color:#fff;isolation:isolate}
.bn-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bn-viewport{position:relative;width:100%;overflow:hidden;touch-action:pan-y}
.bn-track{display:flex;transition:transform .85s cubic-bezier(.22,.61,.36,1);will-change:transform}
.bn-slide{flex:0 0 100%;min-width:0;position:relative;display:flex;align-items:center;
  min-height:clamp(540px,47vw,700px);padding:118px 0 84px;overflow:hidden}
.bn-slide[data-theme="blue"]{background:linear-gradient(135deg,#3c9be0 0%,#1f72c4 42%,#0a2a86 100%)}
.bn-slide[data-theme="teal"]{background:linear-gradient(135deg,#25a6a8 0%,#0c7f86 45%,#0b3a5a 100%)}
.bn-slide[data-theme="navy"]{background:linear-gradient(135deg,#5b7ea6 0%,#2c4f7c 45%,#0d1f3d 100%)}
.bn-slide[data-theme="brass"]{background:linear-gradient(135deg,#d99a45 0%,#a8681a 42%,#3a2208 100%)}

/* decorative waves (like the reference banner) */
.bn-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;z-index:1;pointer-events:none}
.bn-waves path.w1{fill:rgba(255,255,255,.16)}
.bn-waves path.w2{fill:rgba(255,255,255,.10)}
.bn-waves path.line{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;opacity:.85;
  stroke-dasharray:2400;stroke-dashoffset:2400}
.bn-slide.is-active .bn-waves path.line{animation:bnDraw 2.2s .25s ease forwards}
.bn-bubbles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bn-bubbles i{position:absolute;border-radius:50%;background:rgba(255,255,255,.14);animation:bnBob 7s ease-in-out infinite}
.bn-bubbles i:nth-child(1){width:140px;height:140px;left:6%;top:12%}
.bn-bubbles i:nth-child(2){width:70px;height:70px;left:44%;top:70%;animation-delay:-2s}
.bn-bubbles i:nth-child(3){width:96px;height:96px;right:5%;top:8%;animation-delay:-4s}

.bn-inner{position:relative;z-index:3;width:100%;max-width:var(--container,1220px);margin:0 auto;
  padding:0 84px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:30px}
.bn-copy{min-width:0}
.bn-eyebrow{font-family:var(--font-mono,monospace);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:#ffe2b3;margin:0 0 .9rem;opacity:0;transform:translateY(10px)}
.bn-slide.is-active .bn-eyebrow{animation:bnFade .7s .05s ease forwards}
.bn-title{font-family:var(--font-display,'Space Grotesk',sans-serif);font-weight:800;color:#fff;margin:0 0 1rem;
  line-height:1.02;letter-spacing:-.02em;font-size:clamp(2.5rem,5.6vw,4.6rem);
  text-shadow:0 6px 28px rgba(0,0,0,.28)}
.bn-l1,.bn-l2{display:block}
.bn-l1{color:#0a1a6e;text-shadow:none}
.bn-slide[data-theme="teal"] .bn-l1{color:#052b3d}
.bn-slide[data-theme="navy"] .bn-l1{color:#fff}
.bn-slide[data-theme="brass"] .bn-l1{color:#2a1604}
.bn-l2{padding-bottom:.35em}
.bn-w{display:inline-block;white-space:nowrap}
.bn-ch{display:inline-block;white-space:pre;opacity:0;will-change:transform,opacity;
  transform:translateY(calc(var(--dy,0em) + .7em)) rotate(var(--rot,0deg)) scale(.8)}
.bn-slide.is-active .bn-ch{animation:bnRise .75s cubic-bezier(.2,.9,.3,1.25) forwards;animation-delay:calc(var(--i,0) * 42ms + .15s)}
.bn-no-js .bn-ch{opacity:1;transform:none}
.bn-sub{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.55;color:rgba(255,255,255,.92);max-width:30em;margin:0 0 1.5rem;
  opacity:0;transform:translateY(12px)}
.bn-slide.is-active .bn-sub{animation:bnFade .8s .7s ease forwards}
.bn-cta{display:flex;flex-wrap:wrap;gap:12px;opacity:0;transform:translateY(12px)}
.bn-slide.is-active .bn-cta{animation:bnFade .8s .95s ease forwards}
.bn-cta .btn{white-space:nowrap}
.bn-btn-ghost{background:rgba(255,255,255,.14)!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.7)!important}
.bn-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 1.5rem;padding:0;list-style:none}
.bn-chips li{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:7px 14px;font-size:.88rem;font-weight:600}

/* product cards */
.bn-products{list-style:none;margin:0;padding:0;display:flex;gap:16px;justify-content:center;align-items:flex-end}
.bn-products li{flex:1 1 0;min-width:0;max-width:210px;opacity:0;transform:translateY(34px) scale(.94)}
.bn-slide.is-active .bn-products li{animation:bnCard .85s cubic-bezier(.2,.9,.3,1.1) forwards;animation-delay:calc(.35s + var(--k,0) * 130ms)}
.bn-products li:nth-child(even){margin-bottom:34px}
.bn-card{display:block;color:#fff;text-decoration:none}
.bn-card .bn-img{display:block;position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;
  border:3px solid rgba(255,255,255,.9);background:#fff;box-shadow:0 22px 40px -18px rgba(0,0,0,.55);
  transition:transform .35s ease,box-shadow .35s ease}
.bn-card:hover .bn-img,.bn-card:focus-visible .bn-img{transform:translateY(-8px);box-shadow:0 30px 46px -16px rgba(0,0,0,.6)}
.bn-card img{width:100%;height:100%;object-fit:cover;display:block}
.bn-card .bn-cap{display:block;margin-top:9px;text-align:center;font-size:.82rem;font-weight:600;line-height:1.25;
  color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.bn-feature{margin:0;opacity:0;transform:translateY(24px) scale(.96)}
.bn-slide.is-active .bn-feature{animation:bnCard .9s .3s cubic-bezier(.2,.9,.3,1.1) forwards}
.bn-feature img{width:100%;height:auto;display:block;border-radius:22px;border:3px solid rgba(255,255,255,.9);
  box-shadow:0 28px 50px -20px rgba(0,0,0,.6)}

/* arrows + dots */
.bn-arrow{position:absolute;top:50%;z-index:6;width:50px;height:50px;margin-top:-25px;border-radius:50%;border:0;cursor:pointer;
  background:#0b82d3;color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px -6px rgba(0,0,0,.5);
  transition:transform .2s ease,background .2s ease}
.bn-arrow:hover{transform:scale(1.08);background:#0a6fb8}
.bn-arrow:focus-visible{outline:3px solid #fff;outline-offset:3px}
.bn-arrow svg{width:22px;height:22px}
.bn-prev{left:22px}
.bn-next{right:22px;background:#1414e0}
.bn-next:hover{background:#0f0fb8}
.bn-dots{position:absolute;left:0;right:0;bottom:26px;z-index:6;display:flex;justify-content:center;gap:10px;pointer-events:none}
.bn-dot{pointer-events:auto}
.bn-dot{width:11px;height:11px;border-radius:999px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.5);
  transition:width .3s ease,background .3s ease}
.bn-dot.active{width:34px;background:#fff}
.bn-dot:focus-visible{outline:3px solid #fff;outline-offset:3px}

@keyframes bnRise{to{opacity:1;transform:translateY(var(--dy,0em)) rotate(var(--rot,0deg)) scale(1)}}
@keyframes bnFade{to{opacity:1;transform:none}}
@keyframes bnCard{to{opacity:1;transform:none}}
@keyframes bnDraw{to{stroke-dashoffset:0}}
@keyframes bnBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

@media (max-width:900px){
  .bn-slide{min-height:0;padding:104px 0 84px}
  .bn-inner{grid-template-columns:1fr;padding:0 22px;gap:22px}
  .bn-title{font-size:clamp(2.2rem,10vw,3.2rem)}
  .bn-products{gap:10px}
  .bn-products li{max-width:none}
  .bn-products li:nth-child(even){margin-bottom:18px}
  .bn-arrow{width:40px;height:40px;margin-top:0;top:auto;bottom:14px}
  .bn-arrow svg{width:18px;height:18px}
  .bn-prev{left:14px}.bn-next{right:14px}
  .bn-dots{bottom:30px}
}
@media (max-width:520px){
  .bn-products li:nth-child(4){display:none}
  .bn-card .bn-cap{font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){
  .bn-track{transition:none}
  .bn-ch,.bn-eyebrow,.bn-sub,.bn-cta,.bn-products li,.bn-feature{opacity:1!important;transform:none!important;animation:none!important}
  .bn-ch{transform:translateY(var(--dy,0em)) rotate(var(--rot,0deg))!important}
  .bn-waves path.line{animation:none!important;stroke-dashoffset:0}
  .bn-bubbles i{animation:none}
}

/* =========================================================
   Farm background (v3) — real photo, cows graze & drift slightly,
   grass sways, slow camera drift. One fixed colour tint on every
   slide (no more blue / orange changes). Layers share the photo's
   2169x725 frame so they stay perfectly aligned at any screen size.
========================================================= */
.hb{background:#2f8f3a}
.bn-farm{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;container-type:size;
  background:#3d9a2e url("assets/hero-banner/farm-photo.webp") center bottom/cover no-repeat}
.bn-kb{position:absolute;inset:0;transform-origin:50% 92%;animation:bnDrift 32s ease-in-out infinite alternate}
.bn-stage{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:max(100cqw,calc(100cqh * 2.9917));aspect-ratio:2169/725}
.bn-stage img{position:absolute;display:block;max-width:none;user-select:none}
.bn-stage .farm-bg{left:0;top:0;width:100%;height:100%}
.bn-stage .grass-strip{left:0;width:100%;transform-origin:50% 100%;animation:bnGrass 5.5s ease-in-out infinite alternate}
.bn-stage .cow{will-change:transform;animation:bnGraze 7s ease-in-out infinite alternate}
.bn-stage .face-r{transform-origin:6% 70%}
.bn-stage .face-l{transform-origin:94% 70%;animation-name:bnGrazeL}
.bn-stage .cow-c2{animation-duration:8.5s;animation-delay:-2s}
.bn-stage .cow-c3{animation-duration:6.2s;animation-delay:-4s}
.bn-stage .cow-c4{animation-duration:9.4s;animation-delay:-1s}
.bn-stage .cow-c5{animation-duration:7.8s;animation-delay:-3s}
@keyframes bnDrift{from{transform:scale(1) translateX(0)}to{transform:scale(1.07) translateX(-1.2%)}}
@keyframes bnGrass{from{transform:skewX(-.5deg) translateX(-.25%)}to{transform:skewX(.5deg) translateX(.25%)}}
/* head dips to the grass while the cow steps slowly forward */
@keyframes bnGraze{0%{transform:translate(0,0) rotate(0)}45%{transform:translate(.25%,.12%) rotate(1.6deg)}100%{transform:translate(.7%,0) rotate(.4deg)}}
@keyframes bnGrazeL{0%{transform:translate(0,0) rotate(0)}45%{transform:translate(-.25%,.12%) rotate(-1.6deg)}100%{transform:translate(-.7%,0) rotate(-.4deg)}}
@supports not (width:1cqw){.bn-stage{display:none}}
@media (prefers-reduced-motion:reduce){.bn-kb,.bn-stage img{animation:none!important}}

.hb .bn-viewport{z-index:1}
.hb .bn-slide[data-theme]{background:transparent;--tint:8,96,108}
.hb .bn-slide::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(95deg,rgba(var(--tint),.80) 0%,rgba(var(--tint),.58) 34%,rgba(var(--tint),.14) 64%,rgba(var(--tint),0) 100%)}
.hb .bn-waves{display:none}
.hb .bn-bubbles i{background:rgba(255,255,255,.10)}
.hb .bn-slide[data-theme] .bn-l1{color:#ffe7b3;text-shadow:0 4px 20px rgba(0,0,0,.35)}
.hb .bn-sub{text-shadow:0 2px 10px rgba(0,0,0,.45)}
@media (max-width:900px){
  .hb .bn-slide::before{background:linear-gradient(180deg,rgba(var(--tint),.80) 0%,rgba(var(--tint),.62) 55%,rgba(var(--tint),.30) 100%)}
}
.flip-ico svg,.flip-nav button svg{width:24px;height:24px;max-width:100%}
.bn-arrow svg{width:22px;height:22px}