/* ==========================================================
   Gray's Jewelers Bespoke
   graysjewelers-custom.css
   Site: graysjewelsv6.shopfinejewelry.com   Template: Emerald
   Served from /css/graysjewelers-custom.css via <link> in the theme header.

   >>> THIS FILE IS CUMULATIVE. It holds the styles for EVERY custom
   >>> widget on the site. Append new blocks to the bottom. Never replace
   >>> the whole file with a single widget's CSS.

   CONTENTS
     1.  Design tokens
     2.  Buttons                  .gjb-btn  .gjb-btn-grid
     3.  Trust strip              .gjb-trust-strip
     4.  Category / brand intro   .gjb-cat-intro
     5.  Service pillars          .gjb-pillars
     6.  Split feature panel      .gjb-split
     7.  Visit / location block   .gjb-visit          (dark)
     8.  Numbered process steps   .gjb-steps
     9.  Nomination bracelet how-to  .gjb-nom-build
     10. Diamond comparison         .gjb-compare
     11. Page Meta SEO block        .gjb-seo
     12. Homepage hero fit          .gjb-hero

   WHERE EACH ONE IS USED
     .gjb-cat-intro   brand + category grid Page Meta intro HTML
     .gjb-pillars     homepage, /pages/bridal-and-engagement,
                      /pages/fine-jewelry, /pages/fashion-jewelry,
                      /jewelry/bridal-and-engagement/womens-wedding-bands
                      (homepage instance also uses __tagline + __subtitle)
     .gjb-split       homepage
     .gjb-visit       homepage
     .gjb-steps       /pages/bespoke-jewelry-design,
                      /jewelry/bridal-and-engagement/womens-wedding-bands
     .gjb-nom-build   /pages/nomination
     .gjb-compare     lab grown vs natural diamond education page
     .gjb-seo         Page Meta Supporting Content (outro) field
     .gjb-hero        homepage section 1 (added to the pagebuilder
                      sectionClass: "alt emerald-banner gjb-hero")
   ========================================================== */


/* ----------------------------------------------------------
   1. DESIGN TOKENS
   Mapped to the live Emerald theme variables, with fallbacks.
   ---------------------------------------------------------- */

:root {
  --gjb-plum: var(--primary, #2b2229);
  --gjb-plum-deep: #1c1519;
  --gjb-blush: var(--secondary, #d5bdc4);
  --gjb-blush-soft: #f3e9ec;
  --gjb-cream: var(--bs-body-bg, #faf6f7);
  --gjb-gold: #856a43;          /* 5.07:1 on white, 4.73:1 on cream - AA */
  --gjb-gold-bright: #b08d5c;   /* decorative only, never text on light */
  --gjb-gold-deep: #71583a;     /* 5.60:1 on the blush band - AA */
  --gjb-ink: #2b2229;
  --gjb-muted: #6d5f63;
  --gjb-muted-light: rgba(255, 255, 255, .76);
  --gjb-rule: rgba(43, 34, 41, .16);
  --gjb-rule-light: rgba(255, 255, 255, .22);
  --gjb-serif: "baskerville-urw", Georgia, "Times New Roman", serif;
  --gjb-sans: lato, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gjb-shell: clamp(1rem, 4vw, 3rem);
}


/* ----------------------------------------------------------
   2. BUTTONS
   Variants: --solid  --outline  --outline-light  --gold  --sm
   ---------------------------------------------------------- */

.gjb-btn-grid,
.gjb-cat-intro__actions,
.gjb-steps__actions,
.gjb-visit__actions {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 0;
  padding: 0;
}

.gjb-btn {
  display: inline-block;
  padding: .78rem 1.6rem;
  font-family: var(--gjb-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  border: 1px solid var(--gjb-plum);
  background: transparent;
  color: var(--gjb-plum);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.gjb-btn:hover,
.gjb-btn:focus {
  background: var(--gjb-plum);
  color: #fff;
  text-decoration: none;
}

.gjb-btn--solid { background: var(--gjb-plum); color: #fff; }

.gjb-btn--solid:hover,
.gjb-btn--solid:focus {
  background: var(--gjb-plum-deep);
  border-color: var(--gjb-plum-deep);
  color: #fff;
}

.gjb-btn--outline { background: transparent; color: var(--gjb-plum); }

.gjb-btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
}

.gjb-btn--outline-light:hover,
.gjb-btn--outline-light:focus {
  background: #fff;
  border-color: #fff;
  color: var(--gjb-plum);
}

.gjb-btn--gold {
  background: var(--gjb-gold);
  border-color: var(--gjb-gold);
  color: #fff;
}

.gjb-btn--gold:hover,
.gjb-btn--gold:focus {
  background: #6d5636;
  border-color: #6d5636;
  color: #fff;
}

.gjb-btn--sm {
  padding: .6rem 1.15rem;
  font-size: .72rem;
  letter-spacing: .08em;
}

.gjb-btn:focus-visible {
  outline: 2px solid var(--gjb-gold);
  outline-offset: 3px;
}


/* ----------------------------------------------------------
   3. TRUST STRIP
   ---------------------------------------------------------- */

.gjb-trust-strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  margin: 0;
  padding: 0;
}

.gjb-trust-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--gjb-muted);
}

.gjb-trust-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  color: var(--gjb-gold);
}


/* ----------------------------------------------------------
   4. CATEGORY / BRAND GRID INTRO
   Page Meta > Intro HTML on brand and category grids.
   ---------------------------------------------------------- */

.gjb-cat-intro {
  background: var(--gjb-cream);
  border-bottom: 1px solid var(--gjb-rule);
  padding-block: 2.75rem;
  color: var(--gjb-ink);
  font-family: var(--gjb-sans);
}

.gjb-cat-intro__wrap { padding-inline: 16px; }

.gjb-cat-intro__row { justify-content: center; }

.gjb-cat-intro__col { min-width: 0; }

.gjb-cat-intro__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gjb-gold);
  margin: 0 0 .6rem;
}

