/* =========================================================
   EXCELLENT MV CREDIT COOPERATIVE
   MAIN WEBSITE STYLESHEET
   ========================================================= */


/* =========================================================
   01. GLOBAL VARIABLES
   ========================================================= */

:root {
  --green: #174f45;
  --green-2: #235f55;

  --lime: #a9ec00;
  --lime-light: #b8f31d;

  --cream: #f4f3f0;
  --cream-2: #f7f5f1;

  --ink: #143f38;
  --text: #222222;
  --muted: #666666;

  --line: #e2e2de;
  --white: #ffffff;

  --radius: 28px;

  --shadow-soft:
    0 16px 45px rgba(17, 67, 57, 0.07);

  --shadow-card:
    0 28px 65px rgba(18, 75, 63, 0.14);
}


/* =========================================================
   02. RESET / GENERAL
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family: "DM Sans", Arial, sans-serif;

  color: var(--text);
  background: var(--white);
}


/* Main page width */

.container {
  width: min(1360px, calc(100% - 48px));
  margin: auto;
}


/* Remove default top margins */

h1,
h2,
h3,
p {
  margin-top: 0;
}


/* =========================================================
   03. HEADER / NAVIGATION
   CLEAN REBUILD
   ========================================================= */


/* ---------------------------------------------------------
   MAIN HEADER
   --------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;

  width: 100%;

  background:
    rgba(255, 255, 255, 0.94);

  border-bottom:
    1px solid var(--line);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


/* ---------------------------------------------------------
   NAVIGATION CONTAINER
   --------------------------------------------------------- */

.nav-wrap {
  height: 82px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 32px;
}


/* ---------------------------------------------------------
   BRAND
   --------------------------------------------------------- */

.brand {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;

  gap: 12px;

  color:
    var(--green);

  text-decoration:
    none;
}


.brand-mark {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color:
    var(--green);

  background:
    var(--lime);

  font-size: 24px;
  font-weight: 700;

  transition:
    transform .4s cubic-bezier(.22, 1, .36, 1),
    box-shadow .35s ease;
}


.brand:hover .brand-mark {
  transform:
    rotate(18deg)
    scale(1.05);

  box-shadow:
    0 8px 20px
    rgba(119, 169, 0, .16);
}


.brand-mark.small {
  width: 44px;
  height: 44px;

  flex-basis:
    44px;
}


.brand-text {
  display: flex;

  flex-direction: column;

  line-height: 1;
}


.brand-text strong {
  color:
    var(--green);

  font-size: 25px;

  font-weight: 700;

  letter-spacing:
    -.35px;
}


.brand-text small {
  margin-top:
    5px;

  color:
    var(--green);

  font-size:
    10px;

  line-height:
    1;

  letter-spacing:
    1.5px;
}


/* ---------------------------------------------------------
   DESKTOP NAV
   --------------------------------------------------------- */

.desktop-nav {
  flex: 1 1 auto;

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

  gap: 34px;
}


.desktop-nav a {
  position: relative;

  display: inline-flex;

  padding:
    8px 0;

  color:
    #173f38;

  text-decoration:
    none;

  font-size:
    15px;

  font-weight:
    400;

  line-height:
    1;

  transition:
    color .28s ease,
    transform .28s ease;
}


/* animated nav underline */

.desktop-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 2px;

  border-radius:
    999px;

  background:
    var(--lime);

  transform:
    scaleX(0);

  transform-origin:
    right center;

  transition:
    transform .36s cubic-bezier(.22, 1, .36, 1);
}


.desktop-nav a:hover {
  color:
    var(--green);

  transform:
    translateY(-1px);
}


.desktop-nav a:hover::after {
  transform:
    scaleX(1);

  transform-origin:
    left center;
}


/* ---------------------------------------------------------
   RIGHT-SIDE ACTIONS
   --------------------------------------------------------- */

.nav-actions {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: 10px;
}


/* Search + menu button */

.icon-btn,
.menu-btn {
  position: relative;

  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;

  border-radius:
    50%;

  cursor:
    pointer;

  transition:
    transform .38s cubic-bezier(.22, 1, .36, 1),
    background-color .3s ease,
    color .3s ease,
    box-shadow .35s ease;
}


/* Search */

.icon-btn {
  color:
    var(--green);

  background:
    #f4f4f2;

  font-size:
    22px;
}


.icon-btn:hover {
  color:
    #ffffff;

  background:
    var(--green);

  transform:
    translateY(-3px);

  box-shadow:
    0 10px 22px
    rgba(23, 79, 69, .15);
}


/* Menu */

.menu-btn {
  display: none;

  align-content: center;

  gap: 4px;

  background:
    var(--green);
}


.menu-btn span {
  width: 18px;
  height: 2px;

  display: block;

  border-radius:
    99px;

  background:
    #ffffff;

  transition:
    transform .3s ease,
    width .3s ease,
    background-color .3s ease;
}


.menu-btn:hover {
  background:
    var(--lime);

  transform:
    translateY(-3px);

  box-shadow:
    0 10px 22px
    rgba(23, 79, 69, .14);
}


.menu-btn:hover span {
  background:
    var(--green);
}


.menu-btn:hover span:nth-child(1) {
  transform:
    translateX(2px);
}


.menu-btn:hover span:nth-child(3) {
  transform:
    translateX(-2px);
}


/* ---------------------------------------------------------
   MOBILE MENU
   IMPORTANT: HIDDEN ON DESKTOP
   --------------------------------------------------------- */

.mobile-menu {
  display: none;

  width: 100%;

  padding:
    18px 24px 24px;

  border-top:
    1px solid var(--line);

  background:
    #ffffff;
}


.mobile-menu a {
  display: block;

  padding:
    12px 0;

  border-bottom:
    1px solid
    rgba(23, 79, 69, .08);

  color:
    var(--green);

  text-decoration:
    none;

  font-size:
    15px;

  transition:
    color .25s ease,
    padding-left .3s ease;
}


.mobile-menu a:last-child {
  border-bottom:
    0;
}


.mobile-menu a:hover {
  padding-left:
    6px;

  color:
    #7fb900;
}


/* Class normally toggled by JS */

.mobile-menu.open {
  display: flex;

  flex-direction: column;
}


/* ---------------------------------------------------------
   TABLET / MOBILE NAVIGATION
   --------------------------------------------------------- */

@media (max-width: 1000px) {

  .desktop-nav {
    display:
      none;
  }


  .nav-actions {
    margin-left:
      auto;
  }


  .menu-btn {
    display:
      grid;
  }

}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {

  .nav-wrap {
    height:
      72px;
  }


  .brand-mark {
    width:
      38px;

    height:
      38px;

    flex-basis:
      38px;

    font-size:
      21px;
  }


  .brand-text strong {
    font-size:
      20px;
  }


  .brand-text small {
    font-size:
      8px;
  }


  .icon-btn,
  .menu-btn {
    width:
      42px;

    height:
      42px;

    flex-basis:
      42px;
  }

}


/* =========================================================
   PREMIUM GLOBAL BUTTON SYSTEM
   ========================================================= */

.btn {
  position: relative;
  isolation: isolate;

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

  gap: 14px;

  padding: 15px 26px;

  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: 999px;

  text-decoration: none;

  font-size: 15px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;

  transform: translateY(0);

  transition:
    transform 0.38s cubic-bezier(.22, 1, .36, 1),
    color 0.30s ease,
    background-color 0.30s ease,
    border-color 0.30s ease,
    box-shadow 0.38s ease;
}


/* moving highlight */

.btn::before {
  content: "";

  position: absolute;

  z-index: -1;

  width: 150%;
  aspect-ratio: 1;

  left: -125%;
  top: 50%;

  border-radius: 50%;

  background: var(--lime);

  transform:
    translateY(-50%)
    scale(.25);

  transition:
    left .55s cubic-bezier(.22, 1, .36, 1),
    transform .55s cubic-bezier(.22, 1, .36, 1);
}


.btn:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 14px 30px rgba(23, 79, 69, 0.14);
}


.btn:active {
  transform:
    translateY(-1px)
    scale(.985);
}


/* Animate arrows/icons inside normal buttons */

.btn > span {
  display: inline-flex;

  transition:
    transform .38s cubic-bezier(.22, 1, .36, 1);
}


.btn:hover > span {
  transform:
    translate(3px, -3px);
}


/* ---------------------------------------------------------
   DARK BUTTON
   --------------------------------------------------------- */

.btn.dark {
  color: #ffffff;

  background:
    var(--green);

  border-color:
    var(--green);
}


.btn.dark::before {
  background:
    var(--lime);
}


.btn.dark:hover {
  color:
    var(--green);

  border-color:
    var(--lime);

  box-shadow:
    0 16px 32px rgba(23, 79, 69, 0.18);
}


.btn.dark:hover::before {
  left: -25%;

  transform:
    translateY(-50%)
    scale(1);
}


/* ---------------------------------------------------------
   LIGHT BUTTON
   --------------------------------------------------------- */

.btn.light {
  color:
    var(--green);

  background:
    #ffffff;

  border-color:
    #deded9;
}


.btn.light::before {
  background:
    var(--green);
}


.btn.light:hover {
  color:
    #ffffff;

  border-color:
    var(--green);
}


.btn.light:hover::before {
  left: -25%;

  transform:
    translateY(-50%)
    scale(1);
}


/* ---------------------------------------------------------
   LIME BUTTON
   --------------------------------------------------------- */

