/* ==========================================================================
   NYU Stern Executive MBA – NYC landing page
   Sits on top of Bootstrap 5.3 (grid + utilities). Everything below is custom.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'NYU Perstare';
  src: url('../fonts/NYUPerstare-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NYU Perstare';
  src: url('../fonts/NYUPerstare-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --violet: #57068c;        /* NYU violet, matches the stylescape */
  --violet-deep: #3d0462;
  --violet-lift: #6f1fa8;
  --black: #000;
  --white: #fff;
  --highlight: #fee800;     /* link hovers only, keep it rare */

  --font: 'NYU Perstare', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 5.5rem;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

.container-xxl {
  max-width: 1400px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Bootstrap's grid stops at gutter size 5, this gives the wide desktop layout a bit more air */
@media (min-width: 1200px) {
  .row.gx-xl-5 { --bs-gutter-x: 4.5rem; }
}
@media (min-width: 992px) {
  .row.gx-lg-5 { --bs-gutter-x: 4rem; }
}

.skip-link {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 2000;
  padding: .6rem 1rem;
  background: var(--white);
  color: var(--violet);
  font-weight: 700;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

/* ---------- Buttons ---------- */
.btn-nyu {
  display: inline-block;
  padding: 1rem 1.75rem;
  background: var(--white);
  color: var(--violet);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.1;
  text-decoration: none;
  border: 2px solid var(--white);
  transition: background-color .25s, color .25s;
}
.btn-nyu:hover,
.btn-nyu:focus-visible {
  background: transparent;
  color: var(--white);
}
.btn-nyu--sm { padding: .7rem 1.2rem; font-size: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  transition: background-color .35s, backdrop-filter .35s;
}
.site-header.is-scrolled {
  background: rgba(0, 0, 0, .78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem var(--gutter);
}
.site-header__logo img {
  height: 3.25rem;
  width: auto;
}
.site-header__cta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.5rem);
  transition: opacity .3s, transform .3s, visibility .3s, background-color .25s, color .25s;
}
.site-header__cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (min-width: 768px) {
  :root { --header-h: 6.5rem; }
  .site-header__logo img { height: 4rem; }
}
@media (max-width: 575.98px) {
  :root { --header-h: 4.5rem; }
  .site-header__logo img { height: 2.5rem; }
}

/* Scroll progress line at the very top */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 1040;
  background: transparent;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- Hero ---------- */
.hero {
  --hero-title-size: clamp(2.6rem, 7.6vw, 7rem);
  --hero-title-gap: clamp(1.5rem, 3.5vw, 3rem);
  position: relative;
  padding: calc(var(--header-h) + clamp(.5rem, 2vw, 1.5rem)) 0 clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(90% 70% at 100% 0%, var(--violet-lift) 0%, rgba(111, 31, 168, 0) 60%),
    var(--violet);
  overflow: hidden;
}

.hero__title {
  margin-bottom: var(--hero-title-gap);
  font-weight: 700;
  font-size: var(--hero-title-size);
  line-height: .98;
  letter-spacing: -.03em;
}

/* Mobile stacks copy, form, photo. From 992px the photo tucks under the copy
   and the form spans both rows down the right-hand side. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
/* On desktop the headline breaks after "Your" so the form can rise alongside the second line */
@media (min-width: 992px) {
  .hero__title { max-width: 6.3em; }
}
@media (min-width: 992px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(3rem, 5vw, 5rem);
  }
  .hero__copy  { grid-column: 1; grid-row: 1; }
  .hero__photo { grid-column: 1; grid-row: 2; }
  /* Lifts the form up alongside the headline. It only rises about halfway, so it sits
     level with the lower part of "Business" and never touches the first line. */
  .hero__form  {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: calc(-.5 * (var(--hero-title-gap) + .98 * var(--hero-title-size)));
  }
}
.hero__copy p + p { margin-top: 1.25rem; }
.hero__copy p {
  max-width: 33rem;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}
.hero__photo {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 36rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.hero__photo img { width: 100%; height: 112%; object-fit: cover; }

.hero__lead {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem) !important;
  line-height: 1.4;
  font-weight: 700;
  max-width: 35rem !important;
  text-wrap: balance;      /* evens out the line lengths so no single word is left on the last line */
}
.hero__copy p:not(.hero__lead),
.feature__text { text-wrap: pretty; }

/* Form card with two photo blocks poking out behind it */
.form-wrap {
  position: relative;
  isolation: isolate;
  margin: 0 0 3rem;
}
.form-wrap__photo {
  position: absolute;
  z-index: -1;
  object-fit: cover;
  display: none;
}
@media (min-width: 992px) {
  .form-wrap { margin: 0 0 5rem 3rem; }
  .form-wrap__photo { display: block; }
  .form-wrap__photo--a {
    width: 54%;
    height: 19rem;
    top: -5.5rem;        /* most of this photo sits behind the form, so it has to rise well above it to be seen */
    right: -2.5rem;
  }
  .form-wrap__photo--b {
    width: 48%;
    height: 24rem;
    bottom: -5rem;
    left: -4.5rem;
  }
}