.gjb-cat-intro__title {
  font-family: var(--gjb-serif);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--gjb-plum);
  margin: 0 0 1rem;
}

.gjb-cat-intro__lede {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gjb-muted);
  max-width: 84ch;
  margin: 0 0 1rem;
}

.gjb-cat-intro__lede:last-of-type { margin-bottom: 1.5rem; }

.gjb-cat-intro__actions { margin-top: .75rem; }

/* Full-width variant.
   Add gjb-cat-intro--wide to the .gjb-cat-intro root and change the inner
   column from `col-12 col-lg-10` to `col-12` in the Page Meta intro HTML.
   Removes the measure cap entirely and lets the copy run the full
   container width. Used on the Nomination brand grid. */
.gjb-cat-intro--wide .gjb-cat-intro__row { justify-content: flex-start; }
.gjb-cat-intro--wide .gjb-cat-intro__title { max-width: none; }
.gjb-cat-intro--wide .gjb-cat-intro__lede { max-width: none; }

.gjb-cat-intro__trust {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gjb-rule);
}


/* ----------------------------------------------------------
   5. SERVICE PILLARS
   .gjb-pillars > .container > [.gjb-pillars__tagline]
      > .row.g-0 > .gjb-pillars__item (col)
         > __title + [__subtitle] + __text
   plus an optional .gjb-pillars__proof review link.
   __tagline and __subtitle are optional; instances without them
   render exactly as before.
   ---------------------------------------------------------- */

.gjb-pillars {
  /* Full-bleed band: breaks out of whatever container the widget sits in,
     so the tinted background runs edge to edge on every page. */
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
  padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(1.75rem, 3vw, 2.5rem);
  background: var(--gjb-blush-soft);
  font-family: var(--gjb-sans);
}

/* Some instances wrap the row in a .container, some do not. Neutralize it
   so the four columns span the full width in both variants. */
.gjb-pillars > .container {
  max-width: 100%;
  width: 100%;
  padding-inline: 0;
}

/* Section tagline above the four columns (homepage).
   Carries its own side padding because the .container above is zeroed out. */
.gjb-pillars__tagline {
  font-family: var(--gjb-serif);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: var(--gjb-plum);
  text-align: center;
  max-width: 44ch;
  margin: 0 auto clamp(.75rem, 2vw, 1.25rem);
  padding-inline: var(--gjb-shell);
}

.gjb-pillars__item {
  padding: 1.75rem clamp(1rem, 2vw, 1.75rem);
  text-align: center;
  border-right: 1px solid var(--gjb-rule);
}

