.page-info-redesign {
  background: #f7f4ee;
  color: #17223b;
}

.page-info-redesign header.site {
  position: relative;
  background: #07162f;
}

.page-info-redesign header.site::before { background: none; }
.page-info-redesign .sticky-cta { display: none !important; }

.page-info-redesign main {
  --info-navy: #081a38;
  --info-navy-2: #10284f;
  --info-ink: #17223b;
  --info-muted: #5e6878;
  --info-paper: #f7f4ee;
  --info-card: #fffdf9;
  --info-line: #d9d4ca;
  --info-accent: #e46631;
  /* Graphic accent only. The kickers and section labels below are 11-12px
     uppercase text, where #e46631 measures 2.83-3.31:1 on these cream
     surfaces — under the 4.5:1 floor. Text takes the design system's measured
     step instead; the 3px rules and bars keep the brighter hue. */
  --info-accent-text: var(--ice-color-text-accent);
  --info-width: 72rem;
  overflow: clip;
  background: var(--info-paper);
  color: var(--info-ink);
}

.page-info-redesign main .wrap {
  width: min(calc(100% - 2.5rem), var(--info-width));
  max-width: none;
  margin-inline: auto;
}

.page-info-redesign main :is(h1, h2, h3) {
  letter-spacing: -.035em;
  text-wrap: balance;
}

.page-info-redesign main h2 {
  max-width: 18ch;
  font-size: clamp(2.1rem, 3.6vw, 3.45rem);
  line-height: 1.02;
}

.page-info-redesign main h3 { line-height: 1.12; }
.page-info-redesign main p { line-height: 1.6; }

/* Full-bleed, image-led hero using the existing authentic page photograph. */
.page-info-redesign main .course-hero {
  position: relative;
  padding: 0 !important;
  background: var(--info-navy);
  color: #fff;
}

.page-info-redesign main .course-hero-wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 !important;
  background: var(--info-navy) !important;
}

.page-info-redesign main .wrap.course-hero-grid {
  position: relative;
  isolation: isolate;
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 40rem;
  overflow: hidden;
  margin: 0 !important;
  padding: 0;
  column-gap: 0 !important;
  align-items: stretch !important;
  grid-template-columns: minmax(0, 56%) minmax(0, 44%) !important;
  grid-template-rows: 1fr auto !important;
}

.page-info-redesign main .course-hero-grid::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, #07162f 0%, #07162f 28%, rgb(7 22 47 / 92%) 40%, rgb(7 22 47 / 45%) 59%, transparent 76%);
  content: '';
  pointer-events: none;
}

.page-info-redesign main .course-hero__media {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0;
  overflow: hidden;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0b1b35;
}

.page-info-redesign main .course-hero__media :is(picture, img) {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}

.page-info-redesign main .course-hero__media img {
  object-fit: cover;
}

.page-info-redesign main :is(.course-hero__badge, .course-hero__media-controls) {
  display: none !important;
}

.page-info-redesign main .course-hero__info {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: end;
  width: 100% !important;
  height: auto !important;
  padding: 3rem clamp(2rem, 5vw, 5rem) 1rem !important;
  background: transparent !important;
  color: #fff;
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.page-info-redesign main .hero-header-group { max-width: 39rem; }

.page-info-redesign main .course-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 2rem;
  color: #afbdd1;
  font-size: .82rem;
}

