:root {
  --cc-ink: #101922;
  --cc-navy: #1c2936;
  --cc-cream: #f1eadf;
  --cc-red: #9e332f;
  --cc-gold: #c8a46f;
}

body.sgx-collector-cards { background: var(--cc-cream); }
body.sgx-collector-cards .page-title,
body.sgx-collector-cards h3.title.no-vc,
body.sgx-collector-cards .post-title,
body.sgx-collector-cards .entry-title,
body.sgx-collector-cards .post-navigation,
body.sgx-collector-cards .comments-area { display: none !important; }
body.sgx-collector-cards .container,
body.sgx-collector-cards .row,
body.sgx-collector-cards .col-xs-12,
body.sgx-collector-cards .single-post { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }

.sgcc { overflow: hidden; color: var(--cc-ink); background: var(--cc-cream); }
.sgcc img { display: block; width: 100%; height: auto; }
.sgcc .sgc-kicker { color: var(--cc-red); }

.sgcc-hero { display: grid; grid-template-columns: .88fr 1.12fr; min-height: 820px; background: var(--cc-ink); color: #fff; }
.sgcc-hero__copy { display: flex; flex-direction: column; justify-content: center; padding: 130px clamp(36px, 6vw, 105px); }
.sgcc-hero h1 { max-width: 760px; margin: 34px 0 28px; color: #fff; font-size: clamp(62px, 6.5vw, 108px); font-weight: 400 !important; line-height: .88; letter-spacing: -.055em; }
.sgcc-hero h1 em { color: #dfc49e; font-weight: 400; }
.sgcc-hero__lede { max-width: 650px; color: #d7d9db; font: 400 20px/1.65 Georgia, serif; }
.sgcc-hero .sgc-actions { margin-top: 46px; }
.sgcc-hero .sgc-button { background: #fff; color: var(--cc-ink); }
.sgcc-hero .sgc-textlink { color: #fff; }
.sgcc-hero__image { position: relative; display: flex; align-items: center; justify-content: center; min-height: 820px; margin: 0; padding: 44px; background: #263544; }
.sgcc-hero__image img { width: min(760px, 100%); max-height: 920px; object-fit: contain; }
.sgcc-hero__image figcaption { position: absolute; right: 30px; bottom: 24px; color: #fff; font: 600 9px/1.2 Arial, sans-serif; letter-spacing: .14em; }

.sgcc-intro { padding: 120px 0; }
.sgcc-intro__grid,
.sgcc-heading,
.sgcc-details__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
.sgcc h2 { margin: 24px 0 0; font-size: clamp(52px, 6vw, 86px); line-height: .93; letter-spacing: -.045em; }
.sgcc-intro__grid > div:last-child,
.sgcc-heading > p,
.sgcc-details__grid > div:first-child > p { color: #3f474d; font: 400 22px/1.6 Georgia, serif; }
.sgcc-intro__grid > div:last-child p { margin: 0 0 24px; }

.sgcc-concepts { padding: 115px 0 130px; background: #d9d0c3; }
.sgcc-heading { margin-bottom: 68px; }
.sgcc-heading > p { margin: 52px 0 0; }
.sgcc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 58px 34px; }
.sgcc-grid figure { margin: 0; }
.sgcc-grid img { aspect-ratio: 1122 / 1402; object-fit: contain; background: #18222c; }
.sgcc-grid figcaption { padding: 24px 4px 0; }
.sgcc-grid figcaption span,
.sgcc-grid figcaption small { display: block; font: 600 9px/1.45 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.sgcc-grid figcaption span { color: var(--cc-red); }
.sgcc-grid figcaption strong { display: block; margin: 9px 0 10px; font: 400 34px/1.1 Georgia, serif; }
.sgcc-grid figcaption small { max-width: 530px; color: #586069; letter-spacing: .07em; }

.sgcc-process { padding: 120px 0; background: var(--cc-ink); color: #fff; }
.sgcc-process h2 { color: #fff; }
.sgcc-process .sgcc-heading > p { color: #c8cdd1; }
.sgcc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #3a4651; border-left: 1px solid #3a4651; }
.sgcc-steps article { min-height: 320px; padding: 32px 28px; border-right: 1px solid #3a4651; border-bottom: 1px solid #3a4651; }
.sgcc-steps span { color: #c9a56f; font: 600 10px/1 Arial, sans-serif; letter-spacing: .12em; }
.sgcc-steps h3 { margin: 82px 0 20px; color: #fff; font: 400 34px/1 Georgia, serif; }
.sgcc-steps p { color: #bcc2c7; font-size: 13px; line-height: 1.75; }

.sgcc-uses { padding: 120px 0; }
.sgcc-use-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 60px; background: #c4b9a9; border: 1px solid #c4b9a9; }
.sgcc-use-grid article { min-height: 260px; padding: 34px; background: var(--cc-cream); }
.sgcc-use-grid span { color: var(--cc-red); font: 600 9px/1.2 Arial, sans-serif; letter-spacing: .13em; }
.sgcc-use-grid h3 { margin: 78px 0 0; font: 400 27px/1.3 Georgia, serif; }

.sgcc-details { padding: 120px 0; background: #d9d0c3; }
.sgcc-details__grid > div:first-child > p { margin: 32px 0; }
.sgcc-details__list { border-top: 1px solid #a79b8c; }
.sgcc-details__list div { display: grid; grid-template-columns: 120px 1fr; gap: 28px; padding: 28px 0; border-bottom: 1px solid #a79b8c; }
.sgcc-details__list span { color: var(--cc-red); font: 600 9px/1.4 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.sgcc-details__list strong { font: 400 20px/1.45 Georgia, serif; }

.sgcc-review { max-width: 900px; margin: 65px auto 0; text-align: center; }
.sgcc-review blockquote { margin: 0; font: 400 clamp(28px, 4vw, 50px)/1.28 Georgia, serif; }
.sgcc-review figcaption { margin-top: 30px; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.sgcc-review figcaption span { color: #777; }
.sgcc-final { background: var(--cc-red); color: #fff; }
.sgcc-final h2,
.sgcc-final .sgc-kicker { color: #fff; }
.sgcc-final .sgc-button { background: #fff; color: var(--cc-ink); }

/* Keep page-level heading rules from overriding the shared footer typography. */
.sgcc .sgc-footer__grid h2 {
  margin: 0 0 10px;
  color: var(--gold);
  font: 600 9px/1.2 Montserrat, Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

@media (max-width: 1050px) {
  .sgcc-hero { grid-template-columns: 1fr; }
  .sgcc-hero__copy { min-height: 700px; }
  .sgcc-hero__image { min-height: 760px; }
  .sgcc-intro__grid,
  .sgcc-heading,
  .sgcc-details__grid { grid-template-columns: 1fr; gap: 32px; }
  .sgcc-heading > p { margin-top: 0; }
  .sgcc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgcc-use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .sgcc-hero__copy { min-height: 650px; padding: 100px 22px 70px; }
  .sgcc-hero h1 { font-size: 57px; }
  .sgcc-hero__lede { font-size: 17px; }
  .sgcc-hero__image { min-height: 540px; padding: 22px; }
  .sgcc-intro,
  .sgcc-concepts,
  .sgcc-process,
  .sgcc-uses,
  .sgcc-details { padding: 78px 0; }
  .sgcc h2 { font-size: 48px; }
  .sgcc-intro__grid > div:last-child,
  .sgcc-heading > p,
  .sgcc-details__grid > div:first-child > p { font-size: 19px; }
  .sgcc-grid,
  .sgcc-steps,
  .sgcc-use-grid { grid-template-columns: 1fr; }
  .sgcc-grid { gap: 46px; }
  .sgcc-steps article,
  .sgcc-use-grid article { min-height: 230px; }
  .sgcc-steps h3,
  .sgcc-use-grid h3 { margin-top: 60px; }
  .sgcc-details__list div { grid-template-columns: 1fr; gap: 10px; }
}