/* ============================================================
   THE AXE HOUSE — McCook, Nebraska
   "You came for the axes. Nobody warns you about the kitchen."

   Every axe-throwing site in the country is black, red and
   distressed timber. A reviewer described this room as "a nice
   split between rustic and modern", so that's the brief, and the
   palette is taken off the target itself: pale board OAK is the
   primary (warm, food, welcome), blade STEEL is secondary, and
   bullseye RED is rationed to the places you actually score.
   ============================================================ */

:root{
  --night:#14100D;      /* burnt-oak black — warm, never neutral, never blue */
  --char:#1E1813;       /* raised panel */
  --char-2:#28211A;     /* card */
  --bone:#F1EBE1;       /* warm white */
  --ash:#968A7D;        /* secondary text */
  --ash-dim:#6B6157;

  --oak:#C9A574;        /* THE BOARD — primary accent: warmth, food, welcome */
  --oak-lit:#E7CDA4;
  --oak-deep:#8C6E43;

  --steel:#9AA5AA;      /* THE BLADE — secondary accent, cold against the oak */
  --strike:#C4472F;     /* THE BULLSEYE — only where you score. Nothing else. */
  --strike-lit:#DC6046;

  --line:rgba(241,235,225,.11);
  --line-2:rgba(241,235,225,.06);
  --oak-hair:rgba(201,165,116,.34);

  --disp:'Bricolage Grotesque',Impact,sans-serif;
  --body:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;

  --wrap:1280px;
  --pad:clamp(20px,5vw,68px);
  --ease:cubic-bezier(.22,1,.32,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--body);font-size:17px;line-height:1.65;font-weight:400;
  background:var(--night);color:var(--bone);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit}
::selection{background:var(--oak);color:var(--night)}
:focus-visible{outline:2px solid var(--oak);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
section{padding:clamp(66px,9vw,128px) 0;position:relative}
.band{background:var(--char)}

/* ---------- type ---------- */
.d1,.d2,.d3{font-family:var(--disp);font-weight:800;line-height:.94;letter-spacing:-.025em}
.d1{font-size:clamp(42px,6.2vw,94px)}
.d2{font-size:clamp(33px,4.6vw,64px)}
.d3{font-size:clamp(22px,2.6vw,34px)}
.d1 em,.d2 em,.d3 em{font-style:normal;color:var(--oak)}
.d1 .hit,.d2 .hit,.d3 .hit{color:var(--strike)}
.lead{font-size:clamp(16.5px,1.7vw,19px);line-height:1.7;color:var(--ash);max-width:60ch}
.lead strong{color:var(--bone);font-weight:600}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--oak);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--oak)}
.eyebrow.hit{color:var(--strike)}
.eyebrow.hit::before{background:var(--strike)}
.sec-head{max-width:790px;margin-bottom:clamp(34px,4.4vw,58px)}
.sec-head .d2{margin:18px 0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.02em;
  padding:17px 30px;border-radius:3px;border:1.5px solid transparent;
  transition:transform .28s var(--ease),background .28s,color .28s,border-color .28s,box-shadow .28s;
}
.btn--strike{background:var(--strike);color:#fff;box-shadow:0 14px 34px -16px rgba(196,71,47,.9)}
.btn--strike:hover{background:var(--strike-lit);transform:translateY(-2px);box-shadow:0 20px 44px -16px rgba(196,71,47,1)}
.btn--oak{background:var(--oak);color:var(--night)}
.btn--oak:hover{background:var(--oak-lit);transform:translateY(-2px)}
.btn--ghost{border-color:var(--line);color:var(--bone)}
.btn--ghost:hover{border-color:var(--oak);color:var(--oak);transform:translateY(-2px)}
.btn .ar{transition:transform .28s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;inset:0 0 auto;z-index:90;padding-block:15px;transition:background .3s,box-shadow .3s,padding .3s}
.nav.stuck{background:rgba(20,16,13,.92);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 1px 0 var(--line-2),0 20px 44px -34px #000;padding-block:9px}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:44px;height:44px;flex:none}
.brand b{display:block;font-family:var(--disp);font-weight:800;font-size:21px;line-height:.92;letter-spacing:-.02em}
.brand > span > span{display:block;font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);margin-top:4px}
.nav-links{display:flex;gap:30px}
.nav-links a{position:relative;font-size:14px;font-weight:600;color:var(--ash);transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1.5px;background:var(--oak);transition:right .32s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--bone)}
.nav-links a:hover::after,.nav-links a[aria-current=page]::after{right:0}
.nav-r{display:flex;align-items:center;gap:14px}
.nav-tel{font-size:14.5px;font-weight:700;white-space:nowrap}
.nav-tel:hover{color:var(--oak)}
.nav-cta{background:var(--strike);color:#fff;font-weight:700;font-size:12.5px;padding:12px 20px;border-radius:3px;white-space:nowrap;transition:background .25s,transform .25s}
.nav-cta:hover{background:var(--strike-lit);transform:translateY(-1px)}
.burger{display:none;width:30px;height:20px;position:relative}
.burger i{position:absolute;left:0;width:100%;height:2px;background:var(--bone);transition:.3s var(--ease)}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:9px}.burger i:nth-child(3){top:18px}
body.menu .burger i:nth-child(1){top:9px;transform:rotate(45deg)}
body.menu .burger i:nth-child(2){opacity:0}
body.menu .burger i:nth-child(3){top:9px;transform:rotate(-45deg)}
@media(max-width:1000px){.nav-links{display:none}.burger{display:block}}
@media(max-width:620px){.nav-tel{display:none}}
.sheet{position:fixed;inset:0;z-index:89;background:var(--night);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
body.menu .sheet{opacity:1;visibility:visible}
.sheet a{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(34px,9vw,58px);
  letter-spacing:-.025em;padding:11px 0;border-bottom:1px solid var(--line-2);
  transition:color .2s,padding-left .32s var(--ease)}
.sheet a:hover{color:var(--oak);padding-left:14px}
.sheet .foot{position:absolute;bottom:28px;left:var(--pad);font-size:13px;color:var(--ash)}
.sheet .foot a{display:inline;font-size:13px;color:var(--oak);padding:0;border:0}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:130px 0 0}
.hero-film{position:absolute;inset:0;z-index:0;background:var(--night)}
.hero-film img,.hero-film video{width:100%;height:100%;object-fit:cover}
.hero-film::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(20,16,13,.9) 0%,rgba(20,16,13,.55) 46%,rgba(20,16,13,.05) 84%),
  linear-gradient(180deg,rgba(20,16,13,.7) 0%,rgba(20,16,13,.14) 30%,rgba(20,16,13,.8) 78%,var(--night) 100%)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-bottom:clamp(50px,7vw,92px)}

