/* The Gas Station 760 — shared styles (extracted from homepage) */
:root{
  --ink:#1E3A53;
  --cream:#FDFBF5;
  --cream-2:#F2EDDE;
  --green:#46C53F;
  --green-deep:#3CB23F;
  --blue:#33B9F0;
  --blue-soft:#CFEEF9;
  --bg:var(--cream);
  --fg:var(--ink);
  --accent:#46C53F;
  --accent2:#33B9F0;
  --rule:rgba(30,58,83,.16);
  --rule-strong:rgba(30,58,83,.32);
  --pad:clamp(20px,3.5vw,56px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}

.display{font-family:"Bebas Neue","Antonio",Impact,sans-serif;letter-spacing:.005em;line-height:.86}
.ant{font-family:"Antonio","Bebas Neue",Impact,sans-serif;letter-spacing:.005em;line-height:.92;font-weight:700}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.upper{text-transform:uppercase}

.halftone{background-image:radial-gradient(rgba(26,39,51,.55) 1px,transparent 1.4px);background-size:6px 6px}
.halftone-light{background-image:radial-gradient(rgba(243,239,226,.4) 1px,transparent 1.4px);background-size:6px 6px}
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1.2px);background-size:3px 3px;mix-blend-mode:multiply;opacity:.18}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq-track{display:flex;gap:2.5rem;white-space:nowrap;animation:marquee 38s linear infinite;will-change:transform}
.marq-wrap:hover .marq-track{animation-play-state:paused}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--cream);font-weight:600;letter-spacing:.02em;cursor:pointer;transition:transform .15s ease, background .2s;text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn-accent:hover{background:var(--ink);color:var(--accent);border-color:var(--ink)}
.btn-blue{background:var(--accent2);border-color:var(--accent2);color:var(--ink)}
.btn-blue:hover{background:var(--ink);color:var(--accent2);border-color:var(--ink)}
.btn-sm{padding:9px 14px;font-size:12px}
.btn-lg{padding:18px 28px;font-size:16px}

.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--rule-strong);border-radius:999px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}

/* Cards */
.card{background:var(--cream);border:1px solid var(--rule-strong);border-radius:10px;overflow:hidden;position:relative;transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -16px rgba(19,17,14,.35)}

.ph{position:relative;background:
    repeating-linear-gradient(135deg,rgba(19,17,14,.07) 0 8px,transparent 8px 16px),
    var(--cream-2);
  display:flex;align-items:center;justify-content:center;color:rgba(19,17,14,.55)}
.ph .lbl{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:rgba(243,234,213,.92);padding:4px 8px;border:1px solid var(--rule-strong);border-radius:4px}

.eyebrow{display:flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(19,17,14,.65)}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--ink)}
.eyebrow-light{color:rgba(243,234,213,.7)}
.eyebrow-light::before{background:var(--cream)}

.shield{font-family:"Bebas Neue";color:var(--cream);background:var(--ink);
  clip-path:polygon(50% 0,100% 18%,100% 100%,0 100%,0 18%);
  padding:6px 14px 10px;display:inline-flex;flex-direction:column;align-items:center;line-height:.9}

.octane{font-family:"Bebas Neue";font-size:13px;letter-spacing:.04em;padding:2px 8px;border-radius:3px;background:var(--ink);color:var(--cream)}

