/* ==========================================================================
   Raghu College of Pharmacy — components
   Buttons, header, mega-menu, drawer, cards, forms, tables, footer.
   ========================================================================== */

/* ==========================================================================
   Buttons
   ========================================================================== */
.rcp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rcp-2);
  min-height: var(--rcp-control);
  height: var(--rcp-control-lg);
  padding-inline: var(--rcp-4);
  border: 1px solid transparent;
  border-radius: var(--rcp-radius);
  font-family: inherit;
  font-size: var(--rcp-body);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rcp-fast) var(--rcp-ease),
              border-color var(--rcp-fast) var(--rcp-ease),
              color var(--rcp-fast) var(--rcp-ease);
}
.rcp-btn svg { flex-shrink: 0; }

.rcp-btn--primary { background: var(--rcp-ink); color: var(--rcp-page); }
.rcp-btn--primary:hover { background: var(--rcp-ink-mid); color: var(--rcp-page); }

.rcp-btn--signal { background: var(--rcp-signal); color: var(--rcp-page); }
.rcp-btn--signal:hover { background: var(--rcp-signal-hover); color: var(--rcp-page); }

.rcp-btn--secondary {
  background: transparent;
  color: var(--rcp-ink);
  border-color: var(--rcp-divider);
}
.rcp-btn--secondary:hover {
  background: var(--rcp-surface);
  border-color: var(--rcp-ink);
  color: var(--rcp-ink);
}

.rcp-btn--light { background: var(--rcp-page); color: var(--rcp-ink); }
.rcp-btn--light:hover { background: var(--rcp-surface); color: var(--rcp-ink); }

.rcp-btn--outline-light {
  background: transparent;
  color: var(--rcp-page);
  border-color: rgba(255, 255, 255, .5);
}
.rcp-btn--outline-light:hover { background: rgba(255, 255, 255, .1); color: var(--rcp-page); }

.rcp-btn--ghost { background: transparent; color: var(--rcp-ink); height: var(--rcp-control); }
.rcp-btn--ghost:hover { background: var(--rcp-hairline); }

.rcp-btn[aria-disabled="true"], .rcp-btn:disabled {
  background: var(--rcp-hairline);
  border-color: var(--rcp-hairline);
  color: var(--rcp-divider);
  pointer-events: none;
}

.rcp-btn--block { width: 100%; }

/* Text link with a trailing arrow — the house "read more" */
.rcp-link {
  display: inline-flex;
  align-items: center;
  gap: var(--rcp-2);
  font-size: var(--rcp-body);
  font-weight: 600;
  color: var(--rcp-accent-deep);
}
.rcp-link svg { flex-shrink: 0; transition: transform var(--rcp-fast) var(--rcp-ease); }
/* A standalone CTA must clear 44px where the pointer is a finger. Inline links
   inside a sentence are exempt, so this is scoped to coarse pointers only. */
@media (pointer: coarse) {
  .rcp-link { min-height: var(--rcp-control); }
}
.rcp-link:hover svg { transform: translateX(3px); }
.rcp-section--ink .rcp-link, .rcp-on-ink .rcp-link { color: var(--rcp-accent-light); }

/* ==========================================================================
   Header — utility strip, accreditation strip, main bar
   ========================================================================== */
.rcp-utility {
  background: var(--rcp-ink);
  color: var(--rcp-on-dark);
  font-size: var(--rcp-micro);
  line-height: var(--rcp-micro-lh);
}
.rcp-utility__inner {
  min-height: var(--rcp-control);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rcp-5);
  flex-wrap: wrap;
  padding-block: var(--rcp-2);
}
.rcp-utility a { color: var(--rcp-on-dark); text-decoration: none; }
.rcp-utility a:hover { color: var(--rcp-page); text-decoration: underline; }
.rcp-utility__group { display: flex; align-items: center; gap: var(--rcp-4); flex-wrap: wrap; }
.rcp-utility__item { display: inline-flex; align-items: center; gap: 7px; }
.rcp-utility__item svg { color: var(--rcp-accent-light); flex-shrink: 0; }
.rcp-utility__sep { inline-size: 1px; block-size: 14px; background: var(--rcp-hairline-dark); }

