/* ==========================================================================
   Verdict Certified Grading (VCG) — Shared Stylesheet
   Palette: near-black + gold accent + warm off-white (premium/certification feel)
   Placeholder brand direction — swap fonts/colors once a real brand guide exists.
   ========================================================================== */

:root {
  --vcg-black: #0b0c0e;
  --vcg-charcoal: #16181c;
  --vcg-charcoal-2: #1e2126;
  --vcg-gold: #c6a15b;
  --vcg-gold-light: #e0c589;
  --vcg-off-white: #f6f3ec;
  --vcg-gray-text: #a7abb3;
  --vcg-border: #2a2d33;
  --vcg-success: #4caf7d;
  --vcg-max-width: 1180px;
  --vcg-radius: 6px;
  --vcg-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--vcg-black);
  color: var(--vcg-off-white);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.15; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }

p { color: var(--vcg-gray-text); margin: 0 0 1em; }

a { color: var(--vcg-gold-light); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--vcg-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Top banner (placeholder notice) ---------- */
.build-banner {
  background: #3a2f10;
  color: var(--vcg-gold-light);
  text-align: center;
  font-size: 0.82rem;
  padding: 6px 12px;
  border-bottom: 1px solid var(--vcg-gold);
}

/* ---------- Header / Nav ---------- */
header.site-header {
  background: rgba(11, 12, 14, 0.96);
  border-bottom: 1px solid var(--vcg-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--vcg-max-width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  color: #fff;
  letter-spacing: 0.03em;
}

.brand .mark {
  width: 34px;
  height: 34px;
  border: 2px solid var(--vcg-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--vcg-gold);
  font-weight: 700;
  flex-shrink: 0;
}

.brand .brand-text small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--vcg-gray-text);
  text-transform: uppercase;
  margin-top: 2px;
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

nav.main-nav a {
  color: var(--vcg-off-white);
  font-size: 0.9rem;
  text-decoration: none;
}

nav.main-nav a:hover,
nav.main-nav a.active {
  color: var(--vcg-gold-light);
}

.nav-cta { display: flex; gap: 12px; align-items: center; }

.hamburger {
  display: none;
  background: none;
  border: 1px solid var(--vcg-border);
  color: #fff;
  padding: 8px 10px;
  border-radius: var(--vcg-radius);
  cursor: pointer;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--vcg-radius);
  font-size: 0.92rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-gold {
  background: linear-gradient(135deg, var(--vcg-gold-light), var(--vcg-gold));
  color: #1a1400;
}
.btn-gold:hover { background: var(--vcg-gold-light); }

.btn-outline {
  background: transparent;
  border-color: var(--vcg-border);
  color: var(--vcg-off-white);
}
.btn-outline:hover { border-color: var(--vcg-gold); color: var(--vcg-gold-light); }

.btn-sm { padding: 8px 16px; font-size: 0.82rem; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ---------- Hero ---------- */
.hero {
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--vcg-border);
  background:
    radial-gradient(ellipse at top right, rgba(198,161,91,0.10), transparent 55%),
    var(--vcg-black);
}

.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--vcg-gold);
  margin-bottom: 14px;
  font-weight: 600;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.hero-card {
  background: var(--vcg-charcoal);
  border: 1px solid var(--vcg-border);
  border-radius: 12px;
  padding: 28px;
  box-shadow: var(--vcg-shadow);
}

.slab-mock {
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, #1c1e23, #0f1013);
  border: 1px solid var(--vcg-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.slab-mock::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--vcg-gold);
  border-radius: 6px;
  opacity: 0.5;
}
.slab-label {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  text-align: center;
  color: var(--vcg-gold-light);
  font-family: 'Playfair Display', serif;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}
.slab-grade {
  font-size: 3.2rem;
  font-family: 'Playfair Display', serif;
  color: #fff;
}

/* ---------- Sections ---------- */
section { padding: 72px 0; }
section.tight { padding: 48px 0; }
section.alt { background: var(--vcg-charcoal); border-top: 1px solid var(--vcg-border); border-bottom: 1px solid var(--vcg-border); }

.section-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
.section-head p { font-size: 1.05rem; }

