/* ============================================================
   FRESNO COIN GALLERY — "The Engraving"
   Light theme. Ink on ivory stock, the way a banknote or a share
   certificate is actually printed: guilloché lathe-work, milled
   coin edges, engraved serif, ledger numerals. The showroom photo
   sits behind the hero as a watermark, not a backdrop.
   ============================================================ */

:root{
  /* paper */
  --paper:#F6F2E9;
  --paper-2:#EFE9DA;
  --paper-3:#E7DFCB;
  --card:#FCFAF5;

  /* ink */
  --ink:#161C28;
  --ink-2:#2E3542;        /* body copy — was #39404F, too soft on ivory  */
  --muted:#565E6C;        /* small print — was #626977; 5.6:1 worst paper */

  /* ---- BRAND RED — sampled straight out of logo.svg ----
     The wordmark is filled with a vertical gradient:
       #9B383B → #E84139 → #F05146 → #E84139 → #8B3539
     so every red below is the company's own ink, not an invention.

     --red-core (#E84139) is only 3.58:1 on paper: brilliant for
     FILLS and LARGE type, illegal for body copy. The logo's own
     shadow stops (#9B383B / #8B3539) clear AA comfortably, so the
     text reds and the brand reds come from the same file.        */
  --red-hi:#F05146;       /* gradient highlight — accents only     */
  --red-core:#E84139;     /* BRAND CORE — fills, rules, large type */
  --red:#9B383B;          /* 5.74:1 worst paper — AA body/accents  */
  --red-dp:#8B3539;       /* 6.50:1 worst paper — AA, white 7.88:1 */
  /* Reversed bands run the logo's own two shadow stops. Nothing
     darker is invented: #8B3539 is the deepest ink the brand owns,
     and it already clears AA for the type sitting on it.        */
  --red-band:linear-gradient(178deg,#9B383B 0%,#8B3539 100%);

  /* metal + structure */
  --gold:#7E631C;         /* 4.70:1 on the worst paper — WCAG AA */
  --gold-lt:#A8871F;
  --gold-dp:#6B5417;
  --navy:#16233F;
  --navy-2:#1E2E4F;
  --green:#1E764A;        /* 4.63:1 on the worst paper — WCAG AA */
  --down:#B3261E;

  --rule:rgba(22,35,63,.16);
  --rule-gold:rgba(138,109,31,.30);
  --shadow-sm:0 1px 2px rgba(22,35,63,.06), 0 3px 8px rgba(22,35,63,.05);
  --shadow:0 4px 10px rgba(22,35,63,.07), 0 18px 40px -12px rgba(22,35,63,.18);

  --serif:'Bodoni Moda',serif;
  --sans:'Libre Franklin',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  /* Libre Franklin, not Archivo.
     Archivo has a small x-height and fine stems. At 16px on ivory paper
     it read thin no matter what weight was thrown at it — it needed 600
     just to match system-ui 500, which is compensating for the wrong
     face rather than choosing a better one. Bumping weight to rescue a
     face that isn't built for body copy is a losing game; the letters
     get heavier but never clearer.
     Libre Franklin is a Franklin Gothic descendant — drawn for newsprint,
     so: taller x-height, thicker stems, open counters that survive at
     small sizes. It also sits correctly next to a Didone: Franklin Gothic
     and Bodoni are the classic American masthead pairing, which is
     exactly the engraving/banknote idea this site is built on.
     600 is the BODY weight, and that is not a typo or a rescue.
     Libre Franklin is drawn for newsprint, where 600 is the normal
     reading weight and 400 is a caption. It is not Archivo's scale:
     Archivo needed 600 to claw its way up to system-ui 500, so 600
     there meant "compensating". Here 600 means "correct". 500 was set
     by carrying Archivo's numbers onto a font with a different scale
     entirely — it read light on a 1440p panel at 16px on ivory, which
     is the whole complaint this face was chosen to fix.
     Do not walk this back to 500 because 600 "sounds like semibold".
     Judge it on the panel, not on the number. */
  font-weight:600;
  line-height:1.62;
  /* NB: -webkit-font-smoothing:antialiased used to live here. It disables
     subpixel rendering and strips roughly a stem-weight off every glyph —
     it's the single biggest reason the copy looked thin. Left at the
     browser default deliberately; do not "tidy" this back in. */
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:rgba(163,36,49,.16)}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--red);
}
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--navy);
}
.lede{color:var(--ink-2);font-size:1.05rem;max-width:60ch}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}

/* ---------- MILLED COIN EDGE ---------- */
.milled{
  height:9px;
  background-image:repeating-linear-gradient(90deg,
    var(--gold) 0 1px, transparent 1px 5px);
  opacity:.45;
}
.milled-thick{
  height:14px;
  background-image:repeating-linear-gradient(90deg,
    rgba(138,109,31,.9) 0 1.5px, transparent 1.5px 6px);
  opacity:.5;
}

/* ---------- GUILLOCHÉ ---------- */
.guilloche{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
}

