/* ==================================================================================================
   Superior Outlet & Pawn Shop — vapawnshop.com

   The palette is not invented: it is pulled straight out of their existing logo — three gold pawn
   balls, chrome lettering, a bronze script. Gold and chrome on near-black is their identity already,
   so the site stops looking like a template and starts looking like the sign above the door.

   MOTION POLICY. Everything animates from a VISIBLE resting state, never from opacity:0 waiting on
   an observer — so the first paint, a shared screenshot, and a reader with JS disabled all get a
   finished page. Every transition is inside a prefers-reduced-motion guard.
   ================================================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* Sampled from the logo. */
  --gold: #e3b53f;
  --gold-hi: #f7e2a0;
  --gold-lo: #a97b1e;
  --bronze: #8b5a2b;
  --chrome-hi: #f2f2f2;
  --chrome: #b9b9b9;
  --chrome-lo: #6e6e6e;

  --ink: #0a0908;
  --ink-2: #131110;
  --surface: #1a1714;
  --surface-2: #231f1b;
  --line: rgba(227, 181, 63, 0.16);
  --hair: rgba(255, 255, 255, 0.09);

  --text: #f6f2ea;
  --text-2: #bfb6a6;
  --muted: #8a8175;

  --good: #4ba35c;
  --warn: #e0a23a;

  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gold-grad: linear-gradient(145deg, var(--gold-hi) 0%, var(--gold) 38%, var(--gold-lo) 72%, var(--gold-hi) 100%);
  --chrome-grad: linear-gradient(160deg, var(--chrome-hi) 0%, var(--chrome) 42%, var(--chrome-lo) 70%, var(--chrome-hi) 100%);

  --wrap: 1180px;
  --gut: clamp(1rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* height:auto is load-bearing. Every <img> carries width/height attributes for CLS, and if CSS
   overrides only ONE axis the browser uses the attribute for the other — which stretches the logo.
   This sets the safe default; rules below that drive from height must say width:auto explicitly. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px;
}

.wrap { width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto; }
.eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5rem); }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); }
p { color: var(--text-2); }
.lede { font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem); color: var(--text-2); max-width: 62ch; }

.gold-text {
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  /* A gradient clipped to text has no fallback colour if the clip fails, so paint one underneath. */
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) { .gold-text { color: var(--gold); -webkit-text-fill-color: var(--gold); } }

/* ==================================================================================================
   Header
   ================================================================================================ */
