/* Figma: Corpus Data Hub / Foundation / Typography, node 7:124.
   Inter Body 16/26; Body small 14/22; Label 14/20; Button/Nav 16/24;
   Lead 20/32 desktop, 18/28 tablet/mobile; Eyebrow 12/16.
   Load after component styles so responsive rules never shrink reading text.
   The requested hero Display variant uses 5rem / 600 on desktop. */
:root {
  --type-body-size: 1rem;
  --type-body-line: 1.625rem;
  --type-small-size: .875rem;
  --type-small-line: 1.375rem;
  --type-label-size: .875rem;
  --type-label-line: 1.25rem;
  --type-control-size: 1rem;
  --type-control-line: 1.5rem;
  --type-eyebrow-size: .75rem;
  --type-eyebrow-line: 1rem;
  --type-lead-size: 1.125rem;
  --type-lead-line: 1.75rem;
}

body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

/* Reading copy and strong body text. */
:is(
  .section-heading > p, .course-body > p, .course-guidance > p,
  .placement-followup > p, .stories-intro, .photo-copy p,
  .learning-mentorship > p, .learning-project > p,
  .curriculum-panel > div > p:not(.section-label), .curriculum-path p,
  .tutor-card p:not(.micro-label), .career-top > div > p:not(.section-label),
  .career-services p, .about-statement > p,
  .faq-intro > p:not(.section-label),
  .faq-answer, .final-cta p:not(.eyebrow), .footer-top > div > p,
  .detail-body > p:not(.section-label), .detail-body ul, .form-intro,
  .form-complete > p:not(.section-label), .enquiry-steps li,
  .enquiry-summary dd, .placement-journey dd, .curriculum-path strong,
  .stories .testimonial-person strong, .video-student-overlay strong,
  .benefit-badges > a > span:not(.badge-arrow)
) {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: 0;
}

:is(.curriculum-path strong, .placement-journey dd,
  .stories .testimonial-person strong, .video-student-overlay strong,
  .benefit-badges > a > span:not(.badge-arrow)) {
  font-weight: 600;
}

/* Supporting information remains readable at every breakpoint. */
:is(
  .benefit-badges small, .review-count, .stories-summary > div > p,
  .stories-rating > strong > span, .initial-avatar,
  .stories .testimonial-person p, .stories .story-topic,
  .video-student-overlay small, .placement-company,
  .placement-portrait h3, .placement-portrait figcaption > span,
  .placement-journey dt, .location, .footer-location, .footer-bottom,
  .tutor-card .tutor-subjects, .career-seal > span,
  .field small, .field-error, .form-error-summary,
  .enquiry-summary dt, .enquiry-steps li > span,
  .mobile-dock > span, .code-graphic small
) {
  font-family: var(--font-body);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  letter-spacing: 0;
}

.field label, .course-category {
  font-family: var(--font-body);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: 600;
  letter-spacing: 0;
}

/* Controls and navigation share the library's 16px scale. */
:is(
  .button, .hero-actions .button, .career-top .button,
  .final-cta .button, .mobile-dock .button,
  .hero-text-link, .text-button, .about .text-button,
  .curriculum-panel .text-button, .learning-project .text-button,
  .course-guidance .text-button, .placement-followup > .text-button,
  .course-action, .filter, .faq-list summary
) {
  font-family: var(--font-body);
  font-size: var(--type-control-size);
  line-height: var(--type-control-line);
  font-weight: 600;
  letter-spacing: 0;
}

.desktop-nav, .mobile-nav > a, .footer-links a, .footer-links button {
  font-family: var(--font-body);
  font-size: var(--type-control-size);
  line-height: var(--type-control-line);
  font-weight: 500;
  letter-spacing: 0;
}

.field input, .field select, .field textarea {
  font-size: var(--type-control-size);
  line-height: var(--type-control-line);
}

/* 12px is reserved for short, optional section/category eyebrows. */
:is(
  .eyebrow, .hero-eyebrow, .final-cta .eyebrow,
  .section-label, .career-top .section-label, .project-strip .section-label,
  .detail-body .section-label, .enquiry-aside .section-label,
  .micro-label, .tutor-card > .micro-label, .course-body .course-index,
  .photo-label, .step-number, .stories .testimonial-label,
  .footer-links > div > span
) {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  font-weight: 600;
  letter-spacing: .08em;
}