.nav{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--rule)}
.strip{background:var(--ink);color:var(--cream);overflow:hidden;border-bottom:1px solid #000}

.spec{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-family:"JetBrains Mono",monospace;font-size:11px;color:rgba(19,17,14,.78)}
.spec dt{text-transform:uppercase;letter-spacing:.08em;color:rgba(19,17,14,.5)}

.gate{position:fixed;inset:0;z-index:200;background:rgba(19,17,14,.94);display:flex;align-items:center;justify-content:center;padding:24px;color:var(--cream)}
.gate-inner{max-width:560px;width:100%;text-align:center;border:1px solid rgba(243,234,213,.18);padding:48px 32px;background:#191613;position:relative}
.gate-inner::before,.gate-inner::after{content:"";position:absolute;left:0;right:0;height:14px;background-image:repeating-linear-gradient(90deg,var(--accent) 0 14px,var(--blue) 14px 28px,var(--ink) 28px 42px)}
.gate-inner::before{top:0}
.gate-inner::after{bottom:0}

/* Cart drawer */
.drawer{position:fixed;right:0;top:0;bottom:0;width:min(440px,94vw);background:var(--bg);border-left:1px solid var(--ink);z-index:80;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.scrim{position:fixed;inset:0;background:rgba(19,17,14,.5);z-index:79;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.open{opacity:1;pointer-events:auto}

.band-ink{background:var(--ink);color:var(--cream)}

.tag{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:3px 7px;border:1px solid var(--rule-strong);border-radius:999px}
.taglist{display:flex;flex-wrap:wrap;gap:6px}

@keyframes fill{from{width:0}to{width:var(--w,60%)}}
.fill-bar{height:10px;background:repeating-linear-gradient(45deg,var(--ink) 0 6px,var(--accent) 6px 12px);animation:fill 1.4s cubic-bezier(.2,.8,.2,1) .3s both}

@keyframes bulb{0%,40%{opacity:.18}50%,90%{opacity:1}}
.bulb{animation:bulb 1.6s linear infinite}

/* Receipt */
.receipt{background:var(--cream);border:1px dashed var(--ink);padding:18px 20px;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink)}
.receipt-row{display:flex;justify-content:space-between;padding:3px 0}

/* image-slot baseline */
image-slot{display:block;background:repeating-linear-gradient(135deg,rgba(19,17,14,.07) 0 8px,transparent 8px 16px),var(--cream-2);border:1px solid var(--rule-strong);border-radius:8px}

/* Sticker */
.sticker{display:inline-flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:999px;background:var(--accent);color:var(--ink);font-family:"Bebas Neue";text-align:center;line-height:.9;padding:14px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}

@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.pulse{animation:pulse 1.8s ease-in-out infinite}

/* Page header band (used by inner pages) */
.page-header{padding:var(--pad);padding-top:calc(var(--pad) + 8px);padding-bottom:calc(var(--pad) + 12px);background:var(--cream);border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.page-header::after{content:"";position:absolute;inset:0;opacity:.04;background-image:radial-gradient(rgba(26,39,51,.7) 1px,transparent 1.4px);background-size:6px 6px;pointer-events:none}
.page-header-inner{position:relative;z-index:1}
.crumbs{display:flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(19,17,14,.6);margin-bottom:14px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.45}

/* Receipt-style cart additions */
.receipt-anim .receipt-row{animation:line-print .35s ease-out both}
@keyframes line-print{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.zigzag{height:14px;background-image:linear-gradient(45deg,transparent 50%,var(--cream) 50%),linear-gradient(-45deg,transparent 50%,var(--cream) 50%);background-size:14px 14px;background-repeat:repeat-x}
.zigzag-top{background-image:linear-gradient(135deg,var(--cream) 50%,transparent 50%),linear-gradient(-135deg,var(--cream) 50%,transparent 50%);background-size:14px 14px;background-repeat:repeat-x}

/* Cart "fueling" pump animation */
@keyframes meter-tick{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.meter-tick{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(63,143,63,.4) 50%,transparent 100%);animation:meter-tick 1.6s linear infinite}

/* Pump card progress */
.pump-progress{position:relative;height:36px;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;background:#0a3530}
.pump-progress .fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--accent),#5fffc8);transition:width .4s ease}
.pump-progress .label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.18em;color:#5fffc8;text-shadow:0 0 6px rgba(95,255,200,.5);text-transform:uppercase;z-index:2}

/* Generic shop product grid */
.prod-grid{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){ .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){ .prod-grid{grid-template-columns:1fr} }

/* Filter sidebar */
.filter-rail{position:sticky;top:90px;align-self:start;border:1px solid var(--rule-strong);border-radius:10px;padding:18px;background:var(--cream)}
.filter-h{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(19,17,14,.55);margin:14px 0 8px}
.filter-h:first-child{margin-top:0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--rule-strong);border-radius:999px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:transparent;color:var(--ink);transition:all .15s}
.chip:hover{border-color:var(--ink)}
.chip.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chip-green.active{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.chiprow{display:flex;flex-wrap:wrap;gap:6px}

/* Slider styled */
input[type="range"].rng{-webkit-appearance:none;appearance:none;width:100%;height:5px;background:rgba(19,17,14,.15);border-radius:99px;outline:none}
input[type="range"].rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--ink);border:2px solid var(--accent);border-radius:50%;cursor:pointer}
input[type="range"].rng::-moz-range-thumb{width:18px;height:18px;background:var(--ink);border:2px solid var(--accent);border-radius:50%;cursor:pointer;border:0;border-radius:50%}

/* Section heading shorthand */
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.section-head h2{margin:8px 0 0}

/* Big numbers grid */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:900px){ .stat-grid{grid-template-columns:repeat(2,1fr)} }

/* Team-card style */
.team-card{position:relative;border:1px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--cream);transition:transform .25s, box-shadow .25s}
.team-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -22px rgba(19,17,14,.4)}
.team-card .strip-tag{position:absolute;top:14px;left:14px;background:var(--ink);color:var(--cream);padding:4px 8px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;z-index:2}

