/* ===========================================================
   Burly's Roughrider Bar & Steakhouse — Belfield, North Dakota
   Badlands: night / clay / ember / wheat / bone.
   =========================================================== */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#131110; --ink-2:#1B1817; --ink-3:#262120; --ink-4:#372F2C;
  --bone:#F3EDE2; --bone-2:#E4DACA; --bone-3:#CFC2AC; --paper:#FFFCF7;
  --body:#5C534B; --muted:#948877;
  --clay:#A8482A; --clay-2:#7E3320; --clay-hi:#E27A38;
  --wheat:#D8AE5E; --wheat-hi:#F0CE8B;
  --line:rgba(243,237,226,.13); --line-2:rgba(243,237,226,.07);
  --line-dk:rgba(19,17,16,.13);
  --pad:clamp(20px,5vw,68px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --disp:'Fraunces',Georgia,serif;
  --sans:'Karla',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.02;letter-spacing:-.022em;font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 90}
::selection{background:var(--clay);color:var(--bone)}

.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(70px,9vw,132px) 0;position:relative}
.lead{font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.7;color:var(--body)}
.dark{background:var(--ink);color:var(--bone)}
.dark .lead{color:rgba(243,237,226,.72)}
.dark h2,.dark h3{color:var(--bone)}
.alt{background:var(--bone-2)}

.h1{font-size:clamp(46px,7.4vw,104px);line-height:.95;letter-spacing:-.032em}
.h2{font-size:clamp(34px,4.9vw,66px);line-height:1;letter-spacing:-.028em}
.h2 em,.h1 em{font-style:italic;color:var(--clay)}
.dark .h2 em,.dark .h1 em{color:var(--clay-hi)}

.label{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--clay)}
.label::before{content:"";width:22px;height:1px;background:var(--clay)}
.label.center{justify-content:center}
.label.center::after{content:"";width:22px;height:1px;background:var(--clay)}
.dark .label{color:var(--wheat)}
.dark .label::before,.dark .label.center::after{background:var(--wheat)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:13.5px;letter-spacing:.02em;
  padding:17px 30px;border-radius:2px;border:1px solid transparent;cursor:pointer;background:transparent;color:inherit;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s}
