/* ==========================================================================
   Field Reflection — page-specific styles
   Built on top of style.css.
   Reuses the site's existing tokens:
     fonts   : Poppins (headings/UI), Nunito (body/buttons)
     accent  : #2506ad / #1a047e (indigo CTA)  |  #011aff (link blue)
     gold    : #ffae00 / #ffd900               |  navy: #000031 / #012970
     radius  : 0.5rem cards, 0.5em / 4em pill buttons
     shadow  : soft rgba(0,0,0,.1-.3) cards, glow rgba(48,68,247,.6) buttons
   ========================================================================== */

/*
  style.css sets `* { transition: all }` which animates layout/font/image
  size changes on first paint. Kill that here; re-enable only intentional ones.
*/
body.field-reflection-page,
body.field-reflection-page * {
  transition: none;
}

body.field-reflection-page .fr-stat,
body.field-reflection-page .fr-back .backbtn .btn,
body.field-reflection-page .fr-back .backbtn .btn i,
body.field-reflection-page header .navbar ul li a,
body.field-reflection-page header .logo,
body.field-reflection-page .footer .box-container .box .share a {
  transition: 0.2s ease;
}

/* Override style.css `section { min-height: 100vh }` — that made the page look zoomed out */
body.field-reflection-page section.fr-hero,
body.field-reflection-page section.fr-stats,
body.field-reflection-page section.fr-story,
body.field-reflection-page section.fr-back {
  min-height: 0;
}

body.field-reflection-page {
  overflow-x: hidden;
}

/* clear the fixed header on a page whose first section isn't a full hero */
.fr-hero {
  margin-top: 6.5rem;
  min-height: 0;
  background: rgb(255, 255, 255);
  padding-top: 5rem;
  padding-bottom: 3rem;
}

.fr-hero-inner {
  max-width: 90rem;
  margin: 0 auto;
  text-align: center;
}

.fr-kicker {
  display: inline-block;
  font-family: "Nunito", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  color: #011aff;
  background: #eef0ff;
  padding: 0.6rem 1.6rem;
  border-radius: 4em;
  margin-bottom: 1.8rem;
}

.fr-hero .heading {
  text-align: center;
  margin-bottom: 1.5rem;
}

.fr-hero-text {
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  text-transform: none;
  font-size: 1.6rem;
  color: #555;
  max-width: 62rem;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---------- stat band (dark, mirrors .work) ---------- */

.fr-stats {
  min-height: 0;
  background: linear-gradient(to bottom, #000031, #00002c);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.fr-stats-inner {
  max-width: 100rem;
  margin: 0 auto;
}

.fr-stats-title {
  color: #fff;
  text-align: center;
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.fr-stats-title span {
  color: #ffd900;
}

.fr-stats-sub {
  text-align: center;
  font-family: "Nunito", sans-serif;
  text-transform: none;
  color: #b7bbdd;
  font-size: 1.35rem;
  margin-bottom: 3rem;
}

.fr-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}

.fr-stat {
  background: rgba(255, 255, 255, 0.06);
  border: 0.1rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
  transition: 0.3s;
}

.fr-stat:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffd900;
}

.fr-stat .fr-stat-num {
  display: block;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  color: #ffd900;
}

.fr-stat .fr-stat-label {
  display: block;
  margin-top: 0.6rem;
  font-family: "Nunito", sans-serif;
  text-transform: none;
  font-size: 1.2rem;
  color: #cfd2ef;
  line-height: 1.4;
}

.fr-stats-caption {
  text-align: center;
  font-family: "Nunito", sans-serif;
  text-transform: none;
  color: #7c81b3;
  font-size: 1.25rem;
  margin-top: 2.5rem;
}

/* ---------- story sections ---------- */

.fr-story {
  min-height: 0;
  background: rgb(255, 255, 255);
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.fr-story.fr-story--alt {
  background: #e5ecfb;
}

.fr-story-inner {
  max-width: 78rem;
  margin: 0 auto;
}

.fr-tag {
  display: inline-block;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  color: #02094b;
  background: #ffd900;
  padding: 0.5rem 1.4rem;
  border-radius: 0.4rem;
  margin-bottom: 1.8rem;
}

.fr-story-title {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 3rem;
  line-height: 1.25;
  color: rgb(32, 32, 32);
  margin-bottom: 1rem;
}

.fr-story-sub {
  font-family: "Nunito", sans-serif;
  font-style: italic;
  font-weight: 600;
  text-transform: none;
  font-size: 1.7rem;
  color: #4a4a4a;
  margin-bottom: 3rem;
}

.fr-story-inner p {
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  text-transform: none;
  font-size: 1.55rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 1.8rem;
}

.fr-story-inner p strong {
  color: #1a047e;
  font-weight: 700;
}

.fr-story-inner h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: #012970;
  margin: 3.5rem 0 1.6rem;
}

/* ---------- figures / images ---------- */

.fr-figure {
  margin: 0.5rem 0 2rem;
}

.fr-figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0.6rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
}

