/* ============================================================
   Self-hosted fonts. Previously three Google Fonts requests +
   two preconnects blocked first render; these ship from our own
   origin, preloaded, and never block paint (font-display:swap).
   ============================================================ */

@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-latin-roman.woff2") format("woff2-variations");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-latin-italic.woff2") format("woff2-variations");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("fonts/public-sans-latin.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   B&L Specialties — Blackfoot, Idaho
   Palette pulled from the shop's own yellow-and-red oval sign.
   ============================================================ */

:root{
  /* surfaces */
  --void:#0D0C0A;
  --floor:#171512;
  --floor-2:#221E19;
  --paper:#EFEEEA;
  --paper-2:#E3E1DA;

  /* ink */
  --bone:#F4F3F0;
  --steel:#9A9488;

  /* brand */
  --volt:#FFD400;        /* sign yellow  — e-bikes    */
  --volt-dim:#C9A800;
  --volt-ink:#6B5800;    /* volt darkened for AA text on light surfaces */
  --flag-ink:#B01810;    /* flag red darkened likewise            */
  --flag:#D01E17;        /* sign red     — RC/Traxxas */

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* metrics */
  --gut:clamp(20px,4.5vw,64px);
  --maxw:1280px;
  --navh:74px;           /* fixed nav height; content below must clear it */

  /* per-section, overridden by .sec-dark / .sec-light */
  --fg:var(--bone);
  --muted:var(--steel);
  --hair:rgba(244,243,240,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:"Public Sans",system-ui,-apple-system,sans-serif;
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.62;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}

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

.skip{position:absolute;left:-9999px;top:0;background:var(--volt);color:#000;padding:12px 18px;z-index:200;font-weight:700}
.skip:focus{left:8px;top:8px}

:focus-visible{outline:2.5px solid var(--volt);outline-offset:3px;border-radius:2px}

/* ── display type ───────────────────────────────────────────── */
.h1,.h2,.mark-bl,.stat-n,.brand-n{
  font-family:"Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 112;
}

.h1{
  font-size:clamp(2.1rem,4.35vw,3.55rem);
  line-height:1.0;
  font-weight:800;
  letter-spacing:-.032em;
  margin:.28em 0 .5em;
  text-wrap:balance;
}
.h1 .line{display:block}
.h1 em{
  font-style:italic;
  color:var(--volt);
  font-variation-settings:"wdth" 100;
}

.h2{
  font-size:clamp(1.95rem,4.3vw,3.5rem);
  line-height:1.0;
  font-weight:800;
  letter-spacing:-.028em;
  color:var(--fg);
  text-wrap:balance;
}

.eyebrow,.kicker,.mark-sub,.sc-tag,.brand-n,.marq,.status,
.vcard-h,.rc-h,.raffle-k,.stat-l,.hours,.contact span,.foot-bot{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}

.eyebrow{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--volt);font-weight:500;
}

.kicker{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:1.4rem;
}
.kicker span{
  display:inline-grid;place-items:center;padding:.42em .85em;
  border-radius:999px;font-weight:600;letter-spacing:.1em;color:#0D0C0A;
}
.kicker-volt span{background:var(--volt)}
.kicker-flag span{background:var(--flag);color:#fff}
/* section markers with no department name get the glyph alone, not a pill */
.kicker-plain span{
  background:none;padding:0;font-size:.85em;
}
.kicker-plain.kicker-volt span{color:var(--volt)}
.kicker-plain.kicker-flag span{color:var(--flag)}

.lede{
  font-size:clamp(1.02rem,1.28vw,1.2rem);
  color:var(--muted);max-width:46ch;line-height:1.62;
}
.sec-lede{
  font-size:clamp(1rem,1.2vw,1.14rem);
  color:var(--muted);max-width:52ch;margin-top:1.5rem;
}

/* ── buttons ────────────────────────────────────────────────── */
.btn{
  --bh:0;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.5em;padding:1.02em 1.7em;border:0;border-radius:2px;cursor:pointer;
  font-family:"Public Sans",sans-serif;font-size:.9rem;font-weight:700;
  letter-spacing:.015em;text-decoration:none;white-space:nowrap;
  transition:transform .5s var(--ease),background-color .35s,color .35s,border-color .35s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:.72em 1.15em;font-size:.82rem}

.btn-volt{background:var(--volt);color:#0D0C0A}
.btn-volt:hover{background:#FFE24D}

.btn-ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1.5px rgba(244,243,240,.28)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--volt);color:var(--volt)}

.btn-dark{background:#14120E;color:var(--paper)}
.btn-dark:hover{background:var(--flag)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background-color .5s var(--ease),box-shadow .5s var(--ease),backdrop-filter .5s;
}
.nav.scrolled{
  background:rgba(13,12,10,.82);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 rgba(244,243,240,.1);
}
.nav-in{display:flex;align-items:center;gap:clamp(14px,3vw,44px);height:var(--navh)}

.mark{display:flex;align-items:baseline;gap:.5em;text-decoration:none;flex:0 0 auto}
.mark-bl{
  font-size:1.62rem;font-weight:900;font-style:italic;
  font-variation-settings:"wdth" 122;letter-spacing:-.02em;
  color:var(--volt);line-height:1;
}
.mark-sub{
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--steel);font-weight:500;
}

.nav-links{display:flex;gap:clamp(12px,2vw,30px);margin-left:auto}
.nav-links a{
  position:relative;text-decoration:none;font-size:.87rem;font-weight:500;
  color:rgba(244,243,240,.72);display:inline-flex;align-items:baseline;gap:.5em;
  padding:.4em 0;transition:color .35s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--volt);transition:right .5s var(--ease);
}
.nav-links a:hover{color:var(--bone)}
.nav-links a:hover::after{right:0}

.nav-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav-links + .nav-right{margin-left:0}

.status{
  display:inline-flex;align-items:center;gap:.55em;font-size:.7rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--steel);
}
.status-dot{
  width:7px;height:7px;border-radius:50%;background:var(--steel);flex:0 0 auto;
}
.status.open .status-dot{background:#41C463;box-shadow:0 0 0 0 rgba(65,196,99,.6);animation:pulse 2.6s infinite}
.status.open .status-text{color:#8FE0A4}
.status.shut .status-dot{background:var(--flag)}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(65,196,99,0)}100%{box-shadow:0 0 0 0 rgba(65,196,99,0)}}

.burger{display:none;width:40px;height:40px;background:none;border:0;cursor:pointer;padding:10px;flex-direction:column;justify-content:center;gap:6px}
.burger span{display:block;height:1.8px;background:var(--bone);transition:transform .45s var(--ease),opacity .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.9px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.9px) rotate(-45deg)}

