/* ==========================================================================
   BLACK HOUSE GOLD & SILVER — Base Stylesheet
   A Silva Holdings, LLC company
   --------------------------------------------------------------------------
   HANDOFF NOTE (Aureus POS dev team):
   All brand values are tokens in :root. Change here, changes everywhere.
   Contact details are injected from /assets/js/config.js — single source.
   ========================================================================== */

/* ---------- Fonts ----------
   Loaded with <link rel=preload> in the document head, not @import, so the
   browser can fetch them in parallel with the stylesheet.
   Display: Fraunces (variable). Body: Switzer (variable).
   -------------------------------------------------------------------------- */

/* ---------- Tokens ---------- */
:root {
  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --text-xl:   clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --text-2xl:  clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  --text-3xl:  clamp(2.1rem, 1.3rem + 2.8vw, 3.5rem);

  /* Color — the Black House */
  --ink:       #08090B;
  --ink-2:     #101216;
  --ink-3:     #181A1F;
  --ink-warm:  #15120C;
  --char:      #2A2D33;
  --line-dk:   rgba(212,175,55,0.20);
  --hair-dk:   rgba(227,199,102,0.13);

  --gold:      #C9A227;
  --gold-br:   #EFD07A;
  --gold-dp:   #8F7318;
  /* Gloss ramps — light source top-left, specular band at 42%, reflected bounce at the base */
  --gold-fx:   linear-gradient(160deg, #FBEFC0 0%, #E2BB4A 26%, #DDB13A 42%, #9C6E12 72%, #C9A227 88%, #F5E4A4 100%);
  --gold-fx-h: linear-gradient(160deg, #FFF7DC 0%, #EDCB63 26%, #E7BF4A 44%, #B98A1D 74%, #DCB63C 90%, #FFF3C6 100%);
  --gold-sheen: linear-gradient(103deg, transparent 0%, rgba(255,255,255,.34) 42%, rgba(255,255,255,.06) 55%, transparent 78%);

  /* Silver — the second metal, equal citizen */
  --slv:       #AEB7C0;
  --slv-br:    #E4E9ED;
  --slv-dp:    #7A848E;
  --slv-fx:    linear-gradient(160deg, #F6F8FA 0%, #C9D1D9 26%, #BCC4CC 44%, #86909A 76%, #B3BBC3 90%, #ECEFF2 100%);
  --slv-fx-h:  linear-gradient(160deg, #FFFFFF 0%, #D8DFE6 26%, #CBD3DA 44%, #949EA8 76%, #C2CAD2 90%, #F7F9FB 100%);
  --slv-line:  rgba(174,183,192,0.26);

  --cream:     #F7F4ED;
  --cream-2:   #EFEAE0;
  --paper:     #FFFDF9;
  --line-lt:   #DED7C8;

  --shadow-lo: 0 1px 2px rgba(10,9,6,0.05), 0 8px 24px -12px rgba(10,9,6,0.12);
  --shadow-hi: 0 2px 4px rgba(4,4,6,0.35), 0 28px 60px -28px rgba(0,0,0,0.75);
  --shadow-mtl: 0 1px 0 rgba(255,255,255,.42) inset, 0 -1px 0 rgba(0,0,0,.28) inset, 0 8px 20px -8px rgba(0,0,0,.55);

  --body-dk:   #ECE8E0;
  --muted-dk:  #9C9689;
  --body-lt:   #33322E;
  --muted-lt:  #6B675E;

  --ok:        #2E7D53;
  --draft:     #B4541E;

  /* Space (4px system) */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  --wrap: 1200px;
  --wrap-narrow: 780px;
  --radius: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--body-lt);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 72;
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 132; }
h2 { font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96; }
h1 br { display: block; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 600; line-height: 1.3; }
p  { text-wrap: pretty; }
.lede { font-size: var(--text-lg); line-height: 1.55; color: var(--muted-lt); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dp);
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s4);
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--line-lt); max-width: 80px; }
.on-dark .eyebrow, .dark .eyebrow { color: var(--gold-br); }
.on-dark .eyebrow::after, .dark .eyebrow::after { background: var(--line-dk); }

