/* ============================================================
   HOTBIRD. — Turkey bacon. But make it hot.
   Type: Anton (display) / Space Grotesk (body)
   Palette: ink #141110 · paper #F4EDE2 · flame #FF3B1F
            deep #B3260F · gold #FFC629 · category beige #C7BFB2
   ============================================================ */

:root{
  --ink:#141110;
  --paper:#F4EDE2;
  --red:#FF3B1F;
  --red-deep:#B3260F;
  --gold:#FFC629;
  --dull:#C7BFB2;
  --dull-dark:#8F877B;
  --pack-depth-ratio:0.22;
  --gutter:clamp(20px, 5vw, 72px);
  --pack-w:clamp(250px, 27vw, 380px);
  --pack-h:calc(var(--pack-w) * 1.5);
  --pack-d:calc(var(--pack-w) * var(--pack-depth-ratio));
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk',Arial,sans-serif;
  overflow-x:clip;
  line-height:1.5;
}
img{max-width:100%;height:auto;display:block;}
::selection{background:var(--red);color:var(--paper);}

h1,h2,h3,.bd-media-attitude,.footer-brand,.af-brand{
  font-family:'Anton',Impact,sans-serif;
  font-weight:400;
  line-height:.92;
  letter-spacing:.01em;
  text-transform:uppercase;
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px var(--gutter);
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.is-solid{
  background:var(--paper);
  padding:12px var(--gutter);
  box-shadow:0 1px 0 var(--ink);
}
.brand{
  font-family:'Anton',Impact,sans-serif;
  font-size:clamp(20px,2.2vw,26px);
  color:var(--ink);text-decoration:none;letter-spacing:.02em;
  position:relative;z-index:51;
}
.brand-dot{color:var(--red);}
.site-nav{display:flex;gap:clamp(14px,2.4vw,34px);align-items:center;}
.site-nav a{
  color:var(--ink);text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:2px solid transparent;padding-bottom:2px;
  transition:border-color .2s ease,color .2s ease;
}
.site-nav a:hover{border-color:var(--red);}
.site-nav .nav-cta{
  background:var(--ink);color:var(--paper);
  padding:8px 16px;border-bottom:none;
  transition:background .2s ease;
}
.site-nav .nav-cta:hover{background:var(--red);color:var(--paper);}
@media(max-width:640px){.site-nav a:not(.nav-cta){display:none;}}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  padding:120px var(--gutter) 80px;
}
.hero-inner{position:relative;z-index:3;text-align:center;pointer-events:none;}
.hero-title{display:flex;flex-direction:column;gap:.02em;}
.ht-line{
  display:block;
  font-size:clamp(56px, 12.5vw, 190px);
  color:var(--ink);
  will-change:transform;
}
.ht-1{align-self:flex-start;transform:translateX(-2vw);}
.ht-2{align-self:flex-end;transform:translateX(2vw);}
.ht-3{font-size:clamp(30px, 5.4vw, 84px);letter-spacing:.04em;margin-top:.25em;}
.hero-hot{
  font-style:normal;color:var(--red);
  -webkit-text-stroke:0;text-shadow:0 0 60px rgba(255,59,31,.35);
}
.hero-red{color:var(--red);}
.hero-sub{
  margin-top:26px;font-size:clamp(14px,1.4vw,19px);
  font-weight:500;letter-spacing:.02em;max-width:34em;margin-left:auto;margin-right:auto;
}
.hero-sub::before{content:"";display:block;width:54px;height:5px;background:var(--red);margin:0 auto 18px;}

