/* Kauaʻi-first homepage draft additions. Live site.css is unchanged. */

/* Hero: James's Hanalei Bay photo.
   Type sits in the lower-left foreground water. A reserved band above the
   type, plus a bottom-left scrim, keeps the rainbow (sky and reflection)
   and the red sailing canoe clear. */
.hero.bay {
  display: flex;
  align-items: flex-end;
  /* reserved photo above the type: rainbow + canoes */
  padding-top: 13rem;
}
.hero.bay picture, .hero.bay img { object-position: 50% 42%; }
.hero.bay h1, .hero.bay .lead, .hero.bay .eyebrow {
  text-shadow: 0 1px 2px rgba(0,0,0,.40), 0 6px 22px rgba(0,0,0,.28);
}
.hero.bay .wrap { padding-top: 0; }
.hero.bay::before {
  background: linear-gradient(to top right,
    rgba(6,18,14,.90) 0%,
    rgba(6,18,14,.68) 24%,
    rgba(6,18,14,.26) 46%,
    rgba(6,18,14,.06) 64%,
    transparent 80%);
}
@media (min-width: 52rem) {
  /* Fill the first screen below the draft banner + header so the waterline
     sits above the type and the 16:9 photo is barely cropped. */
  .hero.bay {
    min-height: calc(100vh - 6.5rem);
    padding-top: 16rem;
  }
  .hero.bay picture, .hero.bay img { object-position: 50% 46%; }
  .hero.bay::before {
    background: linear-gradient(to top right,
      rgba(6,18,14,.88) 0%,
      rgba(6,18,14,.58) 20%,
      rgba(6,18,14,.20) 38%,
      rgba(6,18,14,.05) 52%,
      transparent 68%);
  }
  .hero.bay .wrap { padding-bottom: 2.1rem; }
  .hero.bay h1 { max-width: 32rem; font-size: clamp(1.7rem, 3.5vw, 2.45rem); }
  .hero.bay .lead { max-width: 30rem; font-size: 1.05rem; margin-top: .45rem; }
  .hero.bay .cta { margin-top: 1.05rem; }
}
@media (max-width: 51.99rem) {
  /* Keep a clear band of photo (rainbow, canoe) above the stacked type.
     Because the 16:9 photo fills the tall mobile hero, the canoe sits at
     ~47–52% of hero height; padding-top must clear that band. */
  .hero.bay { padding-top: 24rem; }
  .hero.bay picture, .hero.bay img { object-position: 48% 40%; }
  .hero.bay .wrap { padding-bottom: 1rem; }
  .hero.bay h1 { font-size: clamp(1.45rem, 7.4vw, 1.7rem); line-height: 1.2; }
  .hero.bay .lead { font-size: .96rem; margin-top: .3rem; line-height: 1.4; }
  .hero.bay .cta { margin-top: .7rem; }
}

.welcome-line {
  margin: 0;
  font-size: 1.02rem;
  color: var(--muted);
}
.welcome-line strong { color: var(--fg); }

.towns {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1rem 0 1.25rem;
  padding: 0;
  list-style: none;
}
.towns li {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 2rem;
  padding: .25rem .8rem;
  font-size: .95rem;
  color: var(--fg);
}

.placeholder-card {
  border: 2px dashed var(--line);
  background: transparent;
  box-shadow: none;
  min-height: 7.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
}
.placeholder-card p { margin: .15rem 0 0; }
.placeholder-card .ph-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.help-grid .card p { margin-top: .35rem; }

.anywhere {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow);
  margin: 2.5rem 0 0;
}
.anywhere h2 { margin-top: 0; }
.anywhere p { margin: .4rem 0 0; color: var(--muted); max-width: 46rem; }

/* Two-up industry cards on phones so the page is not a long single stack */
@media (max-width: 35.99rem) {
  .grid.g4 { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .grid.g4 .card { padding: .85rem .8rem; }
  .grid.g4 .card h3 { font-size: 1rem; }
}