.btn.lime {
  color:
    var(--green);

  background:
    var(--lime);

  border:
    1px solid var(--lime);
}


.btn.lime::before {
  background:
    var(--green);
}


.btn.lime:hover {
  color:
    #ffffff;

  border-color:
    var(--green);

  box-shadow:
    0 16px 32px rgba(23, 79, 69, 0.18);
}


.btn.lime:hover::before {
  left: -25%;

  transform:
    translateY(-50%)
    scale(1);
}


/* ---------------------------------------------------------
   KEYBOARD ACCESSIBILITY
   --------------------------------------------------------- */

.btn:focus-visible {
  outline:
    3px solid
    rgba(169, 236, 0, 0.50);

  outline-offset:
    4px;
}


/* Shared photo settings */

.image-cover {
  background-size: cover;
  background-position: center;

  background-color: #dfe4df;
}


/* =========================================================
   05. HERO SECTION
   ========================================================= */

.hero {
  padding: 78px 0 100px;
}


/* Hero heading + CTA */

.hero-copy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 40px;

  margin-bottom: 45px;
}


/* Left headline column must occupy the available space */

.hero-headline-wrap {
  flex: 1 1 auto;

  min-width: 0;
  max-width: 900px;
}


/* CTA keeps its natural width */

.hero-cta {
  flex: 0 0 auto;
}

/* =========================================================
   HERO HEADLINE ROTATOR
   ========================================================= */

.hero-headline-stage {
  position: relative;

  width: 100%;
  max-width: 900px;

  min-height: 180px;

  margin-top: 20px;
}


/* Individual headline */

.hero-headline {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;

  margin: 0;

  color: var(--green);

  font-size: clamp(52px, 6vw, 88px);
  font-weight: 500;

  line-height: 0.98;

  letter-spacing: -3.5px;

  white-space: nowrap;

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(38px);

  filter:
    blur(5px);

  pointer-events:
    none;

  transition:
    opacity .7s ease,
    transform .82s cubic-bezier(.16, 1, .3, 1),
    filter .7s ease,
    visibility .7s ease;
}


/* Lime highlighted wording */

.hero-headline span {
  color:
    #8dcd00;
}


/* Active headline */

.hero-headline.is-active {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(0);

  filter:
    blur(0);

  pointer-events:
    auto;
}


/* Outgoing headline */

.hero-headline.is-exit {
  opacity: 0;

  transform:
    translateY(-34px);

  filter:
    blur(4px);
}


/* Lime phrase subtle delayed entrance */

.hero-headline.is-active span {
  display: inline-block;

  animation:
    heroHeadlineAccent
    .78s
    .12s
    cubic-bezier(.22, 1, .36, 1)
    both;
}


@keyframes heroHeadlineAccent {

  from {
    opacity: 0;

    transform:
      translateY(14px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}

/* ---------------------------------------------------------
   HERO HEADLINE RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {

  .hero-headline-wrap {
    max-width: 740px;
  }

  .hero-headline-stage {
    min-height: 160px;
  }

  .hero-headline {
    font-size: clamp(50px, 5.7vw, 72px);
  }

}


@media (max-width: 1000px) {

  .hero-headline-wrap {
    width: 100%;
    max-width: 100%;
  }

  .hero-headline-stage {
    width: 100%;
    max-width: 100%;

    min-height: 160px;
  }

  .hero-cta {
    width: auto;
  }

}


@media (max-width: 720px) {

  .hero-headline-stage {
    min-height: 145px;
  }

  .hero-headline {
    font-size: clamp(42px, 11vw, 58px);

    letter-spacing: -2px;

    white-space: normal;
  }

}


@media (max-width: 480px) {

  .hero-headline-stage {
    min-height: 135px;
  }

  .hero-headline {
    font-size: clamp(38px, 11vw, 46px);

    letter-spacing: -1.6px;

    white-space: normal;
  }

}

.hero-cta,
.button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;
}


/* Main hero photo */

.hero-image {
  height: 465px;

  overflow: hidden;
}


/* Photo fallback */

.photo-fallback {
  height: 100%;

  display: grid;
  place-items: center;

  color: #31564f;

  background:
    linear-gradient(
      135deg,
      #e7ece8,
      #cfdad4
    );

  font-size: 24px;
}


/* =========================================================
   06. HERO FINANCIAL CARDS
   PREMIUM REBUILD + COORDINATED MOTION
   ========================================================= */


/* =========================================================
   CARD GRID
   ========================================================= */

.hero-stats,
.premium-stats {
  position: relative;
  z-index: 10;

  width: 84%;
  margin: -92px auto 0;

  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 20px;

  align-items: stretch;
}


/* =========================================================
   SHARED OUTER CARD
   ========================================================= */

.premium-stats .stat-card {
  position: relative;

  min-width: 0;
  min-height: 214px;

  overflow: hidden;

  border:
    1px solid
    rgba(23, 79, 69, 0.075);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      #f8f6f2 0%,
      #f3f1ed 100%
    );

  box-shadow:
    0 12px 30px
    rgba(23, 79, 69, 0.055);

  transform-origin:
    center bottom;

  transition:
    transform
      0.45s
      cubic-bezier(.22, 1, .36, 1),

    box-shadow
      0.45s ease,

    border-color
      0.35s ease;
}


.premium-stats .stat-card:hover {
  transform:
    translateY(-8px)
    scale(1.008);

  border-color:
    rgba(169, 236, 0, 0.48);

  box-shadow:
    0 28px 58px
    rgba(23, 79, 69, 0.14);
}


/* subtle glow */

.premium-stats .stat-card::before {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  top: -90px;
  right: -85px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(169, 236, 0, 0.16),
      rgba(169, 236, 0, 0.04) 50%,
      transparent 72%
    );

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(.22,1,.36,1);
}


.premium-stats .stat-card:hover::before {
  opacity: 1;

  transform:
    scale(1.15);
}


/* =========================================================
   SHARED ICON SYSTEM
   ========================================================= */

.stat-icon-wrap,
.highlight-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  color:
    var(--green);

  border:
    1px solid
    rgba(23, 79, 69, 0.07);

  background:
    linear-gradient(
      145deg,
      rgba(185, 239, 50, 0.24),
      rgba(169, 236, 0, 0.10)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(255, 255, 255, 0.30);

  transition:
    transform 0.4s cubic-bezier(.22,1,.36,1),
    background 0.35s ease,
    box-shadow 0.35s ease;
}


.stat-icon-wrap {
  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  border-radius: 14px;
}


.highlight-icon {
  width: 42px;
  height: 42px;

  border-radius: 13px;
}


.stat-icon {
  width: 23px;
  height: 23px;
}


.highlight-icon svg {
  width: 21px;
  height: 21px;
}


.premium-stats
.stat-card:hover
.stat-icon-wrap {
  transform:
    translateY(-3px)
    rotate(-3deg)
    scale(1.05);

  background:
    var(--lime);

  box-shadow:
    0 8px 18px
    rgba(110, 155, 0, 0.15);
}


/* =========================================================
   SHARED EYEBROW
   ========================================================= */

.stat-eyebrow {
  display: block;

  margin-bottom: 8px;

  color:
    #648079;

  font-size: 9px;

  line-height: 1.35;

  font-weight: 700;

  letter-spacing:
    0.09em;
}


/* =========================================================
   FINANCIAL SECURITY
   ========================================================= */

.stat-card-security {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(185px, 0.8fr);

  gap: 18px;

  padding: 26px;
}


.stat-main {
  position: relative;
  z-index: 3;

  min-width: 0;

  display: flex;

  flex-direction: column;

  justify-content:
    space-between;

  transition:
    transform
    0.45s
    cubic-bezier(.22,1,.36,1);
}


.stat-card-security:hover
.stat-main {
  transform:
    translateX(2px);
}


.stat-copy {
  margin-top: 18px;
}


.stat-copy h3 {
  margin:
    0
    0
    10px;

  color:
    var(--green);

  font-size: 20px;

  line-height: 1.15;

  font-weight: 700;

  transition:
    transform
    0.35s ease;
}


.stat-card-security:hover
.stat-copy h3 {
  transform:
    translateX(2px);
}


.stat-copy p {
  max-width: 285px;

  margin: 0;

  color:
    #505b58;

  font-size: 15px;

  line-height: 1.48;
}


/* =========================================================
   BANK CASH BOND
   FOURTH VISUAL CARD
   ========================================================= */

.bank-highlight {
  position: relative;
  z-index: 4;

  min-width: 0;
  min-height: 162px;

  display: flex;

  flex-direction: column;

  justify-content:
    space-between;

  padding: 20px;

  overflow: hidden;

  border:
    1px solid
    rgba(23, 79, 69, 0.035);

  border-radius: 20px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(169, 236, 0, 0.22),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #fbfcf7
    );

  box-shadow:
    0 8px 20px
    rgba(23, 79, 69, 0.025);

  transition:
    transform
      0.48s
      cubic-bezier(.22,1,.36,1),

    box-shadow
      0.4s ease,

    border-color
      0.35s ease;
}


.bank-highlight::before {
  content: "";

  position: absolute;

  width: 110px;
  height: 110px;

  right: -45px;
  bottom: -55px;

  border-radius: 50%;

  background:
    rgba(169, 236, 0, 0.08);

  transition:
    transform 0.5s
    cubic-bezier(.22,1,.36,1);
}