/* Package sits huge, breaking the frame */
.pack-stage{
  position:absolute;top:50%;left:50%;z-index:2;
  transform:translate(-50%,-50%);
  width:var(--pack-w);height:var(--pack-h);
  perspective:1400px;
  pointer-events:none;
}
.pack3d{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  will-change:transform;
  transform:rotateY(-18deg);
}
.pack-face{
  position:absolute;overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.pack-front,.pack-back{
  width:var(--pack-w);height:var(--pack-h);
  background:var(--red);
  display:flex;flex-direction:column;
  padding:14px;
  box-shadow:inset 0 0 0 4px rgba(20,17,16,.9);
}
.pack-front{transform:translateZ(calc(var(--pack-d) / 2));}
.pack-back{transform:translateZ(calc(var(--pack-d) / -2)) rotateY(180deg);background:var(--paper);}
.pack-side,.pack-side2{
  width:var(--pack-d);height:var(--pack-h);
  background:var(--red-deep);
  display:flex;align-items:center;justify-content:center;
}
.pack-side{left:0;transform-origin:left center;transform:translateZ(calc(var(--pack-d) / -2)) rotateY(-90deg);}
.pack-side2{right:0;transform-origin:right center;transform:translateZ(calc(var(--pack-d) / 2)) rotateY(90deg);}
.pack-top,.pack-bottom{
  width:var(--pack-w);height:var(--pack-d);background:#2a2320;
}
.pack-top{top:0;transform-origin:center top;transform:translateZ(calc(var(--pack-d) / -2)) rotateX(90deg);}
.pack-bottom{bottom:0;transform-origin:center bottom;transform:translateZ(calc(var(--pack-d) / -2)) rotateX(-90deg);}
.pack-shadow{
  position:absolute;left:50%;bottom:calc(var(--pack-d) / -2 - 34px);
  width:130%;height:60px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(20,17,16,.35), transparent 68%);
  filter:blur(6px);z-index:-1;
}

/* Front face content */
.pf-meta{
  display:flex;justify-content:space-between;
  font-size:clamp(7px,0.75vw,10px);font-weight:700;letter-spacing:.16em;
  color:var(--paper);
}
.pf-brand{
  font-family:'Anton',Impact,sans-serif;
  font-size:clamp(40px,4.6vw,66px);
  line-height:.88;color:var(--paper);
  padding:10px 2px 8px;
}
.pf-brand .red{color:var(--gold);}
.pf-window{
  flex:1;min-height:0;
  border:4px solid var(--ink);
  overflow:hidden;
}
.pf-window img{width:100%;height:100%;object-fit:cover;object-position:center 40%;}
.pf-strip{
  font-family:'Anton',Impact,sans-serif;
  font-size:clamp(15px,1.7vw,24px);
  color:var(--ink);background:var(--paper);
  text-align:center;padding:4px 0 2px;
  margin:10px -4px -4px;
  letter-spacing:.06em;
}
.pf-sub{
  font-size:clamp(7px,0.75vw,10px);font-weight:700;letter-spacing:.22em;
  color:var(--paper);text-align:center;padding-top:7px;
}
/* Back face content */
.pb-head{
  font-family:'Anton',Impact,sans-serif;color:var(--red);
  font-size:clamp(15px,1.7vw,24px);text-align:center;padding:6px 0 12px;
}
.pb-rows{font-size:clamp(8px,0.85vw,12px);font-weight:600;letter-spacing:.08em;}
.pb-rows div{display:flex;justify-content:space-between;padding:6px 2px;border-bottom:2px solid var(--ink);}
.pb-barcode{
  margin-top:auto;height:38px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 10px,var(--ink) 10px 13px,transparent 13px 15px);
}
.pb-fine{font-size:clamp(7px,0.7vw,9px);letter-spacing:.1em;padding-top:8px;color:var(--dull-dark);font-weight:600;}

