/* =====================================================================
   CU ONLINE MBA – LANDING PAGE STYLES
   ---------------------------------------------------------------------
   Sections follow the order of the page:

    1.  Colours, sizes and fonts (edit here first)
    2.  Base styles
    3.  Buttons
    4.  Top offer bar
    5.  Header
    6.  Hero (banner) + enquiry form
    7.  Intro – "Take Your Career Further"
    8.  Why CU Online MBA Stands Out
    9.  Specializations
    10. Program Insights
    11. Alumni logos (scrolling)
    12. Eligibility + fees
    13. Admission process (steps)
    14. Mentors
    15. Student stories
    16. FAQs
    17. About Chandigarh University
    18. Closing call to action
    19. Footer
    20. Popup form
    21. Mobile sticky footer button
    22. Animations
    23. Tablet and mobile layouts
    24. Figma capture mode (open the page with ?figma)
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. COLOURS, SIZES AND FONTS
   Change a value here and it updates everywhere on the page.
   --------------------------------------------------------------------- */
:root {
  /* Brand colours */
  --red: #d61f26;          /* buttons, highlights */
  --red-dark: #b3171d;     /* button hover */
  --red-light: #fdeced;    /* soft red backgrounds */
  --brick: #3a1215;        /* dark sections (hero, "Why CU", closing) */

  /* Text and backgrounds */
  --ink: #1d1d21;          /* headings */
  --text: #4d4d55;         /* body text */
  --muted: #7a7a82;        /* small print */
  --line: #e3e3e6;         /* borders and dividers */
  --mist: #f4f4f3;         /* light grey section backgrounds */
  --white: #ffffff;
  --green: #1f7a45;        /* "You save" and success messages */

  /* Shapes */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  /* Layout */
  --wrap: 1280px;          /* maximum content width */
  --section-space: 80px;   /* space above and below each section */

  /* Font (loaded from Google Fonts in index.html) */
  --font: Poppins, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}


/* ---------------------------------------------------------------------
   2. BASE STYLES
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  background: var(--white);
  scroll-behavior: smooth;
  scroll-padding-top: calc(80px + env(safe-area-inset-top, 0px));
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

/* Centred content column used by every section */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* Standard vertical spacing for a section */
.section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* Two sections in a row with the same background: no double gap */
.section.tight-top,
.about.tight-top {
  padding-top: 0;
}

/* Dots under swipeable rows (added by app.js, only when the row scrolls) */
.swipe-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.swipe-dots:empty {
  display: none;
}

.swipe-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #cfcfd4;
  cursor: pointer;
  transition: width 0.25s, background 0.25s;
}

.swipe-dots button.on {
  width: 22px;
  background: var(--red);
}

.learn .swipe-dots button {
  background: rgba(255, 255, 255, 0.3);
}

.learn .swipe-dots button.on {
  background: var(--red);
}

/* "Read more" buttons only show on phones */
.more-btn {
  display: none;
}

/* Heading on the left, short paragraph on the right */
.split-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
}

.split-head h2 {
  max-width: 26ch;
}

.split-head p {
  max-width: 36ch;
  font-size: 17px;
}

.lead {
  max-width: 46ch;
  margin-top: 14px;
  font-size: 17px;
}

.fine {
  font-size: 13px;
  color: var(--muted);
}

/* Centred row of buttons under a section */
.center-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

/* Small pulsing red dot (used in the popup) */
.pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3b42;
  animation: pulse 1.8s infinite;
}


/* ---------------------------------------------------------------------
   3. BUTTONS
   .btn-red = main action, .btn-outline = secondary,
   .btn-white / .btn-ghost = on dark backgrounds
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 600 15px/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-red {
  background: var(--red);
  color: var(--white);
}

.btn-red:hover {
  background: var(--red-dark);
}

.btn-outline {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--white);
}

.btn-white {
  background: var(--white);
  color: var(--red);
}

.btn-white:hover {
  background: #ffe9ea;
}

.btn-ghost {
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
  color: var(--white);
}

.btn-ghost:hover {
  background: var(--white);
  color: var(--red);
}

.btn-sm {
  height: 42px;
  padding: 0 22px;
  font-size: 14px;
}

.btn-block {
  width: 100%;
}


/* ---------------------------------------------------------------------
   4. TOP OFFER BAR (scholarship + countdown)
   --------------------------------------------------------------------- */
.offer-bar {
  background: var(--ink);
  color: #e9e9ec;
  font-size: 13.5px;
}

.offer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 42px;
}