.hdr {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.hdr[data-stuck="true"] { border-bottom-color: var(--line); background: color-mix(in srgb, var(--ink) 96%, transparent); }
.hdr .bar { display: flex; align-items: center; gap: 18px; padding: 12px 0; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 52px; width: auto; filter: drop-shadow(0 2px 10px rgba(227,181,63,.22)); transition: transform .4s; }
.brand:hover img { transform: scale(1.04); }
.brand .bt { display: none; line-height: 1.05; }
@media (min-width: 30rem) { .brand .bt { display: block; } }
.brand .bt b { display: block; font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--text); }
.brand .bt span { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.hdr nav { display: none; margin-left: auto; gap: 4px; }
@media (min-width: 62rem) { .hdr nav { display: flex; } }
.hdr nav a {
  font-size: .82rem; font-weight: 500; color: var(--text-2); padding: 9px 13px; border-radius: 6px;
  transition: color .2s, background .2s; position: relative;
}
.hdr nav a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.hdr nav a[aria-current="page"] { color: var(--gold); }
.hdr .tel { margin-left: auto; }
@media (min-width: 62rem) { .hdr .tel { margin-left: 0; } }
.burger { margin-left: auto; display: grid; place-items: center; width: 42px; height: 42px; background: none; border: 1px solid var(--hair); border-radius: 8px; cursor: pointer; }
@media (min-width: 62rem) { .burger { display: none; } }
.burger span { display: block; width: 18px; height: 2px; background: var(--text); box-shadow: 0 -6px var(--text), 0 6px var(--text); }
/* The mobile menu, and the specificity trap that broke it two different ways.
 *
 * `nav.mobnav` sits INSIDE `header.hdr`, so the desktop-nav rule `.hdr nav { display: none }`
 * (0,1,1) was beating the plain `.mobnav { display: grid }` (0,1,0). Consequences, both live:
 *   - below 62rem the menu could never open, because .hdr nav kept it at display:none — the
 *     burger looked broken because it was;
 *   - at or above 62rem `.hdr nav { display: flex }` revealed it permanently, since the class
 *     rule also out-ranked the browser's `[hidden] { display: none }`, so every desktop page
 *     carried a second copy of the nav under the header.
 *
 * So the open state needs equal specificity to .hdr nav, and the closed state needs to beat both.
 * `[hidden]` is the attribute the markup and motion.js already agree on, so it gets the last word
 * — and !important here is deliberate rather than lazy: "hidden means hidden" should not be
 * relitigated by any future layout rule. */
[hidden] { display: none !important; }
.hdr nav.mobnav { display: grid; gap: 2px; padding: 8px 0 16px; border-top: 1px solid var(--hair); margin-left: 0; }
/* Above the breakpoint the real nav is in the header and the burger is gone, so there is nothing
   to open. Belt and braces in case the attribute is ever cleared by script. */
@media (min-width: 62rem) { .hdr nav.mobnav { display: none; } }
.mobnav a { padding: 12px 6px; color: var(--text-2); border-bottom: 1px solid var(--hair); font-size: .95rem; }
.mobnav a:last-child { border-bottom: none; }

/* -------- buttons -------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: .88rem; font-weight: 700; letter-spacing: .01em;
  padding: 14px 24px; border-radius: 8px; border: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s, filter .2s;
}
.btn-gold { background: var(--gold-grad); color: #1c1403; box-shadow: 0 6px 22px -8px rgba(227,181,63,.6); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(227,181,63,.75); filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn-sm { padding: 10px 16px; font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ==================================================================================================
   Hero — the parallax stack
   ================================================================================================ */
.hero { position: relative; isolation: isolate; padding: clamp(4rem, 2rem + 10vw, 9rem) 0 clamp(3.5rem, 2rem + 7vw, 7rem); overflow: hidden; }
.hero-layer { position: absolute; inset: -12% -5%; z-index: -1; will-change: transform; pointer-events: none; }
/* Layer 1 — a deep radial wash, moves slowest. */
/* The authored scene carries the atmosphere; the gradients stay on top of it as a tint so the
   headline side is guaranteed dark whatever the artwork does. */
/* Generated on Higgsfield (cinematic_studio_2_5, 2 credits) and served as the 81 KB webp variant
   rather than the 5.6 MB source PNG — same 2752x1536, 70x smaller. The authored SVG is kept below
   as the fallback for any browser that cannot decode webp. */
.hl-0 { background: #0a0908 url("/img/hero-scene.svg") center/cover no-repeat; opacity: .92; }
@supports (background-image: image-set("x.webp" type("image/webp"))) {
  .hl-0 { background-image: url("/img/hero.webp"); opacity: 1; }
}
.hl-1 { background: radial-gradient(70% 55% at 22% 18%, rgba(227,181,63,.14) 0%, transparent 62%),
                    radial-gradient(60% 50% at 82% 72%, rgba(139,90,43,.13) 0%, transparent 60%); }
/* Layer 2 — the canvas where the gold dust renders. */
.hl-2 canvas { width: 100%; height: 100%; display: block; opacity: .72; }
/* Layer 3 — a fine grid that reads as a jeweller's loupe grid, moves fastest. */
.hl-3 {
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px; opacity: .5;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 78%);
}
.hero .inner { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 64rem) { .hero .inner { grid-template-columns: 1.08fr .92fr; } }
.hero h1 { margin: 14px 0 0; }
.hero h1 .l2 { display: block; }
.hero .lede { margin-top: 20px; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* The trust strip needs its own ground.
 *
 * It sits in the lower left of the hero, which is exactly where the photograph's out-of-focus gold
 * chains and coins are brightest — so the muted label text was landing on bokeh and "A+ BBB rating"
 * was all but invisible. The elements never overlapped; measuring found clean gaps. It was purely
 * contrast, which is the kind of fault that survives every structural check and only shows up when
 * someone actually looks at the page.
 *
 * isolation:isolate matters: without it the z-index:-1 scrim escapes this element's stacking
 * context and slides behind the hero's background layers, where it does nothing at all. */
.hero .trust { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--hair); }
.hero .trust::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -4px -28px -14px -28px;
  /* A horizontal wash rather than a radial: the strip is a wide short row, and a radial centred on
     it falls off before the last item — which is the one that was hardest to read. Fades out to the
     right so it never reads as a panel edge sitting on the photograph. */
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ink) 92%, transparent) 0%,
      color-mix(in srgb, var(--ink) 88%, transparent) 55%,
      color-mix(in srgb, var(--ink) 55%, transparent) 82%,
      transparent 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--ink) 40%, transparent), transparent 70%);
}
.hero .trust .t { display: flex; align-items: baseline; gap: 8px; }
.hero .trust .n { font-family: var(--display); font-size: 1.7rem; font-weight: 700; color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; }
.hero .trust .c { font-size: .76rem; color: var(--muted); max-width: 13ch; line-height: 1.35; }