.page-info-redesign main .course-breadcrumb a { color: inherit; }
.page-info-redesign main .course-category {
  margin-bottom: .8rem;
  color: var(--info-accent-text);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.page-info-redesign main .course-hero h1 {
  max-width: 12.5ch;
  margin: 0;
  color: #fff !important;
  font-size: clamp(3.25rem, 5vw, 5rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.page-info-redesign main .course-facts {
  display: grid;
  width: min(100%, 36rem);
  margin-top: 1.5rem;
  border-block: 1px solid rgb(255 255 255 / 18%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-info-redesign main .course-facts > div {
  min-width: 0;
  padding: .9rem .7rem;
}

.page-info-redesign main .course-facts > div:first-child { padding-left: 0; }
.page-info-redesign main .course-facts > div + div { border-left: 1px solid rgb(255 255 255 / 13%); }
.page-info-redesign main .course-facts dt {
  color: #9eadc3;
  font-size: .66rem;
  letter-spacing: .08em;
}

.page-info-redesign main .course-facts dd {
  margin-top: .25rem;
  color: #fff;
  font-size: .92rem;
  font-weight: 800;
}

.page-info-redesign main .course-hero__actions-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: block !important;
  width: 100% !important;
  padding: 0 clamp(2rem, 5vw, 5rem) 2.5rem !important;
  background: transparent !important;
  color: #fff;
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.page-info-redesign main .course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 0;
}

.page-info-redesign main .course-action {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.2rem;
  border: 1px solid #71809a;
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  text-decoration: none;
}

.page-info-redesign main .course-action--primary {
  border-color: #d51d3c;
  background: #d51d3c;
  color: #fff;
}

/* course-typography.css forces `color: var(--ice-color-on-surface) !important`
   on this link for the light hero-panel composition it was written for. In
   this redesign the actions sit on the navy hero band, where that ink measures
   1.02:1 — "Visit the campus", "Contact the college" and "Application form"
   were invisible. Matching !important is the only thing that gets past an
   !important, and the ink is the one that belongs on a brand field. */
.page-info-redesign main .course-action--link {
  background: rgb(255 255 255 / 4%);
  color: var(--ice-color-on-surface-brand) !important;
}
.page-info-redesign main .course-actions-divider { display: none; }

/* The 3px accent rail came off on 2026-08-22. This is the rule that actually
   paints on /about, /careers and /campus-location — the near-identical one in
   course-typography.css is overridden here — and a thick coloured border down
   one side of a callout is the stock generated-UI tell the craft floor names.

   The indent stays, because an indented block IS the typographic convention for
   an aside and it does the separating work on its own. The colour moves onto
   the words: `.course-promo-block strong` opens the note ("Formerly Janakpur
   Engineering College.") and now carries the accent, so the block still reads
   as a distinct remark rather than as another paragraph.

   Note for anyone re-adding separation here: the `<hr class="course-actions-
   divider">` immediately above this block in the markup is `display:none` on
   these pages (line 248 above), so there is no rule overhead to double up with. */
.page-info-redesign main .course-promo-block {
  max-width: 37rem;
  margin-top: .9rem;
  padding: .15rem 0 .15rem .9rem;
  background: transparent;
}

.page-info-redesign main .course-promo-block strong {
  color: var(--info-accent);
  font-weight: 700;
}

.page-info-redesign main .course-promo-block p {
  margin: 0;
  color: #c8d3e2;
  font-size: .82rem;
  line-height: 1.45;
}

/* Compact facts and page navigation directly beneath the hero. */
.page-info-redesign main .trust-strip {
  display: grid;
  width: min(calc(100% - 2.5rem), var(--info-width));
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--info-line);
  border-top: 0;
  background: var(--info-card);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-info-redesign main .trust-strip > div {
  min-width: 0;
  padding: 1rem 1.15rem;
  border: 0;
}

.page-info-redesign main .trust-strip > div + div { border-left: 1px solid var(--info-line); }
.page-info-redesign main .trust-strip b { color: var(--info-ink); font-size: .82rem; }
.page-info-redesign main .trust-strip span {
  margin-top: .25rem;
  color: var(--info-muted);
  font-size: .75rem;
  line-height: 1.4;
}

.page-info-redesign main .subnav {
  position: static;
  border-block: 1px solid var(--info-line);
  background: #fffdf9;
  box-shadow: none;
}

.page-info-redesign main .subnav .wrap {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  overflow-x: auto;
  gap: 0;
  scrollbar-width: none;
}

.page-info-redesign main .subnav a {
  flex: 0 0 auto;
  padding: .9rem 1rem;
  color: #4d5869;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}

.page-info-redesign main .subnav a:first-child { padding-left: 0; }
/* The base rule paints this as a crimson pill with white ink. Recolouring
   only the text left crimson on crimson, 1.13:1 — the Apply link, which is
   the site's primary conversion path, read as an empty red box. */
.page-info-redesign main .subnav .apply-mini { margin-left: auto; }

/* Dense editorial rhythm: no empty separator bands between sections. */
.page-info-redesign.page-resequenced main > section:not(.course-hero) {
  margin: 0;
  padding-block: clamp(1.25rem, 2.2vw, 2rem) !important;
}

.page-info-redesign main > section + section { border-top: 1px solid var(--info-line); }
.page-info-redesign main .band { background: #f0ebe2; }
.page-info-redesign main .sec-head { max-width: 50rem; margin-bottom: 1.25rem; }
.page-info-redesign main .sec-head .label,
.page-info-redesign main .article-body > .label {
  margin-bottom: .65rem;
  color: var(--info-accent-text);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.page-info-redesign main .sec-head > p:not(.label) {
  max-width: 43rem;
  margin-top: .75rem;
  color: var(--info-muted);
}

.page-info-redesign main .editorial-lead,
.page-info-redesign main .media-row.split {
  display: grid;
  align-items: stretch;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--info-card);
}

.page-info-redesign main .editorial-lead__media,
.page-info-redesign main .media-row.split > figure {
  min-height: 23rem;
  margin: 0;
}

.page-info-redesign main .editorial-lead > .article-body,
.page-info-redesign main .media-row.split > .sec-head {
  display: flex;
  max-width: none;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.page-info-redesign main .editorial-lead .article-body > .editorial-story-grid {
  grid-template-columns: 1fr;
  align-items: start;
  gap: .75rem;
  margin-top: 1rem;
}

.page-info-redesign main .editorial-lead .editorial-story {
  display: grid;
  align-content: start;
  grid-template-columns: 9rem minmax(0, 1fr);
  grid-template-rows: auto;
  height: auto;
}

.page-info-redesign main .editorial-lead .editorial-story picture { height: 100%; min-height: 10rem; }
.page-info-redesign main .editorial-lead .editorial-story__body {
  display: block;
  height: auto;
  padding: .9rem;
}
.page-info-redesign main .editorial-lead .editorial-story__body h3 { font-size: 1.12rem; }

.page-info-redesign main :is(.editorial-lead__media, .media-frame, .article-media) {
  overflow: hidden;
  border: 0;
  background: #d9dde2;
}

.page-info-redesign main :is(.editorial-lead__media, .media-frame, .article-media) :is(picture, img) {
  width: 100%;
  height: 100%;
}

.page-info-redesign main :is(.editorial-lead__media, .media-frame, .article-media) img { object-fit: cover; }

.page-info-redesign main .editorial-story-grid {
  display: grid;
  gap: .75rem;
}

.page-info-redesign main .editorial-story {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--info-line);
  background: var(--info-card);
}

.page-info-redesign main .editorial-story picture {
  display: block;
  width: 100%;
  height: 15rem;
}

.page-info-redesign main .editorial-story img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-info-redesign main .editorial-story__body { padding: 1.15rem; }
.page-info-redesign main .editorial-story__body h3 { font-size: 1.35rem; }
.page-info-redesign main .editorial-story__body > p:not(.label) {
  margin-top: .55rem;
  color: var(--info-muted);
  font-size: .88rem;
}

.page-info-redesign main .article-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.7fr) minmax(17rem, .7fr);
}

.page-info-redesign main .article-body { max-width: none; }
.page-info-redesign main .article-body h2 { margin: 1.5rem 0 .65rem; }
.page-info-redesign main .article-body h2:first-child { margin-top: 0; }
.page-info-redesign main .article-body h3 { margin: 1.1rem 0 .45rem; }
.page-info-redesign main .article-body :is(p, li) { color: var(--info-muted); }
.page-info-redesign main .article-body :is(p, ul, ol) + :is(p, ul, ol) { margin-top: .8rem; }

.page-info-redesign main .article-aside {
  position: static;
  display: grid;
  align-content: start;
  gap: .75rem;
}

.page-info-redesign main :is(.fact-panel, .scholar, .job, .contact-card, .source-note) {
  padding: 1.15rem;
  border: 1px solid var(--info-line);
  background: var(--info-card);
}

/* `.scholar` is a dark navy card everywhere else, and course-typography.css
   says so twice: its heading is `#fff` and its copy `rgba(255,255,255,.8)`.
   This redesign relit the card to a pale surface and did not bring the inks
   with it, so the heading, the paragraph and the link were white on cream —
   1.01:1, which is not "hard to read", it is invisible. Anything that relights
   a card has to relight what is written on it. */
.page-info-redesign main .scholar :is(h3, p, a) {
  color: var(--info-ink);
}
.page-info-redesign main .scholar p { color: var(--info-muted); }
.page-info-redesign main .scholar a { text-decoration: underline; }

.page-info-redesign main .seo-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-info-redesign main .seo-card {
  padding: 1.15rem;
  border: 1px solid var(--info-line);
  background: var(--info-card);
}

.page-info-redesign main .seo-card h3 { font-size: 1.3rem; }
.page-info-redesign main .seo-card > p:not(.label) { margin-top: .55rem; color: var(--info-muted); font-size: .88rem; }

.page-info-redesign main :is(.prog-grid, .steps, .mini-steps, .highlights, .job-list, .contact-grid) { gap: .75rem; }
.page-info-redesign main .prog {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--info-line);
  background: var(--info-card);
}

.page-info-redesign main .prog picture { min-height: 15rem; }
.page-info-redesign main .prog-body { padding: 1.15rem; }

.page-info-redesign main .faq { border-top: 1px solid var(--info-line); }
.page-info-redesign main .faq > details { padding: 0; border: 0; border-bottom: 1px solid var(--info-line); background: transparent; }
.page-info-redesign main .faq summary { min-height: 4rem; padding: .8rem 0; }
.page-info-redesign main .faq details > p { padding: 0 2rem 1rem 0; color: var(--info-muted); }

.page-info-redesign main .cta-banner {
  display: grid;
  min-height: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--info-navy-2);
  color: #fff;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
}

.page-info-redesign main .cta-banner h3 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.page-info-redesign main .cta-banner p { color: #c1ccdc; }

.page-info-redesign main .contact-sec {
  background: var(--info-navy);
  color: #fff;
}

.page-info-redesign main .contact-sec .contact-card {
  border-color: #344967;
  background: #102548;
}

@media (max-width: 63.99rem) {
  .page-info-redesign main .wrap.course-hero-grid { grid-template-columns: minmax(0, 62%) minmax(0, 38%) !important; }
  .page-info-redesign main .course-hero__info { padding-inline: 1.5rem !important; }
  .page-info-redesign main .course-hero__actions-copy { padding-inline: 1.5rem !important; }
  .page-info-redesign main .article-layout { grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr); }
}

@media (max-width: 47.99rem) {
  .page-info-redesign main .wrap { width: min(calc(100% - 2rem), var(--info-width)); }
  .page-info-redesign main .wrap.course-hero-grid {
    display: flex !important;
    min-height: 0;
    flex-direction: column;
  }

  .page-info-redesign main .course-hero-grid::before { display: none; }
  .page-info-redesign main .course-hero__media {
    position: relative !important;
    inset: auto !important;
    height: min(58vh, 24rem) !important;
    min-height: 20rem;
    flex: 0 0 auto;
  }

  .page-info-redesign main .course-hero__info {
    display: block;
    padding: 1.75rem 1rem 1rem !important;
    background: var(--info-navy) !important;
  }

  .page-info-redesign main .course-breadcrumb { margin-bottom: 1.25rem; }
  .page-info-redesign main .course-hero h1 { max-width: none; font-size: clamp(2.35rem, 10.5vw, 3rem); }
  .page-info-redesign main .course-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-info-redesign main .course-facts > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .page-info-redesign main .course-facts > div:nth-child(n + 3) { border-top: 1px solid rgb(255 255 255 / 13%); }
  .page-info-redesign main .course-hero__actions-copy { margin-top: 0 !important; padding: 0 1rem 1.75rem !important; background: var(--info-navy) !important; box-shadow: none !important; clip-path: none !important; }
  .page-info-redesign main .course-actions { display: grid; grid-template-columns: 1fr; }
  .page-info-redesign main .course-action { width: 100%; }
  .page-info-redesign main .course-promo-block { display: none; }
  .page-info-redesign main .trust-strip {
    display: flex;
    width: 100%;
    overflow-x: auto;
    border-inline: 0;
    scrollbar-width: none;
  }

  .page-info-redesign main .trust-strip > div { flex: 0 0 16rem; }
  .page-info-redesign main .subnav .wrap { width: calc(100% - 2rem); }
  .page-info-redesign main .subnav .apply-mini { margin-left: 0; }
  .page-info-redesign.page-resequenced main > section:not(.course-hero) { padding-block: 1.25rem !important; }
  .page-info-redesign main :is(.editorial-lead, .media-row.split) { grid-template-columns: 1fr; }
  .page-info-redesign main .editorial-lead__media,
  .page-info-redesign main .media-row.split > figure { min-height: 0; aspect-ratio: 3 / 2; }
  .page-info-redesign main .editorial-lead .editorial-story {
    grid-template-columns: 1fr;
    grid-template-rows: 14rem auto;
  }
  .page-info-redesign main :is(.editorial-story-grid, .seo-grid, .article-layout) { grid-template-columns: 1fr; }
  .page-info-redesign main .editorial-story picture { height: 14rem; }
  .page-info-redesign main .cta-banner { grid-template-columns: 1fr; gap: 1rem; }
}

html[data-theme="dark"] body.page-info-redesign {
  background: #17191d;
  color: #edf1f7;
}

html[data-theme="dark"] .page-info-redesign main {
  --info-ink: #edf1f7;
  --info-muted: #aeb8c7;
  --info-paper: #17191d;
  --info-card: #23262c;
  --info-line: #3b414a;
  background: var(--info-paper);
  color: var(--info-ink);
}

html[data-theme="dark"] .page-info-redesign main .band { background: #1d2025; }
html[data-theme="dark"] .page-info-redesign main .subnav { background: #202329; }
html[data-theme="dark"] .page-info-redesign main .subnav a { color: #c7cfdb; }
html[data-theme="dark"] .page-info-redesign main :is(.trust-strip, .editorial-story, .seo-card, .prog, .fact-panel, .scholar, .job, .source-note) { background: var(--info-card); }
html[data-theme="dark"] .page-info-redesign main .editorial-lead,
html[data-theme="dark"] .page-info-redesign main .media-row.split { background: var(--info-card); }