.offer-inner p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.offer-sep {
  width: 1px;
  height: 14px;
  background: #55555c;
}

.offer-timer b {
  display: inline-block;
  min-width: 26px;
  margin: 0 1px;
  padding: 1px 4px;
  border-radius: 5px;
  background: var(--red);
  color: var(--white);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.offer-inner a {
  color: var(--white);
  font-weight: 600;
  text-underline-offset: 3px;
}


/* ---------------------------------------------------------------------
   5. HEADER
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}

.site-header nav {
  display: flex;
  gap: 32px;
}

.site-header nav a {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
}

.site-header nav a:hover {
  color: var(--red);
}


/* ---------------------------------------------------------------------
   6. HERO (banner) + ENQUIRY FORM
   Three columns on desktop: text | person photo | form
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--brick);
  color: var(--white);
}

/* Campus photo behind everything */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Dark overlay so the white text stays readable */
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(30, 8, 10, 0.94) 0%, rgba(40, 10, 12, 0.86) 32%, rgba(40, 10, 12, 0.45) 58%, rgba(30, 8, 10, 0.3) 100%),
    linear-gradient(0deg, rgba(20, 6, 8, 0.55) 0%, rgba(20, 6, 8, 0) 40%);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr) 400px;
  align-items: center;
  gap: 16px;
  min-height: 620px;
}

.hero-copy {
  padding: 64px 0;
  animation: rise 0.7s ease-out both;
}