.gjb-pillars__item:last-child { border-right: 0; }

/* Inline line-icon SVG above each title. fill/stroke live here rather than
   on the <svg> so every icon stays an outline in the brand gold.
   Gold on the blush band is ~4.3:1, above the 3:1 non-text minimum. */
.gjb-pillars__icon {
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1rem;
  color: var(--gjb-gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gjb-pillars__title {
  font-family: var(--gjb-serif);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--gjb-plum);
  margin: 0 0 .55rem;
}

/* Short lead line between the title and the body copy.
   gold-deep is 5.60:1 on the blush band - AA. */
.gjb-pillars__subtitle {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.45;
  color: var(--gjb-gold-deep);
  margin: -.15rem 0 .6rem;
}

.gjb-pillars__text {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--gjb-muted);
  margin: 0;
}

.gjb-pillars__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem .85rem;
  margin: 2.5rem clamp(1rem, 4vw, 3rem) 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--gjb-rule);
  text-decoration: none;
  color: inherit;
}

.gjb-pillars__stars {
  display: inline-flex;
  gap: .15rem;
  color: var(--gjb-gold-bright);
}

.gjb-pillars__star,
.gjb-pillars__stars svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
  stroke: none;
}

.gjb-pillars__proof-text {
  margin: 0;
  font-size: .9rem;
  color: var(--gjb-muted);
}

.gjb-pillars__proof-text strong {
  color: var(--gjb-plum);
  font-weight: 700;
}

.gjb-pillars__proof-link {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gjb-gold-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.gjb-pillars__proof:hover .gjb-pillars__proof-link { color: var(--gjb-plum); }

.gjb-pillars__proof:focus-visible {
  outline: 2px solid var(--gjb-gold);
  outline-offset: 4px;
}


/* ----------------------------------------------------------
   6. SPLIT FEATURE PANEL
   .gjb-split > .container > .gjb-split__frame > .row
      > .gjb-split__panel (copy)  +  .gjb-split__media (image)
   ---------------------------------------------------------- */

.gjb-split {
  background: #fff;
  padding-block: 3.5rem;
  font-family: var(--gjb-sans);
}

/* Wider than a stock Bootstrap container. The theme caps .container at 1320px,
   which leaves this panel-plus-image row feeling narrow on large monitors.
   Raising the cap here only affects this component; the padding keeps it off
   the screen edge on very wide displays. Bump the max-width to taste, or use
   `margin-inline: calc(50% - 50vw)` instead for a full-bleed band. */
.gjb-split > .container {
  max-width: 1560px;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.gjb-split__frame {
  overflow: hidden;
  background: var(--gjb-cream);
}

.gjb-split__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background: var(--gjb-blush-soft);
}

.gjb-split__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gjb-gold);
  margin: 0 0 .6rem;
}

.gjb-split__title {
  font-family: var(--gjb-serif);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--gjb-plum);
  margin: 0 0 1rem;
}

.gjb-split__accent {
  display: block;
  width: 3rem;
  height: 2px;
  margin-bottom: 1.25rem;
  background: var(--gjb-gold);
}

.gjb-split__copy {
  font-size: .98rem;
  line-height: 1.7;
  color: var(--gjb-muted);
  margin: 0 0 1.5rem;
  max-width: 46ch;
}

.gjb-split__media {
  min-height: 320px;
  overflow: hidden;
}

/* Same specificity guard as .gjb-visit__img above. */
.gjb-split__media .gjb-split__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

/* Video fill. Same box as the image so the panel and media stay
   equal height. The poster image shows before the file loads and
   is what users on reduced-motion settings keep seeing. */
.gjb-split__media .gjb-split__video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: center;
  background-color: var(--gjb-blush-soft);
}

@media (prefers-reduced-motion: reduce) {
  .gjb-split__media .gjb-split__video { display: none; }
  .gjb-split__media .gjb-split__poster { display: block; }
}

.gjb-split__media .gjb-split__poster {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: center;
}


/* ----------------------------------------------------------
   7. VISIT / LOCATION BLOCK   (dark)
   .gjb-visit > .container-fluid > .row
      > __media (image) + __info (address) + __map (iframe)
   ---------------------------------------------------------- */