/* ============ TOP BAR ============ */
.topbar{
  background:var(--navy);
  color:#D8DEEA;
  font-size:.74rem;
  letter-spacing:.08em;
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:38px;
}
.topbar a{color:#D8DEEA;transition:color .2s}
.topbar a:hover{color:#E8C96A}
.topbar .tb-right{display:flex;gap:22px;align-items:center}
.dot-live{
  width:6px;height:6px;border-radius:50%;
  background:#4FD18B;display:inline-block;margin-right:7px;
  box-shadow:0 0 0 0 rgba(79,209,139,.7);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 7px rgba(79,209,139,0)}
  100%{box-shadow:0 0 0 0 rgba(79,209,139,0)}
}

/* ============ TICKER ============ */
.ticker{
  background:var(--paper-3);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
  height:44px;
  display:flex;align-items:center;
  position:relative;
}
.ticker-track{
  display:flex;gap:52px;
  white-space:nowrap;
  animation:scroll 44s linear infinite;
  padding-left:52px;
}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.tick{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:.8rem;
}
.tick .m{color:var(--gold-dp);letter-spacing:.18em;font-size:.68rem;font-weight:600}
.tick .p{color:var(--navy);font-weight:600}
.tick .c{font-size:.72rem}
.up{color:var(--green)}.down{color:var(--down)}

/* ============ HEADER ============ */
header.site{
  position:sticky;top:0;z-index:60;
  background:rgba(246,242,233,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
header.site .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:78px;gap:24px;
}
/* ---- the real wordmark ----
   logo.svg already carries its own white outline and black hard
   shadow, so it needs light stock behind it. logo-light.svg is the
   dark-background cut (the "Jewelry & Loan White OL" layer that
   Illustrator exported without a fill). Never swap them.        */
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand svg{flex:none}
.brand-logo{
  display:block;height:42px;width:auto;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.brand:hover .brand-logo{transform:scale(1.02)}
footer.site .brand-logo{height:38px}

/* retained for the est. line beside the mark */
.brand-txt{line-height:1.05}
.brand-txt .n{
  font-family:var(--serif);font-size:1.16rem;font-weight:600;
  letter-spacing:.02em;color:var(--navy);
}
.brand-txt .s{
  font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--red);font-weight:700;
}
.brand-est{
  font-family:var(--mono);font-size:.55rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-dp);font-weight:600;
  padding-left:13px;border-left:1px solid var(--rule);
  white-space:nowrap;
}
footer.site .brand-est{color:#E8C96A;border-left-color:rgba(255,255,255,.2)}
@media(max-width:1240px){ .brand-est{display:none} }
nav.main{display:flex;gap:30px;align-items:center}
nav.main a{
  font-size:.79rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);
  position:relative;padding:6px 0;transition:color .2s;
}
nav.main a::after{
  content:'';position:absolute;left:0;bottom:0;
  width:0;height:1.5px;background:var(--red);transition:width .28s;
}
nav.main a:hover{color:var(--navy)}
nav.main a:hover::after{width:100%}
.btn-call{
  font-family:var(--mono);font-size:.8rem;font-weight:600;
  border:1.5px solid var(--red);color:var(--red);
  padding:10px 18px;letter-spacing:.06em;
  transition:all .25s;white-space:nowrap;
}
.btn-call:hover{background:var(--red);color:#fff}
.burger{display:none;background:none;border:0;color:var(--navy);cursor:pointer;padding:8px}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:calc(100vh - 160px);
  display:flex;align-items:center;
  overflow:hidden;
  background:var(--paper);
}
/* The showroom, printed like a duotone plate.
   Previously brightness(1.28) + a .62-minimum veil washed this to solid
   cream — the hero had no photograph in it at all. Now the image carries
   the right-hand third and the type sits on clean paper at the left. */
.hero-bg{
  position:absolute;inset:0;
  /* NB: resolved relative to THIS FILE (assets/site.css), not to the page.
     This was 'assets/showroom-wide.jpg' after the CSS was extracted out of
     index.html, which resolved to assets/assets/… and 404'd — the hero had
     no photograph in it for that whole stretch. */
  background:url('showroom-wide.jpg') center 40%/cover no-repeat;
  filter:grayscale(.35) contrast(1.02) brightness(1.02) sepia(.28) saturate(.9);
  transform:scale(1.04);
}
.hero-veil{
  position:absolute;inset:0;
  background:
    /* opaque under the type, clearing to let the room show on the right */
    linear-gradient(90deg,
      rgba(246,242,233,.99) 0%,
      rgba(246,242,233,.97) 30%,
      rgba(246,242,233,.80) 48%,
      rgba(246,242,233,.34) 68%,
      rgba(246,242,233,.16) 86%,
      rgba(246,242,233,.42) 100%),
    /* top + bottom feather so it meets the header and the trust band cleanly */
    linear-gradient(180deg,
      rgba(246,242,233,.72) 0%,
      rgba(246,242,233,.10) 34%,
      rgba(246,242,233,.16) 62%,
      rgba(246,242,233,.92) 94%,
      rgba(246,242,233,1) 100%);
}
/* Mobile-only hero plate — hidden on desktop, where .hero-bg does the work */
.hero-plate{display:none}

/* a hairline of brand red where the hero meets the trust band */
.hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;z-index:4;
  background-image:repeating-linear-gradient(90deg,
    var(--red-core) 0 1.5px, transparent 1.5px 6px);
  opacity:.5;
}
.hero .wrap{position:relative;z-index:3;padding-top:70px;padding-bottom:70px;width:100%}
.hero-inner{max-width:800px}
.est{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.est .line{height:1.5px;width:52px;background:var(--red)}
.est span{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;
  color:var(--red);text-transform:uppercase;font-weight:600;
}
.hero h1{font-size:clamp(2.7rem,6.4vw,5.2rem);margin-bottom:26px}
.hero h1 em{font-style:italic;color:var(--red)}
.hero p.lede{font-size:clamp(1rem,1.5vw,1.18rem);margin-bottom:44px;color:var(--ink-2)}

/* ---- TWO DOORS ---- */
.doors{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1.5px solid var(--navy);
  max-width:760px;
  background:rgba(252,250,245,.86);
  backdrop-filter:blur(4px);
  box-shadow:var(--shadow);
}
.door{padding:30px 30px 28px;position:relative;transition:background .3s;display:block}
.door + .door{border-left:1px solid var(--rule)}
.door::before{
  content:'';position:absolute;left:0;top:0;height:3px;width:0;
  background:var(--red);transition:width .38s ease;
}
.door:hover{background:rgba(163,36,49,.045)}
.door:hover::before{width:100%}
.door .k{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;
  color:var(--gold-dp);text-transform:uppercase;display:block;margin-bottom:12px;font-weight:600;
}
.door .t{
  font-family:var(--serif);font-size:1.5rem;font-weight:600;
  margin-bottom:9px;line-height:1.15;color:var(--navy);
}
.door .d{font-size:.9rem;color:var(--ink-2);line-height:1.55;margin-bottom:16px}
.door .go{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  color:var(--red);text-transform:uppercase;font-weight:600;
  display:inline-flex;align-items:center;gap:9px;
}
.door .go .arw{transition:transform .3s}
.door:hover .go .arw{transform:translateX(6px)}

/* ============ TRUST STRIP — brand red band ============
   Their storefront sign and their current site both run a red
   band. This is that band, in the logo's own ink.            */
.trust{
  background:var(--red-band);
  position:relative;
}
/* a milled coin edge in the highlight red, top and bottom */
.trust::before,.trust::after{
  content:'';position:absolute;left:0;right:0;height:3px;
  background-image:repeating-linear-gradient(90deg,
    rgba(240,81,70,.9) 0 1.5px, transparent 1.5px 6px);
}
.trust::before{top:0}
.trust::after{bottom:0}
.trust-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.trust-cell{padding:26px 18px;text-align:center;border-right:1px solid rgba(255,255,255,.16)}
.trust-cell:last-child{border-right:0}
.trust-cell .v{
  font-family:var(--serif);font-size:1.65rem;font-weight:600;
  color:#F7E6B0;line-height:1;margin-bottom:7px;   /* 7.4:1 on the band */
}
.trust-cell .l{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:#F2D9D6;font-weight:600;                   /* 6.9:1 on the band */
}

/* ============ SECTION BASE ============ */
section.band{padding:110px 0;position:relative;overflow:hidden}
.band-paper{background:var(--paper)}
.band-paper2{background:var(--paper-2)}
.sec-head{margin-bottom:56px;max-width:66ch;position:relative;z-index:2}
.sec-head .eyebrow{display:block;margin-bottom:18px}
.sec-head h2{font-size:clamp(2rem,3.9vw,3.1rem);margin-bottom:20px}
.sec-head h2 em{font-style:italic;color:var(--red)}

/* ============ SPOT PRICES ============ */
.spot-wrap{position:relative;z-index:2}
.spot-panel{
  border:1.5px solid var(--navy);
  background:var(--card);
  position:relative;overflow:hidden;
  box-shadow:var(--shadow);
}
.spot-head{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;
  padding:22px 30px;
  background:var(--navy);
  position:relative;z-index:2;
}
.spot-head .lbl{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:#E8C96A;font-weight:600;
}
.spot-head .stamp{font-family:var(--mono);font-size:.68rem;color:#A9B4C8}
.spot-grid{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:2}
.spot-cell{padding:34px 30px;border-right:1px solid var(--rule)}
.spot-cell:last-child{border-right:0}
.spot-cell .metal{
  font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-dp);margin-bottom:14px;
}
.spot-cell .price{
  font-family:var(--mono);font-size:1.9rem;font-weight:600;
  color:var(--navy);letter-spacing:-.02em;line-height:1;
  margin-bottom:10px;font-variant-numeric:tabular-nums;
  transition:color .3s;
}
.spot-cell .chg{font-family:var(--mono);font-size:.76rem;font-weight:600}

/* bid / ask — the pair a dealer actually reads */
.spot-cell .bidask{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:.68rem;color:var(--muted);
  margin:-4px 0 10px;
}
.spot-cell .bidask span:first-child{
  letter-spacing:.18em;text-transform:uppercase;font-size:.58rem;color:var(--gold-dp);font-weight:600;
}

/* session low–high: real Kitco range, marker at the live bid */
.rangebar{margin-top:16px}
.rb-track{
  position:relative;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--paper-3),var(--gold) 50%,var(--paper-3));
  opacity:.9;
}
.rb-dot{
  position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--navy);border:2px solid var(--card);
  transform:translate(-50%,-50%);
  transition:left .6s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 0 0 1px var(--navy);
}
.rb-ends{
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  margin-top:8px;
  font-family:var(--mono);font-size:.6rem;color:var(--muted);
}
.rb-ends .rb-lbl{
  letter-spacing:.16em;text-transform:uppercase;font-size:.52rem;
  color:var(--gold-dp);font-weight:600;
}
.spot-foot{
  padding:16px 30px;border-top:1px solid var(--rule);
  font-size:.7rem;color:var(--muted);position:relative;z-index:2;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--paper-2);
}
.spot-foot a{color:var(--red);font-weight:600;border-bottom:1px solid rgba(163,36,49,.4)}

