/* =========================================================================
   REPLOY Power — components (desktop base)
   Clean, semantic class names rebuilt from the Webflow source.
   Every size/spacing/colour value is taken verbatim from the live
   stylesheet; only the class names and markup are new.
   ========================================================================= */

/* ----------------------------------------------------------------- TYPOGRAPHY
   Component type scale (source: bare h2/h3/h4/h5, .h2_bigger_headline,
   .h3_headline, .h4_sub_headline, .headline-paragraph, .paragraph). */
.display {            /* was .h2_bigger_headline (bare h2: 62/74) */
  margin: 0 0 30px;
  font-family: var(--font-head);
  font-size: 62px; line-height: 74px; font-weight: 700;
}
.heading {            /* was .h3_headline (bare h3: 38/45) */
  margin: 0 0 30px;
  font-family: var(--font-head);
  font-size: 38px; line-height: 45px; font-weight: 700;
}
.subheading {         /* was .h4_sub_headline (bare h4: 24/28) — Proxima in original */
  margin: 0 0 30px;
  font-family: var(--font-body);
  font-size: 24px; line-height: 28px; font-weight: 700;
}
.h5 {                 /* was .h5-body-headline (16/20) — Proxima in original */
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 16px; line-height: 20px; font-weight: 700;
}
.lead {               /* was .headline-paragraph (24/28, weight 300) */
  margin: 0 0 30px;
  font-family: var(--font-body);
  font-size: 24px; line-height: 28px; font-weight: 300;
}
.body-text {          /* was .paragraph (16, weight 300) */
  margin: 0 0 30px;
  font-family: var(--font-body);
  font-size: 16px; line-height: 24px; font-weight: 300;
}