.gjb-visit {
  background: var(--gjb-plum);
  color: #fff;
  font-family: var(--gjb-sans);
}

.gjb-visit__media,
.gjb-visit__map { min-height: 300px; }

/* The image is pinned to the column rather than sitting in normal flow.
   An <img> with height:100% inside a stretched flex item keeps its intrinsic
   ratio and stops short of the column bottom; absolute inset:0 makes it fill
   the column exactly, the same way the map iframe does. The column needs
   position:relative and its own min-height, since an absolutely positioned
   child contributes no height of its own. */
.gjb-visit__media {
  position: relative;
  overflow: hidden;
}

/* NOTE the doubled selector. The theme's _monolith.min.css contains
   `img[sizes], img[data-sizes], img[width] { height: auto }` at specificity
   (0,1,1). A single class is (0,1,0) and loses, so height:100% is ignored on
   any <img> carrying a width attribute. Scoping to the parent makes it (0,2,0)
   and wins. Keep the width/height attributes on the img for CLS. */
.gjb-visit__media .gjb-visit__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gjb-visit__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
  filter: grayscale(1) contrast(.9);
}

.gjb-visit__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 4vw, 3rem);
}

.gjb-visit__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gjb-gold-bright);
  margin: 0 0 .6rem;
}

.gjb-visit__title {
  font-family: var(--gjb-serif);
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 400;
  color: #fff;
  margin: 0 0 1.5rem;
}

.gjb-visit__list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

.gjb-visit__list li {
  padding: .7rem 0;
  border-bottom: 1px solid var(--gjb-rule-light);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--gjb-muted-light);
}

.gjb-visit__list li:last-child { border-bottom: 0; }

.gjb-visit__list a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid var(--gjb-rule-light);
}

.gjb-visit__list a:hover,
.gjb-visit__list a:focus {
  color: var(--gjb-gold-bright);
  border-bottom-color: currentColor;
}

.gjb-visit__label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gjb-gold-bright);
  margin-bottom: .2rem;
}


/* ----------------------------------------------------------
   8. NUMBERED PROCESS STEPS
   .gjb-steps > __head + .row.g-0 > __item (col) + __actions
   ---------------------------------------------------------- */

.gjb-steps {
  background: var(--gjb-cream);
  padding: clamp(2.5rem, 5vw, 4rem) var(--gjb-shell);
  font-family: var(--gjb-sans);
}

.gjb-steps__head {
  max-width: 60ch;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.gjb-steps__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gjb-gold);
  margin: 0 0 .6rem;
}

.gjb-steps__title {
  font-family: var(--gjb-serif);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 400;
  color: var(--gjb-plum);
  margin: 0 0 .85rem;
}

.gjb-steps__lede {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gjb-muted);
  margin: 0;
}

.gjb-steps__item {
  padding: 1.75rem 1.5rem;
  text-align: center;
  border-right: 1px solid var(--gjb-rule);
}

.gjb-steps__item:last-child { border-right: 0; }

.gjb-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 1rem;
  border: 1px solid var(--gjb-gold);
  border-radius: 50%;
  font-family: var(--gjb-serif);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--gjb-gold);
}

.gjb-steps__name {
  font-family: var(--gjb-serif);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--gjb-plum);
  margin: 0 0 .55rem;
}

.gjb-steps__text {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--gjb-muted);
  margin: 0;
}

.gjb-steps__actions {
  justify-content: center;
  margin-top: 2.25rem;
}


/* ----------------------------------------------------------
   9. NOMINATION "HOW TO BUILD YOUR BRACELET"
   Page: /pages/nomination
   ---------------------------------------------------------- */

.gjb-nom-build {
  background: #fff;
  padding: 4.5rem 0;
  color: var(--gjb-ink);
  font-family: var(--gjb-sans);
}

.gjb-nom-build__intro { margin-bottom: 3rem; }

.gjb-nom-build__title {
  font-family: var(--gjb-serif);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 400;
  color: var(--gjb-plum);
  margin: 0 0 .85rem;
}

.gjb-nom-build__sub {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gjb-muted);
  margin: 0;
}

.gjb-nom-build__steps { row-gap: 2.5rem; }

.gjb-nom-build__step { height: 100%; }

