/* ============================================================   
   jpchacha.com | Slate + Electric Blue
============================================================ */

/* ------------------------------------------------------------
Hero
------------------------------------------------------------ */

.hero {
	padding: 72px 40px 60px;
	height: calc(100vh - 121px);
	border-bottom: 0.5px solid var(--navy-mid);
}

.hero a, .hero * a {
	text-decoration: none;
}

.hero-eyebrow {
	font-size: 11px;
	font-weight: 500;
	color: var(--amber);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.hero h1 {
	font-size: 36px;
	font-weight: 500;
	color: var(--text-primary);
	line-height: 1.2;
	letter-spacing: -0.025em;
	margin-bottom: 14px;
}

.hero p {
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.7;
	max-width: 800px;
	margin-bottom: 28px;
}

.hero-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

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

@media (max-width: 640px) {
  .nav {
    padding: 0 20px;
    gap: 16px;
  }

  .nav-link {
    display: none;
  }

  .hero {
    padding: 48px 20px 40px;
  }

  .hero h1 {
    font-size: 26px;
  }

  .section {
    padding: 28px 20px;
  }

  .footer {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
  }
}