/* The logo medallion — slow rotate + float, purely decorative. */
.medallion { position: relative; display: grid; place-items: center; padding: 8%; }
.medallion .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line); }
.medallion .ring:nth-child(2) { inset: 8%; border-style: dashed; opacity: .6; }
.medallion .ring:nth-child(3) { inset: 16%; opacity: .35; }
.medallion .glow { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(227,181,63,.22), transparent 68%); filter: blur(22px); }
.medallion img { position: relative; width: 100%; height: auto; max-width: 440px; filter: drop-shadow(0 22px 48px rgba(0,0,0,.6)); }
@media (prefers-reduced-motion: no-preference) {
  .medallion .ring { animation: spin 46s linear infinite; }
  .medallion .ring:nth-child(2) { animation: spin 34s linear infinite reverse; }
  .medallion img { animation: float 7s ease-in-out infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

/* ==================================================================================================
   Sections
   ================================================================================================ */
section { padding: clamp(3.5rem, 2rem + 6vw, 6.5rem) 0; position: relative; }
.sec-head { max-width: 58ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.2rem); }
.sec-head h2 { margin: 12px 0 14px; }
.alt { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 12%, var(--ink-2) 88%, var(--ink) 100%); }

/* -------- reveal: visible at rest, lifted on scroll -------- */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: .999; transform: translateY(22px); transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .8s; }
  .rv[data-seen="true"] { transform: none; }
  /* Opacity is only dimmed once JS confirms it can restore it — a reader with no JS sees it fully. */
  html.js .rv:not([data-seen="true"]) { opacity: .001; }
}