/* ============ CALCULATOR ============ */
.calc-shell{
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;
  border:1.5px solid var(--navy);
  background:var(--card);
  box-shadow:var(--shadow);
  position:relative;z-index:2;
}
.calc-left{padding:48px 44px;border-right:1px solid var(--rule)}
.calc-right{padding:48px 44px;background:var(--paper-2);position:relative}
.field{margin-bottom:26px}
.field label{
  display:block;font-size:.64rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dp);margin-bottom:11px;
}
.seg{display:flex;border:1px solid var(--navy);flex-wrap:wrap;background:var(--paper)}
.seg button{
  flex:1;min-width:80px;
  background:transparent;border:0;color:var(--ink-2);
  font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:13px 8px;cursor:pointer;transition:all .22s;
  border-right:1px solid var(--rule);
}
.seg button:last-child{border-right:0}
.seg button:hover{background:rgba(22,35,63,.06);color:var(--navy)}
.seg button.on{background:var(--navy);color:#F6F2E9}
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:3px;background:var(--paper-3);
  outline:none;margin:16px 0 8px;border-radius:2px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:19px;height:19px;border-radius:50%;
  background:var(--red);cursor:pointer;
  border:3px solid var(--card);
  box-shadow:0 0 0 1px var(--red);
}
input[type=range]::-moz-range-thumb{
  width:19px;height:19px;border-radius:50%;
  background:var(--red);cursor:pointer;border:3px solid var(--card);
}
input[type=range]:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.rng-val{
  font-family:var(--mono);font-size:1.35rem;color:var(--navy);
  font-variant-numeric:tabular-nums;font-weight:600;
}
.rng-scale{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:.64rem;color:var(--muted);
}
.readout{text-align:left}
.readout .k{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red);margin-bottom:18px;font-weight:600;
}
.readout .big{
  font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.9rem);
  font-weight:600;color:var(--navy);line-height:1;
  font-variant-numeric:tabular-nums;margin-bottom:8px;
}
.readout .range-note{
  font-family:var(--mono);font-size:.8rem;color:var(--ink-2);margin-bottom:26px;
}
.readout ul{list-style:none;margin-bottom:28px}
.readout li{
  display:flex;justify-content:space-between;
  font-size:.8rem;padding:11px 0;
  border-bottom:1px dashed var(--rule);
  color:var(--ink-2);
}
.readout li span:last-child{font-family:var(--mono);color:var(--navy);font-weight:600}
.disclaim{
  font-size:.75rem;color:var(--ink-2);line-height:1.55;
  border-left:3px solid var(--gold);padding-left:12px;
}
.btn-gold{
  display:inline-block;background:var(--red);color:#fff;
  font-family:var(--sans);font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  padding:16px 30px;transition:all .25s;border:1.5px solid var(--red);cursor:pointer;
}
.btn-gold:hover{background:transparent;color:var(--red)}
.btn-ghost{
  display:inline-block;border:1.5px solid var(--navy);color:var(--navy);
  font-family:var(--sans);font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:16px 30px;transition:all .25s;cursor:pointer;background:transparent;
}
.btn-ghost:hover{background:var(--navy);color:var(--paper)}

/* ============ PLAQUE CARDS ============ */
.plaques{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);
  border:1.5px solid var(--navy);
  position:relative;z-index:2;
  box-shadow:var(--shadow);
}
.plaque{background:var(--card);position:relative;overflow:hidden;transition:background .3s}
.plaque:hover{background:#fff}
.plaque .shot{aspect-ratio:440/280;overflow:hidden;background:var(--paper-3);position:relative}
.plaque .shot img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.92);
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.plaque:hover .shot img{transform:scale(1.07);filter:saturate(1.05)}
.plaque .card-body{padding:22px 22px 26px}
.plaque .no{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  color:var(--gold);margin-bottom:9px;font-weight:600;
}
.plaque h3{
  font-family:var(--serif);font-size:1.16rem;font-weight:600;
  margin-bottom:8px;line-height:1.2;color:var(--navy);
}
.plaque p{font-size:.85rem;color:var(--ink-2);line-height:1.55}
.plaque .rule{height:1px;background:var(--rule);margin:14px 0 12px}
.plaque .meta{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  color:var(--muted);text-transform:uppercase;
}