.rcp-code {
  font-family: var(--rcp-mono);
  font-size: var(--rcp-micro);
  letter-spacing: .06em;
  font-weight: 600;
  background: var(--rcp-accent-tint);
  color: var(--rcp-accent-light);
  padding: 2px 7px;
  border-radius: 3px;
}

/* Accreditation marks — above the logo lockup, per the brief */
.rcp-accred {
  background: var(--rcp-surface);
  border-block-end: var(--rcp-border);
}
.rcp-accred__inner {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  gap: var(--rcp-3);
  flex-wrap: wrap;
  padding-block: var(--rcp-2);
}
.rcp-mark {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding-inline: 10px;
  border: var(--rcp-border-strong);
  border-radius: 3px;
  font-size: var(--rcp-eyebrow);
  font-weight: 600;
  color: var(--rcp-ink-mid);
  white-space: nowrap;
}
.rcp-mark--pending { border-style: dashed; color: var(--rcp-muted); }

.rcp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--rcp-page);
  border-block-end: var(--rcp-border);
}
.rcp-header__inner {
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rcp-5);
}
.rcp-header.is-stuck .rcp-header__inner { height: 4rem; }
.rcp-header.is-stuck { box-shadow: var(--rcp-elev); }

.rcp-logo { flex-shrink: 0; }
.rcp-logo img { height: 3.25rem; width: auto; transition: height var(--rcp-fast) var(--rcp-ease); }
.rcp-header.is-stuck .rcp-logo img { height: 2.375rem; }

/* ---- Primary nav ---------------------------------------------------- */
.rcp-nav { display: flex; align-items: center; gap: var(--rcp-4); }
.rcp-nav__list {
  display: flex;
  align-items: center;
  gap: var(--rcp-4);
  list-style: none;
}
.rcp-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-block: var(--rcp-2);
  border-block-end: 2px solid transparent;
  background: none;
  border-inline: 0;
  border-block-start: 0;
  font-family: inherit;
  font-size: var(--rcp-body);
  font-weight: 600;
  color: var(--rcp-ink);
  text-decoration: none;
  cursor: pointer;
}
.rcp-nav__link:hover { color: var(--rcp-ink-mid); }
.rcp-nav__link[aria-current="page"],
.rcp-nav__link[aria-expanded="true"] { border-block-end-color: var(--rcp-accent); }
.rcp-nav__link svg { transition: transform var(--rcp-fast) var(--rcp-ease); }
.rcp-nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.rcp-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--rcp-control);
  block-size: var(--rcp-control);
  background: none;
  border: var(--rcp-border-strong);
  border-radius: var(--rcp-radius);
  color: var(--rcp-ink);
  cursor: pointer;
}
.rcp-iconbtn:hover { background: var(--rcp-surface); }
.rcp-iconbtn--bare { border-color: transparent; }

/* ---- Mega-menu ------------------------------------------------------ */
.rcp-mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--rcp-page);
  border-block: var(--rcp-border);
  box-shadow: 0 8px 24px rgba(22, 41, 61, .06);
}
.rcp-mega[hidden] { display: none; }
.rcp-mega__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 300px;
  gap: var(--rcp-6);
  padding-block: var(--rcp-5) var(--rcp-5);
}
.rcp-mega__col { display: flex; flex-direction: column; gap: var(--rcp-3); }
.rcp-mega__head {
  font-size: var(--rcp-eyebrow);
  line-height: var(--rcp-eyebrow-lh);
  letter-spacing: var(--rcp-tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rcp-accent-deep);
  padding-block-end: var(--rcp-3);
  border-block-end: var(--rcp-border);
}
.rcp-mega__list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rcp-mega__list a {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--rcp-ink);
  text-decoration: none;
}
.rcp-mega__list a:hover { color: var(--rcp-accent-deep); text-decoration: underline; }
.rcp-mega__feature {
  background: var(--rcp-surface);
  border-radius: var(--rcp-radius-card);
  padding: var(--rcp-4);
  display: flex;
  flex-direction: column;
  gap: var(--rcp-3);
}
.rcp-mega__feature--ink { background: var(--rcp-ink); color: var(--rcp-on-dark); }
.rcp-mega__title {
  font-family: var(--rcp-serif);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--rcp-ink);
}
.rcp-mega__feature--ink .rcp-mega__title { color: var(--rcp-page); }