/* ---------- Trust strip ---------- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.trust-item {
  border: 1px solid var(--vcg-border);
  border-radius: var(--vcg-radius);
  padding: 20px;
  text-align: center;
  background: var(--vcg-charcoal);
}
.trust-item .num {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--vcg-gold-light);
  display: block;
  margin-bottom: 6px;
}
.trust-item span.label { font-size: 0.85rem; color: var(--vcg-gray-text); }

/* ---------- Cards / grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.card {
  background: var(--vcg-charcoal);
  border: 1px solid var(--vcg-border);
  border-radius: 10px;
  padding: 28px;
}
.card .icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--vcg-gold);
  color: var(--vcg-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 16px;
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--vcg-gold);
  color: var(--vcg-gold-light);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- Pricing table ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tier-card {
  border: 1px solid var(--vcg-border);
  border-radius: 12px;
  padding: 32px 26px;
  background: var(--vcg-charcoal);
  display: flex;
  flex-direction: column;
}
.tier-card.featured {
  border-color: var(--vcg-gold);
  background: linear-gradient(180deg, rgba(198,161,91,0.09), var(--vcg-charcoal));
  box-shadow: var(--vcg-shadow);
}
.tier-card .price {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  color: #fff;
  margin: 10px 0;
}
.tier-card .price small { font-size: 0.95rem; color: var(--vcg-gray-text); font-family: 'Inter', sans-serif; }
.tier-card ul { list-style: none; padding: 0; margin: 20px 0; flex: 1; }
.tier-card li {
  padding: 8px 0;
  border-bottom: 1px solid var(--vcg-border);
  font-size: 0.9rem;
  color: var(--vcg-gray-text);
}
.tier-card li:last-child { border-bottom: none; }
.placeholder-value { color: var(--vcg-gold-light); font-weight: 600; }
.placeholder-value::after { content: " *"; color: var(--vcg-gold); }

.footnote-flag {
  font-size: 0.82rem;
  color: var(--vcg-gray-text);
  border-left: 2px solid var(--vcg-gold);
  padding-left: 12px;
  margin-top: 32px;
}

/* ---------- Image placeholder (label examples, etc. — fill in once real photos exist) ---------- */
.image-placeholder {
  aspect-ratio: 3 / 2;
  border: 1px dashed var(--vcg-border);
  border-radius: var(--vcg-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vcg-gray-text);
  font-size: 0.82rem;
  text-align: center;
  margin-top: 18px;
  background: var(--vcg-black);
  padding: 16px;
}

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 22px; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.step .num-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--vcg-gold);
  color: var(--vcg-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
}

/* ---------- Table ---------- */
table.scale-table { width: 100%; border-collapse: collapse; margin: 20px 0 36px; }
table.scale-table th, table.scale-table td {
  border: 1px solid var(--vcg-border);
  padding: 12px 14px;
  text-align: left;
  font-size: 0.9rem;
  color: var(--vcg-gray-text);
}
table.scale-table th {
  background: var(--vcg-charcoal-2);
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}
table.scale-table td.grade-cell {
  color: var(--vcg-gold-light);
  font-weight: 700;
  font-family: 'Playfair Display', serif;
}

/* Wrap any wide table in this on mobile instead of letting it squish or overflow the page */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0 12px;
  border-radius: var(--vcg-radius);
}
.table-scroll table.scale-table {
  margin: 0;
  min-width: 680px;
}

/* ---------- Forms ---------- */
.form-card {
  background: var(--vcg-charcoal);
  border: 1px solid var(--vcg-border);
  border-radius: 12px;
  padding: 36px;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }

label {
  display: block;
  font-size: 0.85rem;
  color: var(--vcg-off-white);
  margin-bottom: 6px;
  font-weight: 600;
}
.help-text { font-size: 0.78rem; color: var(--vcg-gray-text); margin-top: 4px; }

input[type=text], input[type=email], input[type=tel], input[type=number],
select, textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--vcg-radius);
  border: 1px solid var(--vcg-border);
  background: var(--vcg-black);
  color: var(--vcg-off-white);
  font-family: inherit;
  font-size: 0.92rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--vcg-gold); }

fieldset { border: 1px solid var(--vcg-border); border-radius: var(--vcg-radius); padding: 18px; margin: 0; }
legend { padding: 0 8px; font-family: 'Playfair Display', serif; color: var(--vcg-gold-light); font-size: 1rem; }

.radio-row, .checkbox-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  color: var(--vcg-off-white); font-size: 0.9rem;
}
.radio-row input, .checkbox-row input { width: auto; }

.coverage-box {
  background: var(--vcg-black);
  border: 1px solid var(--vcg-gold);
  border-radius: var(--vcg-radius);
  padding: 18px 20px;
  margin: 20px 0;
}
.coverage-box p { margin-bottom: 8px; }

.order-summary {
  background: var(--vcg-black);
  border: 1px solid var(--vcg-border);
  border-radius: var(--vcg-radius);
  padding: 20px;
  margin-top: 24px;
}
.order-summary .line {
  display: flex; justify-content: space-between;
  font-size: 0.9rem; color: var(--vcg-gray-text);
  padding: 6px 0; border-bottom: 1px dashed var(--vcg-border);
}
.order-summary .line:last-child { border-bottom: none; }
.order-summary .total { color: var(--vcg-gold-light); font-weight: 700; font-size: 1.05rem; }