.btn--clay{background:var(--clay);color:#fff;box-shadow:0 16px 34px -18px rgba(168,72,42,.95)}
.btn--clay:hover{background:var(--clay-2);transform:translateY(-2px)}
.btn--ink{background:var(--ink);color:var(--bone)}
.btn--ink:hover{background:#000;transform:translateY(-2px)}
.btn--bone{background:var(--bone);color:var(--ink)}
.btn--bone:hover{background:#fff;transform:translateY(-2px)}
.btn--ghost{border-color:var(--line-dk);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.dark .btn--ghost,.hero .btn--ghost,.cta .btn--ghost{border-color:var(--line);color:var(--bone)}
.dark .btn--ghost:hover,.hero .btn--ghost:hover,.cta .btn--ghost:hover{border-color:var(--wheat);color:var(--wheat)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;transition:background .35s,box-shadow .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(243,237,226,.95);backdrop-filter:blur(14px);border-color:var(--line-dk);box-shadow:0 12px 34px -28px rgba(19,17,16,.55)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:84px;gap:18px}
.brand{display:flex;align-items:center;gap:11px;flex:none;color:var(--clay)}
.nav--on-dark:not(.scrolled) .brand{color:var(--wheat)}
.brand-txt{line-height:1}
.brand-txt b{display:block;font-family:var(--disp);font-weight:700;font-size:21px;color:var(--ink);letter-spacing:-.02em}
.brand-txt small{display:block;font-weight:700;font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);margin-top:4px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-weight:500;font-size:14.5px;color:var(--ink);opacity:.76;transition:opacity .2s,color .2s}
.nav-links a:hover{opacity:1}
.nav-links a[aria-current]{opacity:1;color:var(--clay)}
.nav-r{display:flex;align-items:center;gap:14px}
.nav-tel{font-family:var(--disp);font-weight:600;font-size:19px;color:var(--ink);white-space:nowrap;transition:color .2s}
.nav-tel:hover{color:var(--clay)}
.nav-cta{white-space:nowrap;font-weight:700;font-size:12.5px;background:var(--clay);color:#fff;padding:14px 22px;border-radius:2px;transition:background .3s,transform .2s}
.nav-cta:hover{background:var(--clay-2);transform:translateY(-1px)}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.nav-toggle span{width:23px;height:1.6px;background:var(--ink);transition:.3s}
.nav--on-dark:not(.scrolled) .brand-txt b{color:var(--bone)}
.nav--on-dark:not(.scrolled) .brand-txt small{color:rgba(243,237,226,.6)}
.nav--on-dark:not(.scrolled) .nav-links a{color:var(--bone)}
.nav--on-dark:not(.scrolled) .nav-links a[aria-current]{color:var(--wheat)}
.nav--on-dark:not(.scrolled) .nav-tel{color:var(--bone)}
.nav--on-dark:not(.scrolled) .nav-toggle span{background:var(--bone)}
@media(max-width:1080px){.nav-links,.nav-tel{display:none}.nav-toggle{display:flex}}
@media(max-width:760px){.nav-cta{display:none}.nav-in{height:70px}.brand-txt b{font-size:18px}}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.nav-overlay{position:fixed;inset:0;z-index:60;background:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
body.menu-open .nav-overlay{opacity:1;visibility:visible}
.nav-overlay a{font-family:var(--disp);font-weight:600;font-size:clamp(29px,7vw,50px);color:var(--bone);padding:12px 0;border-bottom:1px solid var(--line);transition:color .25s,padding-left .35s var(--ease)}
.nav-overlay a:hover{color:var(--wheat);padding-left:12px}
.nav-overlay .ov-foot{margin-top:28px;font-size:15px;color:rgba(243,237,226,.62)}
.nav-overlay .ov-foot a{color:var(--wheat);border:0;padding:0;font-family:var(--sans);font-size:15px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(640px,96vh,980px);display:flex;align-items:flex-end;overflow:hidden;padding:150px 0 clamp(46px,6vw,84px);background:var(--ink)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover}
/* the exterior clip carries its own slow dolly-in, so the CSS Ken Burns is off
   for the video - two zooms compounding read as drift rather than intent. The
   <img> fallback only ever shows when the video will not play, so it keeps it. */
.hero-bg img{animation:kb 19s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.05) translate3d(1%,.5%,0)}to{transform:scale(1.15) translate3d(-1.4%,-1%,0)}}
/* The hero footage is now the storefront in flat daylight, not the near-black
   plate of prime rib it was built for, so the old two-gradient veil left the
   eyebrow at 4.37:1 and the italic "once" at 3.20:1 - measured against the real
   frames, not the token. The fix is this third band rather than a heavier veil:
   both failures sit in the leftmost third, and the sign starts at x 29%, so a
   band that has decayed to nothing by 30% buys the contrast back without
   putting a single point of extra veil over the sign. */
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(19,17,16,.7) 0%,rgba(19,17,16,.18) 34%,rgba(19,17,16,.95) 100%),
  linear-gradient(100deg,rgba(19,17,16,.86) 0%,rgba(19,17,16,.22) 60%,rgba(19,17,16,.02) 100%),
  linear-gradient(90deg,rgba(19,17,16,.62) 0%,rgba(19,17,16,.62) 10%,rgba(19,17,16,0) 30%)}
/* Narrow viewports crop the 16:9 clip to its middle quarter, which parks the
   sign's white lettering directly behind the italic word in the headline -
   measured 2.65:1 there, against 6.16+ for every other zone. Deepening the
   whole veil to fix one word costs the building (mean veil .70 -> .85); this
   pool costs .70 -> .72 and takes the word to 4.70:1. */
@media(max-width:1080px){
  .hero-bg::after{background:
    linear-gradient(180deg,rgba(19,17,16,.7) 0%,rgba(19,17,16,.18) 34%,rgba(19,17,16,.95) 100%),
    linear-gradient(100deg,rgba(19,17,16,.86) 0%,rgba(19,17,16,.22) 60%,rgba(19,17,16,.02) 100%),
    linear-gradient(90deg,rgba(19,17,16,.62) 0%,rgba(19,17,16,.62) 10%,rgba(19,17,16,0) 30%),
    radial-gradient(70% 20% at 32% 32%,rgba(19,17,16,.75),rgba(19,17,16,0) 70%)}
}
.hero .wrap{position:relative;z-index:3;width:100%}
/* --wheat on the daylight frames measures 4.52:1 at 10.5px, which is inside the
   bar but with no headroom; --wheat-hi is the same family and reads 6.20:1. */
.hero .label{color:var(--wheat-hi);margin-bottom:20px}
.hero .label::before{background:var(--wheat-hi)}
.hero h1{font-size:clamp(46px,7.8vw,108px);color:var(--bone);line-height:.95;letter-spacing:-.034em;max-width:15ch;text-shadow:0 8px 46px rgba(0,0,0,.55)}
.hero h1 em{font-style:italic;color:var(--clay-hi)}
.hero .lead{margin-top:22px;max-width:52ch;color:rgba(243,237,226,.82)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:rgba(243,237,226,.74)}
.hero-trust b{color:var(--bone);font-weight:700}
.hero-trust .s{color:var(--wheat);letter-spacing:2px}
.hero-trust .sep{width:1px;height:15px;background:var(--line)}

/* ---------- ticker ---------- */
.ticker{background:var(--ink-2);color:var(--bone);overflow:hidden;padding:15px 0;
  border-top:1px solid rgba(216,174,94,.24);border-bottom:1px solid rgba(216,174,94,.24)}
.ticker-track{display:flex;gap:40px;white-space:nowrap;width:max-content;animation:slide 40s linear infinite}
.ticker-track span{font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:40px;color:rgba(243,237,226,.86)}
.ticker-track span::after{content:"◆";color:var(--clay-hi);font-size:7px}
@keyframes slide{to{transform:translateX(-50%)}}

.sec-head{max-width:790px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{margin-top:16px}
.sec-head p{margin-top:19px}

/* ===========================================================
   SIGNATURE — "THE FIRE": scroll-driven photoreal cook sequence
   =========================================================== */
.fire{background:var(--ink);color:var(--bone);position:relative}
.fire-rail{height:520vh;min-height:3000px;position:relative}
.fire-stage{position:sticky;top:0;height:100vh;min-height:600px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
/* must beat `.fire-stage>*{position:relative}` below — it is a direct child too */
.fire-stage>.fire-frames{position:absolute;inset:0;z-index:0}
.fire-frame{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--ease)}
.fire-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.fire-frames::after{content:"";position:absolute;inset:0;z-index:2;background:
  linear-gradient(180deg,rgba(19,17,16,.82) 0%,rgba(19,17,16,.22) 30%,rgba(19,17,16,.5) 62%,rgba(19,17,16,.96) 100%)}
.fire-stage>*{position:relative;z-index:3}

.fire-top{position:absolute!important;top:0;left:0;right:0;padding:96px var(--pad) 0;z-index:4}
.fire-top .label{color:var(--wheat)}
.fire-top .label::before{background:var(--wheat)}
.fire-top h2{margin-top:12px;color:var(--bone);max-width:18ch}
.fire-hint{display:flex;align-items:center;gap:10px;font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,237,226,.6);margin-top:16px}
.fire-hint .bar{width:54px;height:1px;background:var(--line);position:relative;overflow:hidden}
.fire-hint .bar::after{content:"";position:absolute;inset:0;width:38%;background:var(--clay-hi);animation:hint 2.5s var(--ease) infinite}
@keyframes hint{0%{transform:translateX(-110%)}60%,100%{transform:translateX(270%)}}
@media(max-width:820px){.fire-hint{display:none}}

.fire-read{padding:0 var(--pad) clamp(26px,4vw,52px);display:grid;grid-template-columns:1fr auto;gap:20px 40px;align-items:end;max-width:1280px;margin:0 auto;width:100%}
@media(max-width:820px){.fire-read{grid-template-columns:1fr}}
.fire-stagename{font-family:var(--disp);font-weight:600;font-size:clamp(30px,5vw,62px);color:var(--bone);line-height:1;letter-spacing:-.03em}
.fire-note{font-size:clamp(15px,1.5vw,18px);color:rgba(243,237,226,.78);margin-top:12px;max-width:44ch;line-height:1.6}
.fire-gauges{display:flex;gap:clamp(18px,3vw,40px);align-items:flex-end}
.gauge b{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(24px,3.4vw,42px);color:var(--wheat);line-height:1;letter-spacing:-.02em}
.gauge span{display:block;margin-top:8px;font-weight:700;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(243,237,226,.55)}
.fire-ticks{display:flex;gap:6px;padding:0 var(--pad) clamp(22px,3vw,34px);max-width:1280px;margin:0 auto;width:100%}
.fire-ticks i{flex:1;height:2px;background:rgba(243,237,226,.16);display:block;transition:background .4s,transform .4s}
.fire-ticks i.on{background:var(--clay-hi)}
.fire-ticks i.done{background:rgba(226,122,56,.45)}

/* ---------- prime rib tracker ---------- */
.pr{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:linear-gradient(180deg,rgba(243,237,226,.05),rgba(243,237,226,.014));
  box-shadow:0 50px 100px -54px #000}
.pr-top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,2.4vw,30px);border-bottom:1px solid var(--line);background:rgba(19,17,16,.44)}
.pr-live{display:flex;align-items:center;gap:12px}
.pr-dot{width:9px;height:9px;border-radius:50%;background:var(--clay-hi);box-shadow:0 0 0 0 rgba(226,122,56,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(226,122,56,0)}100%{box-shadow:0 0 0 0 rgba(226,122,56,0)}}
.pr-live b{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.2vw,24px);color:var(--bone)}
.pr-live span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.pr-badge{font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:9px 15px;border-radius:2px;border:1px solid}
.pr-badge.on{color:var(--clay-hi);border-color:rgba(226,122,56,.5);background:rgba(168,72,42,.16)}
.pr-badge.soon{color:var(--wheat);border-color:rgba(216,174,94,.45);background:rgba(216,174,94,.1)}
.pr-badge.off{color:var(--muted);border-color:var(--line);background:rgba(243,237,226,.04)}
.pr-body{padding:clamp(24px,3vw,38px) clamp(18px,2.4vw,30px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(22px,3vw,44px);align-items:center}
@media(max-width:860px){.pr-body{grid-template-columns:1fr}}
.pr-count{display:flex;gap:clamp(12px,2vw,24px)}
.pr-unit{text-align:center;min-width:64px}
.pr-unit b{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(34px,5vw,58px);color:var(--bone);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pr-unit span{display:block;margin-top:8px;font-weight:700;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pr-msg{font-size:15.5px;color:rgba(243,237,226,.76);line-height:1.62}
.pr-msg b{color:var(--wheat);font-weight:700}
.pr-foot{padding:15px clamp(18px,2.4vw,30px);border-top:1px solid var(--line);background:rgba(19,17,16,.4);
  font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.card{position:relative;border-radius:2px;overflow:hidden;background:var(--paper);border:1px solid var(--line-dk);transition:transform .38s var(--ease),box-shadow .38s}
.card:hover{transform:translateY(-6px);box-shadow:0 44px 80px -46px rgba(19,17,16,.42)}
.dark .card{background:var(--ink-2);border-color:var(--line)}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bone-2)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .card-media img{transform:scale(1.06)}
.card-body{padding:clamp(24px,2.6vw,34px)}
.card h3{font-size:clamp(23px,2.5vw,30px);color:var(--ink)}
.dark .card h3{color:var(--bone)}
.card p{margin-top:11px;font-size:15px;color:var(--body)}
.dark .card p{color:rgba(243,237,226,.68)}
.card .go{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.dark .card .go{color:var(--wheat)}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center}
.split.rev .split-media{order:2}
@media(max-width:920px){.split{grid-template-columns:1fr;gap:38px}.split.rev .split-media{order:0}}
.frame{position:relative;border-radius:2px;overflow:hidden;background:var(--ink-2);box-shadow:0 46px 88px -50px rgba(19,17,16,.55)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.frame.tall{aspect-ratio:4/5}.frame.wide{aspect-ratio:4/3}.frame.cine{aspect-ratio:16/9}
.frame .tag{position:absolute;left:0;bottom:0;z-index:3;font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);background:rgba(19,17,16,.82);backdrop-filter:blur(4px);padding:10px 16px}

/* ---------- checks ---------- */
.checks{list-style:none;margin-top:8px}
.checks li{padding:18px 0;border-bottom:1px solid var(--line-dk);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.checks li:first-child{border-top:1px solid var(--line-dk)}
.dark .checks li{border-color:var(--line)}
.checks .mk{width:22px;height:22px;flex:none;border-radius:50%;border:1px solid var(--clay);color:var(--clay);display:grid;place-items:center;margin-top:3px;font-size:11px}
.dark .checks .mk{border-color:var(--wheat);color:var(--wheat)}
.checks h3{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ink);letter-spacing:0}
.dark .checks h3{color:var(--bone)}
.checks p{color:var(--body);font-size:14.5px;margin-top:4px}
.dark .checks p{color:rgba(243,237,226,.68)}

/* ---------- index rows ---------- */
.index-rows{list-style:none;border-top:1px solid var(--line-dk)}
.dark .index-rows{border-color:var(--line)}
.index-rows li{border-bottom:1px solid var(--line-dk)}
.dark .index-rows li{border-color:var(--line)}
.index-rows a{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,44px);align-items:baseline;padding:clamp(20px,2.6vw,30px) 6px;transition:padding .35s var(--ease)}
.index-rows a:hover{padding-left:18px}
.index-rows .n{font-family:var(--disp);font-size:14px;color:var(--clay);min-width:2.4em}
.dark .index-rows .n{color:var(--wheat)}
.index-rows h3{font-size:clamp(21px,2.7vw,33px);color:var(--ink)}
.dark .index-rows h3{color:var(--bone)}
.index-rows p{font-size:14.5px;color:var(--body);margin-top:7px;max-width:56ch}
.dark .index-rows p{color:rgba(243,237,226,.66)}
.index-rows .go{font-size:20px;color:var(--clay);opacity:0;transform:translateX(-6px);transition:.35s var(--ease)}
.dark .index-rows .go{color:var(--wheat)}
.index-rows a:hover .go{opacity:1;transform:none}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media(max-width:780px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--ink);padding:clamp(28px,3vw,44px) 18px;text-align:center}
.stat b{font-family:var(--disp);font-weight:600;font-size:clamp(34px,4.8vw,58px);color:var(--bone);line-height:1;display:block;letter-spacing:-.03em}
.stat b .u{color:var(--wheat);font-size:.5em}
.stat span{display:block;margin-top:13px;font-weight:700;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- quote ---------- */
.quote-big{max-width:1000px;margin:0 auto;text-align:center}
.quote-big p{font-family:var(--disp);font-style:italic;font-weight:500;font-size:clamp(24px,3.3vw,44px);line-height:1.26;color:var(--bone);letter-spacing:-.025em}
.light-q .quote-big p{color:var(--ink)}
.quote-big cite{display:block;margin-top:26px;font-style:normal;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--wheat)}
.light-q .quote-big cite{color:var(--clay)}
.quote-big cite span{display:block;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);font-size:13px;margin-top:7px;font-family:var(--sans)}