.stat-card-security:hover
.bank-highlight {
  transform:
    translateY(-5px)
    scale(1.018);

  border-color:
    rgba(169, 236, 0, 0.18);

  box-shadow:
    0 16px 32px
    rgba(23, 79, 69, 0.08);
}


.stat-card-security:hover
.bank-highlight::before {
  transform:
    scale(1.3);
}


.bank-highlight
.highlight-icon {
  position: relative;
  z-index: 2;
}


.bank-copy {
  position: relative;
  z-index: 2;

  margin-top: 18px;
}


.bank-copy span {
  display: block;

  margin-bottom: 5px;

  color:
    #646f6c;

  font-size: 11px;

  line-height: 1.3;
}


.bank-copy strong {
  display: block;

  color:
    var(--green);

  font-size: 26px;

  line-height: 1.05;

  font-weight: 600;

  letter-spacing:
    -0.7px;
}


.card-arrow {
  position: absolute;

  top: 15px;
  right: 15px;

  z-index: 4;

  width: 32px;
  height: 32px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color:
    var(--green);

  background:
    var(--lime);

  font-size: 15px;

  opacity: 0;

  transform:
    translateY(8px)
    rotate(-15deg)
    scale(.9);

  transition:
    opacity 0.3s ease,

    transform
      0.42s
      cubic-bezier(.22,1,.36,1);
}


.stat-card-security:hover
.card-arrow {
  opacity: 1;

  transform:
    translateY(0)
    rotate(0deg)
    scale(1);
}


/* =========================================================
   EASY LOAN
   ========================================================= */

.loan-stat-card {
  display: flex;

  flex-direction: column;

  justify-content:
    space-between;

  padding: 26px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(169, 236, 0, 0.17),
      transparent 43%
    ),
    linear-gradient(
      145deg,
      #f7f5f1,
      #f2f1ed
    );
}


.loan-icon {
  margin-bottom: 18px;
}


.loan-card-content {
  position: relative;
  z-index: 3;

  transition:
    transform
    0.42s
    cubic-bezier(.22,1,.36,1);
}


.loan-stat-card:hover
.loan-card-content {
  transform:
    translateY(-2px);
}


.loan-card-content h3 {
  margin:
    0
    0
    10px;

  color:
    var(--green);

  font-size: 29px;

  line-height: 1;

  font-weight: 600;

  letter-spacing:
    -1px;
}


.loan-card-content p {
  max-width: 250px;

  margin: 0;

  color:
    #56615e;

  font-size: 14px;

  line-height: 1.48;
}


.stat-card-footer {
  position: relative;
  z-index: 3;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 10px;

  margin-top: 18px;
}


.stat-card-footer > span {
  color:
    #7a8582;

  font-size: 10px;

  line-height: 1.3;

  font-weight: 600;
}


.round-arrow {
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color:
    var(--green);

  background:
    #ffffff;

  text-decoration: none;

  box-shadow:
    0 6px 16px
    rgba(23, 79, 69, 0.07);

  transition:
    transform
      0.4s
      cubic-bezier(.22,1,.36,1),

    background
      0.3s ease,

    box-shadow
      0.3s ease;
}


.loan-stat-card:hover
.round-arrow {
  transform:
    rotate(45deg)
    scale(1.06);

  background:
    var(--lime);

  box-shadow:
    0 9px 20px
    rgba(96, 140, 0, 0.18);
}


/* =========================================================
   INSURANCE — PREMIUM IMAGE CARD
   ========================================================= */

.insurance-stat-card {
  position: relative;

  min-height: 214px;

  display: flex;

  isolation: isolate;

  padding: 0;

  overflow: hidden;

  background-size:
    cover;

  background-position:
    center;

  transition:
    transform
      0.45s
      cubic-bezier(.22,1,.36,1),

    background-size
      1s ease,

    box-shadow
      0.45s ease;
}


/* dark controlled image treatment */

.insurance-stat-card::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(7, 38, 33, 0.05) 0%,
      rgba(7, 38, 33, 0.08) 28%,
      rgba(7, 38, 33, 0.40) 58%,
      rgba(7, 38, 33, 0.94) 100%
    );

  transition:
    background
      0.45s ease;
}


/* premium edge */

.insurance-stat-card::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-radius:
    inherit;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.10);

  opacity: 1;
}


.insurance-stat-card:hover {
  background-size:
    108%;
}


.insurance-stat-card:hover::after {
  background:
    linear-gradient(
      180deg,
      rgba(6, 35, 30, 0.02) 0%,
      rgba(6, 35, 30, 0.07) 26%,
      rgba(6, 35, 30, 0.35) 55%,
      rgba(6, 35, 30, 0.96) 100%
    );
}


/* top controls */

.insurance-top {
  position: absolute;

  top: 18px;
  left: 18px;
  right: 18px;

  z-index: 5;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 10px;
}


.insurance-icon {
  background:
    rgba(255, 255, 255, 0.94);

  border-color:
    rgba(255,255,255,.32);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  box-shadow:
    0 8px 22px
    rgba(8, 45, 38, 0.10);
}


.insurance-stat-card:hover
.insurance-icon {
  transform:
    translateY(-2px)
    rotate(-4deg)
    scale(1.05);

  background:
    var(--lime);
}


.insurance-badge {
  padding:
    8px
    12px;

  border:
    1px solid
    rgba(255, 255, 255, 0.24);

  border-radius:
    999px;

  color:
    var(--green);

  background:
    rgba(255, 255, 255, 0.92);

  box-shadow:
    0 7px 18px
    rgba(8, 44, 38, 0.08);

  font-size:
    8px;

  line-height:
    1;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  transition:
    transform
      0.4s
      cubic-bezier(.22,1,.36,1),

    background
      0.3s ease;
}


.insurance-stat-card:hover
.insurance-badge {
  transform:
    translateY(-2px);

  background:
    #ffffff;
}


/* lower content */

