/* /summer-jobs: the design mockup "Careers - Summer Opportunities" (Oct 2026), its colours, sizes and spacing (corners square, as the site), set
   in the site's own typeface (Marr Sans) so the page belongs to the site. Markup: src/lib/templates/designs/summer-jobs.js.
   The snapshot CSS sets li margins and p sizes on every page (docs/design-refresh.md §3), so lists and paragraphs here
   say their own. */
.sj-page {
  --sj-navy: #0E2A47; --sj-ink: #1B2533; --sj-body: #3A4657; --sj-muted: #5A6575; --sj-accent: #1F5FA8;
  --sj-tint: #F3F7F7; --sj-line: #E3E8EF; --sj-line-2: #C5D0DD; --sj-amber: #FFF1D6; --sj-amber-ink: #7A4A00; --sj-amber-deep: #5C3A00;
  --sj-gold: #F5C46B; --sj-on-dark: #DCE5F0;
  --sj-base: #F3F7F7; /* the site's page colour: the bar, the in-page menu and the hero read as one block, as on the home page */
  margin-top: var(--nav-h); font-family: Marrsans Web, Arial, sans-serif; color: var(--sj-ink); line-height: 1.55; background: var(--sj-base);
}
.sj-page *, .sj-page *::before, .sj-page *::after { box-sizing: border-box; }
.sj-page p, .sj-page li { font-size: inherit; line-height: inherit; letter-spacing: normal; }
.sj-page li { margin: 0; }
.sj-page h1, .sj-page h2, .sj-page h3, .sj-page h4 { font-family: inherit; font-weight: 700; margin: 0; }
.sj-page a { color: var(--sj-navy); }
.sj-page a:hover { color: #1F4E85; }
.sj-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sj-container.is-narrow { max-width: 900px; }

/* In-page menu, sticky under the site's bar */
/* In-page menu: always the site's page colour. Flat at the very top (bar, menu and hero open as one block); as soon as the
   page scrolls and content passes under it, it lifts with a soft shadow (.is-stuck). Its label says what it is; the
   section on screen is marked. */
.sj-menu { --sj-menu-bg: var(--sj-base); position: sticky; top: var(--nav-h); z-index: 20; background: var(--sj-menu-bg); transition: box-shadow .25s; }
.sj-menu.is-stuck { box-shadow: 0 6px 18px -8px rgba(14, 42, 71, .22); }
/* Scrolling down (html.sj-bar-hidden, set by the page script) slides the site bar up out of view and the menu sticks to
   the top of the window instead of under the bar; a quick scroll up, or the top of the page, brings the bar back. The
   menu changes where it sticks rather than being shifted, so no gap opens above the hero. */
.navbar { transition: transform .25s ease; }
html.sj-bar-hidden .navbar { transform: translateY(-100%); }
.sj-menu { transition: box-shadow .25s, top .25s ease; }
html.sj-bar-hidden .sj-menu { top: 0; }
.sj-menu_inner { display: flex; align-items: center; gap: 32px; min-height: 60px; }
.sj-menu_title { flex: none; font-size: 17px; font-weight: 700; color: var(--sj-navy) !important; text-decoration: none; letter-spacing: -.2px; }
.sj-menu_links { display: flex; align-items: stretch; gap: 26px; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; margin-left: auto; }
.sj-menu_links::-webkit-scrollbar { display: none; }
.sj-menu_link { position: relative; display: inline-flex; align-items: center; min-height: 60px; text-decoration: none; color: var(--sj-muted) !important; font-size: 15px; font-weight: 500; transition: color .15s; }
.sj-menu_link:hover { color: var(--sj-navy) !important; }
.sj-menu_link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sj-accent); transform: scaleX(0); transition: transform .2s; }
.sj-menu_link[aria-current] { color: var(--sj-navy) !important; font-weight: 600; }
.sj-menu_link[aria-current]::after { transform: scaleX(1); }
.sj-menu .sj-btn { flex: none; }
.sj-page section[id] { scroll-margin-top: calc(var(--nav-h) + 72px); }

