/* New Hanover Butchery & Delicatessen
   Brand: navy + cream + denim blue, western display type, geometric bull, price tags and brush strokes. */
:root{
  --paper:#f3eee3; --surface:#fffdf8; --ink:#0e1d3e; --ink-2:#4d5670; --line:#ddd4c3; --chip:#ebe4d5;
  --accent:#2c4f97;
  --navy:#0e1d3e; --navy-deep:#091633; --royal:#2c4f97; --denim:#213a68;
  --cream:#efe7d8; --cream-2:#b9c0d1; --kraft:#d9c9ad; --note:#fbf7ef;
  --asphalt:#0b1328; --asphalt-2:#17223f;
  --shadow:0 18px 40px -22px rgba(14,29,62,.45);
  --display:'Smokum','Rockwell',Georgia,serif;
  --body:'Montserrat','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --label:'Oswald','Arial Narrow',Arial,sans-serif;
  --script:'Dancing Script','Segoe Script',cursive;
  --lcd:'Share Tech Mono',ui-monospace,monospace;
  --tape:rgba(255,250,235,.58);
  --wrap:1180px; --radius:10px;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* dark-mode colours are written by inc/dynamic-css.php (Customizer: Colours > Colour scheme) */
/* dark bands keep cream accents whatever the page theme */
.butchery,.posters,.garage,.find,.spot,.hours-strip,.board{--accent:var(--cream)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
/* nothing may widen the page sideways; overflow-x:hidden on body alone still lets phones pan */
html,body{overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1;letter-spacing:.01em;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:12px;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;z-index:100}
.skip:focus{left:12px}
#top:focus{outline:none}
.script{font-family:var(--script);font-weight:700;text-transform:none;letter-spacing:0}

/* film grain over everything */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* denim: the client's textured blue background, stretched to cover each band */
.denim,.b-bg,.pin-bg,.hours-strip{background:#1c3361 url(../img/brand/denim.jpg) center/cover no-repeat}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-family:var(--label);font-weight:500;font-size:1.02rem;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s ease,background-color .2s ease,color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-line{border-color:currentColor;color:inherit;background:transparent}
.btn-cream{background:var(--cream);color:var(--navy)}
.btn svg{width:20px;height:20px;flex:none}

/* labels */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:14px;font-family:var(--label);font-weight:400;font-size:.82rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before,.eyebrow::after{content:"";width:30px;height:9px;background:repeating-linear-gradient(currentColor 0 1.5px,transparent 1.5px 3.75px)}
.eyebrow::after{display:none}
.brush{display:inline-block;margin-bottom:14px;padding:7px 20px;font-family:var(--label);font-weight:500;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;background:var(--navy);color:var(--cream);clip-path:polygon(2% 14%,5% 0,40% 6%,72% 0,96% 5%,100% 34%,97% 56%,100% 82%,95% 100%,60% 94%,28% 100%,4% 95%,0 70%,3% 46%,0 24%)}
.mark{font-style:normal;position:relative;display:inline-block;white-space:nowrap}
.mark svg{position:absolute;left:-3%;width:106%;bottom:-.12em;height:.26em;overflow:visible;pointer-events:none}
.mark path{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.6,.1,.2,1) .25s}
.mark.drawn path{stroke-dashoffset:0}

/* tape, stickers, dragging */
.tape{position:absolute;z-index:4;width:120px;height:32px;background:var(--tape);box-shadow:0 2px 4px rgba(0,0,0,.14)}
.tape.tl{top:-10px;left:-34px;rotate:-38deg}.tape.tr{top:-10px;right:-34px;rotate:38deg}
.taped::before,figure.photo::before,.deli::before,.gd-chart::before,.spot::before,.poster::before,.card-meat::before,.card-fuel::before{content:"";position:absolute;z-index:4;top:-15px;left:50%;width:112px;height:30px;margin-left:-56px;background:var(--tape);rotate:var(--tr,-3deg);box-shadow:0 2px 4px rgba(0,0,0,.14)}
[data-drag]{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.is-drag{cursor:grabbing;scale:1.08;z-index:30}
.homing{transition:translate .6s cubic-bezier(.3,1.4,.5,1)!important}
.pre{opacity:0}
.slapped{animation:slap .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes slap{0%{opacity:0;scale:1.8}60%{opacity:1;scale:.94}100%{opacity:1;scale:1}}
.stk{position:absolute;z-index:5;font-family:var(--label);font-weight:600;font-size:.8rem;line-height:1.1;letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;border-radius:8px;border:2px solid;box-shadow:0 10px 18px -6px rgba(0,0,0,.45);rotate:var(--r,0deg);white-space:nowrap;transition:scale .2s}
.stk-cream{background:var(--cream);color:var(--navy);border-color:var(--navy)}
.stk-navy{background:var(--navy);color:var(--cream);border-color:var(--cream)}
.stk-royal{background:var(--royal);color:var(--cream);border-color:var(--cream)}
.stk-round{border-radius:50%;width:104px;height:104px;display:grid;place-content:center;text-align:center;padding:0;font-family:var(--display);font-weight:400;font-size:2rem;letter-spacing:.02em;line-height:.9}
.stk-round b{display:block;font-family:var(--label);font-weight:400;font-size:.72rem;letter-spacing:.34em}
.stk-script{font-family:var(--script);font-weight:700;font-size:1.55rem;text-transform:none;letter-spacing:0;padding:4px 16px 8px}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;border-bottom:1px solid transparent;transition:border-color .3s ease}
/* the frosted glass lives on a layer behind the header: a backdrop-filter on .hdr itself would make it the containing block
   for the fixed mobile menu, squashing that menu into the header's 66px */
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px)}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:20px;height:80px;transition:height .3s ease}
.hdr.scrolled .hdr-in{height:66px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.logo-img{height:42px;width:auto;flex:none}
.logo-txt{font-family:var(--display);font-size:1.5rem;line-height:1;letter-spacing:.02em}
.logo-txt small{display:block;font-family:var(--label);font-weight:400;font-size:.66rem;letter-spacing:.38em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{text-decoration:none;font-family:var(--label);font-weight:400;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;padding:10px 13px;border-radius:999px;color:var(--ink-2);transition:color .2s,background-color .2s}
.nav a:hover,.nav a.on{color:var(--ink);background:var(--chip)}
.hdr .btn{min-height:44px;padding:0 20px;font-size:.92rem}
.menu-btn{display:none;margin-left:auto;width:48px;height:48px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:13px;right:13px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s ease,opacity .2s}
.menu-btn span:nth-child(1){top:17px}.menu-btn span:nth-child(2){top:23px}.menu-btn span:nth-child(3){top:29px}
.open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.open .menu-btn span:nth-child(2){opacity:0}
.open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none}
/* the mobile-menu breakpoint rules are written by inc/dynamic-css.php (Customizer: Header > Mobile breakpoint) */
@media (max-width:360px){.logo-txt small{display:none}.logo-img{height:36px}}

/* hero */
.hero{padding:44px 0 80px;overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.brandmark{margin:0 0 22px}
.brandmark img{width:min(430px,100%);height:auto}
.slogan{font-family:var(--display);font-size:clamp(2rem,3.5vw,3rem);line-height:1.05}
.slogan span{display:block}
.hero .lede{font-size:1.06rem;color:var(--ink-2);max-width:46ch;margin:20px 0 30px}
.hero .btns{display:flex;flex-wrap:wrap;gap:12px}
.hero-photo{position:relative;min-width:0;padding:12px 12px 58px;background:var(--note);border-radius:4px;box-shadow:0 34px 60px -26px rgba(0,0,0,.6);rotate:2deg;transition:rotate .5s cubic-bezier(.2,.8,.2,1)}
.hero-photo:hover{rotate:0deg}
.pol-cap{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-family:var(--script);font-weight:700;color:var(--navy);font-size:1.55rem}
.hero-car{position:relative;min-width:0;border-radius:2px;aspect-ratio:1/.95;overflow:hidden;background:var(--navy-deep)}
.car-track{list-style:none;margin:0;padding:0;display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:3px solid var(--cream);outline-offset:-3px}
.slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero-car::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(to top,rgba(9,22,51,.7),transparent);pointer-events:none}
.car-bar{z-index:2;position:absolute;left:16px;right:16px;bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:rgba(9,22,51,.45);color:var(--cream);border-radius:12px;padding:10px 10px 10px 16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.car-caps{min-width:0}
.car-cap{display:block;color:inherit;text-decoration:none;animation:capIn .4s ease}
.car-cap[hidden]{display:none}
.car-cap b{display:block;font-family:var(--display);font-weight:400;font-size:1.45rem;line-height:1.05}
.car-cap span{display:block;font-size:.88rem;color:var(--cream-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes capIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.car-ctrl{display:flex;gap:8px;flex:none}
.car-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:var(--cream);color:var(--navy);cursor:pointer;transition:transform .2s ease}
.car-btn:hover{transform:translateY(-1px) scale(1.05)}
.car-btn svg{width:20px;height:20px}
.car-dots{z-index:2;position:absolute;top:16px;left:0;right:0;display:flex;justify-content:center;gap:4px}
.car-dots button{width:28px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.car-dots button::before{content:"";width:100%;height:4px;border-radius:4px;background:rgba(239,231,216,.45);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:background-color .3s}
.car-dots button[aria-current="true"]::before{background:var(--cream)}
.car-btn:focus-visible,.car-dots button:focus-visible,.car-cap:focus-visible{outline:3px solid var(--cream);outline-offset:2px}
.hours-strip{list-style:none;margin:64px 0 0;padding:10px;display:grid;grid-template-columns:repeat(3,1fr);border-radius:14px;color:var(--cream);box-shadow:var(--shadow);position:relative}
.hours-strip li{display:flex;flex-direction:column;gap:4px;padding:12px 20px}
.hours-strip li + li{border-left:2px dashed rgba(239,231,216,.25)}
.hours-strip span{font-family:var(--label);font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-2)}
.hours-strip b{font-size:1.3rem;font-weight:700;letter-spacing:.01em}
[data-open]::before{content:"";display:inline-block;width:10px;height:10px;margin-right:9px;border-radius:50%;background:var(--cream-2);vertical-align:.08em}
[data-open].is-open::before{background:#4cc27a;box-shadow:0 0 0 4px rgba(76,194,122,.25);animation:pulse 2s ease-in-out infinite}
[data-open].is-closed::before{background:#d0644f}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(76,194,122,0)}}
@media (max-width:1100px){.hero-photo .stk[style*="right"]{right:-6px!important}}
@media (max-width:900px){
  .hero{padding:24px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .brandmark img{width:min(300px,82%)}
  .hero-copy{text-align:center}
  .brandmark img{margin:0 auto}
  .hero .lede{margin-inline:auto}
  .hero .btns{justify-content:center}
  .hero-photo{rotate:1deg;padding:8px 8px 48px}
  .hero-car{aspect-ratio:4/3.3}
  .car-bar{left:10px;right:10px;bottom:10px}
  .hero-photo .stk{font-size:.68rem;padding:8px 10px}
  .hero-photo .stk[style*="left"]{left:-6px!important}
  .hero-photo .stk-round{width:80px;height:80px;font-size:1.5rem}
  .hero-photo .stk-script{font-size:1.2rem}
  .hours-strip{grid-template-columns:1fr;margin-top:48px}
  .hours-strip li + li{border-left:0;border-top:2px dashed rgba(239,231,216,.25)}
}

/* tape bands */
.tapes{position:relative;z-index:3;height:150px;margin:-36px 0 -60px;pointer-events:none;overflow-x:clip}
.tapes.one{height:96px;margin:-48px 0}
.tband{position:absolute;left:-6%;right:-6%;top:50%;overflow:hidden;padding:12px 0 10px;font-family:var(--display);font-size:1.7rem;line-height:1;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;box-shadow:0 12px 26px -10px rgba(0,0,0,.5)}
.tb1{background:var(--cream);color:var(--navy);rotate:-2.4deg;margin-top:-34px;border-block:2px solid var(--navy)}
.tb2{background:var(--navy);color:var(--cream);rotate:1.8deg;margin-top:10px;border-block:2px solid var(--royal)}
.tapes.one .tb1{margin-top:-24px;rotate:1.6deg}
.tband-in{display:inline-flex;will-change:transform}
.tband-in span::after{content:"\2605";margin:0 26px;font-size:.55em;vertical-align:.3em}

/* section heads + outlined background words */
.sh{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:end;margin-bottom:48px}
.sh h2{font-size:clamp(2.8rem,5.8vw,4.9rem);line-height:.95}
.sh > p{font-size:1.05rem;max-width:46ch}
.ghost{position:absolute;left:0;top:24px;z-index:0;white-space:nowrap;font-family:var(--display);font-size:clamp(6rem,19vw,18rem);line-height:1;-webkit-text-fill-color:transparent;-webkit-text-stroke:2px currentColor;opacity:.12;pointer-events:none;user-select:none;translate:var(--gx,0px) 0}
@media (max-width:900px){.sh{grid-template-columns:1fr;gap:16px;margin-bottom:34px}}

/* photos are taped polaroids */
figure.photo{position:relative;min-height:340px;background:var(--note);border-radius:4px;box-shadow:0 24px 40px -24px rgba(0,0,0,.75);rotate:var(--r,0deg);transition:rotate .45s cubic-bezier(.2,.8,.2,1),translate .45s cubic-bezier(.2,.8,.2,1)}
figure.photo img{position:absolute;inset:10px 10px 48px;width:calc(100% - 20px);height:calc(100% - 58px);object-fit:cover;border-radius:2px}
figure.photo:hover{rotate:0deg;translate:0 -6px}
figure.photo .fallback{position:absolute;inset:10px 10px 48px;display:grid;place-items:center;background:var(--navy);border-radius:2px;opacity:0;transition:opacity .4s}
figure.photo .fallback img{position:static;width:46%;height:auto;opacity:.5}
figure.photo.no-img .fallback{opacity:1}
figure.photo figcaption{position:absolute;left:0;right:0;bottom:10px;text-align:center;color:var(--navy);font-family:var(--script);font-weight:700;font-size:1.35rem;line-height:1.2}

/* butchery */
/* overflow:clip, not hidden, so the sticky background below still sticks */
.butchery{position:relative;overflow:clip;isolation:isolate;color:var(--cream);background:var(--navy-deep);border-radius:40px 40px 0 0}
.butchery > .wrap{position:relative;z-index:1;padding-block:110px}
/* the denim is one screen tall and pinned while the section scrolls past, so the photo is only scaled to the screen, not to the
   whole (very tall) section, which blurred it; it also gives the content a fixed-window depth effect on every device */
.b-bg,.pin-bg{position:sticky;top:0;z-index:0;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh}
.b-bg::after,.pin-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(9,22,51,.12),rgba(9,22,51,.6))}
.b-float{position:absolute;inset:0;z-index:0;pointer-events:none;color:var(--cream)}
.flt{position:absolute;display:block;rotate:var(--r,0deg);transform:translate3d(0,var(--py,0px),0);will-change:transform}
.flt svg{display:block;width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.flt.near{opacity:.5}
.flt.mid{opacity:.32;filter:blur(.6px)}
.flt.far{opacity:.2;filter:blur(1.4px)}
.flt.b-bull{opacity:.09;filter:none;max-width:60vw}
span.flt:nth-of-type(odd){animation:bob 7s ease-in-out infinite alternate}
span.flt:nth-of-type(even){animation:bob 9s ease-in-out -3s infinite alternate}
@keyframes bob{from{margin-top:-10px}to{margin-top:10px}}
@media (max-width:1300px){.flt.near{display:none}}
@media (max-width:900px){span.flt:nth-of-type(n+4){display:none}}
.butchery .sh > p{color:var(--cream-2)}
.b-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:stretch}
.b-grid figure.photo{--r:-1.2deg}
.planner{background:rgba(9,22,51,.6);border:1px solid rgba(239,231,216,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column}
.planner h3{font-size:2.4rem}
.planner > p{color:var(--cream-2);margin-top:8px}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.opts button{font-family:var(--label);font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid rgba(239,231,216,.35);background:transparent;color:var(--cream);border-radius:999px;padding:0 18px;min-height:44px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.opts button:hover{border-color:var(--cream)}
.opts button[aria-pressed="true"]{background:var(--cream);color:var(--navy);border-color:var(--cream)}
.picks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.picks li{background:rgba(239,231,216,.08);border-radius:8px;padding:13px 16px;font-weight:600;opacity:0;transform:translateY(8px);animation:pick .45s cubic-bezier(.2,.8,.2,1) forwards}
.picks li:nth-child(2){animation-delay:.06s}.picks li:nth-child(3){animation-delay:.12s}.picks li:nth-child(4){animation-delay:.18s}
@keyframes pick{to{opacity:1;transform:none}}
.tip{margin:18px 0 22px;color:var(--cream-2)}
.tip.fade{animation:pick .45s cubic-bezier(.2,.8,.2,1) .15s both;opacity:0;transform:translateY(8px)}
.planner .btn{align-self:flex-start;margin-top:auto}
.b-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:32px}
.b-row figure.photo{min-height:270px}
.b-row figure.photo:nth-child(1){--r:-2deg;--tr:4deg}.b-row figure.photo:nth-child(2){--r:1.6deg}
.deli{position:relative;background:var(--cream);color:var(--navy);border-radius:4px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;rotate:1.4deg;box-shadow:0 24px 40px -24px rgba(0,0,0,.75)}
.deli h3{font-size:2.6rem}
.deli p{margin-top:10px;color:#4d5670}
.deli ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.deli li{background:var(--note);color:var(--navy);border:1.5px dashed #b8ab92;border-radius:999px;padding:5px 14px;font-weight:600;font-size:.88rem}
.board{margin-top:36px;padding:28px;border-radius:var(--radius);background:radial-gradient(circle,rgba(0,0,0,.38) 2.4px,transparent 3px) 0 0/26px 26px,#142a57;box-shadow:inset 0 0 0 1px rgba(239,231,216,.1),0 24px 40px -24px rgba(0,0,0,.7)}
.board-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.board h3{font-size:2.3rem}
.board-head p{color:var(--cream-2);margin-top:6px}
.chip-btn{font-family:var(--label);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--cream);color:var(--cream);background:transparent;border-radius:999px;padding:9px 18px;cursor:pointer;transition:background-color .2s,color .2s}
.chip-btn:hover{background:var(--cream);color:var(--navy)}
.board-area{position:relative;list-style:none;margin:20px 0 0;padding:0;height:330px}
.tag{position:absolute;left:var(--x);top:var(--y);rotate:var(--r);filter:drop-shadow(0 7px 7px rgba(0,0,0,.45));transition:scale .2s}
.tag span{display:block;position:relative;padding:8px 18px 9px 32px;font-family:var(--script);font-weight:700;font-size:1.4rem;line-height:1.1;color:var(--tc,var(--navy));background:var(--c,#fff);clip-path:polygon(16px 0,100% 0,100% 100%,16px 100%,0 50%);white-space:nowrap}
.tag span::before{content:"";position:absolute;left:14px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#142a57;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.tg-c{--c:var(--cream)}.tg-r{--c:var(--royal);--tc:var(--cream)}.tg-w{--c:var(--note)}.tg-k{--c:var(--kraft)}
.b-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:28px;margin-top:36px}
.b-gallery figure.photo{grid-column:span 2;min-height:250px}
.b-gallery figure.photo:nth-child(-n+2){grid-column:span 3;min-height:330px}
.b-gallery figure.photo:nth-child(odd){--r:-1.6deg}.b-gallery figure.photo:nth-child(even){--r:1.4deg;--tr:5deg}
@media (max-width:900px){
  .butchery{border-radius:28px 28px 0 0}.butchery > .wrap{padding-block:76px}
  .b-grid,.b-row{grid-template-columns:1fr}.picks{grid-template-columns:1fr}
  .b-gallery{grid-template-columns:1fr 1fr;gap:18px}
  .b-gallery figure.photo,.b-gallery figure.photo:nth-child(-n+2){grid-column:span 1;min-height:210px}
  .b-gallery figure.photo:first-child{grid-column:1/-1;min-height:270px}
  .board{padding:20px}
  .board-area{height:auto;display:flex;flex-wrap:wrap;gap:14px 10px}
  .tag{position:relative;left:auto;top:auto}.tag span{font-size:1.2rem}
}

/* butcher's guide */
.guide{position:relative;overflow:hidden;padding:110px 0}
.guide > .wrap{position:relative;z-index:1}
.gd-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}
.gd-chart{position:relative;background:#fff;border-radius:4px;padding:16px;rotate:-.6deg;box-shadow:var(--shadow)}
.gd-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#ebe4d5}
.gd-tabs button{font-family:var(--label);font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;border:0;background:transparent;color:#4d5670;border-radius:999px;padding:9px 24px;cursor:pointer;transition:background-color .2s,color .2s}
.gd-tabs button[aria-selected="true"]{background:var(--navy);color:var(--cream)}
.gd-panel img{width:100%;height:auto;margin-top:12px;border-radius:2px;animation:capIn .35s ease}
.spot{position:relative;background:var(--navy);color:var(--cream);border:1px solid rgba(239,231,216,.12);border-radius:4px;padding:36px 34px;rotate:.8deg;box-shadow:var(--shadow);--tr:4deg}
.spot .brush{background:var(--cream);color:var(--navy)}
.spot h3{font-size:clamp(3rem,5vw,4.2rem)}
.spot-hook{margin:8px 0 18px;font-family:var(--label);font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase}
.spot-hook .script{display:block;font-size:2rem;margin-bottom:-2px}
.spot > p:not(.brush):not(.spot-hook){color:var(--cream-2)}
.spot-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:24px 0 28px}
.spot h4{font-family:var(--label);font-weight:500;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid rgba(239,231,216,.25)}
.spot-cols p{color:var(--cream-2);font-size:.95rem}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.95rem}
.ticks li::before{content:"\2713";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:10px;border:1.5px solid currentColor;border-radius:4px;font-size:.75rem}
@media (max-width:900px){.guide{padding:76px 0}.gd-grid{grid-template-columns:1fr}.spot-cols{grid-template-columns:1fr}}

/* posters from the butchery's feed */
.posters{position:relative;overflow:clip;isolation:isolate;color:var(--cream);background:var(--navy-deep)}
.posters > .wrap{position:relative;z-index:1;padding-block:110px}
.posters .sh > p{color:var(--cream-2)}
.poster-row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:start}
.poster{position:relative;display:block;background:#fff;padding:8px;border-radius:2px;rotate:var(--r,0deg);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease,rotate .45s cubic-bezier(.2,.8,.2,1);box-shadow:0 30px 50px -24px rgba(0,0,0,.8)}
.poster:nth-child(2){margin-top:36px;--tr:4deg}
.poster:hover{rotate:0deg}
.poster img{width:100%;height:auto}
.posters-cta{display:flex;justify-content:center;margin-top:56px}
@media (max-width:900px){
  .posters > .wrap{padding-block:76px}
  .poster-row{grid-template-columns:1fr;max-width:420px;margin:0 auto;gap:44px}
  .poster:nth-child(2){margin-top:0}
}

/* visit */
.visit{position:relative;overflow:hidden;padding:110px 0}
.visit > .wrap{position:relative;z-index:1}
.visit .muted{color:var(--ink-2)}
.v-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;align-items:start}
.v-grid > *{min-width:0}
.hang{position:relative;display:flex;justify-content:center;padding-top:58px}
.hang::before{content:"";position:absolute;z-index:2;top:-6px;left:50%;width:3px;height:92px;margin-left:-1.5px;border-radius:2px;background:var(--ink-2);opacity:.55}
.stamp{position:relative;isolation:isolate;width:100%;max-width:360px;padding:52px 26px 30px;text-align:center;background:var(--cream);color:var(--navy);transform-origin:50% -58px;filter:drop-shadow(0 20px 22px rgba(0,0,0,.28));animation:swing 5s ease-in-out infinite alternate}
.stamp::before{content:"";position:absolute;inset:-9px;z-index:-1;background:radial-gradient(circle,var(--cream) 9px,transparent 9.5px) -3px -3px/24px 24px}
.stamp::after{content:"";position:absolute;top:18px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--navy)}
@keyframes swing{from{rotate:-1.8deg}to{rotate:1.8deg}}
.stamp-bull{width:96px;height:auto;margin:6px auto 10px}
.stamp h3{font-size:3.1rem;color:#243c6c;line-height:.92}
.times{margin:22px 0 18px}
.times dt{font-size:.8rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid #6d8ccf}
.times dd{margin:6px 0 16px;font-size:1.45rem;font-weight:700}
.open-pill{display:inline-block;padding:6px 16px;border-radius:999px;background:var(--navy);color:var(--cream);font-size:.86rem;font-weight:600}
.stamp-loc{margin-top:16px;font-size:.88rem;line-height:1.4}
.stamp-loc b{display:block;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.card h3{font-size:2.2rem;margin-bottom:4px}
.card .muted{color:var(--ink-2)}
.card-meat{border-top:6px solid var(--royal);margin-top:58px}
.card-fuel{border-top:6px solid var(--kraft);margin-top:58px;--tr:3deg}
.clist{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:8px}
.clist a{display:flex;align-items:center;gap:14px;text-decoration:none;padding:12px 14px;border-radius:10px;background:var(--chip);font-weight:600;transition:transform .2s ease}
.clist a:hover{transform:translateX(4px)}
.clist span{min-width:0;overflow-wrap:anywhere}
.clist small{display:block;font-weight:500;color:var(--ink-2);font-size:.82rem}
.clist svg{width:22px;height:22px;flex:none}
.find{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center;background:var(--navy);color:var(--cream);border:0;margin-top:8px}
.find .muted{color:var(--cream-2)}
.find h3{font-size:2.8rem}
.find address{font-style:normal;font-size:1.08rem;margin:14px 0 18px;font-weight:600}
.find .btns{display:flex;flex-wrap:wrap;gap:12px}
.find .btn-line{color:var(--cream)}
.mini-map{position:relative;border-radius:8px;overflow:hidden;background:var(--navy-deep);aspect-ratio:16/11}
.mini-map svg{width:100%;height:100%;display:block}
.mini-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.find .mini-map.has-embed{aspect-ratio:4/3}
.mini-map.has-embed svg{visibility:hidden}
@media (max-width:1100px){.v-grid{grid-template-columns:1fr 1fr}.hang{grid-row:span 2}.card-fuel{margin-top:0}}
@media (max-width:760px){.visit{padding:76px 0}.v-grid,.find{grid-template-columns:1fr}.hang{grid-row:auto}.card-meat{margin-top:24px}}

/* garage & express (secondary) */
.garage{position:relative;overflow:hidden;padding:110px 0;background:var(--asphalt);color:var(--cream)}
.garage > .wrap{position:relative;z-index:1}
.garage .sh > p{color:var(--cream-2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 40px;position:relative;list-style:none;padding:0}
.steps::before{content:"";position:absolute;left:12.5%;right:12.5%;top:38px;height:4px;background:repeating-linear-gradient(90deg,var(--cream-2) 0 18px,transparent 18px 34px);opacity:.35}
.steps .bar{position:absolute;left:12.5%;top:38px;height:4px;background:var(--cream);width:0;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.step{position:relative;text-align:center;padding:0 12px}
.step .ring{width:80px;height:80px;margin:0 auto 18px;border-radius:50%;background:var(--asphalt-2);display:grid;place-items:center;position:relative;z-index:1;border:3px solid var(--asphalt-2);transition:border-color .4s,transform .4s}
.step .ring svg{width:34px;height:34px;color:var(--cream-2);transition:color .4s}
.step.lit .ring{border-color:var(--cream);transform:scale(1.06)}
.step.lit .ring svg{color:var(--cream)}
.step h3{font-family:var(--label);font-weight:500;font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase}
.step p{color:var(--cream-2);font-size:.92rem;margin-top:4px}
.pump{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:0 0 44px;background:#2a3554;border:3px solid #2a3554;border-radius:14px;overflow:hidden;box-shadow:0 22px 40px -22px rgba(0,0,0,.7)}
.pump-cell{background:#050b1a;padding:16px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.pump-cell small{font-family:var(--label);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-2)}
.led{font-family:var(--lcd);font-weight:400;font-size:2.5rem;line-height:1;color:var(--cream);text-shadow:0 0 14px rgba(239,231,216,.45);font-variant-numeric:tabular-nums}
.led-b{color:#9db8ec;text-shadow:0 0 14px rgba(157,184,236,.5)}
.g-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:28px}
.g-grid figure.photo{min-height:420px;--r:1.2deg}
.menu{background:var(--asphalt-2);border-radius:var(--radius);padding:30px}
.menu h3{font-size:2.4rem}
.menu > p{color:var(--cream-2);margin-top:8px}
.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 28px;list-style:none;padding:0}
.menu-list li{display:flex;align-items:center;gap:12px;background:var(--asphalt);border-radius:10px;padding:14px;font-weight:600}
.menu-list svg{width:26px;height:26px;color:var(--cream);flex:none}
@media (max-width:900px){
  .garage{padding:76px 0}
  .steps{grid-template-columns:1fr 1fr;row-gap:28px}
  .steps::before,.steps .bar{display:none}
  .pump{grid-template-columns:1fr}
  .g-grid{grid-template-columns:1fr}
  .g-grid figure.photo{min-height:300px}
}
@media (max-width:480px){.menu-list{grid-template-columns:1fr}}

/* the garage keeps New Hanover Garage's own brand: its logo navy, lemon yellow and sky blue */
.garage{--g-navy:#082050;--g-navy-2:#0f2c66;--g-yellow:#f0e820;--g-sky:#28b8e8;--accent:var(--g-yellow);background:var(--g-navy);color:#fff}
.g-logo{display:block;width:100px;height:auto;margin-bottom:18px}
.garage .sh > p,.garage .step p,.garage .menu > p{color:#c3cde4}
.garage .ghost{color:var(--g-sky)}
.garage .steps::before{background:repeating-linear-gradient(90deg,#c3cde4 0 18px,transparent 18px 34px)}
.garage .steps .bar{background:var(--g-yellow)}
.garage .step .ring{background:var(--g-navy-2);border-color:var(--g-navy-2)}
.garage .step .ring svg{color:#c3cde4}
.garage .step.lit .ring{border-color:var(--g-yellow)}
.garage .step.lit .ring svg{color:var(--g-yellow)}
.garage .pump{background:#1d3b7a;border-color:#1d3b7a}
.garage .pump-cell{background:#03102e}
.garage .led{color:var(--g-yellow);text-shadow:0 0 14px rgba(240,232,32,.55)}
.garage .led-b{color:var(--g-sky);text-shadow:0 0 14px rgba(40,184,232,.6)}
.garage .menu{background:var(--g-navy-2)}
.garage .menu-list li{background:var(--g-navy)}
.garage .menu-list svg{color:var(--g-yellow)}
.garage .btn-cream{background:var(--g-yellow);color:var(--g-navy)}
.garage-tape .tb1{background:#f0e820;color:#082050;border-color:#082050}
.card-fuel{border-top-color:#f0e820}
.card-logo{display:flex;align-items:center;gap:12px}
.card-logo img{width:54px;height:auto;flex:none}

/* footer */
.ftr{border-top:1px solid var(--line);padding:44px 0 52px;color:var(--ink-2);font-size:.92rem}
.ftr-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
.ftr-brand{display:flex;align-items:center;gap:18px}
.ftr-brand img{height:88px;width:auto}
.ftr nav a{margin-right:16px}
.social{display:flex;gap:10px}
.social a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--chip);color:var(--ink);transition:transform .2s ease}
.social a:hover{transform:translateY(-3px)}
.social svg{width:20px;height:20px}
@media (max-width:760px){
  .ftr{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
  .ftr-in{flex-direction:column;align-items:center;text-align:center;gap:20px}
  .ftr-brand{flex-direction:column;gap:14px}
  .ftr-brand img{width:clamp(130px,42vw,190px);height:auto}
  .ftr nav a{margin-right:0}
}

/* floating order button + back to top */
.wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:10px;background:#1f8f4e;color:#fff;border:0;border-radius:999px;padding:0 20px 0 16px;min-height:56px;font-family:var(--label);font-size:1rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 28px -10px rgba(0,0,0,.5);transform:translateY(120px);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.wa.show{transform:none}
.wa svg{width:26px;height:26px}
.wa-pop{position:fixed;right:18px;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:41;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:var(--shadow);width:min(300px,calc(100vw - 36px));opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s}
.wa-pop.open{opacity:1;transform:none;pointer-events:auto}
.wa-pop a{display:block;padding:12px 14px;border-radius:10px;text-decoration:none;font-weight:600}
.wa-pop a:hover{background:var(--chip)}
.wa-pop small{display:block;color:var(--ink-2);font-weight:500}
.totop{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:0 10px 28px -10px rgba(0,0,0,.5);transform:translateY(120px);transition:transform .45s cubic-bezier(.2,.8,.2,1),background-color .2s ease}
.totop.show{transform:none}
.totop:hover{background:var(--chip)}
.totop svg{width:22px;height:22px}

/* reveal: used sparingly on section heads only */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
[data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .car-track{scroll-behavior:auto}
  .flt{transform:none}
  .tband-in{transform:none!important}
  .ghost{translate:none}
  .mark path{stroke-dashoffset:0}
  .stamp{rotate:none}
}