.hero h1 {
  color: var(--white);
  font-size: clamp(32px, 3.3vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* Red second line of the headline */
.hero h1 span {
  display: block;
  margin-top: 6px;
  color: #ff3b42;
  font-size: 0.78em;
}

.hero-lede {
  max-width: 40ch;
  margin-top: 18px;
  color: #eadede;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}

.hero-ticks {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.hero-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.4;
}

/* Red tick circle before each hero bullet */
.hero-ticks li::before {
  content: "";
  flex: 0 0 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* Person photo (swap assets/hero-person.webp) */
.hero-person {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: end;
  height: 100%;
}

.hero-person img {
  width: 100%;
  max-width: 380px;
  height: auto;
  max-height: 580px;
  object-fit: contain;
  object-position: bottom;
  animation: rise 0.8s 0.1s ease-out both;
}

/* "#1 Private University" badge */
.rank-chip {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.rank-chip strong {
  color: var(--red);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.rank-chip span {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.rank-chip small {
  display: block;
  color: #6c6c74;
  font-size: 11.5px;
  font-weight: 400;
}

/* ----- Enquiry form card (the popup re-uses these styles) ----- */
.form-card {
  padding: 30px 28px 24px;
  border-top: 4px solid var(--red);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: rise 0.7s 0.2s ease-out both;
}

.form-card h2,
.popup-form h2 {
  font-size: 26px;
}

.form-sub {
  margin-top: 6px;
  font-size: 14px;
}

/* Two fields per row */
.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.field[hidden] {
  display: none;
}

.field-error {
  color: #b91c1c;
  font-size: 12px;
}

.field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* Small label above each field */
.lbl {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

/* Text boxes, dropdown, phone and OTP boxes share one look */
.field input,
.field select,
.phone,
.otp {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid #d6d6db;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font: 400 14px var(--font);
}

.fields .field-full {
  grid-column: 1 / -1;
}

.field select {
  appearance: none;
  padding-right: 36px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231d1d21' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center / 12px no-repeat;
}

.field input:focus,
.field select:focus,
.phone:focus-within,
.otp:focus-within {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(214, 31, 38, 0.14);
}

/* Field turns red when it needs fixing */
.field.invalid input,
.field.invalid select,
.field.invalid .phone,
.field.invalid .otp {
  border-color: var(--red);
}

/* +91 phone box and OTP box: an inner input plus a prefix or button */
.phone,
.otp {
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

.phone em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 8px 0 10px;
  border-right: 1px solid #e0e0e4;
  color: #6c6c74;
  font-size: 13px;
  font-style: normal;
}

.phone-flag {
  flex-shrink: 0;
  border: 1px solid #e0e0e4;
}

.field .phone input,
.field .otp input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.field .otp input {
  letter-spacing: 0.08em;
}

.field .otp input:disabled {
  cursor: not-allowed;
}

.otp-btn {
  flex: 0 0 auto;
  height: 30px;
  margin-right: 5px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--red-light);
  color: var(--red);
  font: 600 12.5px var(--font);
  white-space: nowrap;
  cursor: pointer;
}

.otp-btn:hover {
  background: #fbdcde;
}

.otp-btn:disabled {
  background: var(--mist);
  color: #8c8c94;
  cursor: default;
}

.otp-note {
  margin-top: 10px;
  color: var(--green);
  font-size: 12.5px;
}

.otp-note.err {
  color: #8a1a1f;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0;
  font-size: 12px;
  line-height: 1.5;
}

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

.form-status {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: #fff3f3;
  color: #8a1a1f;
  font-size: 13px;
}


/* ---------------------------------------------------------------------
   7. INTRO – "Take Your Career Further with CU Online MBA"
   --------------------------------------------------------------------- */
.who-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 72px;
}

.who-photo {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.who-photo img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: top;
}

.intro-copy p {
  max-width: 60ch;
  margin-top: 18px;
  font-size: 16.5px;
}

.intro-copy .btn {
  margin-top: 30px;
}


/* ---------------------------------------------------------------------
   8. WHY CU ONLINE MBA STANDS OUT (dark section)
   --------------------------------------------------------------------- */
.learn {
  background: var(--brick);
  color: #e8d8d9;
}

.learn h2 {
  color: var(--white);
}

/* Six highlights in a row */
.stand-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 44px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.stand-grid div {
  padding: 26px 18px 26px 0;
}

.stand-grid div + div {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.stand-grid strong {
  display: block;
  color: var(--white);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}

.stand-grid span {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
}

/* Five numbers (80, 40+, 80+ ...) */
.learn-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 64px 0 0;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
}

.learn-stats div {
  padding: 24px 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.learn-stats div:first-child {
  border-left: 0;
}

.learn-stats dt {
  color: var(--white);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
}

.learn-stats dd {
  margin: 4px 0 0;
  font-size: 13.5px;
}


/* ---------------------------------------------------------------------
   9. SPECIALIZATIONS (filter tabs + tiles)
   --------------------------------------------------------------------- */
.specs {
  background: var(--white);
}

.spec-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}

.spec-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: 600 14px var(--font);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.spec-tabs button:hover {
  border-color: var(--ink);
}

/* Count bubble inside each tab */
.spec-tabs button span {
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

/* Selected tab */
.spec-tabs button.on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.spec-tabs button.on span {
  background: var(--red);
  color: var(--white);
}

.spec-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.spec-tiles li[hidden] {
  display: none;
}

.spec-tiles li.enter {
  animation: rise 0.35s ease-out both;
}

.spec-tiles a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.spec-tiles a:hover {
  border-color: var(--red);
  box-shadow: 0 10px 24px rgba(58, 18, 21, 0.1);
  transform: translateY(-2px);
}

.spec-tiles b {
  display: block;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}

.spec-tiles small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

/* Coloured icon square – one colour per group */
.ic {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  height: 44px;
  border-radius: 12px;
}

.ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ic-business   { background: var(--red-light); color: var(--red); }
.ic-finance    { background: #fff4e0; color: #b86a00; }
.ic-technology { background: #e8f0fe; color: #2459c7; }
.ic-industry   { background: #e7f5ec; color: var(--green); }


/* ---------------------------------------------------------------------
   10. PROGRAM INSIGHTS
   --------------------------------------------------------------------- */
.insights {
  padding-top: 0;
  background: var(--white);
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.insight-grid article {
  padding: 26px;
  border-top: 3px solid var(--red);
  border-radius: var(--radius-lg);
  background: var(--mist);
}

.insight-grid p {
  margin-top: 8px;
  font-size: 15px;
}

.insight-note {
  margin-top: 28px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
}


/* ---------------------------------------------------------------------
   11. ALUMNI LOGOS (two scrolling rows)
   Speed: change the seconds in the two "animation" lines below.
   --------------------------------------------------------------------- */
.alumni {
  padding-bottom: 72px;
  overflow: hidden;
  text-align: center;
}

.alumni-sub {
  max-width: 56ch;
  margin: 12px auto 0;
  font-size: 16px;
}

/* Fades the logos out at the left and right edges */
.marquee {
  margin-top: 36px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee + .marquee {
  margin-top: 16px;
}

.marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquee 48s linear infinite;
}

/* Second row moves the other way */
.marquee.reverse .marquee-track {
  animation-duration: 54s;
  animation-direction: reverse;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 170px;
  height: 84px;
  padding: 14px 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}

.marquee img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
}

.alumni .fine {
  margin-top: 28px;
}


/* ---------------------------------------------------------------------
   12. ELIGIBILITY + FEES
   --------------------------------------------------------------------- */
.fees {
  background: var(--mist);
}

.fees-grid {
  display: grid;
  grid-template-columns: 1fr 460px;
  align-items: center;
  gap: 80px;
}

.elig {
  margin-top: 32px;
  padding: 22px 24px;
  border-left: 4px solid var(--red);
  border-radius: var(--radius-md);
  background: var(--white);
}

.elig p {
  margin-top: 6px;
  font-size: 15px;
}

.fee-points {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.fee-points li {
  display: grid;
  grid-template-columns: 150px 1fr;
  font-size: 15px;
}

.fee-points b {
  color: var(--ink);
  font-weight: 600;
}

.fee-points + .btn {
  margin-top: 32px;
}

.fee-card {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 20px 50px rgba(58, 18, 21, 0.12);
}

.fee-flag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--red-light);
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
}

/* Per semester / Per year / Full programme switch */
.fee-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 20px;
  padding: 4px;
  border-radius: 999px;
  background: var(--mist);
}

.fee-switch button {
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 500 13.5px var(--font);
  cursor: pointer;
}

.fee-switch button.on {
  background: var(--ink);
  color: var(--white);
}

.fee-old {
  margin-top: 26px;
  color: #8c8c94;
  font-size: 18px;
  text-decoration: line-through;
}

.fee-now {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.fee-now span {
  color: var(--ink);
  font-size: 52px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.fee-now small {
  font-size: 15px;
}

.fee-save {
  margin: 6px 0 24px;
  color: var(--green);
  font-size: 15px;
  font-weight: 600;
}

.fee-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
}


/* ---------------------------------------------------------------------
   13. ADMISSION PROCESS (clickable steps)
   --------------------------------------------------------------------- */
.admit {
  background: var(--mist);
}

.admit-box {
  margin-top: 44px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 20px 50px rgba(58, 18, 21, 0.08);
}

.admit-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 30px 32px 22px;
  border-bottom: 1px solid var(--line);
}

/* Grey line behind the step numbers, with a red fill for progress */
.admit-rail {
  position: absolute;
  top: 50px;
  left: calc(32px + 12.5% - 8px);
  right: calc(32px + 12.5% - 8px);
  height: 3px;
  border-radius: 3px;
  background: var(--line);
}

.admit-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--red);
  transition: width 0.45s ease;
}

.admit-tabs button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font: 600 14.5px var(--font);
  cursor: pointer;
}

/* Step number circle */
.admit-tabs button b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--muted);
  font-size: 16px;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}

/* Steps already passed */
.admit-tabs button.done b {
  border-color: var(--red);
  background: var(--red-light);
  color: var(--red);
}

/* Current step */
.admit-tabs button.on {
  color: var(--ink);
}

.admit-tabs button.on b {
  border-color: var(--red);
  background: var(--red);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(214, 31, 38, 0.3);
  transform: scale(1.1);
}

.admit-panel {
  max-width: 760px;
  padding: 34px 40px 38px;
}

.admit-panel:not([hidden]) {
  animation: rise 0.35s ease-out;
}

.admit-step {
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
}

.admit-panel h3 {
  margin-top: 6px;
  font-size: 24px;
}

.admit-panel > p:not(.admit-step) {
  max-width: 60ch;
  margin-top: 12px;
  font-size: 16px;
}

.admit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.admit-chips li {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
}

.admit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 26px;
}

.admit-next {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 15px var(--font);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.admit-next:hover {
  color: var(--red);
}


/* ---------------------------------------------------------------------
   14. MENTORS
   --------------------------------------------------------------------- */
.mentors {
  background: var(--white);
}

.mentor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.mentor-grid figure {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.mentor-grid figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  line-height: 1.4;
}

.mentor-grid figcaption img {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}

.mentor-grid figcaption b {
  display: block;
  color: var(--ink);
  font-size: 15.5px;
}

.mentor-grid blockquote {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}


/* ---------------------------------------------------------------------
   15. STUDENT STORIES
   --------------------------------------------------------------------- */
.stories {
  padding-top: 24px;
  background: var(--white);
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.story {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  margin: 0;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--mist);
}

.story blockquote {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.story figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}

.story figcaption img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.story figcaption b {
  display: block;
  color: var(--ink);
  font-size: 15px;
}


/* ---------------------------------------------------------------------
   16. FAQs
   --------------------------------------------------------------------- */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: start;
  gap: 80px;
}

.faq-grid .btn {
  margin-top: 28px;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

/* + and – signs */
.faq-list summary::after {
  content: "+";
  color: var(--red);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.faq-list details[open] summary::after {
  content: "–";
}

.faq-list details p {
  padding: 0 40px 22px 0;
  font-size: 15.5px;
}


/* ---------------------------------------------------------------------
   17. ABOUT CHANDIGARH UNIVERSITY
   --------------------------------------------------------------------- */
.about {
  padding: 56px 0;
}

.about h2 {
  font-size: 22px;
}

.about p {
  max-width: 80ch;
  margin-top: 10px;
  font-size: 15px;
}


/* ---------------------------------------------------------------------
   18. CLOSING CALL TO ACTION ("Shape Your Tomorrow")
   --------------------------------------------------------------------- */
.closing {
  position: relative;
  overflow: hidden;
  background: var(--brick);
}

.closing > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

.closing-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(30, 8, 10, 0.93) 0%, rgba(40, 10, 12, 0.8) 55%, rgba(40, 10, 12, 0.55) 100%);
}

.closing-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding-top: 88px;
  padding-bottom: 88px;
}

.closing h2 {
  max-width: 24ch;
  color: var(--white);
  font-size: clamp(30px, 3.6vw, 46px);
}

.closing p {
  max-width: 48ch;
  margin-top: 12px;
  color: #eadede;
  font-size: 17px;
}

.closing-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* ---------------------------------------------------------------------
   19. FOOTER
   --------------------------------------------------------------------- */
.site-footer {
  padding: 48px 0 32px;
  background: var(--mist);
  font-size: 13px;
}

.site-footer p {
  max-width: 90ch;
  margin-top: 18px;
}

/* SEO keyword block */
.site-footer .keywords {
  max-width: none;
  color: #8a8a92;
  font-size: 11.5px;
  line-height: 1.7;
}

.disclaimer {
  font-style: italic;
}

.footer-base {
  display: flex;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}


/* ---------------------------------------------------------------------
   20. POPUP FORM
   The form inside is copied from the hero form by app.js.
   --------------------------------------------------------------------- */
.popup[hidden] {
  display: none;
}

.popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Dark background behind the popup */
.popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 8, 10, 0.72);
  animation: fade 0.2s ease-out;
}