.gjb-nom-build__media {
  position: relative;
  margin-bottom: 1.25rem;
  background: var(--gjb-blush-soft);
  overflow: hidden;
}

.gjb-nom-build__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.gjb-nom-build__num {
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gjb-plum);
  color: #fff;
  font-family: var(--gjb-serif);
  font-size: 1.15rem;
  line-height: 1;
}

.gjb-nom-build__step-title {
  font-family: var(--gjb-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--gjb-plum);
  margin: 0 0 .6rem;
}

.gjb-nom-build__step-copy {
  font-size: .93rem;
  line-height: 1.65;
  color: var(--gjb-muted);
  margin: 0;
}

.gjb-nom-build__note {
  margin-top: 4rem;
  padding: 2.5rem;
  background: var(--gjb-blush);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
}

.gjb-nom-build__note-text { flex: 1 1 22rem; }

.gjb-nom-build__note-title {
  font-family: var(--gjb-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gjb-plum);
  margin: 0 0 .5rem;
}

.gjb-nom-build__note-copy {
  font-size: .95rem;
  line-height: 1.65;
  color: #4a3940;
  margin: 0;
  max-width: 46ch;
}

.gjb-nom-build__note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.gjb-nom-build__btn {
  display: inline-block;
  padding: .8rem 1.75rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  border: 1px solid var(--gjb-plum);
  transition: background-color .2s ease, color .2s ease;
}

.gjb-nom-build__btn--solid { background: var(--gjb-plum); color: #fff; }

.gjb-nom-build__btn--solid:hover,
.gjb-nom-build__btn--solid:focus {
  background: var(--gjb-plum-deep);
  border-color: var(--gjb-plum-deep);
  color: #fff;
}

.gjb-nom-build__btn--ghost { background: transparent; color: var(--gjb-plum); }

.gjb-nom-build__btn--ghost:hover,
.gjb-nom-build__btn--ghost:focus { background: var(--gjb-plum); color: #fff; }

.gjb-nom-build__btn:focus-visible {
  outline: 2px solid var(--gjb-gold);
  outline-offset: 3px;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 991.98px) {
  .gjb-pillars__item:nth-child(2n) { border-right: 0; }
  .gjb-split__panel { order: 2; }
  .gjb-split__media { order: 1; }
  .gjb-visit__media,
  .gjb-visit__map,
  .gjb-visit__img,
  .gjb-visit__map iframe { min-height: 260px; }
  .gjb-nom-build { padding: 3.25rem 0; }
  .gjb-nom-build__note { padding: 2rem; }
}

@media (max-width: 767.98px) {
  .gjb-pillars { padding-block: 2.5rem; }
  .gjb-pillars__tagline { margin-bottom: .5rem; }
  .gjb-pillars__item { border-right: 0; border-bottom: 1px solid var(--gjb-rule); }
  .gjb-pillars__item:last-child { border-bottom: 0; }
  .gjb-steps__item { border-right: 0; border-bottom: 1px solid var(--gjb-rule); }
  .gjb-steps__item:last-child { border-bottom: 0; }
}

@media (max-width: 575.98px) {
  .gjb-cat-intro { padding-block: 2rem; }
  .gjb-btn-grid .gjb-btn,
  .gjb-cat-intro__actions .gjb-btn,
  .gjb-steps__actions .gjb-btn,
  .gjb-visit__actions .gjb-btn { width: 100%; }
  .gjb-trust-strip { gap: .6rem; }
  .gjb-trust-item { font-size: .8rem; }
  .gjb-pillars__proof { flex-direction: column; text-align: center; }
  .gjb-nom-build__note { text-align: center; justify-content: center; }
  .gjb-nom-build__note-copy { margin-inline: auto; }
  .gjb-nom-build__note-actions { justify-content: center; width: 100%; }
  .gjb-nom-build__btn { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .gjb-btn,
  .gjb-nom-build__btn { transition: none; }
}


/* ----------------------------------------------------------
   10. DIAMOND COMPARISON  (lab grown vs natural)
   Education page. Wrapper: .gjb-compare
   ---------------------------------------------------------- */

.gjb-compare {
  background: #fff;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  color: var(--gjb-ink);
  font-family: var(--gjb-sans);
}

/* Cap the component's own container. Bootstrap's 1320px makes the full-width
   table and cards tower over the prose, which is what reads as "pinched".
   Pulling the shell in narrows that gap without pushing any line of text past
   a readable measure. */
.gjb-compare > .container {
  max-width: 1040px;
}

.gjb-compare__head {
  max-width: 72ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.gjb-compare__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gjb-gold);
  margin: 0 0 .6rem;
}

.gjb-compare__title {
  font-family: var(--gjb-serif);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--gjb-plum);
  margin: 0 0 1rem;
}

.gjb-compare__lede {
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--gjb-muted);
  margin: 0;
}

