.section.elemental-kin-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 9vw, 152px) 44px clamp(82px, 7vw, 118px);
  background: #fffdfa;
}

.elemental-kin-hero .container {
  position: relative;
  z-index: 1;
  width: min(88vw, 1680px);
  margin: 0 auto;
}

.elemental-kin-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(360px, 0.44fr);
  gap: clamp(46px, 7vw, 106px);
  align-items: center;
}

.elemental-kin-hero__copy {
  position: relative;
  max-width: 860px;
}

.elemental-kin-hero--watermark .elemental-kin-hero__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -86px;
  top: -104px;
  width: clamp(340px, 34vw, 620px);
  height: clamp(340px, 34vw, 620px);
  background-image: url("/fileadmin/messy-middle/logos/messy-middle-logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.085;
  pointer-events: none;
}

.elemental-kin-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #c56535;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.elemental-kin-hero__eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: currentColor;
}

.elemental-kin-hero h1 {
  max-width: 920px;
  margin: 0;
  color: #172239;
  font-family: var(--ff-serif);
  font-size: clamp(3.35rem, 5.6vw, 6.4rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.elemental-kin-hero__lead {
  max-width: 760px;
  margin: 28px 0 0;
  color: #172239;
  font-size: clamp(1.08rem, 1.32vw, 1.22rem);
  line-height: 1.62;
  font-weight: 700;
}

.elemental-kin-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.elemental-kin-hero__visual {
  position: relative;
}

.elemental-kin-hero__image {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin: 0;
  background: #f8f3eb;
}

.elemental-kin-hero__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elemental-kin-hero__note {
  position: relative;
  z-index: 2;
  width: min(88%, 360px);
  margin: -56px 0 0 auto;
  padding: 28px;
  background: #e8eee0;
}

.elemental-kin-hero__note strong {
  display: block;
  margin-bottom: 8px;
  color: #172239;
  font-family: var(--ff-serif);
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

.elemental-kin-hero__note p {
  margin: 0;
  color: #465044;
  font-size: 0.96rem;
  line-height: 1.58;
}

.elemental-kin-hero__route {
  position: absolute;
  right: -58px;
  top: -44px;
  width: clamp(180px, 20vw, 300px);
  height: clamp(180px, 20vw, 300px);
  opacity: 0.18;
  pointer-events: none;
  background:
    linear-gradient(90deg, #c56535 0 52%, transparent 52% 100%) 0 14% / 100% 3px no-repeat,
    linear-gradient(90deg, transparent 0 22%, #c56535 22% 76%, transparent 76% 100%) 0 40% / 100% 3px no-repeat,
    linear-gradient(90deg, #c56535 0 34%, transparent 34% 100%) 0 68% / 100% 3px no-repeat,
    linear-gradient(90deg, transparent 0 42%, #c56535 42% 100%) 0 90% / 100% 3px no-repeat,
    linear-gradient(180deg, #c56535 0 42%, transparent 42% 100%) 18% 0 / 3px 100% no-repeat,
    linear-gradient(180deg, transparent 0 18%, #c56535 18% 74%, transparent 74% 100%) 48% 0 / 3px 100% no-repeat,
    linear-gradient(180deg, #c56535 0 64%, transparent 64% 100%) 78% 0 / 3px 100% no-repeat;
}

@media (max-width: 980px) {
  .section.elemental-kin-hero {
    padding: 84px 24px 76px;
  }

  .elemental-kin-hero__layout {
    grid-template-columns: 1fr;
  }

  .elemental-kin-hero__image {
    aspect-ratio: 16 / 10;
  }

  .elemental-kin-hero__note {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .section.elemental-kin-hero {
    padding: 70px 20px 64px;
  }

  .elemental-kin-hero h1 {
    font-size: clamp(2.85rem, 13vw, 4.35rem);
  }

  .elemental-kin-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .elemental-kin-hero__actions .button {
    width: 100%;
    justify-content: center;
  }

  .elemental-kin-hero__note {
    width: 92%;
    margin-top: -34px;
    padding: 24px;
  }

  .elemental-kin-hero--watermark .elemental-kin-hero__copy::before {
    left: -58px;
    top: -70px;
    width: 360px;
    height: 360px;
    opacity: 0.065;
  }
}

/* Elemental Kin Hero editor-selected colour variants */

.elemental-kin-hero--bg-cream {
  background: #fffdfa;
}

.elemental-kin-hero--bg-white {
  background: #ffffff;
}

.elemental-kin-hero--bg-sage {
  background: #d4dfc9;
}

.elemental-kin-hero--bg-blue {
  background: #d9e4ea;
}

.elemental-kin-hero--bg-terracotta {
  background: #e5b092;
}

.elemental-kin-hero--bg-navy {
  background: #172239;
}

.elemental-kin-hero--text-light h1,
.elemental-kin-hero--text-light .elemental-kin-hero__lead,
.elemental-kin-hero--text-light .elemental-kin-hero__note strong,
.elemental-kin-hero--text-light .elemental-kin-hero__note p {
  color: #fffdfa;
}

.elemental-kin-hero--text-light .elemental-kin-hero__eyebrow {
  color: #e5b092;
}

.elemental-kin-hero--accent-terracotta .elemental-kin-hero__eyebrow,
.elemental-kin-hero--accent-terracotta .elemental-kin-hero__route {
  color: #c56535;
}

.elemental-kin-hero--accent-sage .elemental-kin-hero__eyebrow {
  color: #788766;
}

.elemental-kin-hero--accent-blue .elemental-kin-hero__eyebrow {
  color: #446779;
}

.elemental-kin-hero--accent-navy .elemental-kin-hero__eyebrow {
  color: #172239;
}

.elemental-kin-hero--accent-teal .elemental-kin-hero__eyebrow {
  color: #2e9f93;
}

.elemental-kin-hero--note-sage .elemental-kin-hero__note {
  background: #d4dfc9;
}

.elemental-kin-hero--note-blue .elemental-kin-hero__note {
  background: #d9e4ea;
}

.elemental-kin-hero--note-cream .elemental-kin-hero__note {
  background: #ead9c8;
}

.elemental-kin-hero--note-terracotta .elemental-kin-hero__note {
  background: #e5b092;
}

.elemental-kin-hero--note-navy .elemental-kin-hero__note {
  background: #172239;
}

.elemental-kin-hero--note-navy .elemental-kin-hero__note strong,
.elemental-kin-hero--note-navy .elemental-kin-hero__note p {
  color: #fffdfa;
}

.elemental-kin-hero--note-white .elemental-kin-hero__note {
  background: #fffdfa;
}

.elemental-kin-hero--button-navy .button--primary {
  background: #172239 !important;
  color: #fffdfa !important;
}

.elemental-kin-hero--button-terracotta .button--primary {
  background: #c56535 !important;
  color: #fffdfa !important;
}

.elemental-kin-hero--button-sage .button--primary {
  background: #788766 !important;
  color: #fffdfa !important;
}

.elemental-kin-hero--button-outline .button--primary {
  background: transparent !important;
  color: #172239 !important;
  border: 1px solid rgba(23, 34, 57, 0.28) !important;
}

.elemental-kin-hero--bg-teal {
  background: #b9ded7;
}

.elemental-kin-hero--note-teal .elemental-kin-hero__note {
  background: #b9ded7;
}

.elemental-kin-hero--button-teal .button--primary {
  background: #2e9f93 !important;
  color: #fffdfa !important;
}

/* Elemental Kin Hero palette-slot variants driven by Site Settings */

.elemental-kin-hero--bg-primary { background: var(--ek-colour-primary); }
.elemental-kin-hero--bg-secondary { background: var(--ek-colour-secondary); }
.elemental-kin-hero--bg-accent { background: var(--ek-colour-accent); }
.elemental-kin-hero--bg-light { background: var(--ek-colour-light); }
.elemental-kin-hero--bg-soft { background: var(--ek-colour-soft); }
.elemental-kin-hero--bg-warm { background: var(--ek-colour-warm); }
.elemental-kin-hero--bg-button-one { background: var(--ek-colour-button-one); }
.elemental-kin-hero--bg-button-two { background: var(--ek-colour-button-two); }

.elemental-kin-hero--text-primary h1,
.elemental-kin-hero--text-primary .elemental-kin-hero__lead {
  color: var(--ek-colour-primary);
}

.elemental-kin-hero--text-light h1,
.elemental-kin-hero--text-light .elemental-kin-hero__lead {
  color: var(--ek-colour-light);
}

.elemental-kin-hero--accent-primary .elemental-kin-hero__eyebrow { color: var(--ek-colour-primary); }
.elemental-kin-hero--accent-secondary .elemental-kin-hero__eyebrow { color: var(--ek-colour-secondary); }
.elemental-kin-hero--accent-accent .elemental-kin-hero__eyebrow { color: var(--ek-colour-accent); }
.elemental-kin-hero--accent-light .elemental-kin-hero__eyebrow { color: var(--ek-colour-light); }
.elemental-kin-hero--accent-soft .elemental-kin-hero__eyebrow { color: var(--ek-colour-soft); }
.elemental-kin-hero--accent-warm .elemental-kin-hero__eyebrow { color: var(--ek-colour-warm); }
.elemental-kin-hero--accent-button-one .elemental-kin-hero__eyebrow { color: var(--ek-colour-button-one); }
.elemental-kin-hero--accent-button-two .elemental-kin-hero__eyebrow { color: var(--ek-colour-button-two); }

.elemental-kin-hero--note-primary .elemental-kin-hero__note { background: var(--ek-colour-primary); }
.elemental-kin-hero--note-secondary .elemental-kin-hero__note { background: var(--ek-colour-secondary); }
.elemental-kin-hero--note-accent .elemental-kin-hero__note { background: var(--ek-colour-accent); }
.elemental-kin-hero--note-light .elemental-kin-hero__note { background: var(--ek-colour-light); }
.elemental-kin-hero--note-soft .elemental-kin-hero__note { background: var(--ek-colour-soft); }
.elemental-kin-hero--note-warm .elemental-kin-hero__note { background: var(--ek-colour-warm); }
.elemental-kin-hero--note-button-one .elemental-kin-hero__note { background: var(--ek-colour-button-one); }
.elemental-kin-hero--note-button-two .elemental-kin-hero__note { background: var(--ek-colour-button-two); }

.elemental-kin-hero--button-primary .button--primary { background: var(--ek-colour-primary) !important; color: var(--ek-colour-light) !important; }
.elemental-kin-hero--button-secondary .button--primary { background: var(--ek-colour-secondary) !important; color: var(--ek-colour-primary) !important; }
.elemental-kin-hero--button-accent .button--primary { background: var(--ek-colour-accent) !important; color: var(--ek-colour-light) !important; }
.elemental-kin-hero--button-light .button--primary { background: var(--ek-colour-light) !important; color: var(--ek-colour-primary) !important; }
.elemental-kin-hero--button-soft .button--primary { background: var(--ek-colour-soft) !important; color: var(--ek-colour-primary) !important; }
.elemental-kin-hero--button-warm .button--primary { background: var(--ek-colour-warm) !important; color: var(--ek-colour-primary) !important; }
.elemental-kin-hero--button-button-one .button--primary { background: var(--ek-colour-button-one) !important; color: var(--ek-colour-light) !important; }
.elemental-kin-hero--button-button-two .button--primary { background: var(--ek-colour-button-two) !important; color: var(--ek-colour-light) !important; }


/* Messy Middle design system: hero refinement */
.elemental-kin-hero__eyebrow,
.hero__eyebrow {
  position: relative;
}

.elemental-kin-hero__eyebrow::after,
.hero__eyebrow::after {
  content: "";
  display: block;
  width: clamp(3.5rem, 6vw, 6rem);
  height: 2px;
  margin-top: 0.85rem;
  background: var(--ek-colour-accent, #c56535);
}

.elemental-kin-hero__caption,
.hero__caption,
.hero-caption {
  transform: translateY(clamp(-2.25rem, -3vw, -1.25rem));
  position: relative;
  z-index: 3;
}