/* ==========================================================================
   ARIZONA COIN & BULLION — OFFICIAL STYLESHEET
   Replicating the Approved Southwestern Numismatic Design
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS, served from this site (public/fonts/)
   Cinzel (display) and Inter (reading and UI, upright and italic) as variable fonts, and IBM Plex
   Mono for live price numerals only (UX review phase 3; Inter Italic added 2026-10-16). Latin and Latin
   Extended only; a browser fetches a file only when a page uses a character in its range.
   Files and ranges from Google Fonts (css2 API), 2026-09-29. SIL Open Font License 1.1:
   public/fonts/LICENSE.txt.
   -------------------------------------------------------------------------- */
/* Cinzel 600, latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cinzel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cinzel 600, latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cinzel 700, latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/cinzel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cinzel 700, latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 600, latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 600, latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 400, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 400, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 500, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 500, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 600, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 600, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 700, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 700, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter Italic 400-700 (variable), latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter Italic 400-700 (variable), latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & PALETTE
   -------------------------------------------------------------------------- */
:root {
  /* Type (docs/ux-review-2026-10-16, phase 3). Cinzel for display, Inter for reading and UI,
     IBM Plex Mono only for live price numerals. Eight sizes; nothing under 12px. */
  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fs-xs: 0.75rem;                                   /* 12  kicker, label, tag */
  --fs-sm: 0.875rem;                                  /* 14  meta, captions, buttons, footer */
  --fs-base: 1rem;                                    /* 16  UI body, card text, fields */
  --fs-md: 1.125rem;                                  /* 18  article body, page lead */
  --fs-lg: 1.25rem;                                   /* 20  card titles */
  --fs-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);    /* 22-28  article h2, callout titles */
  --fs-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);   /* 28-40  page and section titles */
  --fs-3xl: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);    /* 36-52  home hero title only */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;
  --track-btn: 0.08em;                                /* buttons, navigation (Inter capitals) */
  --track-kicker: 0.16em;                             /* kickers, tags, labels (Inter capitals, like the logo's city line) */

  /* Space: an 8px base. Sections keep their 76px rhythm. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-section: 76px;
  --gutter: 40px;                                     /* every page edge; 32px under 1200px, 16px on phones */

  /* Surfaces: one card, one raised state, one button height */
  --radius: 6px;
  --radius-card: 8px;
  --radius-pill: 6px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.07), 0 10px 24px rgba(0, 0, 0, 0.09);
  --shadow-stage: 0 0 40px rgba(0, 0, 0, 0.18);
  --btn-h: 48px;
  --btn-h-sm: 40px;
  --pab-h: 64px;                                      /* phone action bar: its links, the room kept under the page */
  --transition-smooth: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;

  /* One palette, from the logo (owner, 2026-10-16, round 2: warm ivory + the logo's gold). Grounds:
     --cream (ivory), cards --paper (white, as the logo's plate), chips --tint. Text: --ink and
     --ink-muted, neutral like the wordmark. Fills: --gold (the coin's gold) for the main button, black
     for the second. --accent is the coin rim's bronze, for text links, labels and kickers;
     --accent-on-dark is the gold as text on black. Lines: --line, --line-strong; gold rules
     --rule-gold. Green/red stay for price moves and form messages. */
  --cream: #faf8f3;
  --tint: #f0ece4;
  --accent: #121316;
  --accent-hover: #121316;
  --accent-line: rgba(0, 0, 0, 0.1);
  --accent-on-dark: #FFFFFF;
  --gold-hover: #f0c44d;                              /* primary button hover (8.1:1 with ink) */
  --gold-edge: #121316;                               /* the 1px edge of a gold button on a light ground */
  --gold-rule: #121316;                               /* solid rules, review stars, bullets */
  --line: #e4dfd6;
  --line-strong: #c8c1b5;

  /* Charcoal for dark surfaces (owner, 2026-10-16), and the text that sits on them. */
  --charcoal: #1c1c1c;
  --charcoal-deep: #111111;
  --on-charcoal: #e6e6e3;                             /* text on charcoal: 11:1 on --charcoal-deep */
  --on-charcoal-muted: #a6a6a1;                       /* small print on charcoal: 7:1 */
  --ink: #121316;
  --ink-body: var(--ink);
  --ink-muted: #4a4d54;
  --text-primary-dark: var(--ink);
  --bg-parchment-cream: var(--cream);
  --paper: #ffffff;
  --gold: #d4af37;
  --gold-text: var(--accent-on-dark);
  --gold-soft: var(--accent-on-dark);
  --gold-line: var(--accent-line);
  --sw-desert-gold: #d4af37;
  --sw-desert-gold-light: var(--accent-on-dark);
  --sw-terracotta: var(--accent);
  --sw-mesquite-dark: var(--ink);
  --mesa-sunlit: #d4af37;
  --mesa-sunlit-deep: #d4af37;
  --mesa-shadow: var(--ink);
  --mesa-shadow-deep: var(--ink);
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --rule-gold: rgba(0, 0, 0, 0.1);
  --rule-onshadow: rgba(255, 255, 255, 0.12);
  --rule-onshadow-strong: rgba(255, 255, 255, 0.25);

  /* Layout */
  --center-stage-width: 1440px;
  --measure: 1300px;
}

@media (max-width: 1200px) {
  :root {
    --gutter: 32px;
  }
}

@media (max-width: 768px) {
  :root {
    --gutter: 16px;
  }
}

/* --------------------------------------------------------------------------
   2. GLOBAL RESETS & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: var(--fs-base);
  background-color: var(--cream);
  color: var(--text-primary-dark);
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  max-width: 100vw;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  overflow-x: clip;
  max-width: 100vw;
  line-height: 1.6;
  background: url('images/topographic_contour_map.webp') repeat;
  background-size: 380px 380px;
  background-color: var(--cream);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a:hover,
a:focus-visible {
  color: #000000;
  text-decoration-color: #000000;
}

/* UI components, controls, buttons, cards, and image wrappers that should not have text underlines */
.btn,
.btn:hover,
.btn:focus,
.btn-directions,
.btn-directions:hover,
.svc-guide-btn,
.svc-guide-btn:hover,
.header-call,
.header-call:hover,
.m-phone-btn,
.m-phone-btn:hover,
.f-logo-link,
.f-logo-link:hover,
.logo-link,
.logo-link:hover,
.site-logo a,
.site-logo a:hover,
.h-nav-item,
.h-nav-item:hover,
.h-nav-item .nav-main-text,
.h-nav-dropdown-menu a,
.h-nav-dropdown-menu a:hover,
.m-nav-link,
.m-nav-link:hover,
.m-sub-link,
.m-sub-link:hover,
a.ticker-rates-row,
a.ticker-rates-row:hover,
.phone-action-bar a,
.phone-action-bar a:hover,
.curated-buy-card,
.curated-buy-card:hover,
.field-guide-card,
.field-guide-card:hover,
.shop-tile-link,
.shop-tile-link:hover,
a.svc-row--link,
a.svc-row--link:hover,
.clickable-card,
.clickable-card:hover,
.skip-link,
.chip,
.badge {
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

strong,
b {
  font-weight: 600;
}

/* Read by screen readers, not shown */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* --------------------------------------------------------------------------
   3. 3-COLUMN PAGE FRAMING SHELL (Symmetrical Centered Layout with Topographic Map)
   Left: Topographic Margin | Center: Cream Stage | Right: Topographic Margin
   -------------------------------------------------------------------------- */
.site-framing-shell {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
  background: url('images/topographic_contour_map.webp') repeat;
  background-size: 380px 380px;
  background-color: var(--cream);
}

/* Left & Right Topographic Bands (Equal, Balanced, Symmetrical) */
.shell-left-band,
.shell-right-band {
  flex: 1;
  background:
    linear-gradient(rgba(250, 248, 243, 0.55), rgba(250, 248, 243, 0.55)),
    url('images/topographic_contour_map.webp') repeat;
  background-size: auto, 380px 380px;
  background-color: var(--cream);
  min-width: 20px;
}

.shell-left-band {
  border-right: 1px solid rgba(0, 0, 0, 0.13);
}

.shell-right-band {
  border-left: 1px solid rgba(0, 0, 0, 0.13);
}

/* Center Content Stage (Clean Ivory / Cream Canvas) */
/* The stage claims the full 1440 as its flex BASIS, so it takes all the width
   available up to that; the two bands have a 0 basis and only take what is
   left over, down to their 20px minimum.
   min-width:0 is required as well: the flex default of min-width:auto refuses
   to shrink an item below its content's min-content width, and nowrap content
   inside (the spot ticker) pushed that past the viewport, which shoved the
   bands off both edges and produced a horizontal scrollbar. Setting min-width:0
   WITHOUT the 1440 basis collapses the stage to a third of the screen, so the
   two belong together. */
.shell-center-stage {
  flex: 1 1 var(--center-stage-width);
  min-width: 0;
  max-width: var(--center-stage-width);
  width: 100%;
  overflow-x: clip;
  margin: 0 auto;
  background-color: var(--bg-parchment-cream);
  position: relative;
  z-index: 10;
  box-shadow: var(--shadow-stage);
}

/* --------------------------------------------------------------------------
   4. LIVE SPOT TICKER
   -------------------------------------------------------------------------- */
.top-color-strip {
  width: 100%;
  background: var(--bg-parchment-cream);
}

/* Integrated Live Spot Rates Ribbon */
.top-ticker-strip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  background: var(--charcoal-deep);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0;
  border-bottom: 1px solid rgba(201, 154, 46, 0.25);
  min-height: 38px;
}

.ticker-rates-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 16px);
  margin: 0 auto;
}

.ticker-rate-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tr-label {
  color: var(--on-charcoal-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.tr-val {
  color: #ffffff;
  font-weight: 600;
  font-family: var(--font-data);
}

/* The price takes the day's direction too, in the same two colours as the arrow beside it. The
   arrow still carries the meaning on its own (and its visually-hidden "up"/"down" text), so the
   colour is a second signal rather than the only one - it has to be, for anyone who cannot tell
   these two apart. Both are measured against --charcoal-deep: 8.00:1 and 5.64:1, past AA. */
.tr-val.positive {
  color: #3fbf6f;
}

.tr-val.negative {
  color: #ef5b4c;
}

.tr-delta.positive {
  color: #3fbf6f;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.tr-delta.negative {
  color: #ef5b4c;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.tr-divider {
  color: rgba(255, 255, 255, 0.2);
}

/* Narrower screens: the prices wrap rather than run off the edge; under 600px only gold and silver,
   on one line (platinum and palladium are on the prices page). */
@media (max-width: 1080px) {
  .top-ticker-strip {
    padding: var(--sp-2) var(--gutter);
  }

  .ticker-rates-row {
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
  }
}

@media (max-width: 600px) {
  .tr-minor {
    display: none;
  }
}

/* The row is a link to Today's Prices; it keeps the ticker's look. */
a.ticker-rates-row,
a.ticker-rates-row:hover {
  color: inherit;
  text-decoration: none;
}

/* The "as of" time: hidden where it would wrap the strip to a second line (under 880px), but always
   shown once the price is old or missing, so an old price is never shown without its date. */
@media (max-width: 880px) {
  html:not([data-spot-state="stale"], [data-spot-state="none"]) .tr-asof {
    display: none;
  }
}

html[data-spot-state="stale"] .top-ticker-strip [data-spot-asof] {
  color: var(--accent-on-dark);
}

/* --------------------------------------------------------------------------
   5. MAIN NAVIGATION HEADER (With Hanging 3D Logo Plaque)
   -------------------------------------------------------------------------- */
.main-site-header {
  position: relative;
  /* Pure white atelier header ribbon mirroring the white footer ribbon, with clean neutral trim */
  background: #ffffff;
  padding: 0 var(--gutter);
  z-index: 100;
  min-height: 72px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Menu on the right, grouped, then Call; the plaque hangs at the left. */
.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-6);
  position: relative;
  min-height: 72px;
}

.header-call {
  flex-shrink: 0;
  white-space: nowrap;
  background: #18191b !important;
  border: 1px solid #121316 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.25s ease !important;
}

.header-call:hover {
  background: #121316 !important;
  color: #ffffff !important;
  border-color: #121316 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

.header-call svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  stroke: currentColor;
}

/* Hanging 3D Brand Plaque: Anchored to header, hangs down over timber beam into hero */
.brand-plaque-anchor {
  position: absolute;
  left: 32px;
  top: -1px;
  /* Seamless contact with bottom edge of black ticker bar */
  width: 172px;
  height: 142px;
  z-index: 150;
  display: block;
}

.brand-plaque-card {
  width: 172px;
  height: 142px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-plaque-anchor:hover .brand-plaque-card {
  /* No positional jump */
}

.brand-plaque-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.16));
  transition: filter 0.35s ease;
}

.brand-plaque-anchor:hover .brand-plaque-img {
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.22));
}


/* Desktop menu: one group at the right, evenly spaced, clear of the plaque */
.header-nav-desktop {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  margin-left: 180px;
  gap: var(--sp-6);
}

.h-nav-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  position: relative;
  padding: var(--sp-3) 0;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.h-nav-item .nav-main-text {
  display: block;
  line-height: 1.2;
}

.h-nav-item::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #E5B338, #D49B20);
  transition: width 0.25s ease;
  border-radius: 1px;
}

.h-nav-item:hover,
.h-nav-item:focus {
  color: #000000;
}

.h-nav-item.active {
  color: var(--sw-terracotta);
}

.h-nav-item:hover::after,
.h-nav-item.active::after {
  width: 100%;
}

/* Dropdown Menu Styles for Desktop Nav */
.h-nav-item.has-dropdown {
  position: relative;
}

.h-nav-item.has-dropdown>a.nav-main-text {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Opens at the bar's bottom edge: the item sits (72 - 43) / 2 = 14.5px above it, plus the 1px rule. */
.h-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #ffffff;
  min-width: 250px;
  box-shadow: var(--shadow-raised);
  border: 1px solid var(--line);
  border-top: 3px solid var(--sw-desert-gold, var(--accent));
  border-radius: 0 0 6px 6px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 9999;
}

.h-nav-item.has-dropdown:hover .h-nav-dropdown-menu,
.h-nav-item.has-dropdown:focus-within .h-nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.h-nav-dropdown-menu a {
  display: block;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  text-shadow: none;
  text-align: left;
}

.h-nav-dropdown-menu a:hover {
  background: var(--cream);
  color: #121316;
  font-weight: 600;
}

.h-nav-dropdown-menu a[aria-current],
.h-nav-dropdown-menu a[aria-current="page"],
.h-nav-dropdown-menu a.active {
  background: var(--cream);
  color: var(--accent);
  font-weight: 600;
}

/* Mobile Hamburger Toggle */
/* Three bars 6px apart; the open state moves the outer two by 8px (gap + bar), so the X
   closes exactly whatever the button's size or padding. */
.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 100;
}

.mobile-nav-toggle .bar {
  width: 24px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: var(--transition-smooth);
}

.mobile-nav-toggle.active .bar-1 {
  transform: translateY(8px) rotate(45deg);
}

.mobile-nav-toggle.active .bar-2 {
  opacity: 0;
}

.mobile-nav-toggle.active .bar-3 {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Dropdown Menu */
.mobile-dropdown-menu {
  display: none;
  background: var(--cream);
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  padding: 24px;
}

.mobile-dropdown-menu.open {
  display: block;
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.m-nav-link {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-primary-dark);
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: var(--transition-smooth);
}

.m-nav-link:hover,
.m-nav-link[aria-current],
.m-nav-link[aria-current="page"],
.m-nav-link.active {
  color: var(--sw-terracotta);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. HERO SHOWCASE VISTA SECTION (Sunlit Superstition Vista with Bullion Ledge)
   -------------------------------------------------------------------------- */
.hero-showcase-section {
  position: relative;
  width: 100%;
  overflow: visible;
  background: var(--charcoal-deep);
  z-index: 15;
}

/* 61/25 (2.44:1): the hero photograph is the owner's corrected photo (2026-10-16) widened with more
   desert at each side (owner, 10-17: "thinner"), so it maps 1:1 onto the stage: 1440px wide = 590px
   tall. Peaks to coins fill the full height (no spare margin to crop), so on short screens the stage
   narrows rather than crops: its height fits the screen under the ticker + header (112px) with 72px
   of the next section showing, centred on the dark ground. Below about 1120px wide the 460px floor
   takes over and the sides (the added desert) are cropped instead. */
.hero-image-stage {
  position: relative;
  width: min(100%, calc((100vh - 184px) * 61 / 25));
  width: min(100%, calc((100svh - 184px) * 61 / 25));
  margin-inline: auto;
  aspect-ratio: 61 / 25;
  min-height: 460px;
  overflow: hidden;
  background: var(--charcoal-deep);
  /* Completely seamless stage: no borders, natural warm elevation shadow onto parchment */
  border: none;
  box-shadow: var(--shadow-card);
}

/* Atmospheric Scrim for High-Contrast Sky Typography */
/* Atmospheric scrim, OFF. It darkened the top 65% of the photograph to give
   the title contrast, but the title sits on .hero-main-typography-box, which
   carries its own dark gradient and backdrop-blur — so the scrim was only
   muddying the sky and the upper mountain.
   To restore, swap display:none for the gradient below:
     background: linear-gradient(180deg,
       rgba(18,10,6,0.68) 0%, rgba(22,12,8,0.45) 40%,
       rgba(24,14,9,0.15) 75%, rgba(25,15,10,0) 100%); */
.hero-sky-scrim {
  display: none;
}

.hero-panoramic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centre, because the source is pre-cropped to the stage ratio. Only the
     narrow breakpoints crop at all, and there the centre band (bars, beads,
     the mountain's central massif) is the part worth keeping. */
  object-position: center center;
  display: block;
}

/* Bold Hero Typography (Upper Right Sky, Natural Numismatic Plaque) */
.hero-main-typography-box {
  position: absolute;
  top: 24px;
  right: 42px;
  left: auto;
  width: 456px;
  max-width: calc(100% - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 30;
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  border-radius: var(--radius-card);
  /* Opaque near-black, the coin's face: a see-through panel picked up the sky (blue) and the rock (brown) */
  background: rgba(17, 17, 17, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-card);
}

.hero-welcome-badge,
.hero-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: clamp(9px, 2.5vw, 11px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #FFFFFF;
  margin-bottom: 8px;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  max-width: 100%;
  box-sizing: border-box;
}

/* The shop's name stays the page's main heading (owner, round 2), set small in the logo's style: one
   line of spaced capitals, white then gold. The tagline below is the large line. */
.hero-brand-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  width: 100%;
}

.hero-title-main {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: #F0D068;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
}

.hero-title-sub {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 5.2vw, 1.95rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  max-width: 100%;
}

.hero-tagline-text {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  color: #e2ded7;
  letter-spacing: 0.01em;
  line-height: 1.55;
  margin: 10px 0 16px;
  text-align: center;
  text-wrap: balance;
  max-width: 420px;
}

.hero-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 0;
}

.hero-btn-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.hero-call-line {
  font-family: var(--font-body);
  font-size: clamp(11.5px, 3.2vw, 13px);
  color: #D4AF37;
  margin: 12px 0 6px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.hero-actions .hero-founder-signature {
  font-family: var(--font-accent);
  font-size: clamp(12px, 3.2vw, 13.5px);
  font-style: italic;
  color: #d8d4cd;
  line-height: 1.5;
  margin-top: 10px;
  text-align: center;
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  padding-left: 10px;
  max-width: 420px;
}

.btn:hover .hero-btn-arrow {
  transform: translateX(3px);
}

/* Above 1100px the panel floats over the photo's top right, compact so it ends above the coins,
   which start about 60% down the photo: no eyebrow (blank in the CMS) and no "or call" line (the
   header's Call button shows the number just above). Up to 1100px it sits under the photo. */
@media (min-width: 1101px) {
  .hero-main-typography-box .hero-call-line {
    display: none;
  }

  .hero-main-typography-box {
    top: 16px;
    right: 32px;
    padding: 16px 22px 14px;
    width: 480px;
    max-width: calc(100% - 60px);
    background: rgba(14, 14, 16, 0.94);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(201, 154, 46, 0.4);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  }

  .hero-welcome-badge {
    margin-bottom: 6px;
    padding: 3px 10px;
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }

  .hero-brand-title {
    gap: 3px;
  }

  .hero-title-main {
    font-size: 10px;
    letter-spacing: 0.15em;
  }

  .hero-title-sub {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .hero-tagline-text {
    margin: 6px 0 10px;
    font-size: 12.5px;
    line-height: 1.45;
  }

  .hero-subhead-box {
    margin: 6px 0 10px;
    padding: 8px 12px;
  }

  .hero-subhead-title {
    font-size: 13px;
    margin-bottom: 3px;
  }

  .hero-subhead-text {
    font-size: 11.5px;
    line-height: 1.4;
  }

  .hero-cta-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  .hero-cta-buttons .btn {
    flex: 1 1 0 !important;
    min-height: 38px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-founder-signature {
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.4;
    padding-left: 8px;
  }
}

/* ==========================================================================
   8. MESA STRATA — BODY SECTION DESIGN SYSTEM
   --------------------------------------------------------------------------
   Structure: the logo is a flat-topped mesa with a SUNLIT face and a SHADOW
   face. That split organises every body section — a lit side carrying the
   reading matter, a shadow side carrying the data. Sections alternate.

   Surface (UX review phase 3): one card (.card recipe: paper, hairline rule, 8px radius, soft
   shadow) and one callout (the same with a 3px gold left rule). Gold is #d3a146 / #dfb262 /
   #eed6ba; links are terracotta #a64426. Palette measured from the theme's original plaque
   (design/frame-hanging-plaque.png) and the hero cliff.
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.1 SECTION GROUNDS & THE STRATA DIVIDER
   -------------------------------------------------------------------------- */
.strata-section {
  position: relative;
  padding: 76px var(--gutter);
}

/* Parchment ground. The map is VEILED, not blended at full strength: these sections set
   copy directly on the ground, and an unveiled map makes it hard to read. Keep the veil
   above 0.9. */
.strata-section--paper {
  background:
    linear-gradient(180deg, rgba(250, 248, 243, 0.93) 0%, rgba(250, 248, 243, 0.95) 100%),
    url('images/antique-map-bg.webp') center/cover no-repeat;
}

/* Sandstone ground — warmer and a clear step darker than the paper ground,
   so the alternation still reads once both are veiled */
.strata-section--sand {
  background:
    linear-gradient(180deg, rgba(250, 248, 243, 0.94) 0%, rgba(250, 248, 243, 0.96) 100%),
    url('images/topographic_contour_map.webp') repeat;
  background-size: auto, 420px 420px;
}

/* The single dark band: the mesa's shadow face. Gold-ruled top and bottom,
   exactly like the footer, so it reads as part of the same family. */

.strata-section>.strata-inner {
  position: relative;
  z-index: 2;
  max-width: var(--measure);
  margin: 0 auto;
}

/* A section boundary: one accent rule (it was a five-colour band; owner, 2026-10-16: one palette) */
.strata-divider {
  display: block;
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--accent-line);
}

/* --------------------------------------------------------------------------
   8.2 SECTION HEADER — the mesa mark, left-aligned, on a gold seam
   -------------------------------------------------------------------------- */
.strata-head {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 var(--sp-5);
  align-items: start;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.strata-head-mark {
  padding-top: var(--sp-1);
}

.strata-head--plain {
  grid-template-columns: 1fr;
}

/* The star coin from the logo (images/acb-star-coin.png, square), beside each section title
   and in the subpage banner. It replaced the theme's butte artwork (rebrand, 2026-10-16). */
.section-mark {
  width: 40px;
  height: 40px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.strata-kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}

/* The plaque's own device: a short gold rule before the line, as in "- SCOTTSDALE, AZ -" */
.strata-kicker::before {
  content: '';
  flex: 0 0 24px;
  height: 1px;
  background: #121316;
}

.strata-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}

.strata-lede {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 68ch;
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   8.3 SHARED PRIMITIVES
   -------------------------------------------------------------------------- */

/* Panels on the calculator and contact pages: the card recipe. */
.plate,
.desk-lit,
.desk-form {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Figures that line up in columns: Inter's tabular numerals */
.dt {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

.dt-label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.desk-shadow .dt-label {
  color: var(--gold-text);
}

.prose-serif {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink-body);
}

/* Drawn line icons — one stroke weight, gold-copper, no container chrome */
.ico {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  stroke: var(--mesa-sunlit-deep);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.6));
}

.desk-shadow .ico {
  stroke: var(--gold-text);
  filter: none;
}

.ico-sm {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  stroke-width: 1.7;
}

/* Photographs sit in a plate with corner registration ticks */
.plate {
  position: relative;
  padding: 12px;
}

.plate img {
  width: 100%;
  display: block;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.13);
  box-shadow: var(--shadow-card);
}

.plate::before,
.plate::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--gold);
  pointer-events: none;
  opacity: 0.8;
}

