/* ==========================================================================
   Operative Guidelines page
   1. Hero (patterned deep green)
   2. Shared section headers
   3. Journey flow
   4. Eligibility cards
   5. Responsibility cards
   6. Benefit grid
   7. Loan process
   8. Value cards
   9. Mini FAQ
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — deep green with a quiet dot lattice
   -------------------------------------------------------------------------- */

.op-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 26rem;
  padding-block: var(--space-4xl);
  overflow: hidden;
  background-color: var(--clr-primary-deep);
}

.op-hero__pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.07) 1px,
    transparent 1px
  );
  background-size: 26px 26px;
  mask-image: radial-gradient(60rem 30rem at 30% 40%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(
    60rem 30rem at 30% 40%,
    black,
    transparent 75%
  );
}

.op-hero__content {
  position: relative;
}

.op-hero__eyebrow {
  color: var(--clr-accent);
}

.op-hero .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  letter-spacing: 0.16em;
}

.op-hero .section-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--clr-accent);
}

.op-hero__title {
  max-width: 18ch;
  margin-top: var(--space-md);
  font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--clr-white);
}

.op-hero__text {
  max-width: 54ch;
  margin-top: var(--space-lg);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

.op-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

/* --------------------------------------------------------------------------
   2. Shared section headers
   -------------------------------------------------------------------------- */

.op-header {
  max-width: 44rem;
  margin-bottom: var(--space-2xl);
}

.op-journey .section-eyebrow,
.op-elig .section-eyebrow,
.op-resp .section-eyebrow,
.op-benefits .section-eyebrow,
.op-loan .section-eyebrow,
.op-values .section-eyebrow,
.op-faq .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  letter-spacing: 0.16em;
}

.op-journey .section-eyebrow::before,
.op-elig .section-eyebrow::before,
.op-resp .section-eyebrow::before,
.op-benefits .section-eyebrow::before,
.op-loan .section-eyebrow::before,
.op-values .section-eyebrow::before,
.op-faq .section-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--clr-accent);
}

.op-header h2 {
  max-width: 22ch;
  margin-top: var(--space-md);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   3. Journey flow — five steps on a connecting line
   -------------------------------------------------------------------------- */

.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-lg);
}

/* Connector behind the icons */
.flow::before {
  content: "";
  position: absolute;
  top: 1.75rem;
  left: 8%;
  right: 8%;
  height: 2px;
  background-color: rgba(10, 110, 61, 0.15);
}

.flow__step {
  position: relative;
  transition: transform 280ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.flow__step:hover {
  transform: translateY(-0.25rem);
}

.flow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--clr-primary-tint);
  border: 2px solid var(--clr-white);
  box-shadow: 0 0 0 2px rgba(10, 110, 61, 0.2);
  color: var(--clr-primary);
  transition: transform 280ms cubic-bezier(0.2, 0.6, 0.2, 1),
    background-color var(--transition), color var(--transition);
}

.flow__step:hover .flow__icon {
  transform: scale(1.08);
  background-color: var(--clr-primary);
  color: var(--clr-white);
}

.flow__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.flow__label {
  margin-top: var(--space-md);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-accent-dark);
}

.flow__title {
  margin-top: var(--space-2xs);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.flow__text {
  margin-top: var(--space-xs);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--clr-muted);
}

/* --------------------------------------------------------------------------
   4. Eligibility cards
   -------------------------------------------------------------------------- */

.op-elig__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.elig-card {
  padding: var(--space-xl);
  background-color: var(--clr-white);
  border: 1px solid rgba(16, 33, 24, 0.05);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 1px rgba(16, 33, 24, 0.03),
    0 12px 32px -20px rgba(16, 33, 24, 0.12);
  transition:
    transform 300ms cubic-bezier(0.2, 0.6, 0.2, 1),
    box-shadow 300ms cubic-bezier(0.2, 0.6, 0.2, 1),
    border-color 300ms ease;
}

.elig-card:hover {
  transform: translateY(-0.25rem);
  border-color: rgba(10, 110, 61, 0.22);
  box-shadow:
    0 2px 3px rgba(16, 33, 24, 0.04),
    0 20px 44px -20px rgba(16, 33, 24, 0.2);
}

.elig-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background-color: var(--clr-primary-tint);
  color: var(--clr-primary);
}

.elig-card__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.elig-card__title {
  margin-top: var(--space-md);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.elig-card__text {
  margin-top: var(--space-xs);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--clr-muted);
}

/* --------------------------------------------------------------------------
   5. Responsibility cards
   -------------------------------------------------------------------------- */

.op-resp__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.resp-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--clr-white);
  border: 1px solid rgba(16, 33, 24, 0.06);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 1px rgba(16, 33, 24, 0.02),
    0 8px 24px -18px rgba(16, 33, 24, 0.1);
  transition:
    transform 280ms cubic-bezier(0.2, 0.6, 0.2, 1),
    border-color 280ms ease,
    box-shadow 280ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.resp-card:hover {
  transform: translateY(-0.25rem);
  border-color: rgba(10, 110, 61, 0.25);
  box-shadow:
    0 2px 3px rgba(16, 33, 24, 0.03),
    0 16px 36px -18px rgba(16, 33, 24, 0.18);
}