.gold { color: var(--gold-dp); }
.dark .gold, .on-dark .gold { color: var(--gold-br); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); }
.narrow { max-width: var(--wrap-narrow); }
section { padding-block: var(--s9); }
@media (max-width: 700px) { section { padding-block: var(--s8); } }
.dark { background: var(--ink); color: var(--body-dk); }
.dark h1, .dark h2, .dark h3 { color: var(--cream); }
.dark .lede { color: var(--muted-dk); }
.tint { background: var(--cream); }
.grid { display: grid; gap: var(--s6); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.rule { height: 1px; background: var(--line-lt); border: 0; }
.dark .rule { background: var(--line-dk); }

/* ---------- Buttons ---------- */
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 0.95rem 1.65rem; white-space: nowrap;
  font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--radius);
  transition: all 0.25s var(--ease);
  white-space: nowrap;
}
.btn-gold { background: var(--gold); color: #14110A; }
.btn-gold:hover { background: var(--gold-br); transform: translateY(-1px); }
.btn-out { border: 1px solid var(--gold); color: var(--gold-dp); }
.dark .btn-out, .on-dark .btn-out { color: var(--gold-br); }
.btn-out:hover { background: var(--gold); color: #14110A; border-color: var(--gold); }
.btn-ghost { border: 1px solid var(--line-lt); color: var(--body-lt); }
.btn-ghost:hover { border-color: var(--char); }
.btn-lg { padding: 1.15rem 2.1rem; }
.btns { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,11,0.90);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-dk);
  color: var(--cream);
}
.hdr-in { display: flex; align-items: center; gap: var(--s4); min-height: 76px; }
.hdr nav { display: flex; gap: 1.35rem; margin-left: auto; }
.hdr nav a, .hdr-tel, .lang a, .hdr .btn { white-space: nowrap; }
.hdr nav a {
  font-size: var(--text-sm); font-weight: 500; color: var(--body-dk);
  padding-block: var(--s2); position: relative; transition: color 0.2s;
}
.hdr nav a:hover, .hdr nav a[aria-current="page"] { color: var(--gold-br); }
.hdr nav a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold);
}
.hdr-act { display: flex; align-items: center; gap: var(--s3); }
.hdr-tel {
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 600;
  color: var(--gold-br); letter-spacing: 0.02em;
}
.lang {
  display: flex; border: 1px solid var(--line-dk); border-radius: var(--radius); overflow: hidden;
}
.lang a {
  padding: 0.4rem 0.7rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em;
  color: var(--muted-dk); transition: all 0.2s;
}
.lang a[aria-current="true"] { background: var(--gold); color: #14110A; }
.lang a:not([aria-current="true"]):hover { color: var(--gold-br); }
.burger { display: none; padding: var(--s2); }
.burger svg { width: 26px; height: 26px; stroke: var(--cream); }
@media (max-width: 1150px) {
  .hdr nav { display: none; }
  .burger { display: block; margin-left: auto; }
  .hdr-act .hdr-tel { display: none; }
}
@media (max-width: 860px) {
  .hdr-act { display: none; }
  .hdr-in { min-height: 66px; gap: var(--s3); }
  .drawer { inset: 66px 0 0; }
  .draftbar { font-size: 0.68rem; padding: 0.5rem var(--s4); line-height: 1.45; }
}
/* mobile drawer */
.drawer {
  position: fixed; inset: 76px 0 0; z-index: 99; background: var(--ink);
  padding: var(--s6) var(--s5); display: none; flex-direction: column; gap: var(--s2);
  overflow-y: auto;
}
.drawer.open { display: flex; }
.drawer a {
  font-family: var(--font-display); font-size: var(--text-lg); color: var(--cream);
  padding-block: var(--s3); border-bottom: 1px solid var(--line-dk);
}
.drawer .btn { margin-top: var(--s4); }

/* ---------- Logo ---------- */
.logo { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.logo svg { width: 44px; height: 36px; flex-shrink: 0; }
.logo-txt { display: flex; flex-direction: column; line-height: 1; }
.logo-txt b {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
  letter-spacing: 0.13em; color: var(--cream); text-transform: uppercase;
}
.logo-sub { position: relative; display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; }
.logo-sub::before, .logo-sub::after {
  content: ""; display: block; width: 0.9em; height: 1px;
  background: currentColor; opacity: 0.55;
}
.logo-txt span {
  font-family: var(--font-body); font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.3em; color: var(--gold); text-transform: uppercase; margin-top: 4px;
}
@media (max-width: 420px) { .logo-txt b { font-size: 0.85rem; letter-spacing: 0.1em; } }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--ink); color: var(--cream); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; animation: slowzoom 26s ease-out forwards; }
@keyframes slowzoom { from { transform: scale(1.0); } to { transform: scale(1.07); } }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.72) 45%, rgba(10,10,11,0.96) 100%);
}
.hero-in { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem); max-width: 860px; }
.hero h1 { color: var(--cream); }
.hero h1 em { font-style: normal; color: var(--gold-br); }
.hero .lede { color: #D9D4C9; margin-top: var(--s5); max-width: 60ch; }
.hero .btns { margin-top: var(--s6); }
.hero-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5) var(--s6);
  margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line-dk);
}
@media (max-width: 820px) { .hero-facts { grid-template-columns: repeat(2, 1fr); } }
.hero-facts b {
  display: block; font-family: var(--font-display); font-size: var(--text-base);
  letter-spacing: 0.04em; color: var(--gold-br); font-weight: 600; margin-bottom: 4px;
}
.hero-facts span { font-size: var(--text-xs); color: var(--muted-dk); letter-spacing: 0.05em; }

/* ---------- Cards ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line-lt); border-radius: var(--radius);
  padding: var(--s6); transition: all 0.28s var(--ease);
}
.card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(10,10,11,0.07); }
.dark .card { background: var(--ink-2); border-color: var(--line-dk); }
.dark .card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
.card h3 { margin-bottom: var(--s3); }
.card p { font-size: var(--text-sm); color: var(--muted-lt); }
.dark .card p { color: var(--muted-dk); }
.card-ico { color: var(--gold-dp); margin-bottom: var(--s4); }
.dark .card-ico { color: var(--gold-br); }
.card-ico svg { width: 30px; height: 30px; }

/* buy list */
.buylist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 0; border-top: 1px solid var(--line-lt); }
.buylist div {
  padding: var(--s4) var(--s2); border-bottom: 1px solid var(--line-lt);
  display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--text-sm);
}
.dark .buylist, .dark .buylist div { border-color: var(--line-dk); }
.buylist svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; margin-top: 5px; }
.buylist b { font-weight: 600; }
.buylist p { font-size: var(--text-xs); color: var(--muted-lt); margin-top: 2px; }
.dark .buylist p { color: var(--muted-dk); }

/* steps */
.steps { counter-reset: st; }
.step { display: grid; grid-template-columns: 68px 1fr; gap: var(--s5); padding-block: var(--s6); border-bottom: 1px solid var(--line-lt); }
.dark .step { border-color: var(--line-dk); }
.step:last-child { border-bottom: 0; }
.step-n {
  counter-increment: st;
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600;
  color: var(--gold); line-height: 1;
}
.step-n::before { content: '0' counter(st); }
.step h3 { margin-bottom: var(--s2); }
.step p { color: var(--muted-lt); font-size: var(--text-sm); }
.dark .step p { color: var(--muted-dk); }
@media (max-width: 560px) { .step { grid-template-columns: 1fr; gap: var(--s2); } }

/* split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; }
.split.wide-img { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 900px) { .split, .split.wide-img { grid-template-columns: 1fr; gap: var(--s6); } }
.split figure { position: relative; }
.split img { border-radius: var(--radius); width: 100%; }
figcaption { font-size: var(--text-xs); color: var(--muted-lt); margin-top: var(--s3); letter-spacing: 0.04em; }
.dark figcaption { color: var(--muted-dk); }

/* gallery */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.gal a { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/3; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.gal a:hover img { transform: scale(1.05); }
.gal a:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 700px) { .gal { grid-template-columns: repeat(2,1fr); } .gal a:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; } }

/* trust strip */
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4) var(--s7); align-items: center; }
.trust div { text-align: center; }
.trust b { display: block; font-family: var(--font-display); font-size: var(--text-base); color: var(--gold-br); letter-spacing: 0.06em; }
.trust span { font-size: var(--text-xs); color: var(--muted-dk); }

/* FAQ */
details.faq { border-bottom: 1px solid var(--line-lt); }
.dark details.faq { border-color: var(--line-dk); }
details.faq summary {
  padding: var(--s5) var(--s6) var(--s5) 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--text-base); display: flex; justify-content: space-between; gap: var(--s4);
  transition: color 0.2s;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary:hover { color: var(--gold-dp); }