/* ============ LEDGER ============ */
.ledger{position:relative;z-index:2}
.ledger-rail{
  position:absolute;left:96px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent);
  opacity:.45;
}
.entry{display:grid;grid-template-columns:96px 1fr;gap:44px;padding:26px 0;position:relative}
.entry .yr{
  font-family:var(--mono);font-size:1rem;font-weight:600;
  color:var(--red);text-align:right;padding-top:2px;letter-spacing:.04em;
}
.entry .body{position:relative;padding-left:4px}
.entry .body::before{
  content:'';position:absolute;left:-48px;top:11px;
  width:9px;height:9px;border-radius:50%;
  background:var(--paper-2);border:2px solid var(--gold);
}
.entry.major .body::before{
  background:var(--red);border-color:var(--red);
  box-shadow:0 0 0 4px rgba(163,36,49,.14);
}
.entry h3{font-family:var(--serif);font-size:1.28rem;font-weight:600;margin-bottom:7px;color:var(--navy)}
.entry p{font-size:.88rem;color:var(--ink-2);max-width:62ch}
.entry strong{color:var(--red)}

/* ============ IMPACT ============ */
.impact{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule);border:1.5px solid var(--navy);
  box-shadow:var(--shadow);
}
.imp-card{background:var(--card);position:relative;overflow:hidden}
.imp-card .shot{aspect-ratio:440/280;overflow:hidden}
.imp-card .shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.imp-card .b{padding:34px}
.imp-card .num{
  font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.2rem);
  font-weight:600;color:var(--red);line-height:1;margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.imp-card h3{font-family:var(--serif);font-size:1.3rem;font-weight:600;margin-bottom:6px;color:var(--navy)}
.imp-card .ben{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-dp);margin-bottom:14px;font-weight:600;
}
.imp-card p{font-size:.89rem;color:var(--ink-2)}

/* ============ TESTIMONIALS ============ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:2}
.quote{
  border:1px solid var(--rule);
  background:var(--card);
  padding:34px 30px;position:relative;
  transition:border-color .3s, transform .3s, box-shadow .3s;
  box-shadow:var(--shadow-sm);
}
.quote:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:var(--shadow)}
.quote .mark{
  font-family:var(--serif);font-size:3.4rem;color:var(--gold);
  line-height:.6;margin-bottom:16px;display:block;opacity:.6;
}
.quote p{font-size:.92rem;color:var(--ink-2);line-height:1.66;margin-bottom:22px}
.quote .who{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);font-weight:600;
}

/* ============ LOCATIONS ============ */
.locs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.loc{
  border:1.5px solid var(--navy);background:var(--card);
  overflow:hidden;transition:transform .3s, box-shadow .3s;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
}
.loc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.loc .shot{aspect-ratio:280/189;overflow:hidden;background:var(--paper-3)}
.loc .shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .7s}
.loc:hover .shot img{transform:scale(1.05)}
.loc .b{padding:26px;flex:1;display:flex;flex-direction:column}
.loc h3{font-family:var(--serif);font-size:1.24rem;font-weight:600;margin-bottom:6px;color:var(--navy)}
.loc .status{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:7px;font-weight:600;
}
.loc .status .d{width:7px;height:7px;border-radius:50%}
.open .d{background:var(--green)}.open{color:var(--green)}
.closed .d{background:var(--down)}.closed{color:var(--down)}
.loc address{font-style:normal;font-size:.85rem;color:var(--ink-2);line-height:1.6;margin-bottom:16px}
.loc .ph{font-family:var(--mono);font-size:.95rem;color:var(--red);margin-bottom:6px;display:inline-block;font-weight:600}
.loc .ph:hover{text-decoration:underline}
.loc .lic{font-family:var(--mono);font-size:.62rem;color:var(--muted);margin-bottom:18px}
.loc .dir{
  margin-top:auto;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);font-weight:600;
  border-top:1px solid var(--rule);padding-top:16px;
  display:flex;justify-content:space-between;align-items:center;
}
.loc .dir:hover{color:var(--red)}

.hours-bar{
  margin-top:28px;border:1.5px solid var(--navy);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--card);
}
.hours-bar div{
  padding:18px 20px;border-right:1px solid var(--rule);
  font-family:var(--mono);font-size:.76rem;color:var(--navy);
}
.hours-bar div:last-child{border-right:0}
.hours-bar .hl{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dp);margin-bottom:6px;font-family:var(--sans);font-weight:700;
}

