:root{
  color-scheme: light;
  --orange:#E0700F;
  --orange-lt:#FF8C2B;
  --orange-deep:#C43F1F;
  --orange-wash:#FFF1E3;
  --ink:#1E1613;
  --ink-2:#3A2E29;
  --gray:#7A6C66;
  --line:#EFE3D9;
  --line-2:#E3D4C7;
  --cream:#FFFBF7;
  --card:#FFFFFF;
  /* kraft — the tag stock. lifted from the handwritten tags on every
     guitar and drill in their own photos. */
  --kraft:#EFE1C4;
  --kraft-2:#DFCCA4;
  --kraft-edge:#C0A87C;
  --kraft-ink:#5C4830;
  --shadow:0 1px 2px rgba(30,22,19,.04), 0 8px 24px -10px rgba(30,22,19,.14);
  --shadow-lg:0 2px 6px rgba(30,22,19,.05), 0 24px 56px -18px rgba(30,22,19,.22);
  --r:16px;
  --max:1180px;
  --f:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --f-tag:"Bahnschrift","Archivo Narrow","Arial Narrow","Franklin Gothic Medium",var(--f);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f);background:var(--cream);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden;
}
img{max-width:100%;display:block}
/* never let a width attribute fight a css height */
.logo{width:auto;height:auto}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-deep)}
.lede{font-size:19px;color:var(--gray);line-height:1.65}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:999px;border:0;
  font-family:var(--f);font-size:15px;font-weight:800;letter-spacing:-.01em;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, background .16s, border-color .16s;
}
.btn:active{transform:translateY(1px) scale(.99)}
/* Deeper than the brand orange ON PURPOSE. The old ramp ran --orange-lt ->
   --orange-deep, and the label sat around #E0700F = 3.2:1 against white — under
   the 4.5:1 that 15px text needs, which is why it was hard to read. Every stop
   here clears 4.6:1. Same fix as the awards band, and now they match. */
.btn-primary{
  background:linear-gradient(165deg,#C74E14,#BE4318 48%,#B03318);
  color:#fff;box-shadow:0 2px 0 rgba(120,40,12,.34), 0 12px 26px -10px rgba(190,67,24,.75);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 0 rgba(120,40,12,.3), 0 20px 38px -12px rgba(190,67,24,.85)}
.btn-outline{background:#fff;color:var(--ink);border:1.5px solid var(--line-2);box-shadow:var(--shadow)}
.btn-outline:hover{border-color:var(--orange);color:var(--orange-deep);transform:translateY(-2px)}
.btn-sm{padding:11px 18px;font-size:13.5px}
.btn-xs{padding:8px 14px;font-size:12.5px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:200;background:rgba(255,251,247,.85);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
header.stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px -14px rgba(30,22,19,.24)}
/* mobile only — JS never adds .hide above 980px */
header.hide{transform:translateY(-100%)}

/* ---------- sticky call bar (mobile) ----------
   Inverse of the header: appears while scrolling DOWN (when the header has
   slid away and the phone number would otherwise be out of reach), hides on
   the way back up because the header is returning with it. */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:190;
  display:none;gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line-2);
  box-shadow:0 -8px 26px -12px rgba(30,22,19,.4);
  transform:translateY(115%);visibility:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), visibility .3s;
}
.callbar.on{transform:none;visibility:visible}
.callbar .btn{flex:1;justify-content:center;padding:14px 10px;font-size:14.5px}
@media(max-width:980px){ .callbar{display:flex} }
.nav{display:flex;align-items:center;gap:20px;height:74px}
.nav .logo{height:46px;width:auto;cursor:pointer}
.nav-links{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav-links a{
  padding:9px 13px;border-radius:9px;text-decoration:none;
  font-size:14.5px;font-weight:650;color:var(--ink-2);transition:background .15s,color .15s;
}
.nav-links a:hover,.nav-links a.on{background:var(--orange-wash);color:var(--orange-deep)}
.nav-cta{display:flex;align-items:center;gap:11px}
.nav-phone{font-weight:850;font-size:15.5px;text-decoration:none;letter-spacing:-.02em;display:flex;align-items:center;gap:7px}
.nav-phone:hover{color:var(--orange-deep)}

/* dropdown */
.dd{position:relative}
.dd-btn{
  display:flex;align-items:center;gap:5px;padding:9px 13px;border-radius:9px;border:0;background:none;
  font-family:var(--f);font-size:14.5px;font-weight:650;color:var(--ink-2);cursor:pointer;
  transition:background .15s,color .15s;
}
.dd:hover .dd-btn,.dd-btn.on{background:var(--orange-wash);color:var(--orange-deep)}
.dd-btn svg{transition:transform .2s}
.dd:hover .dd-btn svg{transform:rotate(180deg)}
.dd-menu{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);
  padding:7px;min-width:236px;opacity:0;visibility:hidden;transition:all .18s cubic-bezier(.2,.8,.2,1);
}
.dd:hover .dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd-menu a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;
  font-size:14px;font-weight:650;text-decoration:none;color:var(--ink-2);transition:background .13s;
}
.dd-menu a:hover{background:var(--orange-wash);color:var(--orange-deep)}
.dd-menu .sw{width:8px;height:8px;border-radius:3px;background:var(--orange);flex:0 0 auto;opacity:.55}