.hero-scrollcue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  z-index:4;font-size:11px;font-weight:700;letter-spacing:.28em;
  display:flex;align-items:center;gap:12px;color:var(--ink);
}
.hero-scrollcue span{
  width:34px;height:2px;background:var(--ink);display:inline-block;
  animation:cue 1.6s ease-in-out infinite;
}
@keyframes cue{0%,100%{transform:scaleX(1);}50%{transform:scaleX(.4);transform-origin:left;}}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;padding:16px 0;}
.marquee-red{background:var(--red);color:var(--paper);}
.marquee-ink{background:var(--ink);color:var(--paper);}
.marquee-track{display:inline-flex;animation:mq 26s linear infinite;}
.marquee-track span{
  font-family:'Anton',Impact,sans-serif;
  font-size:clamp(18px,2.4vw,34px);letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:26px;padding-right:26px;
}
.mq-dot{width:12px;height:12px;background:currentColor;display:inline-block;transform:rotate(45deg);}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Question ---------- */
.question{
  min-height:110vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  background:var(--ink);color:var(--paper);padding:0 var(--gutter);gap:8vh;
}
.q-big{font-family:'Anton',Impact,sans-serif;font-size:clamp(40px,8.5vw,130px);line-height:.95;}
.outline{color:transparent;-webkit-text-stroke:2px var(--red);}
.q-small{font-family:'Anton',Impact,sans-serif;font-size:clamp(22px,3.4vw,48px);color:var(--gold);}

/* ---------- Category (the boring aisle) ---------- */
.category{
  background:#DDD6CB;color:#5c564c;
  padding:110px var(--gutter) 90px;
  transition:background .6s ease;
}
.kicker{
  font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  display:block;margin-bottom:14px;color:inherit;
}
.cat-head h2{font-size:clamp(40px,7vw,110px);color:#6e675b;margin-bottom:48px;}
.cat-grid{
  display:flex;flex-wrap:wrap;gap:22px;justify-content:center;align-items:flex-start;
}
.cat-pack{
  width:clamp(140px,15vw,200px);
  background:#E7E2D9;border:1px solid #b5aea2;
  padding:12px;filter:grayscale(1);opacity:.75;
  display:flex;flex-direction:column;gap:8px;
  transition:transform .4s ease;
}
.cat-pack:nth-child(odd){transform:rotate(-2deg) translateY(14px);}
.cat-pack:nth-child(even){transform:rotate(1.5deg);}
.cp-brand{font-size:13px;font-weight:600;letter-spacing:.04em;}
.cp-claim{font-size:9px;font-weight:700;letter-spacing:.24em;color:#8f877b;}
.cat-pack img{filter:grayscale(1) contrast(.85);aspect-ratio:2/3;object-fit:cover;width:100%;}
.cat-note{
  text-align:center;margin-top:60px;font-size:clamp(14px,1.5vw,19px);
  letter-spacing:.02em;font-style:italic;
}

/* ---------- Flip ---------- */
.flip{
  background:var(--red);color:var(--paper);
  padding:clamp(120px,22vh,240px) var(--gutter);text-align:center;
}
.flip-line{font-size:clamp(48px,10vw,150px);}
.flip-line em{font-style:normal;color:var(--ink);}

/* ---------- Package lab ---------- */
.pack-lab{
  background:var(--paper);
  padding:120px var(--gutter) 140px;
  position:relative;
}
.lab-head{margin-bottom:30px;}
.lab-head h2{font-size:clamp(44px,8vw,120px);}
.lab-hint{font-size:clamp(14px,1.4vw,18px);font-weight:500;margin-top:12px;opacity:.7;}
.lab-stage{
  position:relative;
  height:clamp(480px,72vh,720px);
  display:flex;align-items:center;justify-content:center;
  perspective:1600px;
  cursor:grab;touch-action:pan-y;
}
.lab-stage:active{cursor:grabbing;}
.lab-pack{width:var(--pack-w);height:var(--pack-h);pointer-events:none;}
.lab-pack .pack-front{box-shadow:inset 0 0 0 4px rgba(20,17,16,.9), 0 30px 70px rgba(20,17,16,.28);}

/* Hotspots */
.hotspot{
  position:absolute;left:var(--x);top:var(--y);z-index:5;
  white-space:nowrap;
  width:auto;border:none;background:var(--ink);color:var(--paper);
  font-family:'Space Grotesk',Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.22em;
  padding:9px 14px 9px 26px;cursor:pointer;
  transition:background .2s ease;
}
.hotspot::before{
  content:"";position:absolute;left:8px;top:50%;
  width:8px;height:8px;transform:translateY(-50%);
  background:var(--red);border-radius:50%;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,31,.6);}60%{box-shadow:0 0 0 9px rgba(255,59,31,0);}}