@media (max-width: 1119px) { .rcp-nav, .rcp-mega { display: none; } }
@media (min-width: 1120px) { .rcp-burger { display: none; } }

/* ---- Search overlay ------------------------------------------------- */
.rcp-search {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(22, 41, 61, .86);
  padding: var(--rcp-7) var(--rcp-margin);
  overflow-y: auto;
}
.rcp-search[hidden] { display: none; }
.rcp-search__panel {
  background: var(--rcp-page);
  border-radius: var(--rcp-radius-card);
  max-width: 760px;
  margin-inline: auto;
  padding: var(--rcp-5);
  display: flex;
  flex-direction: column;
  gap: var(--rcp-4);
}
.rcp-search__field {
  display: flex;
  align-items: center;
  gap: var(--rcp-3);
  height: 3.5rem;
  border-block-end: 2px solid var(--rcp-ink);
}
.rcp-search__input {
  flex-grow: 1;
  border: 0;
  background: none;
  font-family: var(--rcp-serif);
  font-size: 1.375rem;
  color: var(--rcp-ink);
  min-width: 0;
}
.rcp-search__input:focus { outline: none; }
.rcp-kbd {
  font-family: var(--rcp-mono);
  font-size: var(--rcp-micro-sm);
  color: var(--rcp-muted);
  border: var(--rcp-border-strong);
  border-radius: 3px;
  padding: 3px 7px;
}

/* ---- Mobile drawer -------------------------------------------------- */
.rcp-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--rcp-page);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.rcp-drawer[hidden] { display: none; }
.rcp-drawer__bar {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--rcp-margin-sm);
  border-block-end: var(--rcp-border);
  flex-shrink: 0;
}
.rcp-drawer__bar img { height: 2.25rem; width: auto; }
.rcp-drawer__body { padding: var(--rcp-2) var(--rcp-margin-sm) var(--rcp-5); }

.rcp-acc { border-block-end: var(--rcp-border); }
.rcp-acc__btn {
  inline-size: 100%;
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rcp-3);
  padding-block: var(--rcp-2);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--rcp-ink);
  text-align: start;
  cursor: pointer;
}
.rcp-acc__btn[aria-expanded="true"] { color: var(--rcp-accent-deep); }
.rcp-acc__btn svg { flex-shrink: 0; transition: transform var(--rcp-fast) var(--rcp-ease); }
.rcp-acc__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.rcp-acc__panel {
  background: var(--rcp-surface);
  margin-inline: calc(var(--rcp-margin-sm) * -1);
  padding: var(--rcp-2) var(--rcp-margin-sm) var(--rcp-3) calc(var(--rcp-margin-sm) - 4px);
  list-style: none;
}
.rcp-acc__panel[hidden] { display: none; }
.rcp-acc__panel a {
  display: flex;
  align-items: center;
  min-height: var(--rcp-control);
  font-size: var(--rcp-body);
  color: var(--rcp-ink);
  text-decoration: none;
}
.rcp-acc__panel a:hover { color: var(--rcp-accent-deep); text-decoration: underline; }

/* ==========================================================================
   Hero
   ========================================================================== */
.rcp-hero {
  position: relative;
  background: var(--rcp-ink);
  isolation: isolate;
  overflow: hidden;
}

/* The hero is deliberately NOT given the photograph's aspect ratio.

   It was, briefly, and that was wrong: aspect-ratio locks the height to the
   width, and the banner is 28:9 while the hero has to hold a headline, a
   standfirst, two buttons and the admissions ribbon. At 1280px the box came out
   407px tall against 608px of content, and since .rcp-hero clips its overflow,
   both call-to-action buttons were cut off the bottom of the page.

   So the hero stays sized by its content and its image fills the frame. It is
   the one picture on the site that is cropped, and the reason is that it is
   backdrop rather than subject — a scrim sits over it and type sits on it.
   Every image that is there to be looked at keeps its own proportions; see
   partials/media-image.php.

   --rcp-hero-ratio is still written onto the element and is still useful: the
   img carries the real intrinsic width and height, which is what stops the
   first paint from shifting. */
