/* ==========================================================================
   Graham Jewelers  |  Custom Global CSS
   Paste into Punchmark Site Manager > Design or Theme Settings > Global CSS.
   All rules scoped under .grh-goldbuying so nothing leaks into the theme.
   Add future Graham widget styles to this same file (one paste only).
   ========================================================================== */

.grh-goldbuying {
  /* Palette (matched to the approved landing page design) */
  --grh-navy: #0f3344;      /* headings, icons, step numbers */
  --grh-red: #c83d32;       /* CTA buttons */
  --grh-red-hover: #a6332a;
  --grh-body: #4a4a4a;      /* body text */
  --grh-note: #595959;      /* fine print */
  --grh-band: #efefef;      /* light gray section bands */
  --grh-white: #ffffff;

  /* Type families (served by the site's Adobe Fonts / Typekit kit) */
  --grh-serif: "trajan-pro-3", "Trajan Pro", Georgia, serif;  /* headings, buttons */
  --grh-sans: "europa", "Helvetica Neue", Arial, sans-serif;   /* body copy */

  /* Spacing / type tokens */
  --grh-section-y: 4rem;
  --grh-maxw: 960px;

  color: var(--grh-body);
  font-family: var(--grh-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Constrain content width like the design */
.grh-goldbuying .container {
  max-width: var(--grh-maxw);
}

/* ---- Headings (inherit the theme serif, styled small-caps to match) ------- */
.grh-goldbuying .grh-h1,
.grh-goldbuying .grh-h2,
.grh-goldbuying .grh-h3 {
  color: var(--grh-navy);
  font-family: var(--grh-serif);
  font-variant: small-caps;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 1rem;
}

.grh-goldbuying .grh-h1 {
  font-size: 2.6rem;
  text-align: center;
  margin-bottom: 1.75rem;
}

.grh-goldbuying .grh-h2 {
  font-size: 1.9rem;
}

.grh-goldbuying .grh-h2-sub {
  display: block;
  font-size: 1.45rem;
}

.grh-goldbuying .grh-h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

/* ---- Breadcrumb ----------------------------------------------------------- */
.grh-goldbuying .grh-breadcrumb {
  padding: 1.25rem 0 0;
  text-align: center;
  font-family: var(--grh-serif);
  font-variant: small-caps;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}
.grh-goldbuying .grh-breadcrumb a {
  color: var(--grh-note);
  text-decoration: none;
}
.grh-goldbuying .grh-breadcrumb a:hover {
  color: var(--grh-navy);
  text-decoration: underline;
}
.grh-goldbuying .grh-breadcrumb span[aria-hidden] {
  margin: 0 0.4rem;
  color: #999;
}
.grh-goldbuying .grh-breadcrumb-current {
  color: #999;
}

/* ---- Hero ----------------------------------------------------------------- */
.grh-goldbuying .grh-hero {
  padding: 2.5rem 0 var(--grh-section-y);
}
.grh-goldbuying .grh-subhead {
  color: var(--grh-navy);
  font-family: var(--grh-serif);
  font-variant: small-caps;
  font-size: 1.55rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin-bottom: 1.75rem;
}
.grh-goldbuying .grh-intro {
  max-width: 760px;
}

/* ---- Shared section spacing ---------------------------------------------- */
.grh-goldbuying .grh-section {
  padding: var(--grh-section-y) 0;
}
.grh-goldbuying .grh-band {
  padding: var(--grh-section-y) 0;
  background-color: var(--grh-band);
}
.grh-goldbuying .grh-lead,
.grh-goldbuying .grh-steps-intro {
  margin-bottom: 1.75rem;
}

/* ---- Meet Cameron --------------------------------------------------------- */
.grh-goldbuying .grh-meet-photo {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  object-fit: cover;
}

/* ---- What We Buy list ----------------------------------------------------- */
.grh-goldbuying .grh-buy-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.grh-goldbuying .grh-buy-list li {
  margin-bottom: 0.85rem;
}
.grh-goldbuying .grh-buy-list strong {
  color: var(--grh-navy);
}

/* ---- Options (icons) ------------------------------------------------------ */
.grh-goldbuying .grh-options-grid {
  margin-top: 1rem;
}
.grh-goldbuying .grh-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background-color: var(--grh-navy);
  color: var(--grh-white);
  margin-bottom: 1rem;
}
.grh-goldbuying .grh-options-grid p {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.grh-goldbuying .grh-note {
  color: var(--grh-note);
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 0.5rem;
}

/* ---- How It Works steps --------------------------------------------------- */
.grh-goldbuying .grh-step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.grh-goldbuying .grh-step-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: var(--grh-navy);
  color: var(--grh-white);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}
.grh-goldbuying .grh-step p {
  margin: 0;
  padding-top: 0.4rem;
}
.grh-goldbuying .grh-step strong {
  color: var(--grh-navy);
}

/* ---- Final CTA ------------------------------------------------------------ */
.grh-goldbuying .grh-cta-copy {
  max-width: 620px;
  margin: 0 auto 2rem;
}
.grh-goldbuying .grh-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.grh-goldbuying .grh-btn {
  display: inline-block;
  background-color: var(--grh-red);
  color: var(--grh-white);
  font-family: var(--grh-serif);
  font-variant: small-caps;
  letter-spacing: 0.03em;
  font-size: 1.05rem;
  text-decoration: none;
  padding: 0.9rem 2.5rem;
  border-radius: 2px;
  transition: background-color 0.15s ease;
}
.grh-goldbuying .grh-btn:hover,
.grh-goldbuying .grh-btn:focus {
  background-color: var(--grh-red-hover);
  color: var(--grh-white);
}
.grh-goldbuying .grh-btn:focus-visible {
  outline: 3px solid var(--grh-navy);
  outline-offset: 2px;
}

/* ---- FAQ ------------------------------------------------------------------ */
.grh-goldbuying .grh-faq-item {
  margin-bottom: 1.5rem;
}
.grh-goldbuying .grh-faq-item p {
  margin: 0;
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 768px) {
  .grh-goldbuying { --grh-section-y: 2.75rem; }
  .grh-goldbuying .grh-h1 { font-size: 2rem; }
  .grh-goldbuying .grh-h2 { font-size: 1.55rem; }
  .grh-goldbuying .grh-h2-sub { font-size: 1.2rem; }
  .grh-goldbuying .grh-subhead { font-size: 1.25rem; }
  .grh-goldbuying .grh-meet-photo { width: 200px; height: 200px; }
}

@media (max-width: 576px) {
  .grh-goldbuying { font-size: 1rem; }
  .grh-goldbuying .grh-step { gap: 0.85rem; }
  .grh-goldbuying .grh-step-num { width: 46px; height: 46px; font-size: 1.25rem; }
  .grh-goldbuying .grh-btn { width: 100%; text-align: center; }
}