/* ══════════════════════════════════════════════════════════
   MARA PROJECT PAGE — mara.css
   Brand colours:
     Background: #FEFAE1
     Light green: #7F885B
     Dark green:  #606A34
     Orange:      #BC6C26
     Cream:       #FEFAE1
     Dark brown:  #5A4F43
     Light brown: #A78A64
══════════════════════════════════════════════════════════ */

/* ── Page base ───────────────────────────────────────────── */
body.mara-page {
  background: #FEFAE1;
  color: #5A4F43;
  font-family: 'Inter', 'Rethink Sans', sans-serif;
}

.mara-page h1,
.mara-page h2,
.mara-page h3,
.mara-page p,
.mara-page span,
.mara-page a,
.mara-page button { font-family: 'Inter', 'Rethink Sans', sans-serif; color: inherit; }

/* ── Section title ───────────────────────────────────────── */
.mara-page .vp-section-title { color: #5A4F43; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.mara-page .vp-tag {
  background: #BC6C26;
  color: #FEFAE1 !important;
  border-color: #BC6C26;
}
.mara-page .vp-tag--date {
  background: transparent;
  color: #000000 !important;
  border-color: #DDD8D0;
}
.mara-page .vp-back         { color: #606A34; }
.mara-page .vp-back:hover   { color: #BC6C26; }

/* ── Hero chips ──────────────────────────────────────────── */
.mara-page .vp-chip {
  background: #606A34;
  color: #FEFAE1 !important;
  border-color: #606A34;
}

/* ── Hero logo — larger than base 52px ───────────────────── */
.mara-page .vp-hero-logo {
  height: 90px;
}

/* ── Results metrics ─────────────────────────────────────── */
.mara-page .vp-results {
  border-top-color: #D8D4C4;
  border-bottom-color: #D8D4C4;
}
.mara-page .vp-metric {
  background: #606A34;
  border-color: #606A34;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.mara-page .vp-metric:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(96,106,52,0.25);
}
.mara-page .vp-metric-value { color: #FEFAE1; }
.mara-page .vp-metric-label { color: #FEFAE1; opacity: 0.75; }

/* ── Quote ───────────────────────────────────────────────── */
.mara-page .vp-quote {
  background: #606A34;
  border-left-color: #BC6C26;
  border-top-color: #4A5228;
  border-right-color: #4A5228;
  border-bottom-color: #4A5228;
  color: #FEFAE1;
}

/* ── Problem diagram ─────────────────────────────────────── */
.mara-page .vp-lag-container {
  background: #FEFAE1;
  border-color: #D8D4C4;
}
.mara-page .vp-lag-arrow { color: #A78A64; font-weight: 700; }
.mara-page .vp-lag-quote { color: #5A4F43; opacity: 0.7; }

/* Static Travel Apps — orange */
.mara-box--orange {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.75rem 2.5rem;
  border-radius: 16px;
  background: #BC6C26;
  border: 1.5px solid #BC6C26;
  font-weight: 700;
  font-size: 1.05rem;
  color: #FEFAE1;
  min-width: 180px;
  text-align: center;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.mara-box--orange:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(188,108,38,0.35);
}
.mara-box--orange .vp-lag-sub { color: rgba(254,250,225,0.75); }

/* Disengaged Youth — dark brown */
.mara-box--brown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.75rem 2.5rem;
  border-radius: 16px;
  background: #5A4F43;
  border: 1.5px solid #5A4F43;
  font-weight: 700;
  font-size: 1.05rem;
  color: #FEFAE1;
  min-width: 180px;
  text-align: center;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.mara-box--brown:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(90,79,67,0.35);
}
.mara-box--brown .vp-lag-sub { color: rgba(254,250,225,0.75); }

/* Engagement Gap — light green override */
.mara-page .vp-lag-box--gap {
  background: #7F885B;
  border-color: #7F885B;
  color: #FEFAE1;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.mara-page .vp-lag-box--gap:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(127,136,91,0.35);
}
.mara-page .vp-lag-box--gap .vp-lag-sub { color: rgba(254,250,225,0.75); }

/* ── Process ─────────────────────────────────────────────── */
.mara-page .vp-process {
  border-top-color: #D8D4C4;
  border-bottom-color: #D8D4C4;
}

/* 3-column grid (no dividers between steps) */
.mara-page .vp-process-steps {
  grid-template-columns: repeat(3, 1fr);
}

/* Hover lift on all process steps */
.mara-page .vp-step {
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.mara-page .vp-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

@media (max-width: 768px) {
  .mara-page .vp-process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Process & solution title overrides */
.mara-page .vp-step-title {
  font-size: 1.25rem;
  font-weight: 600;
}
.mara-page .vp-feature-title {
  font-size: 1.2rem;
  font-weight: 600;
}

/* Phase 1 — dark green */
.mara-page .vp-process-steps > .vp-step:nth-child(1) {
  background: #606A34;
  border-color: #606A34;
}
.mara-page .vp-process-steps > .vp-step:nth-child(1) .vp-step-num,
.mara-page .vp-process-steps > .vp-step:nth-child(1) .vp-step-title,
.mara-page .vp-process-steps > .vp-step:nth-child(1) .vp-step-desc { color: #FEFAE1; }

/* Phase 2 — orange */
.mara-page .vp-process-steps > .vp-step:nth-child(2) {
  background: #BC6C26;
  border-color: #BC6C26;
}
.mara-page .vp-process-steps > .vp-step:nth-child(2) .vp-step-num,
.mara-page .vp-process-steps > .vp-step:nth-child(2) .vp-step-title,
.mara-page .vp-process-steps > .vp-step:nth-child(2) .vp-step-desc { color: #FEFAE1; }

/* Phase 3 — light green */
.mara-page .vp-process-steps > .vp-step:nth-child(3) {
  background: #7F885B;
  border-color: #7F885B;
}
.mara-page .vp-process-steps > .vp-step:nth-child(3) .vp-step-num,
.mara-page .vp-process-steps > .vp-step:nth-child(3) .vp-step-title,
.mara-page .vp-process-steps > .vp-step:nth-child(3) .vp-step-desc { color: #FEFAE1; }

/* Phase 4 — dark brown */
.mara-page .vp-process-steps > .vp-step:nth-child(4) {
  background: #5A4F43;
  border-color: #5A4F43;
}
.mara-page .vp-process-steps > .vp-step:nth-child(4) .vp-step-num,
.mara-page .vp-process-steps > .vp-step:nth-child(4) .vp-step-title,
.mara-page .vp-process-steps > .vp-step:nth-child(4) .vp-step-desc { color: #FEFAE1; }

/* Phase 5 — orange */
.mara-page .vp-process-steps > .vp-step:nth-child(5) {
  background: #BC6C26;
  border-color: #BC6C26;
}
.mara-page .vp-process-steps > .vp-step:nth-child(5) .vp-step-num,
.mara-page .vp-process-steps > .vp-step:nth-child(5) .vp-step-title,
.mara-page .vp-process-steps > .vp-step:nth-child(5) .vp-step-desc { color: #FEFAE1; }

/* Phase 6 — dark green */
.mara-page .vp-process-steps > .vp-step:nth-child(6) {
  background: #606A34;
  border-color: #606A34;
}
.mara-page .vp-process-steps > .vp-step:nth-child(6) .vp-step-num,
.mara-page .vp-process-steps > .vp-step:nth-child(6) .vp-step-title,
.mara-page .vp-process-steps > .vp-step:nth-child(6) .vp-step-desc { color: #FEFAE1; }

/* ── Corner tag pill ─────────────────────────────────────── */
.mara-corner-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.mara-tag--orange     { background: #BC6C26; color: #FEFAE1 !important; }
.mara-tag--darkgreen  { background: #606A34; color: #FEFAE1 !important; }
.mara-tag--lightgreen { background: #7F885B; color: #FEFAE1 !important; }
.mara-tag--brown      { background: #5A4F43; color: #FEFAE1 !important; }

/* ── Feature cards ───────────────────────────────────────── */

/* Dark green card — Stage Exploration */
.mara-card--darkgreen {
  background: #606A34;
  border: 1.5px solid #606A34;
  border-radius: var(--radius-20);
  padding: 1.75rem 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  min-height: 440px;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.mara-card--darkgreen:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(96,106,52,0.3);
}
.mara-card--darkgreen .vp-feature-title { color: #FEFAE1; }
.mara-card--darkgreen .vp-feature-desc  { color: rgba(254,250,225,0.85); }
.mara-card--darkgreen .vp-feature-mockup-wrap { border-top-color: rgba(254,250,225,0.2); }

/* Orange card — World Map */
.mara-card--orange {
  background: #BC6C26;
  border: 1.5px solid #BC6C26;
  border-radius: var(--radius-20);
  padding: 1.75rem 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  min-height: 440px;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.mara-card--orange:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(188,108,38,0.3);
}
.mara-card--orange .vp-feature-title { color: #FEFAE1; }
.mara-card--orange .vp-feature-desc  { color: rgba(254,250,225,0.85); }
.mara-card--orange .vp-feature-mockup-wrap { border-top-color: rgba(254,250,225,0.2); }

/* Light green card — Collectibles */
.mara-card--lightgreen {
  background: #7F885B;
  border: 1.5px solid #7F885B;
  border-radius: var(--radius-20);
  padding: 1.75rem 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  min-height: 440px;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.mara-card--lightgreen:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(127,136,91,0.3);
}
.mara-card--lightgreen .vp-feature-title { color: #FEFAE1; }
.mara-card--lightgreen .vp-feature-desc  { color: rgba(254,250,225,0.85); }
.mara-card--lightgreen .vp-feature-mockup-wrap { border-top-color: rgba(254,250,225,0.2); }

/* Brown card — Daily Streaks */
.mara-card--brown {
  background: #5A4F43;
  border: 1.5px solid #5A4F43;
  border-radius: var(--radius-20);
  padding: 1.75rem 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  min-height: 440px;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.mara-card--brown:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(90,79,67,0.3);
}
.mara-card--brown .vp-feature-title { color: #FEFAE1; }
.mara-card--brown .vp-feature-desc  { color: rgba(254,250,225,0.85); }
.mara-card--brown .vp-feature-mockup-wrap { border-top-color: rgba(254,250,225,0.2); }

/* ── Links ───────────────────────────────────────────────── */
.mara-page .vp-links { border-top-color: #D8D4C4; }
.mara-page .vp-link-btn {
  background: #5A4F43 !important;
  color: #FEFAE1 !important;
}
.mara-page .vp-link-btn:hover {
  background: #3d352c !important;
  color: #FEFAE1 !important;
}

/* ── More projects — match velora styling ────────────────── */
.mara-page .vp-more          { background: #FDFCFB; border-top-color: #E4E4E7; }
.mara-page .vp-more-card     { background: #FDFCFB; border-color: #E4E4E7; }
.mara-page .vp-more-card:hover { box-shadow: 0 16px 48px rgba(96,96,160,0.12); }
.mara-page .vp-more-img-wrap { background: #F6F1FA; }
.mara-page .vp-more-title    { color: var(--color-near-black); }
.mara-page .vp-more-cta      { background: var(--color-lilac-main); color: var(--color-near-black); }
.mara-page .vp-more-card:hover .vp-more-cta { background: var(--color-soft-lavender); }

/* ── Footer ──────────────────────────────────────────────── */
.mara-page .cta-footer-area { background: var(--color-soft-lavender); }

.mara-page .new-footer-heading  { color: var(--color-dark-espresso); font-family: 'Rethink Sans', sans-serif; }
.mara-page .new-footer-accent   { color: var(--color-dark-espresso); font-family: 'Rethink Sans', sans-serif; }
.mara-page .new-footer-kry      { color: var(--color-deep-purple);   font-family: 'Parisienne', cursive; }
.mara-page .new-footer-tagline  { color: var(--color-ivory);         font-family: 'Rethink Sans', sans-serif; }
.mara-page .new-footer-col-label{ color: var(--color-deep-purple);   font-family: 'Rethink Sans', sans-serif; }
.mara-page .new-footer-link     { color: var(--color-dark-espresso); font-family: 'Rethink Sans', sans-serif; }
.mara-page .new-footer-link:hover { color: var(--color-deep-purple); }
.mara-page .new-footer-info     { color: var(--color-dark-espresso); font-family: 'Rethink Sans', sans-serif; }
.mara-page .new-footer-copy     { color: var(--color-ivory);         font-family: 'Rethink Sans', sans-serif; }


/* ══════════════════════════════════════════════════════════
   MARA — RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Tablet (768–1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {
  .mara-page .vp-process-steps { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile (< 768px) ───────────────────────────────────── */
@media (max-width: 767px) {
  .mara-page .vp-process-steps { grid-template-columns: 1fr !important; }
  /* Feature cards — reduce fixed min-height on mobile */
  .mara-card--darkgreen,
  .mara-card--orange,
  .mara-card--lightgreen,
  .mara-card--brown { min-height: auto; padding: 1.5rem 1.5rem 0; }
  /* Lag boxes — full width */
  .mara-box--orange,
  .mara-box--brown { min-width: unset; width: 100%; padding: 1rem 1.25rem; }
  /* Breadcrumb padding for sticky nav */
  .mara-page .vp-breadcrumb { padding-top: 5.5rem; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}