.rcp-hero__media { position: absolute; inset: 0; z-index: -2; }
.rcp-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Placeholder while the photograph is outstanding — a flat block, never a broken icon. */
.rcp-hero__media--pending {
  background: repeating-linear-gradient(135deg, #1D3550 0 14px, #223C59 14px 28px);
}
.rcp-hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--rcp-scrim); }
.rcp-hero__inner {
  min-height: 34rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--rcp-8) calc(var(--rcp-8) + 1rem);
  gap: var(--rcp-4);
  max-width: 780px;
}
.rcp-hero__inner h1 { color: var(--rcp-page); }
.rcp-hero__inner p { color: #E3E7E1; max-width: 620px; }
.rcp-hero__actions { display: flex; align-items: center; gap: var(--rcp-3); flex-wrap: wrap; margin-block-start: var(--rcp-2); }
.rcp-hero__actions .rcp-btn { height: 3.25rem; }

.rcp-ribbon {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  background: var(--rcp-signal);
  color: var(--rcp-page);
}
.rcp-ribbon__inner {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rcp-4);
  flex-wrap: wrap;
  padding-block: var(--rcp-2);
}
.rcp-ribbon a { color: var(--rcp-page); text-underline-offset: 4px; font-weight: 600; }
.rcp-ribbon a:hover { color: var(--rcp-page); }

@media (max-width: 767px) {
  .rcp-hero__inner { min-height: 28rem; justify-content: flex-end; padding-block: var(--rcp-6) calc(var(--rcp-7) + 1rem); }
  .rcp-hero__actions { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Quick access — a divided row, no cards
   ========================================================================== */
.rcp-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block-end: var(--rcp-border); }
.rcp-quick__item {
  display: flex;
  flex-direction: column;
  gap: var(--rcp-3);
  padding: var(--rcp-5) var(--rcp-4);
  border-inline-end: var(--rcp-border);
  text-decoration: none;
  color: var(--rcp-ink);
}
.rcp-quick__item:first-child { padding-inline-start: 0; }
.rcp-quick__item:last-child { border-inline-end: 0; padding-inline-end: 0; }
.rcp-quick__item:hover { background: var(--rcp-surface); color: var(--rcp-ink); }
.rcp-quick__item svg { color: var(--rcp-accent); }
.rcp-quick__title { font-family: var(--rcp-serif); font-size: var(--rcp-h4); line-height: var(--rcp-h4-lh); font-weight: 600; }
@media (max-width: 1119px) {
  .rcp-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rcp-quick__item { border-block-end: var(--rcp-border); padding-inline: var(--rcp-3); }
  .rcp-quick__item:nth-child(odd) { padding-inline-start: 0; }
  .rcp-quick__item:nth-child(even) { border-inline-end: 0; padding-inline-end: 0; }
}

/* ==========================================================================
   Stats band — hairline dividers, serif numerals
   ========================================================================== */
.rcp-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rcp-stat { display: flex; flex-direction: column; gap: var(--rcp-2); padding-inline: var(--rcp-5); }
.rcp-stat:first-child { padding-inline-start: 0; }
.rcp-stat:last-child { padding-inline-end: 0; }
.rcp-stat + .rcp-stat { border-inline-start: 1px solid var(--rcp-hairline-dark); }
.rcp-stat__value {
  font-family: var(--rcp-serif);
  font-size: var(--rcp-stat);
  line-height: var(--rcp-stat-lh);
  font-weight: 600;
  color: var(--rcp-page);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1119px) {
  .rcp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rcp-5) 0; }
  .rcp-stat { padding-inline: var(--rcp-4); }
  .rcp-stat:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .rcp-stat:nth-child(even) { border-inline-start: 1px solid var(--rcp-hairline-dark); }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.rcp-card {
  background: var(--rcp-page);
  border: var(--rcp-border);
  border-radius: var(--rcp-radius-card);
  display: flex;
  flex-direction: column;
}
.rcp-card--raised { box-shadow: var(--rcp-elev); }
.rcp-card--pad { padding: var(--rcp-5); gap: var(--rcp-4); }
.rcp-card--ink { background: var(--rcp-ink); border-color: transparent; color: var(--rcp-on-dark); }
.rcp-card--ink h3 { color: var(--rcp-page); }
.rcp-card__body { padding: var(--rcp-4); display: flex; flex-direction: column; gap: var(--rcp-3); flex-grow: 1; }
.rcp-card__media { border-block-end: var(--rcp-border); overflow: hidden; }
/* No forced shape and no object-fit. These carry event photographs, which come
   off a phone at 3:2 or 4:3; a 16/9 box with object-fit: cover trimmed a band
   off the top and bottom of every one of them, and on a photograph of a room
   full of people that is where the people are. The card is now as tall as the
   picture, so a row of cards can differ in height — which is the honest result
   of publishing pictures at the shape they were taken. */