/* Buttons */
.sj-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 26px; font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; text-align: center; transition: background-color .15s, color .15s; }
.sj-btn.is-primary { background: var(--sj-accent); color: #fff !important; border: 1.5px solid var(--sj-accent); }
.sj-btn.is-primary:hover { background: #184C87; border-color: #184C87; }
.sj-btn.is-outline { background: #fff; color: var(--sj-navy) !important; border: 1.5px solid var(--sj-navy); }
.sj-btn.is-outline:hover { background: var(--sj-tint); }
.sj-btn.is-small { min-height: 44px; padding: 10px 20px; font-size: 15px; }
.sj-btn.is-block { width: 100%; }
.sj-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* Hero */
.sj-hero { background: var(--sj-base); }
.sj-hero_inner { padding-top: 72px; padding-bottom: 80px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.sj-hero_text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.sj-pill { align-self: flex-start; background: var(--sj-amber); color: var(--sj-amber-ink); font-weight: 600; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 14px; }
.sj-hero_heading { font-size: 54px; line-height: 1.08; letter-spacing: -1.5px; color: var(--sj-navy); }
.sj-hero_lead { font-size: 19px !important; color: var(--sj-body); max-width: 560px; margin: 0; }
.sj-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 14px; font-size: 14px; color: var(--sj-body); }
.sj-stats > div { display: flex; flex-direction: column; }
.sj-stat { font-size: 26px; font-weight: 700; color: var(--sj-navy); line-height: 1.3; }
.sj-hero { position: relative; overflow: hidden; }
/* The site's burst (as behind the campus heroes, public/refresh/burst-turquoise.svg) radiating from behind the photo */
.sj-hero_photos { flex: 1 1 420px; min-width: 0; position: relative; }
.sj-hero_photos::before { content: ""; position: absolute; left: 50%; top: 50%; width: 175%; aspect-ratio: 802 / 768; transform: translate(-50%, -50%); background: url(/refresh/burst-turquoise.svg) 50% / contain no-repeat; pointer-events: none; z-index: 0; }
.sj-hero_photos .sj-photo { position: relative; z-index: 1; }
.sj-hero_text { position: relative; z-index: 1; }
/* One photo, shown whole: the frame keeps the hero photo's own proportions (2147 x 2001) so nothing moves while it loads; a
   replacement photo of another shape is trimmed slightly rather than stretched. */
.sj-photo { aspect-ratio: 2147 / 2001; background: #D6E0EC; overflow: hidden; }
.sj-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sections, headings */
/* Below the hero the sections alternate white and the base colour, with the navy band and the amber call to action as
   the accents (the home page's rhythm). Cards are tinted on white sections and white on base-coloured ones. */
.sj-section { padding: 80px 0; background: #fff; }
.sj-section.is-roles, .sj-section.is-pay, .sj-section.is-faq { background: var(--sj-base); }
.is-pay .sj-pay_table, .is-pay .sj-card { background: #fff; }
.sj-eyebrow { margin: 0 0 8px; color: var(--sj-accent); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px !important; }
.sj-eyebrow.is-gold { color: var(--sj-gold); }
.sj-h2 { font-size: 38px; line-height: 1.2; letter-spacing: -1px; color: var(--sj-navy); margin: 0 0 12px !important; }
.sj-h2.is-light { color: #fff; font-size: 34px; letter-spacing: -.8px; margin-bottom: 18px !important; }
.sj-h2.is-center { text-align: center; margin-bottom: 24px !important; }
.sj-h2.is-cta { font-size: 42px; margin: 0 !important; }
.sj-h3 { font-size: 22px; line-height: 1.3; color: var(--sj-navy); margin: 0 0 10px !important; }
.sj-h3.is-small { font-size: 20px; }
.sj-lead { margin: 0 0 36px; font-size: 18px; color: var(--sj-body); max-width: 780px; }
.sj-lead p { margin: 0; font-size: 18px; }
.is-roles .sj-lead { margin-bottom: 28px; max-width: 820px; }
.is-when .sj-lead { margin-bottom: 28px; }

/* Grids and cards */
.sj-grid { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.sj-grid.is-why { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sj-grid.is-campuses { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.sj-grid.is-two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 40px; }
.sj-grid.is-steps { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.sj-card { background: var(--sj-tint); padding: 30px; display: flex; flex-direction: column; gap: 12px; color: var(--sj-body); }
.sj-card p { margin: 0; }
.sj-card.is-flat { display: block; }
.sj-card.is-outline { display: block; background: #fff; border: 1px solid var(--sj-line); padding: 28px; margin-top: 24px; }
.sj-card_title { font-size: 21px; color: var(--sj-navy); }
.sj-icon { color: var(--sj-navy); }
.sj-prose p { margin: 0 0 12px; }
.sj-prose p:last-child { margin-bottom: 0; }
.sj-prose ul, .sj-prose ol { margin: 0 0 12px; padding-left: 22px; }

/* Role tabs */
.sj-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.sj-tab { min-height: 44px; padding: 10px 20px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; background: #fff; color: var(--sj-navy); border: 1.5px solid var(--sj-line-2); }
.sj-tab:hover { border-color: var(--sj-navy); }
.sj-tab[aria-selected="true"] { background: var(--sj-navy); color: #fff; border-color: var(--sj-navy); }
.sj-tab:focus-visible, .sj-faq_btn:focus-visible, .sj-btn:focus-visible { outline: 3px solid var(--sj-accent); outline-offset: 2px; }
.sj-role { border: 1px solid var(--sj-line); padding: 40px; display: flex; flex-wrap: wrap; gap: 40px; background: #fff; }
.sj-role + .sj-role { margin-top: 24px; }
.is-js .sj-role + .sj-role { margin-top: 0; }
.is-js [data-sj-hidden] { display: none !important; }
.sj-role_main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sj-role_title { font-size: 30px; line-height: 1.2; letter-spacing: -.5px; color: var(--sj-navy); }
.sj-role_sub { margin: 0; color: var(--sj-muted); font-size: 15px !important; }
.sj-role_sub em { font-style: normal; }
.sj-role_desc p { margin: 0 0 10px; font-size: 17px; color: var(--sj-body); }
.sj-role_desc p:last-child { margin-bottom: 0; }
.sj-role_label { margin-top: 12px !important; font-size: 16px; color: var(--sj-navy); text-transform: uppercase; letter-spacing: 1px; }
.sj-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--sj-ink); }
.sj-list.is-light { color: var(--sj-on-dark); font-size: 17px; gap: 10px; }
.sj-role_side { flex: 1 1 260px; min-width: 0; background: var(--sj-tint); padding: 26px; display: flex; flex-direction: column; gap: 18px; align-self: flex-start; }
.sj-k { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--sj-muted); }
.sj-v { font-weight: 600; color: var(--sj-navy); }
.sj-v.is-big { font-size: 24px; font-weight: 700; }
.sj-v.is-plain { font-weight: 400; color: var(--sj-ink); }

/* Who we're looking for */
.sj-dark { background: var(--sj-navy); color: #fff; }
.sj-dark_inner { padding-top: 80px; padding-bottom: 80px; display: flex; flex-wrap: wrap; gap: 48px; }
.sj-dark_col { flex: 1 1 440px; min-width: 0; }
.sj-dark_card { flex: 1 1 440px; min-width: 0; background: #fff; color: var(--sj-ink); padding: 34px; }
.sj-dark_card .sj-h3 { font-size: 24px; margin-bottom: 14px !important; }
.sj-note { margin: 18px 0 0; color: var(--sj-body); font-size: 15px !important; }

/* Campus tiles */
.sj-campus { border: 1px solid var(--sj-line); padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; }
.sj-campus_city { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--sj-muted); }
.sj-campus_name { font-weight: 600; color: var(--sj-navy); font-size: 17px; }

/* Pay */
.sj-pay { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
.sj-pay_table { flex: 1 1 380px; min-width: 0; border: 1px solid var(--sj-line); overflow: hidden; align-self: flex-start; }
.sj-pay_row { display: flex; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--sj-line); }
.sj-pay_row:last-child { border-bottom: 0; }
.sj-pay_row > span:first-child { font-weight: 600; }
.sj-pay_amount { font-weight: 700; color: var(--sj-navy); text-align: right; }
.sj-pay_provided { flex: 1 1 420px; min-width: 0; padding: 28px; }

/* Hiring steps */
.sj-step { background: var(--sj-tint); padding: 24px; }
.sj-step_n { width: 36px; height: 36px; background: var(--sj-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 12px; }
.sj-step_title { font-size: 18px; color: var(--sj-navy); margin: 0 0 6px !important; }
.sj-step p { margin: 0; color: var(--sj-body); font-size: 15px !important; }
.sj-after { margin: 28px 0 0; font-size: 17px !important; color: var(--sj-body); max-width: 860px; }
.sj-after + .sj-after { margin-top: 14px; }
.sj-after strong { color: var(--sj-navy); }

/* Call to action */
.sj-section.is-apply { padding-bottom: 40px; }
.sj-cta-wrap { background: #fff; padding-bottom: 80px; }
.sj-cta { background: var(--sj-amber); padding: 56px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.sj-cta_label { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sj-amber-ink); }
.sj-cta_note { font-size: 14px; color: var(--sj-amber-deep); }

/* FAQ */
.sj-faq { display: flex; flex-direction: column; gap: 12px; }
.sj-faq_item { border: 1px solid var(--sj-line); background: #fff; }
.sj-faq_q { font-size: inherit; }
.sj-faq_btn { width: 100%; min-height: 56px; background: none; border: 0; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: inherit; font-size: 17px; font-weight: 600; color: var(--sj-navy); text-align: left; cursor: pointer; }
.sj-faq_chev { flex-shrink: 0; transition: transform .2s; }
.sj-faq_btn[aria-expanded="true"] .sj-faq_chev { transform: rotate(180deg); }
.sj-faq_a { padding: 0 22px 20px; color: var(--sj-body); }
.sj-faq_more { margin: 28px 0 0; text-align: center; color: var(--sj-body); }

/* Equal opportunity */
.sj-eeo { background: #fff; padding: 40px 0; }
.sj-eeo_heading { font-size: 15px; color: var(--sj-navy); margin-bottom: 6px !important; }
.sj-eeo_text p { margin: 0; font-size: 14px !important; font-style: italic; color: var(--sj-body); max-width: 900px; }

/* Square corners throughout, as the site's design system (buttons, photos, cards); Liam, 12 Oct 2026 */
.sj-page, .sj-page * { border-radius: 0; }

/* Tablet and phone: the mockup's sizes stepped down */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .sj-hero_heading { font-size: 46px; letter-spacing: -1.2px; }
}
@media screen and (max-width: 991px) {
  .sj-hero_heading { font-size: 44px; }
  .sj-h2 { font-size: 32px; }
  .sj-h2.is-cta { font-size: 34px; }
  .sj-section { padding: 64px 0; }
}
@media screen and (max-width: 767px) {
  .sj-hero_inner { padding-top: 48px; padding-bottom: 56px; gap: 32px; }
  .sj-hero_heading { font-size: 36px; letter-spacing: -1px; }
  .sj-hero_lead { font-size: 17px !important; }
  .sj-hero_photos { flex-basis: 100%; }
  .sj-hero_photos::before { width: 150%; }
  .sj-h2, .sj-h2.is-light { font-size: 28px; letter-spacing: -.5px; }
  .sj-h2.is-cta { font-size: 30px; }
  .sj-section { padding: 56px 0; }
  .sj-section.is-apply { padding-bottom: 32px; }
  .sj-cta-wrap { padding-bottom: 56px; }
  .sj-grid.is-why, .sj-grid.is-two, .sj-grid.is-campuses { grid-template-columns: minmax(0, 1fr); }
  .sj-grid.is-two { margin-top: 28px; }
  .sj-role { padding: 24px; gap: 24px; }
  .sj-role_title { font-size: 24px; }
  .sj-dark_inner { padding-top: 56px; padding-bottom: 56px; gap: 32px; }
  .sj-dark_card { padding: 24px; }
  .sj-pay_row { padding: 16px 18px; }
  .sj-cta { padding: 40px 20px; }
  .sj-menu_inner { gap: 0; min-height: 52px; padding-right: 0; }
  .sj-menu_title, .sj-menu .sj-btn { display: none; }
  .sj-menu_links { margin-left: 0; gap: 22px; flex: 1; padding-right: 40px; }
  .sj-menu_link { min-height: 52px; }
  /* the menu scrolls sideways on phones: a fade at the right edge shows there is more, and the last link can scroll clear of it */
  .sj-menu::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; background: linear-gradient(to right, transparent, var(--sj-menu-bg)); pointer-events: none; }
}

/* This is the staff page: the site bar's "Apply Now" (the student application, nav.html .nav-right) is hidden here only;
   the bar's menus and the footer stay as on every page. The page's own buttons lead to the staff application. This file
   loads on /summer-jobs alone. */
.nav-right a.button[href^="https://apply.joinoutset.com/start"] { display: none !important; }