/* ==========================================================================

   Layout & components — mobile-first

   ========================================================================== */



/* ---------- Site header ---------- */

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background: rgba(255, 255, 255, 0.92);

  backdrop-filter: saturate(180%) blur(10px);

  -webkit-backdrop-filter: saturate(180%) blur(10px);

  border-bottom: 1px solid var(--border);

}



.site-header__row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding-block: 14px;

}



.site-header__brand {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

}



.site-header__mark {

  width: clamp(150px, 38vw, 305px);

  height: auto;

  flex-shrink: 0;

}



.site-header__title {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 13px;

  line-height: 1.25;

  color: var(--ink);

}



.site-header__logo {

  height: 34px;

  width: auto;

  flex-shrink: 0;

}



.hero__content{ display: flex; gap:30px}



.third-party-form {

    width: 100%;

    overflow: hidden;

/*	    transform: scale(0.9);*/

}



.third-party-form iframe {

    height: 900px;   

    border: none;

    display: block;

    

	        width: 120%;

        zoom: 1.1;

        margin-left: -40px;

    

}



.widget-form {

       width: 47%;

    transform: scale(0.75);

    max-width: 466px;

    height: auto;

    overflow-y: auto;

    overflow-x: hidden;

    border-radius: 8px;

    padding-right: 0px;  

    box-sizing: border-box;

        max-height: 334px;

			    margin-left: -100px;

	margin-top: -42px;

    }







@media (max-width: 1600px) {

    .widget-form { max-height: 390px; }

	.hero__subtitle{ max-width: 400px;}



}



@media (max-width: 992px) {

    .widget-form { max-height: 320px; }

}











/* Mobile trigger button - default hidden */

.mobile-form-trigger {

    display: none;

}





@media (min-width: 992px) {

    .form-modal-overlay {

        display: none !important;

    }

	

}

.form-modal-overlay { display: none; position: fixed; inset: 0; width: 100%; height: 100dvh !important; background: rgba(0, 0, 0, 0.6); z-index: 9999; align-items: flex-start; justify-content: center; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 0; }



.form-modal-overlay.active { display: flex; }



.form-modal-box { position: relative; background: #fff; border-radius: 10px; width: 90%; max-width: 460px; padding: 10px; margin: auto 0; max-height: calc(100dvh - 40px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }



.form-modal-box iframe { display: block; width: 100%; height: 750px; max-height: none; border: 0; }



.form-modal-close { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; min-width: 34px; min-height: 34px; background: #2B1252; color: #fff; border: none; border-radius: 50%; font-size: 20px; line-height: 1; font-family: Arial, sans-serif; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 0; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }



.form-modal-close:hover { background: #f58220; }



.form-modal-close:active { transform: scale(0.92); }







@supports (padding: max(0px)) {

    .form-modal-close { top: max(-14px, env(safe-area-inset-top)); }

}





@media (min-width: 640px) {



	

  .site-header__title { font-size: 15px; }

  .site-header__logo { height: 42px; }

}



/* ---------- Hero (full-bleed background photo) ---------- */

.hero {

  position: relative;

  min-height: clamp(476px, 55vh, 464px);

  background: var(--ink);

}



.hero__bg {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 0;

  overflow: hidden;

}

.hero__bg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 78% 22%;

  transform: scale(1.1);

  transition: transform 1.6s var(--ease-out);

}

.hero:hover .hero__bg img {

  transform: scale(1.07);

}



/* Readability scrim: mirrors the PSD's left-to-right fade baked into the

   photo itself, reinforced here so text stays legible at any crop. */

.hero__bg::after {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: linear-gradient(100deg,

    rgba(255,255,255,0.94) 0%,

    rgba(255,255,255,0.86) 24%,

    rgba(255,255,255,0.42) 46%,

    rgba(255,255,255,0.06) 62%,

    rgba(255,255,255,0) 74%);

}



.hero__content {

  position: relative;

  z-index: 2;

  width: 100%;

 padding-top: clamp(36px, 6vw, 34px);

    padding-bottom: clamp(80px, 15vw, 80px);

}



.hero__copy {

  max-width: 640px;

}





.hero__title {

  font-family: var(--font-display);

  font-weight: 900;

  font-size: clamp(32px, 5.2vw, 44px);

  line-height: 1.02;

  letter-spacing: -0.015em;

  color: #2B1252;

}



.hero__title br{ display: none}



.hero__title .hl {

  color: var(--orange);

}



.hero__subtitle {

  margin-top: 18px;

  font-size: clamp(15px, 1.6vw, 20px);

      color: #808184;

    font-weight: 400;

  max-width: 520px;

  line-height: 1.6;

}



.hero__pills {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 6px;

  margin-top: 18px;

  max-width: 720px;

}



@media (min-width: 640px) {

  .hero__pills {grid-template-columns: repeat(4, minmax(0, 1fr));}

	

}



.hero__pill {

  background: #c9bbd2;

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  border: 1px solid rgba(255, 255, 255, 0.6);

  border-radius: var(--radius-sm);

  padding: 10px 10px 9px;

  box-shadow: var(--shadow-card);

  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);

}

.hero__pill:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-lifted);

}



.hero__pill-bar {

  display: block;

  width: 32px;

  height: 4px;

  border-radius: var(--radius-pill);

  background: var(--orange);

  margin-bottom: 9px;

}



.hero__pill-text {

  font-weight: 700;

  font-size: 13.5px;

  color: #2B1252;

  line-height: 1.32;

}

/* .hero__pill-text br{ display: none;} */



/* ---------- Stats bar — rounded floating card, inset from the edges,

   pinned so its vertical center sits exactly on the seam between the

   hero photo and the purple banner: a true 50/50 split, regardless of

   the card's actual rendered height. ---------- */

.stats-bar {

  position: absolute;

  left: 0;

  right: 0;

      bottom: -64px;

  transform: translateY(50%);

  z-index: 3;

  pointer-events: none;

}



.stats-bar .container {

  pointer-events: none;

}



.stats-bar__card {

  pointer-events: auto;

  background: var(--cream);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-lifted);

  padding: clamp(10px, 3vw, 10px) clamp(18px, 3vw, 40px);

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 22px;

}



@media (min-width: 780px) {

  .stats-bar__card {

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 0;

  }

}



.stats-bar__item {

  position: relative;

  padding-right: 12px;

}



@media (min-width: 780px) {

  .stats-bar__item:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;

    top: 4px;

    bottom: 4px;

    width: 1px;

    background: var(--grey-200);

  }

  .stats-bar__item { padding-inline: 28px; }

  .stats-bar__item:first-child { padding-left: 0; }

}



.stats-bar__value {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: clamp(24px, 3vw, 50px);

  color: #2B1252;

  display: flex;

  align-items: baseline;

  gap: 4px;

	justify-content: center;

	line-height: 1.2;

}



.stats-bar__unit {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: clamp(12px, 1.2vw, 20px);

  text-transform: uppercase;

  color: #2B1252;

}



.stats-bar__label {

  margin-top: 2px;

  font-size: 12px;

  color: var(--grey-600);

  line-height: 1.4;

	text-align: center;

}



