/* ============================================================
   Brighton Monuments — core design system
   Limestone ground · spruce ink · bronze accent · arch motif
   ============================================================ */

:root {
  --stone-25: #FBFAF6;
  --stone-50: #F4F3ED;
  --stone-100: #EBE9E0;
  --stone-200: #DEDACC;
  --hairline: #D8D4C6;
  --ink: #232F28;
  --ink-soft: #46524A;
  --ink-mute: #6E7970;
  --bronze: #96713D;
  --bronze-deep: #7B5B2F;
  --bronze-pale: #C8B18A;
  --moss: #43594E;
  --granite: #5F6A72;
  --blush: #C2A49E;
  --footer-ink: #1C2620;
  --serif: 'Marcellus', 'Palatino Linotype', 'Times New Roman', serif;
  --serif-i: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Mulish', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --shadow-soft: 0 18px 44px -18px rgba(35, 47, 40, 0.28);
  --shadow-lift: 0 26px 54px -20px rgba(35, 47, 40, 0.38);
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--stone-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bronze-deep); text-decoration: none; }
a:hover { color: var(--bronze); }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.18; margin: 0 0 0.5em; text-wrap: balance; }
p { margin: 0 0 1em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 18px; z-index: 300; }
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: var(--bronze);
  color: #FDFCF8;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 30px 14px;
  border-radius: 2px;
  border: 1px solid var(--bronze);
  transition: background 0.35s var(--ease-out), color 0.35s, box-shadow 0.35s, transform 0.35s;
}
.btn:hover { background: var(--bronze-deep); border-color: var(--bronze-deep); color: #FDFCF8; box-shadow: 0 10px 26px -10px rgba(123, 91, 47, 0.55); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(35, 47, 40, 0.4); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--stone-25); box-shadow: none; }
.btn-light { background: rgba(253, 252, 248, 0.94); color: var(--ink); border-color: transparent; }
.btn-light:hover { background: #fff; color: var(--ink); }

/* ---------- top strip + nav ---------- */
.topstrip {
  background: var(--footer-ink);
  color: #C9C4B2;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 7px 16px;
  position: relative;
  z-index: 60;
}
.topstrip a { color: var(--bronze-pale); }
.topstrip a:hover { color: #E4D3B4; }
.topstrip-dot { margin: 0 10px; opacity: 0.6; }

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 246, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  transition: background 0.4s, box-shadow 0.4s, border-color 0.4s;
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-word {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.brand-word em { font-style: normal; color: var(--bronze); margin-left: 7px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links > a, .drop-toggle {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 6px 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-links > a::after, .drop-toggle::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--bronze);
  transition: right 0.35s var(--ease-out);
}
.nav-links > a:hover, .drop-toggle:hover { color: var(--ink); }
.nav-links > a:hover::after, .drop-toggle:hover::after,
.nav-links > a[aria-current]::after, .active-trail .drop-toggle::after { right: 0; }
.btn-nav { padding: 10px 16px 9px; font-size: 11px; letter-spacing: 0.1em; white-space: nowrap; }
.btn-nav::after { display: none; }

/* dropdown */
.dropdown { position: relative; }
.drop-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #FDFCF9;
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--bronze);
  min-width: 316px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s;
  box-shadow: var(--shadow-soft);
  z-index: 90;
}
.dropdown:hover .drop-menu, .dropdown:focus-within .drop-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.drop-menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 3px;
  color: var(--ink);
  line-height: 1.35;
  transition: background 0.2s;
}
.drop-menu a span { font-family: var(--serif); font-size: 16px; letter-spacing: 0.04em; display: block; }
.drop-menu a small { color: var(--ink-mute); font-size: 12.5px; }
.drop-menu a:hover { background: var(--stone-100); }
.drop-all {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bronze-deep) !important;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 6px;
}

