/* ============================================================
   Rathe TEC — hero.css
   Drop your banner photo in assets/ and set --hero-img below.
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
  min-height: clamp(224px, 35vh, 364px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

/* >>> REPLACE THIS WITH YOUR PHOTO:
   --hero-img: url("../assets/banner.jpg");
   Then the placeholder pattern below disappears automatically. <<< */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    var(--hero-img, none),
    repeating-linear-gradient(115deg,
      rgba(255,255,255,0.05) 0 2px, transparent 2px 26px),
    radial-gradient(680px 420px at 78% 18%, rgba(193, 154, 111, 0.55), transparent 68%),
    radial-gradient(760px 520px at 18% 82%, rgba(95, 132, 96, 0.5), transparent 70%),
    linear-gradient(158deg, var(--pine) 0%, var(--green-700) 42%, var(--tan-600) 100%);
  background-size: cover, auto, auto, auto, auto;
  background-position: center, 0 0, center, center, center;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat;
}

/* If a photo is set, darken it so text stays readable */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,38,29,0.35), rgba(20,38,29,0.62));
  opacity: var(--hero-img, 0);
  opacity: var(--has-photo, 0);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(100deg, rgba(18, 16, 13, 0.86) 0%, rgba(18, 16, 13, 0.62) 46%, rgba(18, 16, 13, 0.18) 78%, transparent 100%),
    linear-gradient(0deg, var(--cream-100) 0%, transparent 26%);
}

.hero__inner { position: relative; z-index: 1; }

.hero__title {
  color: var(--cream-100);
  max-width: 17ch;
  margin-bottom: 0.55em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.hero__lede {
  max-width: 62ch;
  color: rgba(245, 236, 221, 0.9);
  font-size: clamp(1.02rem, 0.96rem + 0.5vw, 1.26rem);
  line-height: 1.62;
  margin-bottom: 1.8rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(245, 236, 221, 0.2);
}

.hero__chips li {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cream-200);
  background: rgba(245, 236, 221, 0.1);
  border: 1px solid rgba(245, 236, 221, 0.24);
  padding: 0.34rem 0.72rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.hero__chips li::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--moss);
  margin-right: 0.45rem;
  vertical-align: middle;
}

/* ---------- Split layout (About) ---------- */
.split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  padding-top: clamp(1rem, 2vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.split__col h3 { color: var(--green-600); }
.split__col p { color: var(--ink-600); }

.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.72rem;
  color: var(--ink-600);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 15px; height: 15px;
  border-radius: 5px;
  background: var(--green-500);
  box-shadow: inset 0 0 0 2px var(--cream-100);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 4px; top: 0.56em;
  width: 7px; height: 4px;
  border-left: 2px solid var(--cream-100);
  border-bottom: 2px solid var(--cream-100);
  transform: rotate(-45deg);
}

/* ---------- Pillars ---------- */
.pillar {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pillar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--green-400), var(--tan-300));
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-200);
}
.pillar__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tan-200);
  margin-bottom: 0.35rem;
}
.pillar h3 { color: var(--pine); }
.pillar p { color: var(--ink-600); font-size: 0.98rem; margin: 0; }

/* ---------- CTA band ---------- */
.section--cta {
  background:
    radial-gradient(700px 320px at 20% 0%, rgba(193, 154, 111, 0.28), transparent 70%),
    linear-gradient(180deg, var(--cream-200), var(--cream-300));
  border-top: 1px solid var(--line);
  text-align: center;
}
.section--cta p { color: var(--ink-600); max-width: 60ch; margin-inline: auto; }
.section--cta .hero__actions { justify-content: center; margin-top: 1.6rem; }

/* ---------- Photo banner mode (corrects the overlay rule above) ----------
   To use your real photo:
   1) save it as assets/banner.jpg
   2) in base.css :root add:  --hero-img: url("../assets/banner.jpg");
   3) in index.html change  <section class="hero" id="top">
      to              <section class="hero hero--photo" id="top">
   The dark overlay then turns on so the headline stays readable. */
.hero__media::after { opacity: 0; }
.hero--photo .hero__media::after { opacity: 0.55; }

/* Photo mode: let the photo show through the animated mesh.
   The mesh canvas is opaque, so in photo mode we drop its opacity to
   reveal the photo beneath while keeping the living crystalline texture. */
.hero--photo .hero__mesh { opacity: 0.35; }
.hero--photo .hero__scrim {
  background:
    linear-gradient(100deg, rgba(18, 16, 13, 0.9) 0%, rgba(18, 16, 13, 0.66) 48%, rgba(18, 16, 13, 0.28) 82%, rgba(18, 16, 13, 0.1) 100%),
    linear-gradient(0deg, var(--cream-100) 0%, transparent 22%);
}


/* ---------- Split hero: mesh fades into the Alki photo ----------
   The animated mesh stays full-bleed underneath; this layer paints
   the photo on top and masks it out on the left, so the two blend
   along a slanted line. Tweak the percentages to move the seam. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../assets/alki.jpg");
  background-size: cover;
  background-position: center 30%;
  -webkit-mask-image: linear-gradient(105deg, transparent 34%, rgba(0,0,0,0.6) 52%, #000 68%);
          mask-image: linear-gradient(105deg, transparent 34%, rgba(0,0,0,0.6) 52%, #000 68%);
}
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,24,19,0.26), rgba(13,24,19,0.42));
}
@media (max-width: 720px) {
  .hero__photo {
    -webkit-mask-image: linear-gradient(100deg, transparent 58%, rgba(0,0,0,0.6) 74%, #000 90%);
            mask-image: linear-gradient(100deg, transparent 58%, rgba(0,0,0,0.6) 74%, #000 90%);
  }
}

/* ---------- Animated low-poly mesh (canvas) ----------
   Painted by js/hero-mesh.js. Sits on the same layer as hero__media
   (z -3) but later in the DOM, so it covers the gradient placeholder.
   The scrim (z -2) stays on top so the headline remains readable. */
.hero__mesh {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}