/* TYPOGRAPHY SOURCE OF TRUTH. Edit scripts/fonts.json + this block only; never put family names in
   assets/styles/layout.css (generated). verify.py fails the build if they drift. See qa/font-audit-plan-2026-10-28.md. */
@font-face { font-family:'Inter'; src:url('/assets/brand/fonts/inter-latin-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
/* New Spirit ships one weight; spanning 100-900 maps every requested weight to it, so no faux bold. */
@font-face { font-family:'New Spirit'; src:url('/assets/brand/fonts/new-spirit-400.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
:root, body {
  --_typography-primitives---family--primary-family: 'Inter', Arial, sans-serif;
  --_typography-primitives---family--secondary-family: 'Inter', Arial, sans-serif;
  --_typography-primitives---family--display-sans: 'New Spirit', Georgia, 'Times New Roman', serif;
  --_typography-primitives---family--display-serif: 'New Spirit', Georgia, 'Times New Roman', serif;
}
:root {
  /* Headlines set like the pages rebuilt from schole.ai (pages.css): New Spirit at its own spacing with
     a little air between lines, not the cloned site's -0.02em and 90-100% leading that squeezed it. */
  --_typography-primitives---character-spacing--heading: normal;
  --_typography-primitives---line-height--xs-headings: 110%;
  --_colour-primitives---brand--core--primary: #2e4bf0;
  --_colour-primitives---brand--core--primary-dark-white-bg: #1f39d4;
  --button-primary--primary-content-idle: #ffffff;
  --button-primary--primary-content-hover: #ffffff;
}
.logo_wrap { width: 15rem; height: 3.8rem; }
.nav_logo-container { width: 15rem; }
.nav_wrap, .nav_wrap.is-active { top:0; }
.tuc-nav-wordmark { display:flex; align-items:center; gap:.6rem; height:100%; }
.tuc-nav-wordmark .tuc-mark { flex:0 0 3.8rem; height:3.8rem; }
.tuc-nav-name { font-size:1.5rem; font-weight:600; line-height:1.066667; letter-spacing:0; text-transform:none; }
.tuc-intro-wordmark { display:block; width:100%; height:100%; object-fit:contain; object-position:left center; }
.tuc-mark { display:block; width:100%; height:100%; background:currentColor; mask:url('/assets/brand/schole-stars.svg') center/contain no-repeat; -webkit-mask:url('/assets/brand/schole-stars.svg') center/contain no-repeat; }
.logo_svg.is-icon { width:2.5rem; max-width:2.5rem; height:2.5rem; }
/* The white bar you get on scrolling keeps the full "The Upskilling Company" wordmark, in the bar's dark
   text colour, instead of swapping to the stars alone (which left the name's space looking blank). */
.logo_svg.is-active:not(.is-icon) { opacity:1; display:flex; }
.logo_svg.is-icon.is-active { display:none; }
.tuc-footer-lockup { display:block; width:100%; height:auto; }
.button_icon-wrap { color:#fff; }
.tabbed-content_link.is-active { color:#fff; }
.nav_menu-icon-line { background-color:#fff; }
.local-preview-dialog { font-family:'Inter', sans-serif; background:#eef0f4; color:#14151c; }
.local-preview-dialog h2 { font-family:'New Spirit', Georgia, serif; font-weight:400; }
.local-preview-dialog button { background:linear-gradient(270deg,#9075c0 0%,#6e94cf 100%); color:#fff; border-radius:10px; }
/* Buttons look like app.schole.ai's Sign In: its blue-to-purple gradient (darker on hover) and
   10px corners. Set on the button itself because each theme wrapper resolves these tokens from
   the blue brand primitive, which stays for other uses. */
.button_wrap { --button-primary--primary-bg-idle:#7f85c8; --button-primary--primary-bg-hover:#6e73ab; --button-primary--primary-focus:#7f85c8; --button-link--link-focus:#7f85c8; --_colour-primitives---brand--core--primary:#7f85c8; }
.button_wrap[data-ui--element-button--style-style="primary"] { --button-primary--primary-content-idle:#fff; --button-primary--primary-content-hover:#fff; color:#fff; }
.button_wrap[data-ui--element-button--style-style="primary"] .button_wrap-inner, .button_wrap.is-menu { background-image:linear-gradient(270deg,#9075c0 0%,#6e94cf 100%); border-radius:10px; }
.button_wrap[data-ui--element-button--style-style="primary"]:hover .button_wrap-inner, .button_wrap.is-menu:hover { background-image:linear-gradient(270deg,#7c66a5 0%,#6080b1 100%); }
.button_wrap[data-ui--element-button--style-style="primary"] .button_icon-wrap { display:none; }
.local-preview-dialog button:focus-visible { outline-color:#ff6a3d; }
@media (max-width:767px) {
  .logo_wrap { width:12.75rem; height:3.25rem; }
  .nav_logo-container { width:12.75rem; }
  .tuc-nav-wordmark { gap:.5rem; }
  .tuc-nav-wordmark .tuc-mark { flex-basis:3.25rem; height:3.25rem; }
  .tuc-nav-name { font-size:1.275rem; }
}

/* Give the approved headline room while retaining the original typography. */
.home-hero_content.tuc-hero-copy { width:100%; max-width:100%; }

/* Give supporting copy a readable scale beneath the section headlines. */
.u-body-text[data-ui--text-body--style-size="base"],
.new-text-media_text {
  font-size:clamp(1.0625rem, .9375rem + .625vw, 1.25rem);
  line-height:1.5;
}
@media (max-width:767px) {
  .featured-slide_content-wrap { height:auto; min-height:19rem; }
}

/* First white section: logo lockup replaces the eyebrow line */
.intro-brand-lockup { display:block; width:15rem; height:3.8rem; color:#14151c; }
@media (max-width:767px) { .intro-brand-lockup { width:12.75rem; height:3.25rem; } }


/* First white section: logo lockup and intro sentence side by side, centered as a pair (never stacked). */
.heading-lockup_wrap.intro-centered { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; text-align:left; column-gap:var(--_site-sizes---vertical-gap--medium); }
.intro-centered .heading-lockup_heading,
.intro-centered .heading-lockup_body { width:auto; }
.intro-centered .heading-lockup_heading { flex:0 0 auto; }
.intro-centered .heading-lockup_body { flex:0 1 36rem; }
.intro-centered .lockup-heading_layout { display:none; }
@media (max-width:767px) {
  .heading-lockup_wrap.intro-centered { column-gap:1rem; }
  .intro-centered .intro-brand-lockup { width:8.5rem; height:2.15rem; }
}

/* Section labels: lock the logo mark at the "What we do" size so it never shrinks unevenly. */
.tabbed-content_logo-wrap { flex:none; width:1.5rem; }

/* Customer-story logos: white marks in a slightly larger dark tile, like the original white wordmarks. */
.attibution-image_wrap { width:3rem; height:3rem; padding:.625rem; }
/* A line break chosen for wide screens (the Skills scan intro); phones wrap the sentence naturally. */
@media (max-width:767px) { .tuc-br-wide { display:none; } }
/* More room between a title column and its image (Skills scan tabs, text-and-media blocks, the dark slider): 80px,
   matching the "Build the skills your business needs next" block. Phones stack these and keep their spacing. */
@media (min-width:992px) { .tabbed-content_panel, .new-text-media_layout, .featured-slide_wrap { column-gap:80px; } }
/* Footer: The Upskilling Company lockup in the left column, the size it has in the header. */
.tuc-footer-logo { display:block; width:240px; max-width:100%; }
.tuc-footer-logo img { display:block; width:100%; height:auto; }