.plate::before {
  top: -4px;
  left: -4px;
  border-right: 0;
  border-bottom: 0;
}

.plate::after {
  bottom: -4px;
  right: -4px;
  border-left: 0;
  border-top: 0;
}

/* --------------------------------------------------------------------------
   BUTTONS (UX review phase 3): one system. Gold primary (normally "Call"), dark secondary,
   ghost tertiary, outline-light for ghost on dark grounds. 48px high (40px small); labels wrap
   rather than push the page sideways. Terracotta is a link and accent colour, not a button.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-h);
  max-width: 100%;
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn .ico {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  stroke: currentColor;
}

/* The logo's gold, with ink text (9.7:1), on any ground. One per view. */
.btn--primary {
  background: linear-gradient(135deg, #E5B338 0%, #D49B20 100%);
  color: #121316;
  border-color: #D49B20;
  box-shadow: 0 4px 14px rgba(212, 155, 32, 0.28);
  font-weight: 700;
  transition: all 0.22s ease;
}

.btn--primary:hover {
  background: linear-gradient(135deg, #F0C44D 0%, #E0A628 100%);
  border-color: #E0A628;
  color: #121316;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 155, 32, 0.42);
}

:is(.hero-main-typography-box, .svc-cta-band, .sidebar-box--dark, .desk-shadow) .btn--primary {
  border-color: #D49B20;
}

.btn--dark {
  background: #121316;
  color: #ffffff;
  border-color: #121316;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: all 0.22s ease;
}

.btn--dark:hover {
  background: #2C2F36;
  border-color: #383C45;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.btn--ghost {
  background: transparent;
  color: #121316;
  border-color: rgba(18, 19, 22, 0.25);
  transition: all 0.22s ease;
}

.btn--ghost:hover {
  background: rgba(18, 19, 22, 0.06);
  border-color: #121316;
  color: #121316;
  transform: translateY(-2px);
}

.btn--outline-light {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: all 0.22s ease;
}

.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.btn--sm {
  min-height: var(--btn-h-sm);
  padding: var(--sp-1) var(--sp-4);
  font-size: var(--fs-xs);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* Text links with an arrow ("How we price rare coins →"): one style everywhere */
.buy-tray-link,
.curated-buy-link,
.blog-read-link,
.home-text-link,
.trust-card-link,
.field-guide-arrow {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.buy-tray-link:hover,
.curated-buy-link:hover,
.blog-read-link:hover,
.home-text-link:hover,
.trust-card-link:hover,
.field-guide-arrow:hover {
  color: var(--accent);
  text-decoration: none;
}

/* Where a container stacks its buttons full width */
.sidebar-box .btn {
  display: flex;
  width: 100%;
  margin-top: var(--sp-1);
}

@media (max-width: 600px) {
  .hero-cta-buttons .btn,
  .visit-actions .btn,
  .svc-cta-row .btn,
  .home-cta-row .btn {
    display: flex;
    width: 100%;
  }
}

/* Chips: one tag style (the kicker type on a sand ground); "free" is ink on a deeper sand */
.chip {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
  color: var(--ink-muted);
  background: var(--tint);
  border: 1px solid var(--line-strong);
  white-space: nowrap;
}

.chip--free {
  color: var(--ink);
  background: var(--tint);
  border-color: var(--line-strong);
}

/* Asymmetric splits — the sun crossing the mesa. Never three equal columns. */
.split-7-5 {
  display: grid;
  gap: 48px;
  align-items: start;
}

.split-7-5 {
  grid-template-columns: 7fr 5fr;
}

/* --------------------------------------------------------------------------
   9. §01 SPOT CALCULATOR — reports spot value only, never an offer.
   -------------------------------------------------------------------------- */

/* Market strip — four brass tiles that also select the metal */
.market-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

@media (max-width: 992px) {
  .market-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

.metal-btn {
  display: block;
  text-align: left;
  padding: 16px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-smooth);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-card);
}

.metal-btn:hover {
  border-color: rgba(201, 154, 46, 0.75);
  box-shadow: var(--shadow-raised);
}

.metal-btn.active {
  background: linear-gradient(165deg, #1c1c1c 0%, #111111 100%);
  border-color: var(--gold);
  box-shadow: var(--shadow-card);
}

.btn-metal-name {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  color: var(--ink);
}

.metal-btn.active .btn-metal-name {
  color: var(--gold-text);
}

.btn-metal-spot {
  display: block;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--mesa-shadow);
  margin-top: 4px;
}

.metal-btn.active .btn-metal-spot {
  color: #fff;
}

.btn-metal-unit {
  display: block;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: 0;
  color: var(--ink-muted);
  margin-top: 4px;
}

.metal-btn.active .btn-metal-unit {
  color: var(--on-charcoal-muted);
}

.desk-split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px;
  align-items: start;
}

/* Lit side: the form, built as ledger rows on parchment. Flex column so the
   testing note sits on the bottom edge instead of leaving the plate
   half-empty against the taller readout beside it. */
.desk-lit {
  padding: 12px 32px 32px 32px;
  display: flex;
  flex-direction: column;
}

.desk-lit .assurance-note {
  margin-top: auto;
}

.ledger-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}

.ledger-row:last-child {
  border-bottom: 0;
}

.c-select,
.c-number-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 12px 12px;
  transition: var(--transition-smooth);
  box-shadow: none;
}

.c-select:focus,
.c-number-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: inset 0 1px 3px rgba(120, 85, 50, 0.1), 0 0 0 3px rgba(211, 161, 70, 0.18);
}

.c-number-input {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--mesa-shadow-deep);
}

.weight-field {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.weight-field .c-number-input {
  flex: 1;
  min-width: 0;
  border-radius: 4px 0 0 4px;
  border-right: 0;
}

.unit-symbol-badge {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  background: rgba(201, 154, 46, 0.28);
  border: 1px solid var(--rule-strong);
  border-radius: 0 4px 4px 0;
  padding: 0 16px;
  flex: 0 0 auto;
}

/* Unit + preset selectors — small brass tabs */
.tab-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab-group button,
.u-btn,
.preset-tag-btn {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.6);
  transition: var(--transition-smooth);
  cursor: pointer;
}

.tab-group button:hover,
.u-btn:hover,
.preset-tag-btn:hover {
  border-color: var(--gold);
  color: var(--accent);
}

.tab-group button.active,
.u-btn.active,
.preset-tag-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: none;
}

.purity-indicator-pill {
  display: inline-block;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  margin-top: 8px;
}

/* Shadow side: the assay readout, built like the hero plaque */
.desk-shadow {
  border-radius: 8px;
  padding: 24px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #1c1c1c 0%, #111111 100%);
  background-size: auto, 380px 380px;
  border: 1px solid var(--gold-line);
  box-shadow: var(--shadow-card);
}

.readout-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-onshadow-strong);
}

.live-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--gold-text);
  font-weight: 600;
}

.live-flag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: none;
  animation: liveFlagPulse 2s ease-in-out infinite;
}

@keyframes liveFlagPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}

.readout-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-onshadow);
}

.readout-row .r-label {
  font-size: var(--fs-sm);
  color: var(--on-charcoal-muted);
  line-height: 1.35;
}

.readout-row .r-val {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--gold-soft);
  text-align: right;
  flex: 0 0 auto;
}

/* The one big figure: market value of the metal content. Not an offer. */
.readout-total {
  margin-top: 24px;
  padding: 16px 16px 16px 16px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(201, 154, 46, 0.16) 0%, rgba(201, 154, 46, 0.1) 100%);
  border: 1px solid var(--gold);
  box-shadow: none;
}

.total-figure {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 8px;
}

.total-figure .curr-sign {
  font-family: var(--font-data);
  font-size: var(--fs-xl);
  color: var(--gold-text);
}

.total-figure .animated-total {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.total-basis {
  display: block;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: 0;
  color: var(--on-charcoal-muted);
  margin-top: 8px;
}

/* The disclaimer is load-bearing: this figure is spot, not our offer. */
.not-an-offer {
  margin-top: 16px;
  padding: 16px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.not-an-offer strong {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent-on-dark);
  margin-bottom: 8px;
}

.not-an-offer p {
  font-size: var(--fs-sm);
  line-height: 1.58;
  color: var(--on-charcoal-muted);
}

.desk-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
}

.assurance-note {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(201, 154, 46, 0.25);
}

/* It sits on the charcoal readout */
.assurance-note p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--on-charcoal);
}

.assurance-note strong {
  color: var(--accent-on-dark);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   11. §03 WHAT WE BUY — a ledger table, not an icon grid
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   12. §04 SERVICES — ruled rows with a cost chip
   -------------------------------------------------------------------------- */
/* No rule of its own: the section head above already ends in one (two gold rules 48px apart). */
.svc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.svc-row {
  display: grid;
  grid-template-columns: 32px 290px 1fr 150px;
  gap: 24px;
  align-items: center;
  padding: 16px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, border-left-color 0.2s ease;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.svc-row:nth-of-type(even) {
  background: var(--paper);
}

.svc-row:hover {
  box-shadow: var(--shadow-raised);
  border-color: rgba(201, 154, 46, 0.7);
}

.svc-row .svc-ico {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.svc-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1.25;
}

.svc-name span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-muted);
  margin-top: 4px;
}

.svc-desc {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-body);
}

.svc-cost {
  text-align: right;
}

/* eBay panel — the group's only webstore, said plainly */

/* --------------------------------------------------------------------------
   13. §05 PURITY VERIFICATION — the dark band, the mesa's shadow face
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   14. §06 NEVER CLEAN A COIN — a posted claim notice
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   15. §07 ABOUT — sister shops, affiliations, pull-quote
   -------------------------------------------------------------------------- */
.about-aside-box>.dt-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.about-lede {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: 600;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin-bottom: 24px;
}

.about-body {
  font-size: var(--fs-base);
  line-height: 1.72;
  color: var(--ink);
}

.about-body strong {
  color: var(--ink);
  font-weight: 600;
}

.ledger-list {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ledger-list li {
  list-style: none;
  list-style-type: none;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ledger-list .ico {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: var(--accent);
  stroke: var(--accent);
  margin-top: 3px;
  filter: drop-shadow(0 1px 1px rgba(60, 30, 12, 0.25));
}

.ledger-list strong {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 4px;
}

.ledger-list span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink);
}

/* Pull-quote (customer reviews) */
/* A quote is a callout: paper, hairline, the gold left rule */
.pull-quote {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-radius: var(--radius-card);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  box-shadow: none;
}

.pull-quote blockquote {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-body);
}

.pull-quote cite {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0;
  color: var(--ink-muted);
  margin-top: 16px;
}

/* Home page customer reviews: pull-quote cards in a grid. */
.review-grid {
  display: grid;
  /* Two across on a wide screen (four reviews make a square), one on a phone. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 24px;
  margin-top: 32px;
}

.review-card {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.review-card blockquote {
  flex: 1;
  font-size: var(--fs-base);
}

.review-stars {
  color: #FBBC04;
  font-size: var(--fs-base);
  letter-spacing: var(--track-kicker);
}

/* The customer's own headline: their words in body type, not a site heading */
.review-title {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-body);
  margin: var(--sp-2) 0 var(--sp-3);
}

/* --------------------------------------------------------------------------
   16. §08 FAQ — Elevated Luxury Boutique Accordion Cards
   -------------------------------------------------------------------------- */

.calculator-faq-wrap {
  max-width: 900px;
  margin: 64px auto 0;
  padding-top: 48px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.calc-faq-header {
  text-align: center;
  margin-bottom: 36px;
}

.calc-faq-kicker {
  display: inline-block;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #121316;
  margin-bottom: 8px;
}

.calc-faq-header .strata-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.95rem;
  font-weight: 700;
  color: #121316;
  margin: 0 0 10px 0;
  line-height: 1.25;
}

.calc-faq-header .strata-lede {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.02rem;
  line-height: 1.6;
  color: #555A62;
  max-width: 640px;
  margin: 0 auto;
}

.faq-accordion,
.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.faq-item {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(44, 24, 16, 0.04);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.faq-item:hover {
  border-color: #121316;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.faq-item.is-open,
.faq-item:has(.faq-a.open) {
  border-color: #121316;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 22px 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s ease;
}

.faq-q:focus-visible {
  outline: 2px solid #121316;
  outline-offset: -2px;
}

.faq-q-text {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #121316;
  line-height: 1.42;
  flex: 1 1 auto;
  transition: color 0.2s ease;
}

.faq-q:hover .faq-q-text,
.faq-q[aria-expanded="true"] .faq-q-text {
  color: #121316;
}

.faq-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F0EDE5;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #121316;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-q:hover .faq-badge {
  background: #18191b;
  color: #ffffff;
  border-color: #18191b;
}

.faq-q[aria-expanded="true"] .faq-badge {
  background: #18191b;
  color: #ffffff;
  border-color: #18191b;
}

.faq-chevron {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-q[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
}

.faq-a {
  display: none;
}

.faq-a.open {
  display: block;
}

.faq-a-inner {
  padding: 0 26px 24px 26px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 18px;
}

.faq-a-inner p {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.98rem;
  line-height: 1.7;
  color: #43474F;
  margin: 0;
}

.faq-a-inner strong {
  color: #121316;
  font-weight: 700;
}

.faq-a-inner a {
  color: #121316;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #121316;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.faq-a-inner a:hover {
  color: #43474F;
}

/* FAQ Footer Concierge Strip */
.calc-faq-footer-card {
  margin-top: 40px;
  padding: 24px 30px;
  background: linear-gradient(135deg, #18191b 0%, #121316 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.calc-faq-footer-text {
  flex: 1 1 auto;
}

.calc-faq-footer-title {
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: #f7f1e5;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

.calc-faq-footer-sub {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.90rem;
  line-height: 1.55;
  color: #b8af9f;
  margin: 0;
}

.calc-faq-footer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.calc-faq-footer-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 18px;
  font-size: 0.90rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .calculator-faq-wrap {
    margin-top: 48px;
    padding-top: 36px;
  }

  .calc-faq-header .strata-title {
    font-size: 1.6rem;
  }

  .faq-q {
    padding: 18px 18px;
    gap: 12px;
  }

  .faq-q-text {
    font-size: 0.98rem;
  }

  .faq-badge {
    width: 30px;
    height: 30px;
  }

  .faq-a-inner {
    padding: 0 18px 20px 18px;
    padding-top: 14px;
  }

  .calc-faq-footer-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 20px;
  }

  .calc-faq-footer-actions {
    width: 100%;
    flex-direction: column;
    margin-top: 8px;
  }

  .calc-faq-footer-actions .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   17. §09 ARTICLES & GUIDES — dispatches as register rows
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   18. §10 CONTACT — ruled info rows, ledger form
   -------------------------------------------------------------------------- */
.contact-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: start;
}

.phone-link {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.25s ease;
  font-variant-numeric: tabular-nums;
}

.phone-link:hover {
  color: var(--accent-hover);
  text-decoration: none;
}

/* Hours as an aligned clean table */
.hours-table {
  list-style: none;
}

.hours-table li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dotted var(--rule-strong);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink);
}

.hours-table li:last-child {
  border-bottom: 0;
}

.hours-table .h-day {
  color: var(--ink-muted);
}

.hours-table .h-closed {
  color: var(--accent);
}

/* The form on parchment */
.desk-form {
  padding: 32px 32px 32px 32px;
}

.form-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 8px;
}

.form-sub {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-bottom: 0;
}

.form-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