.fr-figure figcaption {
  font-family: "Nunito", sans-serif;
  text-transform: none;
  font-size: 1.25rem;
  color: #777;
  margin-top: 0.9rem;
  padding-left: 1.2rem;
  border-left: 0.3rem solid #ffae00;
}

.fr-figure.fr-float-right {
  float: right;
  width: 42%;
  margin: 0.5rem 0 1.5rem 2.8rem;
}

.fr-figure.fr-float-left {
  float: left;
  width: 38%;
  margin: 0.5rem 2.8rem 1.5rem 0;
}

.fr-figure.fr-wide {
  width: 100%;
}

.fr-clear {
  clear: both;
}

/* ---------- pull quote ---------- */

.fr-pullquote {
  position: relative;
  font-family: "Nunito", sans-serif;
  font-style: italic;
  font-weight: 700;
  text-transform: none;
  font-size: 2rem;
  line-height: 1.55;
  color: #1a047e;
  background: #f4f2ff;
  border-left: 0.4rem solid #2506ad;
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 2.2rem 2.5rem;
  margin: 3rem 0;
}

.fr-pullquote i {
  color: #ffae00;
  font-size: 1.6rem;
  margin-right: 0.8rem;
}

.fr-byline {
  text-align: right;
  font-family: "Nunito", sans-serif;
  text-transform: none;
  font-weight: 700;
  color: #555;
  font-size: 1.4rem;
  margin-top: 2rem;
}

/* ---------- back button band ---------- */

.fr-back {
  min-height: 0;
  background: rgb(255, 255, 255);
  padding-top: 1rem;
  padding-bottom: 6rem;
}

.fr-back .backbtn {
  display: flex;
  justify-content: center;
}

.fr-back .backbtn .btn {
  position: relative;
  line-height: 0;
  padding: 1.6rem 3rem;
  border-radius: 0.5em;
  transition: 0.5s;
  color: #fff;
  background: #2506ad;
  box-shadow: 0px 5px 10px rgba(48, 68, 247, 0.6);
  text-align: center;
  display: inline-flex;
  align-items: center;
}

.fr-back .backbtn .btn span {
  font-weight: 600;
  font-size: 1.7rem;
  font-family: "Nunito", sans-serif;
}

.fr-back .backbtn .btn i {
  margin-right: 0.8rem;
  font-size: 1.5rem;
  transition: 0.3s;
}

.fr-back .backbtn .btn:hover {
  background: #1a047e;
}

.fr-back .backbtn .btn:hover i {
  transform: translateX(-8px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .fr-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .fr-story-title {
    font-size: 2.4rem;
  }
}

@media (max-width: 600px) {
  .fr-figure.fr-float-right,
  .fr-figure.fr-float-left {
    float: none;
    width: 100%;
    margin: 0.5rem 0 2rem;
  }

  .fr-pullquote {
    font-size: 1.7rem;
    padding: 1.8rem 2rem;
  }

  .fr-story-title {
    font-size: 2.1rem;
  }
}

@media (max-width: 450px) {
  .fr-hero {
    padding-top: 3.5rem;
  }

  .fr-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .fr-stat {
    padding: 1.5rem 0.8rem;
  }

  .fr-story,
  .fr-hero,
  .fr-stats,
  .fr-back {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}