/* Partner resource sites: one stylesheet for every school and every page.
   Each page sets five school colours in its own <head>; nothing else changes per school.

   House rules (Talya, 6 Oct 2026):
   - A box has the same border on all four sides. No accent edge on one side, no offset shadow
     that reads as a border on two sides.
   - The banner is a short statement, not a paragraph.
   - No prices, no selling. */

@font-face { font-family: "AvertaPE"; src: url("/asset/fonts/AvertaPE-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "AvertaPE"; src: url("/asset/fonts/AvertaPE-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "AvertaPE"; src: url("/asset/fonts/AvertaPE-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Defaults. Each page overrides these five with the school's own colours. */
  --school: #255c4e;
  --school-deep: #1a4439;
  --accent: #6fc5e8;
  --tint: #eef5f2;
  --tint-2: #e8f5fb;

  --ink: #1b2126;
  --body: #414a52;
  --muted: #66707a;
  --line: #d6dbe1;
  --radius: 14px;
  --border: 1.5px solid var(--line);
  --lift: 0 10px 26px rgba(16, 24, 40, .09);
  --font: "AvertaPE", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--body); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--school); text-underline-offset: 3px; }
a:hover { color: var(--school-deep); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { color: var(--ink); font-weight: 700; margin: 0; text-wrap: balance; }
p { margin: 0 0 14px; text-wrap: pretty; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.stripe { height: 5px; background: linear-gradient(90deg, var(--school) 0 62%, var(--accent) 62% 100%); }
.eyebrow { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--school); margin: 0 0 14px; }

/* Every box: the same border all the way round */
.card { background: #fff; border: var(--border); border-radius: var(--radius); }
a.card { text-decoration: none; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.card:hover { border-color: var(--school); box-shadow: var(--lift); transform: translateY(-2px); color: var(--ink); }

/* Header */
.top { background: #fff; box-shadow: 0 1px 0 rgba(16, 24, 40, .08), 0 6px 18px rgba(16, 24, 40, .04); position: relative; z-index: 2; }
.top .wrap { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.top .logo { display: block; line-height: 0; }
.top .logo img { display: block; height: 48px; width: auto; max-width: 250px; object-fit: contain; }
.top nav { margin-left: auto; display: flex; gap: 26px; }
.top nav a { color: var(--ink); text-decoration: none; font-size: 15.5px; font-weight: 600; padding: 6px 0; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--school); }
.top nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 8px; border: 1.5px solid var(--school); background: var(--school); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.btn:hover { background: var(--school-deep); border-color: var(--school-deep); color: #fff; box-shadow: var(--lift); }
.btn--big { padding: 17px 28px; font-size: 17.5px; }
.btn--small { padding: 11px 18px; font-size: 15px; }
.btn--ghost { background: #fff; color: var(--school); }
.btn--ghost:hover { background: var(--school); border-color: var(--school); color: #fff; }
.arrow { display: inline-block; transition: transform .15s ease; }
a:hover .arrow { transform: translateX(3px); }

/* Home banner: a statement, not a paragraph */
.hero { background: var(--tint); }
.hero .wrap { display: grid; grid-template-columns: 1.22fr .78fr; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 76px; }
.hero h1 { font-size: 56px; line-height: 1.04; letter-spacing: -.026em; margin-bottom: 22px; text-wrap: wrap; }
.hero h1 span { display: block; color: var(--school); }
.hero .say { margin: 0 0 30px; }
.hero .say p { margin: 0; font-size: 21px; line-height: 1.45; color: var(--ink); }
.hero .say p + p { color: var(--body); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.hero-cta .text-link { font-weight: 600; text-decoration: none; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none; margin: 30px 0 0; padding: 0; }
.facts li { background: #fff; border: var(--border); border-radius: 999px; padding: 6px 14px; font-size: 14.5px; font-weight: 600; color: var(--ink); }

/* Banner picture: a resume drawn in the school colours. Decoration only. */
.mock { background: #fff; border: var(--border); border-radius: 18px; padding: 22px 24px 24px; box-shadow: var(--lift); }
.mock-dots { display: flex; gap: 6px; margin-bottom: 18px; }
.mock-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d3d8dd; }
.mock-page { border: var(--border); border-radius: 10px; padding: 20px 20px 18px; }
.mock-name { height: 13px; width: 46%; border-radius: 4px; background: var(--school); margin-bottom: 8px; }
.mock-role { height: 8px; width: 30%; border-radius: 4px; background: var(--accent); margin-bottom: 18px; }
.mock-rule { height: 1.5px; background: var(--line); margin: 0 0 14px; }
.mock-h { height: 8px; width: 24%; border-radius: 4px; background: #9aa5ad; margin: 0 0 10px; }
.mock-l { height: 7px; border-radius: 4px; background: #e4e8ec; margin: 0 0 8px; }
.mock-l.w90 { width: 90%; } .mock-l.w75 { width: 75%; } .mock-l.w82 { width: 82%; } .mock-l.w60 { width: 60%; }
.mock-gap { height: 10px; }
.mock-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.chip { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1.5px solid var(--tint); background: var(--tint); color: var(--school); }
.chip--solid { background: var(--school); border-color: var(--school); color: #fff; margin-left: auto; }

/* Inner-page banner */
.pagehead { background: var(--tint); }
.pagehead .wrap { padding-top: 54px; padding-bottom: 58px; }
.pagehead h1 { font-size: 48px; line-height: 1.06; letter-spacing: -.022em; margin-bottom: 14px; }
.pagehead h1 span { color: var(--school); }
.pagehead p { font-size: 20px; line-height: 1.45; color: var(--ink); margin: 0; max-width: 36em; }
.pagehead p.crumbs { font-size: 14.5px; line-height: 1.5; font-weight: 600; color: var(--muted); margin: 0 0 20px; }
.crumbs a { text-decoration: none; }
.crumbs span { color: var(--muted); margin: 0 6px; }

/* Sections */
.band { padding: 76px 0 80px; }
.band--tight { padding: 60px 0 64px; }
.band--tint { background: var(--tint); }
.band--tint2 { background: var(--tint-2); }
.band h2 { font-size: 35px; line-height: 1.14; letter-spacing: -.016em; margin-bottom: 14px; max-width: 26em; }
.band p.intro { font-size: 18px; max-width: 40em; margin-bottom: 0; }

/* Template fields */
.fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 36px 0 30px; }
.fields--all { margin-bottom: 0; }
a.field { display: flex; align-items: center; gap: 14px; padding: 18px 18px 18px 20px; }
.field-ico { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; color: var(--school); }
.field-ico svg { width: 20px; height: 20px; }
.field-name { display: block; font-size: 17.5px; font-weight: 700; line-height: 1.25; }
.field-count { display: block; font-size: 14.5px; color: var(--muted); }
.field .arrow { margin-left: auto; color: var(--school); font-weight: 700; }
a.field--slim { padding: 14px 16px 14px 18px; }
.field--slim .field-name { font-size: 16.5px; }

/* Steps */
.steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 38px 0 0; padding: 0; }
.steps li { counter-increment: s; padding: 26px 24px 24px; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--school); color: #fff; font-weight: 700; font-size: 17px; margin-bottom: 16px; }
.steps h3 { font-size: 20px; line-height: 1.25; margin-bottom: 8px; }
.steps p { margin: 0; font-size: 16.5px; }

/* Career advice */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.split .btn { margin-top: 24px; }
.articles { display: grid; gap: 12px; }
.articles--two { grid-template-columns: repeat(2, 1fr); }
.articles--two > :last-child:nth-child(odd) { grid-column: 1 / -1; }
a.article { display: flex; align-items: center; gap: 14px; padding: 18px 20px; font-weight: 600; font-size: 17px; line-height: 1.35; }
a.article .arrow { margin-left: auto; color: var(--school); font-weight: 700; }
.topic { margin-top: 54px; }
.topic:first-of-type { margin-top: 0; }
.topic h2 { font-size: 28px; margin-bottom: 6px; }
.topic .count { font-size: 15px; color: var(--muted); margin: 0 0 20px; }
.jump { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 26px 0 0; padding: 0; }
.jump a { display: inline-block; background: #fff; border: var(--border); border-radius: 999px; padding: 7px 16px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.jump a:hover { border-color: var(--school); color: var(--school); }

/* Back to the school */
.school { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.school-links { display: grid; gap: 14px; }
a.school-link { display: block; padding: 22px 24px; }
.school-link b { display: block; font-size: 18.5px; line-height: 1.3; }
.school-link .what { display: block; font-size: 15.5px; color: var(--muted); margin-top: 4px; }
.school-link .where { display: block; font-size: 14.5px; font-weight: 600; color: var(--school); margin-top: 10px; }

/* The school's own career services page */
.offices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.offices--one { grid-template-columns: minmax(0, 720px); }
.office { padding: 30px 30px 28px; }
.office h2 { font-size: 26px; line-height: 1.2; margin-bottom: 6px; max-width: none; }
.office .for { font-size: 15.5px; color: var(--muted); margin: 0 0 18px; }
.office ul { list-style: none; margin: 0 0 20px; padding: 0; }
.office li { position: relative; padding: 0 0 9px 28px; font-size: 16.5px; line-height: 1.5; color: var(--body); }
.office li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 15px; height: 9px; border-left: 2.5px solid var(--school); border-bottom: 2.5px solid var(--school); transform: rotate(-45deg) scale(.8); }
.office dl { margin: 0 0 22px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 16px; }
.office dt { color: var(--muted); }
.office dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.source-note { font-size: 14.5px; color: var(--muted); margin: 26px 0 0; max-width: 52em; }

/* Two plain link boxes (used under several pages) */
.pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
a.pair-link { display: flex; align-items: center; gap: 12px; padding: 20px 22px; font-weight: 600; font-size: 17.5px; }
a.pair-link small { display: block; font-size: 14.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
a.pair-link .arrow { margin-left: auto; color: var(--school); font-weight: 700; }

/* More from Resume Target */
.more { padding: 60px 0 64px; }
.more h2 { font-size: 28px; line-height: 1.2; margin-bottom: 8px; }
.more p.intro { font-size: 17px; margin: 0 0 22px; max-width: 42em; }
.samples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
a.sample { display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-weight: 600; font-size: 16.5px; }
a.sample .arrow { margin-left: auto; color: var(--school); font-weight: 700; }

/* Footer */
.foot { background: var(--school-deep); color: rgba(255, 255, 255, .88); padding: 36px 0 34px; font-size: 15px; }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.foot .rt { background: #fff; border-radius: 8px; padding: 8px 12px; line-height: 0; }
.foot .rt img { height: 26px; width: auto; display: block; }
.foot p { margin: 0; max-width: 46em; }
.foot a { color: #fff; }
.foot nav { margin-left: auto; display: flex; gap: 22px; }
.foot nav a { text-decoration: none; font-weight: 600; }
.foot nav a:hover { text-decoration: underline; }

/* Preview aids. Not part of the page. */

@media (max-width: 960px) {
  .top nav { display: none; }
  .top .btn { margin-left: auto; }
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; padding-top: 50px; padding-bottom: 56px; }
  .hero h1 { font-size: 46px; }
  .mock { max-width: 460px; }
  .pagehead h1 { font-size: 40px; }
  .fields, .samples { grid-template-columns: repeat(2, 1fr); }
  .split, .school { grid-template-columns: 1fr; gap: 32px; }
  .offices { grid-template-columns: 1fr; }
  .band { padding: 56px 0 60px; }
  .band h2 { font-size: 30px; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 18px; }
  .top .wrap { min-height: 66px; gap: 14px; }
  .top .logo img { height: 38px; max-width: 150px; }
  .hero h1 { font-size: 38px; }
  .hero .say p { font-size: 19px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero-cta .btn { justify-content: center; }
  .hero-cta .text-link { text-align: center; }
  .mock { display: none; }
  .pagehead .wrap { padding-top: 38px; padding-bottom: 42px; }
  .pagehead h1 { font-size: 33px; }
  .pagehead p { font-size: 18px; }
  .fields, .samples { grid-template-columns: 1fr; gap: 10px; }
  a.field { padding: 13px 16px; }
  .field-ico { flex-basis: 36px; height: 36px; }
  .steps { grid-template-columns: 1fr; }
  .articles--two, .pair { grid-template-columns: 1fr; }
  .office { padding: 24px 20px 22px; }
  .band h2 { font-size: 27px; }
  .topic h2 { font-size: 24px; }
  .foot nav { margin-left: 0; }
}

/* A long school name: slightly smaller, so the statement still sits on two lines */
@media (min-width: 961px) { .hero--long h1 { font-size: 48px; } }

/* The small line above the banner statement is part of the main heading, so the heading names the
   partner in full. These lines keep it looking exactly as it did when it sat outside the heading. */
.hero h1 .eyebrow { line-height: 1.65; letter-spacing: .12em; }

/* Keyboard and screen reader users can jump past the menu. Hidden until it has focus. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 10; background: #fff; color: var(--ink); font-weight: 600; padding: 10px 16px; border: var(--border); border-radius: 8px; }
.skip:focus { left: 12px; top: 12px; }