/* Bounds how long the deadline banner stays sticky (see the wrapper note

   in index.html) — without this, position:sticky has no boundary and the

   banner stays pinned through the entire rest of the page. */

.deadline-sticky-scope {

  position: relative;

}



/* Reserves space for the fixed banner once it's stuck, so the career

   section never jumps or has content peek out from behind it. Zero height

   (and not rendered) until JS gives it a height on entering .is-stuck. */

.deadline-banner__spacer {

  display: none;

}



@media (max-width: 1520px) {

	/* .hero__copy {

    max-width: 420px; */

}

	

	/* .hero__copy {

  max-width: 410px;

} */

	/* .hero__pill-text{  font-size: 13px;} */



@media (max-width: 1420px) {

.hero__content {    padding-top: clamp(30px, 6vw, 30px);}

	.hero {

    min-height: clamp(410px, 48vh, 780px);

}

	.hero__content {    padding-bottom: clamp(90px, 13vw, 90px);}

	

	

	

}



@media (min-width: 920px) {

  .deadline-banner__spacer {

    display: block;

  }

}



/* ---------- Deadline banner ---------- */

.deadline-banner {

  background-color: var(--purple-deep);

  background-image: url('../img/purple-texture.webp');

  background-size: cover;

  background-position: center;

  color: var(--white);

  padding-top: clamp(90px, 15vw, 90px);

  padding-bottom: clamp(26px, 5vw, 34px);

  position: relative;

  overflow: hidden;

}



.deadline-banner::before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: radial-gradient(600px 360px at 92% 12%, rgba(245, 130, 32, 0.14), transparent 62%);

  pointer-events: none;

}



/* Sticky, half-height "compact" state — desktop only. The sentinel sits just

   above the section; JS toggles .is-stuck once it scrolls past the header.

   .is-stuck switches the banner to position:fixed (fully out of normal

   flow) rather than position:sticky — sticky would tie its visual size to

   the space it reserves for the career section right after it, and

   shrinking padding while stuck would drag that section's start position

   up, letting it peek out from behind the still-pinned banner. Fixed

   positioning avoids that entirely; .deadline-banner__spacer (sized by JS)

   reserves the equivalent space instead. */

.deadline-banner__sentinel {

  display: block;

  height: 0;

}



@media (min-width: 920px) {

  .deadline-banner.is-stuck {

    position: fixed;

    top: var(--header-h, 90px);

    left: 0;

    right: 0;

    /* Fixed/pinned content should sit above normal scrolling content —

       including .stats-bar (z-index: 3), which briefly overlaps this

       spot right as the banner engages, before it scrolls fully past. */

    z-index: 5;

    padding-top: clamp(14px, 1.6vw, 18px);

    padding-bottom: clamp(14px, 1.6vw, 18px);

  }

  .deadline-banner.is-stuck .deadline-banner__note {

    display: none;

  }

  .deadline-banner.is-stuck .deadline-banner__col-heading {

    margin-bottom: 6px;

    font-size: 11px;

  }

  .deadline-banner.is-stuck .deadline-banner__date {

    font-size: 16px;

  }

  .deadline-banner.is-stuck .deadline-banner__date-label {

    margin-top: 2px;

    font-size: 12px;

  }

  .deadline-banner.is-stuck .deadline-banner__dates {

    gap: 14px;

    row-gap: 8px;

  }

  .deadline-banner.is-stuck .deadline-banner__cta {

    gap: 12px;

  }

  .deadline-banner.is-stuck .btn-primary {

    padding: 10px 22px;

    font-size: 14px;

  }

  /* Phone number and email aren't needed once the band is docked — the

     Apply Now button alone is the CTA in the compact state. */

  .deadline-banner.is-stuck .deadline-banner__contact {

    display: none;

  }

}



.deadline-banner__grid {

  position: relative;

  display: flex;

  flex-direction: column;

  gap: 28px;

}



@media (min-width: 900px) {

  .deadline-banner__grid {

    flex-direction: row;

    align-items: stretch;

    gap: 28px;

  }

  .deadline-banner__grid > div:nth-of-type(1) { flex: 1 1 0; }

  .deadline-banner__grid > div:nth-of-type(2) { flex: 0.4 1 0; text-align: center}

  .deadline-banner__grid > .deadline-banner__cta { flex: 0 0 auto; }

}



.deadline-banner__col-heading {

      font-weight: 700;

    font-size: 15px;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    color: #808184;

    margin-bottom: 6px;

}



.deadline-banner__dates {

  display: flex;

  flex-wrap: wrap;

  gap: 22px;

  row-gap: 20px;

}



.deadline-banner__date-item {

  min-width: 44%;

}

@media (max-width: 400px) {

  .deadline-banner__date-item { min-width: 100%; }

/*

	.hero__bg {

  position: relative;

}

*/



.hero__bg::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(

    180deg,

    rgba(255, 255, 255, 0.95) 0%,

    rgba(255, 255, 255, 0.9) 40%,

    rgba(255, 255, 255, 0.4) 70%,

    rgba(255, 255, 255, 0.15) 100%

  );

  pointer-events: none;

  z-index: 1;

}



.hero__bg img {

  position: relative;

  z-index: 0;

}



.hero__content {

  position: relative;

  z-index: 2;

}

	

}



.deadline-banner__date {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: clamp(19px, 2.2vw, 24px);

  color: var(--orange);

}



.deadline-banner__date-label {

  margin-top: 4px;

  font-size: 16px;

  color: rgba(255, 255, 255, 0.88);

}



.deadline-banner__divider {

  display: none;

}

@media (min-width: 900px) {

  .deadline-banner__divider {

    display: block;

    width: 1px;

    background: rgba(255, 255, 255, 0.18);

    align-self: stretch;

    margin-inline: 4px;

  }

}



.deadline-banner__divider--inline {

  display: block;

  width: 1px;

  align-self: stretch;

  background: rgba(255, 255, 255, 0.2);

  margin-block: 2px;

}



.deadline-banner__note {

  margin-top:15px;

  font-size: 14px;

  color: #808184;

  line-height: 1.6;

}

.deadline-banner__note strong {

      color: #808184;

    font-weight: 800;

    display: block;

    margin-bottom: 5px;

}



.deadline-banner__cta {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 16px;

}



@media (min-width: 900px) {

  .deadline-banner__cta { align-items: stretch; }

}

.deadline-banner__cta .btn-primary{ margin-inline:auto;}

.deadline-banner .btn-primary {padding: 8px 15px;}

.btn-wrap{ display: flex; gap:10px}

.btn-primary {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  background: var(--orange);

  color: var(--white);

  font-weight: 700;

  font-size: 15.5px;

  padding: 14px 30px;

  border-radius: 10px;

  box-shadow: var(--shadow-btn);

  overflow: hidden;

  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);

  white-space: nowrap;

	width: max-content;

  max-width: 100%;

}

.btn-border {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  background: #ffffff;

  color: var(--orange);

	border: 1px solid var(--orange);

  font-weight: 700;

  font-size: 15.5px;

  padding: 8px 15px;

  border-radius: 10px;

  box-shadow: var(--shadow-btn);

  overflow: hidden;

  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);

  white-space: nowrap;

	width: max-content;

  max-width: 100%;

}