/* ============ CTA — brand red band ============ */
.cta{
  position:relative;padding:104px 0;overflow:hidden;
  background:var(--red-band);
  text-align:center;
}
.cta::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background-image:repeating-linear-gradient(90deg,
    rgba(240,81,70,.9) 0 1.5px, transparent 1.5px 6px);
  z-index:3;
}
.cta h2{font-size:clamp(2rem,4.2vw,3.3rem);margin-bottom:18px;color:#FFF8EC}
.cta h2 em{font-style:italic;color:#F7E6B0}
.cta p{color:#F2D9D6;max-width:56ch;margin:0 auto 36px}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
.cta .btn-gold{background:#F7E6B0;color:var(--red-dp);border-color:#F7E6B0}
.cta .btn-gold:hover{background:transparent;color:#F7E6B0}
.cta .btn-ghost{border-color:rgba(255,255,255,.5);color:#FFF8EC}
.cta .btn-ghost:hover{background:#FFF8EC;color:var(--red-dp);border-color:#FFF8EC}

/* ============ FOOTER ============ */
footer.site{background:#101A2E;color:#B8C2D4;padding:70px 0 0}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:48px}
.f-col h4{
  font-size:.64rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:#E8C96A;margin-bottom:18px;
}
.f-col ul{list-style:none}
.f-col li{margin-bottom:10px}
.f-col a{font-size:.88rem;color:#C6CFDE;transition:color .2s}
.f-col a:hover{color:#E8C96A}
.f-about p{font-size:.88rem;color:#C6CFDE;margin:16px 0;max-width:38ch}
.f-about .brand-txt .n{color:#F6F2E9}
.f-about .brand-txt .s{color:#E8C96A}
.f-tag{font-family:var(--serif);font-style:italic;font-size:1rem;color:#E8C96A}
.f-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  padding:24px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.72rem;color:#7C889E;
}
.socials{display:flex;gap:14px}
.socials a{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;color:#B8C2D4;transition:all .25s;
}
.socials a:hover{border-color:#E8C96A;color:#E8C96A}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ============ FOCUS ============ */
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .plaques{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr 1fr}
  .locs{grid-template-columns:1fr}
  .calc-shell{grid-template-columns:1fr}
  .calc-left{border-right:0;border-bottom:1px solid var(--rule)}
  .spot-grid{grid-template-columns:1fr 1fr}
  .spot-cell:nth-child(2){border-right:0}
  .spot-cell:nth-child(1),.spot-cell:nth-child(2){border-bottom:1px solid var(--rule)}
  /* Five plaques divide evenly into five columns and nothing else — at 3-up
     and 2-up the last one orphaned an empty cell in the corner. Go 2-up and
     let the strongest claim run full width as a banner, so the grid always
     closes. */
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-cell{
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    min-height:98px;padding:20px 16px;
    border-right:1px solid rgba(255,255,255,.16);
    border-bottom:1px solid rgba(255,255,255,.16);
  }
  .trust-cell:nth-child(2n){border-right:0}
  .trust-cell:last-child{grid-column:1/-1;border-right:0;border-bottom:0}
  .trust-cell .v{font-size:1.5rem}
  /* .2em tracking forced "AUTHORIZED / DEALER" and "VALLEY GOLD / BUYER"
     onto two lines at half width — tighten so every label sits on one. */
  .trust-cell .l{letter-spacing:.15em;line-height:1.4}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  nav.main{
    position:fixed;inset:78px 0 auto;
    background:var(--paper);
    flex-direction:column;align-items:flex-start;
    padding:26px 28px 34px;gap:4px;
    border-bottom:1px solid var(--rule);
    box-shadow:var(--shadow);
    display:none;
  }
  nav.main.open{display:flex}
  nav.main a{padding:13px 0;width:100%;border-bottom:1px solid var(--rule)}
  .burger{display:block}
  .btn-call{display:none}
  .doors{grid-template-columns:1fr}
  .door + .door{border-left:0;border-top:1px solid var(--rule)}
  .plaques{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .impact{grid-template-columns:1fr}
  /* columns + banner behaviour inherited from the 1100 block above */
  .trust-cell{min-height:84px;padding:15px 12px}
  .trust-cell .v{font-size:1.32rem;margin-bottom:5px}
  .trust-cell .l{font-size:.55rem;letter-spacing:.12em}
  .trust-cell:last-child{padding:17px 12px}
  .entry{grid-template-columns:64px 1fr;gap:26px}
  .ledger-rail{left:64px}
  .entry .body::before{left:-30px}
  .hours-bar{grid-template-columns:1fr 1fr}
  .hours-bar div:nth-child(2n){border-right:0}
  .f-grid{grid-template-columns:1fr}
  .calc-left,.calc-right{padding:34px 26px}
  section.band{padding:74px 0}
  /* NB: the mobile spot board is defined in the later 760 block (2-up) —
     the single-column rules that used to live here were dead weight and
     fought it, so they're gone. */
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   ADDED: 8-item nav with Shop dropdown, and shop category pages
   ============================================================ */

/* ---- nav needs to breathe with 8 items ---- */
nav.main{gap:22px}
nav.main a, .subtoggle{font-size:.72rem;letter-spacing:.1em}

.has-sub{position:relative}
.subtoggle{
  background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-weight:600;
  text-transform:uppercase;color:var(--ink-2);
  padding:6px 0;display:inline-flex;align-items:center;gap:6px;
  position:relative;transition:color .2s;
}
.subtoggle::after{
  content:'';position:absolute;left:0;bottom:0;
  width:0;height:1.5px;background:var(--red);transition:width .28s;
}
.has-sub:hover .subtoggle, .subtoggle[aria-expanded="true"]{color:var(--navy)}
.has-sub:hover .subtoggle::after, .subtoggle[aria-expanded="true"]::after{width:100%}
.subtoggle .chev{transition:transform .25s}
.has-sub:hover .subtoggle .chev, .subtoggle[aria-expanded="true"] .chev{transform:rotate(180deg)}

.submenu{
  position:absolute;top:calc(100% + 14px);left:-18px;
  min-width:258px;
  background:var(--card);
  border:1.5px solid var(--navy);
  box-shadow:var(--shadow);
  padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s, transform .22s, visibility .22s;
  z-index:80;
}
.submenu::before{
  content:'';position:absolute;top:-8px;left:0;right:0;height:8px;
}
.has-sub:hover .submenu, .submenu.open{opacity:1;visibility:visible;transform:none}
.submenu a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 20px;width:auto;
  font-family:var(--sans);font-size:.79rem;font-weight:600;
  letter-spacing:.04em;text-transform:none;color:var(--ink-2);
  border-bottom:0;
}
.submenu a::after{display:none}
.submenu a .n{
  font-family:var(--mono);font-size:.58rem;color:var(--gold-dp);
  letter-spacing:.1em;
}
.submenu a:hover{background:rgba(163,36,49,.06);color:var(--navy)}
.submenu a[aria-current="page"]{
  background:rgba(163,36,49,.08);color:var(--navy);font-weight:700;
}
nav.main a[aria-current="page"]{color:var(--red)}
nav.main a[aria-current="page"]::after{width:100%}

/* ============ PAGE HERO (subpages) ============ */
.page-hero{
  position:relative;overflow:hidden;
  background:var(--paper-2);
  border-bottom:1px solid var(--rule);
  padding:64px 0 68px;
}
.page-hero .wrap{position:relative;z-index:2}
.crumb{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:20px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.crumb a{color:var(--gold-dp);font-weight:600}
.crumb a:hover{color:var(--red)}
.crumb .sep{opacity:.45}
.page-hero h1{
  font-size:clamp(2.2rem,4.6vw,3.6rem);margin-bottom:18px;max-width:20ch;
}
.page-hero h1 em{font-style:italic;color:var(--red)}
.page-hero .lede{font-size:1.05rem;max-width:62ch}
.page-hero .hero-figure{
  position:absolute;right:0;top:0;bottom:0;width:38%;
  overflow:hidden;
}
.page-hero .hero-figure img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) brightness(1.06) sepia(.14);
  opacity:.5;
}
.page-hero .hero-figure::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--paper-2) 0%,rgba(239,233,218,.6) 42%,rgba(239,233,218,.15) 100%);
}

/* ============ SHOP: category index cards on home ============ */
.shop-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--rule);border:1.5px solid var(--navy);
  box-shadow:var(--shadow);
}
.shop-card{
  background:var(--card);display:block;position:relative;overflow:hidden;
  transition:background .3s;
}
.shop-card:hover{background:#fff}
.shop-card .shot{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.shop-card .shot img{
  width:100%;height:100%;object-fit:cover;filter:saturate(.9);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.shop-card:hover .shot img{transform:scale(1.06)}
.shop-card .b{padding:20px}
.shop-card .n{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;color:var(--gold);margin-bottom:8px}
.shop-card h3{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--navy);margin-bottom:6px;line-height:1.2}
.shop-card p{font-size:.8rem;color:var(--ink-2);line-height:1.5}
.shop-card .go{
  margin-top:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);font-weight:600;
  display:inline-flex;gap:7px;align-items:center;
}
.shop-card:hover .go .arw{transform:translateX(5px)}
.shop-card .go .arw{transition:transform .3s}

/* ============ SHOP: category page content ============ */
.split{
  display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;
}
.split .body h3{
  font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--navy);
  margin:34px 0 12px;
}
.split .body h3:first-child{margin-top:0}
.split .body p{color:var(--ink-2);margin-bottom:16px;font-size:1rem}
.split .body ul{list-style:none;margin:0 0 20px}
.split .body li{
  padding:9px 0 9px 22px;position:relative;
  font-size:.9rem;color:var(--ink-2);
  border-bottom:1px dashed var(--rule);
}
.split .body li::before{
  content:'◆';position:absolute;left:0;top:9px;
  color:var(--gold);font-size:.62rem;
}
.split .body li strong{color:var(--navy)}

/* aside: the "assay card" */
.assay{
  border:1.5px solid var(--navy);background:var(--card);
  box-shadow:var(--shadow);position:sticky;top:104px;
}
.assay .hd{
  background:var(--navy);padding:16px 22px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:#E8C96A;font-weight:600;
}
.assay .bd{padding:22px}
.assay dl{display:grid;grid-template-columns:auto 1fr;gap:0}
.assay dt{
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:11px 0;border-bottom:1px dashed var(--rule);
}
.assay dd{
  font-family:var(--mono);font-size:.78rem;color:var(--navy);
  text-align:right;padding:11px 0;border-bottom:1px dashed var(--rule);font-weight:600;
}
.assay dl > :nth-last-child(1), .assay dl > :nth-last-child(2){border-bottom:0}
.assay .note{
  font-size:.7rem;color:var(--muted);line-height:1.5;
  border-left:3px solid var(--gold);padding-left:11px;margin-top:18px;
}
.assay .btn-gold{margin-top:20px;width:100%;text-align:center}

/* gallery strip */
.strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1.5px solid var(--navy);
  box-shadow:var(--shadow);
}
.strip figure{background:var(--card);overflow:hidden}
.strip figure .shot{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.strip figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .8s}
.strip figure:hover img{transform:scale(1.06)}
.strip figcaption{
  padding:16px 20px;font-size:.76rem;color:var(--ink-2);
  border-top:1px solid var(--rule);
}
.strip figcaption b{
  display:block;font-family:var(--serif);font-size:.98rem;
  color:var(--navy);font-weight:600;margin-bottom:3px;
}

/* cross-sell row */
.crossrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cross{
  border:1px solid var(--rule);background:var(--card);
  padding:18px 20px;transition:border-color .25s, transform .25s;
  box-shadow:var(--shadow-sm);
}
.cross:hover{border-color:var(--navy);transform:translateY(-3px)}
.cross .n{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;color:var(--gold);margin-bottom:6px}
.cross h4{font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--navy);margin-bottom:4px}
.cross p{font-size:.78rem;color:var(--ink-2)}

/* ============ SELL: how it works ============
   Four beats across the counter. Numbered like a ledger. */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1.5px solid var(--navy);
  box-shadow:var(--shadow);
}
.step{background:var(--card);padding:28px 24px 30px;position:relative}
.step .no{
  font-family:var(--serif);font-size:2.4rem;font-weight:600;
  color:var(--red-core);line-height:1;margin-bottom:12px;opacity:.9;
}
.step h4{
  font-family:var(--serif);font-size:1.1rem;font-weight:600;
  color:var(--navy);margin-bottom:7px;
}
.step p{font-size:.85rem;color:var(--ink-2);line-height:1.55}
.step::after{
  content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;
  background-image:repeating-linear-gradient(90deg,
    var(--red-core) 0 1.5px, transparent 1.5px 6px);
  opacity:.55;
}

/* the "what we buy" quick grid */
.buys{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px;
}
.buy{
  border:1px solid var(--rule);background:var(--card);
  padding:14px 16px;box-shadow:var(--shadow-sm);
}
.buy b{
  display:block;font-family:var(--serif);font-size:.95rem;
  color:var(--navy);font-weight:600;margin-bottom:3px;
}
.buy span{font-size:.72rem;color:var(--muted)}

/* honesty callout — used where we tell people NOT to sell */
.level{
  border:1.5px solid var(--red);
  border-left-width:5px;
  background:rgba(155,56,59,.05);
  padding:22px 24px;margin:28px 0;
}
.level .hd{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:9px;
}
.level p{font-size:.88rem;color:var(--ink-2);margin:0}

/* ============ SERVICES: this-vs-that ============
   Used to separate a free verbal opinion from a written certified
   appraisal — the distinction most competitors deliberately blur. */
.vs{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule);border:1.5px solid var(--navy);
  box-shadow:var(--shadow);margin:30px 0;
}
.vs-card{background:var(--card);padding:28px 26px 30px;position:relative}
.vs-card.is-us{background:rgba(155,56,59,.045)}
.vs-card .tag{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;margin-bottom:10px;
  display:inline-block;padding:4px 9px;border:1px solid var(--rule);
}
.vs-card.is-us .tag{color:var(--red);border-color:var(--red)}
.vs-card.is-them .tag{color:var(--muted)}
.vs-card h4{
  font-family:var(--serif);font-size:1.2rem;font-weight:600;
  color:var(--navy);margin-bottom:10px;line-height:1.2;
}
.vs-card ul{list-style:none;margin:0}
.vs-card li{
  font-size:.82rem;color:var(--ink-2);padding:8px 0 8px 20px;
  position:relative;border-bottom:1px dashed var(--rule);
}
.vs-card li:last-child{border-bottom:0}
.vs-card li::before{
  content:'◆';position:absolute;left:0;top:8px;font-size:.55rem;color:var(--gold);
}
.vs-card.is-us li::before{color:var(--red-core)}

/* service price/turnaround rail */
.rail{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1.5px solid var(--navy);
  box-shadow:var(--shadow);
}
.rail div{background:var(--card);padding:22px 24px;text-align:center}
.rail .k{
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dp);font-weight:700;margin-bottom:8px;
}
.rail .v{
  font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--navy);
}

/* ============ LEARN ============ */

/* karat calculator input */
.numwrap{display:flex;align-items:center;gap:0;border:1px solid var(--navy);background:var(--paper)}
.numwrap input[type=number]{
  flex:1;min-width:0;border:0;background:transparent;
  font-family:var(--mono);font-size:1.35rem;font-weight:600;color:var(--navy);
  padding:12px 14px;outline:none;-moz-appearance:textfield;
}
.numwrap input[type=number]::-webkit-outer-spin-button,
.numwrap input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.numwrap input:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.numwrap .unit{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-dp);font-weight:600;
  padding:0 16px;border-left:1px solid var(--rule);white-space:nowrap;
}

/* article index cards */
.guides{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  border:1.5px solid var(--navy);box-shadow:var(--shadow)}
.guide{background:var(--card);padding:26px 26px 28px;display:block;transition:background .25s}
.guide:hover{background:#fff}
.guide .n{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;color:var(--gold);margin-bottom:8px}
.guide h3{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--navy);margin-bottom:7px;line-height:1.2}
.guide p{font-size:.88rem;color:var(--ink-2);line-height:1.55;margin-bottom:12px}
.guide .go{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);font-weight:600;display:inline-flex;gap:7px;align-items:center;
}
.guide:hover .go .arw{transform:translateX(5px)}
.guide .go .arw{transition:transform .3s}