.mobile{
  display:none;flex-direction:column;padding:8px var(--gut) 26px;
  background:rgba(13,12,10,.97);backdrop-filter:blur(14px);
  border-top:1px solid rgba(244,243,240,.1);
}
.mobile a{
  padding:16px 0;text-decoration:none;font-size:1.06rem;font-weight:600;
  border-bottom:1px solid rgba(244,243,240,.08);
}
.mobile-call{color:var(--volt)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:clamp(120px,15vh,170px) 0 clamp(56px,7vw,96px);overflow:hidden}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 80% at 78% 18%,rgba(255,212,0,.11),transparent 62%),
    radial-gradient(90% 70% at 8% 92%,rgba(208,30,23,.13),transparent 65%),
    url("images/bikes-garage.jpg") 60% 34%/cover no-repeat;
  opacity:.17;
  filter:grayscale(.55) contrast(1.05) blur(2px);
  transform:scale(1.04);
  /* weakest behind the nav and the headline, strongest low and right */
  mask-image:linear-gradient(170deg,transparent 4%,rgba(0,0,0,.35) 34%,#000 78%,transparent 99%);
  -webkit-mask-image:linear-gradient(170deg,transparent 4%,rgba(0,0,0,.35) 34%,#000 78%,transparent 99%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,12,10,.5),rgba(13,12,10,0) 30%,rgba(13,12,10,.9));
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,5vw,74px);align-items:center;
}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.2rem}

.hero-meta{
  display:flex;flex-wrap:wrap;gap:.6em 1.8em;margin-top:2.6rem;
  padding-top:1.6rem;border-top:1px solid rgba(244,243,240,.14);
  font-size:.83rem;color:var(--steel);
}
.hero-meta strong{color:var(--bone);font-weight:700}