.dark details.faq summary:hover { color: var(--gold-br); }
details.faq summary::after { content: '+'; font-family: var(--font-display); font-size: var(--text-lg); color: var(--gold); line-height: 1; flex-shrink: 0; }
details.faq[open] summary::after { content: '–'; }
details.faq div { padding-bottom: var(--s5); color: var(--muted-lt); font-size: var(--text-sm); max-width: 68ch; }
.dark details.faq div { color: var(--muted-dk); }

/* form */
form.bh { display: grid; gap: var(--s4); }
.field { display: grid; gap: var(--s2); }
.field label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-lt); }
.dark .field label { color: var(--muted-dk); }
.field label.chk { text-transform: none; letter-spacing: 0; font-weight: normal; font-size: var(--text-sm); color: var(--muted-lt); display: flex; gap: 0.65rem; align-items: flex-start; line-height: 1.5; }
.field label.chk input[type="checkbox"] { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: 0.25rem; padding: 0; }
.field label.chk span { flex: 1 1 auto; min-width: 0; }
.field label.chk a { color: var(--gold-br); text-decoration: underline; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--text-sm); padding: 0.85rem 1rem;
  border: 1px solid var(--line-lt); border-radius: var(--radius);
  background: var(--paper); color: var(--body-lt); width: 100%;
}
.dark .field input, .dark .field select, .dark .field textarea {
  background: var(--ink-2); border-color: var(--line-dk); color: var(--body-dk);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--gold); }
.field textarea { resize: vertical; min-height: 110px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 560px) { .f2 { grid-template-columns: 1fr; } }
.formnote { font-size: var(--text-xs); color: var(--muted-lt); }
.dark .formnote { color: var(--muted-dk); }

/* contact rows */
.crow { display: flex; gap: var(--s4); padding-block: var(--s5); border-bottom: 1px solid var(--line-dk); align-items: flex-start; }
.crow:last-child { border-bottom: 0; }
.crow svg { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; margin-top: 4px; }
.crow b { display: block; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-dk); margin-bottom: var(--s1); }
.crow a, .crow p { font-size: var(--text-base); color: var(--cream); }
.crow a:hover { color: var(--gold-br); }

/* ---------- Footer ---------- */
footer { background: #070708; color: var(--muted-dk); padding-block: var(--s8) var(--s6); border-top: 1px solid var(--line-dk); }
.ft-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s6); }
@media (max-width: 900px) { .ft-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ft-top { grid-template-columns: 1fr; } }
footer h4 { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); margin-bottom: var(--s4); }
footer ul { list-style: none; padding: 0; display: grid; gap: var(--s2); }
footer a:hover { color: var(--gold-br); }
footer .fine { font-size: var(--text-xs); line-height: 1.7; }
.ft-bot { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line-dk); display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; font-size: var(--text-xs); }
.ft-bot nav { display: flex; gap: var(--s4); flex-wrap: wrap; }