/* Colour modifiers (source: .white/.beige/.black/.yellow on each class) */
.is-white  { color: #fff; }
.is-beige  { color: var(--reploy-beige); }
.is-black  { color: var(--reploy-black); }
.is-yellow { color: var(--reploy-yellow); }
.is-centered { text-align: center; }

/* Width caps used on some headings */
.heading--homeintro { max-width: 760px; }
.heading--oursystem { max-width: 900px; }
.subheading--narrow { max-width: 500px; }

/* --------------------------------------------------------------------- BUTTON
   was .button (+ .whitetext / .blacktext) */
.btn {
  display: inline-block;
  border: 3px solid var(--reploy-yellow);
  border-radius: 50px;
  background-color: transparent;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  padding: 12px 25px;
  font-family: var(--font-head);
  font-size: 16px; line-height: 20px; font-weight: 700;
  text-transform: none; text-decoration: none;
  cursor: pointer;
  transition: all .2s;
}
.btn:hover  { background-color: var(--reploy-yellow); color: #fff; transform: scale(.95); }
.btn:active { background-color: #43464d; }
.btn--light { color: #fff; }                 /* whitetext */
.btn--dark  { color: var(--reploy-black); }  /* blacktext */
.btn--back  { margin-top: 70px; }            /* .button.blacktext.update */

/* --------------------------------------------------------------------- LAYOUT */
.container-1200 {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; align-self: center;
  width: 100%; max-width: var(--container);
  margin: 0 auto;
}
.container-1200--left { align-self: flex-start; align-items: flex-start; }

/* was .section-50-padding */
.section {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 0 var(--pad-x);
}
/* was .vertical-padding-150 */
.section__inner {
  position: relative;
  width: 100%;
  padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y);
}
.section__inner--dark   { background-color: var(--reploy-black); padding: var(--section-pad-y) var(--pad-x); }
.section__inner--yellow {
  background-color: var(--reploy-yellow);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}

/* was .content_block / .black_content_block */
.content { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.content--padded { padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* Full-bleed image band (was .image-14) */
.section-image { width: 100%; }
.section-image img { display: block; width: 100%; }

/* ------------------------------------------------------------------- DIVIDERS
   was .section_divider + .divider_icon_top + .divider_line_yellow */
.divider {
  position: absolute; top: 0; z-index: 50;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100%; max-width: 100%; height: 1px;
  padding-left: var(--pad-x); padding-right: var(--pad-x);
}
.divider__icon { position: absolute; top: -43px; height: 86px; }
.divider__line {
  position: relative; top: 0;
  width: 100%; max-width: var(--container); height: 1px;
  background-color: var(--reploy-yellow);
}

/* ---------------------------------------------------------------- SITE HEADER
   was .navbar / .navbar-container.shadow-three / .nav-menu-two / .nav-link */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; background-color: var(--reploy-beige); }
.nav { width: 100%; padding: 0 var(--pad-x); }
.nav__inner { width: 100%; margin: 0 auto; }
.nav__wrapper { display: flex; justify-content: space-between; align-items: center; }
.nav__brand { display: inline-block; }
.nav__brand img { height: 40px; margin: 20px 0; }
.nav__menu { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0; list-style: none; }
.nav__item {
  border: 3px solid transparent; border-radius: 20px;
  margin-right: 5px; padding-top: 5px; padding-bottom: 5px;
  transition: border-color .2s;
}
.nav__item:hover { border-color: var(--reploy-yellow); }
.nav__link {
  color: #1a1b1f; letter-spacing: .25px;
  border: 3px solid transparent; border-radius: 20px;
  margin: 0 5px; padding: 5px 10px;
  font-family: var(--font-head); font-size: 14px; line-height: 20px; font-weight: 700;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.nav__link:hover, .nav__link.is-current { color: var(--reploy-yellow); }
.nav__rule { position: relative; top: 1px; width: 100%; height: 1px; background-color: var(--reploy-black); }

/* Hamburger (shown ≤991 via responsive.css) */
.nav__toggle { display: none; border: 0; background: transparent; padding: 0; cursor: pointer; }
.nav__toggle-icon {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 70px; height: 40px;
  border: 6px solid var(--reploy-yellow); border-radius: 50px;
}
.nav__toggle-bar { width: 70%; height: 6px; border-radius: 20px; background-color: var(--reploy-yellow); }

/* ----------------------------------------------------------------- HOME HERO
   was .section-hero / .background-video / ._940-container-left / .changer-* */
.hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100svw; height: 100svh;
  padding: 80px 0 0;
  color: var(--reploy-beige);
}
.hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Pattern + dark overlay (source .background-video background-image) */
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    url("../img/pattern.svg"),
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5));
  background-position: 100% 100%, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: auto 50%, auto;
}
.hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x);
}
.hero__rotator-wrap { width: 100%; margin-bottom: 5px; overflow: hidden; }
.hero__rotator { position: relative; width: 100%; height: 6vw; overflow: hidden; }
.hero__rotator-move { display: block; width: 100%; }
.hero__word {
  display: block; height: 6vw;
  font-family: var(--font-head); font-size: 5vw; line-height: 6vw; font-weight: 700;
  word-break: keep-all; color: var(--reploy-beige);
}
.hero__headline { margin: 0 0 30px; font-size: 38px; line-height: 45px; font-weight: 700; color: var(--reploy-beige); }

/* ----------------------------------------------------------------- PAGE HERO
   sub-page hero (About/SPS/Contact/Updates/post) */
.page-hero-section {       /* was .section-50-all-padding */
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  height: 70vh; padding: 130px var(--pad-x) 0;
}
.page-hero__line {         /* was .div-block-7-copy */
  position: absolute; top: 200px; left: 0;
  width: 50vw; height: 1px; background-color: var(--reploy-yellow);
}
.page-hero {               /* was .sub_page_hero */
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100%; height: 100%; background-color: #000;
}
.page-hero__img {          /* was .header_image */
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  opacity: .6;
}
.page-hero__accent {       /* was .sub_hero_element */
  position: absolute; z-index: 0; height: 300px;
}
.page-hero__tick {         /* was .div-block-7 */
  position: absolute; top: 70px; left: 0;
  width: 40px; height: 1px; background-color: var(--reploy-yellow);
}
.page-hero__eyebrow {      /* was .hero_category_text */
  position: absolute; top: 45px; left: 60px; margin: 0;
  color: var(--white); font-family: var(--font-body); font-size: 24px; font-weight: 700;
}
.page-hero__eyebrow span { font-weight: 300; }
.page-hero__title { position: relative; z-index: 2; text-align: center; }