@media (max-width: 360px) {

  .btn-primary {

    white-space: normal;

    text-align: center;

  }

}

.btn-primary::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 40%;

  height: 100%;

  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.45), transparent);

  transform: translateX(-120%) skewX(-12deg);

}

.btn-primary:hover {

  background: var(--orange-dark);

  transform: translateY(-2px);

  box-shadow: 0 14px 28px rgba(245, 130, 32, 0.36);

}

.btn-primary:hover::after {

  animation: shimmer-sweep 1s ease;

}

.btn-primary:active {

  transform: translateY(0);

}



.deadline-banner__contact {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.deadline-banner__contact-link {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  font-size: 14.5px;

  color: #ffffff;

  transition: color var(--dur-fast);

}

.deadline-banner__contact-link:hover {

  color: var(--orange);

}

.deadline-banner__contact-link svg {

  width: 17px;

  height: 17px;

  flex-shrink: 0;

}



/* ---------- Sticky "Download Brochure" CTA ---------- */

.sticky-cta {

  display: flex;

  align-items: center;

  gap: 10px;

  background: var(--orange);

  color: var(--white);

  font-weight: 700;

  text-decoration: none;

  box-shadow: var(--shadow-btn);

  transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);

}



/* Desktop: fixed vertical tab pinned to the right edge */

.sticky-cta--desktop {

  display: none;

}



@media (min-width: 920px) {

  .sticky-cta--desktop {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    gap: 10px;

    position: fixed;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    z-index: 95;

    padding: 20px 13px;

    border-radius: var(--radius-sm) 0 0 var(--radius-sm);

    writing-mode: vertical-rl;

    text-orientation: mixed;

    font-size: 14.5px;

    letter-spacing: 0.02em;

  }

  .sticky-cta--desktop:hover {

    background: var(--orange-dark);

    transform: translateY(-50%) translateX(-4px);

    box-shadow: 0 14px 28px rgba(245, 130, 32, 0.36);

  }

  .sticky-cta--desktop .sticky-cta__icon {

    writing-mode: horizontal-tb;

    transform: rotate(90deg);

    flex-shrink: 0;

    width: 18px;

    height: 18px;

    display: block;

  }

}



/* Mobile: fixed bar pinned to the bottom, fades in after ~2 sections */

.sticky-cta--mobile {

  position: fixed;

  left: 14px;

  right: 14px;

  bottom: 14px;

  z-index: 95;

  justify-content: center;

  padding: 14px 22px;

  border-radius: var(--radius-md);

  font-size: 15px;

  opacity: 0;

  visibility: hidden;

  transform: translateY(14px);

  pointer-events: none;

  transition: opacity var(--dur-mid) var(--ease-out-soft),

    transform var(--dur-mid) var(--ease-out-soft),

    visibility 0s linear var(--dur-mid);

}

.sticky-cta--mobile .sticky-cta__icon {

  width: 18px;

  height: 18px;

  flex-shrink: 0;

  display: block;

}

.sticky-cta--mobile.is-visible {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

  pointer-events: auto;

  transition: opacity var(--dur-mid) var(--ease-out-soft),

    transform var(--dur-mid) var(--ease-out-soft);

}







@media (max-width: 1600px) {

	

	.hero {

		min-height: clamp(380px, 57vh, 798px);}

	.hero__content{    padding-top: clamp(30px, 6vw, 30px);

    padding-bottom: clamp(15px, 15vw, 15px);}

}



@media (max-width: 1518px) {

.step-card__milestone-copy strong{ font-size: 13px}

}



@media (min-width: 920px) {

  .sticky-cta--mobile { display: none; }

}



/* Keep back-to-top clear of the mobile brochure bar */

@media (max-width: 919px) {

  .back-to-top { bottom: 84px; }

}





/* ---------- Career grid ("Imagine starting your career here") ---------- */

.career-section {

  background: var(--cream);

  padding-block: clamp(56px, 9vw, 75px);

}



.career-section__layout {

  display: grid;

  gap: 40px;

}



@media (min-width: 1080px) {

  .career-section__layout {

    grid-template-columns: 0.85fr 2fr;

    gap: 32px;

  }

}



.career-section__intro {

  position: static;

  align-self: start;

}



@media (min-width: 1080px) {

  .career-section__intro {

    position: sticky;

    top: 90px;

  }

}



.career-section__title {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: clamp(30px, 4.4vw, 48px);

  line-height: 1.14;

  color: var(--ink);

}

.career-section__title .hl {

  color: var(--orange);

}



.career-section__list {

  margin-top: 24px;

  display: flex;

  flex-direction: column;

  gap: 7px;

}



.career-section__list li {

  font-size: clamp(15.5px, 2.2vw, 19.5px);

  color: var(--grey-600);

}

.career-section__list strong {

  color: var(--purple);

  font-weight: 700;

}



.career-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 14px;

}



@media (min-width: 620px) {

  .career-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

}



/* Small phones: lightweight card slider instead of a 2-col grid — a

   scroll-snapping filmstrip with prev/next arrow controls above it. */

.career-grid__wrap {

  position: relative;

}



.career-grid__nav {

  display: none;

}



@media (max-width: 480px) {

  .career-grid__nav {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-bottom: 10px;

  }

  .career-grid__arrow {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: var(--white);

    color: var(--purple);

    border: 1px solid var(--grey-200);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: var(--shadow-card);

    transition: background var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast);

  }

  .career-grid__arrow svg {

    width: 15px;

    height: 15px;

  }

  .career-grid__arrow:active {

    background: var(--purple);

    color: var(--white);

  }

  .career-grid__arrow:disabled {

    opacity: 0.35;

    pointer-events: none;

  }



  .career-grid {

    display: flex;

    gap: 12px;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    scroll-padding-left: var(--gutter);

    padding-bottom: 6px;

    margin-inline: calc(var(--gutter) * -1);

    padding-inline: var(--gutter);

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

  }

  .career-grid::-webkit-scrollbar { display: none; }

  .career-card {

    flex: 0 0 auto;

    width: 62%;

    scroll-snap-align: start;

  }

	

/*	.site-footer__contact{ flex-direction: column;}*/

	.logo-marquee__viewport{ max-width: 98%;    margin-left: 19px !important;}

	

}



.career-card {

  position: relative;

  border-radius: var(--radius-md);

  overflow: hidden;

  aspect-ratio: 1 / 1.02;

  isolation: isolate;

}



.career-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform var(--dur-mid) var(--ease-out);

}



.career-card::after {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: linear-gradient(0deg, rgba(20, 8, 36, 0.78) 0%, rgba(20, 8, 36, 0.12) 52%, rgba(20, 8, 36, 0) 70%);

  z-index: 1;

}



.career-card__label {

  position: absolute;

  left: 14px;

  right: 14px;

  bottom: 14px;

  z-index: 2;

  color: var(--white);

  font-weight: 700;

  font-size: clamp(13px, 1.6vw, 16px);

  line-height: 1.28;

}



.career-card:hover img {

  transform: scale(1.08);

}



/* ---------- Logo marquee ---------- */

.logo-marquee {

	display: flex;

	gap:40px;

	align-items: center;

  background: var(--white);

/*  border-block: 1px solid var(--border);*/

  padding-block: clamp(20px, 3vw, 20px);

  overflow: hidden;

  position: relative;

	    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}