/* ---------- reviews ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
@media(max-width:900px){.rev-grid{grid-template-columns:1fr}}
.rev{border-top:1px solid var(--line-dk);padding-top:22px;display:flex;flex-direction:column}
.dark .rev{border-color:var(--line)}
.rev .s{color:var(--wheat);letter-spacing:3px;font-size:13px}
.rev p{margin-top:14px;font-size:17px;line-height:1.55;color:var(--ink);flex:1;font-family:var(--disp);font-weight:500}
.dark .rev p{color:var(--bone)}
.rev cite{display:block;margin-top:18px;font-style:normal;font-weight:700;font-size:13px;color:var(--ink)}
.dark .rev cite{color:var(--bone)}
.rev cite span{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:3px}

/* ---------- menu ---------- */
.menu-nav{position:sticky;top:84px;z-index:40;background:rgba(243,237,226,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-dk);overflow-x:auto;-webkit-overflow-scrolling:touch}
.menu-nav-in{display:flex;gap:4px;padding:12px var(--pad);width:max-content;min-width:100%}
.menu-nav a{white-space:nowrap;font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--body);padding:10px 15px;border-radius:2px;transition:.22s}
.menu-nav a:hover{background:rgba(19,17,16,.06);color:var(--ink)}
@media(max-width:1080px){.menu-nav{top:70px}}
.mgroup{margin-bottom:clamp(44px,5vw,72px);scroll-margin-top:150px}
.mgroup-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.dark .mgroup-head{border-color:var(--wheat)}
.mgroup-head h2{font-size:clamp(27px,3.4vw,42px)}
.mgroup-head .note{font-size:12.5px;color:var(--body);font-weight:500}
.mlist{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,64px)}
@media(max-width:860px){.mlist{grid-template-columns:1fr}}
.mitem{padding:18px 0;border-bottom:1px solid var(--line-dk)}
.mitem-top{display:flex;align-items:baseline;gap:12px}
.mitem h3{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);flex:none;max-width:74%}
.mitem .dots{flex:1;border-bottom:1px dotted var(--line-dk);transform:translateY(-4px)}
.mitem .price{font-family:var(--disp);font-weight:600;font-size:17px;color:var(--clay);flex:none}
.mitem p{margin-top:7px;font-size:14px;color:var(--body);line-height:1.6;max-width:56ch}
.mitem .flag{display:inline-block;margin-top:8px;font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay);border:1px solid rgba(168,72,42,.4);border-radius:2px;padding:4px 9px}