/* -------- category grid -------- */
.cats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.cat {
  position: relative; display: block; padding: 24px 22px 26px; border-radius: 12px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--hair); transition: transform .3s cubic-bezier(.2,.9,.3,1.1), border-color .3s;
}
.cat::after { content: ""; position: absolute; inset: 0; background: var(--gold-grad); opacity: 0; transition: opacity .35s; mix-blend-mode: overlay; }
.cat:hover { transform: translateY(-5px); border-color: var(--line); }
.cat:hover::after { opacity: .07; }
.cat .ic { width: 42px; height: 42px; margin-bottom: 14px; color: var(--gold); }
.cat .ic svg { width: 100%; height: 100%; }
.cat h3 { font-size: 1.16rem; margin-bottom: 6px; color: var(--text); }
.cat p { font-size: .87rem; }
.cat .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: .78rem; font-weight: 700; color: var(--gold); }
.cat .go svg { width: 13px; transition: transform .25s; }
.cat:hover .go svg { transform: translateX(4px); }
.tag-new { position: absolute; top: 14px; right: 14px; font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: var(--gold-grad); color: #1c1403; padding: 4px 8px; border-radius: 4px; }

/* -------- steps -------- */
.steps { display: grid; gap: 20px; counter-reset: s; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding: 26px 24px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hair); }
.step .n { font-family: var(--display); font-size: 3.2rem; font-weight: 700; line-height: 1; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step h3 { margin: 6px 0 8px; }
.step p { font-size: .9rem; }

/* -------- stock / product cards -------- */
.stock { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.item {
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--hair); transition: transform .3s, border-color .3s, box-shadow .3s;
}
.item:hover { transform: translateY(-5px); border-color: var(--line); box-shadow: 0 18px 40px -22px rgba(0,0,0,.9); }
/* No photography yet, so each card renders a generated monogram plate. It looks deliberate rather
   than like a broken image, and drops out the moment a real photo is supplied. */
/* Guilloche plate. An engine-turned rosette is an anti-counterfeiting device, so it reads as
   "authenticated" before anyone reads a word — the right texture behind a resale designer bag, and
   a placeholder that looks deliberate rather than like a failed image load. */
.item .shot { aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative; background: #0a0908 url("/img/guilloche.svg") center/cover no-repeat; }
.item .shot::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 45%, transparent 40%, rgba(10,9,8,.55) 100%); }
.item .mono { position: relative; font-family: var(--display); font-size: 2.6rem; font-weight: 700; letter-spacing: .04em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* The one place a forced height is correct: a product photo cropped to fill a fixed 4:3 plate. */
.item .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.item .meta { padding: 16px 18px 18px; display: grid; gap: 6px; flex: 1; align-content: start; }
.item .brand-l { font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.item .name { font-family: var(--display); font-size: 1.06rem; font-weight: 700; color: var(--text); line-height: 1.25; }
.item .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; }
.item .price { font-family: var(--display); font-size: 1.32rem; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.item .sku { font-size: .68rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.badge-auth { display: inline-flex; align-items: center; gap: 5px; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--good); }
/* The tick is rendered by icon("check") with no class, and an inline <svg> carrying only a viewBox
   has no intrinsic size — it falls back to the replaced-element default and lands about 300px wide,
   dwarfing the card. Sizing it here rather than at the call site keeps every badge consistent,
   including the ones live.js builds at runtime. */
.badge-auth svg { width: 12px; height: 12px; flex: none; }

/* -------- proof strip -------- */
.proof { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
@media (min-width: 44rem) { .proof { grid-template-columns: repeat(4, 1fr); } }
.proof .p { background: var(--surface); padding: 22px 20px; text-align: center; }
.proof .p .v { font-family: var(--display); font-size: 2.1rem; font-weight: 700; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; font-variant-numeric: tabular-nums; }
.proof .p .k { font-size: .72rem; color: var(--muted); margin-top: 2px; }

/* -------- FAQ -------- */
.faq { display: grid; gap: 10px; max-width: 74ch; }
.faq details { background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; transition: border-color .3s; }
.faq details[open] { border-color: var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 17px 20px; font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--text); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 1.4rem; font-family: var(--sans); font-weight: 300; line-height: 1; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 20px 18px; font-size: .93rem; color: var(--text-2); }

/* -------- info panels -------- */
.panels { display: grid; gap: 18px; }
@media (min-width: 56rem) { .panels { grid-template-columns: 1fr 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 26px 24px; }
.panel h3 { margin-bottom: 14px; }
dl.hours { display: grid; gap: 0; }
dl.hours > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: .9rem; }
dl.hours > div:last-child { border-bottom: none; }
dl.hours dt { color: var(--text-2); }
dl.hours dd { color: var(--text); font-variant-numeric: tabular-nums; }
dl.hours > div[data-today="true"] dt, dl.hours > div[data-today="true"] dd { color: var(--gold); font-weight: 700; }
dl.hours > div[data-closed="true"] dd { color: var(--muted); }
.map { border-radius: 12px; overflow: hidden; border: 1px solid var(--hair); aspect-ratio: 16/11; background: var(--surface-2); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.4) contrast(1.05); }

/* -------- rate callout -------- */
.rate { border-left: 3px solid var(--gold); padding: 4px 0 4px 20px; margin-top: 22px; }
.rate b { color: var(--text); }
.rate p { font-size: .88rem; }
.rate a { border-bottom: 1px solid var(--line); }

/* -------- CTA band -------- */
.band { position: relative; overflow: hidden; background: linear-gradient(130deg, var(--ink-2), #241b0c 55%, var(--ink-2)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band .inner { display: grid; gap: 22px; align-items: center; text-align: center; justify-items: center; }
.band h2 { max-width: 20ch; }
.band .cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* -------- footer -------- */
footer { padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 140px; border-top: 1px solid var(--hair); background: var(--ink); }
@media (min-width: 52rem) { footer { padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem); } }
.fgrid { display: grid; gap: 30px; }
@media (min-width: 52rem) { .fgrid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.fgrid h4 { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.fgrid a { display: block; color: var(--text-2); font-size: .88rem; padding: 5px 0; transition: color .2s; }
.fgrid a:hover { color: var(--gold); }
.fgrid p { font-size: .88rem; }
.fbrand img { height: 64px; width: auto; margin-bottom: 14px; }
.social { display: flex; gap: 10px; margin-top: 14px; }
.social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 8px; padding: 0; transition: border-color .25s, color .25s, transform .25s; }
.social a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.social svg { width: 17px; height: 17px; }
.legal { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .76rem; color: var(--muted); }
.legal a { color: var(--muted); }

/* -------- sticky mobile call bar -------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--ink) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
}
@media (min-width: 52rem) { .callbar { display: none; } }
.callbar .btn { width: 100%; }

/* -------- misc -------- */
.note { font-size: .78rem; color: var(--muted); }
.two-col { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.4rem); }
@media (min-width: 58rem) { .two-col { grid-template-columns: 1fr 1fr; align-items: start; } }
.prose p + p { margin-top: 1em; }
.prose h3 { margin: 1.6em 0 .5em; color: var(--text); }
.prose ul { margin: .8em 0 0 1.1em; }
.prose li { color: var(--text-2); margin-bottom: .45em; font-size: .95rem; }
.crumb { font-size: .76rem; color: var(--muted); padding-top: 22px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--gold); }

/* -------- live shop window --------------------------------------------------------------------
   The strip above the grid. It has two states and both are honest: "checked <date>" when the page
   is serving its committed snapshot, and "live" once /api/stock has answered with fresh data. The
   dot is grey in the first state and green in the second, so the claim and the colour cannot drift
   apart — there is no state where it looks live and isn't. */
.livebar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 11px 16px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 10px;
  font-size: .78rem; color: var(--muted);
}
.livebar .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--muted); box-shadow: 0 0 0 3px rgba(255,255,255,.04);
}
.livebar[data-live="true"] .dot { background: var(--good); box-shadow: 0 0 0 3px rgba(74,222,128,.14); }
@media (prefers-reduced-motion: no-preference) {
  .livebar[data-live="true"] .dot { animation: lvpulse 2.4s ease-in-out infinite; }
}
@keyframes lvpulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,.14); }
  50%      { box-shadow: 0 0 0 6px rgba(74,222,128,.04); }
}
.livebar .lv-text { font-variant-numeric: tabular-nums; }
.livebar[data-live="true"] .lv-when { color: var(--good); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; }
.livebar .lv-all { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--gold); font-weight: 700; text-decoration: none; white-space: nowrap; }
.livebar .lv-all:hover { text-decoration: underline; }
.livebar .lv-all .i { width: 14px; height: 14px; }

