/* Stun Foods routing page: two packaging posters using existing brand assets. */
:root{--ink:#1A1311;--paper:#F4F2EA;--stun-yellow:#FFEC55;--oddish-navy:#215071;--oddish-acid:#E4EF6F;--sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--pad-x:clamp(16px,4vw,56px)}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--oddish-navy);outline-offset:5px}
.wrap{max-width:1440px;margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.site-header{border-bottom:1px solid #C9C6BD}
.header-inner{min-height:72px;padding:12px var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.brand img{width:92px}
.brand span{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding-top:6px}
.top-nav{display:flex;gap:8px;flex-wrap:wrap}
.top-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;text-decoration:none;font-weight:700;font-size:15px}
.top-nav a:hover{background:var(--ink);color:var(--paper)}
.intro{padding:clamp(32px,4.1vw,56px) var(--pad-x) clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:14px}
.intro h1{margin:0;font-size:clamp(40px,6vw,88px);line-height:.94;letter-spacing:-.05em;font-weight:800;text-wrap:balance}
.intro p{margin:0;font-size:clamp(18px,1.65vw,23px);line-height:1.4}
.doors{padding:0 var(--pad-x) clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.brand-card{position:relative;display:grid;grid-template-rows:auto minmax(320px,1fr) auto;min-width:0;min-height:620px;padding:28px clamp(22px,2.5vw,36px) 22px;border:1.5px solid var(--ink);border-radius:20px;overflow:hidden;text-decoration:none;isolation:isolate}
.card-almonds{background:var(--stun-yellow)}
.card-oddish{background:#F8FAF5;color:var(--oddish-navy);border-color:var(--oddish-navy)}
.card-head{position:relative;z-index:2}
.card-brand{margin:0;display:flex;align-items:center;height:60px}
.stun-mark{width:clamp(150px,13.5vw,190px)}
.oddish-mark{position:relative;display:block;width:clamp(180px,18vw,240px);aspect-ratio:5.5/1;overflow:hidden}
.oddish-mark img{position:absolute;top:50%;transform:translateY(-50%);width:100%;max-width:none}
.card-category{margin:5px 0 0;font-family:var(--mono);font-size:13px;line-height:1.4;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.card-stage{position:relative;min-width:0;align-self:stretch;transition:transform .35s ease}
.almond-pack{position:absolute;top:50%;height:clamp(290px,27vw,365px);aspect-ratio:390.5/1007;background-image:url("almonds/assets/stun-four-pack-realistic-v1.png");background-size:400% 100%;background-position:var(--pack-x) 0;background-repeat:no-repeat;transform:translate(-50%,-50%) rotate(var(--tilt));filter:drop-shadow(8px 16px 12px rgba(26,19,17,.2));overflow:hidden}
.almond-blueberry{--pack-x:33.3333333333%;--tilt:-12deg;left:19%;height:clamp(265px,25vw,338px);z-index:1}
.almond-lemon{--pack-x:100%;--tilt:12deg;left:81%;height:clamp(265px,25vw,338px);z-index:1}
.almond-cinnamon{--pack-x:66.6666666667%;--tilt:5deg;left:61%;z-index:2}
.almond-cookies{--pack-x:0%;--tilt:-5deg;left:39%;z-index:3}
.oddish-pack{position:absolute;top:50%;height:clamp(250px,24vw,320px);aspect-ratio:590/884;overflow:hidden;transform:translate(-50%,-48%) rotate(var(--tilt));filter:drop-shadow(0 16px 14px rgba(33,80,113,.16));z-index:1}
.oddish-pack img{position:absolute;top:0;left:var(--crop);width:301.525%;max-width:none;height:100%}
.oddish-gouda{--crop:-1.949%;--tilt:-11deg;left:24%}
.oddish-sweet{--crop:-199.322%;--tilt:11deg;left:76%}
.oddish-cheddar{--crop:-100.339%;--tilt:2deg;left:50%;height:clamp(290px,28vw,370px);transform:translate(-50%,-50%) rotate(var(--tilt));z-index:2}
.card-bottom{position:relative;z-index:3}
.card-line{margin:0 0 20px;font-size:clamp(25px,2.45vw,36px);font-weight:800;line-height:1.02;letter-spacing:-.03em}
.card-cta{min-height:58px;padding-top:13px;border-top:1.5px solid currentColor;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:17px;font-weight:800}
.card-arrow{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:1.5px solid currentColor;border-radius:50%;font-size:24px;line-height:1;transition:background-color .2s,color .2s,transform .2s}
.card-oddish .card-arrow{background:var(--oddish-acid);border-color:var(--oddish-navy)}
.brand-card:hover .card-arrow,.brand-card:focus-visible .card-arrow{background:var(--ink);color:var(--stun-yellow);border-color:var(--ink);transform:rotate(5deg)}
.card-oddish:hover .card-arrow,.card-oddish:focus-visible .card-arrow{background:var(--oddish-navy);border-color:var(--oddish-navy);color:#fff}
@media (hover:hover){.brand-card:hover .card-stage{transform:translateY(-5px)}}
.site-footer{border-top:1px solid #C9C6BD;padding:24px var(--pad-x) 30px}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.footer-inner nav{display:flex;gap:18px;flex-wrap:wrap}
.footer-inner a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:859px){
  .doors{grid-template-columns:minmax(0,1fr);gap:20px}
  .brand-card{min-height:570px;grid-template-rows:auto minmax(290px,1fr) auto;padding:24px 26px 20px}
  .card-brand{height:56px}
  .stun-mark{width:160px}
  .oddish-mark{width:210px}
  .almond-pack{height:310px}
  .almond-blueberry,.almond-lemon{height:286px}
  .oddish-pack{height:270px}
  .oddish-cheddar{height:310px}
  .card-line{font-size:29px;margin-bottom:18px}
}
@media(max-width:479px){
  .header-inner{gap:8px;min-height:68px}
  .brand img{width:78px}.brand span{font-size:11px;letter-spacing:.1em}
  .top-nav{gap:6px}.top-nav a{padding:0 10px;font-size:12px}
  .intro h1{font-size:clamp(39px,10vw,48px)}
  .brand-card{min-height:530px;grid-template-rows:auto minmax(255px,1fr) auto;padding:20px}
  .card-brand{height:52px}.stun-mark{width:150px}.oddish-mark{width:195px}
  .card-category{font-size:12px}
  .almond-pack{height:268px}.almond-blueberry,.almond-lemon{height:247px}
  .oddish-pack{height:225px}.oddish-cheddar{height:260px}
  .oddish-gouda{left:27%}.oddish-sweet{left:73%}
  .card-line{font-size:26px}.card-cta{font-size:16px}
}
@media(max-width:359px){.almond-pack{height:240px}.almond-blueberry,.almond-lemon{height:222px}.oddish-pack{height:192px}.oddish-cheddar{height:232px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}