/* ==========================================================================
   Picnics At The Bend — site.css
   Palette sampled from picnics-at-the-bend_green_v4.png + Harvest collateral.
   ========================================================================== */

:root {
  --green:      #143A2F;  /* logo ink — headings, primary buttons */
  --green-deep: #022B1E;  /* dark bands, footer */
  --green-mid:  #1E5142;
  --cream:      #F7EFE3;  /* page ground */
  --sand:       #EFD9C1;  /* alternating bands, cards */
  --sand-soft:  #F4E6D3;
  --gold:       #E0A22B;  /* the single accent */
  --ink:        #22201C;
  --ink-soft:   #5B564E;
  --rule:       rgba(20, 58, 47, 0.16);

  --wrap: 1180px;
  --pad: 24px;
  --r: 4px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* --------------------------------------------------------- type primitives */

.display,
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--green);
}

h1, .h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
h2, .h2 { font-size: clamp(2rem, 4.4vw, 3.15rem); }
h3, .h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }

.eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.24rem);
  color: var(--ink-soft);
  max-width: 54ch;
}

.measure { max-width: 60ch; }
.center { text-align: center; }
.center h1, .center h2, .center h3,
.center .lede, .center .measure { margin-inline: auto; }

/* ------------------------------------------------------------- layout bits */

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

section { padding: clamp(64px, 9vw, 118px) 0; }

.band--sand { background: var(--sand-soft); }
.band--dark { background: var(--green-deep); color: var(--sand); }
.band--dark h2, .band--dark h3, .band--dark .display { color: var(--cream); }
.band--dark .lede { color: rgba(247, 239, 227, 0.76); }

.rule { height: 1px; background: var(--rule); border: 0; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--r);
  border: 1.5px solid transparent;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.btn:hover { transform: translateY(-2px); }

.btn--solid  { background: var(--green); color: var(--cream); }
.btn--solid:hover { background: var(--green-deep); }

.btn--ghost  { border-color: var(--green); color: var(--green); }
.btn--ghost:hover { background: var(--green); color: var(--cream); }

.btn--cream  { background: var(--cream); color: var(--green-deep); }
.btn--cream:hover { background: var(--gold); color: var(--green-deep); }

.btn--onphoto { border-color: rgba(255,255,255,.85); color: #fff; backdrop-filter: blur(3px); }
.btn--onphoto:hover { background: var(--cream); color: var(--green-deep); border-color: var(--cream); }

.arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 5px;
  transition: gap .25s, color .25s;
}
.arrowlink:hover { gap: 16px; color: var(--gold); }
.band--dark .arrowlink { color: var(--cream); }
.band--dark .arrowlink:hover { color: var(--gold); }

/* ------------------------------------------------------------------- nav */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 20px 0;
  transition: background .3s, box-shadow .3s, padding .3s;
}
.nav__inner {
  position: relative;   /* containing block for the mobile drop-down panel */
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

/* The logo PNGs are trimmed to the wordmark's own bounding box (824x282), so
   these widths are the visible wordmark, and its left edge lines up with
   everything else in the column. */
.nav__logo { display: block; position: relative; width: 118px; flex: none; }
.nav__logo img { width: 100%; transition: opacity .3s; }
.nav__logo img + img { position: absolute; inset: 0; }

/* overlay state (homepage hero): cream logo, white links */
.nav--overlay .nav__logo .is-green { opacity: 0; }
.nav--overlay .nav__logo .is-cream { opacity: 1; }
.nav--overlay .nav__list a { color: #fff; }
.nav--overlay .nav__toggle span { background: #fff; }

/* solid state */
.nav.is-solid,
.nav:not(.nav--overlay) {
  background: var(--cream);
  box-shadow: 0 1px 0 var(--rule);
  padding: 12px 0;
}
.nav.is-solid .nav__logo .is-green,
.nav:not(.nav--overlay) .nav__logo .is-green { opacity: 1; }
.nav.is-solid .nav__logo .is-cream,
.nav:not(.nav--overlay) .nav__logo .is-cream { opacity: 0; }
.nav.is-solid .nav__list a,
.nav:not(.nav--overlay) .nav__list a { color: var(--green); }
.nav.is-solid .nav__toggle span,
.nav:not(.nav--overlay) .nav__toggle span { background: var(--green); }

.nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
}
.nav__list a {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  transition: border-color .25s, color .25s;
}
.nav__list a:hover { border-bottom-color: var(--gold); }
.nav__list .nav__cta a {
  border: 1.5px solid currentColor;
  border-radius: var(--r);
  padding: 11px 20px;
}
.nav__list .nav__cta a:hover { background: var(--gold); border-color: var(--gold); color: var(--green-deep); }

.nav__toggle { display: none; width: 30px; height: 22px; position: relative; }
.nav__toggle span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  transition: transform .3s, opacity .3s, background .3s;
}
.nav__toggle span:nth-child(1) { top: 0; }
.nav__toggle span:nth-child(2) { top: 10px; }
.nav__toggle span:nth-child(3) { top: 20px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: flex-end;
  padding: 0 0 clamp(56px, 9vw, 104px);
  color: #fff;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* Dark at the very top for nav legibility, near-clear through the middle so the
   photograph keeps its own colour, deep green at the base behind the headline. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,.04) 22%, rgba(0,0,0,0) 40%),
    linear-gradient(180deg, rgba(2,43,30,0) 45%, rgba(2,43,30,.66) 100%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 15ch; text-shadow: 0 2px 24px rgba(2,43,30,.35); }