/* Text left, the real throw clip right. The clip is a portrait phone video, so
   it lives in its own 9:16 frame instead of being force-fitted to the backdrop. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,64px);align-items:end}
.hero-in{max-width:760px}
.hero-reel{margin:0;justify-self:end;width:min(100%,320px)}
.hero-reel video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;
  border-radius:16px;border:1px solid var(--line);
  box-shadow:0 26px 60px rgba(0,0,0,.62)}
.hero-reel figcaption{margin-top:11px;font-size:12px;letter-spacing:.04em;
  color:var(--ash-dim);text-align:right}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px;align-items:start}
  .hero-reel{justify-self:start;width:min(60%,230px)}
  .hero-reel figcaption{text-align:left}
}
/* Reduced motion is handled in site.js, which pauses #heroVid and drops its
   autoplay attribute — leaving the poster frame showing. */
.hero .d1{margin:20px 0 24px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-note{margin-top:22px;font-size:13px;color:var(--ash-dim)}

/* live open/closed pill */
.pill{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:100px;
  border:1px solid var(--line);color:var(--ash);vertical-align:middle}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ash-dim)}
.pill.on{color:var(--oak);border-color:var(--oak-hair)}
.pill.on::before{background:var(--oak);box-shadow:0 0 0 3px rgba(201,165,116,.2)}

/* the numbers strip */
.figs{background:var(--char);border-block:1px solid var(--line-2)}
.figs .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);padding-inline:0}
.fig{background:var(--char);padding:26px clamp(16px,2.6vw,34px)}
.fig b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.8vw,46px);line-height:1;letter-spacing:-.03em}
.fig b .u{color:var(--oak);font-size:.6em}
.fig span{display:block;margin-top:8px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim)}
@media(max-width:760px){.figs .wrap{grid-template-columns:1fr 1fr}}

/* ============================================================
   SIGNATURE — THE THROW
   Axe throwing has exactly one thing every first-timer has to
   learn: from twelve feet the axe turns over once. So the site
   lets you take three throws — time the aim, watch it rotate,
   watch it stick — and then invites you to come do it properly.
   ============================================================ */