.f-group {
  padding: 16px 0;
}

.f-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.f-input,
.f-select,
.f-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 12px 12px;
  transition: var(--transition-smooth);
  resize: vertical;
  box-shadow: none;
}

.f-input::placeholder,
.f-textarea::placeholder {
  color: var(--ink-muted);
}

.f-input:focus,
.f-select:focus,
.f-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: inset 0 1px 3px rgba(120, 85, 50, 0.1), 0 0 0 3px rgba(211, 161, 70, 0.18);
}

/* The contact form's honeypot (src/contact.php): off screen rather than display:none, which
   some bots check for and skip. aria-hidden and tabindex=-1 keep it from people. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-alert-msg {
  display: none;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  border-left: 3px solid;
}

.form-alert-msg.success {
  display: block;
  border-left-color: #5d7d3a;
  background: rgba(93, 125, 58, 0.1);
  color: #3f5626;
}

.form-alert-msg.error {
  display: block;
  border-left-color: #a5342a;
  background: rgba(165, 52, 42, 0.08);
  color: #8a2b22;
}

.strata-inner {
  position: relative;
  padding-top: 4px;
}

/* --------------------------------------------------------------------------
   19. RESPONSIVE — MESA STRATA
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .strata-section {
    padding: 64px var(--gutter);
  }

  /* .contact-split is not here: Visit Us keeps the card and the form side by side down to 901px
     (its own rule stacks them at 900). */
  .split-7-5,
  .desk-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .svc-row {
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
  }

  .svc-row {
    grid-template-columns: 1fr auto;
  }

  .svc-row .svc-ico {
    display: none;
  }

  .svc-row .svc-name {
    grid-column: 1;
  }

  .svc-row .svc-desc {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .strata-section {
    padding: 48px var(--gutter);
  }

  .strata-head {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
  }

  .strata-title {
    font-size: var(--fs-xl);
  }

  .strata-lede {
    font-size: var(--fs-md);
  }

  .btn-metal-unit {
    display: none;
  }

  .desk-lit {
    padding: 8px 16px 24px 16px;
  }

  .desk-shadow {
    padding: 24px 16px;
  }

  .ledger-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 0;
  }

  .svc-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 12px;
  }

  .svc-cost {
    text-align: left;
  }

  .form-2col {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .desk-form {
    padding: 24px 16px 24px 16px;
  }

  .faq-a {
    padding: 0 16px 24px 16px;
  }
}

/* --------------------------------------------------------------------------
   16. SOUTHWESTERN HERITAGE FOOTER (Compact Atelier Ribbon)
   -------------------------------------------------------------------------- */
.site-southwest-footer {
  background: #ffffff;
  color: #121316;
  padding: 0 0 16px;
  font-size: var(--fs-xs);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.03);
}

.site-southwest-footer a {
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.site-southwest-footer a:hover,
.site-southwest-footer a:focus-visible {
  color: #121316 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.site-southwest-footer .f-logo-link,
.site-southwest-footer .f-logo-link:hover,
.site-southwest-footer .f-logo-link:focus-visible {
  text-decoration: none !important;
}

.footer-gold-trim {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #D4AF37 15%, #FDECB2 50%, #D4AF37 85%, transparent 100%);
  width: 100%;
}

.footer-inner-content {
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px var(--gutter) 12px;
}

.footer-3col-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.1fr 1.4fr;
  gap: 28px 40px;
  margin-bottom: 22px;
  align-items: start;
}

@media (max-width: 960px) {
  .footer-3col-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 32px;
  }

  .f-showroom-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .footer-3col-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .f-brand-col {
    align-items: center;
    text-align: center;
  }
}

.f-brand-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  width: fit-content;
}

.f-logo-link {
  display: inline-block;
  margin-bottom: 2px;
  width: fit-content;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  text-decoration: none;
}

.f-full-logo-img {
  width: 144px;
  height: auto;
  aspect-ratio: 823 / 672;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
  display: block;
}

.f-logo-link:hover .f-full-logo-img {
  filter: none !important;
  opacity: 0.92;
}

.f-brand-motto {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: #121316;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
}

.f-trust-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #121316;
  font-weight: 600;
  width: fit-content;
  margin-top: 4px;
}

.f-stars {
  color: #F59E0B;
  letter-spacing: 2px;
  font-size: 0.88rem;
  line-height: 1;
}

.f-heading {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: #111113;
  margin-bottom: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid #121316;
  padding-bottom: 4px;
  display: inline-block;
}

.f-links-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 16px;
}

.f-links-grid a {
  font-family: var(--font-body);
  color: #121316;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.f-links-grid a:hover,
.f-links-grid a:focus-visible {
  color: #121316;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.f-ebay-link {
  color: #121316 !important;
  font-weight: 700;
  text-decoration: none;
}

.f-ebay-link:hover,
.f-ebay-link:focus-visible {
  color: #000000 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.f-contact-inline-details {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #2D3136;
  line-height: 1.45;
}

.f-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: #2D3136;
}

.f-info-row strong {
  font-weight: 700;
  color: #111113;
}

.f-info-icon {
  flex-shrink: 0;
  color: #555A62;
}

.f-phone-link {
  font-family: var(--font-body);
  color: #121316;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.f-phone-link strong {
  font-weight: inherit;
  font-size: inherit;
}

.f-phone-link:hover,
.f-phone-link:focus-visible {
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.f-gold-link {
  font-family: var(--font-body);
  color: #121316;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.f-gold-link:hover,
.f-gold-link:focus-visible {
  color: #121316;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.f-sep {
  color: #8A909A;
}

.f-hours-row {
  font-family: var(--font-body);
  color: #2D3136;
  font-size: 0.85rem;
  font-weight: 500;
}

.footer-micro-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 16px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #555A62;
}

.f-accreditations-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-weight: 500;
  color: #555A62;
}

.f-acc-tag {
  white-space: nowrap;
  font-weight: 500;
}

.f-copy-p {
  margin: 0;
  color: #555A62;
  font-weight: 500;
}

.f-legal-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.f-legal-inline a {
  font-family: var(--font-body);
  color: #555A62;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.f-legal-inline a:hover,
.f-legal-inline a:focus-visible {
  color: #121316;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  .footer-micro-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE BREAKPOINTS (Mobile Optimization)
   -------------------------------------------------------------------------- */
@media (max-width: 1360px) {
  .brand-plaque-anchor {
    left: 24px;
    width: 152px;
    height: 125px;
  }

  .brand-plaque-card {
    width: 152px;
    height: 125px;
  }

  .header-nav-desktop {
    margin-left: 160px;
    gap: var(--sp-5);
  }

  .header-inner {
    gap: var(--sp-5);
  }
}

@media (max-width: 1080px) {
  .header-nav-desktop {
    display: none;
  }

  .mobile-nav-toggle {
    display: flex;
  }

  .brand-plaque-anchor {
    left: 20px;
    width: 135px;
    height: 111px;
  }

  .brand-plaque-card {
    width: 135px;
    height: 111px;
  }

  .header-inner {
    justify-content: flex-end;
    gap: var(--sp-4);
    min-height: 64px;
  }
}

/* Phones: the action bar at the bottom carries Call. */
@media (max-width: 900px) {
  .header-call {
    display: none;
  }
}

@media (max-width: 1024px) {
  .site-framing-shell {
    display: flex;
  }

  .shell-left-band,
  .shell-right-band {
    flex: 0 0 10px;
    min-width: 10px;
  }

  .shell-center-stage {
    max-width: 100%;
    box-shadow: var(--shadow-card);
  }

  .footer-4col-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Home hero up to 1100px: the photo whole, then the panel under it. Floating, the panel covered
   the coins (and at 800-900px the peak) on every screen narrower than about 1300px (round 3,
   home A1). Tablets see it at 2.2:1 (the added desert trimmed at the sides, so the Sell button stays
   on an iPad's first screen); phones a 16:10 middle (below). */
@media (max-width: 1100px) {
  .hero-image-stage {
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
  }

  .hero-panoramic-img {
    height: auto;
    aspect-ratio: 2.3 / 1;
  }

  .hero-main-typography-box {
    position: static;
    /* The desktop rule parks this box over the sky with top: 24px; right: 42px. position: static
       alone does not retire those: src/pages/index.php's own <style> block loads after this file
       and sets position: relative again, unscoped, so the offsets came back to life and dragged
       the stacked box 42px off the left edge and 24px down. Clearing inset here makes the stacked
       box safe whichever position wins. */
    inset: auto;
    width: 100%;
    max-width: none;
    transform: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--charcoal-deep);
    padding: 22px 18px 26px;
  }

  .hero-eyebrow-badge {
    font-size: 10px;
    margin-bottom: 6px;
    letter-spacing: var(--track-kicker);
    justify-content: center;
    text-align: center;
    padding: 3px 10px;
  }

  .hero-brand-title .hero-title-sub {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
  }

  .hero-tagline-text {
    font-size: 13px;
    line-height: 1.5;
    margin: 6px 0 10px;
  }

  .hero-cta-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    max-width: 520px;
    margin: 12px auto 0;
  }

  .hero-cta-buttons .btn {
    flex: 1 1 0;
    min-height: 42px;
  }
}

@media (max-width: 768px) {
  .site-framing-shell {
    display: block;
  }

  .shell-left-band,
  .shell-right-band {
    display: none;
  }

  .header-nav-desktop {
    display: none;
  }

  .mobile-nav-toggle {
    display: flex;
  }

  .brand-plaque-anchor {
    position: absolute;
    left: 14px;
    top: 0;
    width: 115px;
    height: 94px;
    z-index: 150;
  }

  .brand-plaque-card {
    width: 115px;
    height: 94px;
  }

  .header-inner {
    justify-content: flex-end;
    min-height: 68px;
  }

  .hero-panoramic-img {
    aspect-ratio: 16 / 10;
  }

  .form-2col {
    grid-template-columns: 1fr;
  }

  .footer-4col-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   20. SERVICE SUB-PAGES
   --------------------------------------------------------------------------
   Deliberately built on the Strata tokens from §8 rather than a parallel
   system: same grounds, same Cinzel headings, same gold rules, same butte
   mark. A service page should look like a page of the same document as the
   homepage, not a microsite.

   Replaces the never-written ruleset the old sub-pages referenced
   (.service-layout-grid, .article-section, .faq-card and friends), which is
   why those pages rendered as unstyled browser defaults.
   -------------------------------------------------------------------------- */

/* Compact page header — no photographic hero on sub-pages */
.subpage-header {
  position: relative;
  padding: 96px var(--gutter) 32px;
  background:
    linear-gradient(180deg, rgba(250, 248, 243, 0.93) 0%, rgba(250, 248, 243, 0.95) 100%),
    url('images/antique-map-bg.webp') center/cover no-repeat;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.subpage-header-inner {
  max-width: var(--measure);
  margin: 0 auto;
}

.breadcrumbs-nav {
  margin-bottom: 16px;
}

.breadcrumbs-nav ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: 0;
  color: var(--ink-muted);
}

.breadcrumbs-nav a {
  color: var(--accent);
  border-bottom: 1px solid transparent;
}

.breadcrumbs-nav a:hover {
  border-bottom-color: var(--accent);
}

.breadcrumbs-nav li[aria-current] {
  color: var(--ink);
}

.breadcrumbs-nav .bc-sep {
  color: var(--rule-strong);
}

.subpage-titleblock {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 0 32px;
  align-items: start;
}

.subpage-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  gap: 8px;
  padding-top: 4px;
}

.subpage-kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}

/* The plaque's own device: a short gold rule before the line, as in "- SCOTTSDALE, AZ -" */
.subpage-kicker::before {
  content: '';
  flex: 0 0 24px;
  height: 1px;
  background: #121316;
}

.subpage-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
}

.subpage-standfirst {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-body);
  max-width: 64ch;
  margin-top: 16px;
}

/* Body: article + sidebar */
.svc-body {
  position: relative;
  padding: 64px var(--gutter) 76px;
  background:
    linear-gradient(180deg, rgba(250, 248, 243, 0.94) 0%, rgba(250, 248, 243, 0.96) 100%),
    url('images/antique-map-bg.webp') center/cover no-repeat;
}

.svc-layout {
  max-width: var(--measure);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 64px;
  align-items: start;
}

.svc-article>*+* {
  margin-top: 24px;
}

/* A comfortable line (about 68 characters) for the reading text; figures, tables and callouts
   keep the column's full width (UX review F13; template only, the text is untouched). */
.svc-article > :is(p, ul, ol, h2, h3, h4, blockquote, dl) {
  /* 38em: about 70 characters of 18px Inter (68ch measured 75-82: a "0" is wider than a letter). */
  max-width: 38em;
}

.svc-article h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.22;
  color: var(--ink);
  margin-top: 48px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-strong);
  box-shadow: none;
}

.svc-article h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--mesa-shadow);
  margin-top: 32px;
}

.svc-article p {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink-body);
}

.svc-article p strong {
  color: var(--mesa-shadow);
  font-weight: 600;
}

.svc-article a {
  color: var(--accent);
  border-bottom: 1px solid rgba(201, 154, 46, 0.4);
}

.svc-article a:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent);
}

.svc-article ul {
  list-style: none;
  padding: 0;
}

.svc-article ul li {
  position: relative;
  padding-left: 24px;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-body);
}

/* Butte-shaped bullet, echoing the logo mark */
.svc-article ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 13px;
  height: 7px;
  background: var(--mesa-sunlit);
  clip-path: polygon(0% 100%, 16% 42%, 34% 16%, 62% 10%, 78% 30%, 100% 100%);
}

/* Numbered process steps */
.svc-steps {
  counter-reset: svcstep;
  margin-top: 24px;
  border-top: none;
}

.svc-steps>li {
  counter-increment: svcstep;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 24px;
  align-items: start;
  padding: 24px 0;
  margin: 0;
  border-bottom: 1px solid var(--rule);
}

.svc-steps>li::before {
  content: counter(svcstep, decimal-leading-zero);
  position: static;
  width: auto;
  height: auto;
  background: none;
  clip-path: none;
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.svc-steps h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

.svc-steps p {
  font-size: var(--fs-md);
}

/* Pull-out note */
.svc-note {
  padding: 24px 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-card);
  box-shadow: none;
}

/* The box's title (a warning, usually): readable, in ink. 12px bronze over 18px text read as a label. */
.svc-note .svc-note-title {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 8px;
}

.svc-note p {
  font-size: var(--fs-md);
  margin: 0;
}

/* Sidebar: the links, then the Visit card, which follows the reader (section 20b). */
.svc-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-box {
  padding: 24px 24px 24px 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.sidebar-box-name {
  margin-bottom: var(--sp-2);
}

.sidebar-box-note {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-muted);
  margin-bottom: var(--sp-3);
}

.sidebar-box--dark {
  background: linear-gradient(165deg, #1c1c1c 0%, #111111 100%);
  background-size: auto, 380px 380px;
  border-color: var(--gold-line);
  box-shadow: var(--shadow-card);
}

.sidebar-box .dt-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sw-terracotta);
  margin-bottom: 8px;
}

.sidebar-box h2,
.sidebar-box h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.28;
  color: var(--ink);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-strong);
}

.sidebar-box--dark h2,
.sidebar-box--dark h3 {
  color: var(--gold-text);
  border-bottom-color: var(--rule-onshadow-strong);
}

.sidebar-box p {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--ink-body);
  margin: 0 0 16px 0;
}

.sidebar-box--dark p {
  color: var(--gold-soft);
}

.sidebar-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-contact-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-onshadow);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--gold-soft);
}

.sidebar-contact-list li:last-child {
  border-bottom: 0;
}

.sidebar-contact-list .ico {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  stroke: var(--gold-text);
}

.sidebar-meta-note {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-muted);
  margin-top: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Other services list */
.sidebar-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-links-list li {
  border-bottom: 1px solid var(--rule);
}

.sidebar-links-list li:last-child {
  border-bottom: 0;
}

.sidebar-links-list a {
  display: block;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-body);
  transition: var(--transition-smooth);
}

.sidebar-links-list a:hover,
.sidebar-links-list a[aria-current],
.sidebar-links-list a[aria-current="page"],
.sidebar-links-list a.active {
  color: var(--accent);
}

.sidebar-links-list a[aria-current],
.sidebar-links-list a[aria-current="page"],
.sidebar-links-list a.active {
  font-weight: 600;
}

/* Services hub grid */

/* Closing CTA band */
.svc-cta-band {
  position: relative;
  padding: 48px var(--gutter);
  background: var(--charcoal);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.svc-cta-band h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  margin-bottom: 16px;
}

.svc-cta-band p {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--gold-soft);
  max-width: 62ch;
  margin: 0 auto 24px auto;
}

.svc-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   20b. SERVICE SUB-PAGE RESPONSIVE
   -------------------------------------------------------------------------- */
/* Two columns down to 901px: between 901 and 1100 the one-column layout hid the Visit card while
   the phone bar was not there yet, leaving 5-7 screens with no call, address or hours (round 3). */
@media (max-width: 1100px) {
  .svc-layout {
    gap: 32px;
  }
}

@media (max-width: 900px) {
  .svc-layout {
    /* minmax(0, ...), not 1fr: a bare 1fr column is at least as wide as its widest content, so a
       wide table stretched the page sideways on phones instead of scrolling in its wrapper. */
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* The Visit card follows the reader to the end of the page: the sidebar runs the article's full
   height, the links come first, and the card (about 460px) sticks once it reaches the top. The
   whole sidebar used to stick only on windows 780px+ tall, so on most laptops it scrolled away. */
@media (min-width: 901px) {
  .svc-layout {
    align-items: stretch;
  }

  .svc-sidebar .sidebar-box--visit {
    order: 1;
  }
}

@media (min-width: 901px) and (min-height: 600px) {
  .svc-sidebar .sidebar-box--visit {
    position: sticky;
    top: var(--sp-5);
  }
}

@media (max-width: 768px) {
  .subpage-header {
    padding: 24px var(--gutter) 24px;
  }

  .svc-body {
    padding: 40px var(--gutter) 48px;
  }

  .svc-cta-band {
    padding: 40px var(--gutter);
  }

  .subpage-titleblock {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .subpage-mark {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding-top: 0;
  }

  .subpage-standfirst {
    font-size: var(--fs-md);
  }

  .svc-steps>li {
    grid-template-columns: 42px 1fr;
    gap: 16px;
  }
}

/* Service-page index on the homepage Services section */

/* ==========================================================================
   ENHANCED SOUTHWESTERN CONTENT SECTIONS
   Tactile Collector Trays, Field Guide Index, Diagnostic Trinity
   ========================================================================== */

/* 1. What We Buy Tactile Trays */
.buy-trays-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.buy-tray-card {
  padding: 24px 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-top-color 0.22s ease;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.buy-tray-photo {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 16px;
  border: 1px solid rgba(201, 154, 46, 0.28);
  background: var(--charcoal);
  box-shadow: none;
}

.buy-tray-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.buy-tray-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
}

.buy-tray-badge {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  padding: 3px 8px;
  background: rgba(201, 154, 46, 0.12);
  color: var(--accent);
  border-radius: 4px;
}

.buy-tray-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px 0;
  line-height: 1.25;
}

.buy-tray-desc {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-body);
  margin-bottom: 16px;
  flex: 1;
}

.buy-tray-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  transition: color 0.2s ease;
}

/* Error Coin Policy Callout */
.error-policy-tray-notice {
  margin-top: 32px;
  padding: 24px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.error-policy-icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.error-policy-text h4 {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 8px 0;
  letter-spacing: 0;
}

.error-policy-text p {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0;
}

/* 2. Numismatic Field Guides & Appraisal Library (Upgrading the subpage panel) */
.field-guides-panel {
  margin-top: 40px;
  padding: 32px 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.field-guides-head {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.field-guides-head h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 8px 0;
}

.field-guides-head p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink-body);
  margin: 0;
}

.field-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.field-guide-card {
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.field-guide-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-raised);
}

.field-guide-tag {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--accent);
  margin-bottom: 8px;
}

.field-guide-title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 8px 0;
  flex: 1;
}

.field-guide-card:hover .field-guide-title {
  color: var(--accent);
}

.field-guide-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}

/* 3. Diagnostic Equipment Trinity in Section §05 */

