/* ===========================================================
   Giff's Barbecue — Kanab, Utah
   Kanab is "Little Hollywood": the town that doubled for the Old
   West in a hundred films, and Giff's sits inside the Little
   Hollywood Museum. Palette is that place — Vermilion Cliffs red
   rock, oak smoke, desert bone and firelight brass. Slab type for
   the weight of an old film title card.
   =========================================================== */
:root{
  --smoke:#141110;        /* smoked oak dark — warm, not blue-black */
  --smoke-2:#1D1917;
  --smoke-3:#2A2422;
  --bone:#F0E7D8;         /* desert bone */
  --bone-2:#DCCFB8;
  --ink:#120F0E;
  --body:#5F564C;
  --body-dk:rgba(240,231,216,.64);
  --muted:#948878;
  --rock:#C4472A;          /* 4.00 on bone — LARGE display type only (em) */
  --rock-ink:#B33F24;      /* 4.69 on bone — small text: labels, taglines, markers */         /* Vermilion Cliffs red — the accent */
  --rock-hi:#E4653F;
  --brass:#D9A441;        /* firelight */
  --sage:#7C8570;         /* sagebrush, sparingly */
  --line:rgba(240,231,216,.14);
  --line-dk:rgba(18,15,14,.15);
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --disp:'Bitter',Georgia,serif;
  --sans:'Inter Tight',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bone);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--rock);color:#fff}

.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
section{padding-block:clamp(64px,8vw,120px)}
.dark{background:var(--smoke);color:var(--bone)}
.dark .lead{color:var(--body-dk)}

/* ---------- type ---------- */
h1,h2,h3,.h1,.h2{font-family:var(--disp);font-weight:800;letter-spacing:-.022em;line-height:1.03}
.h1{font-size:clamp(38px,6.4vw,84px)}
.h2{font-size:clamp(29px,4.2vw,58px)}
.h3{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2vw,23px);letter-spacing:-.01em}
.lead{font-size:clamp(15.5px,1.35vw,18px);line-height:1.7;color:var(--body);max-width:60ch}
em{font-style:normal;color:var(--rock)}
.dark em{color:var(--rock-hi)}
.label{display:inline-flex;align-items:center;gap:11px;font-size:10.5px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--rock-ink)}
.label::before{content:"";width:24px;height:2px;background:var(--rock)}
.dark .label{color:var(--brass)}
.dark .label::before{background:var(--brass)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:600;font-size:14.5px;
  padding:17px 30px;border:none;cursor:pointer;text-decoration:none;background:var(--rock);color:#fff;
  transition:transform .2s var(--ease),background .25s}