.logo-marquee__caption {

  font-size: 12.5px;

  font-weight: 700;

  letter-spacing: 0.07em;

  text-transform: uppercase;

  color: #808184;

  margin-bottom: 20px;

	max-width: 90%;

    margin: auto;

	margin-left: 100px !important;

}



.logo-marquee__viewport {

  overflow: hidden;

  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);

  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);

	    max-width: 100%;

    margin: auto;

	margin-left: 100px;

}



.logo-marquee__track {

  display: flex;

  align-items: center;

  gap: 0;

  width: max-content;

  animation: marquee-scroll 32s linear infinite;

}



.logo-marquee:hover .logo-marquee__track {

  animation-play-state: paused;

}



.logo-marquee__item {

  display: flex;

  align-items: center;

  height: clamp(36px, 4.6vw, 40px);

  flex-shrink: 0;

	    border-right: 1px solid var(--grey-200);

}



.logo-marquee__item img {

  height: 100%;

  width: auto;

  max-width: none;

  opacity: 0.88;

  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);

	padding-inline:30px;

}



.logo-marquee__item:hover img {

  opacity: 1;

  transform: scale(1.06);

}











/* ---------- Tokens (from brand spec) ---------- */





/* ---------- Curriculum & Pedagogy ---------- */

.curriculum-section {

  background: var(--white);

  padding-top: clamp(56px, 9vw, 60px);

  padding-bottom: 0;

}



.eyebrow {

  font-weight: 800;

  font-size: 13px;

  letter-spacing: 0.06em;

  color: var(--orange);

  margin: 0 0 12px;

}



.curriculum-section__head {

  max-width: 1100px;

}

.curriculum-section__head .section-title {

  font-family: var(--font-display);

  font-weight: 900;

  font-size: clamp(28px, 3.4vw, 44px);

  line-height: 1.15;

  margin: 0 0 8px;

  color: var(--ink);

}

.curriculum-section__head .section-title em {

  font-style: normal;

  color: var(--orange);

}

.section-lede {

  font-size: 17px;

  line-height: 1.6;

  color: var(--grey-600);

  margin: 0;

}



.curriculum-steps {

  margin-top: clamp(30px, 5vw, 30px);

  display: grid;

  grid-template-columns: 1fr;

  gap: 20px;

  align-items: stretch;

}



@media (min-width: 1000px) {

  .curriculum-steps {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 16px;

  }

}









.step-card {

  background: #ffffff;

  border-radius: 4px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  height: 100%;

  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);

	padding-bottom: 0px;

	    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}

.step-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-lifted);

}



.step-card__head {

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 13px 16px 12px;

}



.step-card__number {

  font-family: var(--font-display);

  font-weight: 900;

  font-size: 34px;

  color: var(--orange);

  flex-shrink: 0;

  line-height: 1;

}



.step-card__divider {

  width: 2px;

  align-self: stretch;

  background: var(--orange);

}



.step-card__duration {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 19px;

  color: var(--ink);

  margin: 0;

}



.step-card__where {

  display: flex;

  align-items: center;

  gap: 5px;

  margin: 0px 0 0;

  font-size: 13.5px;

  color: var(--purple);

  font-weight: 700;

}

.step-card__where svg {

  width: 13px;

  height: 13px;

}



.step-card__body {

  padding: 0 16px 0px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}



.step-card__title {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: clamp(20px, 2vw, 21px);

  line-height: 1.28;

  color: var(--ink);

  margin: 0;

}



.step-card.step-card--photo .step-card__title{ font-size: clamp(20px, 2vw, 24px);}



.step-card__title--tight { margin-top: 18px; margin-bottom: 15px; }



.step-card__desc {

  margin: 10px 0 0;

  font-size: 13.5px;

  color: var(--grey-600);

  line-height: 1.6;

}



.step-card__photo {

  margin: 0 0px;

  overflow: hidden;

  aspect-ratio: 28/10;

  background: var(--grey-200);

}

.step-card__photo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

	object-position: top;

}



/* Subhead row: label + trailing rule on the same line */

.step-card__subhead {

  margin: 22px 0 0;

  display: flex;

  align-items: center;

  gap: 12px;

  font-weight: 800;

  font-size: 13px;

  letter-spacing: 0.02em;

  text-transform: uppercase;

  color: var(--ink);

}

/*

.step-card__subhead::after {

  content: "";

  flex: 1;

  height: 1px;

  background: var(--grey-200);

}

*/



.build-wrap{ position: relative}

.step-card__subhead--buildlab {

  margin-top: 0px;

  color: var(--orange);

}



/*

.step-card__learn-list {

  list-style: none;

  margin: 6px 0 0;

  padding: 0;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0 16px;

}

.step-card__learn-list li {

  font-size: 14px;

  color: var(--grey-700);

  padding-block: 11px;

  border-bottom: 1px solid var(--grey-200);

}

.step-card__learn-list li:nth-child(2n){ border-right: 0;}

*/







.step-card__learn-list {

  display: flex;

  margin: 6px 0 0;

}



.step-card__learn-col {

  list-style: none;

  margin: 0;

  padding: 0;

  flex: 1 1 0;

}



.step-card__learn-col:first-child {

  padding-right: 24px;

  border-right: 2px solid var(--grey-200);

}



.step-card__learn-col:last-child {

  padding-left: 24px;

}



.step-card__learn-col li {

  font-size: 12px;

    color: #808184;

    padding-block: 11px;

    border-bottom: 1px solid var(--grey-200);

    height: 42px;

    line-height: 1.3;

    display: flex;

    align-items: center;

}



.step-card__learn-col li:last-child {

  border-bottom: none;

}



@media (max-width: 640px) {

  .step-card__learn-list {

    flex-direction: column;

  }



  .step-card__learn-col:first-child {

    padding-right: 0;

    border-right: none;

  }



  .step-card__learn-col:last-child {

    padding-left: 0;

  }



  .step-card__learn-col:first-child li:last-child {

    border-bottom: 1px solid var(--grey-200);

  }

}



/* Build Lab: same two-column rhythm as the learn list */

.step-card__buildlab-row {

  margin-top: 8px;

  display: grid;

  grid-template-columns: 1fr;

  gap: 0 12px;

	background: #fef3ec;

	padding: 12px 12px

}

.step-card__buildlab-title,

.step-card__buildlab-desc {

  margin: 0;

  font-size: 14px;

  line-height: 1.55;

  padding-block: 0px;

}

.step-card__buildlab-desc{ font-size: 11px;}

.step-card__buildlab-title {

  font-weight: 500;

  color: var(--ink);

}

.step-card__buildlab-desc {

  color: var(--grey-600);

}



.step-card__process {

  margin-top: 8px;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 0px;

  flex-wrap: nowrap;

}



.step-card__process-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  flex: 1 1 0;

  min-width: 0;

}



