.about-light-hero {
  position: relative;
  isolation: isolate;
  background: var(--paper);
  color: var(--ink);
  min-height: 100svh;
  display: flex;
  flex-direction: column;

  padding-inline: 0;
  overflow: hidden;
}
.about-light-hero__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
  padding-block: 28px;
  padding-left: max(24px, calc((100vw - 1180px) / 2));
  padding-right: max(24px, calc((100vw - 1180px) / 2));
  position: relative;
  z-index: 2;
}
.about-light-hero__brand { display: flex; align-items: center; width: 108px; min-height: 44px; flex: none; }
.about-light-hero__brand img { width: 100%; height: auto; }
.about-light-hero__home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--ink);
}
.about-light-hero__copy {
  position: relative;
  z-index: 2;
  margin-left: max(24px, calc((100vw - 1180px) / 2));
  margin-block: 0;
  width: calc(60% - max(24px, calc((100vw - 1180px) / 2)) - clamp(24px, 4vw, 64px));
  max-width: 580px;
  padding-block: 48px 104px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-light-hero__copy h1 {
  margin: 0 0 clamp(28px, 5vh, 48px);
  color: var(--coral);
  font-size: clamp(2.025rem, 3.78vw, 3.375rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.03em;
}
.about-light-hero__copy p {
  margin: 0;
  font-size: clamp(.95rem, 1.15vw, 1.0625rem);
  line-height: 1.65;
}
.about-light-hero__copy p + p { margin-top: 1.5rem; }

.about-light-hero__cue {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 48px;
  min-height: 44px;
  padding: .25rem .5rem;
  color: var(--ink);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-decoration: none;
}
.about-light-hero__cue svg { transition: transform .3s ease; }
.about-light-hero__cue:hover { color: var(--coral); }
.about-light-hero__cue:hover svg { transform: translateY(3px); }
.about-light-hero__cue:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }

.about-light-hero__clip-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.about-light-hero__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  margin: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--paper);
  -webkit-clip-path: url(#aboutWavyClip);
          clip-path: url(#aboutWavyClip);
}
.about-light-hero__image img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: 60% 35%;
}

.about-light-hero a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }

@keyframes aboutLightEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes aboutLightImage { from { opacity: 0; } to { opacity: 1; } }
@keyframes aboutLightCue { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .about-light-hero__copy h1 { animation: aboutLightEnter 700ms cubic-bezier(.22,1,.36,1) 160ms backwards; }
  .about-light-hero__copy p { animation: aboutLightEnter 700ms cubic-bezier(.22,1,.36,1) 260ms backwards; }
  .about-light-hero__copy p:nth-of-type(2) { animation-delay: 420ms; }
  .about-light-hero__copy p:nth-of-type(3) { animation-delay: 580ms; }
  .about-light-hero__copy p:nth-of-type(4) { animation-delay: 740ms; }
  .about-light-hero__image { animation: aboutLightImage 700ms ease-out 1s backwards; }
  .about-light-hero__cue { animation: aboutLightCue 700ms ease-out 900ms backwards; }

  .about-light-hero:focus-within .about-light-hero__copy > *,
  .about-light-hero:target .about-light-hero__copy > * { animation: none; }
}

@media (max-width: 800px) {
  .about-light-hero__header {
    width: 100%;
    padding-inline: 24px;
  }
  .about-light-hero__copy {
    margin: 0;
    width: 100%;
    max-width: none;
    padding: 24px 24px 32px;
    justify-content: flex-start;
  }
  .about-light-hero__cue {
    position: static;
    margin: 24px auto 0;
  }
  .about-light-hero__image {
    position: static;
    width: 100%;
    margin-left: 0;
    margin-top: 16px;
    -webkit-clip-path: none;
            clip-path: none;
    background: transparent;
  }
  .about-light-hero__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
}
@media (max-width: 560px) {
  .about-light-hero__header { padding-block: 20px; }
  .about-light-hero__brand { width: 90px; }
  .about-light-hero__copy p { line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
  .about-light-hero__cue svg { transition: none; }
}