/* 4. Never Clean Stakes 3-Tier Strip */

/* Responsive adjustments */
@media (max-width: 1100px) {
  .buy-trays-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .field-guides-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Two across down to 600px (one per row, an iPad held 2.8 screens of tiles). */
@media (max-width: 600px) {
  .buy-trays-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .field-guides-grid {
    grid-template-columns: 1fr;
  }

  .field-guides-panel {
    padding: 24px 16px;
  }

  .error-policy-tray-notice {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   21. STANDALONE BLOG & FIELD NOTES ARTICLE STYLES
   -------------------------------------------------------------------------- */
.article-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.article-cat-badge {
  display: inline-block;
  padding: 3px 12px;
  background: rgba(201, 154, 46, 0.08);
  border: 1px solid rgba(201, 154, 46, 0.25);
  border-radius: 4px;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
}

.article-lead-figure {
  margin: 0 0 32px 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-card);
  background: var(--charcoal);
}

/* A figure inside the body rather than leading the article: space above as well as below. */
.article-lead-figure.article-inline-figure {
  margin: 32px 0;
}

/* contain, on the figure's charcoal: the square 1878-CC coin lost 38% of its height (and a note its
   engraved border) to cover-cropping. Landscape photos are unchanged at this height. */
.article-lead-figure img {
  width: 100%;
  height: auto;
  max-height: min(600px, 70vh);
  object-fit: contain;
  display: block;
}

.article-lead-figure figcaption {
  padding: 12px 16px;
  background: var(--cream);
  border-top: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--ink-muted);
  line-height: 1.4;
}

.counter-takeaway {
  margin: 32px 0;
  padding: 24px 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.counter-takeaway .counter-takeaway-title {
  line-height: 1.35;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 8px 0;
  letter-spacing: 0;
}

.counter-takeaway p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-body);
}

.counter-takeaway p strong {
  color: var(--ink);
}

/* Hallmark & Specimen Comparison Table */
.data-table-wrapper {
  overflow-x: auto;
  margin: 32px 0;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  background: #ffffff;
}

.hallmark-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-base);
}

.hallmark-table th {
  background: var(--tint);
  padding: 16px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  border-bottom: 2px solid var(--rule-strong);
}

.hallmark-table td {
  padding: 16px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-body);
  line-height: 1.5;
  vertical-align: top;
}

.hallmark-table tr:nth-child(even) td {
  background: var(--cream);
}

.hallmark-table tr:hover td {
  background: rgba(201, 154, 46, 0.08);
}

.hallmark-table strong {
  color: var(--ink);
}

.tag-solid {
  display: inline-block;
  padding: 2px 8px;
  background: #ecfdf5;
  border: 1px solid #10b981;
  color: #047857;
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  border-radius: 4px;
}

.tag-plate {
  display: inline-block;
  padding: 2px 8px;
  background: #fef2f2;
  border: 1px solid #ef4444;
  color: #b91c1c;
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  border-radius: 4px;
}

/* Author Box & Counter Signoff */
.author-counter-box {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 24px 24px;
  margin: 40px 0;
  background: var(--cream);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
}

.author-counter-mark {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.author-counter-mark img {
  width: 32px;
  height: auto;
}

.author-counter-text .author-counter-name {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--ink);
}

.author-counter-text p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-body);
}

/* Blog Hub Card Grid */
.blog-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 32px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.blog-card:hover {
  box-shadow: var(--shadow-raised);
  border-color: var(--gold);
}

.blog-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  background: var(--charcoal);
}

.blog-card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.blog-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px 0;
  color: var(--ink);
}

.blog-card-excerpt {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0 0 24px 0;
  flex-grow: 1;
}

.blog-card-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.blog-read-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}

/* Two across down to 600px (one per row on an iPad made each card a 3.3:1 strip). */
@media (max-width: 600px) {
  .blog-hub-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   21. WORLD-CLASS CONTENT SECTION DESIGN SYSTEMS
   -------------------------------------------------------------------------- */

/* Curated What We Buy Grid (Homepage Section §01) */
.curated-buy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px;
  margin-top: 32px;
}

.curated-buy-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(201, 154, 46, 0.25);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 16px rgba(44, 24, 16, 0.06);
  text-decoration: none;
  color: inherit;
}

.curated-buy-card:hover {
  box-shadow: 0 8px 24px rgba(44, 24, 16, 0.12);
  border-color: var(--accent);
}

.curated-buy-photo {
  width: 100%;
  height: 185px;
  overflow: hidden;
  background: var(--charcoal);
  position: relative;
  border-bottom: 1px solid rgba(201, 154, 46, 0.2);
}

.curated-buy-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.curated-buy-card:hover .curated-buy-photo img {
  /* static: locked */
}

.curated-buy-content {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.curated-buy-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  padding: 3px 8px;
  margin-bottom: 10px;
  background: rgba(212, 175, 55, 0.12);
  color: #121316;
  border-radius: 4px;
}

.curated-buy-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.curated-buy-card p {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

.curated-buy-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  transition: color 0.2s ease, gap 0.2s ease;
}

.curated-buy-card:hover .curated-buy-link {
  gap: 12px;
  text-decoration: none;
}

/* Spot Rates 4-Pack (Homepage Section §02) */
.spot-rates-quad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.spot-rate-card {
  padding: 24px 16px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.spot-rate-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--track-btn);
  display: block;
}

.spot-rate-card--gold .spot-rate-label { color: var(--accent); }
.spot-rate-card--silver .spot-rate-label { color: var(--ink-muted); }
.spot-rate-card--platinum .spot-rate-label { color: var(--ink-muted); }
.spot-rate-card--palladium .spot-rate-label { color: var(--ink-muted); }

.spot-rate-num {
  font-family: var(--font-data);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--ink);
  margin: 8px 0 8px;
  letter-spacing: 0;
}

.spot-rate-sub {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

/* Trust Standards & Visitor Checklist Cards */
/* What to bring: four cards, 4 across, 2 x 2 under 900px, one column on small phones */
.trust-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

@media (max-width: 900px) {
  .trust-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .trust-cards-grid {
    grid-template-columns: 1fr;
  }
}

.trust-standard-card {
  padding: 24px 24px;
  transition: box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.trust-standard-card .trust-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(201, 154, 46, 0.1);
  border: 1px solid rgba(201, 154, 46, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--accent);
}

.trust-standard-card .trust-icon-box svg {
  width: 22px;
  height: 22px;
}

.trust-standard-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px 0;
  line-height: 1.35;
}

.trust-standard-card p {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0;
}

/* Official Numismatic Credential Seals */
/* Four seals: 4 across, 2 x 2 below 900px (never 3 + 1) */
.numismatic-seal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}

@media (max-width: 900px) {
  .numismatic-seal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.seal-badge {
  padding: 16px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.seal-org {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 4px;
  display: block;
}

.seal-status {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
}

/* Contact Details Block */

/* Sister Showcase Grid & Cards */
.sister-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px;
  margin-top: 32px;
}

.sister-card {
  padding: clamp(20px, 5vw, 32px);
  transition: box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.sister-card-tag {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.sister-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--ink);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.sister-card p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 16px;
  flex-grow: 1;
}

.sister-card-meta {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* =========================================================================
   STORE & INVENTORY GALLERY STYLES
   ========================================================================= */

.store-page-body {
  position: relative;
  padding: 40px var(--gutter) 76px;
  background:
    linear-gradient(180deg, rgba(250, 248, 243, 0.94) 0%, rgba(250, 248, 243, 0.96) 100%),
    url('images/antique-map-bg.webp') center/cover no-repeat;
}

.store-page-inner {
  max-width: 1240px;
  margin: 0 auto;
}

/* 2. Controls: Filter Tabs, Search, Sort & Items Per Page */
.store-controls-wrap {
  margin-bottom: var(--sp-4);
}

.store-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.store-filter-btn {
  padding: 8px 16px;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: var(--track-btn);
}

.store-filter-btn:hover {
  background: var(--tint);
  border-color: var(--accent);
  color: var(--accent);
}

.store-filter-btn.active {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--cream);
  box-shadow: var(--shadow-card);
}

.store-filter-btn .count-badge {
  display: inline-block;
  min-width: 1.6em;
  text-align: center;
  font-size: var(--fs-xs);
  padding: 1px 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
}

.store-filter-btn.active .count-badge {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.store-tools-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.store-search-box {
  position: relative;
  flex: 1 1 360px;
  min-width: 260px;
  max-width: 520px;
}

.store-search-input {
  width: 100%;
  padding: 10px 44px 10px 40px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.store-search-input:focus {
  border-color: #121316;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.store-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  pointer-events: none;
}

/* 44px to tap, in the muted ink (the on-dark grey measured 2.44:1 on the white field). The
   script shows it (display: flex) while there is text to clear. */
.store-search-clear {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: var(--fs-lg);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  display: none;
}

.store-search-clear:hover {
  color: var(--ink);
}

.store-sort-box {
  order: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.store-sort-box label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0;
}

.store-sort-select {
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  outline: none;
}

/* Between the search and the sort, on the same row (its own dashed row pushed the grid down). */
.store-meta-counter {
  order: 1;
  flex: 0 1 auto;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  text-align: center;
}

/* 3. Inventory Grid & Cards (Luxury Numismatic Vitrine) */

/* Card Gallery Component */

/* Card Content & Specimen Metadata */

/* Micro-Specifics 2x2 Grid (Modern & Clean) */

/* 4. Pagination Controls Bar */
.store-pagination-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px auto 40px auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  max-width: 600px;
}

.pag-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  background: #ffffff;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-variant-numeric: tabular-nums;
}

.pag-btn:hover:not(.disabled):not(:disabled) {
  background: var(--tint);
  border-color: var(--accent);
  color: var(--accent);
}

.pag-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
  box-shadow: var(--shadow-card);
  cursor: default;
}

.pag-btn.disabled,
.pag-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: var(--line);
}

.pag-info-label {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  font-style: italic;
  margin: 0 8px;
}


/* 4b. Store item pages (/store/<item>) and links to them */

/* The item window's layout, as a page: framed like the window, without its height cap. */
.store-item-page {
  /* clip, not hidden: a hidden overflow made the card the sticky photos' scroll box, so they never
     stayed in view and sat 24px below the title (round 3, shop-items A2). */
  overflow: clip;
  padding: var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.store-item-gone {
  text-align: center;
  padding: 32px 0 12px;
}

/* 5. Responsive Adjustments for Store: phones get the search on its own line, then the count and
   the sort side by side (three stacked rows were 208px before the first coin). */
@media (max-width: 900px) {
  .store-tools-row {
    padding: 12px;
    gap: 8px 12px;
  }

  .store-search-box {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }

  .store-meta-counter {
    text-align: left;
  }
}

/* ==========================================================================
   HOME PAGE (UX review 2026-10-16, docs/ux-review-2026-10-16/README.md, D3/D4)
   Seven sections: hero, how selling works, what we buy, today's prices,
   looking to buy, reviews, visit. Everything the template used to set inline.
   ========================================================================== */

/* Hero: two buttons in a row (column only on narrow mobile) */
.hero-cta-buttons {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

@media (max-width: 600px) {
  .hero-cta-buttons {
    flex-direction: column;
    gap: 8px;
  }
}

.hero-call-line {
  margin: 12px 0 0;
  text-align: center;
  font-size: var(--fs-base);
  color: var(--cream);
  text-shadow: 0 1px 4px rgba(10, 5, 2, 0.9);
}

.hero-call-line a {
  color: var(--accent-on-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  display: inline-block;
  padding: 12px 2px;
}

.hero-call-line a:hover,
.hero-call-line a:focus-visible {
  text-decoration: none;
}

/* Shared: a plain text link with an arrow, and a centred row of buttons. */
.home-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.home-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

/* How selling works: three numbered steps. */
.home-steps {
  list-style: none;
  counter-reset: home-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
  margin: 32px 0 0;
  padding: 0;
}

.home-step {
  counter-increment: home-step;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.home-step::before {
  content: counter(home-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--accent-on-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}

.home-step h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.3;
}

.home-step p {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 8px;
  flex-grow: 1;
}

/* What we buy: each category card is one link. */
.curated-buy-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

a.curated-buy-card {
  color: inherit;
  text-decoration: none;
}

a.curated-buy-card p {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.6;
}

.home-buy-links {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 32px;
}

/* Today's prices */
.home-spot-asof {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  text-align: right;
}


/* Reviews: the credential seals sit under them. */
.home-seals {
  margin-top: 32px;
}

/* Visit: showroom showcase + address, phone, hours */
.home-visit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: 36px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  align-items: stretch;
}

.home-visit-showcase {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fbf9f5;
}

.home-visit-photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.home-visit-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 74%;
  display: block;
}

.home-visit-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.home-visit-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.home-visit-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-visit-btns .btn {
  flex: 1 1 auto;
  text-align: center;
  justify-content: center;
  padding: 11px 18px;
  font-size: 0.92rem;
}

.home-visit-actions .home-text-us {
  text-align: left;
  margin: 0;
  font-size: 0.9rem;
  color: #4A4D54;
}

.home-visit-actions .home-text-us a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

.home-visit-actions .home-text-us a:hover,
.home-visit-actions .home-text-us a:focus-visible {
  text-decoration: none;
}

@media (max-width: 900px) {
  .home-visit {
    grid-template-columns: 1fr;
    padding: 22px;
    gap: 24px;
  }

  .home-visit-showcase {
    height: auto;
    min-height: unset;
  }

  .home-visit-photo {
    position: relative;
    height: 380px;
    min-height: unset;
  }

  .home-visit-btns {
    flex-direction: column;
  }

  .home-visit-btns .btn {
    width: 100%;
  }
}

.home-visit-col h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--ink);
  margin: 0 0 8px;
}

.home-visit-col p {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 8px;
}

.home-visit-note {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.home-visit-phone a {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  padding: 8px 0;
  font-variant-numeric: tabular-nums;
}

.home-visit-phone a:hover {
  text-decoration: none;
}

.home-hours {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-base);
  color: var(--ink-muted);
}

.home-hours li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.home-hours li:last-child {
  border-bottom: 0;
}

.home-hours .is-closed {
  color: var(--accent);
}

@media (max-width: 600px) {
  .home-visit {
    padding: 24px;
  }

}

/* ==========================================================================
   NAVIGATION AND FOOTER (UX review 2026-10-16, D2)
   One menu for every screen: Sell to Us ▾ · Shop · Today's Prices · Guides ·
   Visit Us. Desktop dropdown also opens on its ▾ button; the phone drawer
   puts Call first and opens a dropdown's pages with its + button.
   ========================================================================== */

.header-nav-desktop .h-nav-item.has-dropdown {
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.nav-dd-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: inherit;
  line-height: 1;
  padding: var(--sp-2) var(--sp-1);
  min-width: 24px;
  cursor: pointer;
}

/* In the bar the ▾ adds no height, so "Sell to Us" lines up with (and underlines like) the rest. */
.header-nav-desktop .nav-dd-toggle {
  padding-block: 0;
  align-self: stretch;
}

.nav-dd-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}

.h-nav-item.has-dropdown.open .nav-dd-toggle svg {
  transform: rotate(180deg);
}

.h-nav-item.has-dropdown.open .h-nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.h-nav-dropdown-menu {
  min-width: 290px;
}

/* An invisible bridge over the gap above the menu, so moving the pointer down keeps it open. */
.h-nav-dropdown-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}

.h-nav-dd-group {
  display: block;
  padding: 12px 16px 4px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-shadow: none;
}

.h-nav-dd-group:not(:first-child) {
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

.h-nav-dropdown-menu a {
  padding: 12px 16px;
  font-size: var(--fs-sm);
}

/* Phone drawer */
.mobile-nav-toggle {
  width: 44px;
  height: 44px;
  padding: 12px;
  background: none;
  border: 0;
  cursor: pointer;
}

.mobile-dropdown-menu[hidden] {
  display: none;
}

/* The drawer's Call: the gold primary button, full width */
.mobile-dropdown-menu .m-phone-btn {
  margin-bottom: var(--sp-4);
}

.mobile-nav-list {
  gap: 0;
}

.m-nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.m-nav-row .m-nav-link {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0;
  border-bottom: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.m-sub-toggle {
  width: 52px;
  height: 52px;
  background: none;
  border: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.07);
  cursor: pointer;
  position: relative;
}

/* A plus that turns into a minus. */
.m-sub-toggle::before,
.m-sub-toggle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.m-sub-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.m-sub-toggle[aria-expanded="true"]::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.m-sub-list {
  flex-basis: 100%;
  list-style: none;
  margin: 0 0 12px;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--line);
}

.m-sub-list[hidden] {
  display: none;
}

.m-sub-group {
  padding: 12px 0 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-family: var(--font-body);
}

.m-sub-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-base);
  color: var(--ink);
  text-decoration: none;
}

.m-sub-link:hover,
.m-sub-link:focus-visible {
  color: var(--accent);
}

/* Footer: 4-column luxury layout */
.footer-4col-grid {
  grid-template-columns: 1.15fr 0.85fr 1.3fr 1.1fr;
  gap: 36px 32px;
}

@media (max-width: 1100px) {
  .footer-4col-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 28px;
  }
}

@media (max-width: 640px) {
  .footer-4col-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .site-southwest-footer {
    padding-bottom: 74px; /* clearance for phone-action-bar */
  }
}

.f-links a,
.f-text a {
  display: inline-block;
  min-height: auto;
  padding: 1px 0;
}

.f-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  column-gap: 16px;
  row-gap: 3px;
}

.footer-copyright-bar .f-sister a {
  color: var(--accent-on-dark);
}

/* ==========================================================================
   PHONE ACTION BAR (UX review 2026-10-16, D1)
   Call · Directions · Message, fixed to the bottom under 900px.
   ========================================================================== */
.phone-action-bar {
  display: none;
}

@media (max-width: 900px) {
  .phone-action-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 100vw;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: var(--charcoal-deep);
    border-top: 1px solid rgba(201, 154, 46, 0.45);
    box-shadow: 0 -2px 12px rgba(20, 10, 4, 0.18);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .phone-action-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-height: var(--pab-h);
    padding: var(--sp-2) var(--sp-1);
    color: var(--cream);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;
  }

  .phone-action-bar a + a {
    border-left: 1px solid rgba(201, 154, 46, 0.12);
  }

  .phone-action-bar svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .phone-action-bar .pab-primary {
    background: var(--gold);
    color: var(--ink);
  }

  .phone-action-bar a:active {
    filter: brightness(0.92);
  }

  /* Room for the bar under the last of the page. */
  body {
    padding-bottom: calc(var(--pab-h) + 1px + env(safe-area-inset-bottom));
  }

  /* With the menu open, the menu's own Call button is enough. */
  body:has(.mobile-dropdown-menu.open) .phone-action-bar {
    display: none;
  }
}

/* ==========================================================================
   SHOP AND ITEM PAGES (UX review 2026-10-16, D5 + phase 1 fixes)
   Cards lead to the item page (no pop-up); one photo per card; holds.
   ========================================================================== */

/* One phone gutter, as on every other page (was 36px here, which split the call button). */
@media (max-width: 760px) {
  .store-page-body {
    padding: 32px var(--gutter) 64px;
  }
}

/* The card's photo: one image, links to the item page. */

/* Specs: two columns that may shrink, so long values ellipsize instead of spilling out. */

/* A message in place of the grid (nothing matches; inventory unavailable). */
.store-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 24px;
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
}

.store-message h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: var(--fs-lg);
  margin: 0 0 8px;
}

.store-message p {
  color: var(--ink-muted);
  margin: 0 0 16px;
}

/* Controls: 16px text so iPhones don't zoom in; pills scroll sideways in one row on phones. */
.store-search-input,
.store-sort-select {
  font-size: var(--fs-base);
  min-height: 44px;
}

.store-filter-btn {
  min-height: 44px;
}

.store-search-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (max-width: 768px) {
  .store-filter-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    padding-bottom: 6px;
    margin-right: 0;
    padding-right: 0;
  }

  .store-filter-row::-webkit-scrollbar {
    display: none;
  }

  .store-filter-btn {
    flex: 0 0 auto;
  }

  .store-tools-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .store-search-box {
    max-width: 100%;
    min-width: 0;
  }

  .store-sort-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .store-sort-select {
    flex: 1;
    margin-left: 8px;
  }
}