/* ---- Prose panels ---- */

.gjb-compare__panel {
  max-width: 80ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.gjb-compare__panel--flag {
  background: var(--gjb-cream);
  border-left: 3px solid var(--gjb-gold);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 100%;
}

.gjb-compare__panel-title,
.gjb-compare__decide-title {
  font-family: var(--gjb-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 400;
  color: var(--gjb-plum);
  margin: 0 0 .85rem;
}

.gjb-compare__panel-copy {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--gjb-muted);
  margin: 0 0 1rem;
}

.gjb-compare__panel-copy:last-child { margin-bottom: 0; }

.gjb-compare__panel-copy strong { color: var(--gjb-plum); font-weight: 700; }

/* ---- Comparison table ---- */

.gjb-compare__tablewrap {
  overflow-x: auto;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  -webkit-overflow-scrolling: touch;
}

.gjb-compare__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 1rem;
}

.gjb-compare__caption {
  caption-side: top;
  text-align: left;
  font-family: var(--gjb-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: var(--gjb-plum);
  padding-bottom: .9rem;
}

.gjb-compare__table th,
.gjb-compare__table td {
  padding: .95rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--gjb-rule);
  line-height: 1.6;
}

.gjb-compare__table thead th {
  font-family: var(--gjb-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gjb-plum);
  background: var(--gjb-blush-soft);
  border-bottom: 1px solid var(--gjb-rule);
}

.gjb-compare__table tbody th {
  width: 22%;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gjb-plum);
}

.gjb-compare__table tbody td { color: var(--gjb-muted); }

.gjb-compare__table tbody tr:nth-child(even) { background: rgba(243, 233, 236, .45); }

.gjb-compare__same {
  font-style: italic;
  text-align: center;
  color: var(--gjb-plum);
}

/* ---- Two-column balanced cards ---- */

.gjb-compare__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.gjb-compare__card {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--gjb-cream);
  border-top: 3px solid var(--gjb-plum);
}

.gjb-compare__card:last-child { border-top-color: var(--gjb-gold); }

.gjb-compare__card-title {
  font-family: var(--gjb-serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--gjb-plum);
  margin: 0 0 1rem;
}

.gjb-compare__list {
  margin: 0;
  padding-left: 1.1rem;
}

.gjb-compare__list li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gjb-muted);
  margin-bottom: .7rem;
}

.gjb-compare__list li:last-child { margin-bottom: 0; }

.gjb-compare__list li::marker { color: var(--gjb-gold); }

/* ---- Decision list ---- */

.gjb-compare__decide {
  max-width: 80ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.gjb-compare__dl { margin: 1.25rem 0; }

.gjb-compare__dl dt {
  font-family: var(--gjb-serif);
  font-size: 1.05rem;
  font-weight: 400;
  font-style: italic;
  color: var(--gjb-plum);
  margin-top: 1.25rem;
}

.gjb-compare__dl dd {
  margin: .35rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--gjb-blush);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gjb-muted);
}

/* ---- Closing CTA ---- */

.gjb-compare__cta {
  text-align: center;
  max-width: 72ch;
  margin: 0 auto;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--gjb-rule);
}

.gjb-compare__cta-title {
  font-family: var(--gjb-serif);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 400;
  color: var(--gjb-plum);
  margin: 0 0 .85rem;
}

.gjb-compare__cta-copy {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--gjb-muted);
  margin: 0 0 1.5rem;
}

.gjb-compare__cta .gjb-btn-grid { justify-content: center; }

@media (max-width: 767.98px) {
  .gjb-compare__pair { grid-template-columns: minmax(0, 1fr); }
  .gjb-compare__table tbody th { width: auto; }
}