/* A card is now an <a> to the real listing, so it has to shed the link defaults the reset gives it
   and grow a visible focus ring — it is a keyboard target, not a decorative tile. */
.item { text-decoration: none; color: inherit; }
.item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.item .cond { font-size: .72rem; color: var(--muted); }
/* "or best offer" rides along with the price without competing with it. Every one of these
   listings takes offers, and saying so is the difference between a price and an invitation. */
.item .price em {
  display: block; font-style: normal; font-size: .64rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 1px;
}
/* A card inserted by live.js is never seen by the reveal observer — that observer collected its
   targets at load and has already stopped — so live.js stamps data-seen="true" on what it builds.
   That is the same attribute the observer sets, so there is no second code path to keep in sync
   and no extra rule needed here. Noted because the failure is silent: without the stamp the card
   sits in the DOM at opacity .001, passing every structural check while being invisible. */

/* ================================================================================================
   THE TRUTH SECTION — the homepage centrepiece.

   It has to break the page's rhythm hard enough that a reader stops, which is a structural job
   before it is a decorative one: the section goes full-bleed and near-black while everything
   around it is panelled, so the change of ground does the work rather than an effect.

   Everything below has a visible resting state. Strip the JS and you get the same section without
   the stagger — the reveal lifts it, it does not create it.
   ============================================================================================= */
.truth {
  position: relative; isolation: isolate; overflow: hidden;
  background: #070605;
  padding-block: clamp(56px, 9vw, 108px);
  border-block: 1px solid var(--hair);
}
/* A slow gold wash off the top-left, so the black is lit rather than flat. Pure #070605 across a
   whole section bands visibly on an OLED phone; a gradient plus the grain below fixes it. */