.store-pagination-nav[hidden] {
  display: none;
}

.pag-btn {
  min-width: 44px;
  min-height: 44px;
}

.item-terms a {
  color: var(--accent);
  font-weight: 600;
  /* A phone number must not break mid-number: "(480)" was wrapping onto one line and
     "878-2234" onto the next. */
  white-space: nowrap;
}

/* ==========================================================================
   VISIT US / CONTACT PAGE (Option A: Balanced Showroom & Appraisal Form)
   ========================================================================== */
.contact-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 36px;
  align-items: start;
}

@media (max-width: 960px) {
  .contact-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.contact-left-col,
.contact-right-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.visit-card {
  padding: 32px 34px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* The hours pill is flex-shrink:0 + nowrap, so in a narrow card it took the whole row (294px of
   443) and squeezed the shop name into ~132px, breaking "Arizona Coin & Bullion" over three
   lines. Allowing the row to wrap lets the pill drop below the name instead of crushing it. */
.visit-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 10px;
}

.visit-header-top .visit-header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.visit-header-text .visit-kicker {
  margin-bottom: 4px;
}

.visit-header-text .visit-title {
  margin: 0;
}

.visit-header-top .visit-status {
  margin-bottom: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.visit-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: #f4f4f5;
  color: #52525b;
  border: 1px solid #e4e4e7;
  margin-bottom: 16px;
}

.visit-status.is-open {
  background: #ecfdf5;
  color: #15803d;
  border-color: #bbf7d0;
}

.status-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.visit-block {
  margin-top: 14px;
}

.visit-block--header {
  margin-top: 0;
  margin-bottom: 18px;
}

.visit-kicker {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold, #c99a2e);
  display: block;
  margin-bottom: 4px;
}

.visit-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ink, #1c150c);
  margin: 0 0 6px;
}

.visit-address {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-muted, #5f5243);
  margin: 0 0 12px;
}

.visit-perks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.visit-perk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #f4f3ef;
  color: #121316;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
}

.perk-ico {
  width: 14px;
  height: 14px;
  stroke: #D4AF37;
  flex-shrink: 0;
}

.visit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

/* "Call (480) 878-2234" needs 172px and the default 24px side padding left 168px, so the label
   wrapped onto a second line for the sake of 4px. Trimmed here only — the global button padding
   is unchanged. */
.visit-actions .btn {
  padding-left: 16px;
  padding-right: 16px;
}

@media (max-width: 480px) {
  .visit-actions {
    grid-template-columns: 1fr;
  }
}

.text-us-line {
  font-size: 0.8125rem;
  color: var(--ink-muted, #5f5243);
  margin: 0 0 14px;
}

.text-us-line a {
  color: var(--accent, #c99a2e);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.visit-block--hours {
  border-top: 1px solid rgba(141, 119, 95, 0.2);
  padding-top: 16px;
  margin-top: 14px;
}

.hours-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
}

.hours-ico {
  width: 17px;
  height: 17px;
  stroke: var(--gold, #c99a2e);
  flex-shrink: 0;
}

.visit-card .hours-table {
  margin: 0 0 8px;
}

.visit-note {
  font-size: var(--fs-sm) !important;
  color: var(--ink-muted) !important;
  margin-top: 4px;
}

/* Showroom Map Card */
.showroom-map-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.showroom-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #fdfcf9;
  border-bottom: 1px solid rgba(141, 119, 95, 0.18);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink, #1c150c);
}

.map-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.map-pin-ico {
  width: 16px;
  height: 16px;
  stroke: var(--gold, #c99a2e);
  flex-shrink: 0;
}

.map-open-link {
  color: var(--accent, #a3791e);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}

.map-open-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* VIP Estate Concierge Card & Banner */
.estate-concierge-card {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #18191b 0%, #242529 100%);
  border-radius: 8px;
  color: #fdfcf9;
  border: 1px solid rgba(211, 161, 70, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.estate-concierge-card--banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 32px;
  background: linear-gradient(135deg, #18191b 0%, #242529 100%);
  border-radius: 8px;
  color: #fdfcf9;
  border: 1px solid rgba(211, 161, 70, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  margin-top: 28px;
}

.estate-concierge-card--banner .estate-concierge-icon,
.estate-concierge-card .estate-concierge-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(211, 161, 70, 0.18);
  border: 1px solid var(--gold, #d3a146);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold, #e5b338);
}

.estate-concierge-card--banner .estate-concierge-icon svg,
.estate-concierge-card .estate-concierge-icon svg {
  width: 24px;
  height: 24px;
}

.estate-concierge-card--banner .estate-concierge-body {
  flex: 1 1 auto;
}

.estate-concierge-card--banner .estate-concierge-body h3,
.estate-concierge-card--banner .estate-concierge-body h4 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.estate-concierge-card--banner .estate-concierge-body p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.estate-concierge-card--banner .estate-concierge-action {
  flex-shrink: 0;
}

.estate-concierge-card--banner .estate-concierge-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #ffffff;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.estate-concierge-card--banner .estate-concierge-link-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

@media (max-width: 820px) {
  .estate-concierge-card--banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
    gap: 16px;
  }
  .estate-concierge-card--banner .estate-concierge-action {
    width: 100%;
  }
  .estate-concierge-card--banner .estate-concierge-link-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Contact Form Card (Right Column) */
.contact-form-card {
  padding: 32px 34px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.form-header-area {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.form-kicker {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold, #c99a2e);
  display: block;
  margin-bottom: 4px;
}

.form-header-area .form-title {
  margin: 0 0 6px;
}

.form-header-area .form-sub,
.contact-form-card .form-sub {
  margin: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  font-size: var(--fs-base);
  color: var(--ink-muted);
  line-height: 1.5;
}

.f-appraisal-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: #f7f6f2;
  border-left: 3px solid #121316;
  border-radius: 0 6px 6px 0;
  margin: 6px 0 14px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #4A4D54;
}

.f-tip-icon {
  width: 16px;
  height: 16px;
  stroke: #D4AF37;
  flex-shrink: 0;
  margin-top: 2px;
}

.f-tip-icon {
  width: 16px;
  height: 16px;
  stroke: var(--gold, #c99a2e);
  flex-shrink: 0;
  margin-top: 2px;
}

.f-file-tag-thumb {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

/* The form: readable labels, one hint under phone and email, a privacy line. */
#deskContactForm .f-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.f-hint {
  margin: -8px 0 16px;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* A field to fix: the error red of its message, 2px, so it never looks like the field being typed in. */
#deskContactForm .f-input[aria-invalid="true"],
#deskContactForm .f-textarea[aria-invalid="true"] {
  border: 2px solid #a5342a;
  box-shadow: none;
}

/* Photo Upload Component */
.acb-file-upload {
  position: relative;
  margin-top: 4px;
}

.f-file-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.f-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23121316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px !important;
  cursor: pointer;
}

.f-file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.95rem 1.25rem;
  background: rgba(255, 255, 255, 0.78);
  border: 1.5px dashed rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-base, 1rem);
  font-weight: 600;
  color: var(--ink, #1c150c);
  transition: var(--transition-smooth);
  text-align: center;
}

.f-file-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--gold, #d3a146);
  box-shadow: 0 2px 8px rgba(120, 85, 50, 0.12);
}

.f-file-btn.is-dragover {
  background: #fff8eb;
  border-color: var(--gold, #d3a146);
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(211, 161, 70, 0.25);
}

.f-file-input:focus + .f-file-btn,
.f-file-input:focus-visible + .f-file-btn {
  outline: none;
  border-color: var(--gold, #d3a146);
  box-shadow: 0 0 0 3px rgba(211, 161, 70, 0.25);
}

.f-file-btn svg {
  width: 20px;
  height: 20px;
  stroke: var(--gold, #d3a146);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.f-file-btn:hover svg {
  transform: translateY(-2px);
}

.f-file-hint {
  margin-top: 6px;
  font-size: var(--fs-xs, 0.8125rem);
  color: var(--ink-muted, #5f5243);
  line-height: 1.4;
}

.f-file-preview-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.f-file-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #fdfaf5;
  border: 1px solid var(--gold-subtle, #d8be93);
  border-radius: 3px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink, #1c150c);
  max-width: 100%;
  word-break: break-all;
}

.f-file-tag-thumb {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(141, 119, 95, 0.25);
  background: #ede8df;
}

.f-file-tag.is-rejected {
  border-color: #a5342a;
  background: #fff5f5;
  color: #a5342a;
  text-decoration: line-through;
}

.f-file-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 2px;
  width: 18px;
  height: 18px;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--ink-muted);
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease;
}

.f-file-tag-remove:hover {
  background: rgba(165, 52, 42, 0.1);
  color: #a5342a;
}

/* The result line is scrolled to clear the phone bar, and is focused without a ring (it is text). */
#formAlertMsg {
  scroll-margin-bottom: calc(var(--pab-h) + 16px);
  scroll-margin-top: 16px;
}

#formAlertMsg:focus {
  outline: none;
}

/* Sent: the fields step aside for the confirmation and "Send another message". */
#deskContactForm.is-sent > :not(.form-title, #formAlertMsg, .form-another) {
  display: none;
}

.form-another[hidden] {
  display: none;
}

.form-another {
  margin-top: var(--sp-4);
}

.f-privacy {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.f-privacy a {
  color: var(--accent);
}

.contact-private {
  margin: 16px 0 0;
  font-size: var(--fs-base);
  color: var(--ink-muted);
}

.contact-private a {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.trust-standard-card.is-warning .trust-icon-box {
  background: rgba(201, 154, 46, 0.12);
  border-color: rgba(201, 154, 46, 0.35);
  color: var(--accent);
}

.trust-standard-card.is-warning h3 {
  color: var(--accent);
}

.trust-card-link {
  display: inline-flex;
  align-items: center;
  /* An inline-flex box sizes to its content's max-content width, so a long label ran straight
     out past the card's right edge ("Read our Never Clean Coins advisory"). Capping the width
     lets the text shrink and wrap inside the card; min-height keeps the 44px tap target. */
  max-width: 100%;
  flex-wrap: wrap;
  min-height: 44px;
  margin-top: 8px;
}

.trust-standard-card.is-warning .trust-card-link {
  color: var(--accent);
}

/* ==========================================================================
   SELL TO US PAGE (UX review 2026-10-16)
   ========================================================================== */
.error-policy-tray-notice {
  margin-top: 40px;
}

a.svc-row--link {
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}

a.svc-row--link:hover,
a.svc-row--link:focus-visible {
  background: rgba(201, 154, 46, 0.08);
}

a.svc-row--link .svc-name {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

a.svc-row--link:hover .svc-name,
a.svc-row--link:focus-visible .svc-name {
  text-decoration: none;
}

.svc-buy-line {
  margin: 32px 0 0;
  font-size: var(--fs-base);
  color: var(--ink-muted);
}

.svc-buy-line a {
  color: var(--accent);
  font-weight: 600;
}

.about-story-title {
  font-size: var(--fs-2xl);
  margin-bottom: 16px;
}

/* ==========================================================================
   GUIDES HUB (UX review 2026-10-16): articles newest first, then the selling guides.
   ========================================================================== */
.guides-hub {
  max-width: 1180px;
  margin: 0 auto;
}

.guides-heading {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--ink);
  margin: 0 0 24px;
}

.guides-heading:not(:first-child) {
  margin-top: 64px;
}

.blog-card-photo {
  display: block;
}

.blog-card-title a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-card-title a:hover,
.blog-card-title a:focus-visible {
  color: var(--accent);
  text-decoration: none;
}

.blog-card-date {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.blog-read-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.guides-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 0 32px;
  border-top: 1px solid var(--line);
}

.guides-list li {
  border-bottom: 1px solid var(--line);
}

.guides-list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 0;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

.guides-list-tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--font-body);
}

.guides-list-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guides-list a:hover .guides-list-title,
.guides-list a:focus-visible .guides-list-title {
  color: var(--accent);
  text-decoration: none;
}.sidebar-box--visit .sidebar-directions {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}

.sidebar-box--visit .sidebar-directions {
  margin-top: 12px;
  display: flex;
  align-items: center;
}

.sidebar-links-list a {
  display: inline-block;
  padding: 8px 0;
}

/* Phones and portrait tablets: the phone bar carries Call, Directions and Message. */
@media (max-width: 900px) {
  .sidebar-box--visit {
    display: none;
  }
}

/* Article and table text: a long address in a link may break rather than widen the page. */
.svc-article a {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   PHASE 1 FIXES (UX review 2026-10-16): focus, motion, contrast, sizes
   ========================================================================== */

/* Visible keyboard focus everywhere (the form fields' own border change stays too). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.f-input:focus-visible,
.f-textarea:focus-visible,
.f-select:focus-visible,
.c-number-input:focus-visible,
.c-select:focus-visible,
.store-search-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* On the dark surfaces the ring is the gold (bronze measures under 3:1 there) */
:where(.top-ticker-strip, .hero-main-typography-box, .svc-cta-band, .sidebar-box--dark, .desk-shadow, .phone-action-bar, .dark-experience-section, .concierge-action-block, .dark-obsidian-grid) :focus-visible {
  outline-color: var(--accent-on-dark, #e6c15a) !important;
}

/* No endless pulsing or smooth scrolling for visitors who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Contrast: small labels to WCAG AA (ratios measured by the visual review). */

.dt-label,
.strata-section--sand .strata-kicker {
  color: var(--accent);
}

.footer-copyright-bar {
  color: #555A62;
  font-size: var(--fs-xs);
}

.total-basis {
  color: var(--accent-on-dark) !important;
}

/* Arrow links that were 21px tall. */
.buy-tray-link,
.curated-buy-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Article tables: a shadow at the edge that still has columns to scroll to. */
.data-table-wrapper,
.table-responsive-wrapper {
  background:
    linear-gradient(90deg, var(--paper) 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--paper) 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.14), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.14), transparent) right center / 12px 100% no-repeat scroll;
  background-color: var(--paper);
}

/* ==========================================================================
   CALCULATOR (UX reviews 2026-10-16 and 10-17)
   Where the readout is not beside the form (1200px and under), the total sits right under the
   amount field, in the page: it is beside what is typed, never covers a control and never hides
   behind a phone's keyboard (a sticky bar did all three).
   ========================================================================== */
.calc-inline-total {
  display: none;
}

@media (max-width: 1200px) {
  .calc-inline-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: var(--sp-3) 0 0;
    padding: 12px 16px;
    background: var(--charcoal);
    color: var(--on-charcoal);
    border-radius: 8px;
  }

  .calc-inline-total span {
    font-size: var(--fs-sm);
    font-weight: 600;
  }

  .calc-inline-total strong {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-lg);
    color: var(--accent-on-dark);
    overflow-wrap: anywhere;
  }

  .calc-inline-total small {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--on-charcoal-muted);
  }
}

/* The amount's hint ("Enter an amount above 0."), the error red of the contact form */
.calc-hint {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #8a2b22;
}

.calc-hint:empty {
  display: none;
}

#calcAmountLabel,
.readout-title {
  margin: 0;
  line-height: 1.4;
}

/* Hidden parts of the form (units and presets for coins counted, not weighed) */
.desk-lit [hidden] {
  display: none !important;
}

/* Counted: no unit badge beside the field, so the field closes its own right edge. */
.weight-field:has(> .unit-symbol-badge[hidden]) .c-number-input {
  border-right: 1px solid var(--rule-strong);
  border-radius: 4px;
}

/* The badge follows the price's state (html[data-spot-state], set by spot.js): a pulsing dot only
   while the price is current; "last known price" and "prices unavailable" without it. */
.live-flag-text {
  display: none;
}

html:not([data-spot-state="stale"], [data-spot-state="none"]) .live-flag-text--live,
html[data-spot-state="stale"] .live-flag-text--stale,
html[data-spot-state="none"] .live-flag-text--none {
  display: inline;
}

html[data-spot-state="stale"] .live-flag::before {
  animation: none;
  background: var(--on-charcoal-muted);
}

html[data-spot-state="none"] .live-flag::before {
  display: none;
}

html[data-spot-state="none"] .live-flag {
  color: var(--on-charcoal-muted);
}

.calc-noprice {
  display: none;
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--on-charcoal);
}

html[data-spot-state="none"] .calc-noprice {
  display: block;
}

/* A big total (or a typo with extra zeros) wraps and shrinks rather than widening a phone's page. */
.total-figure {
  flex-wrap: wrap;
  min-width: 0;
}

.total-figure .animated-total {
  font-size: clamp(1.75rem, 9vw, var(--fs-3xl));
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Metal buttons two by two on phones and portrait tablets, presets and units big enough to tap. */
@media (max-width: 768px) {
  .market-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .market-strip .metal-btn {
    min-width: 0;
    padding: 12px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .market-strip .btn-metal-name {
    font-size: var(--fs-sm);
  }

  .market-strip .btn-metal-spot {
    font-size: var(--fs-base);
  }
}

.u-btn,
.preset-tag-btn {
  min-height: 44px;
}

.assurance-note {
  margin-top: 16px;
}

/* The page's own pieces, formerly inline styles (phase 3) */
.calc-page {
  padding-top: var(--sp-6);
}

.calc-asof {
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  text-align: right;
}

.tab-group--units {
  margin-top: var(--sp-3);
}

.calc-divider {
  margin: var(--sp-8) 0 var(--sp-6);
}

.calc-sub-title {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-3);
}

.calculator-educational-section .strata-lede {
  margin-bottom: var(--sp-5);
}

.calculator-faq-wrap {
  margin-top: var(--sp-7);
}

/* Purity reference: a table on wide screens; on phones each row stacks (name and purity on
   one line, karat and uses under it) so nothing scrolls sideways. */
.purity-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--sp-6);
}

.purity-standards-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--rule);
}

.purity-standards-table thead tr {
  background: var(--cream);
  border-bottom: 2px solid #121316;
}

.purity-standards-table th {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: var(--track-btn);
}

.purity-standards-table tbody {
  font-size: var(--fs-sm);
  color: var(--ink-body);
}

.purity-standards-table tbody tr + tr {
  border-top: 1px solid var(--rule);
}

.purity-standards-table tbody tr:nth-child(even) {
  background: var(--paper);
}

.purity-standards-table td {
  padding: var(--sp-3) var(--sp-4);
}

.pt-name {
  font-weight: 600;
  color: var(--ink);
}

.pt-purity {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .purity-standards-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .purity-standards-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }

  .purity-standards-table td {
    padding: 0;
  }

  .pt-purity {
    grid-row: 1;
    grid-column: 2;
  }

  .pt-karat,
  .pt-uses {
    grid-column: 1 / -1;
    color: var(--ink-muted);
  }
}

/* 404 page */
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--sp-6);
}

.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.error-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.error-links a:hover {
  color: var(--accent-hover);
  text-decoration: none;
}

/* Contact form: the message under the field it concerns */
.f-error {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #8a2b22;
}

.f-error[hidden] {
  display: none;
}

/* "Text us" (when Site Settings says the shop takes texts): a quiet line under the call actions */
.text-us-line {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.text-us-line a {
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.text-us-line a:hover {
  text-decoration: none;
}

.text-us-line--dark {
  text-align: center;
}

.text-us-line--dark a {
  color: var(--accent-on-dark);
}

/* ==========================================================================
   SHOP (owner, 2026-10-16: structured like aucm.com/most-recent)
   White tiles in a hairline grid: status tag, the photo on white, the slab-style title, the
   price, and a bar of the two ways to hold a piece. 4 across, 3 under 1100px, 2 under 700px.
   The item page: photos on white beside the title, price and holds; then description,
   specifications, and more pieces as the same tiles. src/templates/store-tile.php.
   ========================================================================== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  border: none;
  margin-top: 24px;
}

.shop-grid > .store-message {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 36px 24px;
  text-align: center;
  background: var(--paper);
}

.shop-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--paper);
  border: 1px solid rgba(226, 218, 206, 0.9);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(44, 24, 16, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.shop-tile:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  border-color: #121316;
}

.shop-tile[hidden] {
  display: none !important;
}

/* The focused tile draws over its neighbours, so its focus ring shows on all four sides. */
.shop-tile:focus-within {
  z-index: 2;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(201, 154, 46, 0.35), 0 10px 24px rgba(44, 24, 16, 0.10);
}

.shop-tile-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 16px 16px 14px;
  text-align: left;
  color: var(--ink);
  text-decoration: none;
}

.shop-tile-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--tint);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shop-tile-tag--new {
  background: #c99a2e;
  color: #111113;
  box-shadow: 0 2px 6px rgba(201, 154, 46, 0.3);
}

