/* ==========================================================================
   COMPONENT — Hero
   Markup:  components/hero.html   (section.hero — top of the page)
   Anchor:  #home (the <main> element carries the id)
   --------------------------------------------------------------------------
   IMAGE: assets/hero-bg.png (1536x1024). Measured composition:
            · top strip / upper-left = bright sky (luma 223-236 of 255)
            · lower-right            = dark mass (luma 25-100)
            · very bottom edge       = dark, partly transparent band
          It is used as the section background, so the headline sits over the
          bright upper-left. The two gradients below (a) keep the text readable
          and (b) dissolve the image into the white About section instead of
          ending on a hard dark edge.
   WEIGHT: it is a 2.3 MB PNG — see README → "Notes" if you want it re-exported
           as JPEG/WebP for a lighter page.
   ========================================================================== */

.hero{
  min-height:760px;
  padding-top:var(--nav-h);
  position:relative;
  background-color:var(--white);
  background-image:
    /* 1. soft veil behind the text, strongest on the left. Measured against the
          real pixels: the hero paragraph and the People/Places line need the
          background to stay light well past the half-way mark, so the veil holds
          its strength to ~54% before falling away and letting the photo back in. */
    linear-gradient(90deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.78) 36%,rgba(255,255,255,.68) 54%,rgba(255,255,255,.30) 74%,rgba(255,255,255,0) 90%),
    /* 2. fade into the white section underneath */
    linear-gradient(180deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.45) 60%,rgba(255,255,255,.80) 80%,var(--white) 100%),
    /* 3. the photograph */
    url("../../assets/hero-bg.png");
  background-repeat:no-repeat;
  /* 'left top' keeps the bright sky behind the headline and the navbar at every
     width — with a narrow viewport the crop would otherwise land on the dark
     centre of the photo. */
  background-position:left top;
  background-size:cover;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  width:620px;height:620px;
  border:1px solid rgba(8,127,99,.12);
  border-radius:50%;
  right:-220px;top:-160px;
}
.hero::after{
  content:"";
  position:absolute;
  width:440px;height:440px;
  border:1px solid rgba(8,127,99,.09);
  border-radius:50%;
  left:-250px;bottom:-260px;
}
.hero-grid{
  min-height:682px;
  display:grid;
  /* single column now that the photo is the backdrop rather than a framed
     image in a right-hand column */
  grid-template-columns:1fr;
  align-items:center;
  gap:50px;
  position:relative;
  z-index:1;
}
.hero-content{padding-block:80px}
.hero-kicker{
  margin-bottom:24px;
  color:var(--green);
  font-size:11px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.hero h1{
  font-family:"Manrope",sans-serif;
  font-size:clamp(56px,6.4vw,94px);
  line-height:.91;
  letter-spacing:-.065em;
  font-weight:800;
  max-width:650px;
}
.hero h1 span{color:var(--green)}
.hero-line{
  width:42px;height:3px;
  background:var(--green);
  margin:24px 0 22px;
}
.hero-copy{
  color:#586660;
  max-width:520px;
  font-size:17px;
}
.hero-actions{
  display:flex;flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
/* lifts the white button off a bright, busy photo */
.hero .btn-outline{box-shadow:0 10px 24px rgba(20,55,45,.12)}
.hero-notes{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:25px;
  color:#617069;
  font-size:11px;
}
/* Small artwork before "People" — sized to sit on the 11px text line. */
.hero-note{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.hero-note-icon{
  width:18px;
  height:18px;
  object-fit:contain;
}

/* ---------- Kept but not currently used ----------
   The arch-framed photo that used to sit in the right-hand column. It was
   replaced by the full-bleed background above; these rules are left here so the
   two-column hero can come back without rewriting the CSS. */

.hero-image-wrap{
  position:relative;
  min-height:590px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-image{
  width:100%;
  height:590px;
  object-fit:cover;
  object-position:center;
  border-radius:46% 46% 20px 46%;
  filter:saturate(.82);
  box-shadow:var(--shadow);
}
.hero-image-wrap::before{
  content:"";
  position:absolute;
  inset:30px -20px 30px 35px;
  border:1px solid rgba(8,127,99,.15);
  border-radius:46% 46% 20px 46%;
  z-index:-1;
}
/* markup for these two is still commented out in hero.html */
.hero-tag{
  position:absolute;
  right:-20px;
  top:70px;
  width:145px;
  padding:15px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(10px);
  border-left:3px solid var(--green);
  font-size:11px;
  line-height:1.5;
  color:var(--green-dark);
}
.hero-script{
  position:absolute;
  left:-18px;
  top:70px;
  font-family:"Playfair Display",serif;
  font-style:italic;
  color:#5c8d7c;
  font-size:30px;
  line-height:1.05;
  transform:rotate(-7deg);
}

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

@media(max-width:800px){
  .hero{min-height:auto}
  .hero-grid{grid-template-columns:1fr;min-height:auto;padding:50px 0 70px}
  .hero-content{padding:60px 0 10px}
  /* the veil needs to do more work once the photo is cropped this tight */
  .hero{
    background-image:
      linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.34) 60%,rgba(255,255,255,.05) 100%),
      linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,.6) 82%,var(--white) 100%),
      url("../../assets/hero-bg.png");
  }
  .hero-image-wrap{min-height:420px}
  .hero-image{height:420px}
  .hero-tag{right:0}
  .hero-script{left:0;top:30px}
}

@media(max-width:560px){
  .hero h1{font-size:54px}
}