.btn:hover{background:#A93A20;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1.5px rgba(240,231,216,.32)}
.btn--ghost:hover{background:rgba(240,231,216,.09);box-shadow:inset 0 0 0 1.5px rgba(240,231,216,.6)}
.btn--dark{background:var(--ink);color:var(--bone)}
.btn--dark:hover{background:#2A2422}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;padding-block:16px;transition:background .4s,backdrop-filter .4s,padding .4s}
.nav.tight{background:rgba(20,17,16,.94);backdrop-filter:blur(20px) saturate(1.25);padding-block:10px;border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--bone)}
.brand-mark{width:42px;height:42px;flex:none}
.brand-txt b{display:block;font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1}
.brand-txt small{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin-top:3px}   /* 8.36:1 on smoke; echoes the logo's gold */
.nav-links{display:flex;gap:24px;flex:0 1 auto}
.nav-links a{font-size:13.5px;font-weight:500;text-decoration:none;color:rgba(240,231,216,.84);white-space:nowrap;transition:color .2s}
.nav-links a:hover{color:var(--bone)}
.nav-links a[aria-current="page"]{color:var(--bone)}
.nav-links a[aria-current="page"]::after{content:"";display:block;height:2px;background:var(--brass);margin-top:5px}
.nav-r{display:flex;align-items:center;gap:14px}
.nav-tel{font-family:var(--disp);font-weight:700;font-size:15px;text-decoration:none;color:var(--bone);white-space:nowrap}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.nav-toggle span{width:24px;height:2px;background:var(--bone);display:block}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(620px,94vh,1000px);display:flex;align-items:flex-end;overflow:hidden;
  background:var(--smoke);padding-block:150px clamp(48px,6vw,86px)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg video,.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,17,16,.74) 0%,rgba(20,17,16,.24) 30%,rgba(20,17,16,.52) 62%,rgba(20,17,16,.96) 100%),
  linear-gradient(96deg,rgba(20,17,16,.88) 0%,rgba(20,17,16,.4) 54%,rgba(20,17,16,.05) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{color:var(--bone);max-width:15ch;margin-top:20px}
.hero .lead{color:rgba(240,231,216,.82);margin-top:20px;max-width:50ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:36px;padding-top:22px;
  border-top:1px solid var(--line);font-size:13.5px;color:rgba(240,231,216,.74)}
.hero-trust b{color:var(--bone);font-weight:600}
.hero-trust .sep{width:1px;height:14px;background:var(--line)}

/* ---------- marquee ---------- */
.marq{background:var(--rock);color:#fff;padding-block:14px;overflow:hidden;white-space:nowrap}
.marq-in{display:inline-flex;animation:marq 36s linear infinite}
.marq span{font-family:var(--disp);font-weight:700;font-size:14px;padding-inline:26px;position:relative}
.marq span::after{content:"";position:absolute;right:-3px;top:50%;width:5px;height:5px;background:rgba(255,255,255,.5);
  border-radius:50%;transform:translateY(-50%)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ===========================================================
   THE BRISKET — scroll-driven cook sequence.
   The rail is a tall scroll track; the frames are pinned inside it
   and cross-fade as you scroll, so the meat visibly cooks under
   your thumb. Pure CSS opacity driven by JS scroll progress — no
   scrubbing a video, which would stall on mobile connections.
   =========================================================== */
.fire{background:var(--smoke);color:var(--bone)}
.fire-rail{position:relative;height:600vh}
.fire-pin{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(24px,4vw,64px);padding-inline:var(--pad);max-width:1240px;margin:0 auto}
.fire-frames{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--smoke-2)}
.fire-frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .55s var(--ease),transform 1.4s var(--ease);transform:scale(1.06)}
.fire-frames img.on{opacity:1;transform:scale(1)}
.fire-txt{position:relative}
.fire-step{position:absolute;inset:auto 0 0 0;bottom:0;opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.fire-step.on{opacity:1;transform:none;position:relative;pointer-events:auto}
.fire-n{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.2em;color:var(--brass)}
.fire-step h3{margin:12px 0 12px;font-size:clamp(26px,3.6vw,46px);color:var(--bone);line-height:1.05}
.fire-step p{font-size:clamp(15px,1.3vw,17px);line-height:1.7;color:var(--body-dk);max-width:44ch}
.fire-meta{margin-top:20px;display:flex;gap:20px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.fire-meta b{color:var(--brass);font-weight:700}
/* progress bar */
.fire-prog{position:absolute;left:var(--pad);right:var(--pad);bottom:34px;height:2px;background:rgba(240,231,216,.14);max-width:1240px;margin-inline:auto}
.fire-prog i{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--brass);transition:width .2s linear}
@media(max-width:900px){
  .fire-pin{grid-template-columns:1fr;gap:22px;align-content:center}
  .fire-frames{aspect-ratio:4/3}
  .fire-step h3{font-size:clamp(22px,6vw,30px)}
  .fire-step p{font-size:14.5px}
}

/* ---------- menu ---------- */
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line-dk);
  border:1px solid var(--line-dk);margin-top:44px}
.mcard{background:var(--bone);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:10px;transition:background .3s}
.mcard:hover{background:#FBF6EC}
.mcard .h3{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.mcard p{font-size:14.5px;line-height:1.62;color:var(--body)}
.tagline{display:inline-block;margin-top:6px;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rock-ink);border:1px solid rgba(196,71,42,.35);padding:5px 9px}

/* the board — Darren's two menu boards, set as one */
.mboard{margin-top:44px;column-count:2;column-gap:clamp(34px,5vw,70px)}
.mcol{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line-dk)}
.mboard .mcol:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.mcol-h{font-family:var(--display);font-size:clamp(21px,2.1vw,26px);font-weight:500;
  line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.mcol-note{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--body)}