/* ---------- forms ---------- */
.form-card{background:var(--ink-2);border:1px solid var(--line);border-radius:3px;padding:clamp(26px,3.4vw,44px)}
.form-card h3{font-size:clamp(24px,2.7vw,32px);color:var(--bone);margin-bottom:8px}
.form-card .sub{font-size:14px;color:var(--muted);margin-bottom:24px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.f-row{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:15.5px;color:var(--bone);background:transparent;
  border:0;border-bottom:1px solid var(--line);padding:11px 2px;transition:.22s;border-radius:0}
.field select{cursor:pointer}
.field select option{background:var(--ink-2);color:var(--bone)}
.field input::placeholder,.field textarea::placeholder{color:rgba(148,136,119,.75)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--wheat)}
.field textarea{min-height:96px;resize:vertical}
.form-success{display:none;text-align:center;padding:clamp(28px,4vw,48px) 10px}
.form-success.show{display:block}
.form-success .tick{width:54px;height:54px;border-radius:50%;background:var(--clay);color:#fff;display:grid;place-items:center;margin:0 auto 20px;font-size:24px}
.form-success p{color:rgba(243,237,226,.72);max-width:44ch;margin:0 auto;font-size:15px}

/* ---------- gallery / map / info ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px)}
@media(max-width:860px){.gal{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gal{grid-template-columns:1fr}}
.gal-slot{aspect-ratio:4/3;border:1px dashed var(--line-dk);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:22px;background:rgba(19,17,16,.02)}
.dark .gal-slot{border-color:var(--line);background:rgba(243,237,226,.03)}
.gal-slot svg{color:var(--clay);opacity:.8}
.dark .gal-slot svg{color:var(--wheat)}
.gal-slot b{font-weight:700;font-size:13.5px;color:var(--ink)}
.dark .gal-slot b{color:var(--bone)}
.gal-slot span{font-size:12px;color:var(--muted);max-width:24ch}
.map-embed{border:1px solid var(--line-dk);border-radius:2px;overflow:hidden;background:var(--bone-2)}
.map-embed iframe{display:block;width:100%;height:clamp(290px,42vw,440px);border:0}
.info-list{list-style:none;margin-top:22px}
.info-list li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line-dk);font-size:15px;color:var(--body)}
.dark .info-list li{border-color:var(--line);color:rgba(243,237,226,.72)}
.info-list li .ic{color:var(--clay);flex:none;margin-top:3px}
.dark .info-list li .ic{color:var(--wheat)}
.info-list li b{color:var(--ink);display:block;margin-bottom:2px;font-weight:700}
.dark .info-list li b{color:var(--bone)}
.hours-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-dk);font-size:15px}
.dark .hours-row{border-color:var(--line)}
.hours-row dt{color:var(--body)}.dark .hours-row dt{color:rgba(243,237,226,.7)}
.hours-row dd{color:var(--ink);font-weight:700}.dark .hours-row dd{color:var(--bone)}
.hours-row.is-today dt,.hours-row.is-today dd{color:var(--clay)}
.dark .hours-row.is-today dt,.dark .hours-row.is-today dd{color:var(--wheat)}
.hours-row .now{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin-left:8px}
.area-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.area-list li{font-size:12.5px;font-weight:600;color:var(--body);border:1px solid var(--line-dk);border-radius:100px;padding:8px 15px}
.dark .area-list li{color:rgba(243,237,226,.7);border-color:var(--line)}

/* ---------- blocks ---------- */
.blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
@media(max-width:900px){.blocks{grid-template-columns:1fr}}
.block{border-top:2px solid var(--clay);padding-top:22px}
.dark .block{border-top-color:var(--wheat)}
.block h3{font-size:clamp(19px,2.1vw,25px);color:var(--ink);margin-bottom:10px}
.dark .block h3{color:var(--bone)}
.block p{font-size:14.5px;color:var(--body)}
.dark .block p{color:rgba(243,237,226,.68)}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;text-align:center;background:var(--ink);color:var(--bone)}
.cta::before{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(19,17,16,.88),rgba(19,17,16,.95)),
  radial-gradient(62% 92% at 50% 0%,rgba(168,72,42,.5),transparent 66%),
  url("hero.jpg") center/cover no-repeat}