/* ---------- Mobile action bar ---------- */
.mbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 95; display: none;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(10,10,11,0.97); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-dk);
}
.mbar a {
  padding: 0.85rem var(--s2); text-align: center; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-right: 1px solid var(--line-dk);
}
.mbar a:last-child { border-right: 0; }
.mbar a svg { width: 18px; height: 18px; color: var(--gold-br); }
.mbar a.pri { background: var(--gold); color: #14110A; }
.mbar a.pri svg { color: #14110A; }
@media (max-width: 860px) { .mbar { display: grid; } body { padding-bottom: 66px; } }

/* ---------- Draft banner ---------- */
.draftbar {
  background: var(--draft); color: #fff; font-size: var(--text-xs); text-align: center;
  padding: 0.6rem var(--s4); letter-spacing: 0.04em; line-height: 1.5;
}
.draftbar b { letter-spacing: 0.12em; text-transform: uppercase; }
.tbd {
  background: rgba(180,84,30,0.14); border-bottom: 1px dashed var(--draft);
  padding: 0 3px; border-radius: 2px;
}

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* ---------- Print ---------- */
@media print {
  .hdr, .mbar, .draftbar, .occbar, footer { display: none; }
  body { color: #000; background: #fff; }
}

/* .crow on light surfaces (directions block) */
.tint .crow, section:not(.dark) .crow { border-bottom-color: var(--line-lt); }
.tint .crow b, section:not(.dark) .crow b { color: var(--muted-lt); }
.tint .crow p, .tint .crow a,
section:not(.dark) .crow p, section:not(.dark) .crow a { color: var(--ink-2); }
.tint .crow a:hover, section:not(.dark) .crow a:hover { color: var(--gold-dp); }

/* service-area chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.chip {
  display: inline-block; padding: .45rem .9rem; border: 1px solid var(--line-lt);
  border-radius: 100px; font-size: var(--text-sm); color: var(--muted-lt);
  background: var(--paper); white-space: nowrap;
}
.chip:first-child { border-color: var(--gold); color: var(--gold-dp); font-weight: 600; }
.dark .chip { background: var(--ink-2); border-color: var(--line-dk); color: var(--muted-dk); }
.dark .chip:first-child { border-color: var(--gold); color: var(--gold-br); }

/* ---------- Open questions (draft only — delete before launch) ---------- */
:root { --qn: #2F5D8C; --qn-bg: rgba(47,93,140,0.10); }
.qn {
  background: var(--qn-bg); border-bottom: 1px dashed var(--qn);
  padding: 0 3px; border-radius: 2px; color: var(--qn);
}
.dark .qn { color: #8FB6DC; border-bottom-color: #8FB6DC; background: rgba(143,182,220,0.14); }
.qnote {
  display: block; margin-top: 1rem; padding: .7rem .95rem;
  border-left: 3px solid var(--qn); background: var(--qn-bg);
  font-size: var(--text-sm); line-height: 1.55; color: var(--qn);
  max-width: 70ch; border-radius: 0 3px 3px 0;
}
.dark .qnote { color: #A8C7E4; border-left-color: #8FB6DC; background: rgba(143,182,220,0.10); }
.qnote b { text-transform: uppercase; letter-spacing: .1em; font-size: var(--text-xs); display: block; margin-bottom: .3rem; }
.qbox { border: 1px solid var(--qn); border-left: 5px solid var(--qn); background: var(--qn-bg); padding: var(--s5); border-radius: 3px; }
.qbox h3 { color: var(--qn); font-family: var(--font-display); font-size: var(--text-xl); }
.qbox ol { margin: 1.25rem 0 0 1.15rem; padding: 0; }
.qbox li { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.6; margin-bottom: .7rem; }
.qbox li b { color: var(--qn); }

/* ---- logo lockup ------------------------------------------------------ */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo .lk { display: flex; align-items: center; gap: 0.72rem; }
.hdr .logo { padding-right: 1.4rem; }
.logo .bh-mk { height: 34px; width: auto; display: block; flex: none; }
.logo .lk-t { display: flex; flex-direction: column; gap: 0.18rem; }
.logo .lk-n {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: 0.075em; line-height: 1; color: var(--cream);
  text-transform: uppercase; white-space: nowrap;
}
.logo .lk-s {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.44rem;
  letter-spacing: 0.32em; line-height: 1; color: var(--gold-br);
  text-transform: uppercase; white-space: nowrap;
}
.logo .lk-s i { flex: 1 1 auto; height: 1px; background: var(--gold-dp); min-width: 8px; }

/* footer + portal: stacked and larger */
.logo-ft .lk { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.logo-ft .bh-mk { height: 46px; margin-left: 0.1rem; }
.logo-ft .lk-n { font-size: 1.34rem; letter-spacing: 0.09em; }
.logo-ft .lk-s { font-size: 0.5rem; }

/* light surfaces */
.light .logo .lk-n, .paper .logo .lk-n { color: var(--ink); }

@media (max-width: 900px) {
  .logo .bh-mk { height: 30px; }
  .logo .lk-n { font-size: 0.92rem; }
}
@media (max-width: 420px) {
  .logo .lk { gap: 0.5rem; }
  .logo .bh-mk { height: 27px; }
  .logo .lk-n { font-size: 0.84rem; letter-spacing: 0.06em; }
  .logo .lk-s { font-size: 0.4rem; letter-spacing: 0.26em; }
}

/* ---- stacked photo pair ---------------------------------------------- */
.stack2 { display: grid; gap: var(--s4); }
.stack2 figure { margin: 0; }
.stack2 img { width: 100%; display: block; border-radius: 3px; }
.stack2 figcaption {
  margin-top: 0.7rem; font-size: var(--text-xs); color: var(--muted-lt);
}
.dark .stack2 figcaption { color: var(--muted-dk); }

/* ---- showroom photo under the opening paragraph ---------------------- */
.showroom-sec { padding-block: var(--s7); }
.showroom { margin: 0; }
.showroom img {
  width: 100%; display: block; border-radius: 3px;
  border: 1px solid var(--line-lt);
  box-shadow: 0 24px 60px -28px rgba(10,10,11,.45);
}
.showroom figcaption {
  margin-top: 0.9rem; font-size: var(--text-xs); color: var(--muted-lt);
  letter-spacing: 0.01em;
}
.dark .showroom figcaption { color: var(--muted-dk); }

/* ---- immediate service block ---------------------------------------- */
.urgent-in {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s5);
  align-items: start; max-width: 74ch;
  border-left: 3px solid var(--gold); padding-left: var(--s5);
}
.urgent-ic {
  width: 46px; height: 46px; flex: none; color: var(--gold);
  display: grid; place-items: center;
  border: 1px solid var(--gold); border-radius: 50%;
}
.urgent-ic svg { width: 24px; height: 24px; }
@media (max-width: 640px) {
  .urgent-in { grid-template-columns: 1fr; gap: var(--s4); padding-left: var(--s4); }
}

/* ---- paired photo band ------------------------------------------------ */
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.photo-pair figure { margin: 0; }
.photo-pair img {
  width: 100%; height: 420px; object-fit: cover; display: block;
  border-radius: 3px; background: var(--ink-2);
}
.photo-pair figcaption {
  margin-top: 0.85rem; font-size: var(--text-sm); line-height: 1.5;
  color: var(--muted-lt); max-width: 46ch;
}
.dark .photo-pair figcaption, .tint.dark .photo-pair figcaption { color: var(--muted-dk); }
@media (max-width: 760px) {
  .photo-pair { grid-template-columns: 1fr; gap: var(--s6); }
  .photo-pair img { height: 300px; }
}
.photo-pair img[src$="xrf-vanta.jpg"]     { object-position: center 82%; }
.photo-pair img[src$="sigma-verifier.jpg"]{ object-position: center 70%; }
.photo-pair img[src$="silver-ingots.jpg"] { object-position: center 68%; }
.photo-pair img[src$="scrap-gold.jpg"]    { object-position: center 45%; }
@media (min-width: 761px) { .photo-pair img { height: 460px; } }

/* ---- Texas OCCC registration ------------------------------------------ */
.occbar {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  flex-wrap: wrap; background: var(--ink-2); border-bottom: 1px solid var(--line-dk);
  padding: 0.55rem var(--s4); font-size: var(--text-xs);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-dk);
}
.occbar .occ-b { display: inline-flex; color: var(--gold); }
.occbar .occ-b svg { width: 15px; height: 15px; display: block; }
.occbar b { color: var(--gold-br); font-weight: 600; letter-spacing: 0.1em; }
@media (max-width: 560px) { .occbar { font-size: 0.62rem; gap: 0.4rem; padding: 0.5rem var(--s3); } }

.occ-ft {
  margin-top: var(--s7); padding: var(--s5) var(--s6);
  border: 1px solid var(--line-dk); border-left: 3px solid var(--gold);
  border-radius: 3px; background: rgba(201,162,39,0.05); max-width: 80ch;
}
.occ-ft h4 {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-br); margin-bottom: 0.75rem;
}
.occ-ft h4 svg { width: 15px; height: 15px; }
.occ-ft .occ-nm { font-family: var(--font-display); font-size: var(--text-base); color: var(--cream); margin-bottom: 0.5rem; }
.occ-ft p { font-size: var(--text-sm); line-height: 1.65; color: var(--muted-dk); }

.occ-card {
  padding: var(--s6); border: 1px solid var(--gold-dp); border-radius: 3px;
  background: rgba(201,162,39,0.06);
}
.occ-card .occ-ic { color: var(--gold); margin-bottom: var(--s4); }
.occ-card .occ-ic svg { width: 30px; height: 30px; }
.occ-card .occ-k { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dk); }
.occ-card .occ-n { font-family: var(--font-display); font-size: var(--text-lg); color: var(--cream); margin-top: 0.5rem; }
.occ-card .occ-num {
  font-family: var(--font-display); font-size: var(--text-xl); color: var(--gold-br);
  letter-spacing: 0.06em; margin-top: 0.35rem;
}
.occ-card .occ-b2 { font-size: var(--text-sm); line-height: 1.65; color: var(--muted-dk); margin-top: var(--s4); }

.occ-notice {
  border: 1px solid var(--line-lt); border-left: 3px solid var(--gold-dp);
  border-radius: 3px; padding: var(--s6); background: var(--paper);
}
.dark .occ-notice { background: var(--ink-2); border-color: var(--line-dk); border-left-color: var(--gold); }
.occ-notice h3 {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-size: var(--text-base);
  letter-spacing: 0.05em; color: var(--ink);
}
.dark .occ-notice h3 { color: var(--cream); }
.occ-notice h3 svg { width: 18px; height: 18px; color: var(--gold-dp); }
.dark .occ-notice h3 svg { color: var(--gold); }
.occ-notice .occ-verb { margin-top: var(--s4); font-size: var(--text-sm); line-height: 1.75; color: var(--ink-2); }
.dark .occ-notice .occ-verb { color: var(--body-dk); }
.occ-notice .occ-tr {
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line-lt);
  font-size: var(--text-xs); line-height: 1.7; color: var(--muted-lt);
}
.grid.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
@media (max-width: 1000px) { .grid.g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid.g4 { grid-template-columns: 1fr; } }
.hero-facts { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .hero-facts { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Rebuild — origin story, pull quotes, hours, parent company
   ========================================================================== */
.origin { background: var(--paper); }
.origin-in { align-items: center; gap: var(--s8); }
@media (min-width: 900px) { .origin-in { grid-template-columns: 0.85fr 1.15fr; } }

.founders img {
  width: 100%;
  border: 1px solid var(--line-lt);
  box-shadow: var(--shadow-lo);
}
.founders figcaption {
  margin-top: .75rem;
  font-size: var(--text-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-lt);
}

.pull {
  margin-top: 1.75rem;
  padding-left: 1.35rem;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 60;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--body-lt);
}
.pull-dk { color: var(--cream); border-left-color: var(--gold-br); }

.signoff {
  margin-top: 1.5rem;
  font-size: var(--text-sm);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted-lt);
}

.parent-band { border-top: 1px solid var(--line-lt); }
.sh-rows .crow b { color: var(--body-lt); }
.sh-rows .crow a { color: var(--gold-dp); border-bottom: 1px solid rgba(143,115,24,.35); }

/* Warmer depth on light cards */
.card { box-shadow: var(--shadow-lo); }
.dark .card, .hero-facts { box-shadow: none; }

/* Section rhythm — slightly tighter now that the home page carries the story */
section { padding-block: clamp(3.25rem, 5.5vw, 5rem); }
.origin { padding-block: clamp(3.25rem, 5.5vw, 5rem) clamp(2.5rem, 4vw, 3.5rem); }
.split > figure > img { box-shadow: var(--shadow-lo); }
.dark .split > figure > img, .hero-bg img { box-shadow: none; }

/* ==========================================================================
   TWO METAL — gloss treatment
   Gold and silver carry equal weight. Every metal surface gets a real ramp,
   an inset highlight at the top edge and a darker inset at the bottom, so it
   reads as a polished object rather than a flat colour fill.
   ========================================================================== */

.btn-gold {
  background: var(--gold-fx);
  color: #1B1305;
  box-shadow: var(--shadow-mtl);
  border: none;
  position: relative;
  overflow: hidden;
}
.btn-gold:hover { background: var(--gold-fx-h); transform: translateY(-1px); }
.btn-gold::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gold-sheen);
  transform: translateX(-120%);
  transition: transform .62s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.btn-gold:hover::after { transform: translateX(120%); }

.btn-silver {
  background: var(--slv-fx);
  color: #14181C;
  box-shadow: var(--shadow-mtl);
  border: none;
  position: relative;
  overflow: hidden;
}
.btn-silver:hover { background: var(--slv-fx-h); transform: translateY(-1px); }
.btn-silver::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gold-sheen);
  transform: translateX(-120%);
  transition: transform .62s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.btn-silver:hover::after { transform: translateX(120%); }