/* the two cards are sized against each other — that IS the idea */
.hero-media{display:flex;align-items:flex-end;gap:clamp(12px,1.8vw,22px);flex-wrap:wrap}
.sc{margin:0;flex:0 0 auto}
.sc img{
  width:100%;border-radius:3px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.9),0 0 0 1px rgba(244,243,240,.09);
  transition:transform .8s var(--ease);
}
.sc:hover img{transform:translateY(-5px) scale(1.012)}
.sc-lg{flex:1 1 58%;min-width:0}
.sc-lg img{aspect-ratio:3/4;object-fit:cover;object-position:52% 55%}
.sc-sm{flex:0 0 34%;min-width:120px}
.sc-sm img{aspect-ratio:1/1;object-fit:cover}

.sc figcaption{
  display:flex;align-items:center;gap:.6em;flex-wrap:wrap;
  margin-top:.85rem;font-size:.75rem;color:var(--steel);line-height:1.3;
}
.sc-tag{
  font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:#0D0C0A;background:var(--volt);padding:.24em .6em;border-radius:2px;
}
.sc-sm .sc-tag{background:var(--flag);color:#fff}

/* ============================================================
   MARQUEE
   ============================================================ */
.marq{
  overflow:hidden;background:var(--volt);color:#0D0C0A;
  padding:.9rem 0;border-block:1px solid #0D0C0A;
  -webkit-user-select:none;user-select:none;
}
.marq-track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq-row{
  display:flex;align-items:center;gap:1.4rem;padding-right:1.4rem;
  font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;
}
.marq-row i{font-style:normal;font-size:.5rem;opacity:.5}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{position:relative;padding:clamp(76px,10vw,142px) 0;overflow:hidden;scroll-margin-top:74px}
.sec-dark{--fg:var(--bone);--muted:var(--steel);--hair:rgba(244,243,240,.14);background:var(--void);color:var(--bone)}
.sec-light{--fg:#14120E;--muted:#6D685E;--hair:rgba(20,18,14,.15);background:var(--paper);color:#14120E}

.sec .wrap{position:relative;z-index:1}

/* headline left, lede right, baselines aligned — fills the measure instead of
   trailing off into dead space on the right */
.sec-head{
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:0 clamp(32px,5vw,76px);align-items:end;
}
.sec-head .kicker{grid-column:1/-1}
.sec-head .h2{grid-column:1;max-width:18ch}
.sec-head .sec-lede{grid-column:2;margin-top:0;max-width:44ch}

.sec-head-c{display:block;text-align:center;max-width:70ch;margin-inline:auto}
.sec-head-c .sec-lede{margin-inline:auto;margin-top:1.5rem}

/* ── brand cards ────────────────────────────────────────────── */
/* dividers are borders on the cards, not a container background showing
   through the gaps — otherwise each card flashes as a grey block while its
   reveal transition is still running */
.brands{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;margin-top:clamp(46px,6vw,80px);
  border-block:1px solid var(--hair);
}
.brand{padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,34px)}
.brand + .brand{border-left:1px solid var(--hair)}
.brand-n{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;color:var(--volt);
  font-family:"IBM Plex Mono",monospace;margin-bottom:1.3rem;
}
.brand h3{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108;
  font-size:1.22rem;font-weight:700;letter-spacing:-.014em;margin-bottom:.6rem;
}
.brand p{font-size:.94rem;color:var(--muted);line-height:1.6}

/* ── gallery mosaic ─────────────────────────────────────────── */
/* explicit row track — the tall cells span both rows, so no intrinsic
   aspect-ratio is allowed to fight the grid and leave a hole */
.gal{
  display:grid;gap:clamp(8px,1vw,14px);margin-top:clamp(8px,1vw,14px);
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,clamp(140px,16.5vw,236px));
  grid-template-areas:"a a b c" "a a b c";
}
.gal figure{margin:0;overflow:hidden;border-radius:3px;background:var(--floor);min-height:0}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);filter:contrast(1.03)}
.gal figure:hover img{transform:scale(1.05)}
.gal-a{grid-area:a}
.gal-b{grid-area:b;object-position:50% 40%}
.gal-c{grid-area:c}