.step-card__process-icon {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: #f9ebdf;

  color: var(--orange);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.step-card__process-icon svg { width: 20px; height: 20px; }



.step-card__process-text {

  margin: 8px 0 0;

  font-size: 10px;

  color: var(--grey-600);

  line-height: 1.35;

}



.step-card__process-arrow {

  color: var(--grey-200);

  margin-top: 12px;

  flex-shrink: 0;

}

.step-card__process-arrow svg { width: 13px; height: 13px; }

.step-card__process-arrow svg path{ stroke:#54247f}



.step-card__callout {

  margin: 18px 0 0;

  font-size: 14.5px;

  color: var(--grey-700);

  font-weight: 700;

  line-height: 1.5;

}

.step-card__callout--bordered {

  border-top: 1px solid var(--grey-200);

  padding-top: 16px;

}



.step-card__milestone {

  margin-top: auto;

  padding-top: 15px;

}



.step-card__milestone-box {

  display: flex;

  align-items: center;

  gap: 7px;

  background: #c9bbd2;

  padding: 14px 7px;

}



.step-card__milestone-tag {

  font-weight: 800;

  font-size: 11px;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  color: #2B1252;

  flex-shrink: 0;

  white-space: nowrap;

}

.step-card__milestone-dash { font-weight: 400; }



.step-card__milestone-copy {

  flex-grow: 1;

  font-size: 10.5px;

  color: #2B1252;

  line-height: 1.4;

}

.step-card__milestone-copy strong {

  display: block;

  color: #2B1252;

  font-weight: 700;

  font-size: 12px;

  margin-bottom: 2px;

}



.step-card__milestone-arrow {

  flex-shrink: 0;

  border-radius: 50%;

  color: var(--orange);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);

}

.step-card__milestone-arrow svg { width: 18px; height: 18px; }

.step-card:hover .step-card__milestone-arrow {

  background: var(--orange);

  color: var(--white);

  transform: translateX(4px);

}







.step-card__head.second-step {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  position: relative;

  padding-right: 130px; /* image ke liye space */

}



.step-card__head.second-step::after {

  content: "";

position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

       width: 114px;

    height: 74px;

    background-image:url("https://designawebsite.co.in/demo/spjimr-pgpsm-lp/assets/img/real-problem.webp");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-color: #f0eff0;

}





/* Step 3 — full bleed photo variant */

.step-card--photo {

  position: relative;

/*  background: var(--ink);*/

  min-height: 480px;

  justify-content: flex-end;

}

.step-card--photo .step-card__bg {

  position: absolute;

  inset: 0;

  z-index: 0;

}

.step-card--photo .step-card__bg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

	object-position: 28% 100%;

	

}

.step-card--photo .step-card__bg::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(20,8,32,0) 0%, rgba(20,8,32,0) 52%, rgba(15,6,26,0.55) 72%, rgba(12,5,20,0.92) 100%);

}

.step-card--photo .step-card__head,

.step-card--photo .step-card__body {

  position: relative;

  z-index: 1;

}

.step-card--photo .step-card__head {

/*  padding-top: 26px;*/

	    background: #ffffff;

	   

}





/* Head (number / duration / location) keeps the same ink/orange/purple

   palette as the other two cards — only the bottom title+desc turn white,

   sitting on the dark gradient over the image base. */

.step-card--photo .step-card__body {

  margin-top: auto;

  padding-bottom: 36px;

	justify-content: end;

}

.step-card--photo .step-card__title,

.step-card--photo .step-card__desc {

  color: #ffffff;

}

.step-card--photo .step-card__desc {

  color: #ffffff;

}











/* ---------- Metrics strip ---------- */

.metrics-strip {

  margin-top: clamp(40px, 6vw, 52px);

  background: var(--purple);

  padding-block: 20px;

}

.metrics-strip__grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 28px;

}

@media (min-width: 700px) {

  .metrics-strip__grid { grid-template-columns: repeat(4, 1fr); }

}

.metrics-strip__item {

  display: flex;

  align-items: center;

  gap: 14px;

}

.metrics-strip__icon {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.metrics-strip__icon svg { width: 22px; height: 22px; }

.metrics-strip__icon--purple { background: rgba(255,255,255,0.14); color: var(--white); }

.metrics-strip__icon--orange { background: var(--orange); color: var(--white); }

.metrics-strip__value {

  margin: 0;

  font-family: var(--font-display);

  font-weight: 900;

  font-size: 26px;

  color: var(--white);

}

.metrics-strip__label {

  margin: 2px 0 0;

  font-size: 13px;

  color: rgba(255,255,255,0.75);

}



@media (max-width: 1600px) {

	.hero__title{font-size:  clamp(30px, 4.2vw, 48px);}

		.hero__title br{ display: none;}

	/* .hero__subtitle{    font-size: clamp(15px, 1.6vw, 16px);} */

	

}

@media (max-width: 1367px) {

	.logo-marquee__caption{margin-left: 118px !important;}

}

@media (max-width: 1080px) {

	.logo-marquee__caption { margin-left: 52px !important;}

	

	}





/* ---------- Responsive ---------- */

@media (max-width: 999px) {

  .step-card--photo { min-height: 360px; }

}

@media (max-width: 480px) {

  .container { padding-inline: 18px; }

  .step-card__head,

  .step-card__body { padding-left: 20px; padding-right: 20px; }

  .step-card__photo { margin-inline: 20px; }

  .step-card__learn-list,

  .step-card__buildlab-row {

    grid-template-columns: 1fr;

  }

  .step-card__process-text { font-size: 10.5px; }

	.logo-marquee__caption {

        margin-left: 20px !important;

    }



}



/* ---------- Metrics strip ---------- */

.metrics-strip {

  margin-top: clamp(40px, 6vw, 72px);

  background: var(--purple);

  padding-block: 20px;

}

.metrics-strip__grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 28px;

}

@media (min-width: 700px) {

  .metrics-strip__grid { grid-template-columns: repeat(4, 1fr); }

	

}

.metrics-strip__item {

  display: flex;

  align-items: center;

  gap: 14px;

}

.metrics-strip__icon {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.metrics-strip__icon svg { width: 22px; height: 22px; }

.metrics-strip__icon--purple { background: rgba(255,255,255,0.14); color: var(--white); }

.metrics-strip__icon--orange { background: var(--orange); color: var(--white); }

.metrics-strip__value {

  margin: 0;

  font-family: var(--font-display);

  font-weight: 900;

  font-size: 26px;

  color: var(--white);

}

.metrics-strip__label {

  margin: 2px 0 0;

  font-size: 13px;

  color: rgba(255,255,255,0.75);

}



.metrics-strip__item {

  border-left: 1px solid rgba(0, 0, 0, 0.12);

  padding-left: 28px;

}



/* Mobile - 2 columns: pehle column ka left border hatao */

.metrics-strip__item:nth-child(odd) {

  border-left: none;

  padding-left: 0;

}



/* Desktop - 4 columns: sirf pehla item ka border hatao, baaki sab pe divider aaye */

@media (min-width: 700px) {

  .metrics-strip__item {

    border-left: 1px solid rgba(0, 0, 0, 0.12);

    padding-left: 28px;

  }

  .metrics-strip__item:nth-child(odd) {

    border-left: 1px solid rgba(0, 0, 0, 0.12);

    padding-left: 28px;

  }

  .metrics-strip__item:first-child {

    border-left: none;

    padding-left: 0;

  }

}







/* ---------- Responsive ---------- */

@media (max-width: 999px) {

  .step-card--photo { min-height: 360px; }

}

@media (max-width: 480px) {

  .container { padding-inline: 18px; }

  .step-card__head,

  .step-card__body { padding-left: 20px; padding-right: 20px; }

  .step-card__photo { margin-inline: 20px; }

  .step-card__learn-list,

  .step-card__buildlab-row {

    grid-template-columns: 1fr;

  }

  .step-card__process-text { font-size: 10.5px; }

}





/* ---------- Metrics strip ---------- */

.metrics-strip {

  margin-top: clamp(44px, 6vw, 40px);

  background: var(--cream);

     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

}



.metrics-strip__grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 24px;

  padding-block:0;

}



