/* ============================================================
   PJ's BBQ & Catering — Lakeland, FL
   Palette: butcher-paper kraft · charred black · hot red · ember
   Type:    Alfa Slab One (display) / Rubik (body)
   ============================================================ */

:root{
  --kraft:    #E4D5BC;
  --kraft-2:  #D6C4A6;
  --cream:    #F7F1E5;
  --char:     #17120F;
  --char-2:   #221A16;
  --char-3:   #2E241E;

  --red:      #A32A1E;
  --red-l:    #BF3527;
  --ember:    #D4762A;
  --ember-l:  #E68B3F;

  --ink:      #17120F;
  --ink-2:    #5A4A3E;
  --ink-3:    #8A7867;
  --on-dark:  rgba(247,241,229,.82);
  --line-l:   #CBB897;
  --line-d:   rgba(247,241,229,.15);

  --radius:   6px;
  --radius-s: 4px;
  --shadow:   0 2px 4px rgba(23,18,15,.12), 0 18px 40px -24px rgba(23,18,15,.6);

  --ease: cubic-bezier(.2,.65,.25,1);
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:72px; --s8:104px;
  --wrap: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ overflow-x:clip; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0; background:var(--kraft); color:var(--ink);
  font-family:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3{
  font-family:"Alfa Slab One","Rubik",Georgia,serif;
  font-weight:400; line-height:1.02; letter-spacing:-.01em;
  margin:0; text-wrap:balance;
}
h1{ font-size:clamp(40px,7.4vw,80px); }
h2{ font-size:clamp(30px,4.8vw,54px); }
h3{ font-size:22px; }
p{ margin:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s4); }

.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ember); margin:0;
}
.stars{ color:var(--ember); letter-spacing:.12em; font-size:13px; }
.cu{ font-variant-numeric:tabular-nums; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff; padding:12px 18px; }
.skip:focus{ left:0; }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--ember); outline-offset:3px;
}

section[id], #main, #top{ scroll-margin-top:86px; }
#top{ position:absolute; top:0; height:0; }

/* ---------------- buttons ---------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 26px;
  background:var(--red); color:var(--cream);
  font-family:"Rubik",sans-serif; font-weight:700; font-size:16px;
  text-decoration:none; white-space:nowrap; text-align:center;
  border:0; border-radius:var(--radius); cursor:pointer;
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{ background:var(--red-l); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-sm{ min-height:44px; padding:0 18px; font-size:15px; }
.btn-lg{ min-height:56px; padding:0 30px; font-size:17.5px; }
.btn-full{ width:100%; }
.btn-ghost{ background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1.5px rgba(247,241,229,.45); }
.btn-ghost:hover{ background:rgba(247,241,229,.12); box-shadow:inset 0 0 0 1.5px var(--cream); }

/* ---------------- nav ---------------- */

.nav{ position:sticky; top:0; z-index:60; background:var(--kraft); border-bottom:2px solid var(--char); }
.nav-in{ max-width:var(--wrap); margin-inline:auto; padding:10px var(--s4);
  display:flex; align-items:center; gap:var(--s4); }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; min-height:44px; }
.brand-mark{
  width:38px; height:38px; flex:none; border-radius:var(--radius-s);
  background:var(--char); color:var(--kraft);
  display:grid; place-items:center;
  font-family:"Alfa Slab One",serif; font-size:16px; letter-spacing:.02em;
}
.brand-txt{ display:flex; flex-direction:column; line-height:1.05; gap:2px; }
.brand-txt b{ font-family:"Alfa Slab One",serif; font-size:19px; font-weight:400; color:var(--char); }
.brand-txt span{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.nav-links{ display:flex; gap:24px; }
.nav-links a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:14.5px; font-weight:600; color:var(--ink-2); text-decoration:none;
  transition:color .18s var(--ease);
}
.nav-links a:hover{ color:var(--red); }

/* ---------------- hero ---------------- */