/* CTA banner */
.cta-band{padding:36px var(--pad);background:var(--ink);color:var(--cream);position:relative;overflow:hidden;border-radius:0}
.cta-band::after{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;background-image:radial-gradient(rgba(243,239,226,.4) 1px,transparent 1.4px);background-size:6px 6px}

/* Focus */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Tabs (used in education / shop) */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--rule-strong);overflow-x:auto}
.tabs button{background:transparent;border:none;padding:14px 20px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(19,17,14,.55);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.active{color:var(--ink);border-bottom-color:var(--accent)}
.tabs button:hover{color:var(--ink)}

/* Accordion */
.acc{border-top:1px solid var(--rule-strong)}
.acc summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:18px}
.acc summary::-webkit-details-marker{display:none}
.acc[open] summary .ac-icon{transform:rotate(45deg)}
.acc .ac-icon{width:28px;height:28px;border:1px solid var(--ink);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:transform .25s;flex-shrink:0}
.acc .ac-body{padding:0 0 22px;color:rgba(19,17,14,.78);line-height:1.6;font-size:15px;max-width:760px}

/* Big number badge */
.numbig{font-family:"Bebas Neue";font-size:clamp(56px,10vw,140px);line-height:.86;color:var(--accent)}

/* Marquee bulbs around frame */
@keyframes frame-bulb{0%,49%{opacity:.25}50%,100%{opacity:1}}

/* Print-style ticket border (used on receipts/cards) */
.ticket{position:relative;background:var(--cream);border:1.5px solid var(--ink);border-radius:8px;padding:20px}
.ticket::before,.ticket::after{content:"";position:absolute;left:0;right:0;height:10px;
  background-image:radial-gradient(circle,var(--bg) 4px,transparent 4.5px);background-size:14px 10px;background-repeat:repeat-x;background-position:left center}
.ticket::before{top:-5px}
.ticket::after{bottom:-5px}

/* shake */
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.shake{animation:shake .4s linear 2}

/* Weedmaps menu loading dots */
.wm-pump-dots span{display:block;width:10px;height:10px;border-radius:50%;background:var(--accent);animation:wm-bob .9s ease-in-out infinite}
.wm-pump-dots span:nth-child(2){animation-delay:.15s;background:var(--accent2)}
.wm-pump-dots span:nth-child(3){animation-delay:.3s}
@keyframes wm-bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-8px);opacity:1}}