.form-msg { margin-top: 18px; padding: 14px 16px; border-radius: var(--vcg-radius); font-size: 0.9rem; display: none; }
.form-msg.success { display: block; background: rgba(76,175,125,0.12); border: 1px solid var(--vcg-success); color: #bdf0d5; }
.form-msg.error { display: block; background: rgba(200,60,60,0.12); border: 1px solid #c85050; color: #f3c6c6; }

/* ---------- Accordion (Additional Terms & Info, etc.) ---------- */
.accordion-item {
  background: var(--vcg-charcoal);
  border: 1px solid var(--vcg-border);
  border-radius: 10px;
  padding: 0 24px;
  margin-bottom: 14px;
}
.accordion-item summary {
  cursor: pointer;
  padding: 18px 4px;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--vcg-gold-light);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--vcg-gold);
  flex-shrink: 0;
}
.accordion-item[open] summary::after { content: "\2212"; }
.accordion-item .accordion-body { padding: 0 4px 22px; color: var(--vcg-gray-text); }
.accordion-item .accordion-body p { margin-bottom: 12px; }
.accordion-item .accordion-body p:last-child { margin-bottom: 0; }
.accordion-item .accordion-body ul { padding-left: 20px; margin: 0 0 12px; }
.accordion-item .accordion-body li { margin-bottom: 8px; }
.accordion-item .accordion-body strong { color: var(--vcg-off-white); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--vcg-border); padding: 20px 0; }
.faq-item h3 { color: var(--vcg-gold-light); font-size: 1.05rem; margin-bottom: 8px; }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: linear-gradient(135deg, #201a09, var(--vcg-black));
  border-top: 1px solid var(--vcg-gold);
  border-bottom: 1px solid var(--vcg-gold);
  text-align: center;
  padding: 64px 0;
}

/* ---------- Footer ---------- */
footer.site-footer { background: var(--vcg-charcoal); border-top: 1px solid var(--vcg-border); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }
.footer-grid h4 { color: var(--vcg-gold-light); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: var(--vcg-gray-text); font-size: 0.88rem; }
.footer-bottom {
  border-top: 1px solid var(--vcg-border); padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 0.78rem; color: var(--vcg-gray-text);
}

/* ---------- Legal pages ---------- */
.legal-body h2 { margin-top: 2em; }
.legal-body h3 { color: var(--vcg-gold-light); margin-top: 1.6em; }
.legal-body ol, .legal-body ul { color: var(--vcg-gray-text); }
.legal-flag {
  background: rgba(198,161,91,0.1);
  border: 1px solid var(--vcg-gold);
  border-radius: var(--vcg-radius);
  padding: 18px 20px;
  margin-bottom: 32px;
  color: var(--vcg-gold-light);
  font-size: 0.92rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .grid-3, .grid-2, .pricing-grid, .footer-grid, .trust-strip { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  nav.main-nav { display: none; }
  .hamburger { display: inline-flex; }
  nav.main-nav.open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--vcg-black);
    border-bottom: 1px solid var(--vcg-border);
    padding: 20px 24px;
    max-height: 80vh;
    overflow-y: auto;
  }
  nav.main-nav.open ul { flex-direction: column; gap: 16px; }
}

/* Phone-width header fix: brand + hamburger were crowding the "Submit an Order"
   button off the edge of the screen. Shrink the brand mark, drop the subtitle,
   and let the CTA button wrap to its own full-width row instead of overflowing. */
@media (max-width: 600px) {
  .nav-wrap {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 14px 18px;
  }
  .brand { font-size: 1.05rem; gap: 8px; }
  .brand .mark { width: 28px; height: 28px; font-size: 0.72rem; }
  .brand .brand-text small { display: none; }
  .hamburger { margin-left: auto; }
  .nav-cta { width: 100%; }
  .nav-cta .btn { width: 100%; text-align: center; }
}

/* Small-phone spacing pass: desktop paddings were carrying straight over to
   narrow screens, so everything felt cramped/oversized rather than streamlined. */
@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .hero { padding: 48px 0 36px; }
  section { padding: 44px 0; }
  section.tight { padding: 32px 0; }
  .section-head { margin-bottom: 32px; }
  .card, .tier-card, .form-card, .hero-card { padding: 22px; }
  .trust-strip { gap: 12px; }
  .grid-3, .grid-2, .pricing-grid { gap: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { text-align: center; }
  .cta-banner { padding: 44px 0; }
  .cta-banner .btn { display: block; margin: 10px auto 0; max-width: 320px; }
  .footer-grid { gap: 24px; }
  .order-summary .line {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .slab-grade { font-size: 2.4rem; }
}