/* ============================================================
   Homepage surfaces — About-style mineral system, CLEAR contrast
   Loaded last so it wins over home.css / illustrations.css
   ============================================================ */

body.home-page-v3,
.home-page-v3{
  --hp-paper: #F4F3EF;
  --hp-stone: #DDDBD3;
  --hp-sage: #C5D6CF;
  --hp-clay: #E6D9CE;
  --hp-mist: #D3E0DE;
  --hp-dark: #24353A;
  --hp-ink: #17252B;
  --hp-teal: #3E7D82;
  --hp-teal-soft: #9CC4BF;
}

/* 1 Hero — paper */
.home-page-v3 .v3-hero{
  background: var(--hp-paper) !important;
}

/* 2 Path — STONE (noticeably grayer than paper) */
.home-page-v3 .v3-signal{
  background: var(--hp-stone) !important;
}
.home-page-v3 .v3-signal .v3-kicker{
  color: var(--hp-teal) !important;
}

/* 3 First visual — MIST (cool teal wash) */
.home-page-v3 .v3-signal + .eco-visual{
  background: var(--hp-mist) !important;
}
.home-page-v3 .v3-signal + .eco-visual .kicker{
  color: var(--hp-teal) !important;
}
.home-page-v3 .v3-signal + .eco-visual .eco-visual__media{
  background: rgba(255,255,255,.55) !important;
}

/* 4 People — CLAY (warm, readable difference) */
.home-page-v3 .home-people{
  background: var(--hp-clay) !important;
  border-top: 1px solid rgba(23,37,43,.10) !important;
  border-bottom: 1px solid rgba(23,37,43,.10) !important;
}
.home-page-v3 .home-people-kicker,
.home-page-v3 .home-people-kicker span{
  color: #A6533F !important;
}
.home-page-v3 .home-people h2 em,
.home-page-v3 .home-people .matte-clay{
  color: #A6533F !important;
}

/* 5 Tech marquee — DARK (same as About technology breadth) */
.home-page-v3 .hp7-tech-depth{
  background: var(--hp-dark) !important;
  color: #F4F3EF !important;
}
.home-page-v3 .hp7-kicker{
  color: var(--hp-teal-soft) !important;
}
.home-page-v3 .hp7-tech-depth h2,
.home-page-v3 .hp7-tech-depth p,
.home-page-v3 .hp7-tech-depth__stats{
  color: #F4F3EF !important;
}
.home-page-v3 .hp7-tech-depth p{
  color: rgba(244,243,239,.78) !important;
}

/* 6 Questions visual — STONE */
.home-page-v3 .hp7-tech-depth + .eco-visual{
  background: var(--hp-stone) !important;
}
.home-page-v3 .hp7-tech-depth + .eco-visual .kicker{
  color: var(--hp-teal) !important;
}

/* 7 Start — PAPER */
.home-page-v3 .v3-start{
  background: var(--hp-paper) !important;
}
.home-page-v3 .v3-start .v3-kicker{
  color: var(--hp-teal) !important;
}

/* 8 Depth — SAGE (clear green-gray like About CTA band, stronger) */
.home-page-v3 .v3-depth{
  background: var(--hp-sage) !important;
}
.home-page-v3 .v3-depth .v3-kicker{
  color: var(--hp-teal) !important;
}

/* 9 Focus visual — PAPER */
.home-page-v3 .v3-depth + .eco-visual{
  background: var(--hp-paper) !important;
}
.home-page-v3 .v3-depth + .eco-visual .kicker{
  color: var(--hp-teal) !important;
}

/* 10 Team visual — MIST */
.home-page-v3 .v3-depth + .eco-visual + .eco-visual{
  background: var(--hp-mist) !important;
}
.home-page-v3 .v3-depth + .eco-visual + .eco-visual .kicker{
  color: var(--hp-teal) !important;
}

/* 11 Industries — CLAY */
.home-page-v3 .v3-industries{
  background: var(--hp-clay) !important;
  border-top: 1px solid rgba(23,37,43,.10) !important;
}
.home-page-v3 .v3-industries .v3-kicker{
  color: #A6533F !important;
}

/* 12 Final — INK */
.home-page-v3 .v3-final{
  background: var(--hp-ink) !important;
  color: #fff !important;
}

/* Path cards stay white on stone for contrast */
.home-page-v3 .v3-path-step{
  background: #fff !important;
}

/* ============================================================
   Where to start — clean, consistent card grid
   ============================================================ */
.home-page-v3 .v3-start{
  background: var(--hp-paper, #F4F3EF) !important;
}
.home-page-v3 .v3-start__inner{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
}
.home-page-v3 .v3-start__head{
  display: block !important;
  width: 100% !important;
  max-width: 640px;
  margin: 0 0 28px !important;
  text-align: left;
}
.home-page-v3 .v3-start__head::before{
  content: none !important;
  display: none !important;
}
.home-page-v3 .v3-start__head .v3-kicker{
  margin-bottom: 12px;
  color: #3E7D82 !important;
}
.home-page-v3 .v3-start__head h2{
  margin: 0 0 12px !important;
  color: #17252B !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
}
.home-page-v3 .v3-start__head p{
  margin: 0 !important;
  max-width: 52ch;
  color: #4A5550 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.home-page-v3 .v3-problems{
  width: 100% !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.home-page-v3 .v3-problem{
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 108px;
  padding: 18px 18px 18px 16px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid rgba(23,37,43,.10) !important;
  border-top: 3px solid #3E7D82 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.home-page-v3 .v3-problem--blue{ border-top-color: #3E7D82 !important; }
.home-page-v3 .v3-problem--teal{ border-top-color: #3D7A6A !important; }
.home-page-v3 .v3-problem--violet{ border-top-color: #6B5B8C !important; }
.home-page-v3 .v3-problem--orange{ border-top-color: #B45A3C !important; }

.home-page-v3 .v3-problem:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(23,37,43,.08) !important;
  background: #fff !important;
}

.home-page-v3 .v3-problem__num{
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  color: #6A7A8A !important;
  line-height: 1;
}
.home-page-v3 .v3-problem--blue .v3-problem__num{ color: #3E7D82 !important; }
.home-page-v3 .v3-problem--teal .v3-problem__num{ color: #3D7A6A !important; }
.home-page-v3 .v3-problem--violet .v3-problem__num{ color: #6B5B8C !important; }
.home-page-v3 .v3-problem--orange .v3-problem__num{ color: #B45A3C !important; }

.home-page-v3 .v3-problem__body h3{
  margin: 0 0 6px !important;
  color: #17252B !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.home-page-v3 .v3-problem__body p{
  margin: 0 !important;
  color: #5A6560 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.home-page-v3 .v3-problem__go{
  color: #8A9690 !important;
  font-size: 18px !important;
  line-height: 1;
  transition: transform .2s ease, color .2s ease;
}
.home-page-v3 .v3-problem:hover .v3-problem__go{
  color: #17252B !important;
  transform: translateX(3px);
}

/* Kill legacy grid children that no longer exist */
.home-page-v3 .v3-problem > b,
.home-page-v3 .v3-problem > span:not(.v3-problem__num):not(.v3-problem__go){
  display: none !important;
}

@media (max-width: 760px){
  .home-page-v3 .v3-start__inner{
    width: calc(100% - 28px);
  }
  .home-page-v3 .v3-problems{
    grid-template-columns: 1fr !important;
  }
  .home-page-v3 .v3-problem{
    min-height: 0;
    padding: 16px !important;
  }
}