.hotspot:hover{background:var(--red);}
.hs-popover{
  position:absolute;left:50%;bottom:8%;transform:translateX(-50%) translateY(10px);
  background:var(--ink);color:var(--paper);
  font-family:'Anton',Impact,sans-serif;
  font-size:clamp(16px,2vw,26px);letter-spacing:.03em;
  padding:16px 26px;opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:6;max-width:90%;text-align:center;
}
.hs-popover.is-on{opacity:1;transform:translateX(-50%) translateY(0);}
.lab-controls{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  margin-top:26px;
}
.lab-btn{
  border:2px solid var(--ink);background:transparent;color:var(--ink);
  font-family:'Space Grotesk',Arial,sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.2em;
  padding:10px 20px;cursor:pointer;
  transition:all .2s ease;
}
.lab-btn:hover{background:var(--ink);color:var(--paper);}
.lab-btn.is-active{background:var(--red);border-color:var(--red);color:var(--paper);}
.lab-note{font-size:12px;letter-spacing:.08em;opacity:.6;margin-left:8px;}

/* ---------- Bacon ---------- */
.bacon{background:var(--ink);color:var(--paper);padding:130px 0 110px;}
.bacon-head{padding:0 var(--gutter);margin-bottom:56px;}
.bacon-head h2{font-size:clamp(60px,13vw,200px);}
.bacon-head .hero-red{color:var(--red);}
.bacon-sub{font-size:clamp(16px,2vw,26px);font-weight:500;margin-top:18px;max-width:30em;}
.bacon-tag{
  text-align:center;padding:60px var(--gutter) 0;
  font-size:clamp(18px,2.6vw,34px);font-family:'Anton',Impact,sans-serif;
  letter-spacing:.03em;
}
.bacon-tag strong{color:var(--red);font-weight:400;}

/* ---------- Breakdown ---------- */
.breakdown{background:var(--paper);padding:130px var(--gutter);}
.bd-head h2{font-size:clamp(48px,9vw,140px);margin-bottom:30px;}
.bd-row{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,70px);
  align-items:center;padding:70px 0;border-top:3px solid var(--ink);
}
.bd-row:first-of-type{border-top:none;margin-top:40px;}
.bd-row-flip .bd-media{order:2;}
.bd-row-flip .bd-copy{order:1;}
.bd-media{position:relative;overflow:hidden;}
.bd-media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;will-change:transform;}
.bd-details .bd-media img{aspect-ratio:3/4;}
.bd-crop{
  font-family:'Anton',Impact,sans-serif;
  background:var(--red);color:var(--paper);
  font-size:clamp(80px,12vw,190px);line-height:.85;
  padding:clamp(40px,6vw,90px) clamp(24px,4vw,70px);
  overflow:hidden;position:relative;
}
.bd-crop::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg, rgba(20,17,16,.08) 0 2px, transparent 2px 26px);
}
.bd-crop .red{color:var(--ink);}
.bd-media-color{
  aspect-ratio:16/10;
  background:
    radial-gradient(circle at 22% 30%, var(--gold) 0 18%, transparent 19%),
    radial-gradient(circle at 78% 72%, var(--ink) 0 14%, transparent 15%),
    conic-gradient(from 200deg at 60% 40%, var(--red) 0 40%, var(--red-deep) 40% 58%, var(--red) 58% 100%);
}
.bd-media-attitude{
  aspect-ratio:16/10;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(50px,8vw,130px);
  transition:transform .5s ease;
}
.bd-media-attitude:hover{transform:scale(1.03);}
.bd-copy h3{
  font-size:clamp(34px,4.6vw,64px);margin-bottom:18px;
}
.bd-copy p{font-size:clamp(16px,1.7vw,21px);max-width:26em;}
.bd-anno{
  display:inline-block;margin-top:22px;
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red-deep);border-bottom:2px solid var(--red);padding-bottom:4px;
}