/* ── RC ─────────────────────────────────────────────────────── */
.rc-grid{
  display:grid;grid-template-columns:1fr .82fr;
  gap:clamp(32px,5vw,70px);align-items:start;margin-top:clamp(46px,6vw,76px);
}
.rc-h,.vcard-h{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding-bottom:1rem;
  border-bottom:1px solid var(--hair);margin-bottom:1.5rem;
}
.ticks li{
  position:relative;padding:.72rem 0 .72rem 1.9rem;
  border-bottom:1px solid var(--hair);font-size:1rem;
}
.ticks li::before{
  content:"";position:absolute;left:.15rem;top:1.32rem;
  width:9px;height:9px;background:var(--flag);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.ticks li:last-child{border-bottom:0;color:var(--muted)}

.raffle{
  margin-top:2.4rem;padding:clamp(22px,2.6vw,32px);
  background:var(--paper-2);border-left:3px solid var(--flag);border-radius:2px;
}
.raffle-k{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--flag);font-weight:600;margin-bottom:.7rem;
}
.raffle-t{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108;
  font-size:1.24rem;font-weight:800;letter-spacing:-.016em;margin-bottom:.55rem;
}
.raffle-b{font-size:.93rem;color:var(--muted);line-height:1.6}

.rc-photo{margin:0}
.rc-photo img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px;
  box-shadow:0 24px 50px -24px rgba(20,18,14,.55);
}
.rc-photo figcaption{margin-top:1rem;font-size:.82rem;color:var(--muted);max-width:34ch}

/* ── the shop ───────────────────────────────────────────────── */
.sec-shop{background:var(--floor)}
.shop-grid{display:grid;grid-template-columns:1.14fr .86fr;gap:clamp(36px,6vw,84px);align-items:start}

.facts{margin-top:clamp(32px,4vw,52px)}
.facts > div{padding:1.5rem 0;border-top:1px solid var(--hair)}
.facts > div:last-child{border-bottom:1px solid var(--hair)}
.facts dt{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106;
  font-size:1.06rem;font-weight:700;letter-spacing:-.012em;margin-bottom:.35rem;
}
.facts dd{font-size:.96rem;color:var(--muted);max-width:52ch}

.shop-side{display:flex;flex-direction:column;gap:1.9rem}
.sign{margin:0;border-radius:3px;overflow:hidden;box-shadow:0 20px 50px -24px rgba(0,0,0,.9)}
.sign img{width:100%}
.stat{border-top:1px solid var(--hair);padding-top:1.5rem}
.stat-n{
  font-size:clamp(3rem,6vw,4.6rem);font-weight:900;font-style:italic;
  font-variation-settings:"wdth" 118;line-height:.86;letter-spacing:-.04em;color:var(--volt);
}
.stat-l{
  margin-top:.7rem;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.shop-serve{font-size:.92rem;color:var(--muted);border-top:1px solid var(--hair);padding-top:1.5rem}

/* ── visit ──────────────────────────────────────────────────── */
.visit-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);margin-top:clamp(46px,6vw,72px);
}
.vcard{
  background:#fff;padding:clamp(24px,2.8vw,36px);border-radius:3px;
  box-shadow:0 1px 0 rgba(20,18,14,.09),0 18px 40px -30px rgba(20,18,14,.5);
  display:flex;flex-direction:column;
}
.hours{width:100%;border-collapse:collapse;font-size:.86rem}
.hours th{
  text-align:left;font-weight:500;color:var(--muted);
  padding:.55rem 0;width:4.5rem;
}
.hours td{text-align:right;padding:.55rem 0;font-variant-numeric:tabular-nums}
.hours tr{border-bottom:1px solid rgba(20,18,14,.08)}
.hours tr:last-child{border-bottom:0}
.hours .cl{color:var(--muted)}
.hours tr.today th,.hours tr.today td{color:var(--flag);font-weight:600}

/* notes flow directly under their content — pinning them to the bottom of an
   equal-height card punched a hole through the middle of the shorter cards */
