/* Introduction — page rules (tokens from site.css) */

/* 2.2 Welcome: photo + note box left, text right */
.intro-welcome__row { justify-content: flex-start; gap: clamp(32px, 5vw, 96px); }
.intro-welcome__media { position: relative; max-width: 585px; padding-right: 66px; }
.intro-welcome__media .photo-note { position: absolute; right: 0; bottom: 0; width: min(414px, 78%); }
.intro-welcome__text { display: flex; flex-direction: column; align-items: flex-start; max-width: 573px; }
.intro-welcome__text .body-text { margin-top: 28px; }
.intro-welcome__text .subtitle { margin-top: 17px; }
.intro-welcome__text .btn { margin-top: 43px; }

/* 2.3 Showreel: centred head, wide photo straddling white / dark */
.intro-showreel { padding-top: 106px; overflow: hidden; }
.intro-showreel > .container { position: relative; }
.intro-showreel .section-head { position: relative; }
.intro-showreel__years {
  position: absolute; left: 19%; top: -96px;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--f-script); font-size: var(--fs-script-lg); line-height: .8; color: var(--c-cream-2);
  pointer-events: none; user-select: none;
}
.intro-showreel__media { position: relative; max-width: 1005px; margin: 43px auto 0; }
.intro-showreel__media::before {                        /* full-bleed dark band behind the lower third */
  content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; height: 33.14%;
  transform: translateX(-50%); background: var(--c-ink);
}
.intro-showreel__media .photo { position: relative; }
.intro-showreel__media .script-lg {
  position: absolute; left: -40px; top: 46%; white-space: nowrap; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-64deg);
}
.intro-showreel__media .play-btn { position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px; }

/* 2.4 Three reasons */
.intro-reasons { padding-top: 70px; padding-bottom: 0; }
.intro-reasons .divider { margin-top: 61px; }

/* 2.5 Top models */
.intro-top { padding-top: 84px; padding-bottom: 113px; }
.intro-top .grid-4 { margin-top: 43px; }

/* 2.6 Testimonials */
.intro-quotes { padding-top: 120px; padding-bottom: 107px; overflow: hidden; }
.intro-quotes > .container { position: relative; }
.intro-quotes .ghost-script { left: 50%; top: 50%; transform: translate(-50%, -42%); }
.intro-quotes__grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5.1vw, 98px); row-gap: 56px; padding-inline: clamp(0px, 1.6vw, 31px);
}
.intro-quotes .quote__text { min-height: 164px; }

/* 2.7 Booking intro */
.intro-booking__row { justify-content: flex-start; gap: clamp(32px, 5.2vw, 100px); }
.intro-booking__media { max-width: 562px; }
.intro-booking__media .photo { aspect-ratio: 562 / 647; }
.intro-booking__text { display: flex; flex-direction: column; align-items: flex-start; max-width: 573px; }
.intro-booking__text .prose { margin-top: 29px; }
.intro-booking__text .btn { margin-top: 34px; }

/* 2.8 CTA band: keep the title on two lines so the band stays 248 tall */
.cta-band { padding-block: 40px; }
.cta-band__title { max-width: 600px; }

@media (max-width: 1280px) {
  .intro-showreel__media .script-lg, .intro-showreel__years { display: none; }
}
@media (max-width: 991px) {
  .intro-showreel { padding-top: var(--section-y); }
  .intro-showreel__media { margin-top: 32px; }
  .intro-reasons { padding-top: 56px; }
  .intro-reasons .divider { margin-top: 48px; }
  .intro-top { padding-top: 64px; padding-bottom: var(--section-y); }
  .intro-quotes { padding-block: var(--section-y); }
  .intro-quotes__grid { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .intro-quotes .quote__text { min-height: 0; }
  .intro-welcome__media, .intro-booking__media { width: 100%; }
  .intro-welcome__text, .intro-booking__text { max-width: none; }
  .cta-band__title { max-width: none; }
}
@media (max-width: 767px) {
  .intro-welcome__media { padding-right: 0; max-width: 519px; }
  .intro-welcome__media .photo-note { position: static; width: 100%; }
  .intro-welcome__text .btn, .intro-booking__text .btn { margin-top: 32px; }
  .intro-top .grid-4 { margin-top: 32px; }
  .intro-top .model-card__name { font-size: var(--fs-body); }
  .intro-showreel__media .play-btn { margin: -36px 0 0 -36px; }
}