.insurance-content {
  position: relative;
  z-index: 5;

  width: calc(100% - 34px);

  align-self: flex-end;

  margin: 0 17px 17px;

  padding: 19px 19px 17px;

  border: 1px solid rgba(23, 79, 69, 0.08);

  border-radius: 18px;

  background: rgba(247, 245, 241, 0.96);

  box-shadow:
    0 16px 34px rgba(8, 44, 38, 0.16);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transition:
    transform 0.42s cubic-bezier(.22, 1, .36, 1),
    background 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.insurance-stat-card:hover .insurance-content {
  transform: translateY(-5px);

  background: rgba(250, 249, 245, 0.99);

  border-color: rgba(169, 236, 0, 0.30);

  box-shadow:
    0 22px 42px rgba(8, 44, 38, 0.22);
}

.insurance-stat-card:hover
.insurance-content {
  transform:
    translateY(-3px);
}


.insurance-content > span {
  display: block;

  margin-bottom: 6px;

  color: #667a75;

  font-size: 9px;

  line-height: 1.2;

  font-weight: 700;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


.insurance-content h3 {
  margin: 0 0 8px;

  color: var(--green);

  font-size: 28px;

  line-height: 1;

  font-weight: 650;

  letter-spacing: -0.8px;

  transition:
    transform 0.35s cubic-bezier(.22, 1, .36, 1);
}

.insurance-stat-card:hover .insurance-content h3 {
  transform: translateX(2px);
}


.insurance-content p {
  max-width: 235px;

  margin: 0;

  color: #53645f;

  font-size: 12px;

  line-height: 1.48;
}


/* insurance CTA */

.insurance-link {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 100%;

  gap: 12px;

  margin-top: 15px;

  color: var(--green);

  font-size: 11px;
  font-weight: 700;

  text-decoration: none;

  transition:
    color 0.3s ease;
}


.insurance-link span {
  width: 30px;
  height: 30px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: #ffffff;

  background: var(--green);

  box-shadow:
    0 6px 16px rgba(23, 79, 69, 0.16);

  transition:
    transform 0.4s cubic-bezier(.22, 1, .36, 1),
    color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}


.insurance-stat-card:hover
.insurance-link span {
  transform:
    rotate(45deg)
    scale(1.08);

  background:
    var(--lime-light);
}


/* =========================================================
   ENTRANCE ANIMATION
   3 OUTER CARDS + INNER FOURTH VISUAL
   ========================================================= */

.reveal-card {
  opacity: 1;

  transform:
    translateY(0);

  animation:
    premiumCardReveal
    0.85s
    cubic-bezier(.16,1,.3,1)
    both;
}


/* Financial Security */

.reveal-card:nth-child(1) {
  animation-delay:
    0.05s;
}


/* Easy Loan */

.reveal-card:nth-child(2) {
  animation-delay:
    0.18s;
}


/* Insurance */

.reveal-card:nth-child(3) {
  animation-delay:
    0.31s;
}


/* Bank Cash Bond behaves as visual card #2 */

.bank-highlight {
  animation:
    bankCardReveal
    0.82s
    0.17s
    cubic-bezier(.16,1,.3,1)
    both;
}


/* subtle internal stagger */

.stat-card-security
.stat-main {
  animation:
    innerContentReveal
    0.7s
    0.11s
    cubic-bezier(.22,1,.36,1)
    both;
}


.loan-stat-card
.loan-card-content,
.loan-stat-card
.stat-card-footer {
  animation:
    innerContentReveal
    0.7s
    0.27s
    cubic-bezier(.22,1,.36,1)
    both;
}


.insurance-top {
  animation:
    insuranceTopReveal
    0.72s
    0.40s
    cubic-bezier(.22,1,.36,1)
    both;
}


.insurance-content {
  animation:
    insuranceContentReveal
    0.78s
    0.46s
    cubic-bezier(.22,1,.36,1)
    both;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes premiumCardReveal {

  from {
    opacity: 0;

    transform:
      translateY(32px)
      scale(.965);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


@keyframes bankCardReveal {

  from {
    opacity: 0;

    transform:
      translateX(18px)
      translateY(8px)
      scale(.94);
  }

  to {
    opacity: 1;

    transform:
      translateX(0)
      translateY(0)
      scale(1);
  }

}


@keyframes innerContentReveal {

  from {
    opacity: 0;

    transform:
      translateY(12px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes insuranceTopReveal {

  from {
    opacity: 0;

    transform:
      translateY(-10px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes insuranceContentReveal {

  from {
    opacity: 0;

    transform:
      translateY(18px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .hero-stats,
  .premium-stats {
    width:
      calc(100% - 48px);

    grid-template-columns:
      1fr
      1fr;
  }


  .stat-card-security {
    grid-column:
      1 / -1;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .hero-stats,
  .premium-stats {
    width:
      calc(100% - 28px);

    margin-top:
      -65px;

    grid-template-columns:
      1fr;

    gap:
      14px;
  }


  .stat-card-security {
    grid-column:
      auto;

    grid-template-columns:
      1fr;

    padding:
      22px;
  }


  .bank-highlight {
    min-height:
      150px;

    margin-top:
      4px;
  }


  .loan-stat-card {
    padding:
      22px;
  }


  .insurance-stat-card {
    min-height:
      310px;

    background-size:
      cover;
  }


  .insurance-stat-card:hover {
    background-size:
      cover;
  }


  .insurance-content {
    padding:
      22px;
  }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .hero-headline,
  .hero-headline.is-active span,
  .reveal-card,
  .bank-highlight,
  .stat-main,
  .loan-card-content,
  .stat-card-footer,
  .insurance-top,
  .insurance-content {
    animation: none !important;
  }


  .hero-headline,
  .premium-stats .stat-card,
  .stat-icon-wrap,
  .highlight-icon,
  .bank-highlight,
  .round-arrow,
  .insurance-badge,
  .insurance-content,
  .insurance-link span {
    transition: none !important;
  }

}


/* =========================================================
   07. ABOUT SECTION
   ========================================================= */

.about-section {
  padding: 55px 0 110px;
}

.split-heading {
  display: grid;

  grid-template-columns: 1.15fr 0.8fr;

  gap: 80px;

  align-items: end;
}


/* Shared large section heading */

.section-heading h2,
.services-head h2,
.center-heading h2,
.team-head h2,
.testimonial-left h2,
.insights-head h2,
.faq-intro h2,
.contact-form h2 {
  margin: 28px 0;

  color: var(--green);

  font-size: clamp(42px, 4vw, 62px);

  font-weight: 500;

  line-height: 1.08;

  letter-spacing: -2px;
}

.about-copy p {
  font-size: 21px;

  line-height: 1.6;
}


/* About steps */

.steps {
  display: flex;

  gap: 30px;

  margin-bottom: 25px;
}

.steps span {
  padding-bottom: 8px;

  color: #999999;

  border-bottom: 1px solid #d9d9d4;
}

.steps .active {
  color: var(--green);

  border-color: #99d600;
}


/* =========================================================
   08. SERVICES SECTION
   REFERENCE-RECONSTRUCTED — SVG MASK ARCHITECTURE
   Based on the measured Finovate card geometry supplied in DevTools.
   Values / Hero sections are intentionally untouched.
   ========================================================= */

.services-section {
  position: relative;
  padding: 30px 0 76px;
  overflow: hidden;
  background: var(--green);
  border-radius: 0 0 32px 32px;
}

.services-pill {
  color: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.02);
}

.services-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  margin-top: 26px;
}

.services-head h2 {
  max-width: 820px;
  margin: 0;
  color: var(--white);
  font-size: clamp(42px, 4.2vw, 64px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -2.3px;
}

.services-head h2 span { color: var(--lime); }

.services-learn-btn {
  flex: 0 0 auto;
  min-width: 140px;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.services-learn-btn:hover {
  color: var(--green);
  background: var(--lime);
  border-color: var(--lime);
}

/* Four-column desktop grid — target card ≈313.33 × 378.53px */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 58px;
}

.service-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 313.333 / 378.527;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  border-radius: 24px;
  background: rgb(180, 231, 23);
  box-shadow: none;
  isolation: isolate;
  animation: serviceCardEnter .72s cubic-bezier(.22,1,.36,1) both;
  transition: transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s ease;
}

.service-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 48px rgba(5, 42, 36, 0.20);
}

/* Exact top-frame ratio: 266.324 / 313.333 = 85% */
.service-media {
  position: relative;
  width: 85%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  margin: -1px 0 0;
  overflow: visible;
  background: transparent;
}

/* Decorative SVG layer = original reference ::before, opacity .2 */
.service-shape {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  opacity: .20;
  transition: transform .65s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}

/* Exact inner-photo ratio: 219.33 / 266.324 ≈ 82.35% */
.service-photo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 82.35%;
  height: 82.35%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: transform .72s cubic-bezier(.22,1,.36,1), filter .45s ease;
}

.service-card:hover .service-photo {
  transform: scale(1.035);
  filter: saturate(1.035) contrast(1.01);
}

.service-card:hover .service-shape {
  transform: scale(1.018);
  opacity: .24;
}

/* Card-specific two-layer SVG architecture discovered in DevTools */
.service-card-1 .service-shape {
  background-image: url("https://finovate.vamtam.com/wp-content/uploads/2025/02/mask-sevice-1.1.svg");
}
.service-card-1 .service-photo {
  -webkit-mask-image: url("https://finovate.vamtam.com/wp-content/uploads/2025/02/mask-sevice-1-1.svg");
  mask-image: url("https://finovate.vamtam.com/wp-content/uploads/2025/02/mask-sevice-1-1.svg");
}

.service-card-2 .service-shape {
  background-image: url("https://finovate.vamtam.com/wp-content/uploads/2025/02/mask-sevice-2.1.svg");
}
.service-card-2 .service-photo {
  -webkit-mask-image: url("https://finovate.vamtam.com/wp-content/uploads/2025/02/mask-sevice-2.2.svg");
  mask-image: url("https://finovate.vamtam.com/wp-content/uploads/2025/02/mask-sevice-2.2.svg");
}

.service-card-3 .service-shape {
  background-image: url("https://finovate.vamtam.com/wp-content/uploads/2025/02/mask-sevice-3.1.svg");
}
.service-card-3 .service-photo {
  -webkit-mask-image: url("https://finovate.vamtam.com/wp-content/uploads/2025/02/mask-sevice-3.2.svg");
  mask-image: url("https://finovate.vamtam.com/wp-content/uploads/2025/02/mask-sevice-3.2.svg");
}

.service-card-4 .service-shape {
  background-image: url("https://finovate.vamtam.com/wp-content/uploads/2025/03/mask-sevice-4.1.svg");
}
.service-card-4 .service-photo {
  -webkit-mask-image: url("https://finovate.vamtam.com/wp-content/uploads/2025/03/mask-sevice-4.2.svg");
  mask-image: url("https://finovate.vamtam.com/wp-content/uploads/2025/03/mask-sevice-4.2.svg");
}

/* Reference footer: 313.33 × ~93.2px, 20px padding */
.service-card-bottom {
  position: relative;
  z-index: 4;
  width: 100%;
  min-height: 93px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px;
}

.service-card h3 {
  min-width: 0;
  max-width: calc(100% - 64px);
  margin: 0;
  color: var(--green);
  font-size: clamp(19px, 1.55vw, 24px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.55px;
}

/* Reference arrow ≈51.994px, cream, circular */
.service-card .service-arrow {
  position: static;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--green);
  background: rgb(246, 245, 242);
  text-decoration: none;
  box-shadow: none;
  transition: transform .34s cubic-bezier(.22,1,.36,1), background .3s ease;
}

.service-card .service-arrow svg {
  width: 18px;
  height: 18px;
}

.service-card:hover .service-arrow {
  transform: rotate(45deg) scale(1.03);
  background: #fff;
}

.service-card:nth-child(1) { animation-delay: 0s; }
.service-card:nth-child(2) { animation-delay: .05s; }
.service-card:nth-child(3) { animation-delay: .10s; }
.service-card:nth-child(4) { animation-delay: .15s; }

@keyframes serviceCardEnter {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card { aspect-ratio: 313.333 / 378.527; }
  .service-card h3 { font-size: clamp(21px, 2.4vw, 26px); }
}

@media (max-width: 760px) {
  .services-section { padding: 24px 0 58px; border-radius: 0 0 24px 24px; }
  .services-head { align-items: flex-start; flex-direction: column; gap: 24px; }
  .services-head h2 { font-size: clamp(38px, 11vw, 54px); letter-spacing: -1.7px; }
  .service-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 42px; }
  .service-card { width: min(100%, 430px); justify-self: center; }
  .service-card h3 { font-size: clamp(22px, 6vw, 27px); }
}

@media (prefers-reduced-motion: reduce) {
  .service-card { animation: none; }
  .service-card,
  .service-photo,
  .service-shape,
  .service-card .service-arrow { transition: none; }
}

/* =========================================================
   09. VALUES SECTION
   PREMIUM ICONS + INTERACTIVE HOVER
   ========================================================= */

.values-section {
  padding: 90px 0 100px;
}

.center-heading {
  text-align: center;
}

.center-heading h2 {
  max-width: 920px;
  margin-inline: auto;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 58px;
}


/* ---------------------------------------------------------
   VALUE CARD
   --------------------------------------------------------- */

.value-card {
  position: relative;
  isolation: isolate;

  min-height: 390px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 30px 14px 14px;

  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: 26px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(23, 79, 69, 0.025);

  transition:
    transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.42s ease;
}

/* soft lime glow behind the card on hover */
.value-card::before {
  content: "";

  position: absolute;
  inset: -35%;
  z-index: -1;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(169, 236, 0, 0.18),
      rgba(169, 236, 0, 0.06) 34%,
      transparent 62%
    );

  opacity: 0;
  transform: scale(0.85);

  transition:
    opacity 0.4s ease,
    transform 0.5s ease;
}

.value-card:hover {
  transform: translateY(-9px);

  border-color: rgba(142, 205, 0, 0.65);

  background:
    linear-gradient(
      160deg,
      #fbfff2 0%,
      #f7fbe9 48%,
      #ffffff 100%
    );

  box-shadow:
    0 24px 55px rgba(23, 79, 69, 0.12),
    0 0 0 1px rgba(169, 236, 0, 0.08);
}

.value-card:hover::before {
  opacity: 1;
  transform: scale(1);
}


/* ---------------------------------------------------------
   PREMIUM ICON SHELL
   --------------------------------------------------------- */

.value-icon-shell {
  position: relative;
  z-index: 2;

  width: 78px;
  height: 78px;

  display: grid;
  place-items: center;

  margin: 0 0 0 16px;

  border-radius: 50%;

  color: var(--green);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(247, 251, 239, 0.98)
    );

  border: 1px solid rgba(141, 205, 0, 0.28);

  box-shadow:
    0 10px 25px rgba(23, 79, 69, 0.08),
    inset 0 0 0 5px rgba(169, 236, 0, 0.035);

  transition:
    transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    color 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.42s ease;
}

.value-icon-shell::after {
  content: "";

  position: absolute;
  inset: 5px;

  border-radius: inherit;

  border: 1px solid rgba(169, 236, 0, 0.10);

  pointer-events: none;
}

.value-icon-svg {
  width: 48px;
  height: 48px;

  overflow: visible;

  transition:
    transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.35s ease;
}

.value-card:hover .value-icon-shell {
  transform: translateY(-3px) scale(1.045);

  color: #12493f;

  border-color: rgba(169, 236, 0, 0.72);

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f5ffe1
    );

  box-shadow:
    0 16px 32px rgba(23, 79, 69, 0.12),
    0 0 0 5px rgba(169, 236, 0, 0.08);
}

.value-card:hover .value-icon-svg {
  transform: scale(1.06);

  filter:
    drop-shadow(0 4px 7px rgba(23, 79, 69, 0.10));
}


/* ---------------------------------------------------------
   LIME ACCENT LINE
   --------------------------------------------------------- */

.value-accent {
  position: absolute;
  left: 30px;
  top: 183px;

  width: 34px;
  height: 3px;

  border-radius: 999px;

  background: var(--lime);

  transform-origin: left center;

  transition:
    width 0.38s ease,
    transform 0.38s ease;
}

.value-card:hover .value-accent {
  width: 54px;
  transform: translateX(2px);
}


/* ---------------------------------------------------------
   INNER CONTENT BOX
   --------------------------------------------------------- */

.value-box {
  position: relative;
  z-index: 2;

  min-height: 194px;

  padding: 28px 22px;

  border-radius: 18px;

  background: var(--cream);

  border: 1px solid transparent;

  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    transform 0.38s ease,
    box-shadow 0.38s ease;
}

.value-card:hover .value-box {
  transform: translateY(-2px);

  background: rgba(255, 255, 255, 0.78);

  border-color: rgba(169, 236, 0, 0.12);

  box-shadow:
    0 10px 25px rgba(23, 79, 69, 0.045);
}

.value-box h3 {
  margin: 0 0 24px;

  color: var(--green);

  font-size: 22px;
  line-height: 1.12;

  font-weight: 700;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.value-card:hover .value-box h3 {
  color: #12493f;
  transform: translateX(2px);
}

.value-box p {
  margin: 0;

  color: #555555;

  font-size: 15px;
  line-height: 1.55;

  transition: color 0.3s ease;
}

.value-card:hover .value-box p {
  color: #3f504c;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1000px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {
  .values-grid {
    grid-template-columns: 1fr;
  }

  .value-card {
    min-height: 360px;
  }

  .value-icon-shell {
    width: 72px;
    height: 72px;
  }

  .value-icon-svg {
    width: 43px;
    height: 43px;
  }

  .value-accent {
    top: 169px;
  }
}


/* =========================================================
   10. FEATURE / WHY US BANNER
   REFERENCE-MATCHED
   ========================================================= */


/* ---------------------------------------------------------
   FULL IMAGE BANNER
   --------------------------------------------------------- */

.feature-banner {
  position: relative;

  min-height: 650px;

  display: flex;
  align-items: flex-end;

  padding:
    0
    max(5.3vw, 30px)
    42px;

  overflow: hidden;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ---------------------------------------------------------
   MAIN WHY US FLOATING CARD
   --------------------------------------------------------- */

.feature-panel,
.why-us-card {
  position: relative;

  width: min(630px, 46vw);
  min-height: 346px;

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  padding:
    32px
    32px
    30px;

  overflow: hidden;

  border-radius: 24px;

  background:
    rgba(246, 242, 236, 0.94);

  box-shadow:
    0 8px 24px
    rgba(20, 63, 56, 0.08);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


/* ---------------------------------------------------------
   TOP ROW
   --------------------------------------------------------- */

.why-us-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


/* WHY US pill */

.why-us-pill {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 34px;

  padding:
    0
    20px;

  border:
    1px solid
    rgba(23, 79, 69, 0.15);

  border-radius:
    999px;

  color:
    var(--green);

  background:
    transparent;

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    500;

  letter-spacing:
    0.02em;

  text-transform:
    uppercase;
}


/* ---------------------------------------------------------
   TOP-RIGHT LIME STAR
   --------------------------------------------------------- */

.why-us-star {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: var(--green);
  background: var(--lime);

  font-size: 29px;
  font-weight: 900;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;

  -webkit-text-stroke: 0.6px var(--green);

  transform: rotate(0deg);

  transition:
    transform 0.45s cubic-bezier(.22, 1, .36, 1);
}


/* subtle star interaction */

.why-us-card:hover
.why-us-star {
  transform:
    rotate(45deg);
}


/* ---------------------------------------------------------
   MAIN COPY AREA
   --------------------------------------------------------- */

.why-us-main {
  position: relative;

  margin-top:
    46px;
}


/* first headline */

.why-us-main h2 {
  margin:
    0;

  color:
    var(--green);

  font-size:
    clamp(
      38px,
      3.15vw,
      51px
    );

  line-height:
    1.02;

  font-weight:
    400;

  letter-spacing:
    -1.8px;
}


/* ---------------------------------------------------------
   LIME HIGHLIGHT HEADLINE
   --------------------------------------------------------- */

.why-us-highlight-wrap {
  display: block;
  min-height: 58px;
  margin-top: 2px;
}   


.why-us-highlight {
  position: relative;

  display: inline-block;

  min-width: 12px;

  padding:
    3px
    11px
    7px;

  overflow: hidden;

  border-radius: 8px;

  color: var(--green);
  background: var(--lime);

  font-size:
    clamp(
      37px,
      3.15vw,
      50px
    );

  line-height: 1;

  font-weight: 400;

  letter-spacing: -1.8px;

  white-space: nowrap;

  vertical-align: top;
}

.why-us-highlight::after {
  content: "";

  display: inline-block;

  width: 2px;
  height: 0.82em;

  margin-left: 4px;

  vertical-align: -0.05em;

  background: var(--green);

  animation:
    whyUsCursorBlink
    0.75s
    steps(1)
    infinite;
}


@keyframes whyUsCursorBlink {
  0%,
  48% {
    opacity: 1;
  }

  49%,
  100% {
    opacity: 0;
  }
}


/* ---------------------------------------------------------
   BOTTOM ROW
   --------------------------------------------------------- */

.why-us-footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  margin-top:
    34px;
}


/* supporting text */

.why-us-footer p {
  max-width:
    360px;

  margin:
    0;

  color:
    #252525;

  font-size:
    15px;

  line-height:
    1.4;

  font-weight:
    400;
}


/* ---------------------------------------------------------
   CTA BUTTON
   --------------------------------------------------------- */

.why-us-button {
  min-width:
    168px;

  min-height:
    50px;

  flex:
    0 0
    auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    13px
    24px;

  border-radius:
    999px;

  color:
    #ffffff;

  background:
    var(--green);

  text-decoration:
    none;

  text-align:
    center;

  font-size:
    14px;

  line-height:
    1.15;

  font-weight:
    600;

  transition:
    transform
    0.3s ease,

    background-color
    0.3s ease,

    color
    0.3s ease,

    box-shadow
    0.3s ease;
}


.why-us-button:hover {
  transform:
    translateY(-2px);

  color:
    var(--green);

  background:
    var(--lime);

  box-shadow:
    0 10px 24px
    rgba(23, 79, 69, 0.14);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .feature-banner {
    min-height:
      610px;

    padding:
      0
      36px
      38px;
  }


  .feature-panel,
  .why-us-card {
    width:
      min(
        620px,
        62vw
      );

    min-height:
      330px;
  }


  .why-us-highlight {
    white-space:
      normal;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .feature-banner {
    min-height:
      620px;

    align-items:
      flex-end;

    padding:
      0
      16px
      22px;

    background-position:
      center;
  }


  .feature-panel,
  .why-us-card {
    width:
      100%;

    min-height:
      0;

    padding:
      24px;

    border-radius:
      22px;
  }


  .why-us-star {
    width:
      40px;

    height:
      40px;

    flex-basis:
      40px;

    font-size:
      21px;
  }


  .why-us-main {
    margin-top:
      38px;
  }


  .why-us-main h2 {
    font-size:
      clamp(
        34px,
        9vw,
        44px
      );

    letter-spacing:
      -1.3px;
  }


  .why-us-highlight {
    margin-top:
      5px;

    white-space:
      normal;

    font-size:
      clamp(
        34px,
        9vw,
        44px
      );

    letter-spacing:
      -1.3px;
  }


  .why-us-footer {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      20px;

    margin-top:
      30px;
  }


  .why-us-footer p {
    max-width:
      100%;

    font-size:
      14px;
  }


  .why-us-button {
    min-width:
      160px;
  }

}


/* =========================================================
   11. MANAGEMENT TEAM
   REFERENCE-MATCHED + HOVER BEHAVIOR
   ========================================================= */


.team-section {
  width: 100%;

  padding:
    22px
    0
    64px;

  background:
    #f7f6f2;
}


/* ---------------------------------------------------------
   TEAM INNER WIDTH
   --------------------------------------------------------- */

.team-container {
  width:
    min(
      1348px,
      calc(100% - 96px)
    );

  margin:
    0 auto;
}


/* ---------------------------------------------------------
   SMALL OUR TEAM LABEL
   --------------------------------------------------------- */

.team-pill {
  margin:
    0
    0
    25px;

  padding:
    9px
    20px;

  border:
    1px solid
    #dcddd8;

  background:
    transparent;

  color:
    var(--green);

  font-size:
    11px;

  line-height:
    1;

  letter-spacing:
    0.02em;
}


/* ---------------------------------------------------------
   HEADING ROW
   --------------------------------------------------------- */

.team-head {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    40px;

  margin-bottom:
    40px;
}


.team-heading {
  min-width:
    0;
}


.team-head h2 {
  max-width:
    760px;

  margin:
    0;

  color:
    var(--green);

  font-size:
    clamp(
      42px,
      3.4vw,
      54px
    );

  font-weight:
    400;

  line-height:
    1.11;

  letter-spacing:
    -1.7px;
}


.team-head h2 span {
  color:
    #86c900;
}


/* ---------------------------------------------------------
   CAREERS + VIEW ALL
   --------------------------------------------------------- */

.team-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    20px;

  padding-bottom:
    5px;
}


.team-careers {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  color:
    #292929;

  text-decoration:
    none;

  font-size:
    14px;

  font-weight:
    500;

  white-space:
    nowrap;
}


.team-careers > span {
  width:
    21px;

  height:
    21px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #9be300;

  color:
    var(--green);

  font-size:
    12px;

  line-height:
    1;
}


.team-view-all {
  min-width:
    111px;

  height:
    50px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 25px;

  border-radius:
    999px;

  color:
    #ffffff;

  background:
    var(--green);

  text-decoration:
    none;

  font-size:
    14px;

  font-weight:
    600;

  transition:
    transform
    0.3s ease,
    box-shadow
    0.3s ease;
}


.team-view-all:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 10px 25px
    rgba(
      23,
      79,
      69,
      0.16
    );
}


/* ---------------------------------------------------------
   FOUR CARDS
   --------------------------------------------------------- */

.team-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    20px;

  margin:
    0;
}


/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

.team-card {
  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      23,
      79,
      69,
      0.025
    );

  border-radius:
    26px;

  background:
    #ffffff;

  transition:
    transform
    0.38s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    ),

    box-shadow
    0.38s ease,

    background-color
    0.32s ease,

    border-color
    0.32s ease;
}


.team-card:hover {
  transform:
    translateY(-3px);

  background:
    var(--lime);

  border-color:
    var(--lime);

  box-shadow:
    0 16px 32px
    rgba(
      23,
      79,
      69,
      0.08
    );
}


/* ---------------------------------------------------------
   PHOTO AREA
   --------------------------------------------------------- */

.team-photo-area {
  height:
    232px;

  display:
    grid;

  place-items:
    center;

  background:
    #ffffff;

  transition:
    background-color
    0.32s ease;
}


.team-card:hover
.team-photo-area {
  background:
    var(--lime);
}


/* ---------------------------------------------------------
   TEMPORARY PHOTO PLACEHOLDER
   --------------------------------------------------------- */

.team-photo-placeholder {
  width:
    168px;

  height:
    168px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border-radius:
    50%;

  color:
    #64746f;

  background:
    #f1f0ec;

  font-size:
    16px;

  font-weight:
    400;

  transition:
    transform
    0.4s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    ),

    background-color
    0.32s ease;
}


.team-card:hover
.team-photo-placeholder {
  transform:
    scale(1.035);

  background:
    #f5f4f0;
}


/* ---------------------------------------------------------
   CARD FOOTER
   --------------------------------------------------------- */

.team-info {
  min-height:
    98px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    20px;

  border-top:
    1px solid
    #e1e1dd;

  background:
    #ffffff;

  transition:
    background-color
    0.32s ease,

    border-color
    0.32s ease;
}


.team-card:hover
.team-info {
  background:
    var(--lime);

  border-top-color:
    rgba(
      23,
      79,
      69,
      0.12
    );
}


.team-info h3 {
  margin:
    0
    0
    8px;

  color:
    var(--green);

  font-size:
    18px;

  line-height:
    1.12;

  font-weight:
    500;

  letter-spacing:
    -0.2px;
}


.team-info p {
  margin:
    0;

  color:
    var(--green);

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    500;
}


/* ---------------------------------------------------------
   ROUND ARROW
   --------------------------------------------------------- */

.team-arrow {
  width:
    54px;

  height:
    54px;

  flex:
    0 0
    54px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  color:
    var(--green);

  background:
    #f6f5f2;

  text-decoration:
    none;

  font-size:
    22px;

  line-height:
    1;

  transition:
    transform
    0.32s ease,

    background-color
    0.32s ease,

    color
    0.32s ease;
}


.team-card:hover
.team-arrow {
  transform:
    rotate(0deg);

  color:
    var(--lime);

  background:
    var(--green);
}


/* ---------------------------------------------------------
   OPTIONAL INNER HOVER DETAIL
   --------------------------------------------------------- */

.team-card:hover
.team-info h3,

.team-card:hover
.team-info p {
  color:
    var(--green);
}


/* =========================================================
   TABLET
   ========================================================= */

@media
(max-width: 1100px) {

  .team-container {
    width:
      min(
        900px,
        calc(100% - 48px)
      );
  }


  .team-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media
(max-width: 720px) {

  .team-section {
    padding:
      28px
      0
      48px;
  }


  .team-container {
    width:
      calc(100% - 32px);
  }


  .team-head {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      24px;

    margin-bottom:
      30px;
  }


  .team-head h2 {
    font-size:
      clamp(
        38px,
        11vw,
        50px
      );
  }


  .team-actions {
    width:
      100%;

    justify-content:
      space-between;

    padding-bottom:
      0;
  }


  .team-grid {
    grid-template-columns:
      1fr;
  }


  .team-photo-area {
    height:
      228px;
  }

}


/* =========================================================
   12. TRUST / PARTNER SECTION
   ========================================================= */

.trust-section {
  display: grid;

  grid-template-columns: 2fr 1fr;

  gap: 20px;

  padding-bottom: 90px;
}

.trust-media {
  position: relative;

  min-height: 530px;

  border-radius: 24px;
}

.partner-badge {
  position: absolute;

  right: 28px;
  bottom: 28px;

  padding: 25px 35px;

  border-radius: 20px;

  color: var(--green);

  background: #f5f1ed;

  font-size: 14px;
}

.partner-badge strong {
  font-size: 24px;
}


/* Right partner information card */

.trust-card {
  display: flex;
  flex-direction: column;

  padding: 32px;

  border-radius: 24px;

  background: var(--lime);
}

.dark-pill {
  border-color: #6ca300;
}

.trust-card h2 {
  margin: 28px 0 auto;

  color: var(--green);

  font-size: 34px;
  font-weight: 500;

  line-height: 1.1;
}

.trust-card p {
  font-size: 17px;

  line-height: 1.5;
}

.trust-card small {
  display: block;

  margin-top: 18px;

  color: #3b5b52;

  line-height: 1.4;
}


/* =========================================================
   13. TESTIMONIAL SECTION
   ========================================================= */

.testimonial-section {
  display: grid;

  grid-template-columns: 1fr 1.1fr;

  gap: 70px;

  padding: 40px 0 90px;
}

.testimonial-left p {
  color: #666666;
}

.quote-card {
  min-height: 400px;

  display: flex;
  flex-direction: column;

  padding: 35px;

  border-radius: 26px;

  background: #f5f4f1;
}

.quote {
  color: var(--green);

  font-size: 70px;

  line-height: 1;
}

.quote-card > p {
  margin: auto 35px;

  color: #3b3b3b;

  font-size: 22px;

  line-height: 1.55;
}

.quote-person {
  display: flex;
  align-items: center;

  gap: 14px;
}

.mini-avatar {
  width: 50px;
  height: 50px;

  border-radius: 50%;

  background: #d8ddd9;
}

.quote-person span {
  display: block;

  margin-top: 4px;

  color: #777777;

  font-size: 12px;
}


/* =========================================================
   14. INSIGHTS SECTION
   REFERENCE-MATCHED
   ========================================================= */

.insights-section {
  padding: 54px 0 68px;
  background: #f5f4f1;
}

.insights-head h2 {
  max-width: 650px;
}

/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;

  margin-top: 40px;
}


/* ---------------------------------------------------------
   STANDARD CARD
   --------------------------------------------------------- */

.insight-card {
  position: relative;

  min-width: 0;
  min-height: 560px;

  display: flex;
  flex-direction: column;

  padding: 20px;

  overflow: hidden;

  border-radius: 26px;

  background: #ffffff;

  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.32s ease,
    box-shadow 0.32s ease;
}

.insight-card:hover {
  transform: translateY(-3px);

  background: var(--lime);

  box-shadow:
    0 18px 36px rgba(23, 79, 69, 0.08);
}


/* ---------------------------------------------------------
   PHOTO
   --------------------------------------------------------- */

.insight-photo {
  height: 305px;

  flex: 0 0 auto;

  margin-bottom: 18px;

  overflow: hidden;

  border-radius: 18px;

  background-size: cover;
  background-position: center;

  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.insight-card:hover .insight-photo {
  transform: scale(1.01);
}


/* ---------------------------------------------------------
   CATEGORY
   --------------------------------------------------------- */

.insight-card small {
  display: block;

  margin: 0 0 12px;

  color: var(--green);

  font-size: 11px;

  line-height: 1.2;

  font-weight: 500;

  text-transform: uppercase;
}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

.insight-card h3 {
  max-width: 95%;

  margin: 0;

  color: var(--green);

  font-size: 24px;

  line-height: 1.23;

  font-weight: 500;

  letter-spacing: -0.4px;
}


/* ---------------------------------------------------------
   NORMAL CARD ARROW
   --------------------------------------------------------- */

.insight-card > a {
  position: absolute;

  right: 20px;
  bottom: 20px;

  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: var(--green);

  background: #f6f5f2;

  text-decoration: none;

  font-size: 22px;

  line-height: 1;

  transition:
    background-color 0.32s ease,
    color 0.32s ease,
    transform 0.32s ease;
}


/* Hovered outer cards */

.insight-card:not(.dark-insight):hover > a {
  color: var(--lime);

  background: var(--green);

  transform: translateY(-1px);
}


/* ---------------------------------------------------------
   DARK CENTER CARD
   REFERENCE-STYLE REPORT CARD
   --------------------------------------------------------- */

.dark-insight {
  position: relative;

  min-height: 560px;

  overflow: hidden;

  color: #ffffff;

  background: var(--green);
}


/* Keep center card dark even on hover */

.dark-insight:hover {
  background: var(--green);
}


/* ---------------------------------------------------------
   TOP CONTENT
   --------------------------------------------------------- */

.dark-insight-top {
  position: relative;
  z-index: 10;

  flex: 0 0 auto;
}


.dark-insight-top small {
  display: block;

  margin: 0 0 12px;

  color: var(--lime);

  font-size: 11px;
  line-height: 1.2;

  font-weight: 500;

  text-transform: uppercase;
}


.dark-insight-top h3 {
  position: relative;
  z-index: 10;

  max-width: 92%;

  margin: 0;

  color: var(--lime);

  font-size: 24px;
  line-height: 1.18;

  font-weight: 500;

  letter-spacing: -0.45px;
}


/* ---------------------------------------------------------
   MAIN REPORT VISUAL
   --------------------------------------------------------- */

.dark-insight-visual {
  position: absolute;

  left: 20px;
  right: 20px;

  top: 164px;
  bottom: 94px;

  z-index: 2;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius: 18px;

  background:
    rgba(255, 255, 255, 0.015);
}


/* ---------------------------------------------------------
   LARGE LIME GEOMETRIC BACKDROP
   --------------------------------------------------------- */

.report-lime-backdrop {
  position: absolute;

  z-index: 1;

  width: 330px;
  height: 330px;

  right: -108px;
  bottom: -132px;

  border-radius:
    48% 0 0 48%;

  background: var(--lime);

  transform:
    rotate(-20deg);

  transform-origin:
    center center;
}


/* Secondary lime geometry */

.report-lime-backdrop::before {
  content: "";

  position: absolute;

  width: 150px;
  height: 235px;

  left: -62px;
  top: 18px;

  border-radius:
    90px 90px 18px 18px;

  background:
    var(--lime);

  transform:
    rotate(18deg);
}


/* ---------------------------------------------------------
   REPORT SHEETS
   --------------------------------------------------------- */

.report-sheet {
  position: absolute;

  z-index: 3;

  width: 154px;
  height: 214px;

  left: 50%;
  top: 50%;

  padding:
    16px 14px;

  overflow: hidden;

  border-radius: 5px;

  color: rgba(23, 79, 69, 0.78);

  font-size: 8px;

  line-height: 1;

  font-weight: 600;

  letter-spacing: 0.08em;

  box-shadow:
    0 12px 22px
    rgba(0, 0, 0, 0.08);

  transform-origin:
    center center;
}


.report-sheet span {
  position: relative;

  z-index: 2;
}


/* rear sheet */

.report-sheet-1 {
  background:
    #85bf25;

  transform:
    translate(-76%, -49%)
    rotate(-18deg);
}


/* middle sheet */

.report-sheet-2 {
  z-index: 4;

  background:
    #b5ea36;

  transform:
    translate(-59%, -50%)
    rotate(-7deg);
}


/* subtle sheet detail */

.report-sheet::after {
  content: "";

  position: absolute;

  left: 14px;
  right: 14px;
  bottom: 18px;

  height: 48px;

  border-top:
    1px solid
    rgba(23, 79, 69, 0.15);

  border-bottom:
    1px solid
    rgba(23, 79, 69, 0.10);
}


/* ---------------------------------------------------------
   FRONT REPORT / BOOK
   --------------------------------------------------------- */

.report-book {
  position: absolute;

  z-index: 5;

  width: 170px;
  height: 225px;

  left: 50%;
  top: 50%;

  padding:
    19px 17px;

  overflow: hidden;

  border-radius: 5px;

  color: #ffffff;

  background:
    #153f37;

  box-shadow:
    0 22px 32px
    rgba(0, 0, 0, 0.22);

  transform:
    translate(-36%, -51%)
    rotate(11deg);

  transform-origin:
    center center;
}


/* faint vertical graphic on cover */

.report-book::before {
  content: "";

  position: absolute;

  width: 90px;
  height: 250px;

  right: -46px;
  top: -14px;

  border-radius:
    80px;

  background:
    rgba(169, 236, 0, 0.10);

  transform:
    rotate(-16deg);
}


/* cover label */

.report-book-label {
  position: relative;
  z-index: 2;

  display: block;

  margin-bottom: 23px;

  color:
    rgba(255, 255, 255, 0.62);

  font-size: 8px;

  line-height: 1;

  font-weight: 600;

  letter-spacing: 0.08em;
}


/* report title */

.report-book strong {
  position: relative;
  z-index: 2;

  display: block;

  max-width: 130px;

  color: #ffffff;

  font-size: 20px;

  line-height: 1.05;

  font-weight: 500;

  letter-spacing: -0.5px;
}


/* report year */

.report-book > small {
  position: absolute;

  left: 17px;
  bottom: 17px;

  z-index: 2;

  margin: 0;

  color: var(--lime);

  font-size: 9px;

  line-height: 1;

  font-weight: 500;

  text-transform: uppercase;
}


/* ---------------------------------------------------------
   BOTTOM REPORT FOOTER
   --------------------------------------------------------- */

.dark-insight-footer {
  position: absolute;

  left: 20px;
  right: 20px;
  bottom: 20px;

  z-index: 12;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;
}


/* Report label */

.report-footer-label {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: var(--lime);

  font-size: 10px;

  line-height: 1;

  font-weight: 500;

  text-transform: uppercase;
}


/* star icon */

.report-footer-star {
  display: inline-grid;

  place-items: center;

  color: var(--lime);

  font-size: 20px;

  line-height: 1;
}


/* ---------------------------------------------------------
   CENTER CARD ARROW
   --------------------------------------------------------- */

.dark-insight .dark-insight-arrow {
  position: static;

  width: 54px;
  height: 54px;

  flex: 0 0 54px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: var(--green);

  background: #f6f5f2;

  text-decoration: none !important;

  font-size: 22px;

  line-height: 1;

  box-shadow: none;

  transition:
    transform 0.32s ease,
    background-color 0.32s ease,
    color 0.32s ease;
}


.dark-insight:hover .dark-insight-arrow {
  color: #ffffff;

  background: var(--lime);

  transform: scale(1.035);
}


/* Hide original text because ::after handles visual book */

.abstract-shape {
  font-size: 0;
}


/* ---------------------------------------------------------
   CENTER CARD ARROW
   --------------------------------------------------------- */

.dark-insight > a {
  z-index: 5;

  color: var(--green);

  background: #f6f5f2;
}

.dark-insight:hover > a {
  color: var(--green);

  background: #ffffff;
}


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

@media (max-width: 1050px) {

  .insight-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dark-insight {
    grid-column: span 2;
  }

}


@media (max-width: 720px) {

  .insights-section {
    padding: 45px 0 55px;
  }

  .insight-grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .dark-insight {
    grid-column: auto;
  }

  .insight-card,
  .dark-insight {
    min-height: 530px;
  }

  .insight-photo {
    height: 285px;
  }

}


/* =========================================================
   15. FAQ SECTION
   ========================================================= */

.faq-section {
  display: grid;

  grid-template-columns: 1fr 1.15fr;

  gap: 80px;

  padding: 95px 0;
}

.faq-intro .btn {
  margin-top: 160px;
}


/* FAQ Accordion */

.accordion details {
  padding: 26px 0;

  border-bottom: 1px solid var(--line);
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;

  cursor: pointer;

  list-style: none;

  color: var(--green);

  font-size: 21px;
  font-weight: 600;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary span {
  font-size: 28px;
}

.accordion details p {
  padding: 15px 30px 0 0;

  color: #666666;

  line-height: 1.6;
}


/* =========================================================
   16. CONTACT SECTION
   ========================================================= */

.contact-wrap {
  padding-bottom: 0;

  background:
    linear-gradient(
      #ffffff 0 25%,
      #35665d 25% 70%,
      #184f45 70%
    );
}

.contact-panel {
  display: grid;

  grid-template-columns: 1fr 1fr;

  overflow: hidden;

  border-radius: 26px;
}


/* Contact form */

.contact-form {
  padding: 48px;

  background: #f5f3ef;
}

.contact-form h2 {
  margin-bottom: 18px;
}

.contact-form > p {
  color: #555555;
}

.form-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;
}

.contact-form label {
  display: block;

  margin-top: 16px;

  font-size: 14px;
}

.contact-form input,
.contact-form textarea,
.newsletter input {
  width: 100%;

  margin-top: 8px;

  padding: 15px 16px;

  border: 1px solid #dddddd;
  border-radius: 10px;

  background: var(--white);

  font: inherit;
}

.contact-form .btn {
  margin-top: 18px;
}

.form-note {
  margin: 12px 0 0;

  font-size: 13px;
}


/* Contact image */

.contact-photo {
  position: relative;

  min-height: 650px;
}

.call-bubble {
  position: absolute;

  left: 30px;
  right: 30px;
  bottom: 30px;

  display: flex;
  align-items: center;

  gap: 16px;

  padding: 22px 28px;

  border-radius: 60px;

  color: #333333;

  background: rgba(255, 255, 255, 0.92);
}


/* =========================================================
   17. NEWSLETTER
   ========================================================= */

.newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;

  padding: 55px 0;

  color: var(--white);
}

.newsletter p {
  max-width: 480px;

  margin: 0;

  font-size: 21px;
}

.newsletter form {
  width: min(470px, 100%);

  display: flex;

  gap: 10px;
}

.newsletter input {
  margin: 0;

  border-radius: 999px;
}

.newsletter button {
  width: 90px;

  border: 0;
  border-radius: 999px;

  color: var(--green);

  background: var(--lime);

  font-size: 24px;

  cursor: pointer;
}


/* =========================================================
   18. FOOTER
   ========================================================= */

.footer {
  padding: 55px 0 25px;

  color: var(--white);

  background: var(--green);
}

.footer-grid {
  display: grid;

  grid-template-columns:
    1.2fr
    repeat(3, 1fr);

  gap: 50px;
}

.footer-brand {
  margin-bottom: 30px;

  color: var(--white);
}

.footer-grid h4 {
  color: #5b8d83;

  font-size: 14px;
}

.footer-grid a:not(.brand):not(.btn) {
  display: block;

  margin: 18px 0;

  color: var(--white);

  text-decoration: none;
}

.footer-grid p {
  line-height: 1.6;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;

  margin-top: 50px;

  padding-top: 28px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.2);

  color: #dce6e3;

  font-size: 13px;
}


/* =========================================================
   19. TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1100px) {

  /* Hero cards */

  .hero-stats,
  .premium-stats {
    width: 92%;

    grid-template-columns:
      1fr
      1fr;

    margin-top: -60px;
  }

  .stat-card-security {
    grid-column: 1 / -1;
  }

}


/* =========================================================
   20. TABLET
   ========================================================= */

@media (max-width: 1000px) {

  /* Navigation */

  .desktop-nav {
    display: none;
  }


  /* Heading layouts */

  .hero-copy,
  .services-head,
  .team-head,
  .insights-head {
    flex-direction: column;

    align-items: flex-start;
  }


  /* About / FAQ / testimonial */

  .split-heading,
  .testimonial-section,
  .faq-section,
  .trust-section {
    grid-template-columns: 1fr;
  }


  /* Two-column grids */

  .service-grid,
  .values-grid,
  .team-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  /* FAQ button */

  .faq-intro .btn {
    margin-top: 30px;
  }


  /* Contact */

  .contact-panel {
    grid-template-columns: 1fr;
  }

  .contact-photo {
    min-height: 500px;
  }


  /* Footer */

  .footer-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  /* Newsletter */

  .newsletter {
    flex-direction: column;

    align-items: flex-start;
  }

}


/* =========================================================
   21. MOBILE
   ========================================================= */

@media (max-width: 700px) {

  /* Main container */

  .container {
    width: min(
      calc(100% - 28px),
      1360px
    );
  }


  /* Hero */

  .hero {
    padding-top: 45px;
  }

  .hero-copy {
    gap: 25px;
  }

  h1 {
    letter-spacing: -2px;
  }

  .hero-image {
    height: 330px;
  }


  /* Hero cards */

  .hero-stats,
  .premium-stats {
    width: 100%;

    grid-template-columns: 1fr;

    gap: 14px;

    margin-top: -30px;
  }

  .stat-card-security {
    grid-column: auto;

    grid-template-columns: 1fr;

    padding: 20px;
  }

  .premium-stats .stat-card {
    min-height: unset;

    border-radius: 22px;
  }

  .stat-main {
    min-height: 170px;
  }

  .bank-highlight {
    min-height: 160px;
  }

  .loan-stat-card {
    min-height: 265px;

    padding: 22px;
  }

  .insurance-stat-card {
    min-height: 330px;
  }

  .premium-stats h3 {
    font-size: 27px;
  }


  /* Single-column sections */

  .service-grid,
  .values-grid,
  .team-grid,
  .insight-grid,
  .form-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }


  /* Services */

  .services-section {
    border-radius: 0;
  }


  /* Feature */

  .feature-panel h2 {
    font-size: 38px;
  }

  .feature-footer {
    flex-direction: column;

    align-items: flex-start;
  }


  /* Testimonial */

  .testimonial-section {
    gap: 25px;
  }


  /* Contact */

  .contact-form {
    padding: 28px;
  }


  /* Newsletter */

  .newsletter {
    padding: 35px 0;
  }


  /* Footer */

  .footer-bottom {
    flex-direction: column;

    gap: 15px;
  }

}