.truth::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 70% at 22% 0%, rgba(227,181,63,.13), transparent 70%);
  pointer-events: none; z-index: -2;
}
.t-grain {
  position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image: url("/img/guilloche.svg");
  background-size: 620px; background-position: 88% 12%; background-repeat: no-repeat;
  mask-image: radial-gradient(58% 58% at 88% 12%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(58% 58% at 88% 12%, #000 10%, transparent 72%);
}
@media (max-width: 60rem) { .t-grain { display: none; } }

.t-inner { position: relative; }
.t-h {
  font-family: var(--display); font-weight: 700; line-height: 1.04;
  font-size: clamp(1.9rem, 5.4vw, 3.5rem); letter-spacing: -.015em;
  max-width: 20ch; text-wrap: balance; margin: 10px 0 0;
  color: var(--text);
}
.t-lede { max-width: 62ch; margin-top: 18px; color: var(--muted); font-size: 1.02rem; line-height: 1.66; }
.t-sub {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--text); margin: 0 0 20px;
}

/* -------- the three reversals --------
   The stereotype is set large and struck out, the answer sits under it in full contrast. The
   <s> element carries the meaning; these rules only style it. */
.myths { list-style: none; margin: clamp(34px, 5vw, 56px) 0 0; padding: 0; display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
@media (min-width: 62rem) { .myths { grid-template-columns: repeat(3, 1fr); } }
.myth { background: #0b0a09; padding: 26px 24px 28px; position: relative; display: grid; align-content: start; gap: 12px; }
.myth .m-n {
  font-family: var(--display); font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  color: var(--gold); opacity: .55; font-variant-numeric: tabular-nums;
}
.m-movie { margin: 0; font-family: var(--display); font-size: 1.24rem; line-height: 1.3; color: var(--muted); }
/* The strike is drawn in gold rather than the text colour, so the correction reads as deliberate
   instead of looking like a rendering fault. */
.m-movie s { text-decoration: line-through; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.m-truth { margin: 0; color: var(--text); font-size: .95rem; line-height: 1.68; }

/* -------- the compliance chain --------
   The part no pawn shop website shows. Drawn as a process with a rule running through it, because
   the sequence IS the argument — each step is unremarkable, and the whole is the reason to trust
   the counter. */
.chain { margin-top: clamp(40px, 6vw, 68px); }
.ch-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
@media (min-width: 62rem) { .ch-steps { grid-template-columns: repeat(5, 1fr); } }
.ch { position: relative; padding: 0 0 26px 26px; display: grid; gap: 5px; align-content: start; }
@media (min-width: 62rem) { .ch { padding: 30px 20px 0 0; } }
/* The rule. Vertical on a phone, horizontal on a desktop — one border, flipped. */
.ch::before {
  content: ""; position: absolute; left: 4px; top: 6px; bottom: -6px; width: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(227,181,63,.12));
}
.ch:last-child::before { background: linear-gradient(180deg, var(--gold), transparent); }
@media (min-width: 62rem) {
  .ch::before { left: 0; right: 0; top: 4px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(227,181,63,.12)); }
  .ch:last-child::before { background: linear-gradient(90deg, var(--gold), transparent); }
}
.ch-dot { position: absolute; left: 0; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(227,181,63,.12); }
@media (min-width: 62rem) { .ch-dot { top: 0; transform: translateY(-50%); } }
.ch-k { font-weight: 700; color: var(--text); font-size: .93rem; line-height: 1.35; }
.ch-v { color: var(--muted); font-size: .84rem; line-height: 1.6; }
.t-cite { margin: 22px 0 0; font-size: .76rem; color: var(--muted); opacity: .85; }

/* -------- where the price goes --------
   Two chains side by side. The retail column is deliberately the longer list and is dimmed; the
   comparison is made by the number of steps, not by an adjective. */
.markup { margin-top: clamp(40px, 6vw, 68px); }
.mk-cols { display: grid; gap: 16px; }
@media (min-width: 48rem) { .mk-cols { grid-template-columns: 1fr 1fr; gap: 20px; } }
.mk { border: 1px solid var(--hair); border-radius: 12px; padding: 22px 22px 24px; background: var(--surface); }
.mk-ours { border-color: rgba(227,181,63,.32); background: linear-gradient(180deg, rgba(227,181,63,.05), transparent 60%), var(--surface); }
.mk-label { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.mk-ours .mk-label { color: var(--gold); }
.mk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: mk; }
.mk-steps li { position: relative; padding-left: 20px; font-size: .9rem; color: var(--muted); line-height: 1.45; }
.mk-steps li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }
/* The arrow between steps is what makes it read as a chain rather than a bulleted list. */
.mk-steps li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 1.25em; height: calc(100% - .7em); width: 1px; background: currentColor; opacity: .22; }
.mk-ours .mk-steps li { color: var(--text); }
.mk-ours .mk-steps li::before { background: var(--gold); opacity: 1; }
.mk-steps li:last-child { font-weight: 700; color: var(--text); }
.mk-note { margin: 18px 0 0; max-width: 68ch; color: var(--muted); font-size: .89rem; line-height: 1.66; }