.throw-in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(38px,5.5vw,80px);align-items:center}
@media(max-width:940px){.throw-in{grid-template-columns:1fr;gap:44px}}

.lane{position:relative;width:min(460px,94%);margin:0 auto;aspect-ratio:1}
.board-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}

/* axes that have already stuck, and the one in flight */
.stuck{position:absolute;left:0;top:0;width:17%;pointer-events:none;
  transform:translate(-50%,-58%) rotate(var(--r,8deg));transform-origin:50% 50%}
.flier{position:absolute;left:0;top:0;width:17%;pointer-events:none;z-index:3}
.flier.go{animation:fly .62s cubic-bezier(.35,.02,.5,1) forwards}
@keyframes fly{
  0%  {transform:translate(-50%,-50%) rotate(0deg) scale(.82);opacity:0}
  12% {opacity:1}
  100%{transform:translate(-50%,-58%) rotate(360deg) scale(1);opacity:1;
       left:var(--lx);top:var(--ly)}
}
.lane.shake{animation:shake .3s ease-out}
@keyframes shake{0%,100%{transform:none}25%{transform:translate(2px,-3px)}60%{transform:translate(-2px,2px)}}

/* aim meter */
.aim{position:relative;height:16px;border-radius:100px;overflow:hidden;background:var(--char-2);
  border:1px solid var(--line);margin-top:8px}
.aim i{position:absolute;top:-1px;bottom:-1px;width:5px;background:var(--strike);
  border-radius:100px;box-shadow:0 0 14px rgba(196,71,47,.9);left:0}
.aim.run i{animation:sweep 1.15s linear infinite alternate}
@keyframes sweep{from{left:2%}to{left:calc(98% - 5px)}}
.aim-k{display:flex;justify-content:space-between;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim);margin-top:9px}

.score{display:flex;align-items:baseline;gap:14px;margin-top:26px}
.score b{font-family:var(--disp);font-weight:800;font-size:clamp(40px,6vw,66px);line-height:1;letter-spacing:-.03em}
.score span{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}
.throws{display:flex;gap:7px;margin-top:14px}
.throws i{width:26px;height:4px;border-radius:100px;background:var(--line);transition:background .3s}
.throws i.used{background:var(--oak)}
.verdict{margin-top:20px;font-size:15.5px;color:var(--oak);min-height:1.6em}
.verdict b{color:var(--strike)}
.throw-btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}

/* ============================================================
   CARDS / GRID
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:18px}
.card-x{position:relative;border-radius:5px;overflow:hidden;background:var(--char);border:1px solid var(--line-2);
  transition:border-color .3s,transform .4s var(--ease)}
.card-x:hover{border-color:var(--oak-hair);transform:translateY(-4px)}
.card-x .ph{aspect-ratio:3/2;overflow:hidden;background:var(--char-2)}
.card-x .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);opacity:.9}
.card-x:hover .ph img{transform:scale(1.06);opacity:1}
.card-x .in{padding:24px}
.card-x h3{font-family:var(--disp);font-weight:800;font-size:25px;letter-spacing:-.02em;line-height:1}
.card-x p{margin-top:11px;font-size:15px;color:var(--ash);line-height:1.6}
.card-x .go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:11px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oak)}

/* ---------- menu list ---------- */
.dish{display:grid;grid-template-columns:1fr auto;gap:10px 20px;align-items:baseline;
  padding:19px 0;border-top:1px solid var(--line-2)}
.dish:first-child{border-top:0}
.dish h4{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em}
.dish h4 .star{display:inline-block;margin-left:9px;font-family:var(--body);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--night);background:var(--oak);padding:3px 8px;
  border-radius:100px;vertical-align:middle}
.dish p{grid-column:1/-1;font-size:15px;color:var(--ash);margin-top:2px;max-width:58ch}
.dish .price{font-family:var(--disp);font-weight:800;font-size:19px;color:var(--oak);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.dish .price .alt{color:var(--ash-dim);font-size:14px;font-weight:700}

/* Real menu, set in columns. Any child that can't shrink drags the whole
   track wide, so min-width:0 stays on the column boxes. */
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,72px);align-items:start}
.menu-cols > *{min-width:0}
.menu-grp{margin-bottom:38px}
.menu-grp:last-child{margin-bottom:0}
.menu-grp h3{font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:-.01em;
  color:var(--oak);margin:0 0 4px}
