/* ==========================================================================
   Canadian Coins & Collectibles — "The Vault" design system
   Dark jewel-box luxury · metallic gold + brushed silver · Cormorant + Manrope
   ========================================================================== */

/* ---------- Fonts (self-hosted variable fonts) ---------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-var-latin.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --bg-0: #080A0F;
  --bg-1: #0D111A;
  --bg-2: #121A28;
  --bg-3: #1A2333;
  --ivory: #F4EFE6;
  --ivory-2: #EAE3D6;
  --ivory-3: #DED5C4;
  --ink: #151922;
  --ink-2: #4B5262;
  --ink-3: #7A8191;
  --gold: #C9A34A;
  --gold-2: #E8CF7A;
  --gold-3: #8F6F2A;
  --gold-glow: rgba(201, 163, 74, 0.35);
  --silver: #B9C0CC;
  --silver-2: #E3E7ED;
  --silver-3: #7F8796;
  --burgundy: #6E1B2B;
  --burgundy-2: #8E2639;
  --text: #EEE9DF;
  --text-2: #B6B0A4;
  --text-3: #807A6F;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-gold: rgba(201, 163, 74, 0.35);

  --gold-gradient: linear-gradient(135deg, #8F6F2A 0%, #C9A34A 30%, #F1DC8C 50%, #C9A34A 70%, #8F6F2A 100%);
  --gold-text: linear-gradient(110deg, #B8923C 0%, #E8CF7A 45%, #F6E6A8 50%, #E8CF7A 55%, #B8923C 100%);
  --silver-gradient: linear-gradient(135deg, #7F8796 0%, #C8CED8 40%, #F0F3F7 50%, #C8CED8 60%, #7F8796 100%);

  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1200px;
  --wrap-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8rem);
  --radius: 6px;
  --radius-lg: 14px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 12px 40px rgba(201, 163, 74, 0.18);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --header-h: 78px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  /* long unbreakable strings (emails, URLs) must wrap, never force a
     container wider than the screen. "anywhere" rather than "break-word"
     because only "anywhere" also shrinks the element's min-content width,
     which is what stops a long email address widening its grid column. */
  overflow-wrap: anywhere;
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.drawer-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--bg-0); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 1000;
  padding: .6rem 1rem; background: var(--gold); color: var(--bg-0); font-weight: 700; border-radius: 4px;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Typography ---------- */
.display, h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ivory);
}
h1, .h1 { font-size: clamp(2.6rem, 6vw, 4.75rem); }
h2, .h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
h3, .h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); }
h4 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; color: var(--ivory); }
.light h1, .light h2, .light h3, .light .h2, .light .h3 { color: var(--ink); }
.light h4 { color: var(--ink); }
em.accent { font-style: italic; font-weight: 500; }
.gold-text {
  background: var(--gold-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  background-size: 200% auto;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.eyebrow::before { content: ''; width: 2.25rem; height: 1px; background: var(--gold); opacity: .8; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { content: ''; width: 2.25rem; height: 1px; background: var(--gold); opacity: .8; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.7; color: var(--text-2); max-width: 62ch; }
.light .lede { color: var(--ink-2); }
.light { color: var(--ink); }
.light p { color: var(--ink-2); }
p + p { margin-top: 1em; }
.muted { color: var(--text-3); }
.small { font-size: .875rem; }
.sec-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head--center .lede { margin-left: auto; margin-right: auto; }
.sec-head h2 { margin-bottom: 1rem; }
.sec-head--split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem 4rem; align-items: end; max-width: none; }
.sec-head--split .lede { margin-bottom: .35rem; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; overflow-x: clip; }
.section--tight { padding-block: calc(var(--section) * .6); }
.bg-0 { background: var(--bg-0); }
.bg-1 { background: var(--bg-1); }
.bg-2 { background: var(--bg-2); }
.bg-ivory { background: var(--ivory); }
.bg-ivory-2 { background: var(--ivory-2); }
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.hair { height: 1px; background: linear-gradient(90deg, transparent, var(--line-gold), transparent); }
.hair--light { background: linear-gradient(90deg, transparent, rgba(21,25,34,.18), transparent); }

.h-label { font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ivory); --btn-bd: var(--line-2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.75rem; min-height: 52px;
  font-family: var(--font-body); font-weight: 700; font-size: .92rem; letter-spacing: .04em;
  color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: var(--radius);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  overflow: hidden; isolation: isolate; white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform .35s var(--ease); }
/* .btn sets overflow:hidden for its shine sweep, so a label that cannot wrap gets
   silently CUT OFF instead of pushed out. Never nowrap text we then clip. */
.btn { white-space: normal; text-align: center; }
.btn:hover svg { transform: translateX(3px); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--gold {
  --btn-fg: #1B1505; --btn-bd: transparent;
  background: var(--gold-gradient); background-size: 200% auto;
  box-shadow: 0 8px 24px rgba(201, 163, 74, 0.22), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--gold::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn--gold:hover { box-shadow: 0 14px 36px rgba(201, 163, 74, 0.34), inset 0 1px 0 rgba(255,255,255,.4); }
.btn--gold:hover::after { transform: translateX(120%); }
.btn--ghost { --btn-bg: rgba(255,255,255,.03); --btn-bd: var(--line-2); backdrop-filter: blur(6px); }
.btn--ghost:hover { --btn-bd: var(--gold); --btn-fg: var(--gold-2); background: rgba(201,163,74,.06); }
.btn--silver {
  --btn-fg: #0F131B; --btn-bd: transparent;
  background: var(--silver-gradient); background-size: 200% auto;
  box-shadow: 0 8px 24px rgba(185, 192, 204, 0.18), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--ivory); --btn-bd: var(--ink); }
.btn--dark:hover { --btn-bg: #232938; }
.btn--outline-dark { --btn-fg: var(--ink); --btn-bd: rgba(21,25,34,.28); }
.btn--outline-dark:hover { --btn-bd: var(--ink); background: rgba(21,25,34,.04); }
.btn--sm { padding: .7rem 1.2rem; min-height: 42px; font-size: .85rem; }
.btn--lg { padding: 1.1rem 2.1rem; min-height: 58px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .92rem; letter-spacing: .02em; color: var(--gold-2);
}
.link-arrow svg { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.light .link-arrow { color: var(--gold-3); }

/* ---------- Header ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 1001;
  background: var(--gold-gradient); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--header-h);
  transition: background .4s, border-color .4s, backdrop-filter .4s, box-shadow .4s;
  border-bottom: 1px solid transparent;
}
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,10,15,.75), rgba(8,10,15,0));
  opacity: 1; transition: opacity .4s;
}
.site-header.is-scrolled { background: rgba(8, 10, 15, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.site-header.is-scrolled::before { opacity: 0; }
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-width: 0; }
.brand { min-width: 0; }
.brand__text { min-width: 0; }
.nav-actions { flex: none; }
.brand { display: inline-flex; align-items: center; gap: .85rem; }
.brand__mark { width: 48px; height: 48px; flex: none; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(201,163,74,.3)); transition: transform .5s var(--ease); }
.brand:hover .brand__mark { transform: scale(1.06) rotate(-4deg); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; color: var(--ivory); letter-spacing: .01em; white-space: nowrap; }
.brand__sub { font-size: .62rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-top: .2rem; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 1.4rem; list-style: none; }
.nav-links li { flex: none; }
.nav-links a {
  white-space: nowrap;
  position: relative; font-size: .88rem; font-weight: 600; letter-spacing: .03em; color: var(--text-2);
  padding: .4rem 0; transition: color .3s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold-gradient); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ivory); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-actions { display: flex; align-items: center; gap: 1rem; flex: none; }
.nav-toggle {
  display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2);
  align-items: center; justify-content: center; color: var(--ivory); background: rgba(255,255,255,.03);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .x { display: none; }

/* Mobile drawer */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 950; background: rgba(8,10,15,.6); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 960; width: min(88vw, 400px);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-0));
  border-left: 1px solid var(--line-gold);
  transform: translateX(105%); visibility: hidden;
  transition: transform .55s var(--ease), visibility 0s linear .55s;
  display: flex; flex-direction: column; padding: 1.5rem var(--gutter) 2rem;
  overflow-y: auto;
}
.drawer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 300px at 110% -10%, rgba(201,163,74,.14), transparent 60%);
}
.drawer-open .drawer { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.drawer-open .drawer-overlay { opacity: 1; pointer-events: auto; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; }
.drawer__close { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; }
.drawer__close svg { width: 20px; height: 20px; }
.drawer__links { list-style: none; display: flex; flex-direction: column; }
.drawer__links li { border-bottom: 1px solid var(--line); transform: translateX(24px); opacity: 0; transition: transform .5s var(--ease), opacity .5s; }
.drawer-open .drawer__links li { transform: none; opacity: 1; }
.drawer-open .drawer__links li:nth-child(1) { transition-delay: .12s; }
.drawer-open .drawer__links li:nth-child(2) { transition-delay: .17s; }
.drawer-open .drawer__links li:nth-child(3) { transition-delay: .22s; }
.drawer-open .drawer__links li:nth-child(4) { transition-delay: .27s; }
.drawer-open .drawer__links li:nth-child(5) { transition-delay: .32s; }
.drawer-open .drawer__links li:nth-child(6) { transition-delay: .37s; }
.drawer__links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 0; font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; color: var(--ivory);
}
.drawer__links a[aria-current="page"] { color: var(--gold-2); }
.drawer__links a svg { width: 18px; height: 18px; color: var(--gold); }
.drawer__cta { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }
.drawer__meta { margin-top: auto; padding-top: 2rem; font-size: .85rem; color: var(--text-2); }
.drawer__meta a { color: var(--gold-2); }