@media (min-width: 760px) {

  .metrics-strip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

}



.metrics-strip__item {

  display: flex;

  align-items: center;

  gap: 14px;

}



.metrics-strip__icon {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  color: var(--white);

}

.metrics-strip__icon svg { width: 24px; height: 24px; }

.metrics-strip__icon--purple { background: var(--purple); }

.metrics-strip__icon--orange { background: var(--orange); }



.metrics-strip__value {

  font-family: var(--font-display);

  font-weight: 900;

  font-size: clamp(20px, 2.4vw, 26px);

  color: var(--orange);

  line-height: 1;

}



.metrics-strip__label {

  margin-top: 4px;

  font-size: 13.5px;

  color: var(--grey-600);

  line-height: 1.3;

}











/* ---------- Startups collage (WISE Tech) ---------- */

.startups-section {

  background: var(--white);

  padding-block: clamp(46px, 9vw, 46px);

	

}



.startups-section__grid {

  display: grid;

  gap: 32px;

  align-items: center;

}



@media (min-width: 960px) {

  .startups-section__grid {

    grid-template-columns: 1.1fr 1.25fr;

    gap: 40px;

  }

}



.startups-section__badge a {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  font-family: var(--font-display);

  font-weight: 900;

  font-size: 22px;

  color: #2B1252;

  margin-bottom: 20px;

}

.p-orange{ color: var(--orange); font-size: 1rem; margin-top: 4px;     font-weight: 600;}



.startups-section__badge img {  max-width: 52px}



.startups-section__figure {

  font-family: var(--font-display);

  font-weight: 900;

  font-size: clamp(44px, 6.5vw, 68px);

  line-height: 1.02;

  color: var(--ink);

}



.startups-section__caption {

  margin-top: 10px;

  font-size: 16px;

  color: var(--grey-700);

  font-weight: 600;

}



.startups-section__punch {

  margin-top: 22px;

  font-family: var(--font-display);

  font-weight: 800;

  font-size: clamp(20px, 2.6vw, 27px);

  color: var(--orange);

  line-height: 1.3;

/*	max-width: 18ch;*/

}



.startups-section__rule {

  margin-top: 14px;

}



.startups-section__art {

  border-radius: var(--radius-lg);

  overflow: hidden;

}

.startups-section__art img {

  width: 100%;

  height: auto;

}



/* ---------- Key FAQs ---------- */

.faq-section {

  background: #ffffff;

	padding-bottom: 0px;

/*		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/

}

.faq-section-wrap{  padding-bottom: 0px}



.faq-section-wraps{  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;    margin: 10px 0;}



.faq-section__head {

         padding-top: clamp(17px, 6vw, 13px);

    padding-bottom: clamp(14px, 4vw, 16px);

	



}



.faq-section__body {

  padding: 0px 0 70px;

	background: #ffffff;

}



.faq-layout {

  display: grid;

  gap: 28px;

  padding-inline: clamp(16px, 5vw, 80px);

}



@media (min-width: 920px) {

  .faq-layout {

    grid-template-columns: 0.8fr 1fr 0.8fr;

    gap: 0;

  }

}



.faq-categories {

  display: flex;

  flex-direction: column;

  gap: 8px;

  padding-right: 24px;

	

}

.faq-categories{padding-top: 30px}



@media (min-width: 920px) {

  .faq-categories { border-right: 1px solid var(--grey-200); }

}



.faq-categories__btn {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 16px 18px;

  border-radius: 2px;

  text-align: left;

  font-weight: 700;

  font-size: 15px;

  color: var(--ink);

  transition: background var(--dur-fast), color var(--dur-fast);

	border-bottom: 2px solid var(--grey-200);

}



.faq-categories__count {

  font-size: 12px;

  font-weight: 700;

  background: var(--grey-100);

  color: var(--grey-600);

  min-width: 24px;

  height: 24px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  transition: background var(--dur-fast), color var(--dur-fast);

}



.faq-categories__btn__meta {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;

}



/* Plus/minus accordion indicator — mobile-only affordance for the category

   headers (desktop keeps the always-one-open tab behaviour and doesn't need

   it, so it's hidden there once JS is active). */

.faq-categories__btn__toggle {

  display: none;

  position: relative;

  width: 13px;

  height: 13px;

  flex-shrink: 0;

}

.faq-categories__btn__toggle::before,

.faq-categories__btn__toggle::after {

  content: "";

  position: absolute;

  background: currentColor;

  border-radius: 1px;

  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);

}

.faq-categories__btn__toggle::before {

  left: 0;

  right: 0;

  top: 50%;

  height: 2px;

  transform: translateY(-50%);

}

.faq-categories__btn__toggle::after {

  top: 0;

  bottom: 0;

  left: 50%;

  width: 2px;

  transform: translateX(-50%);

}

.faq-categories__btn[aria-expanded="true"] .faq-categories__btn__toggle::after {

  transform: translateX(-50%) scaleY(0);

  opacity: 0;

}

@media (max-width: 919px) {

  .js .faq-categories__btn__toggle { display: block; }

}



.faq-categories__btn:hover {

  background: rgba(84, 36, 127, 0.06);

}



.faq-categories__btn[aria-selected="true"] {

  background: var(--purple);

  color: var(--white);

	border: none;

}

.faq-categories__btn[aria-selected="true"] .faq-categories__count {

  background: rgba(255, 255, 255, 0.22);

  color: var(--white);

}



/* Mobile: horizontal scrolling strip of category pills instead of a 2x2

   grid — tapping one snaps it toward the centre so the strip nudges

   forward and the next pill peeks into view (see the click handler in

   main.js). Placed after the unconditional .faq-categories__btn rules

   above so it actually wins the cascade at this breakpoint. No default-open

   category on mobile — see initFaq in main.js. */

@media (max-width: 919px) {

  .faq-section-wrap .faq-section__head { padding-block: 28px 20px; }

  .faq-section-wrap .faq-section__body { padding-top: 22px; padding-bottom: 10px; }

  .faq-layout { gap: 14px; }

  .faq-categories {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: center;

    overflow-x: auto;

    scroll-snap-type: x proximity;

    scroll-padding-inline: var(--gutter);

    gap: 8px;

    padding-top: 0;

    padding-right: 0;

    margin-inline: calc(var(--gutter) * -1);

    padding-inline: var(--gutter);

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

  }

  .faq-categories::-webkit-scrollbar { display: none; }

  .faq-categories__btn {

    flex: 0 0 auto;

    flex-direction: row;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    border-radius: var(--radius-pill);

    border-bottom: none;

    background: var(--grey-100);

    font-size: 13px;

    white-space: nowrap;

    scroll-snap-align: center;

  }

  .faq-categories__btn__meta {

    gap: 6px;

  }

  .faq-categories__btn__toggle {

    display: none;

  }

  .faq-panel + .faq-panel { margin-top: 20px; }

}