.cta .wrap{position:relative;z-index:2}
.cta h2{color:var(--bone)}.cta h2 em{color:var(--clay-hi)}
.cta .lead{color:rgba(243,237,226,.8);margin:18px auto 0;max-width:52ch}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
.cta-tel{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(30px,5.4vw,62px);color:var(--bone);margin-top:8px;letter-spacing:-.03em}
.cta-tel:hover{color:var(--wheat)}

/* ---------- page header ---------- */
.phead{position:relative;overflow:hidden;padding:172px 0 clamp(54px,7vw,92px);background:var(--ink);color:var(--bone)}
.phead-bg{position:absolute;inset:0;z-index:0}
.phead-bg img,.phead-bg video{width:100%;height:100%;object-fit:cover;animation:kbh 25s ease-in-out infinite alternate}
@keyframes kbh{from{transform:scale(1.04) translate3d(-.8%,0,0)}to{transform:scale(1.13) translate3d(1%,-.9%,0)}}
.phead-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(19,17,16,.8) 0%,rgba(19,17,16,.5) 44%,rgba(19,17,16,.95) 100%),
  linear-gradient(112deg,rgba(19,17,16,.76) 0%,rgba(19,17,16,.14) 62%,transparent 100%)}
.phead::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(70% 108% at 22% 0%,rgba(168,72,42,.42),transparent 62%)}
.phead-in{position:relative;z-index:3;max-width:880px}
.phead h1{font-size:clamp(37px,6.3vw,86px);color:var(--bone);margin-top:14px;line-height:.98;letter-spacing:-.032em}
.phead h1 em{font-style:italic;color:var(--clay-hi)}
.phead p{margin-top:19px;max-width:58ch;color:rgba(243,237,226,.78)}
.crumb{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,237,226,.5)}
.crumb a:hover{color:var(--wheat)}