.hero{
  position:relative; isolation:isolate;
  min-height:clamp(540px,84svh,820px);
  display:flex; align-items:flex-end;
  padding:var(--s8) 0 var(--s7);
  color:var(--cream);
}
.hero-media{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(23,18,15,.72) 0%, rgba(23,18,15,.36) 30%, rgba(23,18,15,.86) 76%, rgba(23,18,15,.96) 100%),
    linear-gradient(90deg, rgba(23,18,15,.78) 0%, rgba(23,18,15,.12) 62%);
}
.hero-in{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s4);
  display:flex; flex-direction:column; gap:var(--s4); align-items:flex-start;
}
.hero-in h1{ max-width:15ch; }
.hero .lede{ max-width:54ch; font-size:18px; color:var(--on-dark); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.hero-proof{ display:flex; flex-wrap:wrap; align-items:center; gap:9px 14px;
  font-size:15px; color:var(--on-dark); padding-top:var(--s1); }
.hero-proof b{ color:var(--cream); }
.dot{ width:4px; height:4px; border-radius:50%; background:rgba(247,241,229,.4); }

/* ---------------- section heads ---------------- */

.sec-head{ display:flex; flex-direction:column; gap:var(--s3); max-width:62ch; }
.sec-lede{ font-size:17.5px; color:var(--ink-2); }

/* ---------------- CALCULATOR ---------------- */

.calc-sec{ padding:var(--s8) 0; background:var(--char); color:var(--cream); position:relative; z-index:1; }
.calc-sec .sec-lede{ color:var(--on-dark); }

.calc{
  margin-top:var(--s6); background:var(--cream); color:var(--ink);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4);
}
.calc-top{ display:flex; flex-direction:column; gap:var(--s2); }
.calc-count{ display:flex; flex-direction:column; gap:2px; cursor:pointer; }
.calc-count span{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.calc-count b{ font-family:"Alfa Slab One",serif; font-size:clamp(30px,5.5vw,44px); font-weight:400; line-height:1.05; }
.calc-count output{ color:var(--red); font-variant-numeric:tabular-nums; }

.calc-range{
  -webkit-appearance:none; appearance:none; width:100%;
  height:46px; background:transparent; cursor:ew-resize; margin:0;
}
.calc-range::-webkit-slider-runnable-track{ height:10px; border-radius:5px; background:var(--kraft-2); }
.calc-range::-moz-range-track{ height:10px; border-radius:5px; background:var(--kraft-2); }
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:38px; height:38px; margin-top:-14px;
  border-radius:50%; background:var(--red); border:4px solid var(--cream);
  box-shadow:0 3px 10px -2px rgba(23,18,15,.5); cursor:grab;
}
.calc-range::-moz-range-thumb{
  width:34px; height:34px; border-radius:50%;
  background:var(--red); border:4px solid var(--cream);
  box-shadow:0 3px 10px -2px rgba(23,18,15,.5); cursor:grab;
}
.calc-scale{ display:flex; justify-content:space-between; font-size:12px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; margin-top:-6px; }

.calc-picks{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }

.calc-lines{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.calc-lines li{
  display:grid; grid-template-columns:1fr auto; gap:4px 14px;
  padding:12px 0; border-bottom:1px solid var(--line-l);
  font-size:16px;
}
.calc-lines li em{ grid-column:1; font-style:normal; font-size:13.5px; color:var(--ink-3); }
.calc-lines li b{ grid-column:2; grid-row:1; font-variant-numeric:tabular-nums; font-weight:700; }

.calc-total{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--s2) var(--s4); padding-top:var(--s2);
}
.calc-total > div{ display:flex; align-items:baseline; gap:12px; }
.calc-total span{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.calc-total b{
  font-family:"Alfa Slab One",serif; font-size:clamp(32px,6vw,48px); font-weight:400;
  color:var(--red); font-variant-numeric:tabular-nums; line-height:1;
}
.calc-total p{ font-size:14px; color:var(--ink-2); }
.calc-fine{ font-size:13px; color:var(--ink-3); line-height:1.5; }

/* ---------------- menu ---------------- */

.menu-sec{ padding:var(--s8) 0; background:var(--kraft); position:relative; z-index:1; }
.menu-grid{ margin-top:var(--s6); display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.menu-card{
  background:var(--cream); border:2px solid var(--char);
  border-radius:var(--radius); padding:var(--s4);
  box-shadow:var(--shadow);
}
.menu-card h3{ margin-bottom:var(--s2); color:var(--red); }
.menu-card ul{ list-style:none; margin:0; padding:0; }
.menu-card li{
  display:grid; grid-template-columns:1fr auto; gap:2px 12px;
  padding:11px 0; border-bottom:1px solid var(--line-l);
}
.menu-card li:last-child{ border-bottom:0; }
.menu-card li span{ font-weight:600; font-size:16px; }
.menu-card li em{ grid-column:1; font-style:normal; font-size:13px; color:var(--ink-3); }
.menu-card li b{
  grid-column:2; grid-row:1/span 2; align-self:center;
  font-family:"Alfa Slab One",serif; font-weight:400; font-size:21px;
  font-variant-numeric:tabular-nums;
}
.menu-media{ margin-top:var(--s5); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.menu-media img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

/* ---------------- trust band ---------------- */

.band{ background:var(--red); padding:var(--s7) 0; position:relative; z-index:1; }
.band-in{ display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); text-align:center; }
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat b{
  font-family:"Alfa Slab One",serif; font-weight:400;
  font-size:clamp(40px,6vw,66px); line-height:1; color:var(--cream);
  font-variant-numeric:tabular-nums;
}
.stat b span{ font:inherit; color:inherit; }
.stat > span{ font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; color:rgba(247,241,229,.75); }

/* ---------------- reviews ---------------- */

.reviews{ padding:var(--s8) 0; background:var(--char-2); color:var(--cream); position:relative; z-index:1; }
.reviews .sec-lede{ color:var(--on-dark); }
.rev-grid{ margin-top:var(--s6); display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.rev{
  margin:0; padding:var(--s4);
  background:var(--char-3); border:1px solid var(--line-d);
  border-left:3px solid var(--ember);
  border-radius:var(--radius);
  display:flex; flex-direction:column; gap:var(--s3);
}
.rev blockquote{ margin:0; font-size:16.5px; line-height:1.55; color:var(--cream); }
.rev figcaption{ margin-top:auto; font-weight:700; font-size:15px; display:flex; align-items:baseline; gap:9px; }
.rev figcaption span{ font-weight:400; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }

/* ---------------- quote ---------------- */

.quote{ padding:var(--s8) 0; background:var(--kraft); position:relative; z-index:1; }
.quote-in{ display:grid; gap:var(--s6); grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:start; }
.quote-txt{ display:flex; flex-direction:column; gap:var(--s3); }
.quote-txt p{ color:var(--ink-2); font-size:17.5px; max-width:48ch; }
.quote-facts{
  list-style:none; margin:var(--s2) 0 0; padding:var(--s3) 0 0;
  border-top:2px solid var(--char); display:flex; flex-direction:column; gap:10px;
}
.quote-facts li{ display:flex; gap:var(--s3); align-items:baseline; font-size:16px; }
.quote-facts li > span{
  flex:0 0 104px; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.alt-link{
  display:inline-flex; align-items:center; gap:7px; min-height:46px;
  color:var(--red); font-weight:700; font-size:16px;
  text-decoration:none; border-bottom:2px solid rgba(163,42,30,.3);
}
.alt-link:hover{ border-bottom-color:var(--red); }
.alt-link svg{ width:15px; height:15px; flex:none; }

.form{
  background:var(--cream); border:2px solid var(--char);
  border-radius:var(--radius); padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s3);
}
.fields{ display:grid; gap:var(--s3); grid-template-columns:1fr 1fr; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field-wide{ grid-column:1/-1; }
.field label{ font-size:13.5px; font-weight:600; color:var(--ink-2); }
.field label .opt{ font-weight:400; color:var(--ink-3); }
.field input, .field select, .field textarea{
  width:100%; min-height:50px; padding:13px 15px;
  font-family:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line-l); border-radius:var(--radius-s);
  transition:border-color .18s var(--ease);
}
.field textarea{ resize:vertical; min-height:88px; }
.field select{
  appearance:none; cursor:pointer; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A32A1E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px 18px;
}
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--red); }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-3); }
.hint{ font-size:13px; color:var(--ink-3); }
.err{ font-size:13px; color:var(--red); font-weight:600; }
.field.is-bad input{ border-color:var(--red); }
.form-note{ font-size:13px; color:var(--ink-3); text-align:center; }
.form-status{ font-size:15.5px; color:var(--red); font-weight:600; text-align:center; }