/* Photo set as a background so its position inside the frame can be nudged.
   Pre-cropped tight on the arch's carving; the top of the frame is the part that shows above the form */
.form-wrap__photo--bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0%;
}

.form-card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--white);
  color: var(--black);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45);
}
.form-card__title {
  margin-bottom: 1.25rem;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--violet);
}

/* ----- Slate form skin -----
   The markup below is injected by Slate at runtime, so these selectors target
   its classes. !important is only used where Slate's own inline styles win. */
.form-card .form_container { font-family: var(--font); font-size: 1rem; }
.form-card .hidden { display: none !important; }            /* Slate toggles this for conditional questions */
.form-card fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-card legend {                                          /* the visible label is .form_label, so hide the duplicate */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.form-card .form_question { margin: 0 0 1rem; clear: none !important; }

/* First and last name share a row on wider screens (children 2 and 3 of page one) */
@media (min-width: 576px) {
  .form-card .form_page_1 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .form-card .form_page_1 > .form_question { grid-column: 1 / -1; }
  .form-card .form_page_1 > .form_question:nth-child(2),
  .form-card .form_page_1 > .form_question:nth-child(3) { grid-column: auto; }
}
.form-card .form_label,
.form-card label { display: block; margin-bottom: .3rem; font-weight: 700; font-size: .9rem; color: var(--black); }
.form-card .form_question[data-required="1"] .form_label::after { color: var(--violet); }
.form-card .form_p .form_label { font-weight: 400; font-size: .95rem; line-height: 1.45; }

.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card select {
  width: 100%;
  max-width: 100%;
  min-height: 3rem;
  padding: .55rem .8rem;
  font: inherit;
  color: var(--black);
  background: #f4f0f8;
  border: 2px solid transparent;
  border-bottom-color: var(--violet);
  border-radius: 0;
  transition: border-color .2s, background-color .2s;
}
.form-card input[type="text"]:focus,
.form-card input[type="email"]:focus,
.form-card select:focus {
  outline: none;
  background: var(--white);
  border-color: var(--violet);
}
.form-card .form_responses select { width: auto; min-width: 5.5rem; margin: 0 .35rem .35rem 0; }
/* Birthdate: month, day and year share one row at every width (month gets the most room) */
.form-card .form_responses:has(select) { display: flex; gap: .5rem; }
.form-card .form_responses:has(select) select { flex: 1 1 0; width: auto; min-width: 0; margin: 0; padding-left: .6rem; padding-right: 1.6rem; }
.form-card .form_responses:has(select) select:first-of-type { flex-grow: 1.6; }   /* month: widest */
.form-card .form_responses:has(select) select:last-of-type { flex-grow: 1.2; }    /* year; day stays shortest */
@media (max-width: 575.98px) {
  .form-card .form_responses:has(select) { gap: .4rem; }
  .form-card .form_responses:has(select) select {   /* tighter so filled-in values aren't clipped */
    padding-left: .3rem;
    padding-right: 0;
    font-size: .9rem;
  }
}
.form-card .form_responses label { display: inline-block; font-weight: 400; margin: 0 0 .35rem; }
.form-card input[type="checkbox"],
.form-card input[type="radio"] { accent-color: var(--violet); margin-right: .5rem; transform: scale(1.15); }

.form-card .form_button_submit,
.form-card button[type="button"],
.form-card button[type="submit"] {
  padding: 1rem 2rem;
  font: inherit;
  font-weight: 700;
  color: var(--white);
  background: var(--violet);
  border: 2px solid var(--violet);
  border-radius: 0;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.form-card .form_button_submit:hover,
.form-card .form_button_submit:focus-visible {
  background: var(--white);
  color: var(--violet);
}
.form-card .error { color: #b00020; font-size: .9rem; }
.form-card a { color: var(--violet); }

/* ---------- Features ---------- */
.feature {
  position: relative;
  padding: clamp(2.75rem, 5vw, 4.5rem) 0 clamp(2rem, 3.5vw, 3rem);
  overflow: hidden;
  --bg: var(--violet);
  background: var(--bg);
}
.feature--black { --bg: var(--black); }

.feature__title {
  margin-bottom: 1rem;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
}
.feature__text {
  max-width: 34rem;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
}

/* Image frames */
.media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--bg, var(--violet));
}
.media--night img  { object-position: 50% 40%; }
.media--closing { aspect-ratio: 16 / 10; }
@media (min-width: 992px) {
  .closing .col-lg-7 { display: flex; align-items: center; }   /* headline centred against the photo */
  .closing .col-lg-5 { display: flex; }
  .media--closing { flex: 1; aspect-ratio: auto; min-height: 14rem; }
  /* Take the photo out of the flow so a tall image can't push the frame taller than the headline */
  .media--closing img { position: absolute; top: 0; left: 0; }
}
.media img {
  width: 100%;
  height: 112%;          /* a little taller than the frame so the parallax has room to move */
  object-fit: cover;
  will-change: transform;
}
/* Row of tall photo strips, like the wall panels in the campaign artwork */
.strips {
  display: flex;
  gap: .75rem;
  aspect-ratio: 5 / 4;
}
.strips__item {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}
.strips__item img { width: 100%; height: 112%; object-fit: cover; }
/* Crop positions picked so faces stay in frame */
.strips__item--a img { object-position: 57% 35%; }
.strips__item--b img { object-position: 50% 50%; }
.strips__item--c img { object-position: 77% 30%; }

/* The large "Make X Your Business" line */
.pull {
  position: relative;
  z-index: 2;
  max-width: 11em;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-left: -.07em;      /* the M has side bearing, this pulls the letter itself flush with the rule below */
  font-size: clamp(2.1rem, 9vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
}
.feature--flip .pull { margin-left: auto; margin-right: 0; text-align: right; }

/* Chunky line that draws itself under each pull line */
.rule {
  display: block;
  height: 8px;
  margin-top: clamp(1rem, 2vw, 1.75rem);
  background: var(--white);
  transform-origin: 0 50%;
}
.feature--flip .rule { transform-origin: 100% 50%; }

/* From tablet up the whole line sits on one row. The 5.2vw size is worked out so the longest
   line ("Make Perspective Your Business") always fits inside the page margins. */
@media (min-width: 768px) {
  .pull {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(2.4rem, 5.2vw, 4.9rem);
  }
}
@media (min-width: 992px) {
  .feature .media { aspect-ratio: 16 / 9; }
}
@media (max-width: 991.98px) {
  .feature .row { --bs-gutter-y: 1.75rem; }
}

/* Words are wrapped in masks by main.js so they can rise into view */
.split__mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 .08em .12em;
  margin: 0 -.08em -.12em;
}
.split__group { white-space: nowrap; }
.split__word { display: inline-block; will-change: transform; }

/* ---------- Secondary CTA ---------- */
.apply {
  background: var(--white);
  color: var(--violet);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.apply__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  color: inherit;
  text-decoration: none;
}
.apply__mark {
  background: linear-gradient(var(--highlight), var(--highlight)) no-repeat 0 92% / 0 .3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .45s var(--ease-out);
}
.apply__link:hover .apply__mark,
.apply__link:focus-visible .apply__mark { background-size: 100% .3em; }
.apply__text {
  max-width: 17em;
  font-size: clamp(1.5rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.03em;
}
.apply__arrow {
  flex: none;
  width: clamp(2rem, 4vw, 3.25rem);
  height: auto;
  transition: transform .4s var(--ease-out);
}
.apply__link:hover .apply__arrow,
.apply__link:focus-visible .apply__arrow { transform: translateX(.75rem); }
.apply__link:focus-visible { outline-color: var(--violet); }

/* ---------- Closing ---------- */
.closing {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--violet);
  overflow: hidden;
}
.closing__title {
  font-size: clamp(1.9rem, 4.4vw, 3.75rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.03em;
}
.closing__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 8px solid var(--white);
  color: var(--white);
  font-size: clamp(1.4rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  transition: color .25s;
}
.closing__cta:hover,
.closing__cta:focus-visible { color: var(--highlight); }
.arrow-up {
  flex: none;
  width: clamp(1.1rem, 2.2vw, 1.75rem);
  height: auto;
  animation: nudge 2.2s ease-in-out infinite;
}
.closing__cta:hover .arrow-up { animation-duration: 1s; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .arrow-up { animation: none; }
}

/* ----- No flash before the animations start -----
   Everything main.js animates in starts out hidden here, so nothing shows for a moment
   before GSAP takes over. The "js-anim" class is added in the <head> and removed again
   if GSAP never loads, so the content can't get stuck hidden. GSAP's own inline styles
   override these as soon as it runs. Skipped for visitors who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim [data-hero-fade],
  .js-anim [data-hero-form],
  .js-anim [data-reveal],
  .js-anim .form-wrap__photo { opacity: 0; visibility: hidden; }

  .js-anim .hero__title,
  .js-anim [data-pull],
  .js-anim .closing__title { visibility: hidden; }     /* main.js reveals these once the words are split */

  .js-anim [data-media] { clip-path: inset(0 0 100% 0); }
  .js-anim .rule { transform: scaleX(0); }               /* the lines under the big headlines start undrawn */
}