.rcp-card__media img { inline-size: 100%; block-size: auto; }

/* Image placeholder — flat colour block, per the empty-state rule */
.rcp-pending {
  background: repeating-linear-gradient(135deg, #F2F4F1 0 10px, #ECEEEA 10px 20px);
  display: grid;
  place-items: center;
  color: var(--rcp-muted);
  font-family: var(--rcp-mono);
  font-size: var(--rcp-micro-sm);
  line-height: var(--rcp-micro-sm-lh);
  text-align: center;
  padding: var(--rcp-3);
}
.rcp-pending--16x9 { aspect-ratio: 16 / 9; }
.rcp-pending--4x3  { aspect-ratio: 4 / 3; }
.rcp-pending--4x5  { aspect-ratio: 4 / 5; border-radius: var(--rcp-radius); }

/* Spec / metadata row inside a card */
.rcp-meta { display: flex; flex-direction: column; border-block-start: var(--rcp-border); }
.rcp-meta__row {
  display: flex;
  justify-content: space-between;
  gap: var(--rcp-3);
  padding-block: 11px;
  border-block-end: var(--rcp-border);
  font-size: 0.9375rem;
}
.rcp-meta__row:last-child { border-block-end: 0; }
.rcp-meta__row dt { color: var(--rcp-muted); }
.rcp-meta__row dd { margin: 0; font-weight: 600; text-align: end; }

/* ==========================================================================
   Tags, chips, badges
   ========================================================================== */
.rcp-tag {
  display: inline-flex;
  align-items: center;
  height: 1.625rem;
  padding-inline: 10px;
  border-radius: var(--rcp-radius);
  font-size: var(--rcp-eyebrow);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--rcp-hairline);
  color: var(--rcp-muted);
  white-space: nowrap;
}
.rcp-tag--accent { background: var(--rcp-accent-tint); color: var(--rcp-ink); }
.rcp-tag--signal { background: var(--rcp-signal); color: var(--rcp-page); }
.rcp-tag--ink { background: var(--rcp-ink); color: var(--rcp-page); }

.rcp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--rcp-2);
  min-height: var(--rcp-control);
  height: 2.25rem;
  padding-inline: var(--rcp-3);
  border: var(--rcp-border-strong);
  border-radius: var(--rcp-radius);
  background: transparent;
  font-family: inherit;
  font-size: var(--rcp-small);
  font-weight: 600;
  color: var(--rcp-ink);
  text-decoration: none;
  cursor: pointer;
}
.rcp-chip[aria-pressed="true"] { background: var(--rcp-ink); border-color: var(--rcp-ink); color: var(--rcp-page); }

/* ==========================================================================
   Recruiter logo wall — monochrome at rest
   ========================================================================== */
.rcp-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--rcp-6) var(--rcp-5);
  align-items: center;
}
.rcp-wall img {
  filter: grayscale(1) contrast(.85) opacity(.62);
  max-height: 2.75rem;
  width: auto;
  /* The logos run from 1:1 to 4.13:1. Capping the height alone keeps every
     one in proportion, but the widest would then be over 11rem and would
     overrun its grid cell, so the width is bounded too. Both are maxima, so
     the ratio is never altered ? the logo just fits inside whichever bound
     it meets first. */
  max-width: 100%;
  margin-inline: auto;
  transition: filter var(--rcp-fast) var(--rcp-ease);
}
.rcp-wall a:hover img, .rcp-wall a:focus-visible img { filter: none; }