/* =========================================================
   22. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .nav-wrap {
    height: 72px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;

    font-size: 21px;
  }

  .brand-text strong {
    font-size: 20px;
  }

  .brand-text small {
    font-size: 8px;
  }

  .icon-btn,
  .menu-btn {
    width: 42px;
    height: 42px;
  }

  /* Premium cards */

  .stat-card-security {
    padding: 18px;
  }

  .loan-stat-card {
    padding: 20px;
  }

  .insurance-content {
    padding: 20px;
  }

}


/* =========================================================
   23. ACCESSIBILITY
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .reveal-card,
  .reveal-card.is-visible,
  .premium-stats .stat-card,
  .stat-icon-wrap,
  .round-arrow,
  .insurance-link span,
  .btn,
  .service-card {
    transition: none !important;

    transform: none !important;
  }

  .reveal-card {
    opacity: 1;
  }

}
/* CONTROL #EMV-DASH-010B - MEMBER LOGIN BUTTON */

.header-login-button {
  min-height: 42px;

  padding:
    0
    17px;

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

  border-radius: 999px;

  color: #ffffff;

  background: #0b3028;

  text-decoration: none;

  font-size: 12px;
  font-weight: 700;

  transition:
    transform 160ms ease,
    background 160ms ease;
}

.header-login-button:hover {
  transform: translateY(-1px);

  background: #17634e;
}

.mobile-login-link {
  margin-top: 7px;

  color: #0b3028 !important;

  background: #d8ff46;

  border-radius: 10px;

  font-weight: 800 !important;

  text-align: center;
}

@media (max-width: 760px) {
  .header-login-button {
    display: none;
  }
}
/* EMV-WEB-A001-R4 APPROVED BRAND LOGO */
.brand-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.brand-logo {
  display: block;
  width: auto;
  height: 76.23px;
  max-width: 217.8px;
  object-fit: contain;
}

.footer-brand .brand-logo {
  height: 90px;
  max-width: 258.75px;
}

@media (max-width: 768px) {
  .brand-logo {
    height: 36px;
    max-width: 105px;
  }

  .footer-brand .brand-logo {
    height: 44px;
  }
}