/* ------------------------------------------------------------------ 2-COLUMN
   was ._2_column / ._2_column_image / ._2_column_content */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.grid-2__media { height: 100%; }
.grid-2__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.grid-2__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 35px 0; }

/* ------------------------------------------------------------------ 3-COLUMN
   was ._3_column.icons / ._3_column_content / .image-5 */
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 50px; }
.feature { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.feature__icon { width: 150px; height: 150px; margin-bottom: 30px; }

/* --------------------------------------------------------------- QUOTE / ATOM
   was vertical-padding-150.yellow + .div-block-9 (lottie) + .div-block-8 */
.quote-band { position: relative; }
.quote__atom {
  position: absolute; inset: 0; z-index: 0;
  display: flex; justify-content: center; align-items: center;
  width: 100%; height: 100%; opacity: .41; pointer-events: none;
}
.quote__atom > * { height: 90%; }
.quote {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: .25fr 1fr .25fr;
  grid-template-areas: "mark-a . ." ". text ." ". . mark-b";
  align-items: center;
}
.quote__mark { width: 150px; }
.quote__mark--a { grid-area: mark-a; }
.quote__mark--b { grid-area: mark-b; justify-self: end; }
.quote__text { grid-area: text; margin: 0; text-align: center; }

/* ---------------------------------------------------------------------- TEAM
   was .team-members / .teammemberwrap / .team_image */
.team { width: 100%; }
.team__grid {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 50px; width: 100%; margin-top: 70px;
}
.team__member { display: flex; flex-direction: column; align-items: center; width: 30%; }
.team__photo {
  width: 150px; height: 150px; margin-bottom: 30px;
  object-fit: cover; background-color: var(--reploy-yellow);
  filter: grayscale(1) brightness(90%);
}
.team__name { margin: 0; font-size: 24px; line-height: 28px; font-weight: 700; text-align: center; color: var(--reploy-black); }
.team__title { margin: 10px 0 30px; font-size: 16px; line-height: 20px; font-weight: 700; text-align: center; color: var(--reploy-black); }
.team__bio { margin: 0 0 15px; font-size: 16px; line-height: 24px; font-weight: 300; text-align: center; color: var(--reploy-black); }
.team__bio:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- UPDATES
   was .update_hero_item / .update_image_hero / .div-block-12 / .update_grid */
.updates-feature { background-color: var(--reploy-beige); transition: all .2s; }
.updates-feature:hover,
.update-card:hover { border: 1px solid var(--reploy-yellow); transform: scale(1.1); box-shadow: 0 0 18px rgba(0,0,0,.16); }
.updates-rule { width: 100%; height: 1px; margin-bottom: 50px; background-color: var(--reploy-yellow); }
.updates-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 51px; row-gap: 16px; }
.update-card { padding: 0; transition: all .2s; }
.update__link { display: block; width: 100%; color: var(--reploy-black); text-decoration: none; }
.update__img { width: 100%; height: 400px; background-position: 50%; background-size: cover; }
.update__body { padding: 30px 20px; background-color: var(--reploy-beige); }
.update__title { margin: 0 0 15px; font-family: var(--font-body); font-size: 24px; line-height: 28px; font-weight: 700; } /* h4_sub_headline.update — Proxima in original */
.update__date { margin: 0 0 30px; font-family: var(--font-body); font-size: 16px; font-weight: 300; color: rgba(59,56,56,.3); }
.update__excerpt { margin: 0; font-family: var(--font-body); font-size: 16px; font-weight: 300; }