.vcard-note{margin-top:1.5rem;font-size:.82rem;color:var(--muted);line-height:1.55}
.addr{font-style:normal;font-size:1.16rem;line-height:1.5;font-weight:500;margin-bottom:1.5rem}
.visit-grid .btn{align-self:flex-start}

.contact li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid rgba(20,18,14,.08);font-size:.92rem;
}
.contact li:last-child{border-bottom:0}
.contact span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.contact a{text-decoration:none;font-weight:600;transition:color .3s}
.contact a:hover{color:var(--flag)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--void);padding-top:clamp(56px,7vw,88px);border-top:1px solid rgba(244,243,240,.1)}
.foot-in{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(32px,5vw,60px);padding-bottom:clamp(40px,5vw,64px)}
.foot-brand{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6em}
.foot-bl{font-size:2.1rem}
.foot-tag{flex:1 0 100%;margin-top:1rem;font-size:.9rem;color:var(--steel);line-height:1.6}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px)}
.foot-cols h4{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--volt);margin-bottom:1.1rem;
}
.foot-cols a{
  display:block;text-decoration:none;font-size:.9rem;color:var(--steel);
  padding:.34rem 0;transition:color .3s;line-height:1.5;
}
.foot-cols a:hover{color:var(--bone)}
.foot-bot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  padding-block:1.5rem;border-top:1px solid rgba(244,243,240,.1);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#8A8478;
}

/* ============================================================
   MOTION
   ============================================================ */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes wipe{
  from{opacity:0;transform:translateY(.16em);clip-path:inset(0 0 102% 0)}
  to{opacity:1;transform:none;clip-path:inset(-.2em -.2em -.22em -.2em)}
}

.ha{animation:rise .95s var(--ease) both;animation-delay:var(--d,0s)}
.h1 .line{animation:wipe 1.05s var(--ease) both;animation-delay:var(--d,0s)}

/* Gated behind .js (set by an inline script in <head>). Without
   JavaScript the content is simply visible rather than stuck at
   opacity:0 — a scroll animation must never be load-bearing for
   whether the page has content. */
.js .reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
  transition-delay:calc(var(--i,0) * 95ms);
}
.js .reveal.in{opacity:1;transform:none}

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .nav-links{display:none}
  .burger{display:flex}
  .hero-grid{grid-template-columns:1fr;gap:clamp(38px,7vw,56px)}
  .hero-media{max-width:560px}
  .rc-grid,.shop-grid,.foot-in{grid-template-columns:1fr}
  .sec-head{grid-template-columns:1fr;gap:0}
  .sec-head .h2{max-width:20ch}
  .sec-head .sec-lede{grid-column:1;margin-top:1.5rem}
  .brands{grid-template-columns:1fr}
  .brand + .brand{border-left:0;border-top:1px solid var(--hair)}
  .visit-grid{grid-template-columns:1fr 1fr}
  .rc-photo{max-width:460px}
  .sign{max-width:420px}
}

@media (max-width:720px){
  .hero{padding-top:clamp(104px,14vh,132px)}
  .status{display:none}
  .visit-grid{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr;gap:1.8rem}
  .gal{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:clamp(220px,58vw,340px) clamp(160px,40vw,240px);
    grid-template-areas:"a a" "b c";
  }
  .cta-row .btn{flex:1 1 auto}
  .hero-meta{gap:.5em 1.2em;font-size:.78rem}
}

@media (max-width:420px){
  .mark-sub{display:none}
  .btn-sm{padding:.68em .9em;font-size:.78rem}
}

/* ============================================================
   Multi-page additions — breadcrumbs, article prose, FAQ,
   card grids, service-area pages.
   ============================================================ */

/* ── breadcrumbs ────────────────────────────────────────────── */
.crumbs{background:var(--void);border-bottom:1px solid rgba(244,243,240,.09);
  padding:calc(var(--navh) + .9rem) 0 .85rem;font-size:.8rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;
  font-family:"IBM Plex Mono",monospace;letter-spacing:.02em}
.crumbs li{display:flex;align-items:center;gap:.45rem;color:var(--steel)}
.crumbs li+li::before{content:"/";color:rgba(244,243,240,.28)}
.crumbs a{color:var(--steel);text-decoration:none;transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--volt)}
.crumbs [aria-current]{color:var(--bone)}