.btn-silver svg { color: #14181C; }

/* Metal text — used on the second headline line and on figures */
.mtl-gold {
  background: var(--gold-fx); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.mtl-slv {
  background: var(--slv-fx); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- Logo: the real lockup, at a size you can actually read ---------- */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.hdr .logo { padding-right: 1.5rem; }
.lk-img { height: 33px; width: auto; display: block; flex: none; }
.logo-ft .lk-stack { height: 88px; width: auto; display: block; }
@media (max-width: 1180px) { .lk-img { height: 30px; } }
@media (max-width: 820px)  { .lk-img { height: 29px; } }
@media (max-width: 420px)  { .lk-img { height: 25px; } }

/* ---------- Language: spelled out, elegant, no boxes ---------- */
.lang { display: inline-flex; align-items: baseline; gap: 0.55rem; border: none; background: none; padding: 0; }
.lang a {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 24;
  font-style: italic;
  font-size: 1.0625rem;
  letter-spacing: 0.012em;
  color: var(--muted-dk);
  background: none; padding: 0; border-radius: 0;
  transition: color .2s ease;
}
.lang a[aria-current="true"] {
  background: none; color: transparent;
  background-image: var(--gold-fx);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lang a:not([aria-current="true"]):hover { color: var(--slv-br); }
.lang-d { color: rgba(255,255,255,.20); font-size: 0.95rem; line-height: 1; }
.lang-dr a { font-size: 1.25rem; }

/* ---------- Registration: a thin centred band, not a slab ---------- */
.occbar {
  background: var(--ink);
  border-top: 1px solid var(--hair-dk);
  border-bottom: 1px solid var(--hair-dk);
  text-align: center;
  padding: 0.5rem 1rem;
  display: block;
}
.occ-in {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem; flex-wrap: wrap;
}
.occ-b { display: inline-flex; }
.occ-b svg { width: 13px; height: 13px; color: var(--gold-dp); }
.occ-tx {
  font-size: 0.6875rem; letter-spacing: 0.185em; text-transform: uppercase;
  color: var(--muted-dk);
}
.occ-sep { color: rgba(255,255,255,.22); font-size: 0.75rem; }
.occbar b, .occbar .tbd {
  font-size: 0.6875rem; letter-spacing: 0.185em; text-transform: uppercase;
}
@media (max-width: 560px) {
  .occ-tx { font-size: 0.625rem; letter-spacing: 0.14em; }
  .occbar b, .occbar .tbd { font-size: 0.625rem; letter-spacing: 0.14em; }
}

/* ---------- Photo captions: centred, quieter, properly set ---------- */
figure > figcaption, .fig figcaption, .cap {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: var(--muted-lt);
  text-align: center;
  margin-top: 0.85rem;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.dk figure > figcaption, .dk .cap, section.dk figcaption { color: var(--muted-dk); }

/* ---------- Header fit: everything on one line at every desktop width ---------- */
.hdr nav { gap: 1.05rem; }
.hdr nav a { font-size: 0.9rem; }
.hdr-act { gap: 0.55rem; }
.hdr .btn { padding: 0.8rem 1.1rem; font-size: 0.7rem; letter-spacing: 0.1em; gap: 0.45rem; }
.hdr .btn svg { width: 15px; height: 15px; }
.hdr .lang a { font-size: 1rem; }
.hdr .logo { padding-right: 1.1rem; }
@media (max-width: 1340px) {
  .hdr nav { gap: 0.85rem; }
  .hdr nav a { font-size: 0.85rem; }
  .hdr .btn-silver span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hdr .btn-silver { padding: 0.8rem 0.85rem; }
}
@media (max-width: 1150px) {
  .hdr .lang a { font-size: 0.9375rem; }
  .hdr nav a { font-size: 0.8125rem; }
}

/* Outline button for dark surfaces */
.btn-outdk { border: 1px solid rgba(232,197,92,.45); color: var(--gold-br); background: transparent; }
.btn-outdk:hover { border-color: var(--gold-br); background: rgba(232,197,92,.09); transform: translateY(-1px); }
.hero .btns { gap: 0.65rem; }

/* Metal text needs a brighter ramp than metal buttons — text has no surface to
   catch light, so the dark stop has to sit much higher or it reads as mud. */
.mtl-gold { background-image: linear-gradient(158deg, #FFF6D2 0%, #F0D383 22%, #E4BC4E 46%, #C79A2A 68%, #EBCE72 86%, #FFF8DC 100%); }
.mtl-slv  { background-image: linear-gradient(158deg, #FFFFFF 0%, #E6EBF0 22%, #CBD4DC 46%, #A7B1BB 68%, #DCE3E9 86%, #FFFFFF 100%); }

/* Tighten the header earlier so the language switch never clips */
@media (max-width: 1520px) {
  .hdr nav { gap: 0.85rem; }
  .hdr nav a { font-size: 0.85rem; }
  .hdr .btn-silver span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hdr .btn-silver { padding: 0.8rem 0.85rem; }
  .hdr .btn-call { padding: 0.8rem 0.95rem; }
  .hdr .logo { padding-right: 0.85rem; }
  .lk-img { height: 39px; }
}
@media (max-width: 1290px) {
  .hdr .lang a { font-size: 0.9375rem; }
  .hdr nav a { font-size: 0.8125rem; }
  .hdr nav { gap: 0.7rem; }
  .lk-img { height: 36px; }
}

/* There is room for the Text Us label down to tablet width — put it back. */
@media (min-width: 1241px) {
  .hdr .btn-silver span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .hdr .btn-silver { padding: 0.8rem 1rem; }
}

/* ---------- Origin: the founder portrait above the two-of-them frame ---------- */
.or-ph { display: flex; flex-direction: column; gap: 2.25rem; }
.or-ph .por { margin: 0; }
.or-ph .por img {
  width: 100%; height: auto; display: block; border-radius: 3px;
  box-shadow: var(--shadow-hi);
  border: 1px solid var(--slv-line);
}
.or-ph .por figcaption {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 24;
  font-style: italic;
  font-size: 1.0625rem;
  letter-spacing: 0.008em;
  color: var(--muted-lt);
  text-align: center;
  margin-top: 1rem;
}
.or-ph .founders { margin: 0; }
@media (max-width: 900px) { .or-ph { max-width: 520px; margin-inline: auto; } }

/* Placeholder frame — orange dashed, obviously not artwork */
.ph-frame {
  border: 2px dashed var(--draft);
  border-radius: 3px;
  background: var(--ink-2);
  padding: 3.25rem 1.75rem 2.5rem;
  text-align: center;
  aspect-ratio: 4 / 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem;
}
.ph-fig { width: 108px; height: auto; fill: rgba(255,255,255,.09); }
.ph-k {
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--draft); margin: 0.5rem 0 0;
}
.ph-n {
  font-family: var(--font-display);
  font-size: 1.25rem; color: var(--cream); margin: 0;
}
.ph-b {
  font-size: 0.8125rem; line-height: 1.6; color: var(--muted-dk);
  max-width: 34ch; margin: 0.35rem auto 0;
}
.founders figcaption {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 24;
  font-style: italic;
  font-size: 1.0625rem;
  letter-spacing: 0.008em;
  text-transform: none;
  color: var(--muted-lt);
  text-align: center;
  margin-top: 1rem;
}

/* ---------- Map ---------- */
.mapwrap {
  margin-top: 3rem;
  border: 1px solid var(--line-lt);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--shadow-lo);
  background: var(--ink-2);
}
.mapwrap iframe { display: block; width: 100%; height: 420px; border: 0; }
@media (max-width: 720px) { .mapwrap iframe { height: 320px; } }
.mapcta {
  margin-top: 1.35rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.mapnote { font-size: var(--text-sm); color: var(--muted-lt); }

/* Mobile action bar picks up the same two-metal treatment */
.mbar a:last-child { background: var(--gold-fx); color: #1B1305; }
.mbar a:nth-child(2) { color: var(--slv-br); }

/* ==========================================================================
   CENTERED HEADER — the mark is the point
   Two rows. Row one is symmetrical: language left, lockup dead centre at a
   size you can actually read across a room, actions right. Row two is the
   navigation, centred under it, on its own hairline.
   ========================================================================== */

.hdr-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s4);
  min-height: 108px;
  padding-block: 0.9rem;
}
.hdr-side { display: flex; align-items: center; }
.hdr-l { justify-content: flex-start; }
.hdr-r { justify-content: flex-end; gap: 0.6rem; }

.hdr .logo { padding: 0; justify-self: center; }
.hdr .lk-img { height: 54px; }

.hdr-nav { border-top: 1px solid var(--hair-dk); }
.hdr-nav .wrap { display: flex; justify-content: center; }
.hdr-nav nav {
  display: flex;
  gap: 2.1rem;
  margin: 0;
  padding-block: 0.85rem;
  flex-wrap: wrap;
  justify-content: center;
}
.hdr-nav nav a {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hdr-nav nav a[aria-current="page"]::after { bottom: -0.35rem; }

/* Buttons in the centred header can breathe again */
.hdr .btn { padding: 0.85rem 1.25rem; font-size: 0.7rem; letter-spacing: 0.11em; }
.hdr .btn svg { width: 16px; height: 16px; }
.hdr .lang a { font-size: 1.0625rem; }

@media (max-width: 1180px) {
  .hdr .lk-img { height: 48px; }
  .hdr-nav nav { gap: 1.5rem; }
  .hdr-nav nav a { font-size: 0.72rem; letter-spacing: 0.13em; }
}
@media (max-width: 980px) {
  .hdr .lk-img { height: 43px; }
  .hdr-r .btn-silver span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hdr-r .btn-silver { padding: 0.85rem 0.95rem; }
}

/* Mobile: lockup centred, burger right, nav in the drawer */
@media (max-width: 820px) {
  .hdr-top { grid-template-columns: 1fr auto 1fr; min-height: 84px; }
  .hdr-l, .hdr-r { display: none; }
  .hdr .lk-img { height: 37px; }
  .hdr-nav { display: none; }
  .hdr .burger { grid-column: 3; justify-self: end; }
}
@media (max-width: 400px) { .hdr .lk-img { height: 32px; } }

/* Mobile: hold the three column grid so the lockup stays dead centre */
@media (max-width: 820px) {
  .hdr-l, .hdr-r { display: flex; visibility: hidden; width: 34px; }
  .hdr .logo { grid-column: 2; }
  .hdr .burger { grid-column: 3; justify-self: end; margin-left: -34px; }
  .occbar .occ-in { flex-wrap: wrap; justify-content: center; row-gap: .2rem; }
}

@media (max-width: 820px) {
  .hdr-r { display: none; }
  .hdr .burger { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
}

@media (max-width: 820px) { .occ-sep { display: none; } }

/* ==========================================================================
   HEADER, CORRECTED
   The old stylesheet swapped the nav for a menu button at 1150px. The new
   centred nav sits on its own row and fits comfortably down to 820px, so the
   button has no business appearing above that — it was showing alongside the
   nav and pushing an empty row between the lockup and the links.
   ========================================================================== */

.hdr .burger { display: none; }
.hdr-nav { display: block; }

@media (max-width: 820px) {
  .hdr .burger { display: block; grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
  .hdr-nav { display: none; }
}

/* Tighten the lockup to the nav hairline */
.hdr-top { min-height: 0; padding-block: 1.15rem 0.95rem; }
.hdr-nav nav { padding-block: 0.7rem; }

/* Keep the Text Us label — an unlabelled bubble reads as a broken button */
@media (max-width: 980px) {
  .hdr-r .btn-silver span { position: static; width: auto; height: auto; clip-path: none; }
  .hdr-r .btn-silver { padding: 0.8rem 1rem; }
  .hdr .btn { font-size: 0.66rem; letter-spacing: 0.08em; padding: 0.8rem 1rem; }
}

/* Two portraits stacked, matched sizing */
.or-ph .por + .por { margin-top: var(--s5); }

/* Text Us keeps its label at every width above the mobile bar */
.hdr .btn-silver span,
.hdr-r .btn-silver span {
  position: static; width: auto; height: auto;
  overflow: visible; clip-path: none;
}
.hdr .btn-silver { padding: 0.8rem 1rem; }

/* ---------- Footer refinement (v142) ---------- */
.ft-top { grid-template-columns: 1.5fr 0.85fr 1.35fr 0.7fr; column-gap: var(--s7); row-gap: var(--s6); align-items: start; }
.ft-visit .ft-addr { margin: 0 0 0.7rem; }
.ft-hrs { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; row-gap: 0.28rem; margin: 0 0 0.8rem; }
.ft-hrs dt { color: var(--muted-dk); opacity: 0.72; white-space: nowrap; }
.ft-hrs dd { margin: 0; color: var(--cream); white-space: nowrap; }
.ft-links { margin: 0; line-height: 2; }
.ft-links a { color: var(--cream); }
.ft-links a:last-child { color: var(--gold-br); }
.ft-bot .ft-key { opacity: 0.55; }
.ft-bot .ft-key:hover { opacity: 1; }
@media (max-width: 900px) {
  .ft-top { grid-template-columns: 1fr 1fr; column-gap: var(--s6); }
  .ft-top > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .ft-top { grid-template-columns: 1fr; } }
.occ-ft { max-width: none; }
.ft-disc { margin-top: var(--s6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
.ft-disc p { margin: 0; opacity: 0.78; }
@media (max-width: 780px) { .ft-disc { grid-template-columns: 1fr; gap: var(--s4); } }

/* ---------- Registration number: confirmed, not a placeholder (v143) ---------- */
.occbar .occ-no {
  font-size: 0.6875rem; letter-spacing: 0.185em; text-transform: uppercase;
  color: var(--gold-br); font-weight: 600;
}
@media (max-width: 560px) { .occbar .occ-no { font-size: 0.625rem; letter-spacing: 0.14em; } }

/* ---------- Hero sits higher under the registration bar (v143) ---------- */
.hero-in { padding-block: clamp(1.5rem, 4vw, 4.5rem) clamp(3.5rem, 8vw, 6.5rem); }
.hero { padding-block-start: clamp(1rem, 2.5vw, 2rem); }

/* ---------- Header: lockup dead centre in the bar, not centred in the leftover
   space. The old 1fr auto 1fr grid let the two call buttons push the right track
   past 1fr, which dragged the lockup left. Take it out of flow and pin it. (v145) */
@media (min-width: 821px) {
  .hdr-top { position: relative; grid-template-columns: 1fr 1fr; }
  .hdr-l { grid-column: 1; }
  .hdr-r { grid-column: 2; }
  .hdr-top > .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
}

/* ---------- Origin: the two portraits sit side by side instead of stacked (v145)
   Stacked, the photo column ran 1420px against 591px of text, so centring the
   text left ~415px of dead space above it. Side by side the two columns are
   close in height, the text sits where it belongs, and both men print at exactly
   the same size in matching 4:5 frames. */
@media (min-width: 900px) {
  .or-ph { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .or-ph .por + .por { margin-top: 0; }
  .or-ph .por img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }
  .or-ph .por figcaption { font-size: 1rem; margin-top: 0.7rem; }
  .origin-in { grid-template-columns: 1fr 1fr; align-items: center; }
}
@media (min-width: 900px) {
  .origin-in { grid-template-columns: 1.08fr 1fr; }
  .or-ph { gap: 1.25rem; }
}

/* Portrait pair holds its two-up shape on phones too, so the section does not
   turn into two full-screen headshots the reader has to scroll past. */
@media (max-width: 899px) {
  .or-ph { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 520px; margin-inline: auto; }
  .or-ph .por + .por { margin-top: 0; }
  .or-ph .por img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }
  .or-ph .por figcaption { font-size: 0.9375rem; margin-top: 0.6rem; }
}

/* ---------- The Model T out front (v146) ---------- */
.truck .tk-head { max-width: 40ch; }
.truck .tk-fig { margin: 2.5rem 0 0; max-width: 1100px; margin-inline: auto; }
.truck .tk-fig img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--gold-dim);
}
.truck .tk-fig figcaption {
  margin-top: 0.9rem; text-align: center;
  font-size: var(--text-sm); color: var(--muted-dk);
}
.truck .tk-copy {
  margin-top: 2.75rem; max-width: 1100px; margin-inline: auto;
  columns: 2; column-gap: var(--s7);
}
.truck .tk-copy p {
  font-size: var(--text-base); line-height: 1.75; color: var(--muted-dk);
  margin: 0 0 1.1rem; break-inside: avoid;
}
.truck .tk-copy p:last-child { margin-bottom: 0; }
@media (max-width: 820px) {
  .truck .tk-copy { columns: 1; margin-top: 2rem; }
  .truck .tk-fig { margin-top: 1.75rem; }
}

/* Four-up action bar on phones: Call, Text, Directions, Book */
.mbar { grid-template-columns: repeat(4, 1fr); }
.mbar a { font-size: 0.5625rem; letter-spacing: 0.04em; padding-inline: 0.25rem; }
.mbar a svg { width: 17px; height: 17px; }
@media (max-width: 360px) { .mbar a { font-size: 0.5rem; letter-spacing: 0.02em; } }

/* Balance the four hero actions two over two (v147) */
@media (min-width: 861px) {
  .hero .btns { max-width: 760px; }
}
/* Three even columns of truck copy instead of an uneven two */
@media (min-width: 900px) {
  .truck .tk-copy {
    columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6);
  }
  .truck .tk-copy p { margin-bottom: 0; }
}

/* v148 — origin section rebuilt as a full-width three-across portrait row.
   Tommy Sr., Tommy Jr. and Jefferson no longer fit in the old half-width
   column at a size where you can see a face, so the story stacks: heading,
   the three portraits across the page, then the body copy. */
.or-head { max-width: 30ch; }
.or-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin: 2.5rem 0 2.75rem;
}
.or-trio .por { margin: 0; }
.or-trio .por img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 3px;
  box-shadow: var(--shadow-hi);
  border: 1px solid var(--slv-line);
}
.or-trio .por figcaption {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 24;
  font-style: italic;
  font-size: 1.0625rem;
  letter-spacing: 0.008em;
  color: var(--muted-lt);
  text-align: center;
  margin-top: 0.85rem;
}
.or-body { max-width: 64ch; }

@media (max-width: 899px) {
  .or-head { max-width: none; }
  .or-trio { gap: 0.85rem; margin: 2rem 0 2.25rem; }
  .or-trio .por figcaption {
    font-size: 0.8125rem; margin-top: 0.55rem;
    min-height: 2.6em; line-height: 1.3;
  }
}
@media (max-width: 520px) {
  .or-trio { gap: 0.6rem; }
  .or-trio .por figcaption { font-size: 0.75rem; letter-spacing: 0; }
}

/* v149 — lineup is Mike, Jefferson and Tommy Jr. across the top, Tommy Sr.
   centered underneath. The solo row reuses the same three-column grid so the
   frame below lines up exactly with the middle frame above it. */
.or-solo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin: 0 0 2.75rem;
}
.or-solo .por { margin: 0; grid-column: 2; }
.or-solo .por img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 3px;
  box-shadow: var(--shadow-hi);
  border: 1px solid var(--slv-line);
}
.or-solo .por figcaption {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 24;
  font-style: italic;
  font-size: 1.0625rem;
  letter-spacing: 0.008em;
  color: var(--muted-lt);
  text-align: center;
  margin-top: 0.85rem;
}
.or-trio { margin-bottom: 1.6rem; }
/* placeholder body copy inside the dashed frame */
.ph-b {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-lt);
  margin: 0.35rem 0 0;
  max-width: 26ch;
}
.or-trio .ph-frame { padding: 1.5rem 1.1rem; }
.or-trio .ph-n { font-size: 1.5rem; }

@media (max-width: 899px) {
  .or-solo { gap: 0.85rem; margin-bottom: 2.25rem; }
  .or-trio { margin-bottom: 0.85rem; }
  .or-solo .por figcaption {
    font-size: 0.8125rem; margin-top: 0.55rem;
    min-height: 2.6em; line-height: 1.3;
  }
  .or-trio .ph-frame { padding: 0.85rem 0.5rem; gap: 0.35rem; }
  .or-trio .ph-n { font-size: 0.9375rem; }
  .or-trio .ph-k { font-size: 0.5rem; letter-spacing: 0.12em; }
  .ph-b { display: none; }
}
@media (max-width: 520px) {
  .or-solo { gap: 0.6rem; }
  .or-solo .por figcaption { font-size: 0.75rem; letter-spacing: 0; }
}

/* v150 — Mike is out. Jefferson and Tommy Jr. run two across the top and
   Tommy Sr. sits centered underneath at the same frame width. The block is
   held to 880px so two frames do not blow up to half the page each. */
.or-trio,
.or-solo {
  grid-template-columns: 1fr 1fr;
  max-width: 880px;
  margin-inline: auto;
}
.or-solo .por {
  grid-column: 1 / -1;
  width: calc(50% - 0.8rem);
  margin-inline: auto;
}
@media (max-width: 899px) {
  .or-trio,
  .or-solo { max-width: 520px; }
  .or-solo .por { width: calc(50% - 0.425rem); }
}

/* v151 — origin section rebuilt on the site's standard two-column split so it
   reads like every other page: story on the left, portraits stacked on the
   right. Two on top, Sr. centered underneath at the same frame width. */
.or-split { align-items: center; }
.or-ph3 { display: grid; gap: var(--s4); }
.or-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.or-row.one .por { grid-column: 1 / -1; width: calc(50% - (var(--s3) / 2)); margin-inline: auto; }
.or-ph3 .por { margin: 0; }
.or-ph3 .por img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(20, 16, 10, 0.14);
}
.or-ph3 .por figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  margin-top: 0.55rem;
  text-align: center;
}
.or-txt .pull { margin-top: var(--s5); }
@media (max-width: 900px) {
  .or-ph3 { max-width: 520px; margin: 0 auto; }
}