/* -------- the film ----------------------------------------------------------------------------
   Sits at the head of the truth section. The poster frame is the resting state and the native
   controls only appear once someone presses play, so the block reads as a still rather than as a
   piece of browser chrome sitting in the middle of the page. */
/* Capped at 940 rather than run full-bleed, for two reasons that happen to agree. Editorially a
   centred film reads as a considered inset rather than a banner. Practically, the only copy of this
   film currently available is the 640x360 encode the Meta Ad Library serves — blown across a
   1100px column that is visibly soft, while at this width it holds up. Swap in the 1080p master
   and the cap can be lifted; until then the design should not advertise the placeholder's limits. */
.tvid { margin: clamp(30px, 4.5vw, 46px) auto 0; max-width: 940px; }
.tvid-frame {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--hair); background: #000;
  aspect-ratio: 16 / 9; max-width: 100%;
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.95);
}
.tvid-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
/* Hide the native control bar until first play, so the resting state is a clean poster. */
.tvid-frame:not([data-played="true"]) video::-webkit-media-controls { display: none !important; }

.tvid-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(180deg, rgba(10,9,8,.15), rgba(10,9,8,.6));
  border: 0; cursor: pointer; color: var(--text); font: inherit;
  transition: background .3s, opacity .25s;
}
.tvid-play:hover { background: linear-gradient(180deg, rgba(10,9,8,.05), rgba(10,9,8,.5)); }
.tvid-play:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.tvid-frame[data-played="true"] .tvid-play { opacity: 0; pointer-events: none; }

/* The disc. A CSS triangle rather than an icon file — it is three lines and it scales cleanly. */
.tvid-tri {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-grad); box-shadow: 0 10px 34px -10px rgba(227,181,63,.75);
  transition: transform .3s;
}
.tvid-tri::after {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 19px solid #0a0908; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.tvid-play:hover .tvid-tri { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) { .tvid-play:hover .tvid-tri { transform: none; } }

.tvid-lbl {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text); text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
.tvid-cap { margin: 12px 2px 0; font-size: .78rem; color: var(--muted); }

/* -------- page artwork ------------------------------------------------------------------------
   An inner hero with a backdrop. The image is set as a custom property on the section so one rule
   serves every page, and it sits UNDER a gradient that runs to near-opaque on the left, where the
   headline and lede live — the picture is atmosphere and the words must never fight it for
   contrast. Same discipline as the homepage hero, which keeps its left third dark on purpose. */
.hero-art { position: relative; isolation: isolate; }
.hero-art::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--art, none) center/cover no-repeat;
  opacity: .5;
}
.hero-art::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 82%, transparent) 42%, transparent 78%),
    linear-gradient(0deg, var(--ink) 0%, transparent 42%);
}
/* On a phone the text runs the full width, so the wash has to come from below rather than the side
   or the headline lands on top of the busiest part of the picture. */
@media (max-width: 52rem) {
  .hero-art::before { opacity: .34; }
  .hero-art::after {
    background: linear-gradient(0deg, var(--ink) 6%, color-mix(in srgb, var(--ink) 72%, transparent) 58%, color-mix(in srgb, var(--ink) 40%, transparent) 100%);
  }
}

/* -------- the storefront ----------------------------------------------------------------------
   The only real photograph the business owns. Given room rather than tucked into a panel, because
   its job on the contact page is recognition — someone slowing down on Richmond Highway looking for
   the lit sign. Capped at 820 so a 1074px source is never upscaled. */
.shopfront { margin: 0 auto; max-width: 820px; }
.shopfront img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid var(--hair); box-shadow: 0 30px 70px -44px rgba(0,0,0,.95);
}
.shopfront figcaption { margin-top: 12px; font-size: .82rem; color: var(--muted); text-align: center; }