/* ---------- Social icons ---------- */
.socials { display: flex; gap: .6rem; list-style: none; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--text-2); background: rgba(255,255,255,.02);
  transition: all .3s var(--ease);
}
.socials a:hover { color: var(--bg-0); background: var(--gold-2); border-color: var(--gold-2); transform: translateY(-3px); box-shadow: var(--shadow-gold); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding-top: calc(var(--header-h) + 2rem); padding-bottom: 5rem;
  background: var(--bg-0); overflow: hidden; isolation: isolate;
}
.hero__bg { position: absolute; inset: -6%; z-index: -3; will-change: transform; }
/* Slow zoom-in while the cursor is over the hero (uses the independent `scale` property so it stacks with the JS parallax translate) */
@media (hover: hover) and (pointer: fine) {
  .hero__bg { scale: 1; transition: scale 14s cubic-bezier(0.22, 1, 0.36, 1); }
  .hero:hover .hero__bg { scale: 1.1; }
}
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 68% center;
  transform: scale(1.02); animation: heroZoom 18s var(--ease-in-out) both;
}
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.hero__shade { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,10,15,.92) 0%, rgba(8,10,15,.78) 28%, rgba(8,10,15,.25) 58%, rgba(8,10,15,.05) 100%),
    linear-gradient(180deg, rgba(8,10,15,.55) 0%, rgba(8,10,15,0) 30%, rgba(8,10,15,0) 70%, var(--bg-1) 100%);
}
.hero__glint {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: linear-gradient(112deg, transparent 35%, rgba(232,207,122,.18) 48%, rgba(255,255,255,.12) 50%, rgba(232,207,122,.18) 52%, transparent 65%);
  background-size: 260% 100%; background-position: 120% 0;
  animation: glintSweep 9s var(--ease-in-out) 1.4s infinite;
}
@keyframes glintSweep { 0% { background-position: 120% 0; } 45% { background-position: -60% 0; } 100% { background-position: -60% 0; } }
.hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .9; }
.hero__content { position: relative; max-width: 620px; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: .8rem; font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 1.5rem; }
.hero__eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201,163,74,.18); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(201,163,74,.2); } 50% { box-shadow: 0 0 0 8px rgba(201,163,74,0); } }
.hero h1 { font-size: clamp(2.75rem, 6.4vw, 5.4rem); line-height: 1.02; margin-bottom: 1.5rem; }
.hero h1 em { font-style: italic; font-weight: 500; }
.hero .lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin-bottom: 2.25rem; max-width: 46ch; }
.hero__trust { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--text-2); }
.hero__trust span { display: inline-flex; align-items: center; gap: .5rem; }
.hero__trust svg { width: 15px; height: 15px; color: var(--gold); }
.hero__scroll {
  position: absolute; right: var(--gutter); bottom: 2rem;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--text-3);
}
.hero__scroll span.line { width: 1px; height: 44px; background: linear-gradient(180deg, var(--gold), transparent); overflow: hidden; position: relative; }
.hero__scroll span.line::after { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--ivory); animation: scrollLine 2.2s var(--ease-in-out) infinite; }
@keyframes scrollLine { 0% { top: -100%; } 60%, 100% { top: 110%; } }

/* Hero staggered entrance */
.js [data-stagger] > * { opacity: 0; transform: translateY(28px); filter: blur(6px); }
.is-loaded [data-stagger] > * { animation: riseIn 1.1s var(--ease) forwards; }
.is-loaded [data-stagger] > *:nth-child(1) { animation-delay: .15s; }
.is-loaded [data-stagger] > *:nth-child(2) { animation-delay: .3s; }
.is-loaded [data-stagger] > *:nth-child(3) { animation-delay: .48s; }
.is-loaded [data-stagger] > *:nth-child(4) { animation-delay: .64s; }
.is-loaded [data-stagger] > *:nth-child(5) { animation-delay: .82s; }
@keyframes riseIn { to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- Trust bar ---------- */
.trustbar { position: relative; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trustbar::before { content: ''; position: absolute; top: -1px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.trustbar__list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.trustbar__list li { display: flex; align-items: center; gap: .9rem; padding: 1.35rem 1.5rem; border-right: 1px solid var(--line); font-size: .9rem; color: var(--text-2); }
.trustbar__list li:first-child { padding-left: 0; }
.trustbar__list li:last-child { border-right: 0; }
.trustbar__list strong { display: block; color: var(--ivory); font-weight: 700; font-size: .95rem; }
.trustbar__ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-gold); color: var(--gold-2); background: radial-gradient(circle at 30% 30%, rgba(201,163,74,.18), transparent 70%); }
.trustbar__ico svg { width: 20px; height: 20px; }

/* ---------- Service cards ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.svc-card {
  position: relative; display: flex; flex-direction: column; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.svc-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(400px 200px at var(--mx, 50%) var(--my, 0%), rgba(201,163,74,.16), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.svc-card:hover { transform: translateY(-8px); border-color: var(--line-gold); box-shadow: var(--shadow), var(--shadow-gold); }
.svc-card:hover::after { opacity: 1; }
.svc-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-0); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.svc-card:hover .svc-card__media img { transform: scale(1.06); }
.svc-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--bg-2)); }
.svc-card__num { position: absolute; top: 1rem; left: 1rem; z-index: 1; font-family: var(--font-display); font-size: .95rem; font-weight: 700; letter-spacing: .1em; color: var(--gold-2); padding: .35rem .7rem; border: 1px solid var(--line-gold); border-radius: 999px; background: rgba(8,10,15,.55); backdrop-filter: blur(6px); }
.svc-card__body { padding: 1.5rem 1.75rem 1.9rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.svc-card__body h3 { font-size: 1.6rem; }
.svc-card__body p { color: var(--text-2); font-size: .96rem; }
.svc-card__body .link-arrow { margin-top: auto; padding-top: .5rem; }

/* ---------- Steps / How it works ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; position: relative; counter-reset: step; }
.steps::before { content: ''; position: absolute; top: 30px; left: calc(12.5% + 30px); right: calc(12.5% + 30px); height: 1px; background: linear-gradient(90deg, var(--gold-3), var(--gold), var(--gold-3)); opacity: .6; }
.step { position: relative; text-align: center; padding: 0 .5rem; }
.step__coin {
  position: relative; width: 60px; height: 60px; margin: 0 auto 1.4rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: #1B1505;
  background: var(--gold-gradient); box-shadow: 0 10px 30px rgba(201,163,74,.3), inset 0 0 0 3px rgba(255,255,255,.25), inset 0 0 0 5px rgba(143,111,42,.5);
}
.step__coin::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--line-gold); }
.light .step__coin::after { border-color: rgba(143,111,42,.35); }
.step h3 { font-size: 1.45rem; margin-bottom: .6rem; }
.step p { font-size: .95rem; }
.light .step p { color: var(--ink-2); }
.light .steps::before { opacity: .45; }

/* Submissions "the process" split — was an inline style, which media queries
   cannot override, so on mobile the second column stayed 481px wide inside a
   350px container and ran the text off-screen. Keep layout in CSS. */
.process-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: start; }
.process-split__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
@media (max-width: 960px) {
  .process-split { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .process-split__intro { position: static; }
}

/* Vertical detailed steps (PCGS page) */
.vsteps { list-style: none; display: flex; flex-direction: column; gap: 0; counter-reset: v; }
.vstep { display: grid; grid-template-columns: 76px 1fr; gap: 1.5rem; position: relative; padding-bottom: 2.75rem; }
.vstep::before { content: ''; position: absolute; left: 30px; top: 68px; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--gold), rgba(201,163,74,.15)); }
.vstep:last-child::before { display: none; }
.vstep:last-child { padding-bottom: 0; }
.vstep .step__coin { margin: 0; }
.vstep h3 { font-size: 1.6rem; margin-bottom: .5rem; }
.vstep p { color: var(--text-2); }
.vstep ul { margin-top: .8rem; padding-left: 1.1rem; color: var(--text-2); }
.vstep li + li { margin-top: .35rem; }

/* ---------- Why / Tilt coin ---------- */
.why { display: grid; grid-template-columns: .95fr 1.05fr; gap: 4rem; align-items: center; }
.why__photo { position: relative; }
.why__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.why__photo::before { content: ''; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1px solid var(--line-gold); border-radius: var(--radius-lg); z-index: -1; }
.why__photo::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); pointer-events: none; background: linear-gradient(180deg, rgba(8,10,15,0) 60%, rgba(8,10,15,.55)); }
.why__badge {
  position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .7rem; padding: .8rem 1.1rem;
  background: rgba(8,10,15,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-gold); border-radius: 10px; color: var(--gold-2);
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35;
}
.why__badge svg { width: 22px; height: 22px; flex: none; }
/* Two credential lines now, so bound the badge to the photo and let it wrap:
   at 320px the unbounded pill was ~312px against a 296px column. */