/* ============ homepage-specific (3D pump hero, hero video, cat tiles, density, etc.) ============ */
  :root{
    --ink:#1E3A53;          /* brighter navy-blue */
    --cream:#FDFBF5;        /* bright off-white */
    --cream-2:#F2EDDE;
    --green:#46C53F;        /* vivid leaf */
    --green-deep:#3CB23F;
    --blue:#33B9F0;         /* bright sky */
    --blue-soft:#CFEEF9;
    --bg:var(--cream);
    --fg:var(--ink);
    --accent:var(--green);
    --accent2:var(--blue);
    --rule:rgba(30,58,83,.16);
    --rule-strong:rgba(30,58,83,.32);
    --pad:clamp(20px,3.5vw,56px);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
  body{overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit}
  .display{font-family:"Bebas Neue","Antonio",Impact,sans-serif;letter-spacing:.005em;line-height:.86}
  .ant{font-family:"Antonio","Bebas Neue",Impact,sans-serif;letter-spacing:.005em;line-height:.92;font-weight:700}
  .mono{font-family:"JetBrains Mono",ui-monospace,monospace}
  .upper{text-transform:uppercase}

  /* Halftone */
  .halftone{background-image:radial-gradient(rgba(26,39,51,.55) 1px,transparent 1.4px);background-size:6px 6px}
  .halftone-light{background-image:radial-gradient(rgba(243,239,226,.4) 1px,transparent 1.4px);background-size:6px 6px}
  .grain::after{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1.2px);background-size:3px 3px;mix-blend-mode:multiply;opacity:.18}

  /* Marquee */
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .marq-track{display:flex;gap:2.5rem;white-space:nowrap;animation:marquee 38s linear infinite;will-change:transform}

  /* Pump dial */
  @keyframes sweep{0%{transform:rotate(-120deg)}55%{transform:rotate(140deg)}70%{transform:rotate(120deg)}100%{transform:rotate(132deg)}}
  .needle{transform-origin:50% 100%;animation:sweep 2.6s cubic-bezier(.4,1.4,.5,1) .4s both}
  @keyframes digit{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

  /* Bulb chase */
  @keyframes bulb{0%,40%{opacity:.18}50%,90%{opacity:1}}
  .bulb{animation:bulb 1.6s linear infinite}

  /* Reveal */
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  .rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}

  /* Buttons */
  .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--cream);font-weight:600;letter-spacing:.02em;cursor:pointer;transition:transform .15s ease, background .2s}
  .btn:hover{transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--ink)}
  .btn-ghost:hover{background:var(--ink);color:var(--cream)}
  .btn-accent{background:var(--accent);border-color:var(--accent);color:var(--ink)}
  .btn-accent:hover{background:var(--ink);color:var(--accent);border-color:var(--ink)}
  .pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--rule-strong);border-radius:999px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}

  /* Card */
  .card{background:var(--cream);border:1px solid var(--rule-strong);border-radius:10px;overflow:hidden;position:relative;transition:transform .25s ease, box-shadow .25s ease}
  .card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -16px rgba(19,17,14,.35)}
  .ph{position:relative;background:
      repeating-linear-gradient(135deg,rgba(19,17,14,.07) 0 8px,transparent 8px 16px),
      var(--cream-2);
    display:flex;align-items:center;justify-content:center;color:rgba(19,17,14,.55)}
  .ph .lbl{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:rgba(243,234,213,.92);padding:4px 8px;border:1px solid var(--rule-strong);border-radius:4px}

  /* Section heading */
  .eyebrow{display:flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(19,17,14,.65)}
  .eyebrow::before{content:"";width:28px;height:1px;background:var(--ink)}

  /* Route shield */
  .shield{font-family:"Bebas Neue";color:var(--cream);background:var(--ink);
    clip-path:polygon(50% 0,100% 18%,100% 100%,0 100%,0 18%);
    padding:6px 14px 10px;display:inline-flex;flex-direction:column;align-items:center;line-height:.9}

  /* Octane chip */
  .octane{font-family:"Bebas Neue";font-size:13px;letter-spacing:.04em;padding:2px 8px;border-radius:3px;background:var(--ink);color:var(--cream)}

  /* Nav */
  .nav{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--rule)}

  /* Marquee top strip */
  .strip{background:var(--ink);color:var(--cream);overflow:hidden;border-bottom:1px solid #000}

  /* Spec table */
  .spec{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-family:"JetBrains Mono",monospace;font-size:11px;color:rgba(19,17,14,.78)}
  .spec dt{text-transform:uppercase;letter-spacing:.08em;color:rgba(19,17,14,.5)}

  /* Age gate */
  .gate{position:fixed;inset:0;z-index:200;background:rgba(19,17,14,.94);display:flex;align-items:center;justify-content:center;padding:24px;color:var(--cream)}
  .gate-inner{max-width:560px;width:100%;text-align:center;border:1px solid rgba(243,234,213,.18);padding:48px 32px;background:#191613;position:relative}
  .gate-inner::before,.gate-inner::after{content:"";position:absolute;left:0;right:0;height:14px;background-image:repeating-linear-gradient(90deg,var(--accent) 0 14px,var(--blue) 14px 28px,var(--ink) 28px 42px)}
  .gate-inner::before{top:0}
  .gate-inner::after{bottom:0}

  /* Cart drawer */
  .drawer{position:fixed;right:0;top:0;bottom:0;width:min(420px,92vw);background:var(--bg);border-left:1px solid var(--ink);z-index:80;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column}
  .drawer.open{transform:translateX(0)}
  .scrim{position:fixed;inset:0;background:rgba(19,17,14,.5);z-index:79;opacity:0;pointer-events:none;transition:opacity .25s}
  .scrim.open{opacity:1;pointer-events:auto}

  /* Footer band */
  .band-ink{background:var(--ink);color:var(--cream)}

  /* Hover blow on category */
  .cat{position:relative;overflow:hidden;background:var(--cream);border:1px solid var(--rule-strong);border-radius:8px;aspect-ratio:1/1.05;display:flex;flex-direction:column;justify-content:space-between;padding:16px;cursor:pointer;transition:background .25s, color .25s}
  .cat:hover{background:var(--ink);color:var(--cream)}
  .cat:hover .cat-num{color:var(--accent)}
  .cat .cat-num{font-family:"JetBrains Mono",monospace;font-size:11px;color:rgba(26,39,51,.5);transition:color .25s}
  .cat:hover .cat-num{color:var(--accent)}
  .cat .cat-arrow{align-self:flex-end;width:34px;height:34px;border-radius:999px;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;transition:transform .25s}
  .cat:hover .cat-arrow{transform:rotate(-45deg) translate(2px,0)}

  /* Tag list */
  .taglist{display:flex;flex-wrap:wrap;gap:6px}
  .tag{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:3px 7px;border:1px solid var(--rule-strong);border-radius:999px}

  /* gauges grid */
  .gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .gauge{border:1px solid var(--rule-strong);padding:14px;border-radius:8px;background:rgba(243,234,213,.4)}

  /* Density override applied to product grid */
  body[data-density="compact"] .prod-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  body[data-density="regular"] .prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-density="comfy"]   .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  @media (max-width: 900px){
    body[data-density="compact"] .prod-grid,
    body[data-density="regular"] .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    body[data-density="comfy"]   .prod-grid{grid-template-columns:1fr}
  }

  /* Loyalty pumps fill anim */
  @keyframes fill{from{width:0}to{width:var(--w,60%)}}
  .fill-bar{height:10px;background:repeating-linear-gradient(45deg,var(--ink) 0 6px,var(--accent) 6px 12px);animation:fill 1.4s cubic-bezier(.2,.8,.2,1) .3s both}

  /* Marquee speed pause */
  .marq-wrap:hover .marq-track{animation-play-state:paused}

  /* ───── 3D PUMP HERO ───── */
  .pump3d-stage{position:relative;width:100%;aspect-ratio:1/1;perspective:1400px;perspective-origin:50% 45%}
  .pump3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-12deg));transition:transform .25s cubic-bezier(.2,.7,.2,1);will-change:transform}
  .pump3d *{transform-style:preserve-3d}
  .p-face{position:absolute;backface-visibility:hidden}

  /* Pump body proportions, centered */
  .pump-rig{position:absolute;left:50%;top:50%;width:62%;height:84%;transform:translate(-50%,-50%);transform-style:preserve-3d}

  .pump-front{width:100%;height:100%;border-radius:14px;
    background:linear-gradient(180deg,var(--accent) 0%, var(--green-deep) 100%);
    border:2px solid var(--ink);
    box-shadow:inset 0 0 0 4px rgba(26,39,51,.18), inset 0 -40px 60px rgba(0,0,0,.18);
    transform:translateZ(28px);overflow:hidden}
  .pump-back{width:100%;height:100%;border-radius:14px;background:#1f4a22;border:2px solid var(--ink);transform:translateZ(-28px)}
  .pump-side{position:absolute;top:0;width:56px;height:100%;background:#2f6e34;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
  .pump-side.l{left:0;transform:translateX(-28px) rotateY(-90deg);transform-origin:left center;background:linear-gradient(90deg,#1f4a22,#3F8F3F)}
  .pump-side.r{right:0;transform:translateX(28px) rotateY(90deg);transform-origin:right center;background:linear-gradient(90deg,#3F8F3F,#1f4a22)}
  .pump-top{position:absolute;top:0;left:0;width:100%;height:56px;background:#2A5C2E;border:2px solid var(--ink);transform:translateY(-28px) rotateX(90deg);transform-origin:top center;border-radius:14px 14px 0 0}
  .pump-bottom{position:absolute;bottom:0;left:0;width:100%;height:56px;background:#1a3d1d;border:2px solid var(--ink);transform:translateY(28px) rotateX(-90deg);transform-origin:bottom center;border-radius:0 0 14px 14px}

  /* Pump header */
  .pump-head{position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;color:var(--cream);transform:translateZ(0.5px)}

  /* Gauge well */
  .gauge-well{position:absolute;top:14%;left:8%;right:8%;height:46%;background:#1a1612;border:2px solid var(--ink);border-radius:10px;
    box-shadow:inset 0 4px 12px rgba(0,0,0,.6), inset 0 -2px 0 rgba(243,234,213,.05);
    overflow:hidden;transform:translateZ(2px)}
  .gauge-well .glass{position:absolute;inset:0;background:linear-gradient(135deg,rgba(243,234,213,.08) 0%,transparent 35%,transparent 65%,rgba(243,234,213,.04) 100%);pointer-events:none}

  /* Digital readout */
  .lcd{position:absolute;left:8%;right:8%;top:62%;height:18%;background:#0a3530;border:2px solid var(--ink);border-radius:8px;
    box-shadow:inset 0 0 30px rgba(90,255,200,.18), inset 0 4px 10px rgba(0,0,0,.5);
    display:flex;align-items:center;justify-content:space-between;padding:0 14px;transform:translateZ(2px);overflow:hidden}
  .lcd::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);pointer-events:none;mix-blend-mode:multiply}
  .lcd .digit{font-family:"DSEG7","JetBrains Mono",monospace;font-weight:700;font-size:clamp(28px,4.5vw,52px);color:#5fffc8;text-shadow:0 0 12px rgba(95,255,200,.6);letter-spacing:.06em;line-height:1}
  .lcd .lbl{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.18em;color:rgba(95,255,200,.7);text-transform:uppercase}

  /* Nozzle on the side */
  .nozzle-arm{position:absolute;right:-8%;top:48%;width:32%;height:6%;background:#0a0908;border:2px solid var(--ink);border-radius:3px;transform:translateZ(20px) rotate(-6deg);transform-origin:left center}
  .nozzle-head{position:absolute;right:-22%;top:46%;width:18%;height:14%;transform:translateZ(22px) rotate(-12deg);transform-origin:left center;
    animation:nozzle-bob 4.5s ease-in-out infinite}
  @keyframes nozzle-bob{0%,100%{transform:translateZ(22px) rotate(-12deg)}50%{transform:translateZ(22px) rotate(-8deg)}}

  /* Hose */
  .hose{position:absolute;left:80%;top:52%;width:120px;height:60%;border-left:6px solid #0a0908;border-bottom:6px solid #0a0908;border-radius:0 0 0 60px;transform:translateZ(18px);pointer-events:none}

  /* Bolts */
  .bolt{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#888,#222);border:1px solid #000}

  /* LED lights chasing */
  .led-row{position:absolute;left:8%;right:8%;top:84%;display:flex;justify-content:space-between;transform:translateZ(2px)}
  .led{width:10px;height:10px;border-radius:50%;background:var(--cream);box-shadow:0 0 8px var(--cream),inset 0 0 4px rgba(0,0,0,.3)}
  @keyframes ledchase{0%,100%{background:#7a2a10;box-shadow:none}50%{background:#ffe7c1;box-shadow:0 0 12px #ffd089}}
  .led:nth-child(1){animation:ledchase 1.6s linear infinite}
  .led:nth-child(2){animation:ledchase 1.6s linear .2s infinite}
  .led:nth-child(3){animation:ledchase 1.6s linear .4s infinite}
  .led:nth-child(4){animation:ledchase 1.6s linear .6s infinite}
  .led:nth-child(5){animation:ledchase 1.6s linear .8s infinite}
  .led:nth-child(6){animation:ledchase 1.6s linear 1.0s infinite}
  .led:nth-child(7){animation:ledchase 1.6s linear 1.2s infinite}
  .led:nth-child(8){animation:ledchase 1.6s linear 1.4s infinite}

  /* Floor shadow */
  .pump-shadow{position:absolute;left:14%;right:14%;bottom:4%;height:18px;background:radial-gradient(ellipse,rgba(0,0,0,.42),transparent 70%);transform:rotateX(90deg) translateZ(-60px);filter:blur(4px)}

  /* Floating vapor */
  .vapor{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(243,234,213,.5),transparent 60%);pointer-events:none;filter:blur(6px)}
  @keyframes float-up{
    0%{transform:translate3d(0,0,40px) scale(.4);opacity:0}
    20%{opacity:.7}
    100%{transform:translate3d(var(--dx,-30px),-200px,80px) scale(1.4);opacity:0}
  }
  .vapor{animation:float-up var(--dur,5s) ease-out var(--del,0s) infinite}

  /* Sun rays behind */
  .sun-rays{position:absolute;inset:0;transform:translateZ(-120px);pointer-events:none}
  @keyframes sun-spin{to{transform:translateZ(-120px) rotate(360deg)}}
  .sun-rays{animation:sun-spin 60s linear infinite}

  /* Marquee bulbs around frame */
  @keyframes frame-bulb{0%,49%{opacity:.25}50%,100%{opacity:1}}
  .frame-bulb{position:absolute;width:9px;height:9px;border-radius:50%;background:#ffd089;box-shadow:0 0 10px #ffd089;animation:frame-bulb 1.4s steps(1,end) infinite}

  /* Digit roll animation for price */
  @keyframes count-up{from{transform:translateY(60%)}to{transform:translateY(0)}}
  .roll{display:inline-block;animation:count-up 1.4s cubic-bezier(.2,.7,.2,1) both}

  /* Continuous slow idle */
  @keyframes idle3d{
    0%,100%{transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-12deg))}
    50%{transform:rotateX(calc(var(--rx,8deg) - 2deg)) rotateY(calc(var(--ry,-12deg) + 4deg))}
  }
  .pump3d.idle{animation:idle3d 7s ease-in-out infinite}

  :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* ───── HERO VIDEO BG ───── */
  .hero-video-wrap{position:absolute;inset:0;overflow:hidden;z-index:0;border-radius:0;pointer-events:none}
  .hero-video-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:saturate(.92) contrast(1.04)}
  /* Cream tint + vignette to keep nav/text legible */
  .hero-video-wrap::after{content:"";position:absolute;inset:0;
    background:
      linear-gradient(180deg, rgba(243,239,226,.62) 0%, rgba(243,239,226,.40) 35%, rgba(243,239,226,.78) 100%),
      linear-gradient(90deg, rgba(243,239,226,.85) 0%, rgba(243,239,226,.20) 40%, rgba(243,239,226,.0) 60%, rgba(243,239,226,.30) 100%);
    pointer-events:none}
  .hero-video-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(26,39,51,.30) 1px,transparent 1.4px);background-size:6px 6px;
    mix-blend-mode:multiply;opacity:.18;z-index:1}
  /* Video tag class for film frame styling option */
  .hero-section{position:relative;z-index:0}
  .hero-section > *{position:relative;z-index:2}
  .hero-video-wrap{z-index:0}
  @media (prefers-reduced-motion: reduce){
    .hero-video-wrap video{display:none}
  }

  /* Image slot wrapper */
  image-slot{display:block;background:repeating-linear-gradient(135deg,rgba(19,17,14,.07) 0 8px,transparent 8px 16px),var(--cream-2);border:1px solid var(--rule-strong);border-radius:8px}

  /* Tilted card */
  .tilt-l{transform:rotate(-2deg)}
  .tilt-r{transform:rotate(2.4deg)}

  /* Big quote */
  .qmark{font-family:"Bebas Neue";font-size:240px;line-height:.6;color:var(--accent);position:absolute;top:18px;left:18px;opacity:.9}

  /* Story scroller */
  .marq-big{font-family:"Bebas Neue";font-size:clamp(80px,12vw,180px);line-height:.9;white-space:nowrap}

  /* Pulse */
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
  .pulse{animation:pulse 1.8s ease-in-out infinite}

  /* Team card */
  .team-card{position:relative;border:1px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--cream);transition:transform .25s, box-shadow .25s}
  .team-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -22px rgba(19,17,14,.4)}
  .team-card .strip-tag{position:absolute;top:14px;left:14px;background:var(--ink);color:var(--cream);padding:4px 8px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em}

  /* Receipt */
  .receipt{background:var(--cream);border:1px dashed var(--ink);padding:18px 20px;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink)}
  .receipt-row{display:flex;justify-content:space-between;padding:3px 0}

  /* Cat card arrow hover */
  .cat-card:hover .cat-arrow-circle{background:currentColor;transform:rotate(-45deg)}
  .cat-card:hover .cat-arrow-circle{color:inherit}

  /* Sticker */
  .sticker{display:inline-flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:999px;background:var(--accent);color:var(--ink);font-family:"Bebas Neue";text-align:center;line-height:.9;padding:14px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}

/* ============ navigation / shell helpers (vanilla port) ============ */
.cat-card{transition:transform .25s ease, box-shadow .25s ease}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 28px 56px -22px rgba(19,17,14,.5)}
.az-card{transition:transform .2s}
.az-card:hover{transform:translateY(-4px)}
.hover-rise{transition:transform .2s}
.hover-rise:hover{transform:translateY(-4px)}

/* mobile nav + footer */
@media (max-width:1024px){
  .site-nav-links{display:none !important}
  .site-status{display:none !important}
}
@media (max-width:760px){
  .site-footer-grid{grid-template-columns:1fr 1fr !important}
}
@media (max-width:520px){
  .site-footer-grid{grid-template-columns:1fr !important}
}
/* hide scroll fuel gauge on small screens */
@media (max-width:900px){ .site-fuel-gauge{display:none !important} }

/* generic two-col -> one col helper for inner pages */
@media (max-width:900px){
  .col2{grid-template-columns:1fr !important}
  .col3{grid-template-columns:1fr !important}
}