/* FAQ — native details/summary, no JS */
.faq{border:1.5px solid var(--navy);background:var(--card);box-shadow:var(--shadow)}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 24px;
  font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--navy);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  transition:background .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgba(155,56,59,.05)}
.faq summary::after{
  content:'+';font-family:var(--mono);font-size:1.2rem;color:var(--red);
  flex:none;transition:transform .25s;line-height:1;
}
.faq details[open] summary::after{content:'–'}
.faq details[open] summary{background:rgba(155,56,59,.05)}
.faq .a{padding:0 24px 22px;font-size:.94rem;color:var(--ink-2);line-height:1.68;max-width:70ch}
.faq .a p{margin-bottom:10px}
.faq .a p:last-child{margin-bottom:0}
.faq .a a{color:var(--red);font-weight:600;border-bottom:1px solid rgba(155,56,59,.35)}
.faq summary:focus-visible{outline:2px solid var(--red);outline-offset:-2px}

/* karat reference table */
.karat{width:100%;border-collapse:collapse;border:1.5px solid var(--navy);background:var(--card);
  box-shadow:var(--shadow);font-size:.85rem}
.karat th{
  background:var(--navy);color:#E8C96A;text-align:left;padding:13px 18px;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
}
.karat td{padding:12px 18px;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.karat tr:last-child td{border-bottom:0}
.karat td:first-child{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:.98rem}
.karat td:last-child{font-family:var(--mono);color:var(--navy);text-align:right}
.karat tr:hover td{background:rgba(155,56,59,.04)}

/* ============ ABOUT: the team ============
   Museum-plaque cards. Deliberately typographic — a name, a role,
   a specialism, a year. Photos drop straight in when we have them. */
.team{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1.5px solid var(--navy);
  box-shadow:var(--shadow);
}
.member{background:var(--card);padding:26px 24px 28px;position:relative;transition:background .25s}
.member:hover{background:#fff}
.member.is-founder{background:rgba(155,56,59,.045)}
.member.is-founder:hover{background:rgba(155,56,59,.07)}
.member .since{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  color:var(--gold);margin-bottom:10px;
}
.member h3{
  font-family:var(--serif);font-size:1.18rem;font-weight:600;
  color:var(--navy);line-height:1.15;margin-bottom:4px;
}
.member .role{
  font-family:var(--sans);font-size:.6rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red);
  margin-bottom:14px;
}
.member p{font-size:.85rem;color:var(--ink-2);line-height:1.6;margin-bottom:12px}
.member .spec{
  border-top:1px solid var(--rule);padding-top:11px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase;
}
.member .spec b{color:var(--gold-dp)}

/* trust badges */
.badges{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1.5px solid var(--navy);box-shadow:var(--shadow);
}
.badge{background:var(--card);padding:28px 22px;text-align:center}
.badge .v{
  font-family:var(--serif);font-size:1.9rem;font-weight:600;
  color:var(--red);line-height:1;margin-bottom:8px;
}
.badge .l{
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy);font-weight:700;margin-bottom:6px;
}
.badge .d{font-size:.72rem;color:var(--muted);line-height:1.5}