.resp-card__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  border-radius: 50%;
  background-color: var(--clr-primary-tint);
  color: var(--clr-primary);
}

.resp-card__check svg {
  width: 0.75rem;
  height: 0.75rem;
}

.resp-card strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--clr-ink);
}

.resp-card span:not(.resp-card__check) {
  display: block;
  margin-top: var(--space-2xs);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--clr-muted);
}

/* --------------------------------------------------------------------------
   6. Benefit grid
   -------------------------------------------------------------------------- */

.op-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.benefit-card {
  display: block;
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--clr-white);
  border: 1px solid rgba(16, 33, 24, 0.05);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 1px rgba(16, 33, 24, 0.03),
    0 12px 32px -20px rgba(16, 33, 24, 0.12);
  transition:
    transform 300ms cubic-bezier(0.2, 0.6, 0.2, 1),
    box-shadow 300ms cubic-bezier(0.2, 0.6, 0.2, 1),
    border-color 300ms ease;
}

.benefit-card:hover {
  transform: translateY(-0.25rem);
  border-color: rgba(10, 110, 61, 0.22);
  box-shadow:
    0 2px 3px rgba(16, 33, 24, 0.04),
    0 20px 44px -20px rgba(16, 33, 24, 0.2);
}

.benefit-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--clr-primary-tint);
  color: var(--clr-primary);
  transition: transform 250ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.benefit-card:hover .benefit-card__icon {
  transform: scale(1.08);
}

.benefit-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.benefit-card h3 {
  margin-top: var(--space-md);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  transition: color 250ms ease;
}

.benefit-card:hover h3 {
  color: var(--clr-primary);
}

.benefit-card p {
  margin-top: var(--space-xs);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--clr-muted);
}

/* --------------------------------------------------------------------------
   7. Loan process — numbered circles on a line that draws itself
   -------------------------------------------------------------------------- */

.loan-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-lg);
}

.loan-steps::before {
  content: "";
  position: absolute;
  top: 1.375rem;
  left: 8%;
  right: 8%;
  height: 2px;
  background-color: var(--clr-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;
}

.loan-steps.is-revealed::before {
  transform: scaleX(1);
}

.loan-steps__item {
  position: relative;
}

.loan-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--clr-primary);
  border: 3px solid var(--clr-white);
  box-shadow: 0 0 0 2px rgba(10, 110, 61, 0.25);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--clr-white);
}

.loan-steps__item h3 {
  margin-top: var(--space-md);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.loan-steps__item p {
  margin-top: var(--space-xs);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--clr-muted);
}

/* --------------------------------------------------------------------------
   8. Value cards — soft tonal gradients
   -------------------------------------------------------------------------- */

.op-values__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
}

.ovalue-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  background: linear-gradient(155deg, #ffffff 0%, #eef5f0 100%);
  border: 1px solid rgba(16, 33, 24, 0.05);
  border-radius: var(--radius-lg);
  transition:
    transform 280ms cubic-bezier(0.2, 0.6, 0.2, 1),
    border-color 280ms ease,
    box-shadow 280ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.ovalue-card:hover {
  transform: translateY(-0.25rem);
  border-color: rgba(233, 161, 59, 0.4);
  box-shadow: 0 16px 36px -20px rgba(16, 33, 24, 0.2);
}

.ovalue-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--clr-white);
  border: 1px solid rgba(10, 110, 61, 0.15);
  color: var(--clr-primary);
}

.ovalue-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ovalue-card h3 {
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   9. Mini FAQ
   -------------------------------------------------------------------------- */

.op-faq__list {
  max-width: 46rem;
  margin-inline: auto;
}

.op-faq .op-header {
  margin-inline: auto;
  text-align: center;
}

.op-faq .op-header h2 {
  margin-inline: auto;
}

.op-faq__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  .flow,
  .loan-steps {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-xl) var(--space-lg);
  }

  .flow::before,
  .loan-steps::before {
    display: none;
  }

  .op-elig__grid,
  .op-resp__grid,
  .op-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .op-values__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 40rem) {
  .op-hero {
    min-height: 22rem;
    padding-block: var(--space-3xl);
  }

  .op-hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 24rem;
  }

  .op-hero__actions .btn {
    justify-content: center;
    min-height: 3.125rem;
    border-radius: var(--radius-lg);
  }

  /* Journey + loan steps become a left-spined vertical list */
  .flow,
  .loan-steps {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-xl);
    position: relative;
    padding-left: var(--space-lg);
  }

  .flow::before,
  .loan-steps::before {
    display: block;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0;
    right: auto;
    width: 2px;
    height: auto;
    transform: none;
    transform-origin: top;
  }

  .loan-steps::before {
    transform: scaleY(0);
    transition: transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;
  }

  .loan-steps.is-revealed::before {
    transform: scaleY(1);
  }

  .op-elig__grid,
  .op-resp__grid,
  .op-benefits__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .op-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}