/* ---------- footer ---------- */
footer{background:var(--ink-2);color:rgba(243,237,226,.62);padding-top:clamp(54px,6vw,84px);position:relative;overflow:hidden}
.foot-word{font-family:var(--disp);font-style:italic;font-weight:600;font-size:clamp(44px,14vw,200px);line-height:.8;color:var(--bone);opacity:.045;text-align:center;white-space:nowrap;user-select:none;letter-spacing:-.03em}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-block:clamp(28px,3vw,46px)}
@media(max-width:960px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-top{grid-template-columns:1fr;gap:28px}}
.foot-brand p{color:rgba(243,237,226,.5);margin-top:14px;max-width:34ch;font-size:14.5px}
.foot-col h4{font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--wheat);margin-bottom:16px}
.foot-col a,.foot-col span{display:block;color:rgba(243,237,226,.58);font-size:14.5px;margin-bottom:10px;transition:color .2s}
.foot-col a:hover{color:var(--bone)}
.foot-bottom{border-top:1px solid var(--line);padding-block:22px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:12.5px;color:rgba(243,237,226,.4)}

/* ---------- mobile bar ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;box-shadow:0 -14px 32px rgba(19,17,16,.34)}
.mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;font-weight:700;font-size:13px}
.mbar .call{background:var(--ink);color:var(--bone)}
.mbar .menu{background:var(--clay);color:#fff}
@media(max-width:1080px){.mbar{display:flex}footer{padding-bottom:66px}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--wheat);outline-offset:3px}

body::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.03;
  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'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero-bg img,.hero-bg video,.phead-bg img,.phead-bg video{animation:none}
  body::after{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HIRING — added Aug 2026
   The band on the homepage, the jobs page, and the honeypot + error panel that
   make the Netlify forms honest.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ The honeypot must be reachable by a bot and invisible to a person.
   display:none would let some bots skip it; this moves it out of sight and
   out of the tab order without hiding it from the DOM. */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;
  overflow:hidden}