/* burger */
.burger{
  display:none;width:42px;height:42px;border-radius:11px;padding:0;flex:0 0 auto;
  border:1px solid var(--line-2);background:#fff;cursor:pointer;box-shadow:var(--shadow);
  flex-direction:column;align-items:center;justify-content:center;
}
.burger:hover{border-color:var(--orange)}
.burger i{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s}
.burger i+i{margin-top:4px}
.burger.on i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mobile menu panel */
.mnav{
  position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 26px 50px -26px rgba(30,22,19,.45);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1), visibility .22s;
  max-height:calc(100vh - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mnav.on{opacity:1;visibility:visible;transform:none}
.mnav-in{padding:16px 24px 24px;display:flex;flex-direction:column}
.mnav-in > .status{align-self:flex-start;margin-bottom:6px}
/* :not(.btn) matters. This rule is (0,1,1) and .btn-primary is (0,1,0), so
   without it the menu's link colour — var(--ink), near-black — beat the
   button's white and painted the Call button's label black on orange. It was
   also overriding the button's padding, size and weight, and adding a border. */
.mnav a:not(.btn){
  padding:14px 2px;border-bottom:1px solid var(--line);text-decoration:none;
  font-size:16.5px;font-weight:750;letter-spacing:-.02em;display:flex;align-items:center;
  justify-content:space-between;gap:10px;color:var(--ink);
}
.mnav a:not(.btn):active{color:var(--orange-deep)}
.mnav a.sub{font-size:15.5px;font-weight:650;color:var(--ink-2);padding-left:18px;position:relative}
.mnav a.sub::before{
  content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:2.5px;background:var(--orange);opacity:.5;
}
.mnav-sec{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);padding:20px 0 6px}
/* Shop collapses — six category links is most of the menu's height otherwise */
.mnav-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:14px 2px;border:0;border-bottom:1px solid var(--line);background:none;
  font-family:var(--f);font-size:16.5px;font-weight:750;letter-spacing:-.02em;
  color:var(--ink);cursor:pointer;text-align:left;
}
.mnav-toggle .chev{transition:transform .28s cubic-bezier(.2,.8,.2,1);flex:0 0 auto;color:var(--gray)}
.mnav-toggle[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--orange-deep)}
.mnav-toggle[aria-expanded="true"]{color:var(--orange-deep)}
.mnav-sub{
  max-height:0;overflow:hidden;
  transition:max-height .32s cubic-bezier(.2,.8,.2,1);
}
.mnav-sub.on{max-height:420px}
.mnav-cta{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.mnav-cta .btn{justify-content:center;width:100%}
@media(min-width:981px){.mnav{display:none}}

/* live status pill */
.status{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border-radius:999px;
  font-size:12.5px;font-weight:800;letter-spacing:-.01em;border:1px solid var(--line-2);background:#fff;
}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.status [data-status-short]{display:none}
.status.open .dot{background:#17A34A;box-shadow:0 0 0 0 rgba(23,163,74,.55);animation:pulse 2.2s infinite}
.status.open{color:#0F7A38;border-color:#B6E6C8;background:#F1FBF4}
.status.closed .dot{background:#B9ABA3}
.status.closed{color:var(--gray)}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(23,163,74,0)}100%{box-shadow:0 0 0 0 rgba(23,163,74,0)}}

/* ---------- sections ---------- */
section{padding:88px 0}
.sec-head{max-width:64ch;margin-bottom:44px}
.sec-head.mid{text-align:center;margin-left:auto;margin-right:auto}
.sec-head h2{font-size:clamp(30px,4.2vw,46px);font-weight:900;letter-spacing:-.035em;line-height:1.04;margin:12px 0 16px;text-wrap:balance}
.sec-head p{font-size:18px;color:var(--gray)}
.bg-white{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- THE TAG — shared motif ---------- */
.tag{
  position:relative;display:inline-flex;flex-direction:column;justify-content:center;
  background:linear-gradient(158deg,#F6EBD3 0%, var(--kraft) 42%, var(--kraft-2) 100%);
  border:1px solid var(--kraft-edge);
  border-radius:3px 10px 10px 3px;
  padding:8px 14px 8px 24px;
  color:var(--kraft-ink);font-family:var(--f-tag);
  box-shadow:0 8px 20px -9px rgba(50,34,16,.7), inset 0 1px 0 rgba(255,255,255,.65);
}
/* the punched string hole */
.tag::before{
  content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;
  background:var(--cream);
  border:1px solid #A98F62;
  box-shadow:inset 0 1px 2px rgba(60,40,15,.55);
}

/* ---------- CTA band (shared — used by every category page) ---------- */
.ctaband{
  background:var(--orange-wash);border:1px solid #F7D9B6;border-radius:22px;
  padding:44px 40px;display:flex;align-items:center;gap:32px;flex-wrap:wrap;justify-content:space-between;
}
.ctaband h3{font-size:clamp(24px,3vw,33px);font-weight:900;letter-spacing:-.035em;line-height:1.1;max-width:20ch;text-wrap:balance}
.ctaband p{color:var(--gray);font-size:16px;margin-top:9px;max-width:44ch}
.ctaband-btns{display:flex;gap:11px;flex-wrap:wrap}

/* ---------- address / hours block (shared: homepage band + /contact/) ----------
   Base is light-on-white. The dark homepage band overrides the colours. */
.info{display:flex;flex-direction:column;margin-bottom:24px}
.info-row{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.info-row:last-child{border-bottom:0}
.info-ico{
  width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--orange-wash);border:1px solid #F7D9B6;
}
.info-row b{
  display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray);font-weight:800;margin-bottom:2px;
}
.info-row div > span,.info-row div > a{font-size:15.5px;font-weight:650;color:var(--ink);text-decoration:none}
.info-row div > a:hover{color:var(--orange-deep)}
.hours-t{width:100%;font-size:14.5px}
.hours-t tr td{padding:3px 0;color:var(--gray)}
.hours-t tr td:last-child{text-align:right;font-weight:700;color:var(--ink-2)}
.hours-t tr.today td,.hours-t tr.today td:last-child{color:var(--orange-deep);font-weight:800}

/* ---------- category page ---------- */
.cat-hero{padding:44px 0 0}
.crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:650;color:var(--gray);margin-bottom:22px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--orange-deep)}
.cat-hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.cat-hero h1{font-size:clamp(34px,4.6vw,54px);font-weight:900;letter-spacing:-.04em;line-height:1.02;margin:12px 0 18px;text-wrap:balance}
.cat-hero .lede{margin-bottom:26px}
.cat-shot{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line-2);aspect-ratio:4/3}
.cat-shot img{width:100%;height:100%;object-fit:cover}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 28px}
.panel h3{font-size:18px;font-weight:850;letter-spacing:-.02em;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.panel ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.panel li{display:flex;gap:10px;font-size:15.3px;color:var(--ink-2);align-items:flex-start}
.panel li svg{flex:0 0 auto;margin-top:5px}
.tick{color:var(--orange)}
.note{background:var(--orange-wash);border:1px solid #F7D9B6;border-radius:14px;padding:18px 20px;font-size:14.6px;color:var(--ink-2);margin-top:20px;line-height:1.6}
.note b{font-weight:800}

/* ---------- gallery ---------- */
.gal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.gal-head h2{font-size:clamp(26px,3.4vw,38px);font-weight:900;letter-spacing:-.035em;line-height:1.05;margin-bottom:8px}
.gal-head p{color:var(--gray);font-size:15.5px}
.gal-tools{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal-item{
  position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow);cursor:zoom-in;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.gal-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.gal-item img{width:100%;height:100%;object-fit:cover}
.gal-del{
  position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(30,22,19,.72);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);
  opacity:1;transform:none;transition:background .18s;z-index:2;   /* always visible: no hover on touch */
}
.gal-del:hover{background:#C4281F}
/* ---------- gallery caption / title ----------
   Visible to everyone when set; an editable field in owner mode. The scrim is
   the caption element's OWN background and the text is its child, so the text
   always paints above the scrim — the visit-section paint-order bug can't recur
   here. Single line + ellipsis keeps the text in the strong part of the fade,
   where white clears 4.5:1 over any photo. */
.gal-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:26px 12px 10px;
  background:linear-gradient(to top, rgba(20,14,12,.86) 0%, rgba(20,14,12,.6) 55%, rgba(20,14,12,0) 100%);
  color:#fff;font-size:13px;font-weight:650;line-height:1.3;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;                 /* a visitor caption never eats the tile's zoom click */
}
.gal-cap-edit{padding:24px 10px 10px;pointer-events:auto}
.gal-cap-edit input{
  width:100%;box-sizing:border-box;cursor:text;
  /* near-solid ink, not translucent white — a see-through field over a bright
     photo put the typed text at 3.2:1. This is white on ~#1E1613 = 13:1. */
  border:1px solid rgba(255,255,255,.3);background:rgba(20,14,12,.9);
  color:#fff;font-family:var(--f);font-size:13px;font-weight:650;
  padding:7px 9px;border-radius:8px;backdrop-filter:blur(4px);
}
.gal-cap-edit input::placeholder{color:rgba(255,255,255,.78);font-weight:600}
.gal-cap-edit input:focus{outline:0;background:rgba(20,14,12,.95);border-color:var(--orange-lt)}
.gal-add{
  border:2px dashed var(--line-2);border-radius:14px;aspect-ratio:1;background:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  color:var(--gray);font-family:var(--f);font-size:13.5px;font-weight:750;
  transition:all .18s;text-align:center;padding:12px;
}
.gal-add:hover{border-color:var(--orange);color:var(--orange-deep);background:var(--orange-wash)}
.gal-add.drag{border-color:var(--orange);background:var(--orange-wash);color:var(--orange-deep)}
.owner-bar{
  display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:12px;
  background:#fff;border:1px solid var(--line);font-size:13.5px;color:var(--gray);margin-top:18px;
}
.owner-bar b{color:var(--ink-2);font-weight:800}
.owner-bar .badge{background:var(--orange-wash);color:var(--orange-deep);padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:800;border:1px solid #F7D9B6}

/* lightbox */
.lb{position:fixed;inset:0;z-index:500;background:rgba(20,14,12,.92);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:40px}
.lb.on{display:flex}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%}
.lb img{max-width:100%;max-height:82vh;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.lb-cap{color:#fff;font-size:15px;font-weight:650;letter-spacing:-.01em;text-align:center;max-width:64ch;line-height:1.4}
.lb-x{position:absolute;top:22px;right:22px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;backdrop-filter:blur(8px)}
.lb-x:hover{background:rgba(255,255,255,.28)}

/* ---------- owner mode (Firebase) ----------
   Never rendered for a normal visitor: owner.js only builds these once
   Firebase Auth has returned a token for Rob's uid. */
/* Owner mode takes over the bottom of the screen: the sticky call bar hides,
   and this becomes the one bottom bar — full width, not a floating pill that
   collided with the call bar. */
body.fhs-owner .callbar{display:none!important}
body.fhs-owner{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
.ownerbar{
  position:fixed;left:0;right:0;bottom:0;z-index:400;
  display:flex;align-items:center;gap:12px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(30,22,19,.97);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -8px 26px -12px rgba(0,0,0,.55);
  color:#fff;font-size:13px;font-weight:650;
}
.ownerbar .badge{
  background:var(--orange);color:#fff;border:0;
  padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;flex:0 0 auto;
}
.ownerbar-msg{flex:1;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ownerbar.busy .ownerbar-msg{opacity:1;color:var(--orange-lt)}
.ownerbar .btn{flex:0 0 auto}
@media(max-width:520px){
  .ownerbar{font-size:12px;gap:9px}
  .ownerbar-msg{display:none}   /* badge + Sign out only on the narrowest phones */
}
.ownerlogin{
  position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(20,14,12,.72);backdrop-filter:blur(6px);
}
.ownerlogin-box{
  width:100%;max-width:340px;background:#fff;border-radius:18px;padding:26px 24px;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:11px;
}
.ownerlogin-box b{font-size:18px;font-weight:850;letter-spacing:-.02em;margin-bottom:2px}
.ownerlogin-box input{
  padding:12px 14px;border-radius:11px;border:1.5px solid var(--line-2);
  font-family:var(--f);font-size:15px;font-weight:600;color:var(--ink);background:#fff;
}
.ownerlogin-box input:focus{outline:0;border-color:var(--orange)}
.ownerlogin-err{color:#C4281F;font-size:13px;font-weight:650}
.ownerlogin-err.ok{color:#17803A}   /* reset-sent confirmation, not an error */
.ownerlogin-forgot{
  align-self:center;margin-top:10px;background:none;border:0;cursor:pointer;
  font-family:var(--f);font-size:12.5px;font-weight:700;color:var(--gray);
  text-decoration:underline;text-underline-offset:2px;padding:4px;
}
.ownerlogin-forgot:hover{color:var(--orange-deep)}
.ownerlogin-btns{display:flex;gap:9px;margin-top:4px}
.ownerlogin-btns .btn{flex:1;justify-content:center}
/* the knock target — no hint that it does anything */
footer .logo{cursor:default;-webkit-user-select:none;user-select:none}

/* ---------- footer ---------- */
footer{background:#fff;border-top:1px solid var(--line);color:var(--gray);padding:56px 0 30px;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.f-grid .logo{height:72px;width:auto;margin-bottom:18px}
.f-grid h4{color:var(--ink);font-size:12px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px;font-weight:800}
.f-grid ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.f-grid a{text-decoration:none;transition:color .15s}
.f-grid a:hover{color:var(--orange-deep)}
.f-blurb{max-width:34ch;line-height:1.6}
/* the address is two lines and the phone is bold — inside the link <ul> they
   broke its 9px rhythm. They are contact info, not navigation. */
.f-addr{font-style:normal;display:flex;flex-direction:column;gap:9px;margin-top:14px}
.f-addr a{line-height:1.55}
.f-tel{font-weight:750;color:var(--ink)}
/* dt/dd auto-place into two auto-width columns, so every time starts on the
   same x no matter how long the day is. The old &nbsp;-padded <li> could not
   line up by construction — that was the "uneven". */
.f-hrs{display:grid;grid-template-columns:auto auto;gap:9px 14px;justify-content:start}
.f-hrs dt{color:var(--ink);font-weight:700;white-space:nowrap}
.f-hrs dd{white-space:nowrap}
.f-bot{display:flex;justify-content:space-between;gap:20px;padding-top:24px;flex-wrap:wrap;font-size:13px}
.socials{display:flex;gap:9px;margin-top:18px}
.socials a{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--cream);border:1px solid var(--line);transition:all .18s;color:var(--ink-2)}
.socials a:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-2px)}

/* ---------- pawn loans ---------- */
/* the two hero/CTA buttons sit side by side as equal halves. On a phone
   "Call (559) 264-5856" is too wide to share a row, so <=560px the labels drop
   to short forms — the tap still dials the number, which is also in the sticky
   bar and footer. Mirrors the homepage hero. */
.btn-pair{display:flex;gap:11px;flex-wrap:wrap}
.btn-pair .b-mini{display:none}
@media(max-width:640px){
  /* width:100% matters for the CTA band: there the button row is a shrink-to-
     fit flex item, so flex:1 had no spare width to equalise into and 'Call'
     collapsed to a disc. Full width gives the two halves room. */
  .btn-pair{flex-wrap:nowrap;gap:10px;width:100%}
  /* the Visit-Us social band has THREE buttons — eBay full width on top,
     Facebook + Instagram as equal halves below, instead of an awkward wrap. */
  .social-band{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .social-band > :first-child{grid-column:1/-1}
  .social-band .btn{justify-content:center}
  .btn-pair .btn{flex:1;justify-content:center;padding-left:14px;padding-right:14px}
}
@media(max-width:560px){
  .btn-pair .b-full{display:none}
  .btn-pair .b-mini{display:inline}
}

/* No hero photo, deliberately. Every image they own is inventory or a frame of
   the shop tour; there is no honest picture of a loan, and a page whose whole
   argument is "we are straight with you" can't open on a stock handshake. */
.loans-hero{padding:52px 0 72px}
.loans-hero-in{max-width:78ch}
.loans-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-bottom:8px}
.loans-hero-copy{min-width:0}
.loans-hero-shot{
  border-radius:20px;overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line-2);box-shadow:var(--shadow-lg);
}
.loans-hero-shot img{width:100%;height:100%;object-fit:cover;display:block}
.loans-hero h1{font-size:clamp(36px,5.4vw,62px);font-weight:900;letter-spacing:-.045em;line-height:1.01;margin:12px 0 20px;text-wrap:balance;max-width:15ch}
.loans-hero .lede{max-width:56ch;margin-bottom:28px}
.loans-facts{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border-top:1px solid var(--line-2)}
.loans-facts > div{flex:1 1 210px;padding:22px 28px 0 0}
.loans-facts b{display:block;font-size:15.5px;font-weight:850;letter-spacing:-.02em;color:var(--ink);margin-bottom:5px}
.loans-facts span{font-size:14px;color:var(--gray);line-height:1.55;display:block;max-width:34ch}

/* the four steps */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.steps li{counter-increment:s;padding-top:54px;position:relative}
.steps li::before{
  content:counter(s);position:absolute;top:0;left:0;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--orange-wash);border:1px solid #F7D9B6;
  color:var(--orange-deep);font-weight:900;font-size:15px;
}
.steps h3{font-size:17.5px;font-weight:850;letter-spacing:-.025em;margin-bottom:8px}
.steps p{font-size:14.8px;color:var(--gray);line-height:1.62}

/* the section that matters — dark, because it is the one thing to read */
.loans-key{background:#1E1613;border-radius:22px;padding:clamp(30px,4.4vw,56px);color:#fff}
.loans-key .eyebrow{color:var(--orange-lt)}
.loans-key h2{font-size:clamp(27px,3.4vw,42px);font-weight:900;letter-spacing:-.038em;line-height:1.06;margin:12px 0 20px;text-wrap:balance;max-width:22ch}
.loans-key p{color:rgba(255,255,255,.8);font-size:16.5px;line-height:1.68;max-width:64ch}
.loans-key p + p{margin-top:15px}
.loans-key b{color:#fff;font-weight:750}

/* what we lend on */
.lend-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lend-cat{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:18px 20px;border-radius:13px;background:var(--cream);
  border:1px solid var(--line-2);text-decoration:none;
  font-size:15.5px;font-weight:750;letter-spacing:-.015em;color:var(--ink);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.lend-cat svg{color:var(--orange-deep);flex:0 0 auto}
.lend-cat:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:var(--shadow)}

/* ---------- FSC callout + FAQ (firearms) ---------- */
.fsc-callout{
  display:flex;gap:22px;align-items:center;
  background:linear-gradient(150deg,#FBF4E4,var(--kraft) 130%);
  border:1px solid var(--kraft-edge);border-radius:20px;padding:26px 30px;box-shadow:var(--shadow);
}
.fsc-badge{
  flex:0 0 auto;width:66px;height:66px;border-radius:16px;display:grid;place-items:center;
  background:var(--ink);color:var(--kraft);font-family:var(--f-tag);font-weight:800;font-size:22px;
  letter-spacing:.02em;box-shadow:0 8px 18px -7px rgba(30,22,19,.7);
}
.fsc-copy h3{font-size:clamp(19px,2.4vw,24px);font-weight:900;letter-spacing:-.03em;margin-bottom:6px;color:var(--ink)}
.fsc-copy p{font-size:15.3px;color:var(--kraft-ink);line-height:1.6}
.fsc-foot{margin-top:8px;font-weight:700}
.fsc-foot a{color:var(--orange-deep);text-decoration:none;white-space:nowrap}
.fsc-foot a:hover{text-decoration:underline}

.faq{max-width:820px}
.faq-item{
  border:1px solid var(--line-2);border-radius:14px;background:#fff;
  margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow);
}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;font-size:16.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-chev{flex:0 0 auto;color:var(--orange-deep);transition:transform .2s}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-a{padding:0 22px 20px;font-size:15.3px;color:var(--ink-2);line-height:1.65;max-width:70ch}
.faq-a a{color:var(--orange-deep)}
.faq-note{max-width:820px;margin-top:22px;font-size:13.2px;color:var(--gray);line-height:1.6}
.faq-note a{color:var(--orange-deep)}
@media(max-width:640px){
  .fsc-callout{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
  .faq-item summary{padding:16px 18px;font-size:15.5px}
  .faq-a{padding:0 18px 18px}
}

/* ---------- reveal / routing ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.page{display:none}
.page.on{display:block}

/* ---------- shared responsive ---------- */
@media(max-width:980px){
  .cat-hero-grid,.two-col{grid-template-columns:1fr}
  /* shop pages lead with the photo on mobile: pull the image column above the
     text so the first thing you see is the picture, not the heading. Scoped to
     .shop-hero, so Our Story (same grid) is untouched. */
  .shop-hero > :last-child{order:-1}
  .shop-hero .cat-shot{aspect-ratio:16/10}
  /* Our Story + Visit heroes lead with their photo too. Reorder only — no
     16/10 crop, so Rob's head (story) and the wide storefront (visit, 2/1)
     keep their framing. */
  .img-lead > :last-child{order:-1}
  .steps{grid-template-columns:1fr 1fr;gap:26px 20px}
  .lend-cats{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:repeat(3,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
  /* On desktop the nav links give the header shape. On mobile there is only a
     logo and two buttons, and the header background is literally the page
     background (cream on cream, 1.00:1) with a transparent border until you
     scroll — so it reads as nothing at all. Make it a real bar: opaque, always
     bordered, always shadowed. */
  header{
    background:#fff;
    backdrop-filter:none;                 /* opaque now — drop the blur cost */
    border-bottom:1px solid var(--line-2);
    box-shadow:0 2px 12px -6px rgba(30,22,19,.22);
  }
  header.stuck{
    border-bottom-color:var(--line-2);
    box-shadow:0 8px 22px -10px rgba(30,22,19,.32);
  }
  .nav{height:72px;gap:12px}
  .nav .logo{height:52px}
  .nav-links{display:none}
  .burger{display:flex}
  /* calling lives in the sticky bar at the bottom now. The header keeps the
     live open/closed pill next to the logo — it's the most useful thing there
     and it was wasted inside the menu. */
  .nav-cta{display:flex;margin-left:auto;gap:8px}
  .nav-cta .nav-phone,.nav-cta .btn{display:none}
  .nav-cta .status{
    display:inline-flex;font-size:11.5px;
    padding:5px 11px 5px 8px;gap:6px;
  }
  .nav-cta .dot{width:7px;height:7px}
  /* the bar overlaps the last of the footer when you stop at the bottom —
     keep the footer's own white extending under it rather than leaving a gap */
  footer{padding-bottom:calc(30px + 76px)}
}
@media(max-width:640px){
  section{padding:60px 0}
  .loans-hero{padding-bottom:52px}
  .loans-hero-grid{grid-template-columns:1fr;gap:24px}
  .loans-hero-shot{order:-1;aspect-ratio:16/10}   /* image leads on mobile */
  /* timeline rows: the number sat ABOVE each heading (54px top padding) which
     made every step a tall, half-empty block. Beside the heading it's compact
     and the copy uses the full width. Same fix as the homepage counter steps. */
  .steps{grid-template-columns:1fr;gap:26px}
  .steps li{
    padding-top:0;
    display:grid;grid-template-columns:auto 1fr;column-gap:15px;align-items:center;
  }
  .steps li::before{position:static;grid-column:1;grid-row:1}
  .steps h3{grid-column:2;grid-row:1;margin-bottom:0}
  .steps p{grid-column:2;grid-row:2;margin-top:6px}
  .lend-cats{grid-template-columns:1fr}
  /* the flex basis would leave a lone orphan column; one per row reads better */
  .loans-facts > div{flex:1 1 100%;padding:18px 0;border-bottom:1px solid var(--line)}
  .loans-facts > div:last-child{border-bottom:0;padding-bottom:0}
  .loans-facts span{max-width:none}
  .gal{grid-template-columns:repeat(2,1fr)}
  .ctaband{padding:32px 24px}

  /* ---- footer, phones ----
     Collapsing the desktop columns into one left-aligned stack gave 14 ragged
     rows with no rhythm and a logo marooned against a wall of white. Centred
     bands with rules between them do the job the grid does on desktop. */
  .f-grid{grid-template-columns:1fr;gap:0;padding-bottom:0;border-bottom:0;text-align:center}
  .f-grid > *{padding:26px 0;border-top:1px solid var(--line)}
  .f-brand{padding-top:0;border-top:0}
  .f-brand .logo{margin:0 auto 16px}
  .f-blurb{margin:0 auto;max-width:30ch}
  .socials{justify-content:center}
  .f-grid h4{margin-bottom:15px}
  /* when, then where — hours next to the shop links, address last */
  .f-hours{order:3}
  .f-visit{order:4}
  /* Plain links, same as Visit. Chips were here to buy back height; they read
     as tacky and height was never the complaint. Consistency is the point. */
  .f-shop ul,.f-visit ul{align-items:center}
  .f-addr{align-items:center}
  .f-hrs{justify-content:center;column-gap:18px}
  .f-hrs dt{text-align:right}
  .f-hrs dd{text-align:left}
  .f-bot{
    flex-direction:column;align-items:center;text-align:center;gap:7px;
    border-top:1px solid var(--line);
  }
}
@media(max-width:390px){
  /* header budget at 375px: logo 103 + pill + burger 42 + gaps 24 + padding 48.
     That leaves ~158px, and "Opens tomorrow 10am" overruns it. */
  .nav .logo{height:46px}
  /* header ONLY: the nav pill is space-constrained at 375px, so swap to the
     short label there. Scoped to header so the full-width Visit-Us hero pill
     keeps its full text instead of collapsing to an empty capsule. */
  header .status [data-status-txt]{display:none}
  header .status [data-status-short]{display:inline}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ================= HOMEPAGE ================= */

/* ---------- hero: asymmetric, photo bleeds off the right edge ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;min-height:min(78vh,660px)}
.hero-l{padding:72px 0}
.kicker{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 9px;border-radius:999px;
  background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow);
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--gray);
}
.kicker b{background:var(--orange);color:#fff;padding:3px 9px;border-radius:999px;font-size:10.5px;letter-spacing:.08em}
.hero h1{
  font-size:clamp(46px,5.6vw,78px);font-weight:900;letter-spacing:-.045em;line-height:.92;
  margin:24px 0 0;text-wrap:balance;
}
.hero h1 em{
  font-style:normal;display:block;
  background:linear-gradient(96deg,var(--orange-lt),var(--orange-deep) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{max-width:46ch;margin-top:22px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-cta .b-mini{display:none}   /* desktop shows the full labels */

/* the photo panel, bled to the viewport edge */
.hero-r{position:relative;align-self:stretch;min-height:420px;margin-right:calc(50% - 50vw)}
.hero-r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 42%}
.hero-r::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, var(--cream) 0%, rgba(255,251,247,.35) 12%, transparent 34%);
}
.shark-note{
  position:absolute;left:26px;bottom:26px;z-index:3;
  transform:rotate(-2deg);font-size:12.5px;font-weight:800;letter-spacing:.02em;
  padding:9px 15px 9px 25px;
}
.shark-note small{display:block;font-size:10.5px;font-weight:650;opacity:.72;letter-spacing:.06em;text-transform:uppercase}

/* ---------- acclaim band: the three-peat, full width ----------
   Rendered the badges against cream / kraft / ink / navy / orange before
   picking. Orange won outright — and navy (my first instinct) was the worst:
   the badges' own navy field merged straight into it. Note the 2024 badge is
   SILVER while 25/26 are gold, so they are not a matched set; orange is
   high-contrast enough to carry all three without white chips propping them up. */
.acclaim{
  /* Deeper + narrower than the ticker's gradient ON PURPOSE. The original ran
     --orange-deep -> --orange-lt, and the copy sits on the deep left end where
     white was fine (5.2:1) but the dark em was 2.98:1 — under the 3:1 large-text
     floor. Dark and light each failed at opposite ends. Narrowing it keeps white
     at 4.3-5.8:1 the whole way across the text. */
  background:linear-gradient(100deg,#B8371A 0%,#BE4318 58%,#DF6E10 100%);
  padding:46px 0;color:#fff;position:relative;overflow:hidden;
  border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);
}
.acclaim-in{display:flex;align-items:center;gap:44px;justify-content:space-between;flex-wrap:wrap}
.acclaim-txt{flex:1 1 400px}
.acclaim-kicker{
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin-bottom:11px;
}
.acclaim h2{
  font-size:clamp(28px,3.5vw,43px);font-weight:900;letter-spacing:-.038em;line-height:1.03;
  color:#fff;text-wrap:balance;
}
.acclaim h2 em{
  font-style:normal;color:#fff;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.42);
  text-decoration-thickness:4px;
  text-underline-offset:7px;
}
.acclaim p{margin-top:13px;font-size:16.5px;color:#fff;max-width:46ch}
.acclaim p i{font-style:italic;color:#fff}
.acclaim-badges{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.acclaim-badges img{
  height:152px;width:auto;
  filter:drop-shadow(0 14px 28px rgba(88,34,4,.55));
  transition:transform .35s cubic-bezier(.3,1.3,.5,1);
}
/* fanned like three plaques on the wall, newest proud of the others */
.acclaim-badges img:nth-child(1){transform:rotate(-7deg)}
.acclaim-badges img:nth-child(2){transform:translateY(-9px) scale(1.05);z-index:2}
.acclaim-badges img:nth-child(3){transform:rotate(7deg)}
.acclaim-in:hover .acclaim-badges img:nth-child(1){transform:rotate(-11deg) translateX(-8px)}
.acclaim-in:hover .acclaim-badges img:nth-child(2){transform:translateY(-15px) scale(1.09)}
.acclaim-in:hover .acclaim-badges img:nth-child(3){transform:rotate(11deg) translateX(8px)}

/* ---------- ticker: the shop's banner sign, made honest ---------- */
.ticker{
  background:linear-gradient(100deg,var(--orange-deep),var(--orange) 52%,var(--orange-lt));
  color:#fff;overflow:hidden;padding:15px 0;
  border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker-track{display:flex;width:max-content;animation:roll 44s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-set{display:flex;align-items:center;flex:0 0 auto}
.ticker-set span{
  font-family:var(--f-tag);font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:0 22px;white-space:nowrap;
}
.ticker-set i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);flex:0 0 auto}
@keyframes roll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .ticker-track{animation:none;justify-content:center}
  .ticker-set:nth-child(2){display:none}
}

/* ---------- Rob rises (MOBILE ONLY) ----------
   Climbs out of the top of the Wall section as you scroll past the awards, and
   sinks back if you scroll up. --rise is written by site.js (100% hidden, 0% up).
   Hidden above 980px: at this size he just loomed in the whitespace beside a
   left-aligned heading. He earns the space on a phone, not on a desktop.

   TWO WAYS overflow:hidden can decapitate him, both learned the hard way:
     1. VERTICALLY — a strip shorter than the image clips the top. That shipped
        (150px strip, 212px image = 62px off his head). Both heights now read
        from --robH, so they cannot drift apart.
     2. HORIZONTALLY — the canvas is square, so at 360px tall he is 360px wide.
        Inside .wrap (24px padding a side) that overflows a 390px phone and
        shaves his arms. Hence the full-bleed.

   The image is 500x500 with Rob filling 91% wide x 92% tall. */
.rob-rise{
  --robH:clamp(300px,92vw,400px);     /* single source of truth for the pair */
  position:relative;height:var(--robH);overflow:hidden;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:center;
  margin-left:-24px;margin-right:-24px;   /* full-bleed — see (2) above */
}
.rob-rise img{
  height:var(--robH);width:auto;display:block;
  transform:translateY(var(--rise,100%));
  filter:drop-shadow(0 20px 34px rgba(30,22,19,.28));
  will-change:transform;
}
@media(max-width:980px){
  #shop{padding-top:40px}             /* the strip carries the space */
}
@media(min-width:981px){
  .rob-rise{display:none}             /* desktop: he doesn't need to be there */
}
@media(prefers-reduced-motion:reduce){
  .rob-rise img{transform:none}       /* no scroll-linked movement */
}

/* ---------- the wall: dense mosaic, tags hanging off every cell ---------- */
.wall{
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:172px;gap:14px;
}
.wcell{
  position:relative;overflow:hidden;border-radius:14px;text-decoration:none;display:block;
  background:var(--ink);box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.wcell:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);z-index:4}
.wcell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.wcell:hover img{transform:scale(1.06)}
.wcell::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(30,22,19,.34) 0%, rgba(30,22,19,0) 42%, rgba(30,22,19,.5) 100%);
}
/* the string the tag hangs from */
.wcell::before{
  content:"";position:absolute;top:0;left:31px;width:1px;height:16px;z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.15));
}
.wtag{
  position:absolute;top:14px;left:14px;z-index:3;
  transform-origin:22px -4px;transform:rotate(-2.4deg);
  transition:transform .35s cubic-bezier(.3,1.4,.5,1);
  font-size:13.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25;
}
.wcell:hover .wtag{transform:rotate(1.2deg)}
.wtag small{display:block;font-size:10.5px;font-weight:650;opacity:.7;letter-spacing:.03em;margin-top:1px}
.wgo{
  position:absolute;right:14px;bottom:14px;z-index:3;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(8px);
  opacity:0;transform:translateX(-5px);transition:all .3s cubic-bezier(.2,.8,.2,1);
}
.wcell:hover .wgo{opacity:1;transform:none;background:var(--orange);border-color:var(--orange)}
/* the mosaic: big anchor cell, two stacked, three across the base */
.w-tools      {grid-column:1/5; grid-row:1/3}
.w-jewelry    {grid-column:5/7; grid-row:1/2}
.w-instruments{grid-column:5/7; grid-row:2/3}
.w-electronics{grid-column:1/3; grid-row:3/4}
.w-sporting   {grid-column:3/5; grid-row:3/4}
.w-firearms   {grid-column:5/7; grid-row:3/4}
.w-tools .wtag{font-size:15.5px}

/* brand strip, folded under the wall rather than a floating logo row */
.wall-brands{
  margin-top:26px;padding:22px 0 24px;border-radius:14px;
  background:#fff;border:1px solid var(--line);overflow:hidden;
}
.wall-brands p{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);text-align:center;margin-bottom:16px;
}
/* auto-scrolling logo marquee. Full colour now — the source webps always had it;
   the old grayscale(1)+opacity:.34 was throwing it away. Edges fade with a mask
   so logos drift in and out rather than popping at the border. */
.brand-marquee{
  position:relative;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.brand-track{
  display:flex;width:max-content;align-items:center;
  animation:brand-scroll 36s linear infinite;
}
/* let people stop it to look */
.brand-marquee:hover .brand-track{animation-play-state:paused}
.brand-track .bl{
  height:30px;width:auto;flex:0 0 auto;margin:0 24px;
  opacity:.9;transition:opacity .2s;
}
.brand-track .bl:hover{opacity:1}
@keyframes brand-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}   /* exactly one half — see brand_marquee() */
}
/* reduced-motion: no crawl, no mask; the logos just sit there in a centred row */
@media(max-width:560px){
  .hero-cta .b-full{display:none}
  .hero-cta .b-mini{display:inline}
}
@media(prefers-reduced-motion:reduce){
  .brand-marquee{-webkit-mask-image:none;mask-image:none}
  .brand-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%;gap:16px 32px}
}

/* ---------- the counter: 3 steps strung together ---------- */
.counter{
  position:relative;border-radius:20px;overflow:hidden;
  background:linear-gradient(150deg,#FBF4E4,var(--kraft) 130%);
  border:1px solid var(--kraft-edge);
  box-shadow:var(--shadow);
}
.counter-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.cstep{padding:38px 34px;position:relative}
.cstep+.cstep{border-left:1.5px dashed rgba(160,130,85,.5)}
.cnum{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--ink);color:var(--kraft);
  font-family:var(--f-tag);font-weight:800;font-size:17px;margin-bottom:16px;
  box-shadow:0 6px 14px -5px rgba(30,22,19,.7);
}
.cstep h3{font-size:19px;font-weight:850;letter-spacing:-.025em;margin-bottom:8px;color:var(--ink)}
.cstep p{font-size:15.2px;color:#6B5940;line-height:1.6}

/* ---------- story ---------- */
.story-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center}
.video-card{
  position:relative;border-radius:20px;overflow:hidden;background:var(--ink);
  box-shadow:var(--shadow-lg);aspect-ratio:9/16;max-width:310px;margin:0 auto;
  transform:rotate(-1.4deg);
}
.video-card video{width:100%;height:100%;object-fit:cover;display:block}
.play{position:absolute;inset:0;display:grid;place-items:center;border:0;cursor:pointer;background:linear-gradient(180deg,rgba(30,22,19,.1),rgba(30,22,19,.5));transition:opacity .3s}
.play-btn{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.95);box-shadow:0 12px 34px rgba(0,0,0,.45);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.play:hover .play-btn{transform:scale(1.09)}
.play-lbl{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;font-size:12.5px;font-weight:750;text-shadow:0 2px 12px rgba(0,0,0,.85)}
.story-grid h2{font-size:clamp(30px,4vw,44px);font-weight:900;letter-spacing:-.038em;line-height:1.04;margin:12px 0 20px;text-wrap:balance}
.story-grid p{color:var(--gray);font-size:16.6px;margin-bottom:15px;max-width:56ch}
.story-grid p strong{color:var(--ink);font-weight:750}
.sig{display:flex;align-items:center;gap:15px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.sig img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 18%;background:var(--cream);border:2px solid var(--line)}
.sig b{display:block;font-size:15.5px;font-weight:850;letter-spacing:-.02em}
.sig span{font-size:13.5px;color:var(--gray)}

/* ---------- reviews: one carries the weight ---------- */
.rev-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:stretch}
.rev-hero{
  background:var(--ink);color:#fff;border-radius:18px;padding:44px 42px;
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.rev-hero::before{
  content:"";position:absolute;top:-30%;right:-16%;width:64%;height:170%;
  background:radial-gradient(circle,rgba(224,112,15,.34),transparent 62%);
}
.rev-hero .qm{font-size:74px;line-height:.6;color:var(--orange);font-family:Georgia,serif;margin-bottom:8px}
.rev-hero p{font-size:22px;font-weight:650;line-height:1.44;letter-spacing:-.02em;position:relative;text-wrap:balance}
.rev-hero .rev-by{border-top-color:rgba(255,255,255,.16)}
.rev-hero .rev-by b{color:#fff}
.rev-hero .rev-by span{color:rgba(255,255,255,.55)}
.rev-col{display:flex;flex-direction:column;gap:16px}
.rev{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 22px;
  display:flex;flex-direction:column;flex:1;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.rev:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stars{color:var(--orange);font-size:13px;letter-spacing:2px;margin-bottom:9px}
.rev p{font-size:14.4px;color:var(--ink-2);line-height:1.58;flex:1}
.rev-by{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,var(--orange-lt),var(--orange-deep));color:#fff;font-weight:850;font-size:13px;flex:0 0 auto}
.rev-by b{font-size:13.5px;font-weight:750;display:block;letter-spacing:-.01em}
.rev-by span{font-size:11.5px;color:var(--gray);font-weight:600}

/* ---------- visit ----------
   Was: a full-bleed photo with the card on top and a gradient scrim between the
   two. Two things were wrong, and only one of them was visible.

   1. The scrim was a ::after on the photo wrapper — the LAST child — so it
      painted on top of the text layer, not under it. A 75%-opacity ink sheet
      laid over the words: white type composited down to ~86 grey on near-black.
      Simulating the gradient says it SHOULD have read 11:1; on screen it was
      illegible, because the scrim was shading the text instead of the photo.
      A z-index would have fixed that and left problem 2 untouched.
   2. storefront.webp is 1024x515. Full-bleed on a 2264px viewport is a 2.21x
      upscale — soft no matter what the text did.

   Now nothing sits on the photo, so there is no scrim whose paint order can be
   wrong. The shot is a banner capped at the 1180 wrap (1.15x, the honest
   maximum for this file) and every word is on solid ink. */
.visit{background:var(--ink);padding:76px 0;border-top:1px solid var(--line)}
.visit-shot{
  aspect-ratio:1180/460;              /* the crop that keeps the shark, drops the sidewalk */
  border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9);
  margin-bottom:46px;
}
.visit-shot img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 44%;   /* 44% keeps the shark clear of the top edge */
}
.visit-card{color:#fff}
.visit-cta{display:flex;gap:11px;flex-wrap:wrap}
/* Desktop: the pitch left, the details right. .info stays a CHILD of .visit-card
   — every white-on-dark override is scoped to that ancestor, and lifting it out
   is precisely how /contact/ once ended up with white text on a white panel. */
@media(min-width:981px){
  .visit-card{display:grid;grid-template-columns:1.04fr .96fr;gap:0 56px;align-items:start}
  .visit-card > .eyebrow{grid-column:1;grid-row:1}
  .visit-card > h2{grid-column:1;grid-row:2}
  .visit-card > .lede{grid-column:1;grid-row:3;max-width:44ch}
  .visit-card > .visit-cta{grid-column:1;grid-row:4;margin-top:6px}
  .visit-card > .info{grid-column:2;grid-row:1/5;margin-bottom:0}
}
.visit-card h2{font-size:clamp(30px,3.8vw,44px);font-weight:900;letter-spacing:-.038em;line-height:1.03;margin:12px 0 16px}
.visit-card h2 em{font-style:normal;color:var(--orange-lt)}
.visit-card .lede{color:rgba(255,255,255,.8);margin-bottom:24px;font-size:17px}
/* The .info / .hours-t STRUCTURE lives in core.css with light-theme colours,
   because /contact/ reuses it inside a white panel. Only the colour overrides
   for this dark photo band belong here — scoped to .visit-card so they can't
   leak out and paint white text onto a white card again. */
.visit-card .info-row{border-bottom-color:rgba(255,255,255,.14)}
.visit-card .info-ico{background:rgba(224,112,15,.2);border-color:rgba(255,140,43,.4)}
.visit-card .info-row b{color:rgba(255,255,255,.5)}
.visit-card .info-row div > span,.visit-card .info-row div > a{color:#fff}
.visit-card .info-row div > a:hover{color:var(--orange-lt)}
.visit-card .hours-t tr td{color:rgba(255,255,255,.72)}
.visit-card .hours-t tr td:last-child{color:#fff}
.visit-card .hours-t tr.today td,.visit-card .hours-t tr.today td:last-child{color:var(--orange-lt)}

/* ---------- homepage responsive ---------- */
@media(max-width:1080px){
  .wall{grid-auto-rows:150px}
}
@media(max-width:980px){
  .acclaim-in{gap:30px}
  .acclaim-txt{flex:1 1 340px}
  .acclaim-badges img{height:120px}
  /* Mobile leads with the photo. The storefront + shark is the liveliest thing
     on the page, and it used to sit BELOW the whole headline/pitch/buttons —
     you scrolled past everything to reach it. order:-1 pulls it above the text
     so it's the first thing under the header; the copy follows. */
  .hero-grid{grid-template-columns:1fr;gap:0;min-height:0;display:flex;flex-direction:column}
  .hero-r{order:-1;margin:0 calc(50% - 50vw);height:300px;min-height:0}
  /* fade the bottom of the photo into the cream so it hands off to the headline */
  .hero-r::after{background:linear-gradient(180deg, transparent 62%, var(--cream))}
  .hero-l{padding:26px 0 34px}   /* the image gives the top now, not padding */
  .hero .lede{max-width:none}
  .story-grid{grid-template-columns:1fr}
  .rev-wrap{grid-template-columns:1fr}
  .counter-grid{grid-template-columns:1fr}
  .cstep+.cstep{border-left:0;border-top:1.5px dashed rgba(160,130,85,.5)}
  /* Stacked, the number sat ABOVE the heading and the text ran narrow — a tall,
     half-empty block. As a timeline row the number moves beside the heading and
     the copy uses the full width. */
  .cstep{
    display:grid;grid-template-columns:auto 1fr;column-gap:16px;
    align-items:center;
  }
  .cstep .cnum{grid-column:1;grid-row:1;margin-bottom:0}
  .cstep h3{grid-column:2;grid-row:1;margin-bottom:0}
  .cstep p{grid-column:2;grid-row:2;margin-top:7px}
  .wall{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .w-tools{grid-column:1/3;grid-row:auto}
  .w-jewelry,.w-instruments,.w-electronics,.w-sporting,.w-firearms{grid-column:auto;grid-row:auto}
  /* full-bleed back out through the wrap's 24px padding, corners squared off */
  .visit{padding:0 0 48px}
  .visit-shot{
    aspect-ratio:auto;height:300px;
    margin:0 -24px 32px;border-radius:0;border-left:0;border-right:0;
  }
  /* the sticky call bar already carries Call + Directions on mobile */
  .visit-cta{display:none}
}
@media(max-width:640px){
  /* the logo strip breaks out of the wrap's 24px padding to run edge-to-edge,
     and loses the card entirely — on a phone the box just boxed it in. Same
     full-bleed move as the storefront banner. */
  /* the strip is the section's closing band on a phone: flush to the bottom,
     no cream gap beneath it. #shop's own bottom padding was the "gap"; the next
     section (bg-white) brings its own top border as the divider, so the strip
     doesn't need a bottom one either. */
  #shop{padding-bottom:0}
  .wall-brands{
    margin:24px -24px 0;padding:20px 0;
    background:none;border:0;border-radius:0;
    border-top:1px solid var(--line);
  }
  .brand-track .bl{height:38px;margin:0 17px}   /* bigger, and closer together */
  /* the two hero buttons share one row as equal halves instead of wrapping.
     "Call (559) 264-5856" is too wide to sit beside another button on a phone,
     so <=560px the labels switch to short forms — the tap still dials the full
     number, which is also in the sticky bar, footer and contact page. */
  .hero-cta{flex-wrap:nowrap;gap:10px}
  .hero-cta .btn{flex:1;justify-content:center;padding-left:14px;padding-right:14px}
  .acclaim{padding:36px 0;background:linear-gradient(165deg,#B8371A,#C74E14)}
  .acclaim-in{flex-direction:column;align-items:flex-start;gap:26px}
  /* the container is a column now, so the 400px basis would be a 400px HEIGHT
     and flex-grow would stretch it further — that was the dead space */
  .acclaim-txt{flex:0 0 auto;width:100%}
  .acclaim-badges{align-self:center;gap:0}
  .acclaim-badges img{height:104px}
  .hero h1{font-size:clamp(38px,10vw,52px)}
  .wall{grid-template-columns:1fr;grid-auto-rows:200px}
  .w-tools{grid-column:auto}
  .rev-hero{padding:32px 26px}
  .rev-hero p{font-size:18.5px}
  .cstep{padding:24px 22px}
  .visit-shot{height:240px}
}

/* deploy-only: skip link + real-anchor tweaks */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;color:var(--ink);
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:800;text-decoration:none}
.skip:focus{left:0}
.logo-link{display:inline-flex;flex:0 0 auto}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}
.gal-item{cursor:zoom-in}

/* visit page: map beside the facts */
.visit-grid2{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:stretch}
.map-embed{
  border-radius:18px;overflow:hidden;border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg);min-height:420px;background:var(--line);
}
.map-embed iframe{width:100%;height:100%;min-height:420px;border:0;display:block}
.visit-grid2 .panel{display:flex;align-items:center}
.visit-grid2 .info{width:100%;margin:0}
@media(max-width:980px){
  .visit-grid2{grid-template-columns:1fr}
  .map-embed,.map-embed iframe{min-height:320px}
}