/* ==========================================================================
   StayHope Student Accommodation, design system
   Brand, sampled from the StayHope logo:
   pin and subtitle blue #003888, orange #F88C00, swoosh cyan #01B1C7,
   wordmark black. Deep navy #00214F is a darker shade of the brand blue,
   used for large dark areas where #003888 would be too vivid.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Sampled from the StayHope logo: navy #001A52, pin blue #136ED7,
     orange #FA9220, swoosh teal #1795AD. */
  --navy:       #01245c;
  --brand:      #003888;
  --brand-600:  #002d6e;
  --brand-700:  #01245c;
  --brand-50:   #e9f0fa;
  --brand-100:  #ccdcf2;

  --accent:     #f88c00;
  --accent-600: #dc7a00;
  --accent-50:  #fef3e3;

  --teal:       #01b1c7;
  --soft:       #86b4ea;

  --bg:         #ffffff;
  --surface:    #f5f8fd;
  --surface-2:  #e9f0f9;
  --card:       #ffffff;

  --ink:        #0d1b33;
  --ink-2:      #3c4c66;
  --muted:      #6b7c96;
  --line:       #dde6f2;

  --ring:       rgba(0, 56, 136, .3);
  --shadow-sm:  0 1px 2px rgba(0, 33, 79, .06), 0 1px 3px rgba(0, 33, 79, .09);
  --shadow-md:  0 4px 12px rgba(0, 33, 79, .09), 0 2px 4px rgba(0, 33, 79, .06);
  --shadow-lg:  0 18px 40px rgba(0, 33, 79, .14), 0 4px 10px rgba(0, 33, 79, .07);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --header-h: 86px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --navy:      #0a1730;
    --brand:     #5ba0ea;
    --brand-600: #7db6f1;
    --brand-700: #9bc8f6;
    --brand-50:  #122343;
    --brand-100: #1a3157;

    --accent:     #ffab4a;
    --accent-600: #ffc078;
    --accent-50:  #2e2113;

    --teal:       #3fb6cc;
    --soft:       #7fb2e6;

    --bg:        #0a1120;
    --surface:   #111b2e;
    --surface-2: #18243a;
    --card:      #131f35;

    --ink:       #e8eefa;
    --ink-2:     #b3c1d6;
    --muted:     #8496ae;
    --line:      #24324b;

    --ring:      rgba(91, 160, 234, .45);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow-md: 0 4px 12px rgba(0,0,0,.5);
    --shadow-lg: 0 18px 40px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-600); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); }
h4 { font-size: 1.05rem; font-weight: 700; }
p  { text-wrap: pretty; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(38px, 6vw, 92px); }
.section--tight { padding-block: clamp(36px, 5vw, 60px); }
.section--surface { background: var(--surface); }
.section--brand { background: var(--brand-50); }

.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.lead { font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem); color: var(--ink-2); }

.sec-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head.center { margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head);
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-50);
  padding: .4rem .8rem; border-radius: var(--r-pill);
  margin-bottom: 1rem;
}
.eyebrow--accent { color: var(--accent); background: var(--accent-50); }

.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Content column plus sidebar; stacks on narrow screens. */
.grid--sidebar { align-items: start; }
@media (min-width: 900px) {
  .grid--sidebar { grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); }
  .grid--sidebar-wide { grid-template-columns: minmax(0, 1fr) minmax(280px, 1.1fr); }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--brand); --btn-fg: #fff; --btn-bd: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem; line-height: 1;
  padding: .92rem 1.45rem;
  border: 1.5px solid var(--btn-bd); border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn--accent { --btn-bg: var(--accent); --btn-bd: var(--accent); }