.faq-questions {

  padding-block: 4px;

  padding-inline: 0;

	padding-top: 18px;

}



@media (min-width: 920px) {

  .faq-questions {

    padding-left: 24px;

    padding-right: 24px;

    border-right: 1px solid var(--grey-200);

  }

}



/* Placed after the unconditional rule above (and its own min-width

   override) so this actually wins the cascade at this breakpoint —

   .faq-questions's own unconditional padding-top: 30px otherwise beats a

   same-specificity mobile rule declared earlier in the file. */

@media (max-width: 919px) {

  .faq-questions { padding-top: 16px; }

}



.faq-questions__meta {

  font-weight: 700;

  font-size: 12.5px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--grey-600);

	display: none;

}



.faq-questions__count {

  display: block;

  margin-top: 3px;

  font-weight: 600;

  font-size: 13px;

  color: var(--grey-600);

  text-transform: none;

  letter-spacing: normal;

}



.faq-questions__list {

  margin-top: 16px;

  display: flex;

  flex-direction: column;

}



.faq-questions__q {

  margin: 0;

  font: inherit;

}



.faq-questions__btn {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  width: 100%;

  text-align: left;

  padding-block: 14px;

  border-bottom: 1px solid var(--grey-200);

  font-weight: 600;

  font-size: 15px;

  color: var(--grey-700);

  transition: color var(--dur-fast), padding-left var(--dur-fast);

  position: relative;

	 padding-left: 10px;

}

.faq-questions__btn::before {

  content: "";

  position: absolute;

  left: -3px;

  top: 0;

  bottom: 0;

  width: 3px;

  background: var(--orange);

  border-radius: var(--radius-pill);

  transform: scaleY(0);

  transition: transform var(--dur-fast) var(--ease-out);

}

.faq-questions__btn:hover {

  color: var(--purple);

}

.faq-questions__btn[aria-expanded="true"] {

  color: var(--purple);

  padding-left: 10px;

	background: #fef3ec;

}

.faq-questions__btn[aria-expanded="true"]::before {

  transform: scaleY(1);

}



/* Accordion chevron — used on mobile (and the no-JS fallback); hidden on

   desktop once JS is active, since the answer moves into the third column. */

.faq-questions__btn__chevron {

  flex-shrink: 0;

  width: 9px;

  height: 9px;

  border-right: 2px solid currentColor;

  border-bottom: 2px solid currentColor;

  transform: rotate(45deg);

  transition: transform var(--dur-fast) var(--ease-out);

  opacity: 0.55;

}

.faq-questions__btn[aria-expanded="true"] .faq-questions__btn__chevron {

  transform: rotate(-135deg);

}

@media (min-width: 920px) {

  .js .faq-questions__btn__chevron { display: none; }

}



.faq-answer {

  margin-top: 24px;

  padding-top: 0;

	padding-top: 0px;

  display: none;

}



@media (min-width: 920px) {

  .js .faq-answer {

    display: block;

    padding-left: 24px;

    margin-top: 0;

  }

}



.faq-answer__panel {

  animation: answer-in var(--dur-mid) var(--ease-out-soft);

	padding-top: 30px;

}



.faq-answer__title {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: clamp(20px, 2.4vw, 26px);

  line-height: 1.3;

  color: var(--ink);

}



.faq-answer__text {

  margin-top: 16px;

  font-size: 15px;

  line-height: 1.75;

  color: var(--grey-600);

}

.faq-answer__text + .faq-answer__text {

  margin-top: 14px;

}

.faq-answer__text a {

  color: var(--purple);

  font-weight: 600;

  text-decoration: underline;

  text-decoration-color: rgba(84, 36, 127, 0.35);

  text-underline-offset: 2px;

  transition: color var(--dur-fast), text-decoration-color var(--dur-fast);

}

.faq-answer__text a:hover {

  color: var(--orange);

  text-decoration-color: currentColor;

}

.faq-questions__item:last-child .faq-questions__btn{ border-bottom: 0;}



.step-card__body  .step-card__subhead {

  display: flex;

  align-items: center;

  gap: 12px;

  white-space: nowrap;

}



.step-card__body .step-card__subhead::after {

  content: "";

  flex: 1;

  height: 1px;

  background: #b99bf4;

}



/* ---------- FAQ category panels ----------

   The full FAQ content (every category, every question and answer) lives in

   the HTML, so it's readable with JS disabled and crawlable by search

   engines. Once JS is running it hides every panel but the active one and

   drives the accordion below. */

.js .faq-panel { display: none; }

.js .faq-panel.is-active { display: block; }

.faq-panel + .faq-panel { margin-top: 40px; }

@media (min-width: 920px) {

  .js .faq-panel + .faq-panel { margin-top: 0; }

}



/* Per-question accordion answer — used on mobile, and as the no-JS/desktop

   fallback. On desktop, once JS is active, the open answer is mirrored into

   the .faq-answer column instead and this copy is hidden. */

.faq-answer__mobile {

  overflow: hidden;

}

.js .faq-answer__mobile {

  max-height: 0;

  transition: max-height var(--dur-mid) var(--ease-out-soft);

}

.faq-answer__mobile .faq-answer__panel {

  animation: none;

  padding-top: 2px;

  padding-bottom: 20px;

}

.faq-answer__mobile .faq-answer__text {

  font-size: 14.5px;

}

@media (min-width: 920px) {

  .js .faq-answer__mobile { display: none; }

}



/* ---------- Footer ---------- */

.site-footer {

  background: linear-gradient(120deg, var(--purple-deep) 0%, #3a1a58 100%);

  color: rgba(255, 255, 255, 0.82);

  padding-top: clamp(44px, 6vw, 44px);

}



.site-footer__top {

  display: grid;

  gap: 32px;

  padding-bottom: 36px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.14);

}





.social-icons{display:flex;list-style:none;margin:0;padding:0;gap:14px;align-items:center; margin-top: 1rem;}

.social-icons li a{

  display:flex;align-items:center;justify-content:center;

  width:42px;height:42px;border-radius:50%;

  border:1.5px solid rgba(255,255,255,0.35);

  background:transparent;text-decoration:none;

  box-sizing:border-box;

  transition:border-color .35s ease, background-color .35s ease, transform .35s ease, box-shadow .35s ease;

}

.social-icons li a svg{width:18px;height:18px;fill:#fff;transition:transform .45s ease;}

.social-icons li a:hover{

  border-color:#f58220;

  background-color:#f58220;

  transform:translateY(-4px);

  box-shadow:0 8px 18px rgba(245,130,32,0.35);

}

.social-icons li a:hover svg{transform:rotate(360deg);}











@media (min-width: 780px) {

  .site-footer__top {

    grid-template-columns: 1.3fr 1fr;

  }

}



.site-footer__brand-logo {

  height: 38px;

  width: auto;

/*  filter: brightness(0) invert(1);*/

  opacity: 0.95;

}



.site-footer__desc {

  margin-top: 14px;

  font-size: 14px;

  line-height: 1.7;

  max-width: 48ch;

  color: rgba(255, 255, 255, 0.62);

}



.site-footer__heading {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 13px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.5);

  margin-bottom: 16px;

}