.menu-grp .note{font-size:13px;color:var(--ash-dim);margin:0 0 8px}
.menu-foot{margin-top:14px;font-size:13.5px;color:var(--ash-dim);line-height:1.6}
@media(max-width:820px){ .menu-cols{grid-template-columns:1fr;gap:34px} }

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,5.5vw,80px);align-items:center}
.split .d2{font-size:clamp(31px,4vw,56px)}
/* .flip puts the photo first in the markup so it sits left on desktop;
   on a phone that would bury the words, so the order swaps back below. */
.split.flip .media{order:0}
@media(max-width:920px){.split{grid-template-columns:1fr;gap:38px}.split.flip .media{order:2}}
.frame{position:relative;border-radius:5px;overflow:hidden;background:var(--char-2);
  box-shadow:0 44px 90px -46px #000}
.frame img{width:100%;height:100%;object-fit:cover}
.frame.wide{aspect-ratio:3/2}
.frame.tall{aspect-ratio:4/5;max-height:640px}

/* ---------- checks ---------- */
.checks{list-style:none}
.checks li{display:flex;gap:16px;padding:19px 0;border-top:1px solid var(--line-2)}
.checks li:first-child{border-top:0;padding-top:0}
.mk{flex:none;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;margin-top:2px;
  background:rgba(201,165,116,.15);color:var(--oak)}
.checks h4{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1}
.checks p{margin-top:7px;font-size:15px;color:var(--ash);line-height:1.6}

/* ---------- quotes (NOT .rev — that name is the reveal hook) ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:18px}
.quote{background:var(--char);border:1px solid var(--line-2);border-radius:5px;padding:30px 28px;
  display:flex;flex-direction:column;transition:border-color .3s}
.quote:hover{border-color:var(--oak-hair)}
.quote .kicker{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--oak)}
.quote .stars{color:var(--strike);font-size:15px;letter-spacing:3px;margin:13px 0 14px}
.quote blockquote{font-size:16.5px;line-height:1.62;color:var(--bone);flex:1}
.quote cite{display:block;margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2);
  font-style:normal;font-weight:700;font-size:14px}
.quote cite span{display:block;font-weight:400;font-size:12px;color:var(--ash-dim);margin-top:3px}

/* ---------- hours ---------- */
.hours{list-style:none;border-top:1px solid var(--line-2)}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:15px 2px;border-bottom:1px solid var(--line-2);font-size:15.5px}
.hours li .d{color:var(--ash)}
.hours li .h{font-weight:600}
.hours li.shut .d,.hours li.shut .h{color:var(--ash-dim)}
.hours li.today .d,.hours li.today .h{color:var(--oak)}
.hours li.today .d::after{content:" · today";font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ============================================================
   PAGE HEAD
   ============================================================ */
.phead{position:relative;min-height:58svh;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--char);padding:150px 0 clamp(44px,5vw,74px)}
.pfilm{position:absolute;inset:0;z-index:0}
.pfilm img,.pfilm video{width:100%;height:100%;object-fit:cover}
.pfilm::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(20,16,13,.9) 0%,rgba(20,16,13,.56) 46%,rgba(20,16,13,.1) 84%),
  linear-gradient(180deg,rgba(20,16,13,.74) 0%,rgba(20,16,13,.2) 32%,rgba(20,16,13,.86) 80%,var(--night) 100%)}
.phead .wrap{position:relative;z-index:1}
.crumb{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:20px}
.crumb a{color:var(--ash)}
.crumb a:hover{color:var(--oak)}
.phead .d1{margin-bottom:22px}
@media(max-width:640px){.phead{min-height:0;padding:128px 0 46px}}

/* ============================================================
   FORM
   ============================================================ */
.form-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,72px);align-items:start}
@media(max-width:900px){.form-grid{grid-template-columns:1fr;gap:42px}}
.big-tel{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(40px,5.8vw,74px);
  line-height:.9;letter-spacing:-.03em;margin:18px 0 20px;transition:color .25s}