/* ==========================================================================
   Recruiter marquee — logos scrolling right to left, continuously
   ========================================================================== */
.rcp-marquee {
  /* One knob for the speed. Seconds for the full cycle: slow enough that a
     logo can be read as it passes, which is the only reason to show them. */
  --rcp-marquee-duration: 46s;
  --rcp-marquee-gap: var(--rcp-6);

  position: relative;
  overflow: hidden;
  /* The strip runs the full width of the card it sits in rather than stopping
     at the text measure — a marquee that starts and ends mid-air looks broken
     rather than continuous. */
  margin-inline: calc(var(--rcp-6) * -1);
  padding-block: var(--rcp-2);
}

/* Fade the two ends so logos enter and leave rather than being clipped by a
   hard edge. Masked rather than overlaid with a gradient, so it works over the
   card, the surface tint, or anything else behind it. */
@supports (mask-image: linear-gradient(#000, #000)) {
  .rcp-marquee {
    mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
  }
}

.rcp-marquee__track {
  display: flex;
  inline-size: max-content;
  /* No gap here on purpose. The spacing between the two copies comes from the
     trailing padding on each set, and adding it in both places makes the track
     wider than two sets — at which point translating -50% no longer lands one
     whole copy along, and the loop jumps by the difference once per cycle.
     Measured: 2 x 567px of set against an 1183px track, a 25px stutter. */
  animation: rcp-marquee-scroll var(--rcp-marquee-duration) linear infinite;
  /* Promoted so the browser composites the movement instead of repainting the
     logos on every frame. */
  will-change: transform;
}

.rcp-marquee__set {
  display: flex;
  align-items: center;
  gap: var(--rcp-marquee-gap);
  /* Matches the track gap, so the distance from the last logo of one copy to
     the first of the next is identical to every other gap. Without this the
     loop has a visible stutter once per cycle. */
  padding-inline-end: var(--rcp-marquee-gap);
  margin: 0;
  list-style: none;
}

.rcp-marquee__item { flex: 0 0 auto; display: flex; align-items: center; }

/* Sizing matches .rcp-wall: the height is capped and the width follows, so no
   logo is stretched. Both are maxima — see the note on .rcp-wall img. */
.rcp-marquee__item img {
  block-size: auto;
  max-block-size: 2.75rem;
  inline-size: auto;
  max-inline-size: 12rem;
  filter: grayscale(1) contrast(.85) opacity(.62);
  transition: filter var(--rcp-fast) var(--rcp-ease);
}
/* Hover is on the item, not on the link.
   It was on `a:hover`, which meant the colour only came back where a logo
   happened to be wrapped in an anchor. On /placements no recruiter has a
   website recorded, so nothing there was a link and no logo responded at all;
   and the duplicated copy carried no links either, so on the homepage a logo
   lit up or did not depending purely on which of the two copies was passing.
   The reveal is feedback about the logo, so it belongs on the logo. */
.rcp-marquee__item:hover img,
.rcp-marquee a:focus-visible img { filter: none; }

.rcp-marquee__name {
  white-space: nowrap;
  color: var(--rcp-muted);
  font-weight: 600;
}

/* -50% is exactly one copy of the list, so the second copy lands where the
   first started and the restart is invisible. */
@keyframes rcp-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Stop while someone is trying to read it, or is tabbing through the links. */
.rcp-marquee:hover .rcp-marquee__track,
.rcp-marquee:focus-within .rcp-marquee__track {
  animation-play-state: paused;
}

/* Continuous motion that the reader cannot stop is a real accessibility
   problem, not a preference. Where reduced motion is asked for, the strip
   stops moving altogether and lays the logos out as a wrapped row instead —
   every logo still reachable, nothing animating, no duplicate on screen. */
@media (prefers-reduced-motion: reduce) {
  .rcp-marquee {
    overflow: visible;
    mask-image: none;
    margin-inline: 0;
  }
  .rcp-marquee__track {
    animation: none;
    inline-size: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .rcp-marquee__set {
    flex-wrap: wrap;
    justify-content: center;
    padding-inline-end: 0;
  }
  /* The duplicate is there only to hide the seam; with nothing scrolling it
     would just be every logo twice. */
  .rcp-marquee__set[aria-hidden="true"] { display: none; }
}
@media (max-width: 1119px) { .rcp-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Mobile: a scrolling strip rather than a carousel */
.rcp-strip {
  display: flex;
  align-items: center;
  gap: var(--rcp-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block: var(--rcp-2);
  -webkit-overflow-scrolling: touch;
}
.rcp-strip img { flex-shrink: 0; max-height: 1.75rem; width: auto; scroll-snap-align: start; filter: grayscale(1) contrast(.85) opacity(.62); }

/* ==========================================================================
   Forms
   ========================================================================== */
.rcp-field { display: flex; flex-direction: column; gap: var(--rcp-2); }
.rcp-label { font-size: var(--rcp-small); line-height: var(--rcp-small-lh); font-weight: 600; }
.rcp-label__opt { font-weight: 400; color: var(--rcp-muted); }

.rcp-input, .rcp-select, .rcp-textarea {
  inline-size: 100%;
  min-height: var(--rcp-control);
  height: var(--rcp-control-lg);
  padding-inline: 14px;
  border: var(--rcp-border-strong);
  border-radius: var(--rcp-radius);
  background: var(--rcp-page);
  font-family: inherit;
  font-size: var(--rcp-body);
  color: var(--rcp-ink);
}
.rcp-textarea { height: auto; min-height: 6.875rem; padding-block: 12px; line-height: var(--rcp-body-lh); resize: vertical; }
.rcp-input::placeholder, .rcp-textarea::placeholder { color: var(--rcp-divider); }
.rcp-input:hover, .rcp-select:hover, .rcp-textarea:hover { border-color: var(--rcp-muted); }

.rcp-input[aria-invalid="true"] {
  border: 1.5px solid var(--rcp-signal);
  background: var(--rcp-signal-wash);
}
.rcp-help { font-size: var(--rcp-small); line-height: var(--rcp-small-lh); color: var(--rcp-muted); }
.rcp-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--rcp-small);
  line-height: var(--rcp-small-lh);
  color: var(--rcp-signal);
}
.rcp-error svg { flex-shrink: 0; }

.rcp-alert {
  display: flex;
  gap: var(--rcp-3);
  padding: var(--rcp-3) var(--rcp-4);
  border-radius: var(--rcp-radius-card);
  border: 1.5px solid;
}
.rcp-alert svg { flex-shrink: 0; margin-block-start: 2px; }
.rcp-alert--error { border-color: var(--rcp-signal); background: var(--rcp-signal-wash); }
.rcp-alert--error svg { color: var(--rcp-signal); }
.rcp-alert--ok { border-color: var(--rcp-accent-deep); background: rgba(78, 139, 44, .05); }
.rcp-alert--ok svg { color: var(--rcp-accent-deep); }

/* ==========================================================================
   Academic table — zebra-free, hairline rules, tabular figures
   ========================================================================== */
.rcp-tablewrap { overflow-x: auto; }
.rcp-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; border-radius: var(--rcp-radius-flat); }
.rcp-table th {
  text-align: start;
  padding: 12px 16px;
  border-block-end: 1.5px solid var(--rcp-ink);
  background: var(--rcp-surface);
  font-size: var(--rcp-eyebrow);
  letter-spacing: var(--rcp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rcp-muted);
  font-weight: 600;
  position: sticky;
  top: 0;
}
.rcp-table td { padding: 14px 16px; border-block-end: var(--rcp-border); }
.rcp-table tbody tr:last-child td { border-block-end: 0; }
.rcp-table .is-num { text-align: end; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.rcp-crumbs {
  background: var(--rcp-surface);
  border-block-end: var(--rcp-border);
  font-size: var(--rcp-small);
  color: var(--rcp-muted);
}
.rcp-crumbs ol {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--rcp-2);
  min-height: var(--rcp-control);
  flex-wrap: wrap;
  padding-block: var(--rcp-2);
}
.rcp-crumbs li { display: inline-flex; align-items: center; gap: var(--rcp-2); }
.rcp-crumbs svg { color: var(--rcp-divider); }
.rcp-crumbs [aria-current="page"] { color: var(--rcp-ink); font-weight: 600; }

/* ==========================================================================
   Footer
   ========================================================================== */
.rcp-footer { background: var(--rcp-ink-deep); color: var(--rcp-on-dark); }
.rcp-footer__top {
  display: grid;
  grid-template-columns: 380px repeat(3, minmax(0, 1fr));
  gap: var(--rcp-7);
  padding-block: var(--rcp-7);
  border-block-end: 1px solid rgba(255, 255, 255, .12);
}
.rcp-footer h2 {
  font-family: var(--rcp-sans);
  font-size: var(--rcp-eyebrow);
  line-height: var(--rcp-eyebrow-lh);
  letter-spacing: var(--rcp-tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rcp-accent-light);
  margin-block-end: var(--rcp-3);
}
.rcp-footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.rcp-footer a { color: var(--rcp-on-dark); text-decoration: none; font-size: 0.9375rem; line-height: 1.5rem; }
.rcp-footer a:hover { color: var(--rcp-page); text-decoration: underline; }
.rcp-footer__logo {
  background: var(--rcp-page);
  padding: 6px 10px;
  border-radius: var(--rcp-radius);
  align-self: flex-start;
  display: inline-block;
}
.rcp-footer__logo img { height: 3rem; width: auto; }
.rcp-footer__contact { display: flex; flex-direction: column; gap: var(--rcp-3); }
.rcp-footer__contact div { display: flex; gap: 10px; align-items: flex-start; }
.rcp-footer__contact svg { color: var(--rcp-accent-light); flex-shrink: 0; margin-block-start: 4px; }
.rcp-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rcp-5);
  flex-wrap: wrap;
  padding-block: var(--rcp-4) var(--rcp-5);
  font-size: var(--rcp-small);
  color: var(--rcp-on-dark-dim);
}
.rcp-footer__bottom ul { flex-direction: row; gap: var(--rcp-4); }
.rcp-footer__bottom a { color: var(--rcp-on-dark-dim); font-size: var(--rcp-small); }