.shop-tile-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: #fdfcf9;
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
}

/* The photo fills its square whatever size the file is */
.shop-tile-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
  padding: 8px;
}

.shop-tile:hover .shop-tile-photo img {
  /* static: locked */
}

/* Fallback numismatic insignia watermark */
.shop-photo-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  background: radial-gradient(circle, #fbf9f4 0%, #ede8de 100%);
  color: #555A62;
  text-align: center;
}

.shop-photo-none-crest {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 8px;
  opacity: 0.85;
}

.shop-photo-none-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 2px;
}

.shop-photo-none-sub {
  font-size: 11px;
  color: var(--ink-muted);
}

/* Badges: PCGS, NGC, Grades */
.shop-tile-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.shop-cert-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  line-height: 1.3;
}

/* PCGS authentic sapphire blue */
.shop-cert-badge--pcgs,
.shop-cert-badge--pcgsbanknote {
  background: linear-gradient(135deg, #093568 0%, #155294 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 3px rgba(9, 53, 104, 0.3);
}

/* NGC bold slate black with bevel */
.shop-cert-badge--ngc {
  background: linear-gradient(135deg, #1b2430 0%, #2c3848 100%);
  color: #f8fafc;
  border: 1px solid #475569;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ANACS gold/amber */
.shop-cert-badge--anacs {
  background: #78350f;
  color: #fef3c7;
}

/* CAC verified green bean */
.shop-cert-badge--cac {
  background: #007a3d;
  color: #ffffff;
  border-radius: 4px;
  padding: 2px 8px;
}

/* XRF laboratory tested badge */
.shop-cert-badge--xrfverified {
  background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
  color: #ecfdf5;
  border: 1px solid rgba(110, 231, 183, 0.3);
}

/* Generic cert */
.shop-cert-badge--cert {
  background: var(--tint);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* Grade pill */
.shop-grade-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: #F0EDE5;
  color: #121316;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.shop-tile-title {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shop-tile-link:hover .shop-tile-title {
  color: #121316;
  text-decoration: none;
}

.shop-tile-price {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: #121316;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.shop-tile-link:hover .shop-tile-price {
  text-decoration: none;
}

.shop-tile-actions {
  margin-top: auto;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 10px 14px;
  background: #faf8f5;
}

.btn-shop-hold,
.btn-shop-view {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 38px;
  padding: 6px 12px;
  background: #ffffff;
  color: #121316;
  border: 1px solid #121316;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: all 0.22s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.btn-shop-hold:hover,
.btn-shop-view:hover {
  background: #121316;
  color: #ffffff;
  border-color: #121316;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-shop-hold-icon,
.btn-shop-view-icon {
  color: var(--accent);
  transition: color 0.2s ease;
}

.btn-shop-hold:hover .btn-shop-hold-icon {
  color: #F0D068;
}

.btn-shop-view:hover .btn-shop-view-icon {
  color: #F0D068;
}

@media (max-width: 1099px) {
  .shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 699px) {
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .shop-tile-link {
    padding: 12px 10px 10px;
    gap: 6px;
  }

  .shop-tile-title {
    font-size: 12.5px;
  }

  .shop-tile-price {
    font-size: 15px;
  }

  .shop-tile-actions {
    padding: 8px 10px;
  }

  .btn-shop-hold,
  .btn-shop-view {
    min-height: 34px;
    font-size: 11px;
    padding: 4px 8px;
  }
}

@media (max-width: 440px) {
  .shop-grid {
    grid-template-columns: 1fr;
  }
}

/* Item page. No banner here, so the body clears the hanging plaque the way .subpage-header does
   (96px; 24px on phones, where the plaque overhangs the bar by about 22px). */
.store-page-body.store-item-body {
  padding-top: 96px;
}

@media (max-width: 768px) {
  .store-page-body.store-item-body {
    padding-top: var(--sp-5);
  }
}

.store-item-body .breadcrumbs-nav {
  margin-bottom: var(--sp-5);
}

.item-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}

.item-photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Fills the box whatever the file's size (a smaller source drew at about two-thirds of it). */
.item-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.item-photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: var(--fs-lg);
  cursor: pointer;
}

.item-photo-nav:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.item-photo-prev {
  left: var(--sp-2);
}

.item-photo-next {
  right: var(--sp-2);
}

.item-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.item-thumb {
  width: 64px;
  height: 64px;
  padding: 2px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}

.item-thumb.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* contain: a portrait slab's label is not cut off */
.item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.item-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0 0 var(--sp-2);
}

.item-category {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.item-category a {
  color: var(--accent);
  font-weight: 600;
}

.item-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-4);
}

.item-price-val {
  font-size: var(--fs-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.item-price-note {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.item-actions .btn {
  flex: 1 1 160px;
}

.item-terms {
  margin: var(--sp-4) 0 16px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-muted);
}

.item-ref {
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.item-cert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--tint);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}

.item-section {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.item-section h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--sp-3);
}

.item-section p {
  line-height: var(--lh-body);
}

.item-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-5);
}

.item-specs dt {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.item-specs dd {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.item-related {
  margin-top: var(--sp-8);
}

.item-related h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--sp-5);
}

/* On a tall wide window the photos stay in view while the details scroll. */
@media (min-width: 901px) and (min-height: 760px) {
  .item-gallery {
    position: sticky;
    top: var(--sp-5);
  }
}

/* Two columns down to 700px: in one column an iPad's first screen held only the photo. */
@media (max-width: 900px) {
  .item-layout {
    gap: var(--sp-5);
  }
}

@media (max-width: 699px) {
  .item-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

@media (max-width: 480px) {
  .item-specs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   ROUND 2 (docs/ux-review-2026-10-16-round2/README.md)
   ========================================================================== */
/* Icons drawn without the .ico class drew as solid black shapes */
.error-policy-icon,
.trust-icon-box svg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 600px) {
  .store-item-page {
    padding: var(--sp-4);
  }
}

@media (max-width: 900px) {
  /* Textures off on phones and tablets: 362KB (a third of the home page) for about 5% visible effect */
  body,
  .strata-section--paper,
  .strata-section--sand,
  .subpage-header,
  .svc-body,
  .store-page-body {
    background: var(--cream);
  }

  /* The phone bar steps aside while a field is in use (the calculator's total and the bar covered it) */
  body:has(input:focus, select:focus, textarea:focus) .phone-action-bar {
    display: none;
  }

  /* The closing band's Call / Directions / Message sat right above the identical phone bar */
  .svc-cta-band .svc-cta-row {
    display: none;
  }
}

html {
  scroll-padding-bottom: calc(var(--pab-h) + 24px);
}

/* The open phone menu dims the page behind it (a tap there closes it, script.js) */
.mobile-dropdown-menu.open {
  position: relative;
  z-index: 200;
  box-shadow: 0 0 0 100vmax rgba(17, 17, 17, 0.45);
  clip-path: inset(0 -100vmax -100vmax -100vmax);
}

/* The certification line, right under the item's title */
.item-cert--top {
  margin: var(--sp-2) 0 var(--sp-3);
}

/* Home: the four newest shop tiles (4 across; 2 on phones) */
.shop-grid--home {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 699px) {
  .shop-grid--home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-case .home-cta-row {
  margin-top: var(--sp-6);
}

/* Home, round 3: the Call / Get directions rows under the selling steps and in Visit are for
   screens without the phone bar (it carries the same buttons under 900px). */
@media (max-width: 900px) {
  .home-cta-row--desktop {
    display: none;
  }
}

#showroomQuickPreview .visit-status {
  display: flex;
  width: fit-content;
  margin: 0 auto var(--sp-5);
}

.home-text-us {
  margin-top: var(--sp-3);
  text-align: center;
}

.home-text-us a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

.home-text-us a:hover,
.home-text-us a:focus-visible {
  text-decoration: none;
}

/* "Skip to content": the first stop for keyboard users, shown only when focused. */
.skip-link {
  position: absolute;
  top: -120px;
  left: 16px;
  z-index: 99999 !important;
  padding: 12px 20px;
  background: #121316 !important;
  color: #ffffff !important;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none !important;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: top 0.15s ease-out;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 16px;
  transform: none !important;
  color: #ffffff !important;
  background: #121316 !important;
  outline: 3px solid #E5B338 !important;
  outline-offset: 3px !important;
  text-decoration: none !important;
}

#mainContent:focus {
  outline: none;
}

/* Article meta: "Category · date · read time · byline", the dots drawn here (not read out), each
   kept with the item after it so none dangles at a line end. On phones the byline goes (the author
   box at the end names the writer) and the line fits once. */
.article-meta-bar > * + *::before {
  content: "·";
  content: "·" / "";
  margin: 0 8px;
  color: var(--ink-muted);
}

@media (max-width: 600px) {
  .article-meta-bar .article-byline {
    display: none;
  }

  /* The badge may sit on a line of its own: then the date starts the next line, without a dot. */
  .article-meta-bar > .article-cat-badge {
    margin-right: 12px;
  }

  .article-meta-bar > time::before {
    content: none;
  }
}

/* The shop's "nothing matches" box: ask the shop to find it, or show everything again. */
.store-message-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: var(--sp-4);
}

.store-message-actions:empty {
  display: none;
}

/* Item photo: a link to the full-size file, and a magnifier that opens the viewer. */
.item-photo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.item-photo-zoom {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  cursor: pointer;
}

.item-photo-zoom svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.item-photo-zoom:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* The full-size viewer: the photo as large as the screen allows, on near-black. */
.photo-viewer {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 10, 10, 0.96);
  color: #fff;
}

.photo-viewer[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-viewer::backdrop {
  background: rgba(10, 10, 10, 0.96);
}

.photo-viewer img {
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 120px);
  object-fit: contain;
  background: #fff;
}

.photo-viewer-count {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--on-charcoal-muted);
}

.photo-viewer-close,
.photo-viewer-prev,
.photo-viewer-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}

.photo-viewer-close {
  top: 8px;
  right: 8px;
}

.photo-viewer-prev {
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.photo-viewer-next {
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.photo-viewer :focus-visible {
  outline-color: var(--accent-on-dark);
}

/* Phones: the photo uses the card's full width (it was 277px inside two frames). */
@media (max-width: 600px) {
  .item-photo {
    padding: 0;
    border: 0;
  }
}

.store-item-gone {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* A numbered list in an article body: inside the text column, the body's size, spaced like the
   bullets (it fell back to browser defaults: numbers in the gutter, 16px, no spacing). */
.svc-article ol:not(.svc-steps) {
  padding-left: 1.6em;
}

.svc-article ol:not(.svc-steps) > li {
  font-size: var(--fs-md);
  line-height: 1.6;
  margin-top: 12px;
  padding-left: 4px;
}

.svc-article ol:not(.svc-steps) > li::marker {
  color: var(--accent);
  font-weight: 600;
}

/* Faux-italic Cinzel: WordPress-era FAQ questions wrapped in <strong><em> inside the heading. */
.svc-article :is(h2, h3, h4) :is(strong, b, em, i) {
  font: inherit;
}

/* Phones: each table row a small card (the first cell its title, then "heading: value" lines),
   instead of a table 2-4 screens tall whose value column was cut off at the right edge. */
@media (max-width: 600px) {
  .data-table-wrapper {
    overflow: visible;
    background: #fff;
  }

  .hallmark-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .hallmark-table,
  .hallmark-table tbody,
  .hallmark-table tr,
  .hallmark-table td {
    display: block;
    width: 100%;
  }

  .hallmark-table tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
  }

  .hallmark-table tr:last-child {
    border-bottom: 0;
  }

  .hallmark-table td,
  .hallmark-table tr:nth-child(even) td {
    display: block;
    padding: 4px 16px;
    border: 0;
    background: none;
  }

  /* The column's heading as a small label over each value (beside it, the value had 160px). */
  .hallmark-table td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-muted);
  }

  .hallmark-table td:first-child {
    display: block;
    font-weight: 600;
    color: var(--ink);
  }

  .hallmark-table td:first-child::before {
    content: none;
  }
}

/* "Keep reading" at the end of an article (the sidebar's links, in the column). */
.keep-reading {
  grid-column: 1;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--rule);
}

.keep-reading h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--ink);
}

.keep-reading ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.keep-reading a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.keep-reading a:hover {
  color: var(--accent-hover);
  text-decoration: none;
}

/* Phones: the row replaces the sidebar's copy of the same links. */
@media (max-width: 900px) {
  .svc-layout:has(.keep-reading) .sidebar-box--links {
    display: none;
  }
}

/* Two columns: the article, then "Keep reading" under it in the first column; the sidebar beside both. */
@media (min-width: 901px) {
  .svc-layout:has(> .keep-reading) > .svc-article {
    grid-column: 1;
    grid-row: 1;
  }

  .svc-layout:has(> .keep-reading) > .keep-reading {
    grid-row: 2;
  }

  .svc-layout:has(> .keep-reading) > .svc-sidebar {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* Sell to Us: "What do you have?" chips under the title. */
.svc-chooser {
  padding: var(--sp-5) var(--gutter) 0;
}

.svc-chooser .strata-inner {
  padding: 0;
}

.svc-chooser-label {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.svc-chooser ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-chooser a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
}

.svc-chooser a:hover {
  border-color: var(--gold-edge);
  background: var(--gold);
}

/* Each "what we buy" tile is one link: the photo and title too, not only the line at the bottom. */
.buy-tray-card {
  position: relative;
}

.buy-tray-card .buy-tray-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.buy-tray-card:hover .buy-tray-title {
  color: var(--accent);
}

/* ==========================================================================
   ROUND 3 (docs/ux-review-2026-10-17-pages/README.md): grids and phone length
   ========================================================================== */
/* Home grids with explicit columns: auto-fit left a card alone on a row at tablet widths (3+1, 2+1). */
.spot-rates-quad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1099px) {
  .spot-rates-quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .spot-rates-quad {
    gap: 12px;
  }

  .spot-rates-quad .spot-rate-card {
    padding: 16px;
  }

  .spot-rates-quad .spot-rate-num {
    font-size: var(--fs-lg);
  }
}

.home-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 899px) {
  .home-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Titles and introductions without a lone last word. */
.strata-title,
.subpage-title {
  text-wrap: balance;
}

.strata-lede,
.subpage-standfirst {
  text-wrap: pretty;
}

/* Phones: each What We Buy card is already one link; its "How we ..." row (44px each) goes, kept for
   screen readers, and the title carries the arrow. */
@media (max-width: 600px) {
  .curated-buy-card .curated-buy-link {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .curated-buy-card h3::after {
    content: " \2192";
    content: " \2192" / "";
    color: var(--accent);
  }
}

/* Phones: long reviews show about six lines with "Read more" (script.js). */
@media (max-width: 600px) {
  .review-card blockquote.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
  }
}

.review-more {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}

/* Phones: the star coin stays beside the title, smaller, instead of on its own row (about 50px per
   heading); the owner's choice is the coin beside section titles. */
@media (max-width: 768px) {
  .strata-head {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0 var(--sp-3);
  }

  .strata-head--plain {
    grid-template-columns: minmax(0, 1fr);
  }

  .strata-head .section-mark,
  .subpage-mark .section-mark {
    width: 28px;
    height: 28px;
  }

  .subpage-titleblock {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0 var(--sp-3);
  }

  .subpage-mark {
    flex-direction: column;
    padding-top: 2px;
  }
}

/* Phones: the breadcrumb leaves out the current page (the title right under it says it). */
@media (max-width: 600px) {
  .breadcrumbs-nav li[aria-current="page"],
  .breadcrumbs-nav li.bc-sep:has(+ li[aria-current="page"]) {
    display: none;
  }
}

/* Visit Us: on phones the card's Call / Directions hide (the phone bar has them, twice on one screen
   before), so the address is on the first screen. */
@media (max-width: 900px) {
  .visit-card .visit-actions {
    display: none;
  }
}

.visit-card .visit-actions + .visit-note {
  margin-top: var(--sp-2);
}

.f-hint--above {
  margin: 0 0 8px;
}

/* Placeholders lighter than typed text, still 4.5:1 on white. */
.f-input::placeholder,
.f-textarea::placeholder {
  color: #6c727a;
}

/* About: the story's paragraphs ran together with no space between them. */
.about-body + .about-body {
  margin-top: var(--sp-3);
}

/* Guides: the whole card is the article's link (its hover promised it); the title's link covers it. */
.blog-card {
  position: relative;
}

.blog-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.blog-card:hover .blog-read-link {
  color: var(--accent-hover);
}

/* Phones: a compact row, a 112px square photo beside the tag, title and date (one card took a screen). */
@media (max-width: 600px) {
  .blog-hub-grid {
    gap: 12px;
  }

  .blog-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .blog-card-photo,
  .blog-card-img {
    width: 112px;
    height: 100%;
    min-height: 112px;
  }

  .blog-card-content {
    padding: 12px 16px;
  }

  .blog-card-title {
    font-size: var(--fs-base);
    margin-bottom: 4px;
  }

  .blog-card-excerpt,
  .blog-read-link {
    display: none;
  }

  .blog-card-footer {
    padding-top: 4px;
    border-top: 0;
  }

  .blog-card-meta {
    margin-bottom: 4px;
  }
}

/* "In this article": a long article's sections, folded until opened. */
.article-toc details {
  margin: 0 0 var(--sp-5);
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
}

.article-toc summary {
  min-height: 28px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.article-toc summary span {
  color: var(--ink-muted);
  font-weight: 400;
}

.article-toc ol {
  margin: var(--sp-3) 0 0;
  padding-left: 1.4em;
}

.article-toc li + li {
  margin-top: 6px;
}

.article-toc a {
  color: var(--accent);
}

.svc-article h2[id] {
  scroll-margin-top: 16px;
}

/* Status indicator pill on dark cards (such as article sidebar "Visit the Showroom") */
.sidebar-box--dark .visit-status,
.visit-status.visit-status--dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f3f2ee !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.sidebar-box--dark .visit-status .status-indicator-dot,
.visit-status.visit-status--dark .status-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d4af37 !important;
  flex-shrink: 0;
}

.sidebar-box--dark .visit-status.is-open,
.visit-status.visit-status--dark.is-open {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.sidebar-box--dark .visit-status.is-open .status-indicator-dot,
.visit-status.visit-status--dark.is-open .status-indicator-dot {
  background: #34d399 !important;
}

.sidebar-box--dark .visit-status span,
.visit-status.visit-status--dark span {
  color: inherit !important;
}

/* A lot: "20 pieces × $38.95 each" under its price. */
.item-price-unit {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}


/* ==========================================================================
   ARIZONA COIN & BULLION - PRESTIGE EXPANSION STYLES
   Affiliations Ribbon, Million Dollar Note Showcase, XRF Lab Experience,
   Personalized Guidance, FAQ Accordion, Service Guides & Area Dropdowns
   ========================================================================== */

/* 1. Affiliations & Memberships Ribbon */
.affiliations-ribbon {
  background: #141416;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 18px 24px;
  position: relative;
  z-index: 10;
}

.affiliations-ribbon-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
}

.affiliations-lead {
  display: flex;
  align-items: center;
  gap: 12px;
}

.affiliations-label {
  font-family: var(--font-serif, "Cinzel", "Playfair Display", Georgia, serif);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: 600;
  white-space: nowrap;
}

.affiliations-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 32px;
}