.big-tel:hover{color:var(--oak)}
.info-list{list-style:none;margin-top:26px;border-top:1px solid var(--line-2)}
.info-list li{padding:15px 0;border-bottom:1px solid var(--line-2)}
.info-list .k{display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:6px}
.info-list .v{font-size:15.5px;color:var(--bone)}
a.v:hover{color:var(--oak)}
.card{background:var(--char);border:1px solid var(--line);border-radius:6px;padding:clamp(24px,3.6vw,40px)}
.field{margin-bottom:19px}
.field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--bone);margin-bottom:9px}
.field label .opt{color:var(--ash-dim);font-weight:400}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--bone);
  background:var(--night);border:1px solid var(--line);border-radius:3px;padding:14px 15px;
  transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--oak);box-shadow:0 0 0 3px rgba(201,165,116,.16)}
.field input::placeholder,.field textarea::placeholder{color:var(--ash-dim)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick button{border:1px solid var(--line);border-radius:100px;padding:10px 17px;font-size:13.5px;
  font-weight:600;color:var(--ash);transition:.22s}
.pick button:hover{border-color:var(--oak);color:var(--oak)}
.pick button[aria-pressed=true]{background:var(--oak);border-color:var(--oak);color:var(--night);font-weight:700}
.f-status{margin-top:14px;font-size:14.5px;min-height:1.5em}
.f-note{margin-top:14px;font-size:12.5px;color:var(--ash-dim)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   CTA / FOOTER / CALLBAR
   ============================================================ */
.cta{text-align:center}
.cta .wrap{max-width:900px}
.cta .eyebrow{justify-content:center}
.cta .lead{margin-inline:auto}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

footer{background:var(--char);border-top:1px solid var(--line-2);padding:clamp(56px,7vw,92px) 0 30px}
.foot-in{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(26px,4vw,54px)}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.foot-top{grid-template-columns:1fr}}
.foot-brand img{width:56px;height:56px;margin-bottom:16px}
.foot-brand p{font-size:14.5px;color:var(--ash);line-height:1.65;max-width:34ch}
.foot-brand p b{color:var(--bone);font-size:16px;display:block;margin-bottom:8px}
.foot-col .k{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:15px}
.foot-col a,.foot-col span{display:block;font-size:14.5px;color:var(--ash);margin-bottom:10px;transition:color .2s}
.foot-col a:hover{color:var(--oak)}
.foot-word{font-family:var(--disp);font-weight:800;font-size:clamp(46px,13vw,180px);line-height:.82;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(241,235,225,.09);
  margin:clamp(38px,6vw,74px) 0 26px;user-select:none;text-align:center}
.foot-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ash-dim)}

.callbar{position:fixed;inset:auto 0 0;z-index:80;display:none;
  grid-template-columns:1fr 1fr;background:rgba(20,16,13,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line-2)}
.callbar a{padding:17px;text-align:center;font-size:14px;font-weight:700}
.callbar .c{color:var(--bone)}
.callbar .q{background:var(--strike);color:#fff}
@media(max-width:720px){.callbar{display:grid}body{padding-bottom:58px}}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-1{transition-delay:.09s}.rv-2{transition-delay:.18s}.rv-3{transition-delay:.27s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* "The Axe House" is a long name and wraps to two lines in the nav on a
   phone. Drop the locality line and hold the name on one.
   NOTE the child combinators — `.brand span` would match the wrapper too
   and hide the entire brand, which is a bug I've shipped before. */
@media(max-width:560px){
  .brand b{white-space:nowrap;font-size:19px}
  .brand > span > span{display:none}
  .brand img{width:38px;height:38px}
}
/* On a very narrow phone the brand + CTA + burger no longer fit, and the
   burger was being pushed clean off the screen — i.e. no way to open the
   menu at all. The sticky bar at the bottom already carries "Book a lane",
   so the nav copy of it goes. */
@media(max-width:400px){ .nav-cta{display:none} }

/* ---------- rate cards (throwing prices, party packages) ---------- */
.rates{background:var(--char-2);border:1px solid var(--line);border-radius:14px;
  padding:clamp(20px,2.6vw,30px)}
.rates > h3{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.01em;
  color:var(--oak);margin:0 0 6px}
.rates .dish{padding:15px 0}
.rates .dish h4{font-size:19px}
.rates > *{min-width:0}

/* Multi-part prices ("$5 12oz · $7 16oz · $14 pitcher") are nowrap so they never
   break mid-figure. On a narrow phone that makes them an unshrinkable grid child
   which drags the whole row wide, so below 560px the price drops under the name
   and is allowed to wrap between figures. */
@media(max-width:560px){
  .dish{grid-template-columns:1fr;gap:4px}
  .dish .price{white-space:normal;font-size:17px}
  .rates{padding:18px}
}