/* Left: campus panel, right: form */
.popup-box {
  position: relative;
  display: grid;
  grid-template-columns: 340px 440px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  animation: pop 0.25s ease-out;
}

.popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--mist);
  color: var(--ink);
  cursor: pointer;
}

.popup-close:hover {
  background: var(--line);
}

.popup-side {
  position: relative;
  overflow: hidden;
  background: var(--brick);
  color: var(--white);
}

.popup-side > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
}

.popup-side-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 8, 10, 0.55) 0%, rgba(30, 8, 10, 0.92) 70%);
}

.popup-side-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 32px 28px;
}

.popup-alert {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 90, 96, 0.55);
  border-radius: 999px;
  background: rgba(214, 31, 38, 0.25);
  font-size: 13px;
  font-weight: 600;
}

.popup-pitch {
  margin-top: 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.popup-side ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.popup-side li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #f0e4e4;
  font-size: 14px;
  line-height: 1.4;
}

.popup-side li::before {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.popup-form {
  padding: 36px 32px 28px;
}

.popup-form h2 {
  padding-right: 36px;
}

/* Stops the page scrolling while the popup is open */
body.no-scroll {
  overflow: hidden;
}


/* ---------------------------------------------------------------------
   21. MOBILE STICKY FOOTER BUTTON (hidden on desktop)
   --------------------------------------------------------------------- */
.mobile-bar {
  display: none;
}


/* ---------------------------------------------------------------------
   22. ANIMATIONS
   --------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
}

@keyframes pop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 66, 0.7); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 59, 66, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 66, 0); }
}

@keyframes marquee {
  to { transform: translateX(calc(-50% - 8px)); }
}

/* Respect visitors who turn off motion on their device */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }

  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee-track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }

  .marquee li[aria-hidden] {
    display: none;
  }
}