/* ============ LOCATIONS ============ */

/* which-counter matrix */
.matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.matrix{
  width:100%;border-collapse:collapse;background:var(--card);
  border:1.5px solid var(--navy);box-shadow:var(--shadow);
  font-size:.85rem;min-width:640px;
}
.matrix thead th{
  background:var(--navy);color:#E8C96A;padding:16px 18px;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;text-align:center;
  border-right:1px solid rgba(255,255,255,.14);
}
.matrix thead th:first-child{text-align:left;width:34%}
.matrix thead th:last-child{border-right:0}
.matrix thead th small{
  display:block;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.06em;color:#A9B4C8;text-transform:none;margin-top:4px;font-weight:500;
}
.matrix td{
  padding:13px 18px;border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);text-align:center;
}
.matrix td:last-child{border-right:0}
.matrix tr:last-child td{border-bottom:0}
.matrix td:first-child{
  text-align:left;font-family:var(--serif);font-size:.98rem;
  font-weight:600;color:var(--navy);
}
.matrix td:first-child small{
  display:block;font-family:var(--sans);font-size:.7rem;
  font-weight:500;color:var(--muted);margin-top:2px;
}
.matrix tr:hover td{background:rgba(155,56,59,.04)}
.matrix .yes{color:var(--green);font-size:1rem;font-weight:700}
.matrix .no{color:var(--paper-3);font-size:1rem}
.matrix .part{
  font-family:var(--mono);font-size:.62rem;color:var(--gold-dp);
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;
}