/* ── page intro (non-home pages) ────────────────────────────── */
.phead{padding:clamp(3.2rem,7vw,5.6rem) 0 clamp(2rem,4vw,3rem);background:var(--void)}
/* fallback if a page ever renders without breadcrumbs above it */
main > .phead:first-child{padding-top:calc(var(--navh) + clamp(2.4rem,5vw,4rem))}
.phead .h1{max-width:19ch}
.phead-lede{color:var(--steel);font-size:clamp(1.02rem,1.5vw,1.22rem);max-width:60ch;margin-top:.4rem}
.phead-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.6rem;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--steel)}

/* ── long-form prose (guides) ───────────────────────────────── */
.prose{max-width:72ch;margin-inline:auto}
.prose>*+*{margin-top:1.15rem}
.prose h2{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108;
  font-size:clamp(1.5rem,2.7vw,2.05rem);font-weight:800;letter-spacing:-.022em;
  line-height:1.14;margin-top:2.9rem;text-wrap:balance}
.prose h3{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106;
  font-size:clamp(1.1rem,1.7vw,1.32rem);font-weight:700;margin-top:2rem;letter-spacing:-.012em}
.prose p,.prose li{color:var(--fg);opacity:.9}
.prose a{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:3px;text-decoration-color:var(--volt-dim);transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--volt)}
.prose ul,.prose ol{display:flex;flex-direction:column;gap:.6rem;padding-left:1.35rem}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose ul li::marker{color:var(--volt)}
.prose ol li::marker{color:var(--volt);font-family:"IBM Plex Mono",monospace;font-size:.86em}
.prose strong{font-weight:700;opacity:1}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:1.4rem}
.prose th,.prose td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--hair);vertical-align:top}
.prose th{font-family:"IBM Plex Mono",monospace;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--steel);font-weight:600}

/* ── callout ────────────────────────────────────────────────── */
.callout{border-left:3px solid var(--volt);background:rgba(255,212,0,.055);
  padding:1.1rem 1.3rem;border-radius:0 4px 4px 0}
.callout p{margin:0}
.callout p+p{margin-top:.7rem}
.callout-k{font-family:"IBM Plex Mono",monospace;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.11em;color:var(--volt);font-weight:600;margin-bottom:.45rem!important}
.callout-flag{border-left-color:var(--flag);background:rgba(208,30,23,.06)}
.callout-flag .callout-k{color:var(--flag)}
.sec-light .callout{background:rgba(201,168,0,.1)}
.sec-light .callout-flag{background:rgba(208,30,23,.05)}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq{max-width:72ch;margin-inline:auto}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.4rem 1.15rem 0;position:relative;
  font-weight:600;font-size:1.02rem;transition:color .2s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--volt)}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:10px;height:10px;
  border-right:2px solid var(--volt);border-bottom:2px solid var(--volt);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details>div{padding:0 0 1.3rem;color:var(--muted);max-width:64ch}
.faq details>div>*+*{margin-top:.8rem}
.faq details>div a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--volt-dim)}

/* ── card grids (departments, guides, towns) ────────────────── */
.cards{display:grid;gap:clamp(14px,1.7vw,22px);margin-top:clamp(2rem,4vw,3rem)}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.card{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.4rem,2.4vw,2rem);
  border:1px solid var(--hair);border-radius:4px;text-decoration:none;
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
a.card:hover{border-color:var(--volt);transform:translateY(-3px);background:rgba(255,212,0,.035)}
.card-k{font-family:"IBM Plex Mono",monospace;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.11em;color:var(--volt)}
.card-flag .card-k{color:var(--flag)}
.card h3{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108;
  font-size:clamp(1.15rem,1.9vw,1.45rem);font-weight:800;letter-spacing:-.018em;line-height:1.14}
.card p{color:var(--muted);font-size:.95rem}
.card-go{margin-top:auto;padding-top:.5rem;font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--volt)}
.card-flag .card-go{color:var(--flag)}
.card-go::after{content:" →"}