.why__badge { max-width: calc(100% - 2.5rem); }
@media (max-width: 420px) {
  .why__badge { font-size: .68rem; letter-spacing: .08em; padding: .7rem .85rem; gap: .55rem; }
  .why__badge svg { width: 18px; height: 18px; }
}
/* At 320px the 256px cap left ~202px of text room and PCGS AUTHORIZED DEALER #5628
   needed ~213px, orphaning the cert number onto its own line. */
@media (max-width: 360px) {
  .why__badge { font-size: .62rem; letter-spacing: .05em; }
}
.why__list { list-style: none; display: flex; flex-direction: column; gap: 1.4rem; margin-top: 2rem; }
.why__list li { display: grid; grid-template-columns: 52px 1fr; gap: 1.2rem; align-items: start; }
.why__ico { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line-gold); background: linear-gradient(145deg, rgba(201,163,74,.16), rgba(201,163,74,.02)); color: var(--gold-2); }
.why__ico svg { width: 24px; height: 24px; }
.why__list h3 { font-size: 1.35rem; margin-bottom: .3rem; font-family: var(--font-body); font-weight: 700; }
.why__list p { color: var(--text-2); font-size: .95rem; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.stat { text-align: left; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 600; line-height: 1; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__lbl { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-top: .5rem; }

/* ---------- Giveaway ---------- */
.giveaway {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line-gold);
  background: linear-gradient(120deg, #2A0E15 0%, var(--burgundy) 45%, #3A1119 100%);
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 2rem; min-height: 320px;
}
.giveaway::before { content: ''; position: absolute; inset: 0; background: radial-gradient(700px 400px at 85% 50%, rgba(201,163,74,.28), transparent 60%); pointer-events: none; }
.giveaway__body { position: relative; padding: clamp(2rem, 4vw, 3.5rem); min-width: 0; } /* min-width:0: without it the item keeps its min-content width and .giveaway overflow:hidden clips it */
.giveaway__tag { white-space: normal; max-width: 100%; display: inline-flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); padding: .4rem .9rem; border: 1px solid var(--line-gold); border-radius: 999px; margin-bottom: 1.25rem; background: rgba(8,10,15,.25); }
.giveaway h2 { margin-bottom: .8rem; }
.giveaway p { color: #E9D6DA; max-width: 48ch; }
.giveaway__media { position: relative; height: 100%; min-height: 280px; }
.giveaway__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(90deg, transparent, #000 35%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); }
.giveaway__media--slab { display: grid; place-items: center; padding: 2rem 2rem 2rem 0; min-height: 340px; }
.giveaway__media--slab::before { content: ''; position: absolute; inset: 10% 0; background: radial-gradient(ellipse at center, rgba(232,207,122,.35), transparent 62%); filter: blur(14px); }
.giveaway__media--slab img { position: relative; width: auto; height: auto; max-height: 380px; max-width: 85%; object-fit: contain; mask-image: none; -webkit-mask-image: none; filter: drop-shadow(0 26px 40px rgba(0,0,0,.55)); transition: transform .6s var(--ease); }
.giveaway:hover .giveaway__media--slab img { transform: translateY(-6px) rotate(1.5deg); }
.giveaway__prize { position: absolute; bottom: 1.25rem; right: 1.25rem; background: rgba(8,10,15,.7); backdrop-filter: blur(10px); border: 1px solid var(--line-gold); border-radius: 10px; padding: .9rem 1.1rem; font-size: .8rem; color: var(--text-2); }
.giveaway__prize strong { display: block; color: var(--gold-2); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: .01em; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.quote {
  position: relative; background: #fff; border: 1px solid rgba(21,25,34,.08); border-radius: var(--radius-lg);
  padding: 2.25rem 1.9rem 1.9rem; box-shadow: 0 10px 40px rgba(21,25,34,.06); transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.quote:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(21,25,34,.12); }
.quote::before { content: '\201C'; position: absolute; top: .2rem; left: 1.4rem; font-family: var(--font-display); font-size: 5rem; line-height: 1; color: var(--gold); opacity: .55; }
.quote p { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.45; color: var(--ink); font-weight: 500; }
.quote footer { margin-top: 1.4rem; display: flex; align-items: center; gap: .8rem; font-size: .85rem; color: var(--ink-2); }
.quote footer strong { display: block; color: var(--ink); font-weight: 700; }
.quote__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-gradient); color: #1B1505; font-weight: 800; font-size: .85rem; flex: none; }
.stars { display: inline-flex; gap: 2px; color: var(--gold); margin-bottom: .9rem; }
.stars svg { width: 15px; height: 15px; fill: currentColor; }
.placeholder-note { margin-top: 1.5rem; text-align: center; font-size: .78rem; color: var(--ink-3); font-style: italic; }

/* ---------- Newsletter ---------- */
.newsletter { position: relative; overflow: hidden; }
.newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.newsletter h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: .75rem; }
.newsletter p { color: var(--text-2); max-width: 46ch; }
.nl-form { display: flex; gap: .6rem; padding: .5rem; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255,255,255,.03); }
.nl-form input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ivory); padding: .8rem 1rem; font: inherit; }
.nl-form input::placeholder { color: var(--text-3); }
.nl-form input:focus { outline: none; }
.nl-form .btn { flex: none; }
.nl-note { font-size: .78rem; color: var(--text-3); margin-top: .8rem; }
.form-msg { margin-top: .9rem; font-size: .9rem; padding: .75rem 1rem; border-radius: 8px; display: none; }
.form-msg.is-ok { display: block; background: rgba(80,180,120,.12); border: 1px solid rgba(80,180,120,.4); color: #B9E8CB; }
.form-msg.is-err { display: block; background: rgba(200,60,60,.12); border: 1px solid rgba(200,60,60,.4); color: #F3B8B8; }
.light .form-msg.is-ok { color: #1C6B3C; background: rgba(80,180,120,.12); }
.light .form-msg.is-err { color: #8B1E1E; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; text-align: center; isolation: isolate; }
.cta-band__bg { position: absolute; inset: 0; z-index: -2; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.cta-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 500px at 50% 60%, rgba(8,10,15,.1), rgba(8,10,15,.85)); }
.cta-band h2 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 18ch; margin: 0 auto 1rem; }
.cta-band p { color: var(--text-2); max-width: 52ch; margin: 0 auto 2.25rem; }
.cta-band .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-0); border-top: 1px solid var(--line); position: relative; }
.site-footer::before { content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 3rem; padding: 4.5rem 0 3rem; }
.footer__blurb { color: var(--text-2); font-size: .92rem; margin: 1.1rem 0 1.5rem; max-width: 36ch; }
.footer__grid .footer__h { margin: 0; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer__links a { color: var(--text-2); font-size: .93rem; transition: color .25s, padding-left .3s var(--ease); }
.footer__links a:hover { color: var(--gold-2); padding-left: .35rem; }
.footer__contact { list-style: none; display: flex; flex-direction: column; gap: .9rem; font-size: .92rem; color: var(--text-2); }
.footer__contact li { display: flex; gap: .7rem; align-items: flex-start; }
.footer__contact svg { width: 17px; height: 17px; color: var(--gold); flex: none; margin-top: .2rem; }
.footer__contact a { color: var(--ivory); word-break: break-all; }
.footer__contact a:hover { color: var(--gold-2); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem 0 2rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--text-3); }
.footer__bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__bottom a:hover { color: var(--gold-2); }
.pcgs-badge { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .3rem; text-decoration: none; }
.pcgs-badge img { width: 118px; height: auto; display: block; }
.pcgs-badge em { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.pcgs-badge:hover em { color: var(--ivory); }

/* ---------- Inner page hero ---------- */
.page-hero {
  position: relative; padding: calc(var(--header-h) + clamp(4rem, 9vw, 7rem)) 0 clamp(3.5rem, 7vw, 5.5rem);
  background: var(--bg-0); overflow: hidden; isolation: isolate;
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .68; animation: heroZoom 14s var(--ease-in-out) both; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,10,15,.95) 0%, rgba(8,10,15,.8) 45%, rgba(8,10,15,.35) 100%), linear-gradient(180deg, rgba(8,10,15,.4), var(--bg-1) 100%); }
.page-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); margin-bottom: 1.1rem; max-width: 16ch; }
.page-hero .lede { max-width: 58ch; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; list-style: none; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.5rem; }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--gold-2); }
.crumbs li + li::before { content: '/'; margin-right: .6rem; color: var(--gold-3); }
.page-hero .btn-row { margin-top: 2rem; }