/* ---------------------------------------------------------------------
   23. TABLET AND MOBILE LAYOUTS
   --------------------------------------------------------------------- */

/* ----- Small laptops and large tablets (up to 1180px) ----- */
@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
  }

  .hero-person {
    display: none;
  }

  .stand-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stand-grid div:nth-child(4) {
    padding-left: 0;
    border-left: 0;
  }

  .stand-grid div:nth-child(n + 4) {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .spec-tiles {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .fees-grid {
    grid-template-columns: 1fr 420px;
    gap: 48px;
  }
}

/* ----- Tablets (up to 900px) ----- */
@media (max-width: 900px) {
  :root {
    --section-space: 72px;
  }

  /* Header: logo only (the Enquire button moves to the sticky footer) */
  .site-header nav,
  .site-header .btn {
    display: none;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-bottom: 40px;
  }

  .hero-copy {
    padding: 48px 0 8px;
  }

  .hero-shade {
    background: linear-gradient(180deg, rgba(30, 8, 10, 0.82) 0%, rgba(30, 8, 10, 0.92) 100%);
  }

  .split-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .who-grid,
  .fees-grid,
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .who-photo {
    aspect-ratio: 16 / 10;
  }

  .learn-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .learn-stats div:nth-child(4) {
    border-left: 0;
  }

  .spec-tiles {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Mentors and stories become swipeable cards */
  .mentor-grid,
  .story-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    margin-right: -24px;
    margin-left: -24px;
    padding: 0 24px 4px;
    overflow-x: auto;
    scroll-padding: 0 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .mentor-grid::-webkit-scrollbar,
  .story-grid::-webkit-scrollbar {
    display: none;
  }

  .mentor-grid > *,
  .story-grid > * {
    scroll-snap-align: start;
  }

  /* Sticky footer with the Enquire now button */
  .mobile-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--white);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
  }

  .mobile-bar .btn {
    width: 100%;
    max-width: 360px;
    height: 48px;
  }

  .mobile-bar {
    transition: transform 0.25s ease;
  }

  /* Hidden while the hero form is on screen, so it never covers the form */
  .mobile-bar.away {
    transform: translateY(110%);
  }

  /* Leaves room so the sticky footer never covers page content */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* ----- Popup switches to form-only (up to 820px) ----- */
@media (max-width: 820px) {
  .popup-box {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 440px;
  }

  .popup-side {
    display: none;
  }

  .popup-form {
    padding: 28px 20px 20px;
  }
}

/* ----- Phones (up to 600px) ----- */
@media (max-width: 600px) {
  .wrap {
    padding-right: 18px;
    padding-left: 18px;
  }

  .offer-sep {
    display: none;
  }

  .offer-inner {
    gap: 4px 16px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .header-inner {
    height: 62px;
  }

  .logo img {
    width: 140px;
    height: auto;
  }

  .form-card {
    padding: 24px 18px 20px;
  }

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

  .stand-grid div,
  .stand-grid div + div {
    padding-left: 0;
    border-left: 0;
  }

  .stand-grid div:nth-child(even) {
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }

  .stand-grid div:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  /* The five numbers swipe sideways in one row */
  .learn-stats {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 42%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .learn-stats::-webkit-scrollbar {
    display: none;
  }

  .learn-stats div {
    scroll-snap-align: start;
  }

  .learn-stats div:nth-child(4) {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Specializations: tabs scroll sideways, tiles in two compact columns */
  .spec-tabs {
    flex-wrap: nowrap;
    margin-right: -18px;
    margin-left: -18px;
    padding: 0 18px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .spec-tabs::-webkit-scrollbar {
    display: none;
  }

  .spec-tabs button {
    flex: 0 0 auto;
  }

  /* Specializations: two rows of tiles that swipe sideways */
  .spec-tiles {
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: 46%;
    gap: 8px;
    margin-right: -18px;
    margin-left: -18px;
    padding: 0 18px 4px;
    overflow-x: auto;
    scroll-padding: 0 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .spec-tiles::-webkit-scrollbar {
    display: none;
  }

  .spec-tiles li {
    scroll-snap-align: start;
  }

  .spec-tiles a {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
  }

  .spec-tiles b {
    font-size: 13px;
  }

  .spec-tiles small {
    display: none;
  }

  .ic {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .ic svg {
    width: 18px;
    height: 18px;
  }

  /* Program insights, mentors and stories: one card at a time, swipe for the next */
  .insight-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    margin-right: -18px;
    margin-left: -18px;
    padding: 0 18px 4px;
    overflow-x: auto;
    scroll-padding: 0 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

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

  .insight-grid article {
    scroll-snap-align: start;
  }

  .mentor-grid,
  .story-grid {
    grid-auto-columns: 86%;
    margin-right: -18px;
    margin-left: -18px;
    padding: 0 18px 4px;
    scroll-padding: 0 18px;
  }

  /* Intro photo is decorative; hidden on phones to keep the page short */
  .who-photo {
    display: none;
  }

  /* Long text blocks show a few lines with a Read more button */
  .clamp {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
  }

  .keywords.clamp {
    -webkit-line-clamp: 3;
  }

  .clamp.open {
    display: block;
  }

  .more-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--red);
    font: 600 14px var(--font);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  .kw-btn {
    margin-top: 16px;
    color: var(--ink);
    font-size: 13px;
  }

  .site-footer .keywords {
    margin-top: 6px;
  }

  .center-cta .btn,
  .closing-btns .btn {
    width: 100%;
  }

  .marquee li {
    width: 130px;
    height: 68px;
    padding: 10px 12px;
  }

  .marquee img {
    max-height: 42px;
  }

  .fee-card {
    padding: 24px 20px;
  }

  .fee-switch button {
    font-size: 12.5px;
  }

  .fee-now span {
    font-size: 42px;
  }

  .fee-points li {
    grid-template-columns: 1fr;
  }

  .admit-tabs {
    padding: 22px 12px 16px;
  }

  .admit-rail {
    top: 40px;
    left: calc(12px + 12.5% - 4px);
    right: calc(12px + 12.5% - 4px);
  }

  .admit-tabs button {
    gap: 8px;
    font-size: 11.5px;
  }

  .admit-tabs button b {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .admit-panel {
    padding: 24px 20px 28px;
  }

  .admit-panel h3 {
    font-size: 20px;
  }

  .footer-base {
    flex-direction: column;
    gap: 8px;
  }
}

/* ----- Phones: tighter type and spacing (up to 600px) ----- */
@media (max-width: 600px) {
  :root {
    --section-space: 56px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 17px;
  }

  .hide-sm {
    display: none;
  }

  .lead,
  .split-head p,
  .intro-copy p,
  .alumni-sub {
    font-size: 15.5px;
  }

  .split-head {
    gap: 12px;
  }

  /* Offer bar: one compact line */
  .offer-bar {
    font-size: 12.5px;
  }

  .offer-inner {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .offer-inner p {
    gap: 2px 8px;
  }

  .offer-timer b {
    min-width: 22px;
  }

  /* Header */
  .header-inner {
    height: 56px;
  }

  .logo img {
    width: 124px;
  }

  /* Hero */
  .hero-grid {
    gap: 24px;
    padding-bottom: 28px;
  }

  .hero-copy {
    padding: 28px 0 0;
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero h1 span {
    font-size: 0.82em;
  }

  .hero-lede {
    margin-top: 12px;
    font-size: 15.5px;
    line-height: 1.5;
  }

  .hero-ticks {
    gap: 6px;
    margin-top: 16px;
  }

  .hero-ticks li {
    font-size: 14px;
  }

  .hero-ticks li::before {
    flex-basis: 18px;
    height: 18px;
    background-size: 18px;
  }

  .form-card h2,
  .popup-form h2 {
    font-size: 22px;
  }

  .form-sub {
    font-size: 13px;
  }

  .fields {
    margin-top: 14px;
  }

  /* Intro photo shorter */
  .who-grid {
    gap: 28px;
  }

  .intro-copy p {
    margin-top: 14px;
  }

  .intro-copy .btn {
    margin-top: 22px;
  }

  /* Why CU */
  .stand-grid {
    margin-top: 28px;
  }

  .stand-grid div {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .stand-grid strong {
    font-size: 16.5px;
  }

  .learn-stats {
    margin-top: 32px;
  }

  .learn-stats div {
    padding: 18px 16px;
  }

  .learn-stats dt {
    font-size: 28px;
  }

  /* Specializations + insights */
  .spec-tabs {
    margin-top: 24px;
  }

  .spec-tiles {
    margin-top: 16px;
  }

  .center-cta {
    margin-top: 24px;
  }

  .insight-grid {
    gap: 12px;
    margin-top: 28px;
  }

  .insight-grid article {
    padding: 20px;
  }

  .insight-note {
    margin-top: 20px;
    font-size: 15px;
  }

  /* Alumni */
  .alumni {
    padding-bottom: 48px;
  }

  .marquee {
    margin-top: 24px;
  }

  .marquee + .marquee {
    margin-top: 10px;
  }

  /* Eligibility + fees */
  .fees-grid {
    gap: 28px;
  }

  .elig {
    margin-top: 20px;
    padding: 18px;
  }

  .fee-points {
    margin-top: 20px;
  }

  .fee-points + .btn {
    margin-top: 24px;
  }

  .fee-old {
    margin-top: 20px;
  }

  .fee-now span {
    font-size: 38px;
  }

  /* Admission */
  .admit-box {
    margin-top: 28px;
  }

  .admit-tabs button {
    font-size: 12px;
  }

  /* Mentors + stories */
  .mentor-grid,
  .story-grid {
    gap: 12px;
    margin-top: 28px;
  }

  .mentor-grid figure {
    gap: 14px;
    padding: 20px;
  }

  .story {
    gap: 20px;
    padding: 22px;
  }

  .story blockquote {
    font-size: 17px;
  }

  .stories {
    padding-top: 8px;
  }

  /* FAQs */
  .faq-grid {
    gap: 24px;
  }

  .faq-grid .btn {
    margin-top: 20px;
  }

  .faq-list summary {
    padding: 18px 0;
    font-size: 15.5px;
  }

  .faq-list details p {
    padding: 0 0 18px;
    font-size: 15px;
  }

  /* About, closing, footer */
  .about {
    padding: 40px 0;
  }

  .about h2 {
    font-size: 20px;
  }

  .closing-inner {
    gap: 24px;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .closing h2 {
    font-size: 26px;
  }

  .closing p {
    font-size: 15.5px;
  }

  .site-footer {
    padding: 36px 0 24px;
  }

  /* Popup fits small screens */
  .popup {
    padding: 10px;
  }

  .popup-form {
    padding: 22px 16px 16px;
  }
}

/* ----- Very small phones like the first iPhone SE (up to 360px) ----- */
@media (max-width: 360px) {
  :root {
    --section-space: 48px;
  }

  .wrap {
    padding-right: 14px;
    padding-left: 14px;
  }

  h2,
  .closing h2 {
    font-size: 24px;
  }

  .hero h1 {
    font-size: 26px;
  }

  .form-card {
    padding: 20px 14px 16px;
  }

  .field input,
  .field select,
  .phone,
  .otp {
    height: 40px;
    font-size: 13.5px;
  }

  .phone em {
    padding: 0 6px 0 8px;
  }

  .otp-btn {
    padding: 0 8px;
    font-size: 12px;
  }

  .spec-tabs,
  .spec-tiles,
  .insight-grid,
  .mentor-grid,
  .story-grid {
    margin-right: -14px;
    margin-left: -14px;
    padding: 0 14px 4px;
    scroll-padding: 0 14px;
  }

  .spec-tiles b {
    font-size: 12.5px;
  }

  .fee-now span {
    font-size: 34px;
  }

  .fee-switch button {
    padding: 0 4px;
    font-size: 11.5px;
    white-space: nowrap;
  }

  .admit-tabs button b {
    width: 32px;
    height: 32px;
  }

  .admit-rail {
    top: 38px;
  }

  .btn {
    padding: 0 20px;
  }
}

/* ----- Short screens (iPhone SE height): compact popup ----- */
@media (max-height: 680px) and (max-width: 600px) {
  .popup-form .form-sub {
    display: none;
  }

  .popup-form h2 {
    margin-bottom: 4px;
  }

  .popup-form .fields {
    gap: 8px;
  }

  .popup-form .consent {
    margin: 10px 0;
  }
}


/* ---------------------------------------------------------------------
   24. FIGMA CAPTURE MODE
   Add ?figma to the page address before importing with html.to.design.
   Turns off motion and floating elements so the capture is clean.
   --------------------------------------------------------------------- */
html.figma {
  scroll-behavior: auto;
}

html.figma *,
html.figma *::before,
html.figma *::after {
  animation: none !important;
  transition: none !important;
}

html.figma .site-header {
  position: relative;
}

html.figma .mobile-bar {
  display: none !important;
}

html.figma body {
  padding-bottom: 0;
}

html.figma .popup {
  position: absolute;
  min-height: 100vh;
}

html.figma .marquee-track {
  transform: none;
}

/* Confirmation shown after a saved non-graduate enquiry in either form. */
.enquiry-thank-you { text-align: center; }
.enquiry-thank-you-heading { background: #B60649; color: #fff; border-radius: 12px; padding: 16px 24px; margin-bottom: 16px; }
.enquiry-thank-you-heading h3 { margin: 0; font-size: 24px; font-weight: 600; }
.enquiry-thank-you-content { padding: 16px 0; }
.enquiry-thank-you-content svg { display: block; margin: 0 auto 12px; }
.enquiry-thank-you-content h4 { font-size: 18px; font-weight: 600; color: #1f2937; margin: 0 0 12px; }
.enquiry-thank-you-content p { font-size: 14px; color: #4b5563; margin: 0 0 12px; }