.hero p {
  margin: 20px 0 34px;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  max-width: 44ch;
  color: rgba(255,255,255,.92);
}

/* page header for inner pages */
.pagehead { padding: clamp(130px, 17vw, 190px) 0 clamp(48px, 6vw, 76px); }
.pagehead h1 { max-width: 16ch; }
.pagehead .lede { margin-top: 18px; }

/* ------------------------------------------------- section head + grids */

.sechead { margin-bottom: clamp(38px, 5vw, 62px); }
.sechead h2 { max-width: 20ch; }
.sechead .lede { margin-top: 16px; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; }

.sec-cta { margin-top: clamp(40px, 5vw, 62px); }

/* ------------------------------------------------------- event cards (home) */

.evcard { display: flex; flex-direction: column; }
.evcard__media {
  display: block;        /* it's an <a> — the poster itself links to tickets */
  position: relative;
  aspect-ratio: 3 / 4;   /* matches the event posters, so they aren't cropped */
  overflow: hidden;
  border-radius: var(--r);
  background: var(--sand);
}
.evcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.evcard:hover .evcard__media img { transform: scale(1.045); }

.evcard__kicker {
  margin: 22px 0 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.evcard h3 { margin-bottom: 10px; }
.evcard__when {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--green-mid);
  margin-bottom: 12px;
}
.evcard p { color: var(--ink-soft); margin-bottom: 20px; }
.evcard .arrowlink { margin-top: auto; align-self: flex-start; }

/* -------------------------------------------------------------- kit cards */

.kit__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r); background: var(--sand); }
.kit__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.kit:hover .kit__media img { transform: scale(1.045); }
.kit h3 { margin: 20px 0 6px; }
.kit p { color: var(--ink-soft); }

/* ------------------------------------------------------ split (about/story) */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.split__media img { border-radius: var(--r); width: 100%; }
.split p + p { margin-top: 16px; }
.split .btn, .split .arrowlink { margin-top: 30px; }

/* --------------------------------------------------------- photo collage */

/* Two columns by default — sized for sitting inside one half of a .split.
   .collage--wide is the full-page-width version. */
.collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.collage img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); }
.collage--wide { grid-template-columns: repeat(4, 1fr); }

/* -------------------------------------------------------------- marquee */

