/* =========================================================
   Gospel Reclaimed — Meet the Rebel Page
   File: gr-rebel-page.css

   Page:
   /meet-the-rebel/

   Elementor classes expected:
   .gr-rebel-page
   .gr-rebel-hero
   .gr-rebel-hero-inner
   .gr-rebel-hero-copy
   .gr-rebel-eyebrow
   .gr-rebel-hero-media
   .gr-rebel-portrait
   .gr-rebel-socials
   .gr-rebel-story
   .gr-rebel-story-inner
   .gr-rebel-closing
   ========================================================= */

:root {
  --gr-rebel-navy: #16222d;
  --gr-rebel-navy-soft: #1d2b38;
  --gr-rebel-navy-dark: #0d1721;
  --gr-rebel-gold: #c09a00;
  --gr-rebel-gold-bright: #e8b400;
  --gr-rebel-cream: #fffdf8;
  --gr-rebel-cream-2: #f7f3ea;
  --gr-rebel-white: #ffffff;
  --gr-rebel-text: #1a2530;
  --gr-rebel-muted: #5e6872;
  --gr-rebel-border: rgba(22, 34, 45, 0.13);
}

/* =========================================================
   Page shell
   ========================================================= */

.gr-rebel-page {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(232, 180, 0, 0.08), transparent 28%),
    linear-gradient(180deg, var(--gr-rebel-cream) 0%, #f6efe5 100%) !important;

  color: var(--gr-rebel-text) !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

.gr-rebel-page * {
  box-sizing: border-box !important;
}

/* =========================================================
   Hero section
   ========================================================= */

.gr-rebel-hero {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 82px 28px 76px !important;

  background:
    radial-gradient(circle at 18% 18%, rgba(232, 180, 0, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, rgba(247, 243, 234, 0.72) 100%) !important;

  border-bottom: 1px solid rgba(22, 34, 45, 0.08) !important;
}

.gr-rebel-hero-inner {
  width: 100% !important;
  max-width: 1220px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr) !important;
  gap: clamp(42px, 6vw, 76px) !important;
  align-items: center !important;

  --width: 100% !important;
  --content-width: 100% !important;
  --max-width: 1220px !important;
}

.gr-rebel-hero-copy,
.gr-rebel-hero-media {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  --width: 100% !important;
  --content-width: 100% !important;
  --max-width: none !important;
}

.gr-rebel-hero-copy {
  align-items: flex-start !important;
  text-align: left !important;
}

.gr-rebel-hero-media {
  align-items: center !important;
  text-align: center !important;
}

/* =========================================================
   Hero typography
   ========================================================= */

.gr-rebel-eyebrow,
.gr-rebel-eyebrow .elementor-widget-container {
  margin: 0 0 18px !important;
  padding: 0 !important;
}

.gr-rebel-eyebrow .elementor-heading-title,
.gr-rebel-eyebrow h1,
.gr-rebel-eyebrow h2,
.gr-rebel-eyebrow h3 {
  display: inline-flex !important;
  align-items: center !important;

  margin: 0 !important;
  padding: 8px 13px !important;

  background: rgba(232, 180, 0, 0.12) !important;
  color: #8a6c00 !important;

  border: 1px solid rgba(232, 180, 0, 0.30) !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

.gr-rebel-hero-copy > .elementor-widget-heading:not(.gr-rebel-eyebrow),
.gr-rebel-hero-copy > .elementor-widget-heading:not(.gr-rebel-eyebrow) .elementor-widget-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gr-rebel-hero-copy > .elementor-widget-heading:not(.gr-rebel-eyebrow) .elementor-heading-title,
.gr-rebel-hero-copy > .elementor-widget-heading:not(.gr-rebel-eyebrow) h1,
.gr-rebel-hero-copy > .elementor-widget-heading:not(.gr-rebel-eyebrow) h2 {
  color: var(--gr-rebel-navy) !important;

  max-width: 760px !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: clamp(46px, 5.6vw, 76px) !important;
  line-height: 0.98 !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;

  text-align: left !important;
}

.gr-rebel-hero-copy .elementor-widget-text-editor,
.gr-rebel-hero-copy .elementor-widget-text-editor .elementor-widget-container {
  width: 100% !important;
  max-width: 620px !important;

  margin: 26px 0 0 !important;
  padding: 0 !important;
}

.gr-rebel-hero-copy p {
  color: #3a4651 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 20px !important;
  line-height: 1.65 !important;
  font-weight: 450 !important;

  text-align: left !important;
}

/* =========================================================
   Hero buttons
   ========================================================= */

.gr-rebel-hero-copy .elementor-widget-button {
  margin: 34px 0 0 !important;
  padding: 0 !important;
}

.gr-rebel-hero-copy .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 54px !important;

  padding: 17px 28px !important;

  background: var(--gr-rebel-gold-bright) !important;
  color: var(--gr-rebel-navy) !important;

  border: 1px solid var(--gr-rebel-gold-bright) !important;
  border-radius: 11px !important;

  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;

  text-decoration: none !important;

  box-shadow: 0 16px 34px rgba(192, 154, 0, 0.20) !important;

  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

.gr-rebel-hero-copy .elementor-button:hover,
.gr-rebel-hero-copy .elementor-button:focus {
  background: #f3c832 !important;
  color: var(--gr-rebel-navy) !important;

  transform: translateY(-1px) !important;
  box-shadow: 0 20px 40px rgba(192, 154, 0, 0.26) !important;
}

/* =========================================================
   Hero image
   ========================================================= */

.gr-rebel-portrait,
.gr-rebel-portrait .elementor-widget-container {
  width: 100% !important;
  max-width: 650px !important;

  margin: 0 auto !important;
  padding: 0 !important;
}

.gr-rebel-portrait img {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  margin: 0 !important;

  border: 1px solid rgba(232, 180, 0, 0.42) !important;
  border-radius: 26px !important;

  box-shadow:
    0 28px 80px rgba(22, 34, 45, 0.16),
    0 0 0 8px rgba(255, 255, 255, 0.45) !important;
}

/* =========================================================
   Social icons
   ========================================================= */

.gr-rebel-socials {
  width: 100% !important;
  max-width: 650px !important;

  margin: 24px auto 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  --width: 100% !important;
  --content-width: 100% !important;
  --max-width: 650px !important;
}

.gr-rebel-socials .elementor-widget-container,
.gr-rebel-socials .elementor-social-icons-wrapper {
  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.gr-rebel-socials .elementor-social-icon {
  width: 44px !important;
  height: 44px !important;

  margin: 0 !important;

  border-radius: 12px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 12px 26px rgba(22, 34, 45, 0.12) !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease !important;
}

.gr-rebel-socials .elementor-social-icon:hover,
.gr-rebel-socials .elementor-social-icon:focus {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 30px rgba(22, 34, 45, 0.18) !important;
  opacity: 0.94 !important;
}

.gr-rebel-socials .elementor-social-icon i,
.gr-rebel-socials .elementor-social-icon svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Brand-ish icon colors */
.gr-rebel-socials .elementor-social-icon-instagram {
  background: #e943b3 !important;
}

.gr-rebel-socials .elementor-social-icon-x-twitter,
.gr-rebel-socials .elementor-social-icon-twitter {
  background: #000000 !important;
}

.gr-rebel-socials .elementor-social-icon-pinterest {
  background: #bd081c !important;
}

.gr-rebel-socials .elementor-social-icon-youtube {
  background: #cd201f !important;
}

/* =========================================================
   Story section
   ========================================================= */

.gr-rebel-story {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 84px 28px 96px !important;

  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.82) 0%, rgba(247, 243, 234, 0.96) 100%) !important;
}

.gr-rebel-story-inner {
  width: 100% !important;
  max-width: 860px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  text-align: left !important;

  --width: 100% !important;
  --content-width: 100% !important;
  --max-width: 860px !important;
}

.gr-rebel-story-inner .elementor-widget-heading,
.gr-rebel-story-inner .elementor-widget-heading .elementor-widget-container,
.gr-rebel-story-inner .elementor-widget-text-editor,
.gr-rebel-story-inner .elementor-widget-text-editor .elementor-widget-container {
  width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

.gr-rebel-story-inner .elementor-widget-heading {
  margin-top: 62px !important;
  margin-bottom: 20px !important;
}

.gr-rebel-story-inner .elementor-widget-heading:first-child {
  margin-top: 0 !important;
}

.gr-rebel-story-inner .elementor-heading-title,
.gr-rebel-story-inner h1,
.gr-rebel-story-inner h2,
.gr-rebel-story-inner h3 {
  color: var(--gr-rebel-navy) !important;

  margin: 0 !important;
  padding: 0 0 18px !important;

  border-bottom: 2px solid rgba(232, 180, 0, 0.42) !important;

  font-size: clamp(31px, 3.2vw, 42px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;

  text-align: left !important;
}

.gr-rebel-story-inner p {
  color: #2e3a45 !important;

  margin: 0 0 22px !important;
  padding: 0 !important;

  font-size: 18px !important;
  line-height: 1.78 !important;
  font-weight: 430 !important;

  text-align: left !important;
}

.gr-rebel-story-inner p:last-child {
  margin-bottom: 0 !important;
}

.gr-rebel-story-inner strong,
.gr-rebel-story-inner b {
  color: var(--gr-rebel-navy) !important;
  font-weight: 850 !important;
}

.gr-rebel-story-inner em,
.gr-rebel-story-inner i {
  color: var(--gr-rebel-navy) !important;
}

/* Make the “What about everyone else?” style questions stand out slightly */
.gr-rebel-story-inner blockquote {
  margin: 36px 0 !important;
  padding: 24px 28px !important;

  background: rgba(255, 255, 255, 0.62) !important;
  border-left: 4px solid var(--gr-rebel-gold-bright) !important;
  border-radius: 0 16px 16px 0 !important;
}

/* =========================================================
   Closing section
   ========================================================= */

.gr-rebel-closing {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 88px 28px 94px !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(232, 180, 0, 0.16), transparent 32%),
    linear-gradient(180deg, #101b26 0%, #0b141d 100%) !important;

  color: var(--gr-rebel-white) !important;

  border-top: 2px solid rgba(232, 180, 0, 0.46) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  text-align: center !important;
}

.gr-rebel-closing .elementor-widget-heading,
.gr-rebel-closing .elementor-widget-text-editor,
.gr-rebel-closing .elementor-widget-button,
.gr-rebel-closing .elementor-widget-heading .elementor-widget-container,
.gr-rebel-closing .elementor-widget-text-editor .elementor-widget-container,
.gr-rebel-closing .elementor-widget-button .elementor-widget-container {
  width: 100% !important;
  max-width: 860px !important;

  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;

  text-align: center !important;
}

.gr-rebel-closing .elementor-heading-title,
.gr-rebel-closing h1,
.gr-rebel-closing h2,
.gr-rebel-closing h3 {
  color: var(--gr-rebel-white) !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: clamp(38px, 5vw, 62px) !important;
  line-height: 1.04 !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;

  text-align: center !important;
}

.gr-rebel-closing .elementor-widget-text-editor {
  margin-top: 26px !important;
}

.gr-rebel-closing p {
  color: rgba(255, 255, 255, 0.80) !important;

  max-width: 720px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  font-size: 21px !important;
  line-height: 1.62 !important;
  font-weight: 430 !important;

  text-align: center !important;
}

.gr-rebel-closing .elementor-widget-button {
  margin-top: 34px !important;
}

.gr-rebel-closing .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 54px !important;

  padding: 17px 30px !important;

  background: var(--gr-rebel-gold-bright) !important;
  color: var(--gr-rebel-navy) !important;

  border: 1px solid var(--gr-rebel-gold-bright) !important;
  border-radius: 11px !important;

  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;

  text-decoration: none !important;

  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24) !important;

  transition:
    background-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

.gr-rebel-closing .elementor-button:hover,
.gr-rebel-closing .elementor-button:focus {
  background: #f3c832 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.30) !important;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1024px) {
  .gr-rebel-hero {
    padding: 70px 26px 68px !important;
  }

  .gr-rebel-hero-inner {
    max-width: 860px !important;

    grid-template-columns: 1fr !important;
    gap: 46px !important;
  }

  .gr-rebel-hero-copy {
    align-items: center !important;
    text-align: center !important;
  }

  .gr-rebel-hero-copy > .elementor-widget-heading:not(.gr-rebel-eyebrow) .elementor-heading-title,
  .gr-rebel-hero-copy > .elementor-widget-heading:not(.gr-rebel-eyebrow) h1,
  .gr-rebel-hero-copy > .elementor-widget-heading:not(.gr-rebel-eyebrow) h2,
  .gr-rebel-hero-copy p {
    text-align: center !important;
  }

  .gr-rebel-hero-copy .elementor-widget-text-editor,
  .gr-rebel-hero-copy .elementor-widget-text-editor .elementor-widget-container {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .gr-rebel-portrait,
  .gr-rebel-portrait .elementor-widget-container {
    max-width: 680px !important;
  }

  .gr-rebel-story {
    padding: 76px 26px 88px !important;
  }

  .gr-rebel-story-inner {
    max-width: 780px !important;
  }

  .gr-rebel-closing {
    padding: 78px 26px 84px !important;
  }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {
  .gr-rebel-hero {
    padding: 56px 20px 58px !important;
  }

  .gr-rebel-eyebrow .elementor-heading-title,
  .gr-rebel-eyebrow h1,
  .gr-rebel-eyebrow h2,
  .gr-rebel-eyebrow h3 {
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
  }

  .gr-rebel-hero-copy > .elementor-widget-heading:not(.gr-rebel-eyebrow) .elementor-heading-title,
  .gr-rebel-hero-copy > .elementor-widget-heading:not(.gr-rebel-eyebrow) h1,
  .gr-rebel-hero-copy > .elementor-widget-heading:not(.gr-rebel-eyebrow) h2 {
    font-size: 42px !important;
    line-height: 1.02 !important;
  }

  .gr-rebel-hero-copy p {
    font-size: 18px !important;
    line-height: 1.62 !important;
  }

  .gr-rebel-hero-copy .elementor-widget-button,
  .gr-rebel-hero-copy .elementor-button {
    width: 100% !important;
  }

  .gr-rebel-portrait img {
    border-radius: 20px !important;
    box-shadow:
      0 20px 54px rgba(22, 34, 45, 0.14),
      0 0 0 6px rgba(255, 255, 255, 0.42) !important;
  }

  .gr-rebel-socials .elementor-social-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
  }

  .gr-rebel-story {
    padding: 64px 20px 74px !important;
  }

  .gr-rebel-story-inner .elementor-widget-heading {
    margin-top: 52px !important;
    margin-bottom: 18px !important;
  }

  .gr-rebel-story-inner .elementor-heading-title,
  .gr-rebel-story-inner h1,
  .gr-rebel-story-inner h2,
  .gr-rebel-story-inner h3 {
    font-size: 31px !important;
    line-height: 1.15 !important;
    padding-bottom: 16px !important;
  }

  .gr-rebel-story-inner p {
    font-size: 17px !important;
    line-height: 1.75 !important;
    margin-bottom: 20px !important;
  }

  .gr-rebel-closing {
    padding: 68px 20px 74px !important;
  }

  .gr-rebel-closing .elementor-heading-title,
  .gr-rebel-closing h1,
  .gr-rebel-closing h2,
  .gr-rebel-closing h3 {
    font-size: 36px !important;
    line-height: 1.08 !important;
  }

  .gr-rebel-closing p {
    font-size: 18px !important;
    line-height: 1.62 !important;
  }

  .gr-rebel-closing .elementor-widget-button,
  .gr-rebel-closing .elementor-button {
    width: 100% !important;
  }
}

/* =========================================================
   Extra-small mobile
   ========================================================= */

@media (max-width: 420px) {
  .gr-rebel-hero {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .gr-rebel-hero-copy > .elementor-widget-heading:not(.gr-rebel-eyebrow) .elementor-heading-title,
  .gr-rebel-hero-copy > .elementor-widget-heading:not(.gr-rebel-eyebrow) h1,
  .gr-rebel-hero-copy > .elementor-widget-heading:not(.gr-rebel-eyebrow) h2 {
    font-size: 37px !important;
  }

  .gr-rebel-story {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .gr-rebel-story-inner .elementor-heading-title,
  .gr-rebel-story-inner h1,
  .gr-rebel-story-inner h2,
  .gr-rebel-story-inner h3 {
    font-size: 28px !important;
  }

  .gr-rebel-closing {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .gr-rebel-closing .elementor-heading-title,
  .gr-rebel-closing h1,
  .gr-rebel-closing h2,
  .gr-rebel-closing h3 {
    font-size: 33px !important;
  }
}