/* The error panel. Shown ONLY when a submit genuinely fails — never decorative. */
.form-error{display:none;border:1px solid rgba(226,122,56,.4);
  background:rgba(226,122,56,.08);padding:22px 24px;border-radius:4px;margin-top:18px}
.form-error.show{display:block}
.form-error h3{font-family:var(--display,inherit);font-size:19px;color:#F3EDE2;
  margin-bottom:8px}
.form-error p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.form-error a{color:#E27A38;border-bottom:1px solid currentColor}

/* ── the hiring band on the homepage ─────────────────────────────────────── */
.hiring{background:#1B1815;border-top:1px solid rgba(216,174,94,.20);
  border-bottom:1px solid rgba(216,174,94,.20);padding:clamp(34px,4.4vw,54px) 0}
.hiring-in{display:flex;align-items:center;gap:clamp(20px,3vw,48px);flex-wrap:wrap}
.hiring-txt{flex:1 1 420px;min-width:0}
.hiring-txt h2{font-size:clamp(22px,2.6vw,31px);line-height:1.15;color:#F3EDE2;
  margin-top:12px}
.hiring-txt h2 em{font-style:normal;color:#E27A38}
.hiring-txt p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--muted);
  max-width:62ch}
.hiring-act{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;
  align-items:flex-start}
.hiring-act .sm{font-size:12.5px;color:var(--muted)}
@media(max-width:720px){
  .hiring-act{width:100%}
  .hiring-act .btn{width:100%;justify-content:center}
}

/* ── jobs page ───────────────────────────────────────────────────────────── */
.jobs-grid{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2vw,26px);margin-top:clamp(30px,4vw,46px)}
@media(max-width:760px){.jobs-grid{grid-template-columns:1fr}}
.job-card{border:1px solid rgba(19,17,16,.14);padding:clamp(20px,2.2vw,28px);
  background:rgba(255,255,255,.5);border-radius:3px}
.job-card h3{font-size:18px;line-height:1.25;margin-bottom:10px}
.job-card p{font-size:15px;line-height:1.62;color:var(--muted)}

.jobs-apply{display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(26px,3.6vw,64px);align-items:start}
@media(max-width:900px){.jobs-apply{grid-template-columns:1fr}}
.jobs-facts{list-style:none;margin-top:30px;display:flex;flex-direction:column;
  gap:16px}