/* ---------- Feature rows (services) ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.feature + .feature { margin-top: clamp(4rem, 9vw, 7rem); }
.feature:nth-child(even) .feature__media { order: 2; }
.feature__media { position: relative; }
.feature__media img { border-radius: var(--radius-lg); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; box-shadow: var(--shadow); }
.feature__media::before { content: ''; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1px solid var(--line-gold); border-radius: var(--radius-lg); z-index: -1; }
.feature:nth-child(even) .feature__media::before { inset: 1.25rem 1.25rem -1.25rem -1.25rem; }
.feature__num { font-family: var(--font-display); font-size: 4.5rem; line-height: 1; font-weight: 600; color: transparent; -webkit-text-stroke: 1px var(--gold-3); margin-bottom: .25rem; }
.feature h2 { margin-bottom: 1rem; }
.feature p { color: var(--text-2); }
.checks { list-style: none; margin-top: 1.4rem; display: flex; flex-direction: column; gap: .65rem; }
.checks li { display: flex; gap: .8rem; align-items: flex-start; color: var(--text-2); font-size: .96rem; }
.checks svg { flex: none; width: 20px; height: 20px; color: var(--gold-2); margin-top: .15rem; }
.light .checks li { color: var(--ink-2); }
.light .checks svg { color: var(--gold-3); }
.feature .btn-row { margin-top: 1.8rem; }
.feature__tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--silver); margin-bottom: .75rem; }

/* ---------- FAQ ---------- */
.faq { max-width: var(--wrap-narrow); margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.light .faq details { border-color: rgba(21,25,34,.12); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.35rem 0; font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; color: var(--ivory); transition: color .3s;
}
.light .faq summary { color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-2); }
.light .faq summary:hover { color: var(--gold-3); }
.faq summary .plus { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-gold); display: grid; place-items: center; color: var(--gold); transition: transform .4s var(--ease), background .3s; }
.faq summary .plus svg { width: 14px; height: 14px; }
.faq details[open] summary .plus { transform: rotate(45deg); background: var(--gold); color: var(--bg-0); }
.faq details[open] summary { color: var(--gold-2); }
.light .faq details[open] summary { color: var(--gold-3); }
.faq .faq__body { padding: 0 0 1.5rem; color: var(--text-2); max-width: 64ch; animation: fadeDown .45s var(--ease); }
.light .faq .faq__body { color: var(--ink-2); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Download cards ---------- */
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.dl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dl-card {
  display: flex; gap: 1.25rem; align-items: center; padding: 1.5rem; border-radius: var(--radius-lg);
  background: var(--bg-2); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.dl-card:hover { transform: translateY(-4px); border-color: var(--line-gold); box-shadow: var(--shadow-gold); }
.dl-card__ico { flex: none; width: 58px; height: 70px; border-radius: 8px; background: linear-gradient(160deg, var(--bg-3), var(--bg-1)); border: 1px solid var(--line-gold); display: grid; place-items: center; color: var(--gold-2); position: relative; }
.dl-card__ico svg { width: 26px; height: 26px; }
.dl-card__ico span { position: absolute; bottom: 6px; font-size: .58rem; font-weight: 800; letter-spacing: .1em; }
.dl-card h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.dl-card p { font-size: .86rem; color: var(--text-2); }
.dl-card .link-arrow { margin-top: .5rem; font-size: .85rem; }

/* ---------- Tier table ---------- */
.tiers { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tiers th, .tiers td { padding: 1rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tiers th { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.tiers td:first-child { font-family: var(--font-display); font-size: 1.25rem; color: var(--ivory); white-space: nowrap; }
.tiers td { color: var(--text-2); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); }
.table-wrap .tiers { min-width: 620px; }

/* ---------- Info cards (generic) ---------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.info-card {
  padding: 2rem 1.75rem; border-radius: var(--radius-lg); background: var(--bg-2); border: 1px solid var(--line);
  transition: transform .45s var(--ease), border-color .3s, box-shadow .45s;
}
.info-card:hover { transform: translateY(-6px); border-color: var(--line-gold); box-shadow: var(--shadow), var(--shadow-gold); }
.info-card__ico { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; color: var(--gold-2); border: 1px solid var(--line-gold); background: linear-gradient(145deg, rgba(201,163,74,.16), rgba(201,163,74,.02)); margin-bottom: 1.3rem; }
.info-card__ico svg { width: 24px; height: 24px; }
.info-card h3 { font-size: 1.4rem; margin-bottom: .6rem; }
.info-card p { color: var(--text-2); font-size: .95rem; }
.light .info-card { background: #fff; border-color: rgba(21,25,34,.08); box-shadow: 0 10px 40px rgba(21,25,34,.05); }
.light .info-card p { color: var(--ink-2); }
.light .info-card:hover { border-color: rgba(201,163,74,.45); }
.light .info-card__ico { color: var(--gold-3); border-color: rgba(201,163,74,.4); background: linear-gradient(145deg, rgba(201,163,74,.18), rgba(201,163,74,.04)); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; }
.chips li { font-size: .84rem; font-weight: 600; padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); background: rgba(255,255,255,.02); }
.chips li.gold { border-color: var(--line-gold); color: var(--gold-2); }
.chips li.silver { border-color: rgba(185,192,204,.4); color: var(--silver-2); }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 980px; margin-inline: auto; }
.team-card { display: block; padding: 1.75rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .3s, box-shadow .4s, transform .45s var(--ease); }
.team-card:hover { border-color: var(--line-gold); box-shadow: var(--shadow), var(--shadow-gold); transform: translateY(-4px); }
.team-card__photo { position: relative; float: left; width: 260px; aspect-ratio: 4 / 5; margin: .3rem 1.5rem .9rem 0; border-radius: 8px; background: radial-gradient(circle at 50% 40%, var(--bg-3), var(--bg-0)); display: grid; place-items: center; overflow: hidden; }
.team-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.monogram { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; color: #1B1505; background: var(--gold-gradient); box-shadow: 0 16px 40px rgba(201,163,74,.3), inset 0 0 0 3px rgba(255,255,255,.25), inset 0 0 0 5px rgba(143,111,42,.5); position: relative; }
.monogram::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed var(--line-gold); }
.team-card__body { padding: 0; display: block; }
.team-card__body h3 { font-size: 1.65rem; margin-bottom: .15rem; }
.team-card__role { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; }
.team-card__body p { color: var(--text-2); font-size: .94rem; }
.team-card__body .btn { margin-top: 1.2rem; }

/* Location cards */
.loc { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.6rem; border-radius: var(--radius-lg); background: var(--bg-2); border: 1px solid var(--line); }
.loc__pin { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-gold); color: var(--gold-2); }
.loc__pin svg { width: 20px; height: 20px; }
.loc h3 { font-size: 1.35rem; margin-bottom: .25rem; }
.loc p { color: var(--text-2); font-size: .92rem; }
.loc .note { display: block; margin-top: .4rem; font-size: .8rem; color: var(--text-3); }

/* Split content (about story) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.split__media { position: relative; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__media .badge-float { position: absolute; bottom: -1.25rem; left: -1.25rem; background: var(--bg-0); border: 1px solid var(--line-gold); border-radius: 12px; padding: 1rem 1.25rem; box-shadow: var(--shadow); display: flex; align-items: center; gap: .9rem; }
.badge-float .stat__num { font-size: 2.2rem; }
.badge-float .stat__lbl { margin-top: .1rem; font-size: .68rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ivory); background: rgba(255,255,255,.03);
  border: 1px solid var(--line-2); border-radius: 8px; padding: .85rem 1rem; transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,163,74,.14); background: rgba(255,255,255,.05); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A34A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.field select option { background: var(--bg-2); color: var(--ivory); }
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { font-size: .78rem; color: var(--text-3); }
.consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .85rem; color: var(--text-2); }
.consent input { margin-top: .3rem; accent-color: var(--gold); width: 16px; height: 16px; }
.form-card { padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: var(--radius-lg); background: var(--bg-2); border: 1px solid var(--line); position: relative; overflow: hidden; }
.form-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold-gradient); }
.form-card h2 { font-size: 2rem; margin-bottom: .4rem; }
.form-card > p { color: var(--text-2); margin-bottom: 1.6rem; font-size: .95rem; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: start; }
.contact-side { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.contact-card { padding: 1.5rem; border-radius: var(--radius-lg); background: var(--bg-2); border: 1px solid var(--line); }
.contact-card h3 { font-size: 1.25rem; margin-bottom: .8rem; }
.contact-card ul { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.contact-card li { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--text-2); }
.contact-card li svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: .15rem; }
.contact-card a { color: var(--ivory); word-break: break-word; }
.contact-card a:hover { color: var(--gold-2); }
.contact-card ul.socials { flex-direction: row; flex-wrap: wrap; gap: .6rem; }
.contact-card .socials li { display: block; }
.contact-card .socials li svg { color: inherit; margin: 0; width: 17px; height: 17px; }
.calendly-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-gold); background: var(--bg-2); min-height: 700px; }
.calendly-wrap iframe { width: 100%; height: 760px; border: 0; display: block; }

/* ---------- Prose (legal) ---------- */
.prose { max-width: 72ch; color: var(--text-2); }
.prose h2 { font-size: 1.9rem; margin: 2.5rem 0 .9rem; }
.prose h3 { font-size: 1.35rem; margin: 1.8rem 0 .6rem; }
.prose p, .prose li { font-size: 1rem; line-height: 1.75; }
.prose ul { padding-left: 1.25rem; margin: .75rem 0; }
.prose li + li { margin-top: .4rem; }
.prose a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.prose .updated { font-size: .82rem; color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-bottom: 2rem; }

/* ---------- 404 ---------- */
.err { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 3rem) var(--gutter) 4rem; position: relative; overflow: hidden; }
.err__num { font-family: var(--font-display); font-size: clamp(6rem, 20vw, 12rem); line-height: 1; font-weight: 600; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.err .btn-row { justify-content: center; margin-top: 2rem; }

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); will-change: opacity, transform; }
[data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="left"] { transform: translateX(-40px); }
.js [data-reveal="right"] { transform: translateX(40px); }
.js [data-reveal="scale"] { transform: scale(.92); }
.js [data-reveal-group] > * { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal-group].is-in > * { opacity: 1; transform: none; }
[data-reveal-group].is-in > *:nth-child(1) { transition-delay: .05s; }
[data-reveal-group].is-in > *:nth-child(2) { transition-delay: .15s; }
[data-reveal-group].is-in > *:nth-child(3) { transition-delay: .25s; }
[data-reveal-group].is-in > *:nth-child(4) { transition-delay: .35s; }
[data-reveal-group].is-in > *:nth-child(5) { transition-delay: .45s; }
[data-reveal-group].is-in > *:nth-child(6) { transition-delay: .55s; }

/* Decorative ornaments */
.orn { position: absolute; pointer-events: none; z-index: 0; opacity: .5; }
.orn--ring { width: 520px; height: 520px; border-radius: 50%; border: 1px solid var(--line-gold); }
.orn--ring::after { content: ''; position: absolute; inset: 60px; border-radius: 50%; border: 1px dashed var(--line-gold); opacity: .6; }
.orn--glow { width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(201,163,74,.14), transparent 60%); filter: blur(10px); }
.section > .wrap { position: relative; z-index: 1; }