.mcol-foot{margin-top:12px;font-size:13px;line-height:1.6;color:var(--body);font-style:italic}
.mlist{list-style:none;margin-top:16px}
.mitem{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.mitem:last-child{border-bottom:0}
.mname{font-size:15.5px;line-height:1.45;color:var(--ink)}
.mname i{display:block;font-style:normal;font-size:13px;line-height:1.5;color:var(--body);margin-top:3px}
.mprice{flex:none;font-variant-numeric:tabular-nums;font-size:15px;color:var(--ink);font-weight:600}
.mgroup{margin:18px 0 2px;font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rock-ink)}
.mlist>.mgroup:first-child{margin-top:0}
.mstar{color:var(--rock-ink);font-size:12px;font-weight:400;vertical-align:2px}
.mnote{margin-top:34px;padding-top:20px;border-top:1px solid var(--line-dk);
  font-size:13.5px;line-height:1.6;color:var(--body)}
@media(max-width:820px){.mboard{column-count:1}}

/* home-page preview cards */
.mcard-sec{font-size:9.5px!important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rock-ink)!important;margin-top:-2px}
.mcard-p{margin-top:auto;padding-top:12px;font-family:var(--display);font-size:20px;
  font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:center}
.split.rev .split-media{order:2}
.split-media img{width:100%;aspect-ratio:3/2;object-fit:cover}
/* portrait sources (the Western Spirits sign, the jersey wall) keep their own
   shape — forcing them to 3/2 cuts the sign and the jerseys in half */
/* portrait sources (the Western Spirits sign, the jersey wall) must never be
   cropped — object-fit:cover was cutting the sign in half. Let them size to
   their own ratio instead. */
.split-media.tall img{aspect-ratio:auto;height:auto;object-fit:contain}
@media(max-width:860px){.split{grid-template-columns:1fr}.split.rev .split-media{order:0}}

/* ---------- page header ---------- */
.phead{position:relative;padding:clamp(130px,17vw,200px) 0 clamp(50px,7vw,84px);background:var(--smoke);overflow:hidden}
.phead-bg{position:absolute;inset:0;z-index:0}
.phead-bg img{width:100%;height:100%;object-fit:cover}
.phead-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,17,16,.8) 0%,rgba(20,17,16,.56) 45%,rgba(20,17,16,.95) 100%),
  linear-gradient(96deg,rgba(20,17,16,.9) 0%,rgba(20,17,16,.44) 62%,rgba(20,17,16,.12) 100%)}
.phead .wrap{position:relative;z-index:2}
.phead h1{color:var(--bone);margin-top:16px;max-width:15ch}
.phead .lead{color:rgba(240,231,216,.8);margin-top:18px}

/* ---------- info / hours ---------- */
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(22px,3vw,44px);margin-top:44px}
.info h4{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.info p,.info a{font-size:15px;line-height:1.75;color:var(--body-dk);text-decoration:none;display:block}
.info a:hover{color:var(--bone)}
.hrow{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--body-dk)}
.hrow b{color:var(--bone);font-weight:600}
.hrow.is-today{color:var(--bone)}
.hrow.is-today b{color:var(--brass)}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:44px}
.gal figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gal figcaption{margin-top:10px;font-size:13.5px;color:var(--body)}
.dark .gal figcaption{color:var(--body-dk)}

/* ---------- FAQ ---------- */
.faq{margin-top:34px;border-top:1px solid var(--line-dk)}
.faq details{border-bottom:1px solid var(--line-dk)}
.faq summary{cursor:pointer;padding:19px 0;font-family:var(--disp);font-weight:700;font-size:clamp(17px,1.8vw,20px);
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--rock-ink);font-size:22px;font-weight:400;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 0 19px;font-size:15px;line-height:1.68;color:var(--body);max-width:70ch}

/* ---------- CTA band ---------- */
.cta-band{padding-block:clamp(56px,7vw,96px)}
.cta-band .lead{max-width:52ch;margin-inline:auto}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:var(--bone);padding-block:clamp(48px,6vw,74px) 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(26px,4vw,54px)}
.foot-grid h4{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:15px}
.foot-grid a,.foot-grid span{display:block;font-size:14px;color:rgba(240,231,216,.68);text-decoration:none;margin-bottom:9px}
.foot-grid a:hover{color:var(--bone)}
.foot-bot{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 22px;
  justify-content:space-between;font-size:12.5px;color:rgba(240,231,216,.44)}

