/* ============ HERO — Bold Color Block (scoped) ============ */
.hero{ position:relative; background:var(--orange); overflow:hidden; min-height:100vh; display:flex; flex-direction:column; }
.hero .hero-grid{ position:absolute; inset:0; background:
  repeating-linear-gradient(90deg, transparent 0 95px, rgba(28,24,19,.045) 95px 96px),
  repeating-linear-gradient(0deg, transparent 0 95px, rgba(28,24,19,.045) 95px 96px);
  pointer-events:none; }
.hero .hero-body{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:140px 64px 40px; position:relative; z-index:2; max-width:1440px; width:100%; margin:0 auto; }
.hero .eyebrow{ font-weight:700; font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:18px; }
.hero h1{ margin:0; font-family:'Salks',sans-serif; font-weight:400; line-height:.86; letter-spacing:-.01em; text-transform:uppercase; }
.hero h1 .l1{ display:block; font-size:clamp(56px,11vw,150px); color:var(--paper); }
.hero h1 .l1 .fr{ color:var(--paper); }
.hero h1 .l2{ display:block; font-size:clamp(52px,10.2vw,140px); color:var(--amber); }
.hero .hero-row{ display:flex; align-items:center; gap:28px; margin-top:40px; flex-wrap:wrap; }
.hero .hero-cta{ display:inline-flex; align-items:center; gap:12px; background:var(--paper); color:var(--ink); font-family:'Salks',sans-serif; font-size:24px; padding:19px 34px; border:3px solid var(--ink); border-radius:100px; box-shadow:5px 5px 0 var(--ink); transition:transform .18s, box-shadow .18s; }
.hero .hero-cta:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.hero .hero-note{ color:var(--paper); font-size:18px; max-width:330px; line-height:1.45; opacity:.94; }
.hero .hero-badge{ position:absolute; right:54px; top:120px; width:240px; height:240px; border-radius:50%; background:var(--paper); display:grid; place-items:center; box-shadow:0 14px 0 rgba(0,0,0,.16); z-index:2; }
.hero .hero-badge img{ width:80%; height:80%; object-fit:contain; }
.hero .hero-mascot{ position:absolute; right:60px; bottom:96px; height:248px; z-index:6; pointer-events:none; filter:hue-rotate(45deg) saturate(3) brightness(1.15) contrast(1.05) drop-shadow(0 16px 18px rgba(0,0,0,.22)); }

/* hero marquee */
.hero .hero-marq{ position:relative; z-index:3; overflow:hidden; background:var(--amber); border-top:4px solid var(--ink); padding:16px 0; display:flex; }
.hero .hero-marq .track{ display:flex; width:max-content; animation:qw-scroll 28s linear infinite; }
.hero .hero-marq .item{ display:flex; align-items:center; gap:26px; padding-right:26px; flex:0 0 auto; }
.hero .hero-marq .item span{ font-family:'Salks',sans-serif; font-size:30px; color:var(--ink); white-space:nowrap; }
.hero .hero-marq .item b{ width:12px; height:12px; border-radius:99px; background:var(--orange); display:block; flex:0 0 auto; }

/* small-laptop / tablet: badge + mascot shrink and pull in so they stop colliding with the headline */
@media (max-width:1240px) and (min-width:901px){
  .hero .hero-badge{ width:172px; height:172px; right:32px; top:112px; }
  .hero .hero-mascot{ height:190px; right:30px; bottom:96px; }
  .hero h1{ max-width:calc(100% - 210px); }
}
@media (max-width:900px){
  .hero .hero-badge{ width:150px; height:150px; right:24px; top:96px; }
  .hero .hero-mascot{ height:160px; right:16px; bottom:90px; }
  .hero .hero-body{ padding:120px 30px 30px; }
}
@media (max-width:560px){
  .hero .hero-badge{ display:none; }
  .hero .hero-body{ padding:120px 30px 130px; }
  .hero .hero-mascot{ height:80px; right:12px; bottom:74px; }
}
@media (prefers-reduced-motion:reduce){ .hero .hero-marq .track{ animation:none; } }