/* ── department block (homepage) ────────────────────────────── */
.dept{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.4vw,52px);align-items:center}
.dept+.dept{margin-top:clamp(3rem,6vw,5.5rem)}
.dept-media img{border-radius:4px;width:100%}
.dept-rev .dept-media{order:2}
.dept h2{margin-bottom:.7rem}

/* ── spec / at-a-glance table ───────────────────────────────── */
.spec{width:100%;border-collapse:collapse;margin-top:1.5rem}
.spec th,.spec td{text-align:left;padding:.8rem .5rem;border-bottom:1px solid var(--hair);font-size:.94rem}
.spec th{font-family:"IBM Plex Mono",monospace;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--steel);font-weight:600;width:38%}

/* ── inline CTA band ────────────────────────────────────────── */
.band{background:var(--volt);color:#0D0C0A;padding:clamp(2.2rem,4.5vw,3.4rem) 0}
.band-in{display:flex;flex-wrap:wrap;gap:1.3rem 2rem;align-items:center;justify-content:space-between}
.band h2{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 110;
  font-size:clamp(1.35rem,2.7vw,2rem);font-weight:800;letter-spacing:-.022em;
  line-height:1.1;max-width:22ch}
.band p{font-size:.95rem;opacity:.78;margin-top:.4rem;max-width:46ch}
.band .btn-dark{background:#0D0C0A;color:var(--volt)}
.band-cta{display:flex;flex-wrap:wrap;gap:.7rem}

/* ── footer additions ───────────────────────────────────────── */
.foot-social{display:flex;gap:1rem;margin-top:.9rem}
.foot-social a{font-size:.82rem;color:var(--steel);text-decoration:none;
  border-bottom:1px solid rgba(154,148,136,.4);padding-bottom:1px}
.foot-social a:hover{color:var(--volt);border-color:var(--volt)}
.foot-cols h2{font-family:"IBM Plex Mono",monospace;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.11em;color:var(--volt);font-weight:600;margin-bottom:.9rem}
.foot-hours{padding:2rem 0 0;border-top:1px solid var(--hair);margin-top:2.4rem}
.foot-hours h2{font-family:"IBM Plex Mono",monospace;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.11em;color:var(--volt);font-weight:600;margin-bottom:.9rem}
.foot-hours-t{border-collapse:collapse;font-size:.82rem}
.foot-hours-t th{text-align:left;padding:.28rem 1.6rem .28rem 0;color:var(--steel);
  font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:.76rem}
.foot-hours-t td{padding:.28rem 0;color:var(--bone)}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:900px){
  .cards-3{grid-template-columns:repeat(2,1fr)}
  .dept{grid-template-columns:1fr;gap:1.6rem}
  .dept-rev .dept-media{order:0}
}
@media (max-width:640px){
  .cards-2,.cards-3{grid-template-columns:1fr}
  .band-in{flex-direction:column;align-items:flex-start}
  .prose h2{margin-top:2.2rem}
}
@media (prefers-reduced-motion:reduce){
  a.card:hover{transform:none}
  .faq summary::after{transition:none}
}

/* ── contrast on light surfaces ──────────────────────────────
   The sign yellow is 1.23:1 against the paper background — fine
   as a graphic accent, unreadable as text. Small text on light
   sections uses a darkened volt that clears WCAG AA (4.9:1).
──────────────────────────────────────────────────────────────── */
.sec-light .card-k,
.sec-light .card-go,
.sec-light .callout .callout-k,
.band .card-k{color:var(--volt-ink)}
.sec-light .card-flag .card-k,
.sec-light .card-flag .card-go,
.sec-light .callout-flag .callout-k{color:var(--flag-ink)}

/* .prose p carries opacity:.9 for body copy; on a label that is
   already at the contrast floor it pushes it under AA. Labels and
   links opt out. */
.prose .callout-k,
.prose .card-k,
.prose .card-go,
.callout .callout-k{opacity:1}
.sec-light .prose a{text-decoration-color:var(--volt-ink)}
.sec-light a.card:hover{border-color:var(--volt-ink);background:rgba(122,101,0,.05)}

/* privacy link in the footer baseline */
.foot-bot a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(138,132,120,.45);padding-bottom:1px}
.foot-bot a:hover{color:var(--volt);border-color:var(--volt)}