/* ---------- mobile bar ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none}
.mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;font-weight:600;font-size:14.5px;text-decoration:none}
.mbar .call{background:var(--ink);color:var(--bone)}
.mbar .go{background:var(--rock);color:#fff}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}

@media(max-width:1080px){.nav-tel{display:none}}
@media(max-width:980px){.nav-links{display:none}.nav-toggle{display:flex}.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr}.mbar{display:flex}footer.site{padding-bottom:76px}
  .hero{min-height:auto;padding-block:128px 52px}}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  /* The cook sequence collapses to a plain stacked list — no pinning. */
  .fire-rail{height:auto}
  .fire-pin{position:static;height:auto;display:block;padding-block:40px}
  .fire-frames{aspect-ratio:3/2;margin-bottom:20px}
  .fire-frames img{position:relative;opacity:1;transform:none;margin-bottom:12px}
  .fire-step{position:relative;opacity:1;transform:none;margin-bottom:34px}
  .fire-prog{display:none}
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ===========================================================
   HIRING
   =========================================================== */
/* Home-page hiring band. Sits on the ember red rather than the smoke dark so
   it reads as a distinct call, not just another dark section in the stack. */
.hire-band{background:#8E2F17;color:var(--bone)}
.hire-band .lead{color:rgba(240,231,216,.8)}
.hire-band .label{color:var(--brass)}
.hire-band .label::before{background:var(--brass)}
.hire-band em{color:var(--brass)}
.hire-band .btn{background:var(--bone);color:var(--ink)}
.hire-band .btn:hover{background:#fff}

/* Role cards */
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line-dk);
  border:1px solid var(--line-dk);margin-top:44px}
.role{background:var(--bone);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:10px;transition:background .3s}
.role:hover{background:#FBF6EC}
.role-n{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.18em;color:var(--rock-ink)}
.role-sum{font-weight:600;color:var(--ink);font-size:15.5px;line-height:1.5}
.role p{font-size:14.5px;line-height:1.65;color:var(--body)}

/* Tick list */
.ticks{list-style:none;display:grid;gap:11px}
.ticks li{position:relative;padding-left:28px;font-size:15px;line-height:1.55;color:var(--body-dk)}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;border-left:2px solid var(--brass);
  border-bottom:2px solid var(--brass);transform:rotate(-45deg)}

/* Form */
.formwrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,76px);align-items:start;margin-top:10px}
form{display:grid;gap:17px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:15.5px;padding:14px 15px;
  background:#fff;border:1px solid rgba(18,15,14,.18);color:var(--ink);outline:none;border-radius:0;
  transition:border-color .25s;appearance:none}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--rock)}
.field input::placeholder,.field textarea::placeholder{color:rgba(18,15,14,.32)}
.hp{position:absolute!important;left:-9999px!important;opacity:0}
.f-note{font-size:12.5px;color:var(--muted);line-height:1.6}
/* Confirmation panel shown when Netlify returns ?sent=1 */
.sent{border:1px solid rgba(18,15,14,.16);border-left:3px solid var(--rock);padding:clamp(24px,3vw,36px);background:#FBF6EC}
.sent:focus{outline:none}
@media(max-width:900px){.formwrap{grid-template-columns:1fr}.f-row{grid-template-columns:1fr}}

/* ---------- chips (Blitzburgh West credentials) ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:22px 0 0}
.chips li{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 13px;border:1px solid var(--line-dk);border-radius:2px;color:var(--body)}

/* ---------- visit: the building, so people recognise it on arrival ----------
   An OSM iframe was tried here first and wants WebGL — a map that can error is
   worse than no map, so this is a photograph instead. */
.visit-shot{margin-top:44px}
.visit-shot img{width:100%;height:clamp(260px,32vw,400px);object-fit:cover;display:block}
.visit-shot-cap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  justify-content:space-between;margin-top:18px}
.visit-shot-cap span{font-size:14px;color:var(--body-dk);max-width:52ch}
.visit-shot-cap b{color:var(--bone)}
.visit-acts{display:flex;flex-wrap:wrap;gap:12px;max-width:none!important}