/* overlay nav (home heroes) */
.nav-overlay { position: fixed; left: 0; right: 0; top: auto; background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-overlay.scrolled { top: 0; }
.nav-overlay .brand-word, .nav-overlay .nav-links > a, .nav-overlay .drop-toggle { color: #F5F3EC; text-shadow: 0 1px 14px rgba(10, 16, 12, 0.45); }
.nav-overlay .brand-word em { color: var(--bronze-pale); }
.nav-overlay .nav-burger span { background: #F5F3EC; }
.nav-overlay.scrolled {
  background: rgba(251, 250, 246, 0.94);
  border-bottom-color: var(--hairline);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -18px rgba(35, 47, 40, 0.35);
}
.nav-overlay.scrolled .brand-word, .nav-overlay.scrolled .nav-links > a, .nav-overlay.scrolled .drop-toggle { color: var(--ink-soft); text-shadow: none; }
.nav-overlay.scrolled .brand-word { color: var(--ink); }
.nav-overlay.scrolled .brand-word em { color: var(--bronze); }
.nav-overlay.scrolled .nav-burger span { background: var(--ink); }

/* burger + mobile menu */
.nav-burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-burger span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform 0.3s, opacity 0.3s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(27, 35, 30, 0.97);
  padding: 120px 36px 40px;
  overflow-y: auto;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; max-width: 420px; margin: 0 auto; }
.mobile-menu a {
  color: var(--stone-50);
  font-family: var(--serif);
  font-size: 26px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(244, 243, 237, 0.12);
}
.mobile-menu a.mm-sub { font-family: var(--sans); font-size: 15px; padding-left: 18px; color: #B9BFB4; border-bottom: 0; }
.mobile-menu .btn { margin-top: 26px; text-align: center; border-bottom: 0; font-family: var(--sans); font-size: 13px; }

/* ---------- section scaffolding ---------- */
.section { padding: 96px 0; }
.section-tight { padding: 66px 0; }
.sec-head { max-width: 660px; margin-bottom: 54px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 14px;
}
.sec-title { font-size: clamp(30px, 4vw, 42px); color: var(--ink); }
.sec-lede { color: var(--ink-soft); font-size: 17.5px; max-width: 58ch; }
.sec-head.center .sec-lede { margin-left: auto; margin-right: auto; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--bronze); margin: 18px 0 20px; }
.sec-head:not(.center) .ornament { justify-content: flex-start; }
.ornament span { display: block; width: 54px; height: 1px; background: linear-gradient(90deg, transparent, var(--bronze-pale)); }
.ornament span:last-child { background: linear-gradient(90deg, var(--bronze-pale), transparent); }

/* ---------- inner page hero ---------- */
.page-hero {
  position: relative;
  padding: 92px 0 74px;
  background:
    radial-gradient(60% 130% at 50% -30%, rgba(150, 113, 61, 0.10), transparent 70%),
    linear-gradient(180deg, var(--stone-100), var(--stone-50));
  border-bottom: 1px solid var(--hairline);
  text-align: center;
}
.page-hero h1 { font-size: clamp(34px, 4.6vw, 52px); letter-spacing: 0.02em; }
.page-hero .eyebrow { margin-bottom: 10px; }
.page-hero .lede { max-width: 62ch; margin: 0 auto; color: var(--ink-soft); font-size: 17.5px; }
.breadcrumb { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 26px; }
.breadcrumb a { color: var(--ink-mute); }
.breadcrumb a:hover { color: var(--bronze); }

/* ---------- category (arch) cards ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.cat-card {
  display: block;
  background: transparent;
  text-align: center;
  transition: transform 0.5s var(--ease-out);
}
.cat-card .arch {
  position: relative;
  border-radius: 999px 999px 10px 10px;
  overflow: hidden;
  aspect-ratio: 4 / 4.6;
  border: 1px solid var(--hairline);
  background: var(--stone-100);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  transition: box-shadow 0.5s var(--ease-out);
}
.cat-card .arch::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(150, 113, 61, 0.35);
  border-radius: 999px 999px 6px 6px;
  pointer-events: none;
}
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.cat-card:hover { transform: translateY(-6px); }
.cat-card:hover .arch { box-shadow: var(--shadow-lift); }
.cat-card:hover img { transform: scale(1.055); }
.cat-card h3 { font-size: 22px; margin: 20px 0 2px; color: var(--ink); letter-spacing: 0.03em; }
.cat-card .cat-note { color: var(--ink-mute); font-size: 14.5px; margin: 0; }
.cat-card .cat-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  border-bottom: 1px solid var(--bronze-pale);
  padding-bottom: 2px;
}

/* ---------- product cards ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.prod-card {
  background: #FDFCF9;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.prod-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.prod-card { scroll-margin-top: 130px; }
.prod-card:target { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(150, 113, 61, 0.25), var(--shadow-lift); }
.prod-media { position: relative; overflow: hidden; border-bottom: 1px solid var(--hairline); }
.prod-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.prod-card:hover .prod-media img { transform: scale(1.045); }
.prod-id {
  position: absolute; top: 12px; left: 12px;
  background: rgba(35, 47, 40, 0.82);
  color: #EDE9DC;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
}
.prod-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.prod-name { font-family: var(--serif); font-size: 21px; margin: 0; }
.prod-size { color: var(--ink-mute); font-size: 13.5px; margin: 0; }
.prod-mat { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); margin: 2px 0 0; }
.mat-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(35, 47, 40, 0.25); box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset; flex: none; }
.prod-links { margin-top: auto; padding-top: 14px; display: flex; gap: 18px; align-items: center; }
.prod-links a {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bronze-deep);
}
.prod-links a:hover { color: var(--bronze); }

/* ---------- granite swatch cards ---------- */
.swatch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.swatch-card {
  background: #FDFCF9;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.swatch-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.swatch-card img { width: 100%; aspect-ratio: 4 / 2.6; object-fit: cover; border-bottom: 1px solid var(--hairline); }
.swatch-body { padding: 18px 22px 20px; }
.swatch-body h3 { font-size: 20px; margin: 0 0 2px; }
.swatch-origin { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); margin: 0 0 8px; }
.swatch-note { color: var(--ink-soft); font-size: 14.5px; margin: 0; }

/* ---------- process / promise ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; counter-reset: step; }
.step { position: relative; padding-top: 6px; }
.step-num {
  font-family: var(--serif-i);
  font-style: italic;
  font-size: 54px;
  line-height: 1;
  color: var(--bronze-pale);
  display: block;
  margin-bottom: 10px;
}
.step h3 { font-size: 21px; margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: 15.5px; margin: 0; }

.promise {
  background: var(--footer-ink);
  color: #D8D5C6;
  position: relative;
  overflow: hidden;
}
.promise .sec-title, .promise h2 { color: #F2F0E6; }
.promise .quote {
  font-family: var(--serif-i);
  font-style: italic;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.5;
  color: #EFEBDD;
  max-width: 30ch;
  margin: 0 auto 18px;
  text-align: center;
  text-wrap: balance;
}
.promise .attribution { text-align: center; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze-pale); }

/* ---------- contact panel ---------- */
.contact-band { background: linear-gradient(180deg, var(--stone-50), var(--stone-100)); border-top: 1px solid var(--hairline); }
.contact-panel {
  background: #FDFCF9;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  padding: 54px 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 44px;
  align-items: center;
}
.contact-panel h2 { font-size: clamp(26px, 3vw, 34px); }
.contact-meta { display: grid; gap: 18px; }
.contact-meta .cm { display: flex; gap: 14px; align-items: flex-start; }
.contact-meta .cm svg { flex: none; margin-top: 3px; color: var(--bronze); }
.contact-meta .cm strong { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px; }
.contact-meta .cm a, .contact-meta .cm span { font-size: 16.5px; color: var(--ink); }
.contact-meta .cm a:hover { color: var(--bronze); }

/* ---------- footer ---------- */
.footer { background: var(--footer-ink); color: #A9B0A4; margin-top: 0; }
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 74px 28px 50px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr;
  gap: 48px;
}
.footer-mark { opacity: 0.95; margin-bottom: 16px; }
.footer-name { font-family: var(--serif); font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase; color: #EFEDE2; margin: 0 0 10px; }
.footer-tag { font-size: 14.5px; max-width: 34ch; }
.footer-h { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze-pale); margin: 4px 0 16px; }
.footer-col a { display: block; color: #B9BFB2; padding: 4px 0; font-size: 14.5px; }
.footer-col a:hover { color: #EFEDE2; }
.footer-line { font-size: 14.5px; margin: 0 0 10px; }
.footer-soft { color: #79826F; }
.footer-base {
  border-top: 1px solid rgba(244, 243, 237, 0.1);
  padding: 20px 28px;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #79826F;
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav-links { gap: 20px; }
  .brand-word { font-size: 18px; }
  .cat-grid, .prod-grid, .swatch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .contact-panel { grid-template-columns: 1fr; padding: 40px 30px; }
  .footer-inner { grid-template-columns: 1fr; gap: 34px; }
  .section { padding: 70px 0; }
}
@media (max-width: 620px) {
  .cat-grid, .prod-grid, .swatch-grid { grid-template-columns: 1fr; }
  .topstrip { font-size: 11.5px; }
  .container { padding: 0 20px; }
}

/* ---------- product lists: display cases (.vc) & handbooks (.hb) ---------- */
.vc-stack { display: grid; gap: 44px; }
.vc { display: grid; grid-template-columns: 390px 1fr; background: var(--stone-25); border: 1px solid var(--hairline); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-soft); }
.vc-left { background: linear-gradient(168deg, #2A3A31 0%, #1B2620 68%, #16201A 100%); padding: 30px 30px 26px; display: flex; flex-direction: column; text-align: center; color: #EFEDE2; }
.vc-img { border-radius: 16px; overflow: hidden; border: 1px solid rgba(244, 243, 237, 0.16); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.6); }
.vc-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity 0.18s ease; }
.vc-cap { margin: 12px 0 4px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze-pale); min-height: 16px; }
.vc-left h3 { font-family: var(--serif); font-size: 27px; letter-spacing: 0.03em; color: #F5F3EA; margin: 10px 0 4px; }
.vc-meta { font-size: 13.5px; color: #AEB5A6; margin: 0 0 18px; }
.vc-all { margin-top: auto; align-self: center; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze-pale); border-bottom: 1px solid rgba(200, 177, 138, 0.5); padding-bottom: 3px; }
.vc-all:hover { color: #EFE1C2; }
.vc-right { padding: 26px 30px 24px; }
.vc-hint { font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px 8px; }
.vc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; }
.vc-row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: 13px; color: var(--ink); transition: background 0.2s; min-width: 0; }
.vc-row:hover, .vc-row.on { background: var(--stone-100); }
.vc-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--stone-100); display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); transition: background 0.2s, color 0.2s; }
.vc-row:hover .vc-num, .vc-row.on .vc-num { background: var(--bronze); color: #FDFCF8; }
.vc-dot { flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset -3px -4px 6px rgba(0, 0, 0, 0.35), inset 2px 3px 5px rgba(255, 255, 255, 0.3); border: 1px solid rgba(35, 47, 40, 0.2); }
.vc-main { flex: 1; min-width: 0; }
.vc-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-family: var(--serif); font-size: 15.5px; line-height: 1.3; }
.vc-title > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-pill { flex: none; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; background: rgba(150, 113, 61, 0.13); color: var(--bronze-deep); padding: 3px 8px; border-radius: 999px; }
.vc-note { display: block; font-size: 12.5px; color: var(--ink-mute); margin-top: 1px; }
.vc-row:hover .vc-title, .vc-row.on .vc-title { color: var(--bronze-deep); }