.site-footer__links {

  display: flex;

  flex-direction: column;

  gap: 11px;

}

.site-footer__links a {

  font-size: 14.5px;

  transition: color var(--dur-fast);

}

.site-footer__links a:hover {

  color: var(--orange);

}



.site-footer__contact {

  display: flex;

  gap: 20px;

}

.site-footer__contact a {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 14.5px;

  transition: color var(--dur-fast);

}

.site-footer__contact a:hover {

  color: var(--orange);

}

.site-footer__contact svg {

  width: 16px;

  height: 16px;

  flex-shrink: 0;

}



.site-footer__bottom {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding-block: 22px;

  font-size: 13px;

  color: rgba(255, 255, 255, 0.5);

}



.site-footer__bottom a:hover {

  color: var(--orange);

}



/* ---------- Back to top ---------- */

.back-to-top {

  position: fixed;

  right: 18px;

  bottom: 18px;

  width: 46px;

  height: 46px;

  border-radius: 50%;

  background: var(--purple);

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: var(--shadow-lifted);

  z-index: 90;

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  transition: opacity var(--dur-fast), transform var(--dur-fast), background var(--dur-fast);

}

.back-to-top.is-visible {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}

.back-to-top:hover {

  background: var(--orange);

}

.back-to-top svg {

  width: 18px;

  height: 18px;

}





/* ==========================================================================

   Responsive polish pass — extra-small phones & cross-section fixes

   Additive only: scoped to max-width queries so desktop is untouched.

   ========================================================================== */



/* Tablet: tighten section rhythm a touch */

@media (max-width: 1023px) {

  .career-section__layout { gap: 32px; }

}





/* Below 991px - inline form hide karo, trigger button dikhao */

@media (max-width: 991px) {

	

	   .third-party-form { overflow: scroll; margin-left: -40px; }



.third-party-form iframe { zoom: 0; margin-left: 0; touch-action: pan-y; -webkit-overflow-scrolling: touch; }



.form-modal-overlay { height: 108dvh !important; max-height: 108dvh; overflow-y: auto; align-items: flex-start; bottom: 0; top: 0; }



.form-modal-box { max-height: none; height: auto; margin: 40px 0 20px; overflow: visible; position: relative; max-width: 90%; padding: 5px; }



.form-modal-box iframe { display: block; width: 100%; height: 750px; min-height: 750px; border: 0; }



.form-modal-close { top: -11px !important; right: -8px; width: 24px; height: 24px; min-width: 24px; min-height: 24px; font-size: 18px; }



.widget-form { width: 100%; transform: scale(0.94); max-width: 100%; margin-left: 0; margin-top: 0; }



.form-modal-box .widget-form { display: block; max-height: 80vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }



.form-modal-box .third-party-form { width: 133%;

        margin-left: -50px; }



.stats-bar { bottom: -75px; }



.deadline-banner { padding-top: clamp(102px, 15vw, 90px); }



.hero__content .widget-form { display: none; }



.mobile-form-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--orange); color: var(--white); font-weight: 700; font-size: 15.5px; padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow-btn); overflow: hidden; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast); white-space: nowrap; width: max-content; max-width: 100%; margin-top: 15px; }



.mobile-form-trigger:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(245, 130, 32, 0.36); }

}



/* Small tablets / large phones */

@media (max-width: 767px) {

  .site-header__row { padding-block: 10px; }

  .hero__content { padding-top: clamp(24px, 6vw, 40px); }

  .hero__copy { max-width: 100%; }

  .stats-bar__card { padding: 10px; }

  .deadline-banner__grid { gap: 26px; }

  .startups-section__figure { font-size: clamp(36px, 9vw, 48px); }

  .step-card--photo { min-height: 430px; }

	.step-card--photo .step-card__bg img {

    object-position: 100% 17%;

}

	.stats-bar__card{ gap: 14px 6px}

	.stats-bar__card{ border-radius: 15px;}

		.startups-section {

    padding-block: clamp(48px, 4vw, 42px);

}

	

	    .career-section__layout {

        gap: 0px;

    }

}



/* Phones */

@media (max-width: 599px) {

  .hero { min-height: clamp(480px, 60vh, 720px); }

  .hero__pills { gap: 8px; }

  .hero__pill { padding: 14px 9px; }

  .career-grid { gap: 10px; }

  .metrics-strip__grid { gap: 18px; }

  .metrics-strip__item { padding-left: 16px; }

  .faq-questions__btn { font-size: 14px; }

  .site-footer__top { gap: 28px; }

	.deadline-banner__col-heading { margin-bottom: 6px}

	.startups-section__punch{ width: 100%}

	.step-card__head.second-step::after {

    width: 90px;

    height: 100%;

   

}

	.step-card__head.second-step { padding-right: 108px;}

	.logo-marquee__viewport{ max-width: 100%;}

	.step-card__where{ font-size: 12.5px;}

	.step-card__title{    font-size: clamp(17px, 2vw, 21px);}

	 .step-card__milestone-box {

    display: flex;

    flex-direction: column;

    align-items: baseline;}

	.stats-bar__label br{ display: none;     }

	.stats-bar__label{font-size: 11px;}

    .deadline-banner__dates {

        display: grid;

		  grid-template-columns: 1fr 34px 1fr;

	}

	.deadline-banner__date-label{ font-size: 14px;}

	.deadline-banner__note {

		margin-top: 20px;}

	.step-card__milestone-box .step-card__milestone-arrow {

    margin-left: auto;

		        margin-right: 11px;

}

	.step-card .step-card__milestone-arrow {

    background: var(--orange);

    color: var(--white);

    transform: translateX(4px);

}

	

}





/* Responsive breakpoints */

@media (max-width: 768px) {

    .hero__content {

        flex-direction: column;

    }



    .widget-form {

        max-width: 100%;

        max-height: 70vh;

    }



    .third-party-form iframe {

        height: 900px;

    }

}



@media (max-width: 480px) {

    .widget-form {

        max-height: 60vh;

    }



    .third-party-form iframe {

        height: 800px;

    }

}





/* Extra-small phones */

@media (max-width: 380px) {

  .site-header__mark { width: clamp(120px, 42vw, 150px); }

  .hero__pills { grid-template-columns: 1fr 1fr; }

  .stats-bar__card { grid-template-columns: 1fr 1fr; }

  .career-grid { grid-template-columns: 1fr 1fr; }

  .metrics-strip__grid { grid-template-columns: 1fr; }

  .metrics-strip__item { border-left: none !important; padding-left: 0 !important; }

  .step-card__buildlab-row { grid-template-columns: 1fr; }

  .step-card__buildlab-row > *:nth-child(2) { display: none; }

  .step-card--photo { min-height: 280px; }

  .deadline-banner__dates { gap: 4px; }

}



/* Landscape phones: hero shouldn't eat the whole viewport */

@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {

  .hero { min-height: auto; padding-block: 40px; }

}