.hero-description {
  font-family: var(--font-body);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line);
  max-width: 36rem;
}

/* Give the larger copy room instead of squeezing it back down. */
.hero { height: auto; min-height: 652px; }
.hero-content { height: auto; }
.hero-eyebrow { max-width: 100%; }
.hero-actions { flex-wrap: wrap; gap: 12px 24px; }
.hero-reviews { flex-wrap: wrap; gap: 12px 18px; }
.review-count { white-space: normal; }
.hero-review-copy { min-width: 0; }
.benefit-badges > a { min-height: 128px; }
.course-guidance > p { max-width: 65ch; }
.learning-grid { grid-template-rows: minmax(280px, auto) minmax(280px, auto) auto; }
.learning-mentorship > p, .learning-project > p { max-width: 36ch; }
.stories .section-heading { margin-bottom: 32px; }
.stories .stories-summary { min-width: 260px; }
.stories-rating { flex-wrap: wrap; gap: 8px 12px; }
.placement-card { flex-basis: clamp(380px, 32%, 440px); }
.placement-journey > div:last-child dd { font-size: 1.25rem; line-height: 1.75rem; }
.placement-company { border-radius: 18px; }
.placement-journey dd { overflow-wrap: normal; }
.tutor-grid .tutor-card .tutor-subjects {
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  min-height: 44px;
}
.footer-links { gap: clamp(24px, 5vw, 80px); }
.footer-links > div { min-width: 0; }
.form-intro { max-width: 40ch; }

@media (min-width: 1024px) {
  :root { --type-lead-size: 1.25rem; --type-lead-line: 2rem; }
}

@media (max-width: 1100px) {
  .header { height: 78px; }
  .header-inner { gap: 16px; padding-inline: 22px; }
  .brand { width: 160px; }
  .desktop-nav { display: none; }
  .header-cta { margin-left: auto; }
  .menu-toggle { display: grid; }
  .mobile-nav:not([hidden]) {
    display: flex;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    padding: 14px 24px 24px;
    background: white;
    box-shadow: 0 16px 22px #0001;
    flex-direction: column;
    gap: 0;
  }
  .mobile-nav > a { padding: 15px 0; border-bottom: 1px solid #f0edf4; }
  .mobile-nav .button { margin-top: 18px; align-self: flex-start; }
  .course-grid, .tutor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading { flex-wrap: wrap; gap: 24px; }
  .section-heading > p { max-width: 38rem; }
  .stories .stories-summary { min-width: 0; }
}

@media (min-width: 541px) and (max-width: 800px) {
  .learning-grid { grid-template-rows: 430px auto auto; }
}

@media (max-width: 540px) {
  .header { height: 76px; }
  .header-inner { padding-inline: 17px; }
  .brand { width: 150px; }
  .mobile-nav:not([hidden]) { top: 76px; }
  .hero { min-height: 0; }
  .hero-description { max-width: 100%; }
  .hero-actions { gap: 4px 16px; }
  .hero-reviews { align-items: center; }
  .benefit-badges > a { flex-direction: column; align-items: flex-start; padding: 20px 16px; }
  .benefit-badges > a > span:not(.badge-arrow) { overflow-wrap: break-word; }
  .course-grid, .tutor-grid { grid-template-columns: 1fr; }
  .placement-card { flex-basis: 100%; gap: 12px; padding: 14px; }
  .placement-company { padding: 8px 10px; }
  .placement-portrait figcaption { padding: 38px 7px 12px; }
  .placement-portrait h3 { overflow-wrap: break-word; }
  .curriculum-panel { padding: 26px 20px; }
  .career-top .button { gap: 12px; padding-inline: 18px; }
  .final-cta p:not(.eyebrow) { max-width: 32ch; }
  .footer-links { flex-wrap: wrap; gap: 28px; }
  .footer-bottom { flex-wrap: wrap; }
  .footer-bottom > a { margin-left: 0; }
  .mobile-dock { gap: 12px; padding-left: 14px; }
  .mobile-dock .button { gap: 8px; padding-inline: 14px; white-space: nowrap; flex-shrink: 0; }
}

@media (max-width: 360px) {
  .benefit-badges { grid-template-columns: 1fr; }
  .benefit-badges > a { flex-direction: row; gap: 14px; min-height: 0; }
  .placement-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .photo-copy { left: 20px; right: 20px; }
}