.hb-stack { display: grid; gap: 46px; }
.hb { display: grid; grid-template-columns: 308px 1fr; gap: 30px; align-items: start; }
.hb-cover { position: relative; overflow: hidden; border-radius: 24px; padding: 34px 30px 154px; color: #FBFAF6; min-height: 420px; display: flex; flex-direction: column; background: linear-gradient(158deg, var(--ca) 0%, var(--cb) 78%); box-shadow: 0 24px 46px -22px rgba(35, 47, 40, 0.45); }
.hb-cover-img { position: absolute; left: 0; right: 0; bottom: -6px; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.hb-cover-img img { max-height: 150px; width: auto; max-width: 76%; filter: drop-shadow(0 12px 20px rgba(12, 18, 14, 0.45)); }
.hb-cover::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -9px; height: 40px; border-radius: 0 0 26px 26px; background: var(--cu); z-index: -1; filter: brightness(0.85); }
.hb-cover h3 { font-family: var(--serif); font-size: 30px; line-height: 1.15; letter-spacing: 0.02em; color: #FDFCF8; margin: 26px 0 8px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25); }
.hb-tag { font-size: 14.5px; color: rgba(253, 252, 248, 0.85); margin: 0 0 22px; }
.hb-ico { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: rgba(12, 18, 14, 0.42); display: flex; align-items: center; justify-content: center; color: #E8D5AB; }
.hb-chips { display: grid; gap: 9px; margin-bottom: 26px; }
.hb-chip { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(253, 252, 248, 0.92); }
.hb-chip i { font-style: normal; font-weight: 700; background: rgba(253, 252, 248, 0.18); border-radius: 999px; padding: 2px 10px; }
.hb-chip b { font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(253, 252, 248, 0.22); border-radius: 999px; padding: 3px 9px; }
.hb-open { position: relative; z-index: 1; margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #FDFCF8; border-bottom: 1px solid rgba(253, 252, 248, 0.5); align-self: flex-start; padding-bottom: 3px; }
.hb-open:hover { color: #F2E3BF; border-color: #F2E3BF; }
.hb-panel { background: var(--stone-25); border: 1px solid var(--hairline); border-radius: 24px; padding: 26px 30px 22px; box-shadow: 0 18px 40px -26px rgba(35, 47, 40, 0.35); }
.hb-lab { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px 8px; }
.hb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 26px; }
.hb-row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: 14px; color: var(--ink); transition: background 0.2s; min-width: 0; }
.hb-row:hover { background: var(--stone-100); }
.hb-thumb { flex: none; width: 56px; height: 42px; display: flex; align-items: flex-end; justify-content: center; }
.hb-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(35, 47, 40, 0.22)); }
.hb-row { align-items: center; }
.hb-main { flex: 1; min-width: 0; }
.hb-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-family: var(--serif); font-size: 15px; line-height: 1.3; }
.hb-title > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-pill { flex: none; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; background: rgba(150, 113, 61, 0.12); color: var(--bronze-deep); padding: 3px 8px; border-radius: 999px; }
.hb-note { display: block; font-size: 12px; color: var(--ink-mute); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-row:hover .hb-title { color: var(--bronze-deep); }
@media (max-width: 980px) {
  .vc { grid-template-columns: 1fr; }
  .vc-list { grid-template-columns: 1fr; }
  .hb { grid-template-columns: 1fr; }
  .hb-cover { min-height: 0; }
}
@media (max-width: 640px) { .hb-grid { grid-template-columns: 1fr; } }

/* ---------- the Lineup: icon tabs + filtered card rail ---------- */
.lu-strip { display: flex; gap: 34px; flex-wrap: wrap; }
.lu-strip-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; padding-bottom: 8px; border-bottom: 2px solid transparent; transition: color 0.25s, border-color 0.25s; }
.lu-strip-item:hover { color: var(--bronze-deep); }
.lu-strip-img { height: 46px; display: flex; align-items: flex-end; justify-content: center; transition: transform 0.3s var(--ease-out); filter: drop-shadow(0 3px 5px rgba(35, 47, 40, 0.18)); }
.lu-strip-item:hover .lu-strip-img { transform: translateY(-3px); }
.lu-strip-item.on { color: var(--ink); border-bottom-color: var(--bronze); }
.lu-strip-img img { max-height: 46px; width: auto; max-width: 88px; object-fit: contain; }
.lu-headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.lu-headrow h2 { font-size: clamp(30px, 4vw, 44px); margin: 0; }
.lu-headrow a { font-size: 14px; font-weight: 600; color: var(--bronze-deep); }
.lu-sub { color: var(--ink-mute); font-size: 14.5px; margin: 0 0 32px; }
.lu-railwrap { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; margin: 0 -28px; padding: 0 28px; }
.lu-railwrap::-webkit-scrollbar { display: none; }
.lu-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 318px; gap: 26px; align-items: start; margin-top: 26px; }
.lu-card { scroll-snap-align: start; text-align: center; background: transparent; }
.lu-card[hidden] { display: none; }
.lu-tile { border-radius: 20px; overflow: hidden; border: 1px solid var(--hairline); background: var(--stone-100); box-shadow: 0 14px 30px -20px rgba(35, 47, 40, 0.35); }
.lu-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity 0.18s ease; }
.lu-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin: 16px auto 14px; max-width: 260px; }
.lu-dot { width: 17px; height: 17px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.3), inset 1px 2px 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(35, 47, 40, 0.25); transition: transform 0.2s var(--ease-out), border-color 0.2s; }
.lu-dot:hover { transform: scale(1.25); }
.lu-dot.on { border-color: var(--bronze); transform: scale(1.2); }
.lu-card h3 { font-family: var(--serif); font-size: 23px; margin: 0 0 4px; }
.lu-blurb { color: var(--ink-soft); font-size: 14px; margin: 0 0 6px; }
.lu-mat { color: var(--ink-mute); font-size: 12.5px; margin: 0 auto 16px; max-width: 34ch; }
.lu-actions { display: flex; align-items: center; justify-content: center; gap: 16px; }
.lu-btn { padding: 11px 20px 10px; font-size: 11.5px; border-radius: 999px; }
.lu-link { font-size: 13.5px; font-weight: 600; color: var(--bronze-deep); }
.lu-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.lu-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--stone-25); color: var(--ink-soft); font-size: 17px; cursor: pointer; transition: background 0.25s, color 0.25s, transform 0.25s var(--ease-out); }
.lu-nav button:hover { background: var(--ink); color: var(--stone-25); transform: translateY(-2px); }
@media (max-width: 620px) { .lu-strip { gap: 18px; } .lu-rail { grid-auto-columns: 280px; } }

/* the nav CTA keeps its button colors regardless of link-color rules */
.nav .nav-links > a.btn-nav, .nav-overlay .nav-links > a.btn-nav,
.nav-overlay.scrolled .nav-links > a.btn-nav { color: #FDFCF8; text-shadow: none; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .reveal { opacity: 1; transform: none; }
}