@media (max-width: 1119px) {
  .rcp-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rcp-6); }
}
@media (max-width: 767px) {
  .rcp-footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--rcp-5); }
}

/* ==========================================================================
   Pre-footer CTA
   ========================================================================== */
.rcp-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rcp-7);
}
.rcp-cta__actions { display: flex; flex-direction: column; gap: var(--rcp-3); flex-shrink: 0; }
.rcp-cta__actions .rcp-btn { height: 3.25rem; }
@media (max-width: 1119px) {
  .rcp-cta__inner { flex-direction: column; align-items: flex-start; gap: var(--rcp-5); }
  .rcp-cta__actions { inline-size: 100%; }
}

/* ==========================================================================
   Department list
   ========================================================================== */
.rcp-deptlist { display: flex; flex-direction: column; }
.rcp-deptlist__item {
  display: flex;
  align-items: center;
  gap: var(--rcp-4);
  padding-block: var(--rcp-4);
  border-block-start: var(--rcp-border);
  text-decoration: none;
  color: var(--rcp-ink);
}
.rcp-deptlist__item:last-child { border-block-end: var(--rcp-border); }
.rcp-deptlist__item:hover { color: var(--rcp-ink); background: var(--rcp-surface); }
.rcp-deptlist__item > svg:first-child { color: var(--rcp-accent); flex-shrink: 0; }
.rcp-deptlist__item > svg:last-child { color: var(--rcp-muted); flex-shrink: 0; margin-inline-start: auto; }
.rcp-deptlist__name { font-family: var(--rcp-serif); font-size: var(--rcp-h4); line-height: var(--rcp-h4-lh); font-weight: 600; }