/* ---------------- footer ---------------- */

.foot{ background:var(--char); color:var(--on-dark); padding:var(--s6) 0 calc(var(--s6) + 74px);
  position:relative; z-index:1; font-size:15px; }
.foot-in{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.foot p{ margin:0 0 6px; }
.foot a{ color:var(--cream); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
.foot a:hover{ color:var(--ember-l); }
.foot-brand{ font-family:"Alfa Slab One",serif; font-size:20px; color:var(--cream); }
.foot-head{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ember); margin-bottom:8px; }

/* ---------------- persistent CTAs ---------------- */

.floatcta{
  position:fixed; right:24px; bottom:24px; z-index:65;
  display:inline-flex; align-items:center; min-height:54px; padding:0 26px;
  border-radius:var(--radius); background:var(--red); color:var(--cream);
  font-weight:700; font-size:16.5px; text-decoration:none; box-shadow:var(--shadow);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), background-color .2s var(--ease);
}
.floatcta.is-on{ opacity:1; transform:none; pointer-events:auto; }
.floatcta:hover{ background:var(--red-l); }

.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; gap:9px; padding:9px 13px calc(9px + env(safe-area-inset-bottom));
  background:var(--char); border-top:2px solid var(--red);
}
.callbar-btn{
  flex:1; min-height:47px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  background:var(--red); color:var(--cream); font-weight:700; font-size:16px; text-decoration:none;
}
.callbar-alt{ background:transparent; box-shadow:inset 0 0 0 1.5px rgba(247,241,229,.4); }

/* ============================================================
   REVEALS — visible by default; .js arms them
   ============================================================ */

.rv{ opacity:1; transform:none; }
.js .rv{
  opacity:0; transform:translate3d(0,30px,0) scale(.98);
  transition:opacity .26s var(--ease), transform .26s var(--ease);
  transition-delay:calc((min(var(--i,1), 3) - 1) * 40ms);
}
.js .rv.in{ opacity:1; transform:translate3d(0,0,0) scale(1); }
.js .rv.out{
  opacity:0; transform:translate3d(0,24px,0) scale(.985);
  transition:opacity .32s var(--ease), transform .32s var(--ease);
  transition-delay:0ms;
}
.no-js .rv, .rv.settled{ opacity:1; transform:none; transition:none; }

/* ---------------- responsive ---------------- */

@media (max-width:1000px){
  .quote-in{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  :root{ --s7:54px; --s8:64px; }
  body{ font-size:16.5px; }
  .nav-links{ display:none; }
  .nav-in{ padding:8px 18px; }
  .nav{ transition:transform .28s var(--ease); }
  .nav.is-tucked{ transform:translateY(-100%); }
  .callbar{ display:flex; }
  .floatcta{ display:none; }
  .wide-only{ display:none; }

  /* Clearance for the fixed bar — svh handles the shrinking viewport, it does
     nothing about an overlay we paint on top ourselves. */
  .hero{
    min-height:clamp(400px,66svh,600px);
    padding-top:var(--s4);
    padding-bottom:calc(var(--s4) + 82px + env(safe-area-inset-bottom));
  }
  .hero-in{ gap:var(--s3); }
  .hero h1{ font-size:clamp(36px,10.5vw,52px); }
  .hero .lede{ font-size:16.5px; }
  .foot{ padding-bottom:calc(var(--s6) + 74px + env(safe-area-inset-bottom)); }

  .calc{ padding:var(--s4); }
  .calc-picks{ grid-template-columns:1fr 1fr; gap:12px; }
  .fields{ grid-template-columns:1fr 1fr; gap:12px; }
  .field-wide{ grid-column:1/-1; }
}

@media (max-width:520px){
  .wrap{ padding-inline:18px; }
  .hero-in{ padding-inline:18px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv,.rv.in,.rv.out{ opacity:1 !important; transform:none !important; }
}