/* ------------------------------------------------------------------ POST BODY
   was .rich-text-block / page hero on single posts */
.post-intro { text-align: left; }
.post-body { text-align: left; font-family: var(--font-body); font-weight: 300; }
.post-body p { margin: 0 0 20px; font-size: 16px; line-height: 24px; font-weight: 300; }
.post-body h4 { margin: 20px 0 10px; font-size: 24px; line-height: 28px; font-weight: 700; }
.post-body blockquote { border-left: 5px solid #e2e2e2; margin: 15px 0; padding: 0 20px; font-size: 18px; line-height: 22px; }
.post-body a { color: var(--reploy-yellow); }

/* --------------------------------------------------------------- CONTACT FORM
   was .form / .text-field / .message-field / .success-message / .error-message */
.contact-logo { height: 100px; margin-bottom: 100px; }
.contact-form-block { width: 100%; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; width: 100%; }
.contact-form__input,
.contact-form__textarea {
  border: 1px solid var(--reploy-black); border-radius: 0;
  color: var(--reploy-black); background-color: transparent;
  padding: 20px; font-family: var(--font-body); font-weight: 300;
}
.contact-form__input { height: 50px; }
.contact-form__textarea { grid-column: 1 / -1; width: 100%; max-width: 100%; min-height: 150px; resize: vertical; }
.contact-form__input::placeholder,
.contact-form__textarea::placeholder { color: var(--reploy-black); }
.contact-form__submit { grid-column: 1 / -1; justify-self: start; }
/* Honeypot — hidden from humans */
.contact-form__hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { grid-column: 1 / -1; margin: 0; }
.form-success {
  margin-top: 0; padding: 20px;
  border: 1px solid var(--reploy-yellow); background-color: transparent;
  font-family: var(--font-body); font-weight: 700; text-align: center;
}
.form-error {
  margin-top: 30px; padding: 20px;
  background-color: var(--reploy-yellow);
  font-family: var(--font-body); font-weight: 700; text-align: center;
}

/* ---------------------------------------------------------------------- CTA
   "Behind the scenes" / "Want to know more?" (was .footer_cta) */
.cta {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100%; padding: 130px 0;
  background-image: linear-gradient(#000, #000);
}
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.cta__pattern { position: absolute; width: 17%; }
.cta__pattern--tl { top: 0; left: 0; transform: rotate(180deg); }
.cta__pattern--br { right: 0; bottom: 0; }
.cta__inner { position: relative; z-index: 2; }

/* --------------------------------------------------------------- SITE FOOTER
   was .footer-dark / .footer-wrapper / .footer-content / .footer-block ... */
.site-footer { position: relative; margin-top: 50px; padding: 0 var(--pad-x); background-color: var(--reploy-black); border-bottom: 1px solid #e4ebf3; }
.site-footer__container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 150px 0; }
.site-footer__wrapper { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.site-footer__cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; justify-content: space-around; width: 100%; }
.site-footer__brand img { height: 55px; }
.site-footer__col { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.site-footer__title { margin-bottom: 12px; color: var(--reploy-yellow); font-family: var(--font-head); font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: 1px; }
.site-footer__link { margin: 12px 0 6px; color: var(--reploy-beige); font-family: var(--font-body); font-size: 14px; line-height: 16px; font-weight: 700; text-decoration: none; transition: color .2s; }
.site-footer__link:hover, .site-footer__link.is-current { color: var(--reploy-yellow); }
.site-footer__rule { width: 100%; height: 1px; background-color: var(--reploy-yellow); }
.site-footer__legal { display: flex; flex-direction: row; justify-content: space-between; margin-top: 40px; }
.site-footer__copyright { color: rgba(245,241,233,.5); text-align: center; font-family: var(--font-body); font-size: 14px; line-height: 16px; font-weight: 300; }

/* Reveal-on-scroll (interaction parity with Webflow fade-in) */
.reveal { opacity: 1; transform: none; }
.reveal.is-visible { opacity: 1; transform: none; }
@med