.btn--ghost  { --btn-bg: transparent; --btn-fg: var(--brand); --btn-bd: var(--brand); box-shadow: none; }
.btn--ghost:hover { --btn-bg: var(--brand); --btn-fg: #fff; }
.btn--white  { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; }
.btn--outline-white { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.7); box-shadow: none; }
.btn--outline-white:hover { --btn-bg: rgba(255,255,255,.14); }
.btn--sm { padding: .62rem 1.05rem; font-size: .86rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
@media (min-width: 1141px) {
  .site-header {
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
  }
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand picture { display: block; }
.brand__logo { display: block; width: auto; height: 58px; border-radius: 8px; }
@media (max-width: 560px) { .brand__logo { height: 46px; } }

/* Two lockups: the standard one for light surfaces and a reversed one for dark.
   The swap is done with a stylesheet media query rather than <picture media>,
   because Safari on iOS does not reliably re-evaluate prefers-color-scheme
   inside a <source>, and picking the wrong one hides the logo completely.
   Both files are transparent now, so a wrong pick can never draw a white plate. */
.brand__logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  .brand__logo--light { display: none; }
  .brand__logo--dark { display: block; }
}

/* The footer is dark in both themes, so it always uses the reversed lockup. */
.site-footer .brand__logo { height: 62px; display: block; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .1rem; list-style: none; padding: 0; margin: 0; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  color: var(--ink); text-decoration: none;
  white-space: nowrap;
  padding: .55rem .62rem; border-radius: var(--r-sm);
}
.nav__link:hover, .nav__item:focus-within > .nav__link { background: var(--brand-50); color: var(--brand); }
.nav__link[aria-current="page"] { color: var(--brand); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .1rem; height: 2px;
  background: var(--brand); border-radius: 2px;
}
.nav__item { position: relative; }
.nav__item > .nav__link { position: relative; }
.nav__caret { width: 10px; height: 10px; flex: none; transition: transform .18s ease; }
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 232px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: .4rem; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__item:hover > .nav__menu, .nav__item:focus-within > .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu a {
  display: block; padding: .55rem .7rem; border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
}
.nav__menu a:hover { background: var(--brand-50); color: var(--brand); }

.header-cta { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: background .15s; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, top .2s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1140px) {
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .nav {
    position: fixed; top: var(--drawer-top, var(--header-h));
    right: 0; bottom: 0; left: auto; width: min(360px, 88vw);
    background: var(--bg); border-left: 1px solid var(--line);
    padding: 1rem var(--gutter) 2.5rem; overflow-y: auto;
    transform: translateX(100%); visibility: hidden;
    transition: transform .26s ease, visibility .26s;
    box-shadow: var(--shadow-lg); margin-left: 0;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav__link { font-size: 1rem; padding: .8rem .6rem; justify-content: space-between; }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; margin: 0 0 .4rem .7rem; padding: 0 0 0 .4rem;
    display: none;
  }
  .nav__item.is-open > .nav__menu { display: block; }
  .nav__item.is-open .nav__caret { transform: rotate(180deg); }
  .nav__mobile-cta { display: grid; gap: .6rem; margin-top: 1.2rem; }
}
@media (min-width: 1141px) { .nav__mobile-cta { display: none; } }

.scrim { position: fixed; top: var(--drawer-top, 0); right: 0; bottom: 0; left: 0; background: rgba(4, 14, 36, .55); z-index: 50; opacity: 0; pointer-events: none; transition: opacity .24s; }
.scrim.is-on { opacity: 1; pointer-events: auto; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(104deg, rgba(0,18,44,.92) 0%, rgba(0,34,84,.78) 52%, rgba(0,62,130,.42) 100%);
}
.hero__inner { padding-block: clamp(40px, 8vw, 116px); max-width: 820px; }
.hero h1 { color: #fff; }
.hero p { color: rgba(255,255,255,.92); }
/* One tight paragraph, not a wall of text. Capped so the line length stays
   readable on a phone and the call to action stays near the fold. */
.hero .lead { max-width: 34ch; margin-top: .9rem; }
@media (min-width: 720px) { .hero .lead { max-width: 52ch; } }
.hero .eyebrow { color: #fff; background: rgba(255,255,255,.16); backdrop-filter: blur(4px); }

/* Two calls to action of equal width, side by side even on a small phone.
   Unequal buttons were the first thing that looked unfinished. */
.hero__cta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem; margin-top: 1.6rem; max-width: 420px;
}
.hero__cta .btn { width: 100%; padding-inline: .8rem; text-align: center; justify-content: center; }
@media (max-width: 359px) { .hero__cta { grid-template-columns: 1fr; } }

.hero__stats {
  list-style: none; margin: 2rem 0 0; padding: 1.5rem 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.4rem;
  border-top: 1px solid rgba(255,255,255,.22);
}
@media (min-width: 720px) { .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; } }
.hero__stat b {
  display: block; font-family: var(--font-head);
  font-size: clamp(1.1rem, .95rem + .55vw, 1.45rem); font-weight: 800;
  color: #fff; line-height: 1.15; white-space: nowrap;
}
.hero__stat span {
  display: block; margin-top: .15rem;
  font-size: .78rem; line-height: 1.35; color: rgba(255,255,255,.8);
}

.pagehead { position: relative; isolation: isolate; background: var(--navy); color: #fff; overflow: hidden; }
.pagehead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(900px 400px at 8% -20%, rgba(130,192,199,.38), transparent 62%),
              radial-gradient(700px 360px at 92% 120%, rgba(205,92,92,.3), transparent 60%);
}
.pagehead__inner { padding-block: clamp(42px, 6.5vw, 82px); max-width: 720px; }
.pagehead h1 { color: #fff; }
.pagehead p { color: rgba(255,255,255,.88); margin-top: .9rem; }
.pagehead .eyebrow { color: #fff; background: rgba(255,255,255,.16); }

.crumbs { font-size: .84rem; color: rgba(255,255,255,.72); margin-bottom: .9rem; }
.crumbs a { color: rgba(255,255,255,.88); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs span { padding-inline: .4rem; }

/* ---------- Cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-100); }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .95rem; }

.icon-badge {
  width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--brand-50); color: var(--brand);
}
.icon-badge svg { width: 24px; height: 24px; }
.icon-badge--accent { background: var(--accent-50); color: var(--accent); }

/* On a phone these cards were a full screen each: a 50px icon, a big gap, then
   two lines of text. Four of them meant scrolling past nothing. Below 560px the
   icon moves beside the text, which halves the height and reads faster. */
@media (max-width: 559px) {
  .grid-3 > .card, .grid-4 > .card {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: .9rem; row-gap: .15rem; align-items: start;
    padding: 1rem 1.1rem;
  }
  .grid-3 > .card > .icon-badge, .grid-4 > .card > .icon-badge {
    grid-row: 1 / span 2; width: 40px; height: 40px;
    border-radius: 11px; margin-bottom: 0;
  }
  .grid-3 > .card > .icon-badge svg, .grid-4 > .card > .icon-badge svg { width: 20px; height: 20px; }
  .grid-3 > .card > h3, .grid-4 > .card > h3 { margin: 0; font-size: 1.02rem; align-self: center; }
  .grid-3 > .card > p, .grid-4 > .card > p { margin: 0; font-size: .88rem; line-height: 1.5; }
  /* A card with no icon keeps a single column. */
  .grid-3 > .card:not(:has(.icon-badge)), .grid-4 > .card:not(:has(.icon-badge)) {
    display: block;
  }
}

/* Two across from 420px, so a phone shows four cards in two rows, not four. */
@media (min-width: 420px) and (max-width: 559px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 > .card {
    grid-template-columns: minmax(0, 1fr); row-gap: .5rem;
    padding: 1rem;
  }
  .grid-4 > .card > .icon-badge { grid-row: auto; }
}

/* Residence card */
.res-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.res-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.res-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); }
.res-card__media img { width: 100%; height: 100%; object-fit: cover; }
.res-card__tag { position: absolute; top: 12px; left: 12px; background: rgba(0,86,90,.92); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .7rem; border-radius: var(--r-pill); }
.res-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.res-card__body h3 { font-size: 1.18rem; }
.res-card__meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { font-size: .78rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: .22rem .6rem; border-radius: var(--r-pill); }
.chip--brand { color: var(--brand); background: var(--brand-50); border-color: var(--brand-100); }
.res-card__foot { margin-top: auto; padding-top: .4rem; }

/* Residence listing, keep each card's CTA on the same baseline */
.res-list .card { display: flex; flex-direction: column; }
.res-list .card > p:last-child { margin-top: auto; padding-top: .9rem; }
.res-list .res-card__meta { row-gap: .35rem; }

/* Amenity list */
.ticks { list-style: none; padding: 0; display: grid; gap: .6rem; }
.ticks li { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; }
.ticks li::before {
  content: ""; flex: none; width: 21px; height: 21px; margin-top: .18rem; border-radius: 50%;
  background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003888' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ticks--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Short items, so two columns fit on a phone and the list stops being a
   long vertical run. */
@media (max-width: 559px) {
  .ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .7rem; }
  .ticks--2 li { font-size: .83rem; line-height: 1.4; gap: .45rem; }
  .ticks--2 li::before { width: 17px; height: 17px; background-size: 10px; margin-top: .12rem; }
}

/* Numbered steps */
.steps { list-style: none; padding: 0; counter-reset: s; display: grid; gap: clamp(16px, 2vw, 22px); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 46px 1fr; gap: 1rem; align-items: start; }
.steps li::before {
  content: counter(s); grid-row: span 2;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  background: var(--brand); color: #fff;
}
.steps h4 { margin-bottom: .2rem; }
.steps p { font-size: .95rem; }
@media (max-width: 559px) {
  .steps { gap: 1rem; }
  .steps li { grid-template-columns: 34px 1fr; gap: .8rem; }
  .steps li::before { width: 34px; height: 34px; font-size: .92rem; }
  .steps h4 { font-size: 1rem; }
  .steps p { font-size: .88rem; line-height: 1.5; }
}

.muted-note { font-size: .88rem; color: var(--muted); }
.cta-band__note {
  margin-top: 1.4rem; font-size: .88rem;
  color: rgba(255,255,255,.78); max-width: 52ch; margin-inline: auto;
}
.cta-band__note a { color: #fff; font-weight: 600; }
.card--apply { align-self: start; }

/* Institution strip, names rather than third-party logos, so nothing can
   break and no one else's trademark is reproduced. */
/* A uniform grid, not centred flex-wrap. Flex-wrap left ragged rows of
   different widths on a phone, which read as a mistake. */
.inst-strip {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 460px; margin-inline: auto;
}
/* Column counts chosen so six institutions never leave one card stranded on a
   row of its own: 2 across on a phone, 3 on a tablet, all six on a desktop. */
@media (min-width: 600px) {
  .inst-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
}
@media (min-width: 1060px) {
  .inst-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: none; }
}
.inst {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  padding: .85rem .7rem; min-width: 0; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.inst:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.inst__abbr {
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  letter-spacing: -.01em; color: var(--brand); line-height: 1.15;
}
.inst__name { font-size: .72rem; line-height: 1.3; color: var(--muted); letter-spacing: .02em; }
/* A real logo, where the others are wordmarks.
   The plate is white in both themes on purpose: the Rosebank mark is navy on
   transparent, and on a dark card it would simply disappear. Partner logos
   normally sit on their own light plate for exactly this reason, so this reads
   as deliberate rather than as an accident of the colour scheme. */
.inst--logo { padding: .7rem .7rem .8rem; }
/* The shield, not the full lockup. The horizontal lockup is roughly 3:1, and
   in a tile this size its wording renders at about four pixels tall — present
   but unreadable, which looks like a smudge rather than a logo. The shield
   reads at 38px and the name is set in text beside the other institutions, so
   the tile keeps the shape of its neighbours. */
.inst__logo {
  display: block; width: auto; height: 38px; margin: 0 auto .35rem;
  object-fit: contain;
}
/* In dark mode the shield is navy on a navy card and all but disappears; only
   its gold reads. Partner marks normally sit on their own light plate, so it
   gets one here rather than being redrawn in a colour that is not theirs.
   Written after the rule above, not in the variables block at the top: at
   equal specificity the later rule is the one that wins. */
@media (prefers-color-scheme: dark) {
  .inst__logo {
    background: #fff; border-radius: 7px;
    padding: .25rem .45rem; box-sizing: content-box;
  }
}

.inst--accredited { border-color: var(--brand-100); background: var(--brand-50); }
.inst--accredited .inst__abbr { color: var(--brand-700); }
.inst__tag {
  font-size: .6rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: .1rem .38rem; border-radius: var(--r-pill);
  margin-top: .25rem;
}
@media (max-width: 480px) { .inst { padding: .7rem .5rem; } .inst__abbr { font-size: .92rem; } }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.gallery a { display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 1 / 1; background: var(--surface-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery a:hover img { transform: scale(1.06); }
.gallery:not(.gallery--preview) a:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* A three-photo taste of the residence; the full set lives on residence.html,
   where someone who wants to see everything has actually asked for it. These
   rules must sit AFTER the base gallery above, which is equally specific. */
.gallery--preview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gallery--preview a { aspect-ratio: 4 / 3; }
@media (min-width: 720px) { .gallery--preview { gap: 12px; } }
@media (max-width: 560px) { .gallery:not(.gallery--preview) a:nth-child(1) { grid-column: span 2; grid-row: auto; aspect-ratio: 4/3; } }

/* Split media */
.split { display: grid; gap: clamp(28px, 5vw, 62px); align-items: center; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.split__media img { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split--rev .split__media { order: 2; }
@media (max-width: 720px) { .split--rev .split__media { order: 0; } }

/* Accordion */
.acc { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden; }
.acc + .acc { margin-top: .7rem; }
.acc__btn {
  width: 100%; display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1.05rem 1.25rem; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink);
}
.acc__btn:hover { background: var(--surface); }
.acc__icon { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; transition: transform .2s ease; }
.acc__icon svg { width: 13px; height: 13px; }
.acc__btn[aria-expanded="true"] .acc__icon { transform: rotate(180deg); }
.acc__panel { padding: 0 1.25rem 1.25rem; font-size: .96rem; }
.acc__panel > * + * { margin-top: .8rem; }

/* Notice / callout */
.notice { border-left: 4px solid var(--brand); background: var(--brand-50); padding: 1.1rem 1.25rem; border-radius: 0 var(--r) var(--r) 0; font-size: .95rem; }
.notice--warn { border-left-color: var(--accent); background: var(--accent-50); }
.notice strong { color: var(--ink); }

/* Data list (banking details etc.) */
.dl { display: grid; gap: .1rem; }
.dl div { display: flex; flex-wrap: wrap; gap: .3rem 1rem; justify-content: space-between; padding: .7rem 0; border-bottom: 1px dashed var(--line); }
.dl div:last-child { border-bottom: 0; }
.dl dt { font-size: .9rem; color: var(--muted); }
.dl dd { margin: 0; font-family: var(--font-head); font-weight: 700; color: var(--ink); }

/* CTA band */
.cta-band { background: linear-gradient(135deg, var(--navy) 0%, #003888 100%); color: #fff; border-radius: var(--r-lg); padding: clamp(28px, 5vw, 56px); text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 300px at 15% 0%, rgba(255,255,255,.16), transparent 60%), radial-gradient(520px 300px at 88% 110%, rgba(248,140,0,.42), transparent 62%); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 58ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 1.7rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.15rem; }
.form__grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.field { display: grid; gap: .4rem; }
.field > label { font-family: var(--font-head); font-weight: 600; font-size: .88rem; color: var(--ink); }
.field .req { color: var(--accent); }
.field .hint { font-size: .8rem; color: var(--muted); }
/* Radios and checkboxes are excluded deliberately. Chromium clamps a radio to
   its intrinsic size and ignores these, but Safari honours width, padding and
   border, which stretched each radio to the full column and pushed its label
   out of the pill. */
.field input:not([type="radio"]):not([type="checkbox"]),
.field select, .field textarea {
  width: 100%; padding: .78rem .9rem;
  background: var(--bg); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.field input[type="radio"], .field input[type="checkbox"] {
  width: auto; min-width: 0; flex: none;
  padding: 0; border: 0; background: none; border-radius: 0;
  accent-color: var(--brand);
}
.field input:not([type="radio"]):not([type="checkbox"]):focus,
.field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring);
}
.field input[type="radio"]:focus-visible, .field input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input[type="file"] { padding: .55rem .6rem; background: var(--surface); }
.field--error input:not([type="radio"]):not([type="checkbox"]),
.field--error select, .field--error textarea { border-color: var(--accent); }
.field__err { font-size: .8rem; color: var(--accent); font-weight: 600; }
.radio-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.radio-row label {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer; font-size: .92rem; background: var(--bg);
  /* Do not let a flex row shrink the pill below its text. */
  flex: 0 0 auto; white-space: nowrap;
}
.radio-row input { accent-color: var(--brand); }

/* ---------- Choice lists and ratings ---------- */
/* A fieldset takes its min-width from its content, which forces the page wider
   than the phone. min-inline-size:0 is the fix; grid then wraps normally. */
.field--choice {
  border: 0; padding: 0; margin: 0; display: grid; gap: .55rem;
  min-inline-size: 0;
}
.field--choice legend {
  font-family: var(--font-head); font-weight: 600; font-size: .88rem;
  color: var(--ink); padding: 0; margin-bottom: .15rem;
}
.field--choice .req { color: var(--accent); }

.choice {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .7rem .85rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); cursor: pointer; font-size: .9rem; line-height: 1.45;
  transition: border-color .15s, background .15s;
}
.choice:hover { border-color: var(--soft); }
.choice input { accent-color: var(--brand); margin-top: .18rem; flex: none; }
.choice b { display: block; font-family: var(--font-head); color: var(--ink); }
/* A flex item defaults to min-width:auto, which refuses to wrap and pushes the
   card wider than the phone. Let the text shrink and wrap instead. */
.choice > span { flex: 1 1 auto; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--ring); }

.rating { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.rating label {
  display: grid; justify-items: center; gap: .1rem;
  padding: .65rem .3rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); cursor: pointer; transition: border-color .15s, background .15s;
}
.rating label:hover { border-color: var(--soft); }
/* Visually hidden, the star label is the control. The attribute selector keeps
   this ahead of the .field input[type=radio] reset above. */
.rating input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.rating label span {
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--ink);
}
.rating label small { font-size: .7rem; color: var(--muted); }
.rating label:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.rating label:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--ring); }

.check {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .88rem; color: var(--muted); line-height: 1.5; cursor: pointer;
}
.check input { accent-color: var(--brand); margin-top: .2rem; flex: none; }

.footer-legal { font-size: .8rem; color: #7590b4; }

.ticket {
  display: inline-block; margin-top: .5rem; padding: .3rem .7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; letter-spacing: .04em;
  background: rgba(255,255,255,.65); border-radius: var(--r-pill);
}
.radio-row label:has(input:checked) { border-color: var(--brand); background: var(--brand-50); color: var(--brand); font-weight: 600; }
.form__note { font-size: .85rem; color: var(--muted); }
.form-status { padding: .9rem 1.1rem; border-radius: var(--r-sm); font-size: .92rem; font-weight: 600; }
.form-status--ok { background: var(--brand-50); color: var(--brand-700); }
.form-status--err { background: var(--accent-50); color: var(--accent-600); }

/* ---------- Contact tiles ---------- */
.contact-tile { display: flex; gap: 1rem; align-items: flex-start; }
.contact-tile > div { min-width: 0; }
.contact-tile a { overflow-wrap: anywhere; }
.contact-tile .icon-badge { margin-bottom: 0; flex: none; width: 44px; height: 44px; border-radius: 12px; }
.contact-tile h4 { margin-bottom: .15rem; }
.contact-tile a { font-weight: 600; text-decoration: none; }
.contact-tile a:hover { text-decoration: underline; }
.contact-tile p { font-size: .9rem; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #b9c9e2; padding-block: clamp(44px, 6vw, 72px) 0; margin-top: auto; }
.site-footer h4 { color: #fff; font-family: var(--font-head); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1rem; }
.site-footer a { color: #b9c9e2; text-decoration: none; font-size: .93rem; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.footer-grid { display: grid; gap: clamp(28px, 4vw, 46px); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-brand { max-width: 34ch; }
.footer-brand p { font-size: .92rem; margin-top: 1rem; }
.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__sub { color: #8299bb; }
.socials { display: flex; gap: .6rem; margin-top: 1.3rem; }
.socials a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; transition: background .18s, transform .18s; }
.socials a:hover { background: var(--brand); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }
.newsletter { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.newsletter input[type="email"] { flex: 1 1 180px; padding: .75rem .9rem; border-radius: var(--r-pill); border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; }
.newsletter input[type="email"]::placeholder { color: #8299bb; }
.newsletter input[type="email"]:focus { outline: none; border-color: var(--soft); }
.footer-bottom {
  margin-top: clamp(32px, 4vw, 52px); padding-block: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; align-items: center;
  padding-bottom: 4.75rem;
  font-size: .85rem; color: #8299bb;
}

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 55;
  display: inline-flex; align-items: center; gap: .55rem;
  background: #25d366; color: #05231a; font-family: var(--font-head); font-weight: 700; font-size: .9rem;
  padding: .8rem 1.1rem; border-radius: var(--r-pill); text-decoration: none;
  box-shadow: 0 8px 24px rgba(5, 60, 40, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-float:hover { transform: translateY(-3px); color: #05231a; box-shadow: 0 12px 30px rgba(5,60,40,.4); }
.wa-float svg { width: 20px; height: 20px; }
@media (max-width: 520px) { .wa-float span { display: none; } .wa-float { padding: .9rem; } }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .93rem; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
th { font-family: var(--font-head); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- Utilities ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--brand); color: #fff; padding: .7rem 1.1rem; z-index: 200; border-radius: 0 0 var(--r-sm) 0; }
.skip-link:focus { left: 0; color: #fff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 2rem; }
.page { display: flex; flex-direction: column; min-height: 100vh; }

/* A tighter numbered list for sidebars, where the full-size markers are too
   heavy for the column width. */
.steps--compact { gap: .9rem; }
.steps--compact li { grid-template-columns: 30px 1fr; gap: .7rem; }
.steps--compact li::before { width: 30px; height: 30px; font-size: .85rem; }
.steps--compact h4 { font-size: .95rem; margin-bottom: .1rem; }
.steps--compact p { font-size: .85rem; line-height: 1.45; }

/* A sub-heading inside a long form, so a single form can be read as sections
   rather than as one unbroken wall of fields. */
.form__legend {
  font-size: 1.02rem;
  margin: 1.9rem 0 .2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.form > .form__legend:first-of-type { margin-top: .4rem; }
.form__legend + .hint { margin-bottom: 1rem; }

/* One repeating line in a list the person can grow, such as a supplies order.
   Item and quantity belong on one line: stacked, ten items become twenty
   fields and the list stops reading as a list. */
.line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  gap: .8rem;
  margin-bottom: .8rem;
  align-items: end;
}
.line-row .field { margin-bottom: 0; }
/* Only the first line is labelled on screen; repeating "Item / How many" down
   the page is noise. The labels stay in the markup for screen readers. */
.line-row:not(:first-child) label {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 380px) {
  .line-row { grid-template-columns: minmax(0, 1fr) 5rem; gap: .5rem; }
}

/* Running prose with sub-headings — the code of conduct is the long one. A
   heading that follows a list or a paragraph needs air above it, or the page
   reads as one undifferentiated block. */
.prose h3 { margin-top: 2rem; }
.prose h3:first-child { margin-top: 0; }
.prose > p, .prose > ul { margin-bottom: 1rem; }

/* A one-to-five rating row. Radios rather than a dropdown: the whole scale is
   visible and it is five taps on a phone instead of opening a select. The
   inputs are hidden and the label is the target, so the hit area is the whole
   box rather than a 16px circle. */
.rate {
  /* A fieldset carries a browser default border that reads as a stray box.
     Same reset as .field--choice. */
  border: 0; padding: 0; margin: 0 0 1.5rem; min-inline-size: 0;
}
.rate legend { font-weight: 600; font-size: .95rem; margin-bottom: .5rem; }
.rate__scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.rate__opt { margin: 0; }
/* Type-qualified on purpose: this hides the radio itself, and the source
   check is right to ask that any rule sizing an input says which input. */
.rate__opt input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate__opt span {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; border: 1.5px solid var(--line); border-radius: var(--r);
  font-weight: 700; font-size: 1.05rem; color: var(--muted);
  background: var(--surface); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.rate__opt span:hover { border-color: var(--brand-100); }
.rate__opt input[type="radio"]:checked + span {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.rate__opt input[type="radio"]:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.rate__ends {
  display: flex; justify-content: space-between;
  font-size: .8rem; color: var(--muted); margin: .4rem 0 0;
}

/* The rate card. A table of money, so it reads as a table on a screen wide
   enough and as stacked cards on a phone, where a five-column table is
   unreadable however small the type. */
.rates { display: grid; gap: 1rem; margin: 2rem 0 0; }
.rate-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); padding: 1.25rem 1.4rem;
  display: grid; gap: .75rem;
}
/* Two columns, not a wrapping flex row: with a long room name the chip used
   to wrap and carry the price down with it, so two cards side by side had
   their prices at different heights. */
.rate-card__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1rem; align-items: start; }
.rate-card__id { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; min-width: 0; }
.rate-card__type { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; margin: 0; }
.rate-card__price { text-align: right; }
.rate-card__amount { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--brand); }
.rate-card__period { display: block; font-size: .82rem; color: var(--muted); }
.rate-card__ask { font-weight: 700; color: var(--accent); }
.rate-card__desc { font-size: .95rem; margin: 0; color: var(--ink-2); }
.rate-card__extras { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .88rem; color: var(--ink-2); }
.rate-card__extras b { color: var(--ink); }
.rate-card__includes { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.rate-card__includes li { font-size: .9rem; padding-left: 1.4rem; position: relative; }
.rate-card__includes li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
}
.rate-note { font-size: .9rem; color: var(--muted); margin: 1rem 0 0; }
@media (min-width: 720px) {
  .rates { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

/* ---------- Student sign in, visible in the header on every screen ---------- */
.header-signin--mobile { display: none; }
@media (max-width: 1140px) {
  .header-signin--mobile { display: inline-flex; margin-left: auto; flex: none; padding: .5rem .9rem; }
  .site-header .nav-toggle { margin-left: .5rem; }
}

/* ---------- Header fits on laptop screens (menu, sign in and request on one line) ---------- */
@media (min-width: 1141px) {
  .site-header .wrap { max-width: 1320px; }
  .site-header__inner { gap: 10px; }
  .site-header .brand__logo { height: 48px; }
  .site-header .nav__link { font-size: .84rem; padding: .5rem .42rem; }
  .header-cta { gap: .4rem; }
  .header-cta .btn { font-size: .82rem; padding: .5rem .85rem; }
}
@media (min-width: 1141px) and (max-width: 1280px) {
  .site-header .wrap { padding-inline: 20px; }
  .site-header .nav__link { font-size: .8rem; padding: .45rem .34rem; }
}
@media (min-width: 1141px) and (max-width: 1200px) {
  .site-header .nav__link { padding: .45rem .3rem; }
  .header-cta .btn { padding: .5rem .7rem; }
}