.jobs-facts li{display:flex;gap:14px;align-items:flex-start}
.jobs-facts .ic{flex:none;font-size:17px;line-height:1.4}
.jobs-facts span b{display:block;color:#F3EDE2;font-size:15.5px;margin-bottom:2px}
.jobs-facts span{font-size:14px;line-height:1.55;color:var(--muted)}
.jobs-facts a{color:#E27A38}

/* ── chips ────────────────────────────────────────────────────────────────
   ⚠️ These were used on the contact form from day one and NEVER styled — they
   rendered as raw default buttons with no visible selected state, so the
   "anything that applies" toggles looked broken and told the user nothing.
   They sit inside .form-card (--ink-2), so these are dark-ground values:
   idle 8.1:1, selected white-on-clay 5.8:1. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{font-family:var(--sans);font-size:12.5px;font-weight:600;
  color:rgba(243,237,226,.72);background:transparent;border:1px solid var(--line);
  border-radius:100px;padding:8px 14px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.chip:hover{border-color:var(--wheat);color:var(--bone)}
.chip.on{background:var(--clay);border-color:var(--clay);color:#fff}
.chip.on:hover{background:var(--clay-2);border-color:var(--clay-2)}

/* ── Rhoda's work ─────────────────────────────────────────────────────────
   A strip of RJD Visual Art Studio pieces inside THE MURAL section, so the
   wall and the artist who painted it stay one idea rather than two. Sits on
   .dark, so these are dark-ground values. */
.art-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(30px,3.6vw,48px)}
@media(max-width:860px){.art-strip{grid-template-columns:repeat(2,1fr)}}
.art{margin:0}
.art img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line);
  border-radius:2px;display:block;transition:transform .5s var(--ease)}
.art:hover img{transform:scale(1.02)}
.art figcaption{margin-top:11px;font-size:13px;line-height:1.4;color:var(--bone)}
.art figcaption span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.art-note{margin-top:clamp(22px,2.6vw,32px);font-size:14.5px;line-height:1.6;
  color:rgba(243,237,226,.62);max-width:70ch}
.art-note a{color:var(--wheat);border-bottom:1px solid rgba(216,174,94,.45)}
.art-note a:hover{color:var(--wheat-hi);border-bottom-color:var(--wheat-hi)}

/* ---------- THE CREW ----------
   Rhoda asked for the staff to be prominent. Nobody is named — she was clear
   that Ashley does not like being talked about and was unsure about the rest,
   so this is written to carry weight without putting anyone on the internet
   who has not agreed to it. */
.crew-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(240,236,228,.16);
  border:1px solid rgba(240,236,228,.16);margin-top:clamp(28px,4vw,44px)}
@media(max-width:860px){.crew-grid{grid-template-columns:1fr}}
.crew-card{background:#1b1714;padding:clamp(22px,2.8vw,34px)}
.crew-card h3{font-family:var(--disp,Georgia,serif);font-weight:400;font-size:clamp(20px,2.2vw,26px);
  color:#F2EDE4;letter-spacing:-.01em}
.crew-card p{margin-top:11px;font-size:15px;line-height:1.62;color:#C6BCAE}
.crew-note{margin-top:clamp(22px,3vw,32px);padding-left:18px;border-left:2px solid var(--ember,#C4642B);
  font-size:15.5px;line-height:1.65;color:#D9D0C4;max-width:70ch}

/* ---------- CLOSED BANNER ----------
   Injected by site.js when status.json says closed. Sits above everything,
   including the fixed header, because it is the one thing a customer driving
   80 miles needs to see before anything else. */
.closed-bar{position:relative;z-index:200;background:#8E2A1B;color:#FFF6F2;
  padding:13px clamp(18px,4vw,52px);display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 14px;font-size:15px;line-height:1.45;text-align:left}
.closed-bar b{font-weight:700;letter-spacing:.01em}
.closed-bar span{opacity:.94}
/* .nav is position:fixed at top:0, so the banner sat on top of the logo.
   The banner is in normal flow at the top of <body>, so the fixed nav has to
   be pushed down by exactly its height — measured by site.js, since the
   message can wrap to two lines on a phone. */
body.has-closed-bar .nav{top:var(--closed-bar-h,52px)}
@media(max-width:640px){.closed-bar{font-size:14.5px;padding:12px 18px}}

/* ---------- ghost buttons on photographic headers ----------
   ⚠️ .phead paints a dark photograph but carries no dark-ground class, so
   .btn--ghost was rendering in its light-ground colour — rgb(19,17,16) on a
   ground of luminance 0.019, which measures 1.23:1. It was effectively
   invisible on jobs.html as well as the new back-room page; this was a live
   bug, not something the new page introduced. */
.phead .btn--ghost{color:var(--bone);box-shadow:inset 0 0 0 1.5px rgba(243,237,226,.42)}
.phead .btn--ghost:hover{background:var(--bone);color:var(--ink,#131110);
  box-shadow:inset 0 0 0 1.5px var(--bone)}