/* Marquee ticker */
.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-0); padding: .9rem 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display: flex; gap: 3rem; width: max-content; animation: ticker 40s linear infinite; }
.ticker__track span { display: inline-flex; align-items: center; gap: 3rem; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.ticker__track span::after { content: '✦'; color: var(--gold); font-size: .8rem; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }


/* ---------- Live spot strip ---------- */
.spotbar { background: var(--bg-0); border-bottom: 1px solid var(--line); font-size: .86rem; }
.spotbar .wrap { display: flex; align-items: center; justify-content: center; gap: 1.75rem; min-height: 56px; flex-wrap: wrap; padding-block: .5rem; }
.spotbar__label { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .68rem; color: var(--gold-2); white-space: nowrap; }
.spotbar__label .dot { width: 7px; height: 7px; border-radius: 50%; background: #4CD17E; box-shadow: 0 0 0 0 rgba(76,209,126,.5); animation: livePulse 2s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(76,209,126,.5); } 70% { box-shadow: 0 0 0 7px rgba(76,209,126,0); } 100% { box-shadow: 0 0 0 0 rgba(76,209,126,0); } }
.spotbar__list { list-style: none; display: flex; gap: 0; flex-wrap: wrap; justify-content: center; }
.spotbar__list li { display: inline-flex; align-items: baseline; gap: .5rem; padding: .3rem 1.25rem; border-left: 1px solid var(--line); }
.spotbar__list li:first-child { border-left: 0; padding-left: 0; }
.spotbar__metal { font-weight: 700; color: var(--text-2); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.spotbar__metal--gold { color: var(--gold-2); } .spotbar__metal--silver { color: var(--silver-2); } .spotbar__metal--platinum { color: #CFD8E3; } .spotbar__metal--palladium { color: #C9B8A8; }
.spotbar__price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ivory); font-variant-numeric: tabular-nums; }
.spotbar__link { font-size: .82rem; white-space: nowrap; }

/* ---------- Spot page ---------- */
.spot-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.25rem; }
.spot-controls { display: flex; align-items: center; gap: .75rem; }
.cur-toggle { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); }
.cur-toggle button { padding: .45rem 1rem; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; color: var(--text-2); transition: all .25s; }
.cur-toggle button.is-on { background: var(--gold-gradient); color: #1B1505; box-shadow: 0 4px 14px rgba(201,163,74,.3); }
.cur-toggle--light { border-color: rgba(21,25,34,.18); background: #fff; justify-self: start; }
.cur-toggle--light button { color: var(--ink-2); }
.spot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.spot-card { position: relative; padding: 1.6rem 1.5rem 1.4rem; border-radius: var(--radius-lg); background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; }
.spot-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-accent, var(--gold-gradient)); }
.spot-card::after { content: ''; position: absolute; inset: auto -40px -60px auto; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, var(--card-glow, rgba(201,163,74,.18)), transparent 65%); pointer-events: none; }
.spot-card:hover { transform: translateY(-5px); border-color: var(--line-gold); box-shadow: var(--shadow); }
.spot-card--gold { --card-accent: var(--gold-gradient); --card-glow: rgba(201,163,74,.2); }
.spot-card--silver { --card-accent: var(--silver-gradient); --card-glow: rgba(185,192,204,.18); }
.spot-card--platinum { --card-accent: linear-gradient(135deg,#8792A3,#E6ECF3,#8792A3); --card-glow: rgba(207,216,227,.16); }
.spot-card--palladium { --card-accent: linear-gradient(135deg,#7E6E62,#D9CBBE,#7E6E62); --card-glow: rgba(201,184,168,.16); }
.spot-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.spot-card__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--ivory); }
.spot-card__sym { font-size: .68rem; font-weight: 800; letter-spacing: .18em; color: var(--text-3); padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px; }
.spot-card__price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.spot-card__price > span:first-child { font-family: var(--font-display); font-size: clamp(1.9rem, 2.6vw, 2.4rem); font-weight: 600; line-height: 1; color: var(--ivory); font-variant-numeric: tabular-nums; }
.spot-card__unit { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.spot-card__alt { margin-top: .5rem; font-size: .85rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.spot-card__chg { margin-top: .6rem; font-size: .75rem; font-weight: 700; min-height: 1.1em; color: var(--text-3); }
.spot-card__chg[data-dir="up"] { color: #6FD99A; } .spot-card__chg[data-dir="down"] { color: #F08A8A; }
.spot-status { margin-top: 1.5rem; font-size: .82rem; color: var(--text-2); display: inline-flex; align-items: center; gap: .5rem; }
.spot-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #4CD17E; }
.spot-status[data-state="loading"]::before { background: var(--gold); animation: pulse 1s infinite; }
.spot-status[data-state="stale"]::before { background: #E8B74A; }
.spot-status[data-state="error"]::before { background: #E06060; }

/* Calculator */
.calc { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: start; }
.calc__form { display: grid; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: #fff; border: 1px solid rgba(21,25,34,.08); border-radius: var(--radius-lg); box-shadow: 0 10px 40px rgba(21,25,34,.06); }
.light .calc .field label { color: var(--ink-2); }
.light .calc .field input, .light .calc .field select { color: var(--ink); background-color: var(--ivory); border-color: rgba(21,25,34,.16); }
.light .calc .field input:focus, .light .calc .field select:focus { border-color: var(--gold-3); box-shadow: 0 0 0 4px rgba(201,163,74,.18); background-color: #fff; }
.light .calc .field select option { background: #fff; color: var(--ink); }
.calc__custom { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; border-radius: 10px; background: var(--ivory); border: 1px dashed rgba(201,163,74,.5); }
.calc__custom[hidden] { display: none; }
.calc__out { position: sticky; top: calc(var(--header-h) + 1.5rem); padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-lg); background: var(--bg-1); border: 1px solid var(--line-gold); color: var(--text); box-shadow: var(--shadow); }
.calc__label { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; }
.calc__total { font-family: var(--font-display); font-size: clamp(2.6rem, 4.5vw, 3.6rem); font-weight: 600; line-height: 1; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.calc__sub { margin-top: .75rem; font-size: .92rem; color: var(--text-2); }
.calc__sub strong { color: var(--ivory); }
.calc__dl { display: grid; gap: .6rem; margin: 1.4rem 0; padding: 1.1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.calc__dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.calc__dl dt { color: var(--text-3); } .calc__dl dd { margin: 0; color: var(--ivory); font-weight: 600; font-variant-numeric: tabular-nums; }
.light .calc__out p.small { color: var(--text-2) !important; }
.light .calc__out p.small a { color: var(--gold-2) !important; }
@media (max-width: 1080px) { .spot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) { .calc { grid-template-columns: 1fr; } .calc__out { position: static; } }
@media (max-width: 640px) { .spot-grid { grid-template-columns: 1fr; } .spotbar__list li { padding: .25rem .8rem; } .spotbar__list li:first-child { padding-left: 0; } .spotbar__price { font-size: 1rem; } .calc__custom { grid-template-columns: 1fr; } }


/* ---------- Shop ---------- */
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.cart-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--gold-gradient); color: #1B1505; font-size: .72rem; font-weight: 800; margin-left: .35rem; }
.prod-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); transition: transform .45s var(--ease), border-color .3s, box-shadow .45s; }
.prod-card:hover { transform: translateY(-6px); border-color: var(--line-gold); box-shadow: var(--shadow), var(--shadow-gold); }
.prod-card__media { aspect-ratio: 4 / 3; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, var(--bg-3), var(--bg-0)); overflow: hidden; }
.prod-card__media img { width: 100%; height: 100%; object-fit: cover; }
.prod-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.prod-card__body h3 { font-size: 1.25rem; line-height: 1.25; }
.prod-card__body p { color: var(--text-2); font-size: .88rem; flex: 1; }
.prod-card__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .4rem; }
.prod-card__price { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--gold-2); font-variant-numeric: tabular-nums; }

/* Header cart button (injected on shop page) */
.cart-fab { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; color: var(--ivory); background: rgba(255,255,255,.03); transition: border-color .25s, color .25s; }
.cart-fab:hover, .cart-open .cart-fab { border-color: var(--gold); color: var(--gold-2); }
.cart-fab svg { width: 20px; height: 20px; }
.cart-fab .cart-count { position: absolute; top: -4px; right: -4px; margin: 0; }
.cart-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--gold-gradient); color: #1B1505; font-size: .7rem; font-weight: 800; }
.cart-count.pop { animation: countPop .35s var(--ease); }
@keyframes countPop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Mini-cart dropdown */
.cart-overlay { position: fixed; inset: 0; z-index: 940; opacity: 0; pointer-events: none; }
.cart-open .cart-overlay { pointer-events: auto; }
.cart-panel { position: fixed; top: calc(var(--header-h) + 16px); right: clamp(12px, 2vw, 32px); z-index: 970; width: min(94vw, 340px); max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line-gold); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.55); opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.cart-open .cart-panel { opacity: 1; transform: none; pointer-events: auto; }
.cart-panel__top { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); font-weight: 700; font-size: .92rem; }
.cart-panel__count { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-2); }
.cart-items { overflow-y: auto; padding: .5rem 1.1rem; scrollbar-width: thin; scrollbar-color: var(--gold-3) transparent; }
.cart-item { display: grid; grid-template-columns: 44px 1fr auto; gap: .75rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.cart-item:last-child { border-bottom: 0; }
.cart-item__thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, var(--bg-3), var(--bg-0)); border: 1px solid var(--line); }
.cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__thumb svg { width: 26px; height: 26px; }
.cart-item__main { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.cart-item__main strong { font-size: .82rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-item__row { display: flex; align-items: center; gap: .8rem; }
.qty-pill { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; padding: 1px; }
.qty-pill button { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .95rem; line-height: 1; color: var(--text-2); transition: background .2s, color .2s; }
.qty-pill button:hover { background: var(--gold); color: #1B1505; }
.qty-pill span { min-width: 22px; text-align: center; font-weight: 700; font-size: .8rem; font-variant-numeric: tabular-nums; }
.cart-item__line { font-size: .85rem; font-weight: 700; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.cart-item__remove { align-self: start; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); transition: color .2s, background .2s; }
.cart-item__remove:hover { color: #F08A8A; background: rgba(240,138,138,.1); }
.cart-item__remove svg { width: 10px; height: 10px; }
.cart-empty { text-align: center; padding: 1.75rem 0; color: var(--text-3); font-size: .88rem; }
.cart-panel__foot { border-top: 1px solid var(--line); padding: .9rem 1.1rem 1rem; display: flex; flex-direction: column; gap: .65rem; }
.cart-total-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; color: var(--text-2); }
.cart-total-row strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--ivory); font-variant-numeric: tabular-nums; }
.cart-field { width: 100%; margin-top: .55rem; padding: .7rem .9rem; background: rgba(255,255,255,.03); border: 1px solid var(--line-2); border-radius: 8px; color: var(--ivory); font: inherit; font-size: .9rem; }
.cart-field::placeholder { color: var(--text-3); }
.cart-field:focus { outline: none; border-color: var(--line-gold); }
.cart-panel__foot .btn { margin-top: .7rem; }
.cart-panel__foot .form-msg { margin-top: .7rem; font-size: .82rem; padding: .6rem .8rem; }
.cart-trust { text-align: center; font-size: .7rem; color: var(--text-3); margin-top: .7rem; }
@media (max-width: 960px) { .cart-panel { right: 12px; } }


.prod-card__ph { opacity: .8; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav-links { gap: 1.35rem; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__grid > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  :root { --header-h: 70px; }
  .nav-links, .site-header .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .svc-grid, .info-grid, .quotes { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
  .steps::before { display: none; }
  .why { grid-template-columns: 1fr; gap: 3rem; }
  .why__photo::before { display: none; }
  .why__photo img { aspect-ratio: 4 / 3; }
  .stats { grid-template-columns: 1fr 1fr; }
  .feature, .split, .newsletter__inner, .contact-grid, .team, .dl-grid { grid-template-columns: 1fr; }
  .feature:nth-child(even) .feature__media { order: 0; }
  .feature__media::before, .split__media .badge-float { display: none; }
  .contact-side { position: static; }
  .giveaway { grid-template-columns: 1fr; }
  .giveaway__media { min-height: 240px; }
  .giveaway__media--slab { padding: 0 2rem 2.5rem; min-height: 0; }
  .giveaway__media--slab img { max-height: 320px; }
  .giveaway__media img { mask-image: linear-gradient(180deg, transparent, #000 40%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); }
  .trustbar__list { grid-template-columns: 1fr 1fr; }
  .trustbar__list li { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; }
  .trustbar__list li:nth-last-child(-n+2) { border-bottom: 0; }
  .sec-head--split { grid-template-columns: 1fr; }
  .team-card { grid-template-columns: 1fr; }
  .team-card__photo { float: none; width: 100%; margin: 0 0 1.25rem; aspect-ratio: 4 / 3; min-height: 200px; }
}
@media (max-width: 640px) {
  .brand__mark { width: 38px; height: 38px; }
  .site-header .wrap { gap: .75rem; }
  .brand { flex: 0 1 auto; }
  .brand__name { font-size: .98rem; white-space: normal; line-height: 1.15; }
  .brand__sub { font-size: .54rem; letter-spacing: .12em; white-space: normal; }
  .hero { padding-bottom: 6rem; min-height: 92svh; }
  /* stronger scrim on phones so headline + lede stay legible over the coin */
  .hero__shade { background: linear-gradient(180deg, rgba(8,10,15,.82) 0%, rgba(8,10,15,.62) 38%, rgba(8,10,15,.78) 72%, var(--bg-1) 100%); }
  .hero__bg img { object-position: 62% center; }
  .hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .hero .btn-row .btn { width: 100%; }
  .hero__trust { gap: .5rem 1rem; font-size: .74rem; }
  .hero__scroll { display: none; }
  .svc-grid, .info-grid, .quotes, .steps, .stats, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .trustbar__list { grid-template-columns: 1fr; }
  .trustbar__list li { border-bottom: 1px solid var(--line); padding: 1rem 0; }
  .trustbar__list li:last-child { border-bottom: 0; }
  .form-row { grid-template-columns: 1fr; }
  .nl-form { flex-direction: column; }
  .footer__grid { grid-template-columns: 1fr; gap: 2.25rem; padding-top: 3.5rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .step { text-align: left; display: grid; grid-template-columns: 60px 1fr; column-gap: 1.2rem; row-gap: .35rem; align-items: start; }
  /* three children (coin, h3, p) in a 2-col grid: without this the paragraph
     auto-places back into the 60px column and wraps one word per line */
  .step > .step__coin { grid-column: 1; grid-row: 1 / span 2; }
  .step > h3, .step > p { grid-column: 2; }
  .step__coin { margin: 0; }
  .vstep { grid-template-columns: 52px 1fr; gap: 1rem; }
  .vstep .step__coin { width: 48px; height: 48px; font-size: 1.1rem; }
  .vstep::before { left: 24px; top: 56px; }
  .feature__num { font-size: 3.2rem; }
  .calendly-wrap iframe { height: 900px; }
  .btn { white-space: normal; }
}


/* ---------- NGC / credentials ---------- */
.ngc-badge { display: inline-flex; align-items: center; }
.ngc-badge img { width: 148px; height: auto; display: block; }
.ngc-badge--lg img { width: 190px; }
.cgc-badge { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.cgc-badge img { width: 111px; height: auto; display: block; }
.cgc-badge em { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.pmg-badge { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.pmg-badge img { width: 118px; height: auto; display: block; }
.pmg-badge em { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.pmg-badge--lg img { width: 168px; }
.pmg-badge--lg em { font-size: .7rem; }
.about-creds { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.cred-soon { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--silver); padding: .55rem .95rem; border: 1px dashed rgba(185,192,204,.45); border-radius: 999px; }
.about-creds, .btn-row .ngc-badge { vertical-align: middle; }
.footer__creds { display: flex; flex-wrap: wrap; align-items: center; gap: 1.05rem; margin: 1.35rem 0 .6rem; }
.footer__creds .ngc-badge img { width: 132px; }
.footer__creds .pmg-badge img { width: 104px; }
.footer__creds .pcgs-badge img { width: 104px; }
.footer__creds .cgc-badge img { width: 99px; }
.ngc-banner { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--bg-2), var(--bg-3)); border: 1px solid var(--line-gold); }
.ngc-banner h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: .5rem; }
.ngc-banner p { color: var(--text-2); max-width: 60ch; }

/* ---------- Whatnot banner ---------- */
.whatnot { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: var(--radius-lg); border: 1px solid var(--line-gold); background: linear-gradient(120deg, #171207 0%, #2A2008 55%, #171207 100%); position: relative; overflow: hidden; }
.whatnot::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 300px at 90% 20%, rgba(232,207,122,.16), transparent 60%); pointer-events: none; }
.whatnot__tag { display: inline-flex; align-items: center; gap: .55rem; font-size: .7rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); padding: .4rem .9rem; border: 1px solid var(--line-gold); border-radius: 999px; margin-bottom: 1rem; background: rgba(8,10,15,.35); }
.whatnot__tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #FF5A5F; box-shadow: 0 0 0 0 rgba(255,90,95,.5); animation: livePulse 1.6s infinite; }
.whatnot h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: .6rem; }
.whatnot p { color: var(--text-2); max-width: 56ch; }
.whatnot__actions { flex-direction: column; align-items: stretch; }

/* ---------- Newsletter archive / issue cards ---------- */
.issue-card { display: flex; flex-direction: column; gap: .7rem; padding: 1.75rem; border-radius: var(--radius-lg); background: var(--bg-2); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .3s; }
a.issue-card:hover { transform: translateY(-5px); border-color: var(--line-gold); }
.issue-card__month { font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.issue-card h3 { font-size: 1.35rem; }
.issue-card p { color: var(--text-2); font-size: .93rem; flex: 1; }
.issue-card.is-soon { border-style: dashed; opacity: .85; }
.issue-card.is-soon:empty { min-height: 180px; opacity: .35; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.02) 14px 28px); }
.issue-card__cta { font-size: .85rem; font-weight: 700; }

/* ---------- Video cards ---------- */
.video-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-1); border: 1px solid var(--line); transition: transform .45s var(--ease), border-color .3s, box-shadow .45s; }
.video-card:hover { transform: translateY(-6px); border-color: var(--line-gold); box-shadow: var(--shadow); }
.video-card__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); filter: saturate(.9) brightness(.85); }
.video-card:hover .video-card__thumb img { transform: scale(1.05); }
.video-card__play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-card__play svg { width: 64px; height: 64px; color: #fff; background: rgba(8,10,15,.62); border: 1px solid var(--line-gold); border-radius: 50%; padding: 16px; transition: background .3s, transform .35s var(--ease); }
.video-card:hover .video-card__play svg { background: var(--gold); color: #1B1505; transform: scale(1.08); }
.video-card__body { padding: 1.2rem 1.4rem 1.4rem; }
.video-card__body h3 { font-size: 1.25rem; margin-bottom: .3rem; }

/* ---------- Article cards + share ---------- */
.article-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid rgba(21,25,34,.08); box-shadow: 0 10px 40px rgba(21,25,34,.06); transition: transform .45s var(--ease), box-shadow .45s; }
a.article-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(21,25,34,.12); }
.article-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
a.article-card:hover .article-card__media img { transform: scale(1.05); }
.article-card__body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.article-card__tag { font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-3); }
.article-card h3 { font-size: 1.3rem; line-height: 1.25; }
.article-card p { color: var(--ink-2); font-size: .92rem; flex: 1; }
.article-card.is-soon { border-style: dashed; background: var(--ivory); box-shadow: none; }
.share-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.share-row__label { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-right: .25rem; }
.share-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--text-2); background: rgba(255,255,255,.03); transition: all .3s var(--ease); }
.share-btn:hover { color: var(--bg-0); background: var(--gold-2); border-color: var(--gold-2); transform: translateY(-2px); }
.share-btn svg { width: 17px; height: 17px; }
.share-copied { font-size: .8rem; color: #6FD99A; font-weight: 700; }
.wrap--narrow .prose { max-width: none; }

@media (max-width: 1500px) and (min-width: 961px) {
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: .8rem; }
  .site-header .btn--sm { padding: .6rem .9rem; font-size: .78rem; }
}
@media (max-width: 960px) {
  .whatnot, .ngc-banner { grid-template-columns: 1fr; }
  .whatnot__actions { flex-direction: row; }
  .nl-archive { grid-template-columns: 1fr; }
  .issue-card.is-soon:empty { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal], [data-reveal-group] > *, [data-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero__glint, .hero__dust { display: none; }
}

/* ---------- Grading tier table on phones ----------
   .table-wrap .tiers forces min-width:620px inside a ~350px column, so on a phone
   roughly two thirds of the table sat off screen behind a sideways swipe. Below
   640px drop the table layout entirely and stack each row as its own card: grade,
   designation, then the description. Nothing to swipe, nothing off screen. */
@media (max-width: 640px) {
  .table-wrap { overflow-x: visible; border: 0; background: transparent; border-radius: 0; }
  .table-wrap .tiers { min-width: 0; }
  .tiers, .tiers tbody, .tiers tr, .tiers td { display: block; width: auto; }
  /* the rows are stacked cards now, so the column headers no longer map to any
     cell — announcing them would confuse a screen reader, and the visually-hidden
     pattern leaves 1px-clipped text sitting past the right edge. Drop it. */
  .tiers thead { display: none; }
  .tiers tr { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); margin-bottom: 1rem; padding: .35rem 0; }
  .tiers td { border-bottom: 0; padding: .3rem 1.1rem; }
  .tiers td:first-child { white-space: normal; font-size: 1.2rem; color: var(--gold-2); padding-top: .9rem; }
  .tiers td:nth-child(2) { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
  .tiers td:last-child { padding-bottom: .95rem; }
}

/* ---------- Let layout items shrink ----------
   Grid and flex items default to min-width:auto, which refuses to shrink below
   their content's min-content width. Combined with a container that clips
   (several sections use overflow:hidden for their glow ornaments) the result is
   text quietly cut off at the edge rather than wrapping. This is the same root
   cause as the giveaway and newsletter overflows, so fix the whole class of it. */
.feature > *, .split > *, .newsletter__inner > *, .contact-grid > *, .team > *,
.dl-grid > *, .process-split > *, .giveaway > *, .why__list li > *,
.info-grid > *, .step > * { min-width: 0; }

/* ---------- Mobile containment: nothing may exceed the screen ----------
   html{overflow-x:clip} was masking real overflow rather than preventing it:
   the 700px .orn--glow ornaments and the full-bleed hero/section images laid
   out up to 300px past a 390px viewport and were simply cut off at the root.
   Anything sitting near that edge — button labels, headings, the spot bar —
   got sliced with them. Contain each section instead, so the overflow never
   reaches the document and there is nothing left to clip.
   overflow-x:hidden first as a fallback for browsers without `clip`. */
@media (max-width: 960px) {
  .hero, .section, header, footer, main {
    overflow-x: hidden;
    overflow-x: clip;
  }
  /* decorative ornaments must never define the page width */
  .orn { max-width: 100vw; }

  /* white-space:nowrap is the one declaration that defeats the body's
     overflow-wrap, so nowrap text runs straight off the screen edge.
     The ticker is a deliberate marquee and .sr-only needs it for clipping. */
  .spotbar__label, .spotbar__link, .nav-links a, .tiers td:first-child,
  .brand__name, .brand__sub, .btn { white-space: normal; }

  /* media can never be wider than its container */
  img, svg, video, iframe, table { max-width: 100%; }
  img, video { height: auto; }
}

/* ---------- Mobile breathing room ----------
   The gutter bottomed out at 1.25rem (20px a side) while the hero heading was
   still rendering at ~43px, so display type ran almost edge to edge and read as
   "not fitting on the screen" even though it measured inside the viewport.
   Widen the gutter and ease the largest type down to match it. */
@media (max-width: 640px) {
  :root { --gutter: 1.5rem; }          /* 20px -> 24px each side */

  .hero h1 { font-size: clamp(2.1rem, 9.2vw, 2.9rem); }
  h1, .h1 { font-size: clamp(2.1rem, 9.2vw, 2.9rem); }
  .page-hero h1 { font-size: clamp(2rem, 8.6vw, 2.7rem); }
  h2, .h2 { font-size: clamp(1.65rem, 7vw, 2.2rem); }

  /* .22em tracking on an already-long label pushed "DEALER" onto its own line */
  .eyebrow { letter-spacing: .1em; gap: .5rem; font-size: .68rem; }
  .eyebrow::before, .eyebrow--center::after { width: 1.5rem; }
}

/* very narrow phones: keep the gutter but stop the type crowding it */
@media (max-width: 380px) {
  :root { --gutter: 1.25rem; }
  .hero h1, h1, .h1 { font-size: clamp(1.95rem, 8.8vw, 2.5rem); }
  .eyebrow { letter-spacing: .1em; font-size: .68rem; }
}

/* ---------- Header: stop the brand overlapping the nav ----------
   .brand__name and .brand__sub are white-space:nowrap while .brand is allowed to
   shrink (min-width:0). Below ~1200px the flex row runs out of room, the brand
   box shrinks but its text cannot, so the text escaped the box and printed on
   top of "Services / Submissions" — 243px of overlap at 961px.

   Two fixes: the eight-item desktop nav needs about 1200px, so switch to the
   drawer below 1260px instead of at 960px (1201 cleared by only 2px); and never let
   box, so a near-miss at very wide sizes degrades to an ellipsis, not an overlap. */
@media (max-width: 1260px) {
  .nav-links, .site-header .btn { display: none; }
  .nav-toggle { display: inline-flex; }
}

.brand__text { min-width: 0; overflow: hidden; }
.brand__name, .brand__sub { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

@media (min-width: 1261px) {
  /* there is room at this width, so keep the brand at its natural size rather
     than letting flex shrink it under the text */
  .brand { flex: 0 0 auto; }
  .nav-links { flex: 0 1 auto; min-width: 0; }
}

/* ---------- Phones: nothing may be wider than the screen, clip or no clip ----------
   html{overflow-x:clip} was the only thing holding the page in, and Safari before
   16 ignores `clip` entirely — so on those phones the document really was 641px
   wide inside a 390px screen. The page then scrolled sideways, every .wrap
   inherited the oversized width, and text ran off both edges. Fixing the causes
   instead of relying on a clip:
     - the .orn glows/rings are 700px decoration sitting at right:-300px
     - .hero__bg uses inset:-6%, which is 437px wide at a 390px viewport
   and adding overflow-x:hidden (universally supported) as the backstop. Scoped
   to <=960px because hidden on html/body would break the sticky columns used on
   desktop; those are already static at this width. */
@media (max-width: 960px) {
  html, body { overflow-x: hidden; max-width: 100%; }

  /* purely decorative — hiding them costs nothing and removes the overflow */
  .orn { display: none; }

  /* keep the vertical bleed, drop the horizontal one */
  .hero__bg { inset: -6% 0; }
}

/* ---------- Larger header logo ---------- */
.brand__mark { width: 58px; height: 58px; }
@media (max-width: 960px) { .brand__mark { width: 50px; height: 50px; } }
@media (max-width: 640px) { .brand__mark { width: 46px; height: 46px; } }

/* ---------- Tighter side spacing on phones (client request) ----------
   Reclaim horizontal room for the text: 24px -> 14px a side at phone widths,
   12px on very narrow screens. Kept above zero deliberately — at 0 the text
   collides with the curved edge and the selection/scroll gutter on iOS. */
@media (max-width: 640px) {
  :root { --gutter: .875rem; }   /* 14px */
}
@media (max-width: 380px) {
  :root { --gutter: .75rem; }    /* 12px */
}

/* ---------- Reveal animations must not move content sideways on phones ----------
   [data-reveal="left"|"right"] slide content 40px horizontally while fading in.
   On desktop there is room either side and it reads as a nice touch. On a 390px
   screen the text column is only 362px, so a 40px sideways offset puts text past
   the screen edge for the duration of the animation — text visibly cut off at
   the left or right, different on every section depending on how far through its
   animation it is. That is the "text off the side of the screen" on mobile: it
   was never the margins, it was 23 elements sliding in from off-canvas.
   Reveal vertically instead, and settle faster so nothing lingers mid-flight. */
@media (max-width: 960px) {
  .js [data-reveal="left"],
  .js [data-reveal="right"] { transform: translateY(24px); }

  .js [data-reveal],
  .js [data-reveal-group] > * { transition-duration: .45s; }
}

/* Anyone who prefers reduced motion already gets no transform at all (see the
   prefers-reduced-motion block above). */

/* ---------- Submission cards with two actions ----------
   NGC/PMG/CGC cards now offer the official form and submission through CCAC,
   so the card is a container with two links rather than one big anchor. */
.dl-card__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin-top: .6rem; }
.dl-card__actions .link-arrow { margin-top: 0; }

/* ---------- Much larger header logo (client request) ----------
   The mark was capped by the header height, so raise both together. --header-h
   also drives hero top padding, sticky offsets and the cart panel, so changing
   the variable keeps everything below the header aligned automatically. */
:root { --header-h: 100px; }
.brand__mark { width: 84px; height: 84px; }

@media (max-width: 960px) {
  :root { --header-h: 90px; }
  .brand__mark { width: 74px; height: 74px; }
}
@media (max-width: 640px) {
  :root { --header-h: 84px; }
  .brand__mark { width: 66px; height: 66px; }
}

/* ---------- Logo 50% larger again (client request) ----------
   66/74/84 -> 99/111/126. Header heights rise with it so the mark still sits
   inside the bar; --header-h keeps everything below the header aligned.
   The wider brand block eats into the desktop nav, so the tagline's tracking
   is tightened to buy that room back — measured, not guessed. */
:root { --header-h: 146px; }
.brand__mark { width: 126px; height: 126px; }
.brand__sub { letter-spacing: .13em; }

@media (max-width: 960px) {
  :root { --header-h: 128px; }
  .brand__mark { width: 111px; height: 111px; }
}
@media (max-width: 640px) {
  :root { --header-h: 116px; }
  .brand__mark { width: 99px; height: 99px; }
}

/* ---------- Header row must fit its own container ----------
   .wrap caps content at 1200px, which suits the text column but not the header
   bar: brand + nav + button needs 1314px once the compact nav rules stop at
   1500px, so the row overflowed by 114px and the "Book a Consultation" button
   was pushed off the right edge. The header spans the full width of the screen,
   so let its row use more of it. Also move the drawer handoff to 1300px — at
   1246 the row still needed 1188px inside 1166px of space. */
.site-header .wrap { width: min(100% - 2 * var(--gutter), 1440px); }

@media (max-width: 1300px) {
  .nav-links, .site-header .btn { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 1301px) {
  .brand { flex: 0 0 auto; }
  .nav-links { flex: 0 1 auto; min-width: 0; }
}

/* ---------- Header row: fluid, so it cannot be pushed out ----------
   The row was sized with fixed rem values tuned to our own webfont metrics. If
   Manrope fails to load, or the browser enforces a larger minimum font size,
   every nav item renders wider, the row grows past its container and the last
   item — the Book a Consultation button — is pushed off the right edge.
   Scale the nav with the viewport instead of fixing it, and let the nav (never
   the button) absorb the remaining pressure. */
@media (min-width: 1301px) {
  .nav-links { gap: clamp(.55rem, 1.15vw, 1.4rem); flex: 0 1 auto; min-width: 0; }
  .nav-links a { font-size: clamp(.75rem, .92vw, .88rem); }
  .site-header .btn--sm { padding: .65rem clamp(.8rem, 1.1vw, 1.2rem); font-size: clamp(.76rem, .88vw, .85rem); }
  /* the button is the call to action: it never shrinks and never gets clipped */
  .nav-actions { flex: 0 0 auto; }
  .brand { flex: 0 0 auto; }
}

/* ---------- Shop sort & filter bar ----------
   Built by shop.js from facets derived off product titles. Wraps freely so it
   survives phone widths — the row must never force the page wider than the
   screen (see the mobile containment block above). */
.shop-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem;
  margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.shop-filter { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.shop-filter > span {
  font-size: .66rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-2);
}
.shop-filter select {
  appearance: none; -webkit-appearance: none;
  background: var(--bg-2) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A34A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6rem center / 14px;
  border: 1px solid var(--line-2); border-radius: 8px;
  color: var(--ivory); font: inherit; font-size: .86rem;
  padding: .55rem 2rem .55rem .8rem; max-width: 100%;
  transition: border-color .25s;
}
.shop-filter select:hover { border-color: var(--line-gold); }
.shop-filter select:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.shop-filter select option { background: var(--bg-2); color: var(--ivory); }

.shop-reset {
  align-self: flex-end; background: transparent; border: 1px solid var(--line-2);
  border-radius: 8px; color: var(--text-2); font: inherit; font-size: .82rem;
  padding: .55rem .95rem; cursor: pointer; transition: color .25s, border-color .25s;
}
.shop-reset:hover { color: var(--gold-2); border-color: var(--line-gold); }
.shop-count { margin-left: auto; align-self: flex-end; padding-bottom: .55rem;
  font-size: .82rem; color: var(--text-3); }

@media (max-width: 640px) {
  .shop-filters { gap: .6rem .7rem; }
  .shop-filter { flex: 1 1 44%; }
  .shop-filter select { width: 100%; }
  .shop-count { margin-left: 0; width: 100%; padding-bottom: 0; }
}

/* ---------- Obverse / reverse switcher on shop cards ----------
   Coins are two-sided and collectors expect both. The card shows one image at a
   time with a small labelled toggle - buttons rather than hover, so it works on
   touch. Labels assume the thumbnail (order 0) is the obverse. */
.prod-card__media { position: relative; }
.prod-card__views {
  position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%);
  display: flex; gap: .35rem; z-index: 1; max-width: calc(100% - 1.2rem);
}
.prod-card__view {
  font: inherit; font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer; white-space: nowrap;
  padding: .35rem .6rem; border-radius: 999px;
  color: var(--gold-2); background: rgba(8,10,15,.78);
  border: 1px solid var(--line-gold);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.prod-card__view:hover { background: rgba(8,10,15,.92); }
.prod-card__view.is-on { color: #0d111a; background: var(--gold-2); border-color: var(--gold-2); }
.prod-card__view:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
@media (max-width: 420px) { .prod-card__view { font-size: .58rem; padding: .3rem .5rem; } }