/* ---------- Shelf test ---------- */
.shelf{
  position:relative;min-height:130vh;
  background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.shelf-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.28;filter:saturate(.4) contrast(1.05);
}
.shelf-dim{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(circle 340px at var(--spot-x,50%) var(--spot-y,60%), transparent 0%, transparent 55%, rgba(10,8,7,.88) 100%);
  pointer-events:none;
  transition:background .1s linear;
}
.shelf-inner{position:relative;z-index:2;padding:110px var(--gutter) 40px;display:flex;flex-direction:column;gap:16px;}
.shelf-row{
  display:flex;gap:14px;justify-content:center;
}
.mini-pack{
  width:clamp(66px,8vw,110px);aspect-ratio:2/3;
  flex:0 0 auto;
}
.mp-dull{
  background:linear-gradient(160deg,#B8B2A6,#97917F);
  border:1px solid rgba(255,255,255,.14);opacity:.85;position:relative;
}
.mp-dull::after{
  content:"TURKEY BACON";
  position:absolute;inset:auto 0 8px 0;text-align:center;
  font-size:6px;letter-spacing:.2em;color:#5c564c;font-weight:700;
}
.mp-hot{
  background:var(--red);color:var(--paper);
  font-family:'Anton',Impact,sans-serif;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:clamp(14px,1.8vw,24px);line-height:.9;
  box-shadow:0 0 0 3px var(--ink), 0 0 44px rgba(255,59,31,.5);
  transition:transform .3s ease;
}
.mp-hot:hover{transform:scale(1.08) rotate(-2deg);}
.shelf-label{
  text-align:center;margin-top:40px;
  font-size:11px;font-weight:700;letter-spacing:.3em;opacity:.6;
}
.shelf-copy{position:relative;z-index:3;text-align:center;padding:60px var(--gutter) 130px;}
.shelf-q{font-family:'Anton',Impact,sans-serif;font-size:clamp(40px,9vw,140px);line-height:.95;}
.shelf-a{
  font-family:'Anton',Impact,sans-serif;font-size:clamp(26px,4.6vw,64px);
  color:var(--red);margin-top:5vh;
}

/* ---------- Angles ---------- */
.angles{background:var(--paper);padding:130px 0 90px;}
.ang-head{padding:0 var(--gutter);margin-bottom:34px;}
.ang-head h2{font-size:clamp(40px,7vw,110px);}
.ang-tabs{
  display:flex;gap:10px;flex-wrap:wrap;
  padding:0 var(--gutter);margin-bottom:26px;
}
.ang-tab{
  border:2px solid var(--ink);background:transparent;color:var(--ink);
  font-family:'Space Grotesk',Arial,sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.2em;
  padding:10px 22px;cursor:pointer;transition:all .2s ease;
}
.ang-tab:hover{background:var(--ink);color:var(--paper);}
.ang-tab.is-active{background:var(--red);border-color:var(--red);color:var(--paper);}
.ang-viewport{
  overflow:hidden;cursor:grab;
  padding:0 var(--gutter);
}
.ang-viewport:active{cursor:grabbing;}
.ang-track{
  display:flex;gap:20px;will-change:transform;
}
.ang-slide{
  flex:0 0 min(78vw,560px);
  aspect-ratio:3/4;
  max-height:66vh;
}
.ang-slide.wide{flex:0 0 min(88vw,780px);aspect-ratio:3/2;max-height:60vh;}
.ang-face{
  width:100%;height:100%;display:flex;flex-direction:column;
  overflow:hidden;position:relative;
  box-shadow:0 26px 60px rgba(20,17,16,.25);
}
.ang-front{background:var(--red);padding:22px;}
.ang-front .af-brand{
  font-size:clamp(54px,7vw,96px);color:var(--paper);line-height:.88;padding-bottom:16px;
}
.ang-front img{flex:1;min-height:0;width:100%;object-fit:cover;border:4px solid var(--ink);}
.ang-front .af-strip{
  position:absolute;bottom:22px;left:22px;right:22px;
  font-family:'Anton',Impact,sans-serif;text-align:center;
  background:var(--paper);color:var(--ink);
  font-size:clamp(18px,2.2vw,30px);padding:6px 0;letter-spacing:.06em;
}
.ang-back{background:var(--paper);padding:26px;border:4px solid var(--ink);}
.ang-back .af-head{
  font-family:'Anton',Impact,sans-serif;color:var(--red);
  font-size:clamp(18px,2.4vw,32px);text-align:center;padding-bottom:18px;
}
.ang-back .pb-rows{flex:0 0 auto;}
.ang-back .pb-rows div{padding:12px 4px;font-size:clamp(10px,1.2vw,14px);}
.ang-back .pb-barcode{margin-top:auto;height:52px;}
.ang-side{
  background:var(--red-deep);color:var(--paper);
  writing-mode:vertical-rl;
  align-items:center;justify-content:center;
  font-family:'Anton',Impact,sans-serif;
  font-size:clamp(24px,3.4vw,44px);letter-spacing:.14em;
  padding:30px 0;
}
.ang-photo img{width:100%;height:100%;object-fit:cover;}
.ang-photo{background:var(--ink);}
.ang-hint{text-align:center;margin-top:30px;font-size:13px;letter-spacing:.14em;opacity:.55;font-weight:600;}

/* ---------- Contact ---------- */
.contact{background:var(--red);color:var(--paper);padding:130px var(--gutter);}
.contact-inner{max-width:820px;margin:0 auto;}
.contact h2{font-size:clamp(60px,11vw,160px);}
.contact-sub{font-size:clamp(16px,1.8vw,22px);margin:24px 0 50px;max-width:32em;}
#contactForm{display:grid;gap:16px;}
#contactForm input,#contactForm textarea{
  background:transparent;border:none;border-bottom:3px solid var(--paper);
  color:var(--paper);font-family:'Space Grotesk',Arial,sans-serif;
  font-size:clamp(16px,1.8vw,20px);padding:14px 2px;
  outline:none;transition:border-color .2s ease;border-radius:0;
}
#contactForm input::placeholder,#contactForm textarea::placeholder{color:rgba(244,237,226,.65);}
#contactForm input:focus,#contactForm textarea:focus{border-color:var(--ink);}
#contactForm textarea{min-height:120px;resize:vertical;}
#contactForm button{
  justify-self:start;cursor:pointer;
  background:var(--ink);color:var(--paper);border:none;
  font-family:'Anton',Impact,sans-serif;
  font-size:clamp(18px,2vw,26px);letter-spacing:.08em;
  padding:16px 44px;
  transition:transform .2s ease, background .2s ease;
}
#contactForm button:hover{background:var(--paper);color:var(--red);transform:translateY(-3px);}
#contactForm button:disabled{opacity:.6;cursor:wait;transform:none;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);color:var(--paper);
  padding:80px var(--gutter) 50px;text-align:center;
}
.footer-brand{font-size:clamp(50px,9vw,130px);}
.footer-brand .red{color:var(--red);}
.footer-note{margin:18px 0 30px;font-size:clamp(14px,1.5vw,18px);opacity:.8;}
.site-footer p{font-size:13px;letter-spacing:.04em;opacity:.8;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);}
.reveal.is-in{opacity:1;transform:none;}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  :root{--pack-w:clamp(210px,52vw,280px);}
  .hero{padding-top:110px;}
  .ht-3{margin-top:.4em;}
  .bd-row{grid-template-columns:1fr;gap:30px;padding:56px 0;}
  .bd-row-flip .bd-media{order:1;}
  .bd-row-flip .bd-copy{order:2;}
  .lab-stage{flex-wrap:wrap;height:auto;padding:30px 0;row-gap:14px;}
  .hotspot{position:static;margin:2px 6px;}
  .shelf-row{gap:8px;}
  .ang-slide{flex:0 0 82vw;}
  .pack-stage{pointer-events:none;}
}
@media(max-width:480px){
  .hero-sub{font-size:14px;}
  .cat-pack{width:calc(50% - 11px);}
  .hs-popover{font-size:15px;padding:12px 16px;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .marquee-track{animation:none;}
  .reveal{opacity:1;transform:none;transition:none;}
  .hotspot::before{animation:none;}
  .hero-scrollcue span{animation:none;}
}