.journey-section {
  position: relative;
  padding-block: clamp(36px, 4.2vw, 60px) clamp(82px, 9vw, 132px);
  background: var(--paper);
}

.section-heading {
  position: relative;
  z-index: 5;
  display: block;
  max-width: 900px;
  margin-bottom: 12px;
}

.section-heading .eyebrow { margin-top: 0; }

.section-heading h2,
.section-intro h2 {
  margin: 0;
  font-size: clamp(44px, 4.4vw, 63px);
  font-weight: 700;
  letter-spacing: -.09em;
  line-height: .88;
}

.section-heading h2 { max-width: 18ch; }

.section-heading > div > p {
  max-width: 600px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.journey-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 58px);
  padding-top: 68px;
}

.journey-step {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 220px;
  grid-template-columns: minmax(118px, .82fr) minmax(0, 1fr);
  gap: clamp(13px, 1.6vw, 23px);
  align-items: center;
}

.step-photo {
  height: clamp(170px, 17vw, 224px);
  overflow: hidden;
  background: var(--mauve);
  clip-path: polygon(0 0, 100% 0, 91% 100%, 7% 94%);
}

.journey-step:nth-of-type(2) .step-photo {
  clip-path: polygon(4% 0, 100% 4%, 96% 100%, 0 92%);
}

.journey-step:nth-of-type(3) .step-photo {
  clip-path: polygon(0 6%, 93% 0, 100% 91%, 9% 100%);
}

.step-photo img,
.audience-visual img,
.friends-visual img,
.venue-visual img {
  transform-origin: center;
  will-change: transform;
}

.step-copy { min-width: 0; }

.step-number {
  display: block;
  margin-bottom: 15px;
  color: var(--plum);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}

.step-copy h3 {
  margin: 0 0 10px;
  font-size: clamp(23px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: .98;
}

.step-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.journey-arrow {
  position: absolute;
  z-index: 7;
  top: 42px;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  transform: translate(-50%, -50%);
  background: var(--rose);
  color: var(--plum);
  font-size: 23px;
  transition: background .35s var(--motion-curve), color .35s var(--motion-curve), box-shadow .35s var(--motion-curve);
}

.journey-arrow:nth-child(2) { left: 33.33%; }
.journey-arrow:nth-child(4) { left: 66.66%; }

.journey-arrow:hover {
  background: var(--plum);
  color: var(--white);
  box-shadow: 0 0 0 9px rgb(221 184 201 / 30%);
}

.audience-section {
  position: relative;
  padding-top: clamp(110px, 13vw, 184px);
  background: var(--paper);
}

.audience-intro {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  column-gap: clamp(42px, 8vw, 116px);
  align-items: end;
  padding-bottom: clamp(58px, 8vw, 110px);
}

.audience-intro .eyebrow { grid-column: 1; margin-bottom: 18px; }

.audience-intro h2 {
  grid-column: 1;
  max-width: 9ch;
  font-size: clamp(58px, 7.3vw, 104px);
  line-height: .84;
}

.audience-intro > p:last-child {
  grid-column: 2;
  grid-row: 2;
  max-width: 480px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.audience-nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 72px;
  padding-block: 10px;
  border-block: 1px solid var(--line);
}

.audience-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .3s var(--motion-curve), transform .3s var(--motion-curve);
}

.audience-nav a:hover { transform: translateY(-2px); color: var(--plum); }
.audience-nav .material-symbols-outlined { color: var(--plum); font-size: 18px; }

.audience-chapter {
  position: relative;
  scroll-margin-top: 28px;
  padding-block: clamp(96px, 11vw, 158px);
}

.singles-chapter,
.audience-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(30px, 6vw, 88px);
  align-items: center;
}

.audience-visual {
  position: relative;
  z-index: 5;
  height: clamp(430px, 51vw, 690px);
  overflow: hidden;
  background: var(--mauve);
  clip-path: polygon(0 4%, 100% 0, 92% 100%, 5% 94%);
}

.audience-visual img { object-position: center; }

.audience-copy {
  position: relative;
  z-index: 6;
  max-width: 590px;
  padding-block: 42px;
  background: var(--paper);
}

.singles-chapter .audience-copy { margin-left: -100px; padding-left: 38px; }
.singles-chapter .audience-visual { width: 112%; margin-left: -8%; }

.audience-copy h3,
.friends-heading h3 {
  max-width: 9ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(50px, 6.1vw, 88px);
  line-height: .88;
}