.marquee { overflow: hidden; padding: 6px 0; }
.marquee__track { display: flex; gap: 14px; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee img { height: clamp(190px, 26vw, 300px); width: auto; border-radius: var(--r); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ------------------------------------------------------------- quotes */

.quote {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 32px 30px;
}
.quote__stars { color: var(--gold); letter-spacing: 3px; font-size: 0.85rem; margin-bottom: 14px; }
.quote p { font-size: 1.02rem; color: var(--ink-soft); }
.quote cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

/* ============================ EVENTS PAGE ================================ */

.month {
  font-family: 'Jost', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 8px;
}

.ev {
  display: grid;
  grid-template-columns: 118px 1fr minmax(0, 300px);
  gap: 32px;
  align-items: start;
  padding: 44px 0;
  border-bottom: 1px solid var(--rule);
}
.ev__date {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: clamp(3.2rem, 6vw, 4.6rem);
  font-weight: 600;
  line-height: .9;
  color: var(--green);
}
.ev__date span {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 10px;
}
.ev__sub {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: 1.12rem;
  color: var(--green-mid);
  margin: 4px 0 14px;
}
.ev__meta {
  font-size: 0.92rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
.ev__meta b { color: var(--green); font-weight: 600; }
.ev__detail { margin: 0 0 22px; color: var(--ink-soft); }
.ev__list { list-style: none; margin: 0 0 22px; }
.ev__list li { position: relative; padding-left: 20px; margin-bottom: 7px; color: var(--ink-soft); }
.ev__list li::before {
  content: ''; position: absolute; left: 0; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.ev__poster a { display: block; overflow: hidden; border-radius: var(--r); }
.ev__poster img { border-radius: var(--r); width: 100%; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.ev__poster a:hover img { transform: scale(1.03); }

.next { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 34px; }
.next__item { border-left: 2px solid var(--gold); padding: 4px 0 4px 22px; }
.next__item h3 { font-size: 1.28rem; margin-bottom: 6px; }
.next__item p { color: var(--ink-soft); font-size: 0.95rem; }
.band--dark .next__item h3 { color: var(--cream); }
.band--dark .next__item p { color: rgba(247,239,227,.7); }

/* ============================ RENTALS PAGE =============================== */

.prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.price { padding: 34px 24px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.price:first-child { border-left: 1px solid var(--rule); }
.price__who {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.price__from { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.price__amt {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: 2.5rem; font-weight: 600; color: var(--green); line-height: 1.1;
}
.price__what { font-size: 0.9rem; color: var(--ink-soft); margin-top: 8px; }

.incl {
  background: var(--sand);
  border-radius: var(--r);
  padding: 30px 32px;
  margin-top: 28px;
  font-size: 1.02rem;
  color: var(--green-deep);
}
.incl b { font-weight: 600; }

.rows { list-style: none; }
.rows li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 15px 0; border-bottom: 1px solid var(--rule);
}
.rows li > span:first-child { color: var(--ink-soft); }
.rows li > span:last-child { font-weight: 600; color: var(--green); white-space: nowrap; }
.rows .dots { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-4px); }

/* Same rhythm, no price column — a gold tick sits where the amount used to.
   The single span here is both :first-child and :last-child, so it inherits the
   price column's white-space:nowrap and would overflow on narrow phones. */
.rows--plain li { gap: 14px; }
.rows--plain li > span,
.rows--plain li > span:last-child {   /* must out-rank .rows li > span:last-child */
  white-space: normal;
  overflow-wrap: break-word;
  font-weight: 400;
  color: var(--ink);
}
.rows--plain li::before {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-3px);
}

.steps { counter-reset: s; }
.step__n {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: 2.6rem; font-weight: 600; color: var(--gold); line-height: 1;
  margin-bottom: 14px;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--ink-soft); }

.notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 46px; }
.notes h3 { font-size: 1.16rem; margin-bottom: 6px; }
.notes p { color: var(--ink-soft); font-size: 0.97rem; }
.band--dark .notes p { color: rgba(247,239,227,.74); }

/* ============================== FOOTER =================================== */

.footer { background: var(--green-deep); color: rgba(247,239,227,.78); padding: 74px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 46px; }
.footer__logo { width: 152px; margin-bottom: 22px; }
.footer__tag { font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 40, 'WONK' 1; font-size: 1.15rem; color: var(--gold); }
.footer h4 {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cream); margin-bottom: 18px;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 11px; }
.footer a:hover { color: var(--gold); }
.footer__social { display: flex; gap: 14px; margin-top: 24px; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(247,239,227,.28);
  display: grid; place-items: center;
  transition: background .25s, border-color .25s, color .25s;
}
.footer__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--green-deep); }
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__base {
  margin-top: 52px; padding-top: 24px;
  border-top: 1px solid rgba(247,239,227,.16);
  font-size: 0.8rem; color: rgba(247,239,227,.55);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ---------------------------------------------------------- scroll reveal */
/* Only hides content when JS is confirmed running, so no-JS still renders. */

.js [data-reveal] { opacity: 0; transform: translateY(22px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ============================= RESPONSIVE ================================ */

@media (max-width: 980px) {
  .grid3 { grid-template-columns: 1fr 1fr; }
  .grid3 > :nth-child(3) { grid-column: span 2; }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .prices { grid-template-columns: 1fr 1fr; }
  .price:nth-child(3) { border-left: 1px solid var(--rule); }
  .price:first-child, .price:nth-child(3) { border-left: 1px solid var(--rule); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: span 2; }
  .ev { grid-template-columns: 92px 1fr; }
  .ev__poster { grid-column: 2; max-width: 300px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  /* Fraunces is wide; scale the display sizes to the viewport so long words
     ("something", "gathering") can't push past the 24px gutter. */
  h1, .h1 { font-size: clamp(1.95rem, 8.4vw, 2.9rem); }
  h2, .h2 { font-size: clamp(1.7rem, 7.2vw, 2.5rem); }
  h1, h2, h3, .display, .lede, p { overflow-wrap: break-word; }

  .nav__toggle { display: block; }
  /* Drops from under the bar, so the wordmark and the close button stay visible. */
  .nav__list {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--cream);
    padding: 6px 26px 30px;
    box-shadow: 0 18px 40px rgba(2,43,30,.16);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: transform .3s cubic-bezier(.3,.8,.3,1), opacity .24s, visibility .24s;
  }
  .nav__list.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav--overlay .nav__list a,
  .nav.is-solid .nav__list a { color: var(--green); }
  .nav__list li { width: 100%; border-bottom: 1px solid var(--rule); }
  .nav__list li:last-child { border-bottom: 0; }
  .nav__list a { display: block; padding: 16px 0; font-size: 0.85rem; }
  .nav__list .nav__cta { margin-top: 16px; }
  .nav__list .nav__cta a { display: inline-block; padding: 13px 24px; }
  .nav__logo { width: 86px; }

  /* On phones the nav is always the solid cream bar — there is no full-bleed
     photo behind it to justify the overlay treatment. */
  .nav, .nav--overlay {
    background: var(--cream);
    box-shadow: 0 1px 0 var(--rule);
    padding: 12px 0;
  }
  .nav--overlay .nav__logo .is-green { opacity: 1; }
  .nav--overlay .nav__logo .is-cream { opacity: 0; }
  .nav--overlay .nav__toggle span { background: var(--green); }

  .grid3, .grid2, .next, .notes { grid-template-columns: 1fr; }
  .grid3 > :nth-child(3) { grid-column: auto; }
  .prices { grid-template-columns: 1fr; }
  .price { border-left: 1px solid var(--rule) !important; }
  .collage--wide { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__grid > :first-child { grid-column: auto; }

  .ev { grid-template-columns: 1fr; gap: 4px; padding: 34px 0; }
  .ev__date { display: flex; align-items: baseline; gap: 14px; font-size: 3rem; margin-bottom: 10px; }
  .ev__date span { margin-top: 0; }
  .ev__poster { grid-column: auto; max-width: 260px; margin-top: 4px; }

  /* A landscape photo behind a portrait viewport crops to almost nothing, so on
     phones the hero splits: photo on top, headline on the deep green below it. */
  .hero {
    display: block;
    min-height: 0;
    padding: 90px 0 clamp(40px, 11vw, 56px);  /* clears the fixed nav */
    background: var(--green-deep);
  }
  .hero__img { position: static; height: auto; aspect-ratio: 4 / 3; object-position: 52% 42%; }
  .hero::after { display: none; }
  .hero .wrap { padding-top: 34px; }
  .hero h1 { max-width: none; text-shadow: none; }
  .hero p { color: rgba(247,239,227,.8); }
}