.affiliations-logo-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  background: rgba(248, 245, 238, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  height: 38px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.affiliations-logo-item:hover {
  background: #ffffff;
  border-color: #121316;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.affiliations-logo-item img {
  max-height: 24px;
  max-width: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.affiliations-proof {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: 6px;
  color: #fff;
  font-size: 0.82rem;
  white-space: nowrap;
}

.affiliations-proof .proof-stars {
  color: #ffc107;
  letter-spacing: 1px;
}

.affiliations-proof strong {
  color: #FFFFFF;
}

/* 2. Million Dollar Note Showcase */
.million-dollar-section {
  position: relative;
  background-color: #0f0f11;
  background-image: linear-gradient(135deg, rgba(12, 12, 14, 0.86) 0%, rgba(18, 18, 22, 0.74) 50%, rgba(12, 12, 14, 0.90) 100%), url('/images/million-dollar-note-bill.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 80px 24px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.million-dollar-section:hover {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.million-dollar-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.million-dollar-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  padding: 6px 18px;
  border-radius: 6px;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 20px;
}

.million-dollar-title {
  font-family: var(--font-serif, "Cinzel", "Playfair Display", Georgia, serif);
  font-size: clamp(1.4rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
  margin-bottom: 16px;
  text-wrap: balance;
  word-break: break-word;
}

.million-dollar-sub {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: #e8d7b5;
  font-style: italic;
  font-family: Georgia, serif;
  margin-bottom: 18px;
  max-width: 800px;
}

.million-dollar-desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
  max-width: 780px;
  margin-bottom: 30px;
}

.million-dollar-cta-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.million-dollar-cta-row .btn {
  flex: 1 1 200px;
  text-align: center;
}

/* 3. XRF Analyzer & Client First Philosophy */
.dark-experience-section {
  background: #121214;
  color: #fff;
  padding: 80px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dark-experience-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.dark-experience-header {
  text-align: center;
  margin-bottom: 54px;
}

.dark-eyebrow {
  font-family: var(--font-serif, "Cinzel", "Playfair Display", Georgia, serif);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #F0D068;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px;
}

.dark-title {
  font-family: var(--font-serif, "Cinzel", "Playfair Display", Georgia, serif);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.02em;
}

.xrf-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

@media (max-width: 960px) {
  .xrf-split-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.xrf-content h3 {
  font-family: var(--font-serif, "Cinzel", "Playfair Display", Georgia, serif);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  color: #ffffff;
  margin-bottom: 24px;
  line-height: 1.25;
}

.xrf-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.xrf-feature-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.xrf-icon-bullet {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  margin-top: 2px;
}

.xrf-feature-item strong {
  display: block;
  font-size: 1.05rem;
  color: #ffffff;
  margin-bottom: 4px;
}

.xrf-feature-item p {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
}

.xrf-photo-box {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.xrf-photo-box img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.xrf-photo-box:hover img {
  /* static: locked */
}

.xrf-photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(10, 10, 12, 0.92) 0%, rgba(10, 10, 12, 0.6) 70%, transparent 100%);
  padding: 24px 20px 16px;
  color: #fff;
}

.xrf-photo-caption strong {
  display: block;
  color: #F0D068;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.xrf-photo-caption p {
  margin: 0;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

/* 4. Personalized Guidance Section */
.guidance-section {
  padding: 80px 24px;
  background: #fbf9f5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.guidance-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

@media (max-width: 960px) {
  .guidance-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.guidance-photo-box {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.guidance-photo-box img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.guidance-content h2 {
  font-family: var(--font-serif, "Cinzel", "Playfair Display", Georgia, serif);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: #1a1a1a;
  margin-bottom: 18px;
  line-height: 1.2;
}

.guidance-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 24px;
}

.guidance-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.guidance-pill {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #121316;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 5. Comprehensive Interactive FAQ Section */
/* Ground is ivory, cards are white — the palette's rule (see the token block: "Grounds: --cream
   (ivory), cards --paper (white)"). This section had it inverted, a white ground with #fbf9f5
   cards, so the cards all but disappeared into it. */
.faq-showcase-section {
  padding: 80px 24px;
  background: var(--cream);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.faq-showcase-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.faq-header-center {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}

.faq-header-center h2 {
  font-family: var(--font-serif, "Cinzel", "Playfair Display", Georgia, serif);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  color: #1a1a1a;
  margin-bottom: 12px;
}

.faq-header-center p {
  font-size: 1.05rem;
  color: #666;
  line-height: 1.6;
}

.faq-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 860px) {
  .faq-grid-2col {
    grid-template-columns: 1fr;
  }
}

.faq-card-modern {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 28px;
  box-shadow: 0 1px 2px rgba(18, 19, 22, 0.04);
  transition: all 0.2s ease;
  position: relative;
}

.faq-card-modern:hover {
  border-color: #121316;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.faq-question-title {
  font-family: var(--font-serif, "Cinzel", "Playfair Display", Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 12px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.4;
}

.faq-q-mark {
  color: #D4AF37;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.faq-answer-body {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.65;
  margin: 0;
}

/* 6. Review Proof Stack Header */
.review-proof-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.review-avatars-row {
  display: flex;
  align-items: center;
}

.review-avatar-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -10px;
  object-fit: cover;
  background: #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.review-avatar-thumb:first-child {
  margin-left: 0;
}

.review-badge-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-badge-text .stars {
  color: #ffb800;
}

/* 7. Service Areas Accordion (Services Page) */
.service-areas-wrap {
  margin-top: 50px;
}

.service-area-item {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-bottom: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.service-area-item:hover {
  border-color: #121316;
}

.service-area-summary {
  padding: 18px 24px;
  font-family: var(--font-serif, "Cinzel", "Playfair Display", Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  user-select: none;
}

.service-area-summary::-webkit-details-marker {
  display: none;
}

.service-area-summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 300;
  color: #D4AF37;
  transition: transform 0.25s ease, color 0.25s ease;
  line-height: 1;
  display: inline-block;
}

.service-area-item[open] .service-area-summary::after {
  content: "+";
  transform: rotate(45deg);
  color: #D4AF37;
}

.service-area-content {
  padding: 0 24px 20px;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
}

/* 8. Callout Ribbon */
.prestige-callout-ribbon {
  background: #141416;
  color: #fff;
  padding: 36px 30px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 40px 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.callout-lead-box h4 {
  font-family: var(--font-serif, "Cinzel", "Playfair Display", Georgia, serif);
  font-size: 1.35rem;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.callout-lead-box p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  margin: 0;
}

.callout-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hero enhancements: welcome banner & signature */
.hero-welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: 700;
  margin-bottom: 14px;
}

.hero-founder-signature {
  font-family: Georgia, "Playfair Display", serif;
  font-style: italic;
  font-size: 0.92rem;
  color: #e8d7b5;
  margin-top: 14px;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  line-height: 1.5;
}

/* Service Educational Cards Grid (Enhanced with Authentic Photography) */
.svc-guides-quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

@media (max-width: 860px) {
  .svc-guides-quad {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.svc-guide-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.svc-guide-card:hover {
  border-color: #121316;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}

.svc-guide-photo-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #18191b;
}

.svc-guide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-guide-card:hover .svc-guide-img {
  /* static: locked */
}

.svc-guide-photo-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: rgba(18, 17, 16, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.svc-guide-content {
  padding: 24px 26px 12px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.svc-guide-card h3 {
  font-family: var(--font-display, "Cinzel", Georgia, serif);
  font-size: 1.25rem;
  color: #1a1a1a;
  margin: 0 0 10px 0;
  line-height: 1.35;
  font-weight: 600;
}

.svc-guide-card p {
  font-size: 0.95rem;
  color: #4a4a4a;
  line-height: 1.6;
  margin: 0 0 16px 0;
  flex-grow: 1;
}

.svc-guide-action {
  padding: 0 26px 24px;
  margin-top: auto;
}

.svc-guide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #141416;
  color: #ffffff !important;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid #121316;
  transition: all 0.25s ease;
}

.svc-guide-btn:hover {
  background: #121316;
  color: #ffffff !important;
  border-color: #121316;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Appraisal Services Desk Showcase Split */
.appraisal-split-container {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 36px;
  align-items: start;
  margin-bottom: 24px;
}

@media (max-width: 960px) {
  .appraisal-split-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.appraisal-showcase-photo-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
  background: #ffffff;
}

.appraisal-photo-wrap {
  position: relative;
}

.appraisal-photo-wrap img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

.appraisal-photo-caption {
  padding: 18px 22px;
  background: #fbf9f5;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.appraisal-photo-caption .caption-kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #121316;
  display: block;
  margin-bottom: 6px;
}

.appraisal-photo-caption p {
  margin: 0;
  font-size: 0.9rem;
  color: #4A4D54;
  line-height: 1.55;
}

/* Home Page: Honest Appraisals Experience Showcase */
.experience-split-showcase {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 24px 0 10px;
}

@media (max-width: 960px) {
  .experience-split-showcase {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.experience-photo-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #18191b;
}

.experience-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.experience-photo-wrap:hover .experience-img {
  /* static: locked */
}

.experience-content-wrap {
  display: flex;
  flex-direction: column;
}

.experience-quote-card {
  margin: 20px 0 0;
  padding: 18px 22px;
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid #121316;
  border-radius: 0 10px 10px 0;
}

.experience-quote-card p {
  margin: 0 0 6px 0;
  font-family: Georgia, "Playfair Display", serif;
  font-style: italic;
  font-size: 1.05rem;
  color: #121316;
  line-height: 1.55;
}

.experience-quote-card cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 0.85rem;
  color: #121316;
  letter-spacing: 0.05em;
}

/* Rebuilt Affiliations & Memberships (Original Proportions on White Background) */
.affiliations-legacy-section {
  background: #ffffff;
  padding: 48px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.affiliations-fullsize-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 36px 48px;
  max-width: 1080px;
  margin: 0 auto;
}

.affil-legacy-item {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, opacity 0.25s ease;
  padding: 8px 14px;
}

.affil-legacy-item:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

.affil-legacy-item img {
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
}


/* Service Areas Detail Marker Reset */
details.service-area-item > summary {
  list-style: none !important;
}
details.service-area-item > summary::-webkit-details-marker {
  display: none !important;
}

@media (max-width: 768px) {
  .affiliations-ribbon-inner {
    justify-content: center;
    text-align: center;
  }
  .affiliations-lead {
    justify-content: center;
    width: 100%;
  }
  .affiliations-proof {
    margin-top: 6px;
  }
}

/* --------------------------------------------------------------------------
   HERO SUBHEAD BOX & 4-COLUMN CURATED WHAT WE BUY
   -------------------------------------------------------------------------- */
.hero-subhead-box {
  margin: 12px 0 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  text-align: center;
  max-width: 100%;
  box-sizing: border-box;
}

.hero-subhead-title {
  font-family: var(--font-display);
  font-size: clamp(12.5px, 2.5vw, 15px);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 6px 0;
  letter-spacing: 0.02em;
}

.hero-subhead-text {
  font-family: var(--font-body);
  font-size: clamp(11.5px, 2vw, 13px);
  color: #d8d4cd;
  line-height: 1.45;
  margin: 0;
}

.curated-buy-grid--4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 24px;
}

@media (max-width: 1080px) {
  .curated-buy-grid--4col {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 620px) {
  .curated-buy-grid--4col {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.curated-buy-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.curated-buy-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
  border-color: #121316;
}

.curated-buy-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #111;
}

.curated-buy-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.curated-buy-card:hover .curated-buy-photo img {
  /* static: locked */
}

.curated-buy-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.curated-buy-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #FFFFFF;
  background: #121316;
  border: 1px solid #121316;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.curated-buy-content h3 {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px 0;
  line-height: 1.25;
}

.curated-buy-content p {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: #4a4a4a;
  line-height: 1.55;
  margin: 0 0 16px 0;
  flex-grow: 1;
}

.curated-buy-link {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: #121316;
  text-decoration: none !important;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  transition: color 0.2s ease, gap 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.curated-buy-card:hover .curated-buy-link,
.curated-buy-link:hover {
  color: #121316;
  text-decoration: none !important;
  gap: 8px;
}

/* ==========================================================================
   CONTACT PAGE — SHOWROOM MAP & DIRECTIONS CARD
   ========================================================================== */
.visit-map-box {
  margin-top: 24px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.map-frame-wrapper {
  position: relative;
  width: 100%;
  background: #1a1a1c url('/images/topographic_contour_map.jpg') center/cover no-repeat;
  min-height: 240px;
}

.map-frame-wrapper iframe {
  width: 100%;
  height: 240px;
  display: block;
}

.map-direct-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: #fdfcf9;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  flex-wrap: wrap;
}

.map-action-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.map-action-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}

.map-action-addr {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: #4A4D54;
}

.btn-directions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #1f2024 0%, #121316 100%);
  color: #ffffff !important;
  border: 1px solid #121316;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.22s ease;
  white-space: nowrap;
}

.btn-directions:hover {
  background: #121316;
  color: #ffffff !important;
  border-color: #121316;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   BALANCED REVIEW CARDS
   ========================================================================== */
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 860px) {
  .review-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.review-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 28px 24px 22px;
  box-shadow: 0 4px 16px rgba(44, 24, 16, 0.04);
  position: relative;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.review-card:hover {
  border-color: #121316;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.review-stars {
  color: #FBBC04;
  font-size: 15px;
  letter-spacing: 2px;
  display: inline-block;
  margin-bottom: 8px;
}

.review-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px 0;
  letter-spacing: 0.02em;
}

.review-card blockquote {
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: #4a4a4a;
  margin: 0 0 18px 0;
  font-style: normal;
}

.review-card figcaption {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.review-card cite {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: #121316;
  font-style: normal;
  display: inline-block;
}

.review-card cite::before {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   GLOBAL DESIGN SYSTEM POLISH — ALL SUBPAGES
   Consistent luxury Southwestern Numismatic aesthetics across all pages.
   ========================================================================== */

/* 1. Global Button & Interactive Elements — Unified Luxury Numismatic System */
/* Tier 1: Primary Sovereign Gold CTA Button */
.btn--primary,
button[type="submit"],
input[type="submit"],
.contact-form-submit,
.btn-call,
.desk-form .btn {
  background: linear-gradient(135deg, #E5B338 0%, #D49B20 100%) !important;
  color: #121316 !important;
  font-weight: 700 !important;
  border: 1px solid #D49B20 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(212, 155, 32, 0.28) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
}

.btn--primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.contact-form-submit:hover,
.btn-call:hover,
.desk-form .btn:hover {
  background: linear-gradient(135deg, #F0C44D 0%, #E0A628 100%) !important;
  color: #121316 !important;
  border-color: #E0A628 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 155, 32, 0.42) !important;
}

.btn--primary:hover *,
button[type="submit"]:hover *,
input[type="submit"]:hover *,
.contact-form-submit:hover *,
.btn-call:hover *,
.desk-form .btn:hover * {
  color: #121316 !important;
}

/* Tier 2: Precision Obsidian Button on Light Surfaces */
.header-call,
.btn--dark,
.btn-directions,
.btn-shop-view,
.sister-card .btn--dark {
  background: #121316 !important;
  border: 1px solid #121316 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
}

.header-call:hover,
.btn--dark:hover,
.btn-directions:hover,
.btn-shop-view:hover,
.sister-card .btn--dark:hover {
  background: #2C2F36 !important;
  color: #ffffff !important;
  border-color: #383C45 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
}

.header-call:hover *,
.btn--dark:hover *,
.btn-directions:hover *,
.btn-shop-view:hover *,
.sister-card .btn--dark:hover * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Tier 3: Frosted Glass / Dark Container Buttons */
.btn--outline-light,
.svc-guide-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  color: #ffffff !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
}

.btn--outline-light:hover,
.svc-guide-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32) !important;
}

.btn--outline-light:hover *,
.svc-guide-btn:hover * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Tier 4: Ghost / Tertiary Button on Light Surfaces */
.btn--ghost {
  background: transparent !important;
  border: 1px solid rgba(18, 19, 22, 0.25) !important;
  color: #121316 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
}

.btn--ghost:hover {
  background: rgba(18, 19, 22, 0.06) !important;
  border-color: #121316 !important;
  color: #121316 !important;
  transform: translateY(-2px);
}

/* Form input luxury focus rings (Accessible WCAG 2.4.7 compliant) */
.f-input:focus,
.f-select:focus,
.f-textarea:focus,
.c-number-input:focus,
.c-select:focus,
.store-search-input:focus,
.store-sort-select:focus {
  outline: 2px solid #121316 !important;
  outline-offset: 1px !important;
  border-color: #121316 !important;
  box-shadow: 0 0 0 3px rgba(18, 19, 22, 0.15) !important;
}

/* 2. Warm Obsidian Sections & Inset Depth */
.dark-experience-section {
  position: relative !important;
  background: linear-gradient(180deg, #18191b 0%, #101113 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 -20px 40px rgba(0, 0, 0, 0.4) !important;
  border-radius: 14px !important;
  margin: 40px auto !important;
  max-width: 1240px !important;
  padding: 60px 36px !important;
  color: #F8F5EE !important;
}

@media (max-width: 600px) {
  .dark-experience-section {
    padding: 36px 18px !important;
    border-radius: 0 !important;
    margin: 24px 0 !important;
  }
}

.xrf-photo-box img {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.prestige-callout-ribbon {
  background: linear-gradient(180deg, #18191b 0%, #101113 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 36px 32px !important;
  color: #f8f5ee !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
  margin-top: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
}

.prestige-callout-ribbon h4 {
  font-family: var(--font-display, Georgia, serif) !important;
  font-size: 1.45rem !important;
  color: #ffffff !important;
  margin: 0 0 8px 0 !important;
}

.prestige-callout-ribbon p {
  color: #d8d4cd !important;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* 3. Editorial Pullquotes & Signature Blocks (Georgia Italic) */
.about-lede {
  font-family: Georgia, "Playfair Display", "Times New Roman", serif !important;
  font-style: italic !important;
  font-size: 1.25rem !important;
  color: #121316 !important;
  line-height: 1.6 !important;
  padding: 22px 28px !important;
  background: rgba(0, 0, 0, 0.03) !important;
  border-left: 3px solid #121316 !important;
  border-radius: 0 12px 12px 0 !important;
  margin: 24px 0 28px !important;
  text-transform: none !important;
}

.about-aside-box .hero-founder-signature {
  font-family: Georgia, "Playfair Display", "Times New Roman", serif !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  color: #121316 !important;
  line-height: 1.55 !important;
  padding: 18px 24px !important;
  background: #faf7f2 !important;
  border-left: 3px solid #121316 !important;
  border-radius: 0 10px 10px 0 !important;
  margin-top: 28px !important;
  text-transform: none !important;
}

.dark-quote-card,
.dark-experience-section .hero-founder-signature {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  text-align: left !important;
  margin: 24px 0 28px 0 !important;
  padding: 18px 24px !important;
  border-left: 4px solid rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 0 8px 8px 0 !important;
  font-family: Georgia, "Playfair Display", serif !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  color: #E2DACB !important;
  line-height: 1.65 !important;
}

.about-aside-box {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  padding: 28px 24px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
}

/* 4. Services Page Featured Pillar Cards */
.svc-guide-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 18px rgba(44, 24, 16, 0.05) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.svc-guide-card:hover {
  border-color: #121316 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
}

.svc-guide-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 24px 26px 14px !important;
}

.svc-guide-content p {
  flex: 1 1 auto !important;
  margin-bottom: 20px !important;
  color: #4A4D54 !important;
  line-height: 1.6 !important;
}

.svc-guide-action {
  margin-top: auto !important;
  padding: 0 26px 24px !important;
}

.svc-guide-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: #18191b !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: 1px solid #121316 !important;
  transition: all 0.25s ease !important;
}

.svc-guide-btn:hover {
  background: #121316 !important;
  color: #ffffff !important;
  border-color: #121316 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

/* What We Buy trays */
.buy-tray-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 22px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.buy-tray-card:hover {
  border-color: #121316 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.buy-tray-desc {
  flex: 1 1 auto !important;
  margin-bottom: 14px !important;
  color: #4A4D54 !important;
  line-height: 1.55 !important;
}

.buy-tray-link {
  margin-top: auto !important;
  font-weight: 700 !important;
  color: #121316 !important;
  text-decoration: underline !important;
  text-decoration-color: #121316 !important;
  text-underline-offset: 3px !important;
}

.buy-tray-link:hover,
.buy-tray-card:hover .buy-tray-link {
  text-decoration: none !important;
}

/* Service Areas Accordion */
details.service-area-item {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

details.service-area-item:hover {
  border-color: #121316 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

summary.service-area-summary {
  padding: 16px 20px !important;
  font-family: var(--font-display, Georgia, serif) !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  cursor: pointer !important;
  background: #faf8f4 !important;
  border-bottom: 1px solid transparent !important;
  position: relative !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

details.service-area-item[open] summary.service-area-summary {
  background: #f6f2e8 !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
  color: #121316 !important;
}

.service-area-content {
  padding: 18px 22px 22px !important;
  color: #4A4D54 !important;
  line-height: 1.65 !important;
  font-size: 0.98rem !important;
  background: #ffffff !important;
}

/* 5. Contact Page What to Bring & Form */
.trust-standard-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  padding: 26px 22px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

.trust-standard-card:hover {
  border-color: #121316 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.trust-standard-card p {
  flex: 1 1 auto !important;
  margin-bottom: 14px !important;
  color: #4A4D54 !important;
  line-height: 1.55 !important;
}

.trust-card-link {
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-weight: 700 !important;
  color: #121316 !important;
  /* Was `white-space: nowrap !important`, which made a long label ("Read our Never Clean Coins
     advisory") run straight out of its card: nowrap leaves the text nowhere to break, so
     max-width could not contain it. Wrapping inside the card is the right behaviour. */
  white-space: normal !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  text-decoration: underline !important;
  text-decoration-color: #121316 !important;
  text-underline-offset: 3px !important;
}

.trust-card-link:hover,
.trust-standard-card:hover .trust-card-link {
  text-decoration: none !important;
}

/* 6. Spot Calculator HUD & Purity Table */
.metal-btn.active {
  background: #18191b !important;
  border-color: #121316 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.metal-btn.active .btn-metal-name {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.metal-btn.active .btn-metal-spot {
  color: #ffffff !important;
}

.desk-shadow {
  background: linear-gradient(180deg, #18191b 0%, #101113 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) !important;
  padding: 32px 28px !important;
  color: #f8f5ee !important;
}

.readout-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.r-label {
  color: #d8d4cd !important;
}

.r-val {
  color: #ffffff !important;
}

.animated-total {
  color: #F0D068 !important;
  text-shadow: 0 2px 10px rgba(240, 208, 104, 0.3) !important;
}

.assurance-note {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
}

.purity-standards-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.purity-standards-table thead th {
  background: #18191b !important;
  color: #FFFFFF !important;
  font-family: var(--font-display, Georgia, serif) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 14px 18px !important;
  text-align: left !important;
  border-bottom: 2px solid #121316 !important;
}

.purity-standards-table tbody td {
  padding: 13px 18px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  font-size: 0.92rem !important;
  color: #2D3136 !important;
}

.purity-standards-table tbody tr:nth-child(even) {
  background: #faf8f4 !important;
}

.purity-standards-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* 7. Shop Tiles & Product Showcase (Variation 1: Full-Bleed Top Fill) */
.shop-tile {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.shop-tile:hover {
  transform: translateY(-3px) !important;
  border-color: #121316 !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12), 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

.shop-tile--on-hold {
  border-color: rgba(245, 158, 11, 0.35) !important;
}

.shop-tile--on-hold:hover {
  transform: none !important;
  border-color: #D97706 !important;
  box-shadow: 0 12px 32px rgba(217, 119, 6, 0.28), 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

.shop-tile-link {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
}

.shop-tile-photo {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #111215 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

.shop-tile-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  padding: 0 !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.shop-tile:hover .shop-tile-photo img,
.shop-tile-link:hover .shop-tile-photo img {
  transform: scale(1.03) !important;
}

.shop-tile-hold-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: rgba(24, 25, 27, 0.88) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  color: #FBBF24 !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.shop-tile-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 16px 18px 18px !important;
}

.shop-tile-title {
  font-family: var(--font-display, Georgia, serif) !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #121316 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  margin: 0 0 12px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.shop-tile:hover .shop-tile-title,
.shop-tile-link:hover .shop-tile-title {
  color: #121316 !important;
  text-decoration: none !important;
}

.shop-tile-price-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.shop-tile-price {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
  margin: 0 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.shop-tile-cta {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #121316 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  transition: gap 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
}

.shop-tile:hover .shop-tile-cta,
.shop-tile-link:hover .shop-tile-cta {
  gap: 8px !important;
  color: #121316 !important;
}

.shop-tile:hover .shop-tile-price,
.shop-tile-link:hover .shop-tile-price {
  color: #111827 !important;
  text-decoration: none !important;
}

.shop-tile-status {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.shop-tile-status--available {
  display: none !important;
}

.shop-tile-status--on-hold {
  color: #B45309 !important;
}

/* Shop Item Page Status Badge & Visual Consistency */
.item-status {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  line-height: 1.3 !important;
}

.item-status--available {
  color: #047857 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.item-status--on-hold {
  color: #B45309 !important;
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

.store-item-page {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
}

.item-photo {
  position: relative !important;
  background: #111215 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.item-photo img {
  background: #ffffff !important;
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

.item-thumb {
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background: #111215 !important;
  overflow: hidden !important;
}

.item-thumb img {
  background: #111215 !important;
}

.item-thumb.active {
  border-color: #121316 !important;
  box-shadow: 0 0 0 2px rgba(18, 19, 22, 0.4) !important;
}

/* No box. #faf8f5 on a white card is about a 1% tint: it drew a rectangle without adding any
   emphasis and read as an unstyled container. The price is the largest number on the page, so the
   type carries it. Layout only. */
.item-price {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: var(--sp-5) 0 var(--sp-4) !important;
}

.item-price-val {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  letter-spacing: -0.02em !important;
}

.item-cert {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
}

.item-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

.item-actions .item-action-call {
  flex: 1 1 auto !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.btn--share-icon,
.btn--share {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  flex: 0 0 48px !important;
  padding: 0 !important;
  background: #ffffff !important;
  color: #121316 !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn--share-icon:hover,
.btn--share:hover {
  background: #f5f5f5 !important;
  border-color: #121316 !important;
  color: #121316 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.btn--share-icon.copied,
.btn--share.copied {
  background: #ecfdf5 !important;
  border-color: #10B981 !important;
  color: #047857 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
}

.btn--share-icon svg,
.btn--share svg {
  flex-shrink: 0 !important;
}

/* Store Item Page Top Nav & Return Link */
.store-item-top-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px 20px !important;
  margin-bottom: var(--sp-5) !important;
}

.store-item-top-nav .breadcrumbs-nav {
  margin-bottom: 0 !important;
}

.store-item-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-body, system-ui, sans-serif) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #121316 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.22s ease !important;
}

.store-item-back-link svg {
  color: #121316 !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.store-item-back-link:hover {
  background: #18191b !important;
  color: #ffffff !important;
  border-color: #121316 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
}

.store-item-back-link:hover svg {
  color: #ffffff !important;
  transform: translateX(-3px) !important;
}

/* Category-Specific Related Showcase */
.item-related {
  margin-top: 56px !important;
  padding-top: 40px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.item-related-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px 24px !important;
  margin-bottom: 24px !important;
}

.item-related-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.item-related-kicker {
  font-family: var(--font-body, system-ui, sans-serif) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #121316 !important;
}

.item-related-header h2 {
  font-family: var(--font-display, Georgia, serif) !important;
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  color: #121316 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}


/* Bottom Return & Category Action Bar */
.item-related-action-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-top: 36px !important;
  padding: 24px 28px !important;
  background: #faf8f5 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
}

.item-related-action-bar .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  font-size: 0.94rem !important;
}

.item-related-action-bar .btn svg {
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.item-related-action-bar .shop-return-link:hover svg {
  transform: translateX(-3px) !important;
}

.item-related-action-bar .btn--primary:hover svg {
  transform: translateX(3px) !important;
}

@media (max-width: 600px) {
  .item-related-action-bar {
    flex-direction: column !important;
    padding: 18px 16px !important;
  }

  .item-related-action-bar .btn {
    width: 100% !important;
  }

  .store-item-top-nav {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* Category Filter Buttons */
.store-filter-btn {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background: #ffffff !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  color: #121316 !important;
  transition: all 0.2s ease !important;
}

.store-filter-btn .count-badge {
  border-radius: 4px !important;
}

.store-filter-btn:hover {
  border-color: #121316 !important;
  color: #1a1a1a !important;
}

.store-filter-btn.active {
  background: #18191b !important;
  color: #ffffff !important;
  border-color: #121316 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.store-filter-btn.active .count-badge {
  background: #ffffff !important;
  color: #121316 !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
}

/* 8. Blog Hub & Educational Articles */
.blog-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.blog-card:hover {
  border-color: #121316 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.blog-card-photo {
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  background: #161514 !important;
  display: block !important;
}

.blog-card-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.blog-card:hover .blog-card-photo img {
  /* static: locked */
}

.blog-card-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 22px !important;
}

.blog-card-excerpt {
  flex: 1 1 auto !important;
  margin-bottom: 16px !important;
  color: #4A4D54 !important;
  line-height: 1.55 !important;
}

.blog-card-footer {
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.blog-read-link {
  font-weight: 700 !important;
  color: #121316 !important;
  text-decoration: underline !important;
  text-decoration-color: #121316 !important;
  text-underline-offset: 3px !important;
}

.counter-takeaway,
.svc-note {
  font-family: Georgia, "Playfair Display", serif !important;
  background: rgba(0, 0, 0, 0.03) !important;
  border-left: 3px solid #121316 !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 22px 26px !important;
  margin: 28px 0 !important;
}

.counter-takeaway p,
.svc-note p {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  line-height: 1.65 !important;
  color: #121316 !important;
}

/* 9. Unified Obsidian Badges & Pills Across All Pages */
.article-cat-badge,
.buy-tray-badge,
.std-badge,
.category-pill,
.article-tag,
.card-tag {
  display: inline-block !important;
  background: #121316 !important;
  color: #FFFFFF !important;
  border: 1px solid #121316 !important;
  border-radius: 4px !important;
  font-family: var(--font-body, system-ui, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  line-height: 1.3 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
}

/* Elimination of Mustard / Brownish-Yellow on Callouts, Notes & Icons */
.error-policy-tray-notice {
  border-left: 3px solid #121316 !important;
}
.error-policy-icon,
.error-policy-text h4,
.counter-takeaway-title,
.svc-note-title {
  color: #121316 !important;
}
.trust-standard-card .trust-icon-box {
  background: #121316 !important;
  border: 1px solid #121316 !important;
  color: #E5B338 !important;
}
.buy-tray-photo {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Blog Cards Clean Interactions (Obsidian Base, Sovereign Gold Hover Accent) */
.blog-card-title a {
  color: #121316 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.blog-card-title a:hover,
.blog-card:hover .blog-card-title a {
  color: #D49B20 !important;
  text-decoration: none !important;
}
.blog-read-link {
  text-decoration: none !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}
.blog-card:hover .blog-read-link {
  color: #D49B20 !important;
  text-decoration: none !important;
}

/* Mobile Badge & Pill Overflow Guard */
.svc-guide-photo-badge,
.shop-cert-badge,
.shop-grade-badge,
.shop-tile-tag {
  display: inline-block !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
}

/* 10. Sister Shop Showcase Card (About Us Page) */
.sister-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  padding: 34px 38px !important;
  box-shadow: 0 4px 18px rgba(35, 18, 9, 0.05) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.sister-card:hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12) !important;
  border-color: #121316 !important;
}

.sister-card-tag {
  display: inline-block !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #121316 !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

.sister-card h3 {
  font-family: 'Cinzel', serif !important;
  font-size: 1.55rem !important;
  color: #18191b !important;
  margin-bottom: 12px !important;
}

.sister-card p {
  color: #4A4D54 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

.sister-card-meta {
  margin: 20px 0 26px !important;
  font-size: 0.94rem !important;
  line-height: 1.7 !important;
  color: #121316 !important;
  padding-left: 16px !important;
  border-left: 3px solid #121316 !important;
  background: rgba(0, 0, 0, 0.04) !important;
  padding: 12px 16px !important;
  border-radius: 0 8px 8px 0 !important;
}

.sister-card .btn--dark {
  background: #18191b !important;
  color: #ffffff !important;
  border: 1px solid #121316 !important;
  padding: 12px 24px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.25s ease !important;
}

.sister-card .btn--dark:hover {
  background: #121316 !important;
  color: #ffffff !important;
  border-color: #121316 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

/* 11. Hallmark & Educational Comparison Tables */
.data-table-wrapper {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
  margin: 32px 0 !important;
  background: #ffffff !important;
}

.hallmark-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-body) !important;
}

.hallmark-table thead th {
  background: #18191b !important;
  color: #FFFFFF !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 16px 20px !important;
  text-align: left !important;
  border-bottom: 2px solid #121316 !important;
}

.hallmark-table tbody td {
  padding: 15px 20px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  font-size: 0.94rem !important;
  color: #2D3136 !important;
  line-height: 1.55 !important;
  vertical-align: middle !important;
}

.hallmark-table tbody tr:nth-child(even) td {
  background: #faf8f4 !important;
}

.hallmark-table tbody tr:hover td {
  background: rgba(0, 0, 0, 0.03) !important;
}

.hallmark-table strong {
  color: #1a1a1a !important;
}

.tag-solid {
  display: inline-block !important;
  padding: 3px 10px !important;
  background: #ecfdf5 !important;
  border: 1px solid #10b981 !important;
  color: #065f46 !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.tag-plate {
  display: inline-block !important;
  padding: 3px 10px !important;
  background: #fef2f2 !important;
  border: 1px solid #ef4444 !important;
  color: #991b1b !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* 12. Process Steps Cards (Educational Guides) */
.svc-steps {
  list-style: none !important;
  padding: 0 !important;
  margin: 32px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.svc-steps > li {
  display: grid !important;
  grid-template-columns: 60px 1fr !important;
  gap: 22px !important;
  align-items: start !important;
  padding: 24px 26px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

.svc-steps > li:hover {
  border-color: #121316 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}

.svc-steps > li::before {
  content: counter(svcstep, decimal-leading-zero) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #121316 !important;
  padding-top: 4px !important;
}

.svc-steps h3 {
  font-family: 'Cinzel', serif !important;
  font-size: 1.2rem !important;
  color: #18191b !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: 0.04em !important;
}

.svc-steps p {
  color: #4A4D54 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-size: 0.98rem !important;
}

/* 13. Author Counter Box & Keep Reading Links */
.author-counter-box {
  display: flex !important;
  gap: 22px !important;
  align-items: center !important;
  padding: 24px 28px !important;
  margin: 40px 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-left: 4px solid #121316 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
}

.author-counter-mark {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 50% !important;
  background: #18191b !important;
  border: 2px solid #121316 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.author-counter-text .author-counter-name {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: #18191b !important;
  margin: 0 0 6px 0 !important;
}

.author-counter-text p {
  margin: 0 !important;
  color: #4A4D54 !important;
  font-size: 0.94rem !important;
  line-height: 1.55 !important;
}

.keep-reading {
  margin-top: 40px !important;
  padding: 32px 0 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.keep-reading h2 {
  font-family: 'Cinzel', serif !important;
  font-size: 1.25rem !important;
  color: #18191b !important;
  margin-bottom: 18px !important;
}

.keep-reading ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 14px !important;
  padding: 0 !important;
  list-style: none !important;
}

.keep-reading a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  border-radius: 8px !important;
  color: #121316 !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
}

.keep-reading a:hover {
  border-color: #d4af37 !important;
  color: #101113 !important;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.12) !important;
  transform: translateY(-2px);
  text-decoration: none !important;
}

/* 14. Product Details Active Thumbnail */
.item-thumbs .item-thumb {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.item-thumbs .item-thumb.active,
.item-thumbs .item-thumb:focus-visible {
  border: 2px solid #121316 !important;
  box-shadow: 0 0 0 3px rgba(18, 19, 22, 0.25) !important;
}

/* 15. About Us Elevated Founder Commitment Plaque */
.founder-commitment-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 28px;
  background: linear-gradient(135deg, #FAF7F0 0%, #F5EEDB 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 4px solid #121316;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  margin: 32px 0 16px;
}
.founder-commitment-mark {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}
.founder-commitment-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
.founder-commitment-content {
  flex: 1 1 auto;
}
.founder-quote-text {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #121316;
  margin: 0 0 14px 0;
}
.founder-signature-byline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.founder-name {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: #121316;
  letter-spacing: 0.02em;
}
.founder-role {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  color: #121316;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (max-width: 600px) {
  .founder-commitment-card {
    flex-direction: column;
    padding: 20px;
    gap: 14px;
  }
}

/* --------------------------------------------------------------------------
   ABOUT US: THE SCOTTSDALE COUNTER STANDARDS
   -------------------------------------------------------------------------- */
.standards-trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.standard-feature-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 3px solid #121316;
  border-radius: 8px;
  padding: 28px 24px 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.standard-feature-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border-color: #121316;
}

.standard-card-kicker {
  margin-bottom: 12px;
}

.std-badge {
  display: inline-block;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #121316;
  background: #F0EDE5;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 3px 8px;
}

.standard-card-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.25rem;
  line-height: 1.35;
  color: #121316;
  margin: 0 0 12px 0;
  font-weight: 700;
}

.standard-card-text {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.94rem;
  line-height: 1.6;
  color: #4A4D54;
  margin: 0 0 20px 0;
  flex: 1 1 auto;
}

.standard-card-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #f0eae1;
  font-size: 0.84rem;
  font-weight: 600;
  color: #121316;
}

.showroom-concierge-strip {
  margin-top: 36px;
  padding: 24px 32px;
  background: #18191b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.concierge-text-block {
  flex: 1 1 auto;
}

.concierge-headline {
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
  color: #f7f1e5;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}

.concierge-sub {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.88rem;
  line-height: 1.5;
  color: #b8af9f;
  margin: 0;
}

.concierge-action-block {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.concierge-action-block .btn--ghost {
  border-color: rgba(255, 255, 255, 0.3);
  color: #f5efe6;
}

.concierge-action-block .btn--ghost:hover {
  border-color: #ffffff;
  color: #ffffff;
  background: transparent;
}

@media (max-width: 900px) {
  .standards-trio-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .showroom-concierge-strip {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
  }
  .concierge-action-block {
    width: 100%;
    flex-wrap: wrap;
    margin-top: 8px;
  }
}
/* ==========================================================================
   GLOBAL STATIC BEHAVIOR (Cards & Images Locked - Zero Jumping on Hover)
   ========================================================================== */
.shop-tile,
.shop-tile:hover,
.shop-tile-photo,
.shop-tile-photo img,
.shop-tile:hover .shop-tile-photo img,
.curated-buy-card,
.curated-buy-card:hover,
.curated-buy-photo,
.curated-buy-photo img,
.curated-buy-card:hover .curated-buy-photo img,
.buy-tray-card,
.buy-tray-card:hover,
.svc-guide-card,
.svc-guide-card:hover,
.svc-guide-photo-wrap img,
.svc-guide-img,
.svc-guide-card:hover .svc-guide-img,
.blog-card,
.blog-card:hover,
.blog-card-photo,
.blog-card-photo img,
.blog-card:hover .blog-card-photo img,
.review-card,
.review-card:hover,
.standard-feature-card,
.standard-feature-card:hover,
.trust-standard-card,
.trust-standard-card:hover,
.affiliations-logo-item,
.affiliations-logo-item:hover,
.affil-legacy-item,
.affil-legacy-item:hover,
.xrf-photo-box img,
.xrf-photo-box:hover img,
.experience-photo-wrap img,
.experience-photo-wrap:hover .experience-img,
.svc-steps > li,
.svc-steps > li:hover {
  transform: none !important;
  transition-property: border-color, box-shadow, background-color, color !important;
}

/* ==========================================================================
   FORCED COLORS / WINDOWS HIGH CONTRAST MODE SUPPORT (WCAG 2.1 Level AA)
   ========================================================================== */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
  }
  .btn,
  .btn--primary,
  .btn--dark,
  .btn-shop-view,
  .shop-tile,
  .curated-buy-card,
  .buy-tray-card,
  .store-filter-btn,
  .f-sec-pill,
  .f-affil-chip {
    border: 1px solid ButtonBorder !important;
  }
  .store-filter-btn[aria-pressed="true"],
  .metal-btn.active,
  .u-btn.active {
    outline: 2px solid Highlight !important;
  }
}