.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--bg);
  padding: clamp(7rem, 12vw, 10rem) var(--gutter) clamp(5rem, 10vw, 8rem);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 60%;
  background: radial-gradient(60% 100% at 70% 100%, rgba(211, 251, 15, 0.12), transparent 70%);
  pointer-events: none;
}
.hero_inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
}
.hero_title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(3rem, 9.8vw, 7.2rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0 0 1.8rem;
}
.hero_title .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero_title .line_inner { display: block; }
.hero_lead {
  max-width: 66ch;
  color: var(--muted-light);
  font-size: var(--fs-body);
  margin: 0 0 2.4rem;
}
.hero_actions { display: flex; align-items: center; gap: clamp(1.4rem, 4vw, 2.6rem); flex-wrap: wrap; }

@media (max-width: 767px) {
  .hero_inner {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-swap {
    bottom: 0;
    justify-content: center;
  }

  .hero .motif-right-hero {
    width: 102vw;
    right: -13vw;
    z-index: -1;
    bottom: calc(100lvh - 100dvh - clamp(5rem, 10vw, 8rem) - 120px);
  }
  .hero .motif-right-hero img {
    max-height: 66vh;
    width: auto;
    margin-left: auto; 
    opacity: 0.2;
  }
}

.band { position: relative; padding: var(--section-y) var(--gutter); overflow: hidden; }
.band_inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; }
.band--green { background: var(--green); color: var(--ink); }
.band_text { max-width: 80ch; margin: 1.6rem 0 2.4rem; color: var(--ink); }
.band--green .band_text { color: rgba(19, 19, 22, 0.78); }
#services .scroll-cue { display: none; }

.feature {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: var(--section-y) max(var(--gutter), (100% - var(--maxw)) / 2) 0;
  overflow: hidden;
}

.feature--dark  { background: var(--ink); color: var(--white); }
.feature--light { background: var(--off-white); color: var(--ink); }
.feature--pink { background: var(--pink); color: var(--black); }
.feature--white { background: var(--white); color: var(--ink); }	

.feature_body { order: 0; justify-self: stretch; position: relative; z-index: 2; max-width: 38rem; }
.feature_body .btn { display: inline-flex; margin-top: 2.2rem; }

.feature_right { text-align: right; }

.feature_right .feature_text { margin-left: auto; }

.feature_text {
  margin: 1.4rem 0 0;
  color: var(--muted-light);
  max-width: 60ch;
}
.feature--light .feature_text { color: var(--black); }
.feature--pink .feature_text { color: var(--black); }
.feature--white .feature_text { color: var(--ink); }

.feature_media {
  order: 1;
  position: relative;
  min-height: clamp(320px, 36vw, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 861px) {
  .feature {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
  }
  .feature--media-right .feature_body { order: 1;  }
  .feature--media-right .feature_media { order: 2; margin-right: -7.5vw }
  .feature--media-left .feature_media { order: 0; margin-left: -7.5vw }
  .feature--media-left .feature_body { order: 1; justify-self: end; }
  
  .bespoke .feature_media {
    margin-left: calc(-1 * max(var(--gutter), (100vw - var(--maxw)) / 2));
    justify-content: flex-start;
  }
}
.bespoke img {
	transform: scaleX(-1);
}
.bespoke .feature_media { z-index: 2; }
.bespoke { padding-bottom: var(--section-y); }


.home-stage,
.home-overlay { position: relative; }
.home-stage { z-index: 1; height: 300lvh; }
.home-stage_inner {
  position: sticky;
  top: 0;
  height: 100lvh;
  overflow: hidden;
}
.home-stage_inner .hero { min-height: 0; height: 100lvh; }
.home-stage_inner .services { display: none; }

.home-overlay { z-index: 2; margin-top: -100lvh; }

@media (max-width: 767px) {
  .hero-swap .band_text {
    /* The stage locks the hero and this section into 100lvh, so this copy is
       held below --fs-body to stop it overflowing on small phones. 1.05rem
       closes most of the gap to the rest of the site without that risk. */
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 1rem 0 0;
  }
  .hero-swap .display--xl { line-height: 0.9; }
}

/* The stage is locked to 100lvh with overflow hidden, so text that does not
   fit is clipped rather than scrolled. On short viewports (320x568 and
   similar) 1.05rem loses the last line, so drop back there only. */
@media (max-width: 767px) and (max-height: 600px) {
  .hero-swap .band_text { font-size: 0.95rem; line-height: 1.45; }
}

.contact {
  position: relative;
  background: var(--bg);
  padding: clamp(6rem, 12vw, 10rem) var(--gutter);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.contact_inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; }
.contact_motif {
  position: absolute;
  z-index: 1;
  right: -6rem;
  bottom: -10rem;
  width: clamp(320px, 42vw, 600px);
  height: clamp(320px, 42vw, 600px);
  opacity: 0.14;
}