/* big location card */
.loc-full{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:0;
  border:1.5px solid var(--navy);background:var(--card);
  box-shadow:var(--shadow);margin-bottom:28px;overflow:hidden;
}
.loc-full .shot{position:relative;min-height:280px;overflow:hidden;background:var(--paper-3)}
.loc-full .shot img{
  width:100%;height:100%;object-fit:cover;filter:saturate(.9);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.loc-full:hover .shot img{transform:scale(1.04)}
.loc-full .shot .flag{
  position:absolute;top:0;left:0;
  background:var(--red);color:#fff;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;padding:7px 14px;
}
.loc-full .b{padding:34px 36px 36px}
.loc-full h3{
  font-family:var(--serif);font-size:1.6rem;font-weight:600;
  color:var(--navy);margin-bottom:6px;line-height:1.15;
}
.loc-full .status{margin-bottom:18px}
.loc-full .lede-sm{font-size:.88rem;color:var(--ink-2);margin-bottom:20px;line-height:1.6}
.loc-full .rows{display:grid;grid-template-columns:auto 1fr;gap:0;margin-bottom:22px}
.loc-full .rows dt{
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding:10px 22px 10px 0;border-bottom:1px dashed var(--rule);
  white-space:nowrap;
}
.loc-full .rows dd{
  font-family:var(--mono);font-size:.8rem;color:var(--navy);
  padding:10px 0;border-bottom:1px dashed var(--rule);text-align:right;
}
.loc-full .rows dd a{color:var(--red);font-weight:600}
.loc-full .rows dd a:hover{text-decoration:underline}
.loc-full .acts{display:flex;gap:12px;flex-wrap:wrap}
.loc-full .acts .btn-gold,.loc-full .acts .btn-ghost{padding:13px 22px;font-size:.7rem}

@media(max-width:1100px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .buys{grid-template-columns:repeat(2,1fr)}
  .vs{grid-template-columns:1fr}
  .rail{grid-template-columns:1fr}
  .guides{grid-template-columns:1fr}
  .team{grid-template-columns:repeat(2,1fr)}
  .badges{grid-template-columns:repeat(2,1fr)}
  .loc-full{grid-template-columns:1fr}
  .loc-full .shot{min-height:220px}
  nav.main{
    position:fixed;inset:78px 0 auto;
    background:var(--paper);
    flex-direction:column;align-items:flex-start;
    padding:22px 28px 30px;gap:2px;
    border-bottom:1px solid var(--rule);
    box-shadow:var(--shadow);
    display:none;max-height:calc(100vh - 78px);overflow-y:auto;
  }
  nav.main.open{display:flex}
  nav.main a{padding:13px 0;width:100%;border-bottom:1px solid var(--rule)}
  .burger{display:block}
  .btn-call{display:none}
  .has-sub{width:100%}
  .subtoggle{width:100%;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--rule)}
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    border:0;box-shadow:none;background:rgba(22,35,63,.035);
    min-width:0;padding:0;display:none;
  }
  .submenu.open{display:block}
  .has-sub:hover .submenu{opacity:1;visibility:visible}
  .has-sub .submenu:not(.open){display:none}
  .submenu a{padding:12px 0 12px 18px}
  .shop-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:40px}
  .assay{position:static}
  .crossrow{grid-template-columns:repeat(2,1fr)}
  .page-hero .hero-figure{width:46%;opacity:.55}
}
@media(max-width:760px){
  .shop-grid{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .crossrow{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .buys{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .badges{grid-template-columns:1fr}
  .loc-full .b{padding:26px 24px 28px}
  .page-hero{padding:44px 0 48px}
  .page-hero .hero-figure{display:none}

  /* ================= MOBILE HERO =================
     Order matters on a phone. Previously this opened with ~160px of bars
     and then four lines of body copy before any image — nothing to look at.
     Now: the room, then the headline, then the two doors. The plate is a
     real element so the H1 stays a single H1 on paper (no duplicate
     heading, no white text fighting a photograph). */
  .hero{display:block;min-height:0;padding:0;overflow:visible}
  .hero-bg,.hero-veil{display:none}

  .hero-plate{
    display:block;position:relative;height:214px;
    /* Keep the room crisp and let the milled rule END it. Fading the photo
       out into the paper made it look like it was dissolving; a hard edge
       reads as a printed plate, which is the whole conceit. */
    background:
      linear-gradient(180deg,
        rgba(246,242,233,.04) 0%,
        rgba(246,242,233,.04) 64%,
        rgba(246,242,233,.42) 100%),
      url('showroom-wide.jpg') center 46%/cover no-repeat;
    filter:saturate(.9) sepia(.14) contrast(1.04);
  }
  /* milled coin edge in brand red, top and bottom */
  .hero-plate::before,
  .hero-plate::after{
    content:'';position:absolute;left:0;right:0;height:4px;z-index:2;
    background-image:repeating-linear-gradient(90deg,
      var(--red-core) 0 2px, transparent 2px 6px);
  }
  .hero-plate::before{top:0}
  .hero-plate::after{bottom:0}

  .hero .wrap{padding-top:24px;padding-bottom:36px}
  .hero-inner{padding-bottom:0}
  .est{margin-bottom:14px}
  .est .line{width:30px}
  .est span{font-size:.62rem;letter-spacing:.24em}
  .hero h1{font-size:clamp(2.6rem,13vw,3.5rem);margin-bottom:16px}
  .hero p.lede{font-size:.95rem;margin-bottom:24px}

  /* doors become two full-width taps, not a squeezed two-up card */
  .doors{border-width:1.5px;box-shadow:var(--shadow-sm)}
  .door{padding:22px 20px 20px}
  .door .t{font-size:1.32rem}
  .door .d{font-size:.82rem;margin-bottom:12px}
  .door::before{height:3px}

  /* ---- less chrome above the fold ---- */
  .topbar{font-size:.66rem}
  .topbar .wrap{height:32px}
  .topbar .tb-right a:not(:last-child){display:none}
  .ticker{height:36px}
  .tick{font-size:.72rem;gap:8px}
  .tick .m{font-size:.6rem;letter-spacing:.14em}
  header.site .wrap{height:66px}
  .brand-logo{height:34px}
  /* nav panel is pinned under the header — follow it down to 66px */
  nav.main{inset:66px 0 auto;max-height:calc(100vh - 66px)}

  /* ---- MOBILE SPOT BOARD ----
     Four full-width cells was ~800px of scrolling. Two up, tighter. */
  .spot-grid{grid-template-columns:1fr 1fr}
  .spot-cell{
    padding:20px 16px!important;
    border-right:1px solid var(--rule)!important;
    border-bottom:1px solid var(--rule);
  }
  .spot-cell:nth-child(2n){border-right:0!important}
  .spot-cell:nth-child(n+3){border-bottom:0}
  .spot-cell .price{font-size:1.32rem}
  .spot-cell .metal{font-size:.58rem;letter-spacing:.18em;margin-bottom:10px}
  .spot-cell .chg{font-size:.68rem}
  .spot-cell .bidask{font-size:.6rem}
  .rangebar{margin-top:12px}
  .rb-ends .rb-lbl{display:none}
  .spot-head{padding:16px 18px}
  .spot-head .lbl{font-size:.6rem;letter-spacing:.16em}
  .spot-foot{padding:14px 18px;font-size:.66rem}

  /* tighter section rhythm so the page isn't endless */
  section.band{padding:58px 0}
  .sec-head{margin-bottom:34px}
  .wrap{padding:0 20px}

  /* ---- FOOTER, CENTRED ----
     Four stacked left-aligned columns on a phone reads as a dump of links
     with a ragged right edge. Centred, it becomes a colophon — which is
     what a footer actually is. Desktop stays a 4-column grid. */
  footer.site{padding-top:52px}
  .f-grid{grid-template-columns:1fr;gap:34px;padding-bottom:36px;text-align:center}
  .f-about .brand{justify-content:center}
  .f-about p{max-width:36ch;margin-left:auto;margin-right:auto}
  .f-tag{font-size:1.05rem}
  .f-col h4{margin-bottom:14px}
  .f-col li{margin-bottom:9px}
  .f-col a{font-size:.88rem}          /* bigger tap target once centred */
  .socials{justify-content:center}
  .f-bottom{
    flex-direction:column;align-items:center;
    text-align:center;gap:8px;padding:22px 0;line-height:1.65;
  }
}

/* The seal is decoration. Below tablet it lands on the copy and costs
   paint time for nothing — so it simply doesn't run. */
@media(max-width:900px){
  .guilloche{display:none}
}