@media (max-width: 575.98px) {
  .gjb-compare__cta .gjb-btn { width: 100%; }
}

/* ----------------------------------------------------------
   11. PAGE META SEO BLOCK   .gjb-seo
   Long-form supporting copy pasted into the Page Meta
   Supporting Content (outro) field. Replaces the old
   .blog-container pattern, which shipped its own <style>
   block, Arial, a second <h1>, and a negative top margin
   that collided with whatever sat above it.
   ---------------------------------------------------------- */

.gjb-seo {
  background: var(--gjb-cream);
  border-top: 1px solid var(--gjb-rule);
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
  font-family: var(--gjb-sans);
  color: var(--gjb-ink);
}

.gjb-seo__inner {
  max-width: 78ch;
  margin-inline: auto;
  padding-inline: var(--gjb-shell);
}

.gjb-seo__title {
  font-family: var(--gjb-serif);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--gjb-plum);
  margin: 0 0 1rem;
}

.gjb-seo__subtitle {
  font-family: var(--gjb-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--gjb-plum);
  margin: 2.25rem 0 .85rem;
}

.gjb-seo__lede {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--gjb-ink);
  margin: 0 0 1.1rem;
}

.gjb-seo__text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gjb-muted);
  margin: 0 0 1.1rem;
}

.gjb-seo__list {
  margin: 0;
  padding: 0;
}

.gjb-seo__list dt {
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  color: var(--gjb-plum);
  margin-top: 1.1rem;
}

.gjb-seo__list dt:first-child { margin-top: 0; }

.gjb-seo__list dd {
  margin: .3rem 0 0;
  padding: 0 0 0 .9rem;
  border-left: 2px solid var(--gjb-blush);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gjb-muted);
}

/* Photo grid. auto-fit means the seven images reflow to fill the
   row at every width instead of leaving a ragged last row at one
   fixed column count. The doubled selector is the same specificity
   guard used on .gjb-visit__img and .gjb-split__img: the theme's
   _monolith.min.css sets `height: auto` on img[width]/img[sizes]
   at (0,1,1), which beats a single class. */
.gjb-seo__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem;
  list-style: none;
  margin: 0 0 .5rem;
  padding: 0;
}

.gjb-seo__gallery li {
  margin: 0;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--gjb-blush-soft);
}

.gjb-seo__gallery .gjb-seo__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gjb-seo__actions { margin-top: 1.5rem; }

.gjb-seo a:not(.gjb-btn) {
  color: var(--gjb-gold);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.gjb-seo a:not(.gjb-btn):hover { color: var(--gjb-plum); }

/* Quiet sibling-page nav under a .gjb-compare intro. Deliberately NOT
   buttons: the closing CTA already carries the same destinations as
   buttons, and a second button cluster above the fold competes with it
   and reads as an unfinished toolbar. This is a text line instead. */
.gjb-compare__jump {
  margin: 1.25rem 0 0;
  font-family: var(--gjb-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gjb-muted);
}

.gjb-compare__jump a {
  color: var(--gjb-gold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.gjb-compare__jump a:hover,
.gjb-compare__jump a:focus-visible { color: var(--gjb-plum); }

.gjb-compare__jump span { margin-inline: .45rem; color: var(--gjb-rule); }


/* ----------------------------------------------------------
   12. HOMEPAGE HERO FIT   .gjb-hero
   Homepage section 1 (pagebuilder sectionClass:
   "alt emerald-banner gjb-hero"). The center text column is only
   4/12 wide, so the theme's display-6 H1 wrapped to 5 lines on
   laptop screens and pushed "Book a Consultation" below the fold.
   This scales the headline with the viewport, keeps it to about
   3 lines, and trims the column padding. !important is needed to
   beat the Emerald theme's display-6 and column padding rules.
   ---------------------------------------------------------- */

.gjb-hero .text-column {
  padding: clamp(1.5rem, 2.6vw, 2.75rem) !important;
}

.gjb-hero .text-column h1 {
  font-size: clamp(1.55rem, 2.05vw, 2.35rem) !important;
  line-height: 1.2 !important;
  text-wrap: balance;
  margin-bottom: .85rem;
}

.gjb-hero .text-column p {
  font-size: clamp(.9rem, .95vw, 1rem);
  line-height: 1.6;
}