.audience-copy > p:not(.eyebrow),
.friends-copy > p {
  max-width: 470px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.audience-cta { margin-top: 25px; }

.couples-chapter {
  padding-block: clamp(110px, 13vw, 180px);
}

.couples-chapter::before {
  position: absolute;
  z-index: 1;
  top: 3%;
  right: 0;
  width: 58%;
  height: 94%;
  clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%);
  background: var(--mauve);
  content: "";
}

.couples-chapter .audience-layout {
  position: relative;
  z-index: 5;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}

.couples-chapter .audience-copy {
  margin-right: -70px;
  padding-right: 30px;
  background: var(--paper);
}

.couples-chapter .audience-visual {
  width: 112%;
  height: clamp(430px, 49vw, 650px);
  margin-right: -12%;
  background: var(--lavender);
  clip-path: polygon(9% 0, 100% 5%, 95% 96%, 0 100%);
}

.friends-chapter { padding-block: clamp(92px, 11vw, 152px); }

.friends-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, .7fr);
  gap: 50px;
  align-items: end;
  margin-bottom: 32px;
}

.friends-heading h3 { max-width: 10ch; }

.friends-heading .chapter-lede {
  max-width: 350px;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.friends-visual {
  position: relative;
  z-index: 5;
  width: 92%;
  height: clamp(340px, 45vw, 610px);
  margin-left: auto;
  overflow: hidden;
  background: var(--lavender);
  clip-path: polygon(0 0, 100% 3%, 96% 100%, 4% 96%);
}

.friends-visual img { object-position: center 58%; }

.friends-copy {
  position: relative;
  z-index: 5;
  display: flex;
  width: 76%;
  align-items: end;
  justify-content: space-between;
  gap: 38px;
  margin-top: 12px;
}

.friends-copy > p { margin-top: 0; }
.friends-copy .audience-cta { flex: 0 0 auto; }

.venue-section {
  position: relative;
  display: grid;
  min-height: 760px;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  overflow: hidden;
  background: var(--plum);
  color: var(--white);
}

.venue-visual {
  position: relative;
  z-index: 5;
  min-height: 100%;
  overflow: hidden;
  background: var(--lavender);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}

.venue-copy {
  position: relative;
  z-index: 5;
  align-self: center;
  max-width: 760px;
  margin-left: -8%;
  padding: clamp(56px, 7.5vw, 108px) clamp(48px, 7.5vw, 110px) clamp(56px, 7.5vw, 108px) clamp(54px, 7vw, 96px);
}

.venue-copy .eyebrow { color: var(--rose); }

.venue-copy h2 {
  max-width: 9ch;
  color: var(--white);
  font-size: clamp(58px, 6.5vw, 92px);
  line-height: .88;
}

.venue-copy > p:not(.eyebrow) {
  max-width: 490px;
  margin: 26px 0 0;
  color: #F1E5EE;
  font-size: 16px;
  line-height: 1.65;
}

.venue-steps {
  display: grid;
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid rgb(255 255 255 / 28%);
  list-style: none;
}

.venue-steps li {
  display: grid;
  grid-template-columns: minmax(140px, .8fr) minmax(0, 1.2fr);
  gap: 22px;
  padding: 15px 0;
  border-bottom: 1px solid rgb(255 255 255 / 28%);
  font-size: 12px;
  line-height: 1.5;
}

.venue-steps li span:first-child { color: var(--white); font-weight: 600; }
.venue-steps li span:last-child { color: #E8DCE5; }
.venue-interest { margin-top: 28px; }

.venue-note {
  margin: 14px 0 0 !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

.venue-copy .venue-note { color: #E8DCE5 !important; }

.interest-section {
  position: relative;
  padding-block: clamp(104px, 12vw, 170px);
  background: var(--paper);
}

.interest-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(56px, 10vw, 150px);
  align-items: start;
}

.section-intro { padding-top: 10px; }
.section-intro h2 { max-width: 8ch; }

.section-intro > p:not(.eyebrow) {
  max-width: 410px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.interest-tabs {
  display: flex;
  flex-direction: row;
  gap: 30px;
  margin-top: 38px;
  border-bottom: 1px solid var(--line);
}

.tab {
  position: relative;
  min-height: 54px;
  padding: 11px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 500 13px "Outfit", sans-serif;
}

.tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--plum);
  content: "";
  transition: transform .25s var(--motion-curve);
}

.tab.active { color: var(--plum); font-weight: 700; }
.tab.active::after { transform: scaleX(1); }
.tab::before { content: none !important; }

.form-panel { min-width: 0; }

.interest-context {
  margin: 0 0 15px;
  color: var(--plum);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.signup-form {
  padding: 0;
  border: 0;
  background: transparent;
}

.form-heading { display: block; margin-bottom: 31px; }

.form-heading h3 {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -.07em;
  line-height: 1;
}

.form-heading p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.signup-form > label:not(.consent),
.field-row label {
  display: block;
  margin: 18px 0 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.signup-form input:not([type="checkbox"]) {
  width: 100%;
  height: 53px;
  padding-inline: 2px;
  border: 0;
  border-bottom: 1px solid #BEB3BF;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 15px "Outfit", sans-serif;
}

.signup-form input:not([type="checkbox"]):focus-visible {
  outline: 0;
  border-bottom: 2px solid var(--sage);
}

.signup-form input::placeholder { color: #8C818D; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.field-row label { margin-top: 0; }
.field-row input { margin-top: 7px; }

.consent {
  display: flex;
  align-items: start;
  gap: 10px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.consent input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--plum);
}

.optional { color: var(--muted); font-weight: 400; }
.signup-form .button { margin-top: 25px; }

.form-message {
  min-height: 18px;
  margin: 13px 0 0;
  color: var(--sage);
  font-size: 13px;
  line-height: 1.5;
}

.form-message.error { color: var(--plum); }
.signup-form[hidden] { display: none !important; }

.footer {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(1320px, calc(100% - 112px));
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto;
  padding-block: 24px;
  border-top: 1px solid var(--line);
}

.footer .brand { font-size: 18px; }
.footer .brand-mark { width: 33px; height: 33px; font-size: 14px; }
.footer p { margin: 0; color: var(--muted); font-size: 12px; }
.footer > a:last-child { color: var(--ink); font-size: 12px; text-decoration: none; }
.footer > a:last-child:hover { color: var(--plum); }

@media (max-width: 1150px) {
  .journey-step { grid-template-columns: minmax(104px, .72fr) minmax(0, 1fr); }
  .section-heading { grid-template-columns: minmax(145px, .5fr) minmax(0, 1.5fr); }
  .audience-copy h3,
  .friends-heading h3 { font-size: clamp(48px, 6.6vw, 74px); }
  .venue-copy { padding-inline: 56px; }
}

@media (max-width: 820px) {
  .section-heading h2 { max-width: 14ch; font-size: clamp(48px, 7vw, 64px); }
  .journey-grid { grid-template-columns: 1fr; gap: 0; padding: 56px 0 0 34px; }
  .journey-step,
  .journey-step:nth-of-type(2),
  .journey-step:nth-of-type(3) {
    min-height: 0;
    grid-template-columns: minmax(130px, .75fr) minmax(0, 1.25fr);
    gap: 28px;
    padding-block: 20px;
  }

  .step-photo { height: clamp(190px, 31vw, 255px); }
  .journey-arrow {
    position: relative;
    top: auto;
    left: auto !important;
    width: 54px;
    height: 54px;
    margin-block: 4px;
    margin-left: -34px;
    transform: rotate(90deg);
    place-self: start;
  }

  .audience-section { padding-top: 110px; }
  .audience-intro { grid-template-columns: 1fr; column-gap: 0; padding-bottom: 54px; }
  .audience-intro .eyebrow { grid-column: 1; grid-row: 1; }
  .audience-intro h2 { grid-column: 1; grid-row: 2; max-width: 11ch; font-size: clamp(64px, 10vw, 90px); }
  .audience-intro > p:last-child { grid-column: 1; grid-row: 3; max-width: 520px; margin-top: 22px; }
  .audience-nav { justify-content: flex-start; gap: 32px; }
  .singles-chapter,
  .audience-layout,
  .couples-chapter .audience-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .audience-visual { height: clamp(360px, 62vw, 540px); }
  .singles-chapter .audience-visual { width: 104%; margin-left: -4%; }
  .singles-chapter .audience-copy,
  .couples-chapter .audience-copy { max-width: 640px; margin: -72px 0 0 7%; padding: 32px; }
  .couples-chapter::before { width: 75%; }
  .couples-chapter .audience-visual { order: -1; width: 104%; height: clamp(360px, 62vw, 520px); margin: 0 -4% 0 0; }
  .friends-heading { grid-template-columns: 1fr; gap: 18px; }
  .friends-visual { width: 100%; height: clamp(320px, 60vw, 480px); }
  .friends-copy { width: 100%; }
  .venue-section { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); min-height: 680px; }
  .venue-copy { margin-left: -14%; padding: 48px 34px 48px 70px; }
  .venue-steps li { grid-template-columns: 1fr; gap: 4px; }
  .interest-grid { grid-template-columns: minmax(0, 1fr); gap: 54px; }
  .section-intro h2 { max-width: 11ch; }
  .section-intro > p:not(.eyebrow) { max-width: 540px; }
}

@media (max-width: 560px) {
  .journey-section { padding-block: 54px 84px; }
  .section-heading h2,
  .section-intro h2 { font-size: clamp(44px, 12vw, 62px); }
  .section-heading > div > p,
  .audience-intro > p:last-child { font-size: 14px; }
  .journey-grid { padding-top: 40px; padding-left: 31px; }
  .journey-step,
  .journey-step:nth-of-type(2),
  .journey-step:nth-of-type(3) {
    grid-template-columns: minmax(92px, .72fr) minmax(0, 1.28fr);
    gap: 18px;
    padding-block: 18px;
  }

  .step-photo { height: 188px; }
  .step-number { margin-bottom: 12px; font-size: 10px; }
  .step-copy h3 { margin-bottom: 8px; font-size: 23px; }
  .step-copy p { font-size: 12px; line-height: 1.5; }
  .journey-arrow { width: 48px; height: 48px; margin-left: -31px; font-size: 20px; }
  .audience-section { padding-top: 80px; }
  .audience-intro { padding-bottom: 38px; }
  .audience-intro h2 { font-size: clamp(54px, 13vw, 72px); }
  .audience-nav { width: 100%; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .audience-nav::-webkit-scrollbar { display: none; }
  .audience-nav a { min-width: max-content; margin-inline-end: 21px; gap: 5px; font-size: 12px; }
  .audience-nav .material-symbols-outlined { font-size: 15px; }
  .audience-chapter { padding-block: 72px; }
  .singles-chapter,
  .audience-layout,
  .couples-chapter .audience-layout { gap: 18px; }
  .audience-visual { height: 330px; }
  .singles-chapter .audience-copy,
  .couples-chapter .audience-copy { margin: -43px 0 0 5%; padding: 24px 20px; }
  .audience-copy h3,
  .friends-heading h3 { font-size: clamp(42px, 11vw, 58px); }
  .audience-copy > p:not(.eyebrow),
  .friends-copy > p { margin-top: 17px; font-size: 14px; line-height: 1.62; }
  .audience-cta { margin-top: 19px; }
  .couples-chapter { padding-block: 74px; }
  .couples-chapter::before { top: 9%; width: 84%; height: 79%; }
  .couples-chapter .audience-visual { height: 330px; }
  .friends-chapter { padding-block: 76px; }
  .friends-heading { gap: 12px; margin-bottom: 23px; }
  .friends-heading .chapter-lede { margin-top: 14px; font-size: 14px; }
  .friends-visual { height: 300px; }
  .friends-copy { display: block; padding-top: 7px; }
  .friends-copy .audience-cta { margin-top: 17px; }
  .venue-section { grid-template-columns: minmax(0, 1fr); }
  .venue-visual { min-height: 0; height: 290px; clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }
  .venue-copy { max-width: none; margin: 0; padding: 54px 24px 66px; }
  .venue-copy h2 { font-size: clamp(50px, 12.5vw, 66px); }
  .venue-copy > p:not(.eyebrow) { font-size: 14px; }
  .venue-steps li { padding-block: 13px; }
  .venue-steps li span:last-child { font-size: 13px; }
  .venue-interest { width: 100%; }
  .interest-section { padding-block: 78px; }
  .interest-grid { gap: 38px; }
  .section-intro h2 { max-width: 10ch; }
  .section-intro > p:not(.eyebrow) { font-size: 14px; }
  .interest-tabs { gap: 21px; margin-top: 25px; }
  .tab { font-size: 12px; }
  .signup-form { padding: 0; }
  .form-heading { margin-bottom: 25px; }
  .form-heading h3 { font-size: 30px; }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .field-row > div + div { margin-top: 17px; }
  .field-row label { margin-top: 0; }
  .footer { width: calc(100% - 40px); gap: 12px; }
  .footer .brand { font-size: 16px; }
  .footer p,
  .footer > a:last-child { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { scroll-behavior: auto !important; }
  .step-photo img,
  .audience-visual img,
  .friends-visual img,
  .venue-visual img { transform: none !important; }
}