/* =========================================================================
   KCS x NIBS Digital Campus
   Design system implementation. Decisions are documented in DESIGN.md.
   Order: tokens, base, type, layout primitives, components, header, drawer,
   homepage sections, generic page, programme page, footer, motion.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */
:root {
  /* Brand */
  --c-navy: #03094B;
  --c-navy-deep: #020735;
  --c-navy-soft: #0F1868;     /* raised surfaces on navy */
  --c-navy-tint: #E9EBF5;     /* navy at ~8% on white: info surfaces */
  --c-orange: #FF5A37;
  --c-orange-deep: #E8461F;
  --c-orange-tint: #FFE9E3;
  --c-orange-text: #C2410C;   /* orange for small text: 5.2:1 on white, 4.7:1 on surface */

  /* Neutrals (warm, not cream) */
  --c-white: #FFFFFF;
  --c-surface: #F5F4F0;
  --c-surface-2: #ECEAE4;
  --c-rule: #D8D5CD;
  --c-rule-strong: #B9B5AB;
  --c-ink: #14161F;
  --c-ink-2: #464A58;
  --c-ink-3: #666A78;

  /* On navy */
  --c-on-navy: #FFFFFF;
  --c-on-navy-2: #C3C7E3;
  --c-on-navy-rule: rgba(255, 255, 255, 0.18);

  /* Semantic */
  --c-focus: var(--c-orange);
  --c-link: var(--c-navy);

  /* Type */
  --f-display: "Schibsted Grotesk", "Public Sans", system-ui, sans-serif;
  --f-text: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.75rem, 1.6rem + 4vw, 5rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.3vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  --fs-body: 1.125rem;
  --fs-small: 1rem;
  --fs-meta: 0.875rem;
  --lh-tight: 1.04;
  --lh-snug: 1.15;
  --lh-body: 1.6;
  --measure: 66ch;

  /* Space (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(3rem, 6vw, 5.5rem);

  /* Layout */
  --shell: 1240px;
  --shell-wide: 1440px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 64px;
  --utilbar-h: 36px;

  /* Shape */
  --radius: 2px;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-panel: 260ms;

  color-scheme: light;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 76px;
  }
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html.kcs-lock {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

p,
ul,
ol,
dl,
h1,
h2,
h3,
h4 {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--c-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--c-navy) 40%, transparent);
  transition: text-decoration-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}

a:hover {
  text-decoration-color: var(--c-orange);
}

::selection {
  background: var(--c-orange);
  color: var(--c-navy);
}

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.kcs-skip {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--c-navy);
  color: var(--c-white);
  font-weight: 600;
  border-radius: var(--radius);
}

.kcs-skip:focus {
  top: var(--s-4);
}

.kcs-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* -------------------------------------------------------------------------
   3. Type roles
   ---------------------------------------------------------------------- */
.kcs-hero__title,
.kcs-prog__title,
.kcs-page__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--c-navy);
}

.kcs-h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--c-navy);
}

.kcs-h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--c-navy);
}

.kcs-lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-ink-2);
  max-width: var(--measure);
  text-wrap: pretty;
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

.kcs-section--navy p,
.kcs-section--navy .kcs-lead {
  color: var(--c-on-navy-2);
}

.kcs-section--navy .kcs-h2,
.kcs-section--navy .kcs-h3 {
  color: var(--c-on-navy);
}

/* -------------------------------------------------------------------------
   4. Layout primitives
   ---------------------------------------------------------------------- */
.kcs-shell {
  width: min(100% - 2 * var(--gutter), var(--shell));
  margin-inline: auto;
}

.kcs-section {
  padding-block: var(--section-y);
}

.kcs-section--surface {
  background: var(--c-surface);
}

.kcs-section--navy {
  background: var(--c-navy);
  color: var(--c-on-navy);
}

.kcs-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}

/* Heading + lead groups: more space above a heading than below it */
.kcs-h2 + .kcs-lead,
.kcs-h2 + p {
  margin-top: var(--s-4);
}

.kcs-h3 + p,
.kcs-h3 + .kcs-lead {
  margin-top: var(--s-3);
}

p + p {
  margin-top: var(--s-4);
}

p + .kcs-cluster,
.kcs-lead + .kcs-cluster,
p + .kcs-link,
.kcs-lead + .kcs-link {
  margin-top: var(--s-6);
}

/* -------------------------------------------------------------------------
   5. Components: buttons, links, status, notice, forms, lists
   ---------------------------------------------------------------------- */
.kcs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 50px;
  padding: 0 1.375rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.kcs-btn .kcs-icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--t-base) var(--ease-out);
}

.kcs-btn:active {
  transform: scale(0.98);
}

.kcs-btn--primary {
  background: var(--c-orange);
  color: var(--c-navy);
  border-color: var(--c-orange);
}

.kcs-btn--primary:hover {
  background: var(--c-orange-deep);
  border-color: var(--c-orange-deep);
  color: var(--c-navy);
}

.kcs-btn--secondary {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-navy);
}

.kcs-btn--secondary:hover {
  background: var(--c-navy);
  color: var(--c-white);
}

.kcs-btn--on-dark.kcs-btn--secondary {
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.7);
}

.kcs-btn--on-dark.kcs-btn--secondary:hover {
  background: var(--c-white);
  color: var(--c-navy);
  border-color: var(--c-white);
}

.kcs-btn--block {
  width: 100%;
}

.kcs-btn--small {
  min-height: 40px;
  padding: 0 1rem;
  font-size: var(--fs-small);
}

@media (hover: hover) and (pointer: fine) {
  .kcs-btn:hover .kcs-icon {
    transform: translateX(3px);
  }
}

.kcs-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  color: var(--c-navy);
  text-decoration: none;
  min-height: 44px;
}

.kcs-link > span {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--c-navy) 30%, transparent);
  transition: text-decoration-color var(--t-base) var(--ease-out);
}

.kcs-link:hover > span {
  text-decoration-color: var(--c-orange);
}

.kcs-link .kcs-icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--t-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .kcs-link:hover .kcs-icon {
    transform: translateX(3px);
  }
}

.kcs-link--on-dark {
  color: var(--c-white);
}

.kcs-link--on-dark > span {
  text-decoration-color: rgba(255, 255, 255, 0.35);
}

/* Status stamps: the Naleli Workplace task vocabulary */
.kcs-status {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--c-ink-2);
  background: var(--c-white);
}

/* A long label is a phrase, not a status word: sentence case (kcs_status_class()). */
.kcs-status--phrase {
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
}

.kcs-status--info {
  background: var(--c-navy-tint);
  border-color: var(--c-navy-tint);
  color: var(--c-navy);
}

.kcs-status--success {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}

.kcs-status--warning {
  border-color: var(--c-orange);
  color: var(--c-ink);
}

/* Notice */
.kcs-notice {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  max-width: none;
  padding: var(--s-4) var(--s-5);
  background: var(--c-navy-tint);
  color: var(--c-navy);
  font-size: var(--fs-small);
  border-radius: var(--radius);
}

.kcs-notice .kcs-icon {
  margin-top: 0.15em;
}

/* Forms */
.kcs-searchform {
  display: flex;
  gap: var(--s-3);
  align-items: stretch;
}

.kcs-searchform__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--s-4);
  font: inherit;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1.5px solid var(--c-rule-strong);
  border-radius: var(--radius);
}

.kcs-searchform__input::placeholder {
  color: var(--c-ink-3);
}

.kcs-searchform__input:focus {
  border-color: var(--c-navy);
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* Lists with the orange square marker */
.kcs-list {
  display: grid;
  gap: var(--s-2);
  max-width: var(--measure);
}

.kcs-list li {
  position: relative;
  padding-left: 1.25rem;
}

.kcs-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--c-orange);
}

p + .kcs-list,
.kcs-list + p {
  margin-top: var(--s-4);
}

/* Definition facts: label above value, rules between */
.kcs-pass__facts,
.kcs-credentials__facts {
  display: grid;
}

.kcs-pass__facts > div,
.kcs-credentials__facts > div {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--c-rule);
}

.kcs-pass__facts > div:last-child,
.kcs-credentials__facts > div:last-child {
  border-bottom: 1px solid var(--c-rule);
}

.kcs-pass__facts dt,
.kcs-credentials__facts dt {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--c-navy);
}

.kcs-pass__facts dd,
.kcs-credentials__facts dd {
  margin: var(--s-2) 0 0;
  color: var(--c-ink-2);
  max-width: 48ch;
}

/* White plate for logos on navy */
.kcs-plate {
  background: var(--c-white);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  width: fit-content;
}

/* -------------------------------------------------------------------------
   6. Header
   ---------------------------------------------------------------------- */
.kcs-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-white);
}

@media (min-width: 1024px) {
  .kcs-header {
    top: calc(-1 * var(--utilbar-h));
  }
}

.kcs-utilbar {
  display: none;
  background: var(--c-navy);
  color: var(--c-on-navy-2);
  font-size: var(--fs-meta);
  height: var(--utilbar-h);
}

@media (min-width: 1024px) {
  .kcs-utilbar {
    display: block;
  }
}

.kcs-utilbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.kcs-utilbar__name {
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--c-on-navy-2);
}

.kcs-utilbar__links {
  display: flex;
  gap: var(--s-6);
}

.kcs-utilbar__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-white);
  text-decoration: none;
  font-weight: 500;
  height: var(--utilbar-h);
}

.kcs-utilbar__links a .kcs-icon {
  width: 1rem;
  height: 1rem;
  color: var(--c-orange);
}

.kcs-utilbar__links a:hover span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--c-orange);
}

.kcs-masthead {
  position: relative;
  border-bottom: 1px solid var(--c-rule);
  transition: box-shadow var(--t-base) var(--ease-out);
}

.kcs-header.is-scrolled .kcs-masthead {
  box-shadow: 0 8px 24px -16px rgba(3, 9, 75, 0.25);
}

.kcs-masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: var(--header-h);
}

.kcs-logo {
  display: block;
  flex: none;
  margin-right: auto;
}

.kcs-logo img {
  width: auto;
  height: 34px; /* the NIBS mark cropped to the letters; the full name is in the link label */
}

@media (min-width: 1024px) {
  .kcs-logo img {
    height: 40px;
  }

  .kcs-logo {
    margin-right: var(--s-6);
  }
}

/* Primary nav (desktop) */
.kcs-nav {
  display: none;
}

@media (min-width: 1024px) {
  .kcs-nav {
    display: block;
    margin-right: auto;
  }
}

.kcs-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.kcs-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: var(--header-h);
  padding: 0 var(--s-3);
  font-weight: 600;
  font-size: 1rem;
  color: var(--c-navy);
  text-decoration: none;
}

.kcs-nav__link::after {
  content: "";
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 0;
  height: 3px;
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}

.kcs-nav__link:hover::after,
.kcs-nav__item.is-open .kcs-nav__link::after {
  transform: scaleX(1);
}

.kcs-nav__chevron {
  width: 1rem;
  height: 1rem;
  transition: transform var(--t-base) var(--ease-out);
}

.kcs-nav__item.is-open .kcs-nav__chevron {
  transform: rotate(180deg);
}

/* Mega panel */
.kcs-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-rule);
  box-shadow: 0 24px 40px -24px rgba(3, 9, 75, 0.35);
  padding: var(--s-7) 0 var(--s-7);
  transition: opacity var(--t-base) var(--ease-out), translate var(--t-base) var(--ease-out);
}

.kcs-mega[hidden] {
  display: none;
}

@starting-style {
  .kcs-mega {
    opacity: 0;
    translate: 0 -6px;
  }
}

.kcs-mega__inner {
  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
  gap: var(--s-8);
  align-items: start;
}

.kcs-mega__intro {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--c-navy);
  text-wrap: balance;
}

.kcs-mega__intro + .kcs-link {
  margin-top: var(--s-4);
}

.kcs-mega__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-6);
}

.kcs-mega__links a {
  display: block;
  padding: var(--s-3) var(--s-3);
  margin-inline: calc(-1 * var(--s-3));
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--c-ink);
  transition: background-color var(--t-base) var(--ease-out);
}

.kcs-mega__links a:hover {
  background: var(--c-surface);
}

.kcs-mega__links strong {
  display: block;
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-mega__links span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  line-height: 1.45;
}

.kcs-mega__featured {
  display: block;
  text-decoration: none;
  color: var(--c-ink);
  border-left: 1px solid var(--c-rule);
  padding-left: var(--s-6);
}

.kcs-mega__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.kcs-mega__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .kcs-mega__featured:hover .kcs-mega__photo img {
    transform: scale(1.03);
  }
}

.kcs-mega__featured-body {
  display: block;
  padding-top: var(--s-3);
}

.kcs-mega__featured-body small {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-orange-text);
}

.kcs-mega__featured-body strong {
  display: block;
  margin-top: 2px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--c-navy);
}

.kcs-mega__featured:hover .kcs-mega__featured-body strong {
  text-decoration: underline;
  text-decoration-color: var(--c-orange);
  text-underline-offset: 0.2em;
}

.kcs-mega__featured-body > span {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  line-height: 1.45;
}

/* Actions */
.kcs-masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

.kcs-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  color: var(--c-navy);
  transition: background-color var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.kcs-iconbtn .kcs-icon {
  width: 1.375rem;
  height: 1.375rem;
}

.kcs-iconbtn:hover {
  background: var(--c-surface);
}

.kcs-iconbtn:active {
  transform: scale(0.94);
}

.kcs-masthead__cta {
  display: none;
}

@media (min-width: 560px) {
  .kcs-masthead__cta {
    display: inline-flex;
    min-height: 44px;
  }
}

.kcs-menu-toggle__close {
  display: none;
}

.kcs-menu-toggle[aria-expanded="true"] .kcs-menu-toggle__open {
  display: none;
}

.kcs-menu-toggle[aria-expanded="true"] .kcs-menu-toggle__close {
  display: block;
}

@media (min-width: 1024px) {
  .kcs-menu-toggle {
    display: none;
  }
}

/* Search panel */
.kcs-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-rule);
  padding: var(--s-5) 0;
  box-shadow: 0 24px 40px -24px rgba(3, 9, 75, 0.35);
}

.kcs-search .kcs-searchform {
  max-width: 720px;
}

/* -------------------------------------------------------------------------
   7. Drawer (mobile navigation)
   ---------------------------------------------------------------------- */
.kcs-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(3, 9, 75, 0.45);
  opacity: 0;
  transition: opacity var(--t-panel) var(--ease-out);
}

.kcs-backdrop.is-open {
  opacity: 1;
}

.kcs-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: min(100%, 400px);
  background: var(--c-white);
  overflow-y: auto;
  padding: calc(var(--header-h) + var(--s-4)) var(--gutter) var(--s-8);
  transform: translateX(100%);
  transition: transform var(--t-panel) var(--ease-drawer);
  box-shadow: -24px 0 48px -32px rgba(3, 9, 75, 0.4);
}

.kcs-drawer.is-open {
  transform: translateX(0);
}

/* Keep the masthead (with the close button) above the drawer */
.kcs-drawer ~ .kcs-main {
  position: relative;
}

.kcs-drawer__list {
  border-top: 1px solid var(--c-rule);
}

.kcs-drawer__item {
  border-bottom: 1px solid var(--c-rule);
}

.kcs-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: var(--s-3) 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--c-navy);
  text-decoration: none;
  text-align: left;
}

.kcs-drawer__toggle .kcs-icon {
  transition: transform var(--t-base) var(--ease-out);
}

.kcs-drawer__toggle[aria-expanded="true"] .kcs-icon {
  transform: rotate(180deg);
}

.kcs-drawer__sub {
  padding: 0 0 var(--s-3);
}

.kcs-drawer__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-1) 0 var(--s-1) var(--s-4);
  text-decoration: none;
  color: var(--c-ink);
  border-left: 2px solid var(--c-surface-2);
}

.kcs-drawer__sub a:hover {
  border-left-color: var(--c-orange);
  color: var(--c-navy);
}

.kcs-drawer__utility {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-1);
}

.kcs-drawer__utility a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  font-weight: 600;
  color: var(--c-navy);
  text-decoration: none;
}

.kcs-drawer__utility .kcs-icon {
  color: var(--c-orange);
}

.kcs-drawer__cta {
  margin-top: var(--s-6);
}

/* Masthead must sit over the drawer so the close button stays reachable */
.kcs-header {
  z-index: 80;
}

.kcs-drawer {
  z-index: 75;
}

.kcs-backdrop {
  z-index: 70;
}

@media (min-width: 1024px) {
  .kcs-drawer,
  .kcs-backdrop {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------
   8. Hero
   ---------------------------------------------------------------------- */
.kcs-hero {
  background: var(--c-white);
}

.kcs-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
}

.kcs-hero__media {
  order: -1;
}

.kcs-hero__photo,
.kcs-hero__photo img {
  width: 100%;
  height: 100%;
}

.kcs-hero__photo {
  aspect-ratio: 5 / 4;
}

.kcs-hero__photo img {
  object-fit: cover;
}

.kcs-hero__copy {
  padding: var(--s-7) var(--gutter) var(--s-8);
  width: min(100%, var(--shell));
  margin-inline: auto;
}

.kcs-hero__title {
  position: relative;
  padding-top: var(--s-5);
  font-size: clamp(2.75rem, 1.4rem + 4.2vw, 5.25rem);
  letter-spacing: -0.03em;
}

.kcs-hero__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 4px;
  background: var(--c-orange);
}

.kcs-hero__lead {
  margin-top: var(--s-5);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-ink-2);
  max-width: 36ch;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  text-wrap: pretty;
}

.kcs-hero__copy .kcs-cluster {
  margin-top: var(--s-6);
}

@media (min-width: 1024px) {
  .kcs-hero__grid {
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [shell-start] repeat(12, minmax(0, calc(var(--shell) / 12)))
      [shell-end] minmax(var(--gutter), 1fr)
      [full-end];
    min-height: min(82vh, 760px);
  }

  .kcs-hero__copy {
    grid-column: shell-start / span 6;
    align-self: center;
    padding: var(--s-9) var(--s-8) var(--s-9) 0;
    width: auto;
    margin: 0;
  }

  .kcs-hero__media {
    order: 0;
    grid-column: 8 / full-end;
    position: relative;
  }

  .kcs-hero__photo {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
}

/* -------------------------------------------------------------------------
   9. Study routes index
   ---------------------------------------------------------------------- */
.kcs-routes__head {
  max-width: 60ch;
  margin-bottom: var(--s-7);
}

.kcs-routes__list {
  border-top: 1px solid var(--c-rule-strong);
}

.kcs-routes__item {
  border-bottom: 1px solid var(--c-rule);
}

.kcs-routes__link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "note arrow"
    "name arrow"
    "summary arrow";
  gap: var(--s-1) var(--s-4);
  align-items: center;
  padding: var(--s-5) 0;
  text-decoration: none;
  color: var(--c-ink);
  transition: background-color var(--t-base) var(--ease-out);
}

.kcs-routes__note {
  grid-area: note;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-orange-text);
}

.kcs-routes__name {
  grid-area: name;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--c-navy);
}

.kcs-routes__summary {
  grid-area: summary;
  color: var(--c-ink-2);
  max-width: 52ch;
  line-height: 1.5;
}

.kcs-routes__arrow {
  grid-area: arrow;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--c-navy);
  border: 1px solid var(--c-rule-strong);
  border-radius: 50%;
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.kcs-routes__arrow .kcs-icon {
  transition: transform var(--t-base) var(--ease-out);
}

.kcs-routes__link:hover .kcs-routes__arrow {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}

@media (hover: hover) and (pointer: fine) {
  .kcs-routes__link:hover .kcs-routes__arrow .kcs-icon {
    transform: translateX(2px);
  }
}

.kcs-routes__link:hover .kcs-routes__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
  text-decoration-color: var(--c-orange);
}

@media (min-width: 1024px) {
  .kcs-routes__link {
    grid-template-columns: 140px 1.1fr 1.4fr 44px;
    grid-template-areas: "note name summary arrow";
    gap: var(--s-6);
    padding: var(--s-6) 0;
  }
}

/* -------------------------------------------------------------------------
   10. Split (photo + copy)
   ---------------------------------------------------------------------- */
.kcs-split__grid {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

.kcs-split__media .kcs-photo,
.kcs-split__media img {
  width: 100%;
}

.kcs-split__media .kcs-photo {
  aspect-ratio: 4 / 3;
}

.kcs-split__media img {
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .kcs-split__grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--s-9);
  }

  .kcs-split__media {
    margin-left: calc(-1 * var(--gutter));
  }
}

@media (min-width: 1440px) {
  .kcs-split__media {
    margin-left: calc((var(--shell-wide) - var(--shell)) / -2);
  }
}

/* -------------------------------------------------------------------------
   11. Skills Pass and Credentials (typographic, on surface)
   ---------------------------------------------------------------------- */
.kcs-pass__grid,
.kcs-credentials__grid {
  display: grid;
  gap: var(--s-7);
}

@media (min-width: 1024px) {
  .kcs-pass__grid {
    grid-template-columns: 5fr 6fr;
    gap: var(--s-10);
    align-items: start;
  }

  .kcs-credentials__grid {
    gap: var(--s-8);
  }

  .kcs-credentials__copy {
    max-width: 62ch;
  }

  .kcs-credentials__facts {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--s-7);
  }

  .kcs-credentials__facts > div {
    border-bottom: 1px solid var(--c-rule);
  }
}

/* -------------------------------------------------------------------------
   12. NIBS
   ---------------------------------------------------------------------- */
.kcs-nibs__grid {
  display: grid;
  gap: var(--s-8);
}

.kcs-nibs .kcs-plate {
  max-width: 260px;
}

.kcs-nibs__roles {
  margin-top: var(--s-6);
  display: grid;
  gap: 0;
}

.kcs-nibs__roles li {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--c-on-navy-rule);
}

.kcs-nibs__roles li:last-child {
  border-bottom: 1px solid var(--c-on-navy-rule);
}

.kcs-nibs__roles strong {
  display: block;
  font-weight: 600;
  color: var(--c-white);
}

.kcs-nibs__roles span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-small);
  color: var(--c-on-navy-2);
}

@media (min-width: 1024px) {
  .kcs-nibs__grid {
    grid-template-columns: 7fr 4fr;
    gap: var(--s-10);
    align-items: start;
  }

  .kcs-nibs__roles {
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--s-6);
  }

  .kcs-nibs__roles li:nth-last-child(2) {
    border-bottom: 1px solid var(--c-on-navy-rule);
  }
}

/* -------------------------------------------------------------------------
   13. Learning model: rail, flow, roles, Open Workplace
   ---------------------------------------------------------------------- */
.kcs-model__head {
  max-width: 62ch;
  margin-bottom: var(--s-8);
}

.kcs-rail {
  display: grid;
  gap: var(--s-6);
  counter-reset: stage;
}

.kcs-rail__stage {
  position: relative;
  padding-top: var(--s-5);
}

.kcs-rail__stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--c-navy);
  transform-origin: left;
}

.kcs-rail__stage--last::before {
  background: var(--c-orange);
}

.kcs-rail__label {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-navy);
}

.kcs-rail__title {
  margin-top: var(--s-4);
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--c-ink);
}

.kcs-rail__text {
  margin-top: var(--s-2);
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.kcs-rail__where {
  margin-top: var(--s-4);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-rail__where::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--c-orange);
}

@media (min-width: 768px) {
  .kcs-rail {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
  }

  .kcs-rail__stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: -6px;
    right: calc(-1 * var(--s-6) / 2 - 4px);
    width: 9px;
    height: 9px;
    border-top: 3px solid var(--c-navy);
    border-right: 3px solid var(--c-navy);
    transform: rotate(45deg);
  }
}

/* Reveal: the rules draw in sequence, the copy settles in after. */
.kcs-rail.will-reveal .kcs-rail__stage::before {
  transform: scaleX(0);
}

.kcs-rail.will-reveal .kcs-rail__stage > * {
  opacity: 0;
  transform: translateY(8px);
}

.kcs-rail.will-reveal .kcs-rail__stage::after {
  opacity: 0;
}

.kcs-rail.is-visible .kcs-rail__stage::before {
  transform: scaleX(1);
  transition: transform 520ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 140ms);
}

.kcs-rail.is-visible .kcs-rail__stage > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 140ms + 160ms);
}

.kcs-rail.is-visible .kcs-rail__stage::after {
  opacity: 1;
  transition: opacity 300ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 140ms + 420ms);
}

.kcs-model__grid {
  margin-top: var(--s-9);
  display: grid;
  gap: var(--s-8);
}

@media (min-width: 1024px) {
  .kcs-model__grid {
    grid-template-columns: 6fr 6fr;
    gap: var(--s-10);
  }
}

/* Flow: the life of a task */
.kcs-flow {
  margin-top: var(--s-5);
  counter-reset: flow;
  display: grid;
}

.kcs-flow__step {
  counter-increment: flow;
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0 var(--s-3);
  padding: var(--s-3) 0;
}

.kcs-flow__step::before {
  content: counter(flow, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-orange-text);
  padding-top: 0.25em;
}

.kcs-flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 2rem;
  bottom: -0.4rem;
  width: 1px;
  background: var(--c-rule-strong);
}

.kcs-flow__step strong {
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-flow__step span {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-flow__states-label {
  margin-top: var(--s-6);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-flow__states {
  margin-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Roles */
.kcs-roles {
  margin-top: var(--s-5);
  display: grid;
}

.kcs-roles__item {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--c-rule);
}

.kcs-roles__item:last-child {
  border-bottom: 1px solid var(--c-rule);
}

.kcs-roles dt {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--c-navy);
}

.kcs-roles dd {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

/* Open Workplace */
.kcs-open-workplace {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  background: var(--c-white);
}

.kcs-open-workplace__brand {
  width: 96px;
}

.kcs-open-workplace__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--c-navy);
}

.kcs-open-workplace__body p {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-open-workplace__body .kcs-btn {
  margin-top: var(--s-4);
}

.kcs-open-workplace__pending {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border-radius: var(--radius);
  color: var(--c-ink);
}

.kcs-open-workplace__pending .kcs-icon {
  color: var(--c-orange-text);
  margin-top: 0.15em;
}

.kcs-open-workplace__body .kcs-link {
  margin-top: var(--s-2);
}

@media (min-width: 560px) {
  .kcs-open-workplace {
    grid-template-columns: 96px 1fr;
    gap: var(--s-5);
  }
}

/* -------------------------------------------------------------------------
   14. Progression ladder
   ---------------------------------------------------------------------- */
.kcs-progression__grid {
  display: grid;
  gap: var(--s-8);
}

.kcs-progression__photo {
  display: none;
}

.kcs-ladder {
  position: relative;
  display: grid;
  padding-left: var(--s-6);
}

.kcs-ladder::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--c-navy);
}

.kcs-ladder__step {
  position: relative;
  padding: var(--s-4) 0;
}

.kcs-ladder__step::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s-6));
  top: calc(var(--s-4) + 0.55em);
  width: 10px;
  height: 10px;
  background: var(--c-white);
  border: 2px solid var(--c-navy);
  border-radius: 50%;
}

.kcs-ladder__step:last-child::before {
  background: var(--c-orange);
  border-color: var(--c-orange);
}

.kcs-ladder__label {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--c-navy);
  text-decoration: none;
}

a.kcs-ladder__label:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--c-orange);
}

.kcs-ladder__text {
  margin-top: var(--s-1);
  color: var(--c-ink-2);
  max-width: 48ch;
}

@media (min-width: 1024px) {
  .kcs-progression__grid {
    grid-template-columns: 5fr 6fr;
    gap: var(--s-10);
    align-items: start;
  }

  .kcs-progression__photo {
    display: block;
    margin-top: var(--s-7);
    width: min(100%, 420px);
    aspect-ratio: 4 / 3;
  }

  .kcs-progression__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* -------------------------------------------------------------------------
   16. Industry Academies + For Organisations
   ---------------------------------------------------------------------- */
.kcs-orgs__media .kcs-photo {
  aspect-ratio: 16 / 9;
}

.kcs-orgs__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kcs-orgs__grid {
  margin-top: var(--s-7);
  display: grid;
  gap: var(--s-7);
}

.kcs-orgs__col p {
  margin-top: var(--s-4);
}

@media (min-width: 1024px) {
  .kcs-orgs__media .kcs-photo {
    aspect-ratio: 21 / 9;
  }

  .kcs-orgs__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-9);
  }

  .kcs-orgs__col + .kcs-orgs__col {
    border-left: 1px solid var(--c-rule);
    padding-left: var(--s-9);
    margin-left: calc(-1 * var(--s-9) / 2);
  }
}

/* -------------------------------------------------------------------------
   17. Closing CTA
   ---------------------------------------------------------------------- */
.kcs-close__grid {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 1024px) {
  .kcs-close__grid {
    grid-template-columns: 7fr 5fr;
    align-items: end;
    gap: var(--s-9);
  }

  .kcs-close__actions {
    justify-content: flex-end;
  }
}

/* -------------------------------------------------------------------------
   18. Footer
   ---------------------------------------------------------------------- */
.kcs-footer {
  background: var(--c-navy);
  color: var(--c-on-navy-2);
  padding: var(--s-9) 0 var(--s-6);
  font-size: var(--fs-small);
}

.kcs-footer a {
  color: var(--c-white);
  text-decoration: none;
}

.kcs-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--c-orange);
}

.kcs-footer__top {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--c-on-navy-rule);
}

.kcs-footer__logo {
  width: 176px;
}

.kcs-footer__mission {
  margin-top: var(--s-5);
  max-width: 44ch;
  font-size: var(--fs-body);
  color: var(--c-on-navy-2);
}

.kcs-footer__partners {
  margin-top: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.kcs-footer__division {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--c-on-navy-2);
}

.kcs-footer__partner {
  display: block;
  background: var(--c-white);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
}

.kcs-footer__partner img {
  height: 44px;
  width: auto;
}

.kcs-footer__verify {
  padding: var(--s-5);
  background: var(--c-navy-soft);
  border-radius: var(--radius);
}

.kcs-footer__verify-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--c-white);
}

.kcs-footer__verify p {
  margin-top: var(--s-2);
  color: var(--c-on-navy-2);
}

.kcs-footer__verify .kcs-btn {
  margin-top: var(--s-4);
}

.kcs-footer__groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) var(--s-5);
  padding: 0;
}

.kcs-footer__heading {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-on-navy-2);
  margin-bottom: var(--s-3);
}

.kcs-footer__group li + li {
  margin-top: var(--s-2);
}

.kcs-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-on-navy-rule);
  font-size: var(--fs-meta);
}

.kcs-footer__bottom p {
  max-width: 64ch;
}

.kcs-footer__legal {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .kcs-footer__groups {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .kcs-footer__top {
    grid-template-columns: 5fr 7fr;
    gap: var(--s-10);
    align-items: start;
  }

  .kcs-footer__groups {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-7) var(--s-6);
    padding: var(--s-2) 0 0;
  }
}

/* -------------------------------------------------------------------------
   19. Generic page, prose, breadcrumbs, search results
   ---------------------------------------------------------------------- */
.kcs-page {
  padding: var(--s-6) 0 var(--section-y);
}

.kcs-page__header {
  max-width: 70ch;
  margin-bottom: var(--s-7);
}

.kcs-page__title {
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
}

.kcs-page__title + .kcs-lead {
  margin-top: var(--s-4);
}

.kcs-page__actions {
  margin-top: var(--s-6);
}

.kcs-page__search {
  margin-top: var(--s-5);
  max-width: 640px;
}

.kcs-breadcrumbs {
  margin-bottom: var(--s-5);
  font-size: var(--fs-meta);
}

.kcs-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-2);
  color: var(--c-ink-3);
}

.kcs-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  line-height: 1.2;
}

.kcs-breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--s-2);
  color: var(--c-rule-strong);
}

.kcs-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--c-ink-2);
  text-decoration: none;
}

.kcs-breadcrumbs a:hover {
  color: var(--c-navy);
  text-decoration: underline;
}

.kcs-prose {
  max-width: var(--measure);
}

.kcs-prose > * + * {
  margin-top: var(--s-4);
}

.kcs-prose h2 {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  color: var(--c-navy);
  margin-top: var(--s-7);
}

.kcs-prose h3 {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--c-navy);
  margin-top: var(--s-6);
}

.kcs-prose ul,
.kcs-prose ol {
  padding-left: 1.25rem;
}

.kcs-prose ul {
  list-style: square;
}

.kcs-prose ol {
  list-style: decimal;
}

.kcs-results {
  display: grid;
  max-width: 70ch;
}

.kcs-results__item {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--c-rule);
}

.kcs-results__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.25rem;
  text-decoration: none;
}

.kcs-results__item p {
  margin-top: var(--s-2);
  color: var(--c-ink-2);
}

.kcs-page--404 .kcs-page__header {
  padding-top: var(--s-8);
}

/* -------------------------------------------------------------------------
   20. Programme page
   ---------------------------------------------------------------------- */
.kcs-prog__header {
  padding: var(--s-6) 0 var(--s-8);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-prog__header-grid {
  display: grid;
  gap: var(--s-6);
}

.kcs-prog__route {
  font-weight: 600;
  color: var(--c-orange-text);
}

.kcs-prog__title {
  margin-top: var(--s-2);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
}

.kcs-prog__title + .kcs-lead {
  margin-top: var(--s-5);
}

.kcs-prog__intro .kcs-cluster {
  margin-top: var(--s-6);
}

.kcs-prog__media .kcs-photo {
  aspect-ratio: 4 / 3;
}

.kcs-prog__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kcs-facts {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--c-rule-strong);
}

.kcs-facts__item {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-rule);
}

.kcs-facts dt {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
}

.kcs-facts dd {
  margin: 2px 0 0;
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-facts + .kcs-notice {
  margin-top: var(--s-5);
}

.kcs-prog__body {
  display: grid;
  gap: var(--s-7);
  padding: var(--s-8) 0 var(--section-y);
}

.kcs-prog__contents {
  font-size: var(--fs-small);
}

.kcs-prog__contents-title {
  font-weight: 600;
  color: var(--c-ink-3);
  font-size: var(--fs-meta);
  margin-bottom: var(--s-3);
}

/* The rail is drawn by the links themselves, end to end, so the current
   section's orange mark replaces its own segment and the text is inset
   from the line it sits on. */
.kcs-prog__contents ol {
  display: grid;
  gap: 0;
}

.kcs-prog__contents a {
  display: block;
  padding: var(--s-2) var(--s-4);
  border-left: 2px solid var(--c-surface-2);
  color: var(--c-ink-2);
  text-decoration: none;
  transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.kcs-prog__contents a:hover {
  color: var(--c-navy);
}

.kcs-prog__contents a[aria-current="true"] {
  color: var(--c-navy);
  font-weight: 600;
  border-left-color: var(--c-orange);
}

.kcs-prog__sections {
  display: grid;
  gap: var(--s-9);
  max-width: 72ch;
}

.kcs-prog__section > .kcs-h3 {
  margin-bottom: var(--s-4);
}

.kcs-prog__section .kcs-rail {
  margin-top: var(--s-6);
}

.kcs-prog__section .kcs-cluster {
  margin-top: var(--s-5);
}

.kcs-skillgroups {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-2);
}

.kcs-skillgroups__group {
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-rule);
}

.kcs-skillgroups__group h3 {
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--c-navy);
  margin-bottom: var(--s-3);
}

.kcs-steps {
  counter-reset: steps;
  display: grid;
  gap: var(--s-3);
}

.kcs-steps__step {
  counter-increment: steps;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-rule);
}

.kcs-steps__step::before {
  content: counter(steps);
  grid-row: 1 / span 2;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-orange-text);
}

.kcs-steps__step strong {
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-steps__step span {
  color: var(--c-ink-2);
  font-size: var(--fs-small);
}

@media (min-width: 768px) {
  .kcs-facts {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--s-6);
  }

  .kcs-skillgroups {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }
}

@media (min-width: 1024px) {
  .kcs-prog__header-grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--s-9);
    align-items: center;
  }

  .kcs-prog__body {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--s-9);
  }

  /* The enrolment card and the contents list travel together on the right. */
  .kcs-prog__aside {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
    align-self: start;
    display: grid;
    gap: var(--s-6);
  }

  .kcs-prog__sections {
    grid-column: 1;
    grid-row: 1;
  }
}

/* -------------------------------------------------------------------------
   22. Gate 3 pages: page hero, section heads, topic lists
   ---------------------------------------------------------------------- */
.kcs-pagehero {
  padding: var(--s-6) 0 var(--s-8);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-pagehero__grid {
  display: grid;
  gap: var(--s-6);
}

.kcs-pagehero__copy .kcs-page__title + .kcs-lead {
  margin-top: var(--s-4);
}

.kcs-pagehero__copy .kcs-lead + .kcs-cluster {
  margin-top: var(--s-6);
}

.kcs-pagehero__media .kcs-photo {
  aspect-ratio: 4 / 3;
}

.kcs-pagehero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .kcs-pagehero--photo .kcs-pagehero__grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--s-9);
    align-items: center;
  }
}

.kcs-section__head {
  max-width: 62ch;
  margin-bottom: var(--s-7);
}

.kcs-muted {
  color: var(--c-ink-3);
}

.kcs-routes__facts {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-topics {
  display: grid;
  border-top: 1px solid var(--c-rule-strong);
  max-width: 72ch;
}

.kcs-topics__item {
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--c-rule);
}

.kcs-topics__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--c-navy);
  text-decoration: none;
}

a.kcs-topics__title:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--c-orange);
}

.kcs-topics__item p {
  margin-top: var(--s-2);
  color: var(--c-ink-2);
}

.kcs-topics__item .kcs-link,
.kcs-topics__item .kcs-btn {
  margin-top: var(--s-3);
}

.kcs-topics__item .kcs-status {
  vertical-align: middle;
  margin-left: var(--s-2);
}

/* Two-column reading layout: copy left, facts or aside right */
.kcs-twocol {
  display: grid;
  gap: var(--s-7);
}

@media (min-width: 1024px) {
  .kcs-twocol {
    grid-template-columns: 7fr 5fr;
    gap: var(--s-10);
    align-items: start;
  }
}

.kcs-twocol__main > p + p {
  margin-top: var(--s-4);
}

.kcs-twocol__main .kcs-h3 {
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
}

.kcs-twocol__main .kcs-h3:first-child {
  margin-top: 0;
}

.kcs-twocol__main .kcs-list {
  margin-top: var(--s-4);
}

/* Photo strip: a single editorial photograph between sections */
.kcs-photostrip .kcs-photo {
  aspect-ratio: 21 / 9;
}

.kcs-photostrip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .kcs-photostrip .kcs-photo {
    aspect-ratio: 4 / 3;
  }
}

/* Institution plates (About): white plates on the warm surface */
.kcs-institutions {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 768px) {
  .kcs-institutions {
    grid-template-columns: repeat(3, 1fr);
  }
}

.kcs-institution {
  background: var(--c-white);
  padding: var(--s-6);
  border: 1px solid var(--c-rule); /* one quiet edge, like every card: no coloured top rule */
  border-radius: 10px;
}

.kcs-institution__logo {
  height: 48px;
  width: auto;
  margin-bottom: var(--s-4);
}

.kcs-institution h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--c-navy);
}

.kcs-institution p {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

/* Route chooser (Start page) */
.kcs-chooser {
  display: grid;
  gap: var(--s-3);
}

.kcs-chooser__option {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  padding: var(--s-5);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--c-ink);
  transition: border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}

.kcs-chooser__option:hover,
.kcs-chooser__option[aria-current="true"] {
  border-color: var(--c-navy);
  background: var(--c-surface);
}

.kcs-chooser__option strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--c-navy);
}

.kcs-chooser__option span {
  display: block;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-chooser__option .kcs-icon {
  grid-row: 1 / span 2;
  color: var(--c-navy);
}

/* -------------------------------------------------------------------------
   23. Forms, verification result, Skills Passport
   ---------------------------------------------------------------------- */
.kcs-mt-4 { margin-top: var(--s-4); }
.kcs-mt-6 { margin-top: var(--s-6); }

.kcs-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-navy);
  margin-bottom: var(--s-1);
}

.kcs-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s-4);
  font: inherit;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1.5px solid var(--c-rule-strong);
  border-radius: var(--radius);
}

.kcs-input:focus {
  border-color: var(--c-navy);
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.kcs-check {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  font-size: var(--fs-small);
}

.kcs-check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--c-navy);
}

.kcs-form p + p {
  margin-top: var(--s-4);
}

.kcs-form__status {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-form__status.is-error {
  color: var(--c-orange-text);
}

/* Fluent Forms inside the KCS form wrapper: tokens, not the plugin defaults */
.kcs-form__wrap .fluentform .ff-el-input--label label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-form__wrap .fluentform .ff-el-form-control {
  min-height: 48px;
  padding: 0 var(--s-4);
  font: inherit;
  color: var(--c-ink);
  border: 1.5px solid var(--c-rule-strong);
  border-radius: var(--radius);
  background: var(--c-white);
}

.kcs-form__wrap .fluentform textarea.ff-el-form-control {
  min-height: 140px;
  padding: var(--s-3) var(--s-4);
}

.kcs-form__wrap .fluentform .ff-el-form-control:focus {
  border-color: var(--c-navy);
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.kcs-form__wrap .fluentform .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--c-navy);
  background: var(--c-orange);
  border: 1.5px solid var(--c-orange);
  border-radius: var(--radius);
  transition: background-color var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.kcs-form__wrap .fluentform .ff-btn-submit:hover {
  background: var(--c-orange-deep);
  border-color: var(--c-orange-deep);
  color: var(--c-navy);
}

.kcs-form__wrap .fluentform .ff-btn-submit:active {
  transform: scale(0.98);
}

.kcs-form__wrap .fluentform .ff-el-group {
  margin-bottom: var(--s-5);
}

.kcs-form__wrap .fluentform .ff-el-tooltip,
.kcs-form__wrap .fluentform .ff-el-tooltip svg {
  color: var(--c-navy);
  fill: var(--c-navy);
}

.kcs-form__wrap .fluentform .ff-el-required::after,
.kcs-form__wrap .fluentform .ff-el-is-required .asterisk-right::after {
  color: var(--c-orange-text);
}

.kcs-form__wrap .fluentform .ff-el-is-error .text-danger,
.kcs-form__wrap .fluentform .ff-errors-in-stack {
  color: var(--c-orange-text);
  font-size: var(--fs-small);
}

.kcs-form__wrap .fluentform .ff-message-success {
  padding: var(--s-4) var(--s-5);
  background: var(--c-navy-tint);
  border: 0;
  border-radius: var(--radius);
  color: var(--c-navy);
}

/* Verification result */
.kcs-verify {
  margin-top: var(--s-7);
  padding: var(--s-6);
  border: 1px solid var(--c-rule-strong);
  border-top: 4px solid var(--c-navy);
  background: var(--c-white);
}

.kcs-verify--warning { border-top-color: var(--c-orange); }
.kcs-verify--neutral,
.kcs-verify--info { border-top-color: var(--c-rule-strong); }

.kcs-verify__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
}

.kcs-verify__uid {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--c-navy);
}

.kcs-verify__message {
  margin-top: var(--s-4);
  color: var(--c-ink-2);
}

/* A verified record reads like a register entry: label left, value right, one row each. */
.kcs-verify .kcs-facts {
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--s-5);
}

.kcs-verify .kcs-facts__item {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
}

.kcs-verify .kcs-facts dd {
  margin: 0;
}

@media (max-width: 479px) {
  .kcs-verify .kcs-facts__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

.kcs-verifyform .kcs-label {
  margin-bottom: var(--s-2);
}

/* A narrow phone cannot hold a credential field and the button on one line:
   the field takes the row and the button sits under it. */
@media (max-width: 430px) {
  .kcs-verifyform .kcs-searchform {
    flex-wrap: wrap;
  }

  .kcs-verifyform .kcs-searchform__input {
    flex: 1 1 100%;
  }

  .kcs-verifyform .kcs-searchform .kcs-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Skills Passport: the reference, shared with the verification record. */
.kcs-pp__ref code,
.kcs-record__uid code {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--c-navy);
  letter-spacing: 0.02em;
}

.kcs-tabs {
  margin-top: var(--s-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.kcs-tabs__list {
  display: flex;
  gap: var(--s-2);
  min-width: max-content;
}

.kcs-tabs__tab {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s-3);
  font-weight: 600;
  color: var(--c-ink-2);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.kcs-tabs__tab:hover {
  color: var(--c-navy);
}

.kcs-tabs__tab[aria-selected="true"] {
  color: var(--c-navy);
  border-bottom-color: var(--c-orange);
}

.kcs-passport__panels {
  padding: var(--s-7) 0 var(--section-y);
}

.kcs-passport__panel[hidden] {
  display: none;
}

.kcs-complete {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.kcs-complete__bar {
  flex: 1 1 auto;
  height: 6px;
  background: var(--c-surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.kcs-complete__bar > span {
  display: block;
  height: 100%;
  background: var(--c-navy);
}

.kcs-complete__value {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
}

.kcs-checklist {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.kcs-checklist li {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  color: var(--c-ink-2);
}

.kcs-checklist li .kcs-icon {
  color: var(--c-ink-3);
}

.kcs-checklist li.is-done {
  color: var(--c-ink);
}

.kcs-checklist li.is-done .kcs-icon {
  color: var(--c-navy);
}

.kcs-records {
  display: grid;
  margin-top: var(--s-5);
  border-top: 1px solid var(--c-rule-strong);
}

.kcs-record {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--c-rule);
}

@media (min-width: 768px) {
  .kcs-record {
    grid-template-columns: 1fr 220px;
    gap: var(--s-6);
  }
}

.kcs-record__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--c-navy);
}

.kcs-record__title .kcs-status {
  vertical-align: middle;
  margin-left: var(--s-2);
}

.kcs-record__meta {
  margin-top: var(--s-1);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-record__stamps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.kcs-record__skills {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-record__label {
  margin-top: var(--s-3);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-record__sources {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
}

.kcs-record__side {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  justify-items: start;
}

@media (min-width: 768px) {
  .kcs-record__side {
    justify-items: end;
    text-align: right;
  }
}

.kcs-record__side .kcs-link {
  min-height: 0;
}

.kcs-record__side .kcs-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.kcs-details {
  margin-top: var(--s-6);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  padding: 0 var(--s-5);
}

.kcs-details summary {
  padding: var(--s-4) 0;
  font-weight: 600;
  color: var(--c-navy);
  cursor: pointer;
  list-style: none;
}

.kcs-details summary::-webkit-details-marker {
  display: none;
}

.kcs-details summary::before {
  content: "+";
  display: inline-block;
  width: 1.25em;
  font-family: var(--f-display);
  font-weight: 700;
}

.kcs-details[open] summary::before {
  content: "\2212";
}

.kcs-details > form {
  padding: 0 0 var(--s-5);
  max-width: 48ch;
}

/* -------------------------------------------------------------------------
   24. Public experience: identity bar, catalogue, decision band, discovery
   ---------------------------------------------------------------------- */

/* Utility bar identity: the school behind the credentials, one restrained line. */
.kcs-utilbar__name {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-3);
}

.kcs-utilbar__name a {
  color: var(--c-white);
  font-weight: 600;
  text-decoration: none;
}

.kcs-utilbar__name a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--c-orange);
}

.kcs-utilbar__tagline {
  color: var(--c-on-navy-2);
  font-weight: 400;
}

.kcs-utilbar__tagline::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 var(--s-3) 3px 0;
  background: var(--c-orange);
  border-radius: 50%;
}

.kcs-drawer__identity {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-drawer__identity span {
  display: block;
  font-weight: 400;
  color: var(--c-ink-3);
}

.kcs-mega__all {
  margin-top: var(--s-4);
}

/* Chips: filter controls, pressed = navy fill. Not pills: 2px like everything else. */
.kcs-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.375rem var(--s-4);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-navy);
  font: 600 var(--fs-small) / 1 var(--f-text);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.kcs-chip:hover {
  border-color: var(--c-navy);
}

.kcs-chip:active {
  transform: scale(0.97);
}

.kcs-chip[aria-pressed="true"] {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}

.kcs-chip--area[aria-pressed="true"] {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: var(--c-navy);
}

.kcs-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-navy);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Catalogue filter bar */
.kcs-catfilter {
  position: relative;
  z-index: 20;
  background: var(--c-white);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-catfilter .kcs-shell {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
}

.kcs-catfilter__row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  margin: 0 calc(var(--gutter) * -1);
  padding: 2px var(--gutter);
}

.kcs-catfilter__row::-webkit-scrollbar {
  display: none;
}

.kcs-catfilter__row .kcs-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.kcs-catfilter__row--areas {
  align-items: center;
}

.kcs-catfilter__label {
  flex: 0 0 auto;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
  margin-right: var(--s-2);
}

.kcs-catfilter__status {
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
  min-height: 1.2em;
}

.kcs-catfilter__status:empty {
  display: none;
}

@media (min-width: 1024px) {
  .kcs-catfilter {
    position: sticky;
    top: var(--header-h);
  }

  .kcs-catfilter__row {
    flex-wrap: wrap;
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  .kcs-catfilter .kcs-shell {
    grid-template-columns: 1fr;
  }
}

/* Catalogue sections */
.kcs-cat__section .kcs-lead {
  margin-top: var(--s-3);
  max-width: 62ch;
}

.kcs-cat__head {
  max-width: 62ch;
}

.kcs-cat__section[hidden],
.kcs-cat__sheet[hidden],
.kcs-cat__row[hidden],
.kcs-cat__route[hidden],
.kcs-cat__feature[hidden] {
  display: none;
}

.kcs-cat__level {
  font-size: var(--fs-small);
}

.kcs-cat__level,
.kcs-cat__area {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-ink-3); /* orange is for actions; the area is information */
}

.kcs-cat__title {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: var(--lh-snug);
  letter-spacing: -0.012em;
  color: var(--c-navy);
  text-wrap: balance;
}

.kcs-cat__summary {
  display: block;
  color: var(--c-ink-2);
  text-wrap: pretty;
}

.kcs-cat__meta {
  display: block;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-cat__fee {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-cat__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  color: var(--c-navy);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--t-base) var(--ease-out);
}

.kcs-cat__cta .kcs-icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--t-base) var(--ease-out);
}

/* Feature: photo left, facts right. The one editorial spread on the page. */
.kcs-cat__feature {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-7);
}

.kcs-cat__feature-media .kcs-photo {
  aspect-ratio: 4 / 3;
}

.kcs-cat__feature-title {
  margin-top: var(--s-2);
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.kcs-cat__feature-title a {
  color: var(--c-navy);
  text-decoration: none;
}

.kcs-cat__feature-title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--c-orange);
}

.kcs-cat__feature-summary {
  margin-top: var(--s-4);
  font-size: var(--fs-lead);
  color: var(--c-ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}

.kcs-cat__feature .kcs-band {
  margin-top: var(--s-6);
}

.kcs-cat__feature .kcs-cluster {
  margin-top: var(--s-6);
}

@media (min-width: 1024px) {
  .kcs-cat__feature {
    grid-template-columns: 5fr 6fr;
    gap: var(--s-8);
    align-items: center;
  }
}

/* Sheets: seven career blocks on the warm surface, in two columns, white sheets, no borders. */
.kcs-cat__sheets {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
}

.kcs-cat__sheet-link {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: var(--s-2);
  height: 100%;
  padding: var(--s-6);
  background: var(--c-white);
  color: var(--c-ink);
  text-decoration: none;
  border-top: 3px solid transparent;
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.kcs-cat__sheet-link .kcs-cat__meta {
  margin-top: var(--s-2);
}

.kcs-cat__foot {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-rule);
}

/* On a phone the fee and the link each get their own line, so neither
   breaks mid-phrase ("Included in NIBS / Plus"). */
@media (max-width: 519px) {
  .kcs-cat__foot {
    flex-direction: column;
    align-items: start;
    gap: var(--s-2);
  }
}

@media (min-width: 640px) {
  .kcs-cat__sheets {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
  }
}

@media (min-width: 1024px) {
  .kcs-cat__sheets {
    grid-template-columns: repeat(2, 1fr);
  }

  .kcs-cat__sheet:first-child {
    grid-column: 1 / -1;
  }

  .kcs-cat__sheet:first-child .kcs-cat__sheet-link {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "area foot"
      "title foot"
      "summary foot"
      "meta foot";
    column-gap: var(--s-8);
  }

  .kcs-cat__sheet:first-child .kcs-cat__area { grid-area: area; }
  .kcs-cat__sheet:first-child .kcs-cat__title { grid-area: title; font-size: var(--fs-h3); }
  .kcs-cat__sheet:first-child .kcs-cat__summary { grid-area: summary; }
  .kcs-cat__sheet:first-child .kcs-cat__meta { grid-area: meta; }
  .kcs-cat__sheet:first-child .kcs-cat__foot {
    grid-area: foot;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    margin: 0;
    padding: 0;
    border: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .kcs-cat__sheet-link:hover {
    border-top-color: var(--c-orange);
  }

  .kcs-cat__sheet-link:hover .kcs-cat__cta,
  .kcs-cat__row-link:hover .kcs-cat__cta {
    text-decoration-color: var(--c-orange);
  }

  .kcs-cat__sheet-link:hover .kcs-cat__cta .kcs-icon,
  .kcs-cat__row-link:hover .kcs-cat__cta .kcs-icon {
    transform: translateX(3px);
  }
}

/* Rows: professional courses as an editorial list, hairlines only. */
.kcs-cat__rows {
  margin-top: var(--s-6);
  border-top: 1px solid var(--c-rule-strong);
}

.kcs-cat__row-link {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--c-rule);
  color: var(--c-ink);
  text-decoration: none;
}

.kcs-cat__row-main {
  display: grid;
  gap: var(--s-1);
}

.kcs-cat__row-side {
  display: grid;
  gap: var(--s-1);
  align-content: end;
}

@media (min-width: 768px) {
  .kcs-cat__row-link {
    grid-template-columns: 7fr 4fr;
    gap: var(--s-8);
    align-items: end;
  }

  .kcs-cat__row-side {
    text-align: right;
    justify-items: end;
  }
}

/* Routes: the honest blocks for what is not yet a listed course. */
.kcs-cat__routes {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-6);
  border-top: 1px solid var(--c-rule-strong);
}

.kcs-cat__route {
  padding-top: var(--s-5);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: var(--s-5);
}

.kcs-cat__route-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--c-navy);
}

.kcs-cat__route p {
  margin-top: var(--s-3);
  max-width: 60ch;
  color: var(--c-ink-2);
}

.kcs-cat__route .kcs-cluster {
  margin-top: var(--s-4);
}

@media (min-width: 768px) {
  .kcs-cat__routes {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--s-8);
  }
}

.kcs-cat__empty {
  padding: var(--section-y) var(--gutter);
}

/* Filter transitions: items fade and settle, never slide. */
.kcs-cat [data-type] {
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.kcs-cat [data-type].is-leaving {
  opacity: 0;
  transform: translateY(4px);
}

/* Decision band: the six facts a learner needs before reading anything else. */
.kcs-band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--s-5);
  border-top: 2px solid var(--c-navy);
}

.kcs-band__item {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-rule);
}

.kcs-band dt {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
}

.kcs-band dd {
  margin: 2px 0 0;
  font-weight: 600;
  color: var(--c-navy);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .kcs-band {
    grid-template-columns: repeat(3, 1fr);
  }

  .kcs-band--wide {
    grid-template-columns: repeat(6, 1fr);
  }

  .kcs-band--wide .kcs-band__item {
    border-bottom: 0;
    padding: var(--s-4) 0 0;
  }
}

/* Programme page: decision band under the intro, single start panel at the end. */
.kcs-prog__band {
  margin-top: var(--s-6);
}

.kcs-prog__startbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  margin-top: var(--s-6);
}

.kcs-prog__startbar .kcs-muted {
  font-size: var(--fs-small);
}

.kcs-prog__header .kcs-notice {
  margin-top: var(--s-6);
}

.kcs-startpanel {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-8);
  padding: var(--s-6);
  background: var(--c-navy);
  color: var(--c-white);
}

.kcs-startpanel h2 {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--c-white);
}

.kcs-startpanel p {
  color: var(--c-on-navy-2);
  max-width: 52ch;
}

.kcs-startpanel__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: var(--fs-small);
  color: var(--c-on-navy-2);
}

.kcs-startpanel__facts strong {
  color: var(--c-white);
}

@media (min-width: 768px) {
  .kcs-startpanel {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: var(--s-7);
  }

  .kcs-startpanel .kcs-cluster {
    justify-self: end;
  }
}

/* Homepage: at-a-glance strip under the hero. */
.kcs-glance {
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  background: var(--c-white);
}

.kcs-glance__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  list-style: none;
  padding: 0;
}

.kcs-glance__list li {
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--c-rule);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-glance__list li strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-glance__list li:nth-last-child(-n + 1) {
  border-bottom: 0;
}

@media (min-width: 768px) {
  .kcs-glance__list {
    grid-template-columns: repeat(5, 1fr);
  }

  .kcs-glance__list li {
    padding: var(--s-5) var(--s-5) var(--s-5) 0;
    border-bottom: 0;
    border-right: 1px solid var(--c-rule);
  }

  .kcs-glance__list li + li {
    padding-left: var(--s-5);
  }

  .kcs-glance__list li:last-child {
    border-right: 0;
  }
}

/* Homepage: course discovery. Feature left, list right, one line of routes below. */
.kcs-discover__head {
  display: grid;
  gap: var(--s-3);
  max-width: 62ch;
}

.kcs-discover__grid {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-7);
}

.kcs-discover__list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--c-rule-strong);
}

.kcs-discover__list .kcs-cat__row-link {
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding: var(--s-4) 0;
}

.kcs-discover__list .kcs-cat__row-side {
  text-align: left;
  justify-items: start;
}

.kcs-discover__list .kcs-cat__title {
  font-size: 1.375rem;
}

.kcs-discover__list .kcs-cat__summary {
  font-size: var(--fs-small);
}

.kcs-discover__routes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-6);
  list-style: none;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--c-rule);
  align-items: center;
}

.kcs-discover__routes li:first-child {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
  margin-right: var(--s-2);
}

.kcs-discover__routes a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s-4);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  color: var(--c-navy);
  font-weight: 600;
  font-size: var(--fs-small);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.kcs-discover__routes a:hover {
  border-color: var(--c-navy);
  background: var(--c-surface);
}

.kcs-discover__routes a strong {
  color: var(--c-orange-text);
  margin-right: var(--s-2);
}

.kcs-discover__more {
  margin-top: var(--s-6);
}

@media (min-width: 1024px) {
  .kcs-discover__grid {
    grid-template-columns: 6fr 5fr;
    gap: var(--s-8);
    align-items: start;
  }

  .kcs-discover__grid .kcs-cat__feature {
    margin-top: 0;
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }

  .kcs-discover__grid .kcs-cat__feature-media .kcs-photo {
    aspect-ratio: 16 / 10;
  }
}

/* Homepage: career blocks, stacked. Foundation first, then the seven, drawn as one system. */
.kcs-stack {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-7);
}

.kcs-stack__foundation {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--c-navy);
  color: var(--c-white);
}

.kcs-stack__foundation .kcs-cat__area {
  color: var(--c-orange);
}

.kcs-stack__foundation a {
  color: var(--c-white);
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  text-decoration: none;
  line-height: var(--lh-snug);
}

.kcs-stack__foundation a:hover {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-color: var(--c-orange);
}

.kcs-stack__foundation p {
  color: var(--c-on-navy-2);
  max-width: 60ch;
}

.kcs-stack__blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  list-style: none;
  padding: 0;
}

.kcs-stack > *,
.kcs-stack__blocks > * {
  min-width: 0;
}

.kcs-stack__blocks strong {
  overflow-wrap: anywhere;
}

.kcs-stack__blocks a {
  display: grid;
  gap: var(--s-1);
  height: 100%;
  padding: var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease-out);
}

.kcs-stack__blocks a:hover {
  border-color: var(--c-navy);
}

.kcs-stack__blocks strong {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: var(--lh-snug);
  color: var(--c-navy);
}

.kcs-stack__blocks span {
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-stack__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  align-items: center;
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

@media (min-width: 768px) {
  .kcs-stack__blocks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kcs-stack__blocks li:nth-child(n + 5) {
    grid-column: span 1;
  }
}

@media (min-width: 1024px) {
  .kcs-stack {
    grid-template-columns: 4fr 8fr;
    gap: var(--s-6);
    align-items: stretch;
  }

  .kcs-stack__blocks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 1fr);
  }

  .kcs-stack__foot {
    grid-column: 1 / -1;
  }
}

/* Homepage: Skills Passport preview, a real record drawn at small scale. */
.kcs-passportmock {
  background: var(--c-white);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  padding: var(--s-5);
  box-shadow: 0 18px 40px -24px rgba(3, 9, 75, 0.35);
}

.kcs-passportmock__head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-passportmock__head strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.125rem;
  color: var(--c-navy);
}

.kcs-passportmock__head span {
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-passportmock__tabs {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-4);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
  list-style: none;
  padding: 0;
}

.kcs-passportmock__tabs li[aria-current] {
  color: var(--c-navy);
  box-shadow: inset 0 -2px 0 var(--c-orange);
  padding-bottom: 2px;
}

.kcs-passportmock__rows {
  list-style: none;
  padding: 0;
  margin-top: var(--s-4);
}

.kcs-passportmock__rows li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-1) var(--s-4);
  align-items: center;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-small);
}

.kcs-passportmock__rows strong {
  display: block;
  color: var(--c-navy);
}

.kcs-passportmock__rows span {
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-passportmock__verify {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-passportmock__verify code {
  font-family: var(--f-text);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-navy);
}

/* Homepage: the human strip. Three photographs, one wide, no captions on the images. */
.kcs-people {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.kcs-people .kcs-photo {
  aspect-ratio: 4 / 3;
}

.kcs-people__wide .kcs-photo {
  aspect-ratio: 16 / 9;
}

@media (min-width: 768px) {
  .kcs-people {
    grid-template-columns: repeat(2, 1fr);
  }

  .kcs-people__wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .kcs-people {
    grid-template-columns: 7fr 5fr 5fr;
    grid-template-rows: auto;
    gap: var(--s-4);
  }

  .kcs-people__wide {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .kcs-people__wide .kcs-photo {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* Footer: contact line */
.kcs-footer__contact {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--c-on-navy-rule);
  color: var(--c-on-navy-2);
  font-size: var(--fs-small);
}

.kcs-footer__contact p:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
}

.kcs-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-white);
  text-decoration: none;
  font-weight: 500;
}

.kcs-footer__contact a .kcs-icon {
  width: 1rem;
  height: 1rem;
  color: var(--c-orange);
}

.kcs-footer__contact a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--c-orange);
}

@media (min-width: 768px) {
  .kcs-footer__contact {
    grid-template-columns: auto 1fr;
    gap: var(--s-8);
    align-items: center;
  }
}

/* Search results: type labels */
.kcs-results__type {
  display: inline-block;
  margin-bottom: var(--s-1);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-orange-text);
}

/* Homepage: passport section on navy */
.kcs-passportsec__grid {
  display: grid;
  gap: var(--s-7);
}

.kcs-passportsec__grid > *,
.kcs-passportmock {
  min-width: 0;
}

.kcs-passportsec__copy .kcs-lead {
  margin-top: var(--s-4);
  color: var(--c-on-navy-2);
  max-width: 54ch;
}

.kcs-passportsec__steps {
  counter-reset: pstep;
  list-style: none;
  padding: 0;
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-3);
  max-width: 52ch;
}

.kcs-passportsec__steps li {
  counter-increment: pstep;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0 var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-on-navy-rule);
}

.kcs-passportsec__steps li::before {
  content: counter(pstep);
  grid-row: 1 / span 2;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-orange);
}

.kcs-passportsec__steps strong {
  color: var(--c-white);
}

.kcs-passportsec__steps span {
  color: var(--c-on-navy-2);
  font-size: var(--fs-small);
}

.kcs-passportsec__copy .kcs-cluster {
  margin-top: var(--s-6);
}

@media (min-width: 1024px) {
  .kcs-passportsec__grid {
    grid-template-columns: 6fr 5fr;
    gap: var(--s-9);
    align-items: center;
  }
}

/* Homepage: organisations, two columns, heading left */

/* Homepage: the model grid without the states list */
.kcs-model__grid--simple {
  margin-top: var(--s-7);
}

/* Start learning: chosen programme panel */
.kcs-start__chosen {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding: var(--s-5);
  background: var(--c-surface);
}

.kcs-start__chosen strong {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--c-navy);
}

.kcs-start__chosen .kcs-band {
  margin-top: var(--s-3);
  grid-template-columns: 1fr;
}

.kcs-start__chosen .kcs-cluster {
  margin-top: var(--s-3);
}

.kcs-start__main > p {
  margin-top: var(--s-3);
}

.kcs-start__main > .kcs-cluster {
  margin-top: var(--s-5);
}

.kcs-start .kcs-chooser {
  margin-top: var(--s-4);
}

.kcs-stack__blocks li:last-child a {
  background: transparent;
  border-style: dashed;
}

/* Six primary items must fit between 1024 and 1279 without wrapping or scrolling. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .kcs-masthead__inner {
    gap: var(--s-3);
  }

  .kcs-logo img {
    height: 28px;
  }

  .kcs-nav__list {
    gap: 0;
  }

  .kcs-nav__link {
    padding: 0 5px;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .kcs-masthead__cta {
    min-height: 44px;
    padding-inline: var(--s-3);
    font-size: 0.875rem;
  }

  .kcs-masthead__actions {
    gap: var(--s-1);
  }
}

/* Between 1280 and 1379 the full-size items still overrun by a few pixels;
   a half step keeps them on one row. */
@media (min-width: 1280px) and (max-width: 1379px) {
  .kcs-masthead__inner {
    gap: var(--s-4);
  }

  .kcs-nav__list {
    gap: 0;
  }

  .kcs-nav__link {
    padding: 0 var(--s-2);
    font-size: 0.9375rem;
    white-space: nowrap;
  }

  .kcs-masthead__cta {
    padding-inline: var(--s-4);
  }
}

/* -------------------------------------------------------------------------
   25. Merchandising: explain strip, plans, library, tiles, marks, discover,
       footer. Larger type, richer cards, tighter composition.
   ---------------------------------------------------------------------- */

/* Marks: small verified facts with a check. Never a pill. */
.kcs-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-mark .kcs-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--c-orange);
}

.kcs-prog__marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5);
}

/* Explain strip: the four kinds of learning, in one line, each a filter. */
.kcs-explain {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-explain__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  list-style: none;
  padding: var(--s-5) 0;
}

.kcs-explain__item {
  display: grid;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: var(--s-4);
  border: 0;
  border-top: 3px solid var(--c-navy);
  background: var(--c-white);
  text-align: left;
  font: inherit;
  color: var(--c-ink-2);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.kcs-explain__item strong {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-explain__item span {
  font-size: var(--fs-small);
  text-wrap: pretty;
}

.kcs-explain__item:hover {
  border-top-color: var(--c-orange);
}

.kcs-explain__item:active {
  transform: scale(0.98);
}

@media (min-width: 1024px) {
  .kcs-explain__list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    padding: var(--s-6) 0;
  }

  .kcs-explain__item {
    padding: var(--s-5);
  }
}

/* Catalogue head with an action on the right */
.kcs-cat__head--split {
  display: grid;
  gap: var(--s-4);
  max-width: none;
  align-items: end;
}

.kcs-cat__head--split > div {
  max-width: 62ch;
}

@media (min-width: 1024px) {
  .kcs-cat__head--split {
    grid-template-columns: 1fr auto;
    gap: var(--s-8);
  }
}

/* Skills Pass library rows */
.kcs-cat__skills {
  list-style: none;
  padding: 0;
  margin-top: var(--s-4);
  border-top: 1px solid var(--c-rule-strong);
}

.kcs-cat__skill-link {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-rule);
  color: var(--c-ink);
  text-decoration: none;
}

.kcs-cat__skill-main {
  display: grid;
  gap: 2px;
}

.kcs-cat__skill-main .kcs-cat__title {
  font-size: 1.25rem;
}

.kcs-cat__skill-marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}

.kcs-cat__skill-marks .kcs-mark {
  font-size: var(--fs-meta);
}

@media (min-width: 1024px) {
  .kcs-cat__skill-link {
    grid-template-columns: 5fr 5fr auto;
    align-items: center;
    gap: var(--s-6);
  }

  .kcs-cat__skill-marks {
    flex-wrap: nowrap;
  }
}

.kcs-cat__skills--compact {
  border-top: 0;
  margin-top: var(--s-2);
}

/* One rule per row, with the "Free" mark on the same line as the title. The
   border belongs to the row, not to the link, so it runs the full width. */
.kcs-cat__skills--compact li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-rule);
}

.kcs-cat__skills--compact li a {
  display: block;
  min-width: 0;
  padding: 0;
  border-bottom: 0;
  color: var(--c-navy);
  font-weight: 600;
  text-decoration: none;
}

.kcs-cat__skills--compact .kcs-mark {
  flex: 0 0 auto;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-cat__skills--compact .kcs-mark .kcs-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.kcs-cat__skills--compact li a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--c-orange);
}



.kcs-library__area {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c-navy);
}

.kcs-library__area span {
  font: 600 var(--fs-meta) var(--f-text);
  color: var(--c-ink-3);
}

.kcs-library__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-6);
}

.kcs-library__jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s-4);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  color: var(--c-navy);
  font-weight: 600;
  font-size: var(--fs-small);
  text-decoration: none;
}

.kcs-library__jump a:hover {
  border-color: var(--c-navy);
  background: var(--c-surface);
}

.kcs-library__group {
  margin-top: var(--s-7);
}

/* How it works: four numbered steps in a row */
.kcs-how__steps {
  counter-reset: how;
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
}

.kcs-how__steps li {
  counter-increment: how;
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 2px solid var(--c-navy);
}

.kcs-how__steps li::before {
  content: counter(how, decimal-leading-zero);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--c-orange-text);
}

.kcs-how__steps strong {
  font-family: var(--f-display);
  font-size: 1.375rem;
  line-height: var(--lh-snug);
  color: var(--c-navy);
}

.kcs-how__steps span {
  color: var(--c-ink-2);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .kcs-how__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
  }
}

@media (min-width: 1024px) {
  .kcs-how__steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Plans: three offers, the middle one leads. */
.kcs-plans__list {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
  list-style: none;
  padding: 0;
}

.kcs-plan {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--c-white);
  border-top: 4px solid var(--c-navy);
}

.kcs-plan--lead {
  border-top-color: var(--c-orange);
  box-shadow: 0 24px 48px -32px rgba(3, 9, 75, 0.35);
}

.kcs-plan__months {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink-3);
}

.kcs-plan__months strong {
  font-family: var(--f-display);
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-navy);
}

.kcs-plan__title {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--c-navy);
}

.kcs-plan__suits {
  color: var(--c-ink-2);
  min-height: 3.2em;
}

.kcs-plan__price {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-plan__includes {
  display: grid;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-plan__includes li {
  display: flex;
  gap: var(--s-2);
  align-items: start;
}

.kcs-plan__includes .kcs-icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 2px;
  color: var(--c-orange);
}

.kcs-plan .kcs-btn {
  margin-top: var(--s-3);
}

@media (min-width: 1024px) {
  .kcs-plans__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
    align-items: stretch;
  }
}

.kcs-plan {
  min-width: 0;
}

.kcs-plan .kcs-btn {
  white-space: normal;
}

.kcs-plans__pay {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-rule-strong);
}

.kcs-plans__methods {
  display: grid;
  gap: var(--s-4);
  list-style: none;
  padding: 0;
}

.kcs-plans__methods li {
  display: grid;
  gap: 2px;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-rule);
}

.kcs-plans__methods strong {
  font-family: var(--f-display);
  font-size: 1.125rem;
  color: var(--c-navy);
}

.kcs-plans__methods span {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-plans__methods .kcs-status {
  justify-self: start;
  margin-top: var(--s-2);
}

.kcs-plans__pay .kcs-muted {
  max-width: 70ch;
}

@media (min-width: 768px) {
  .kcs-plans__methods {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
  }

  .kcs-plans__methods li {
    border-top: 2px solid var(--c-navy);
  }
}

/* Qualification tiles: comparison friendly, status first. */
.kcs-cat__tiles {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
  list-style: none;
  padding: 0;
}

.kcs-cat__tile-link {
  display: grid;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease-out);
}

.kcs-section--surface .kcs-cat__tile-link {
  border-color: transparent;
}

.kcs-cat__tile-link:hover {
  border-color: var(--c-navy);
}

.kcs-cat__tile-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.kcs-cat__tile-facts {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-cat__tile-facts span {
  display: grid;
}

.kcs-cat__tile-facts strong {
  font-family: var(--f-display);
  font-size: 1.25rem;
  color: var(--c-navy);
}

@media (min-width: 640px) {
  .kcs-cat__tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
  }
}

@media (min-width: 1024px) {
  .kcs-cat__tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Discover: groups, the free / Skills Pass pair */
.kcs-discover__group {
  margin-top: var(--s-7);
}

.kcs-discover__label {
  display: inline-block;
  padding-bottom: var(--s-2);
  border-bottom: 3px solid var(--c-orange);
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-discover__group .kcs-discover__grid {
  margin-top: var(--s-5);
}

.kcs-discover__pair {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
}

.kcs-discover__panel {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: var(--s-6);
}

.kcs-discover__panel--free {
  background: var(--c-surface);
}

.kcs-discover__panel--pass {
  background: var(--c-navy);
  color: var(--c-white);
}

.kcs-discover__panel--pass .kcs-discover__label {
  color: var(--c-white);
}

.kcs-discover__panel--pass p {
  color: var(--c-on-navy-2);
}

.kcs-discover__big {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-navy);
  text-wrap: balance;
}

.kcs-discover__panel--pass .kcs-discover__big {
  color: var(--c-white);
}

.kcs-discover__panel p:not(.kcs-discover__big) {
  color: var(--c-ink-2);
  max-width: 48ch;
}

.kcs-discover__skills {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--c-on-navy-rule);
}

.kcs-discover__skills a {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-on-navy-rule);
  color: var(--c-white);
  font-weight: 600;
  text-decoration: none;
}

.kcs-discover__skills small {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--c-on-navy-2);
}

.kcs-discover__skills .kcs-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--c-orange);
  transition: transform var(--t-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .kcs-discover__skills a:hover span {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--c-orange);
  }

  .kcs-discover__skills a:hover .kcs-icon {
    transform: translateX(3px);
  }
}

.kcs-discover__panel .kcs-cluster {
  margin-top: var(--s-2);
}

@media (min-width: 1024px) {
  .kcs-discover__pair {
    grid-template-columns: 5fr 7fr;
    gap: var(--s-5);
  }

  .kcs-discover__panel {
    padding: var(--s-7);
  }
}

/* Footer: a close, not a sitemap. */
.kcs-footer {
  padding-top: var(--s-9);
}

.kcs-footer__top {
  padding-bottom: var(--s-8);
}

.kcs-footer__mission {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 34ch;
  color: var(--c-white);
}

.kcs-footer__trio {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
  list-style: none;
  padding: 0;
}

.kcs-footer__trio li {
  display: grid;
  gap: 2px;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-on-navy-rule);
  font-size: var(--fs-small);
  color: var(--c-on-navy-2);
}

.kcs-footer__trio strong {
  color: var(--c-white);
  font-family: var(--f-display);
  font-size: 1.0625rem;
}

.kcs-footer__partners {
  margin-top: var(--s-6);
}

.kcs-footer__heading {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  letter-spacing: 0;
  color: var(--c-white);
  margin-bottom: var(--s-4);
}

.kcs-footer__group a {
  font-size: var(--fs-body);
  color: var(--c-on-navy-2);
}

.kcs-footer__group a:hover {
  color: var(--c-white);
}

.kcs-footer__group li + li {
  margin-top: var(--s-3);
}

/* On touch screens every footer link is a full 44px target. The rows keep
   their rhythm: the target's own height replaces the gap between items. */
@media (max-width: 1023.98px), (pointer: coarse) {
  .kcs-footer__group li + li {
    margin-top: 0;
  }

  .kcs-footer__group a,
  .kcs-footer__contact a,
  .kcs-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .kcs-footer__legal {
    gap: 0 var(--s-5);
  }
}

@media (min-width: 768px) {
  .kcs-footer__trio {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large buttons: the hero and the close. */
.kcs-btn--lg {
  min-height: 58px;
  padding: 0 1.75rem;
  font-size: 1.125rem;
}

/* Seven items never fit; six do, on one line, from 1280 up. */
@media (min-width: 1280px) {
  .kcs-nav__link {
    white-space: nowrap;
    padding: 0 var(--s-3);
    font-size: 0.9375rem;
  }
}

/* Footer separation from a navy close, and tidy trio */
.kcs-footer {
  border-top: 1px solid var(--c-on-navy-rule);
  background: var(--c-navy-deep);
}

.kcs-footer__trio li {
  align-content: start;
}

.kcs-plan__months {
  min-height: 3.25rem;
}

/* Small screens: mock tabs scroll, skills rows drop the area label */
.kcs-passportmock__tabs {
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.kcs-passportmock__tabs::-webkit-scrollbar {
  display: none;
}

@media (max-width: 639px) {
  .kcs-discover__skills a {
    grid-template-columns: 1fr auto;
  }

  .kcs-discover__skills small {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   21. Motion preferences
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Reduced, not removed: colour and opacity feedback stays, movement goes. */
  html {
    scroll-behavior: auto;
  }

  .kcs-btn,
  .kcs-btn .kcs-icon,
  .kcs-link .kcs-icon,
  .kcs-iconbtn,
  .kcs-routes__arrow .kcs-icon,
  .kcs-mega__photo img,
  .kcs-nav__chevron,
  .kcs-drawer__toggle .kcs-icon {
    transition-property: background-color, color, border-color, text-decoration-color;
  }

  .kcs-btn:active,
  .kcs-iconbtn:active,
  .kcs-btn:hover .kcs-icon,
  .kcs-link:hover .kcs-icon,
  .kcs-routes__link:hover .kcs-routes__arrow .kcs-icon,
  .kcs-mega__featured:hover .kcs-mega__photo img {
    transform: none;
  }

  .kcs-nav__link::after {
    transition: none;
  }

  .kcs-cat [data-type] {
    transition-property: opacity;
  }

  .kcs-cat [data-type].is-leaving {
    transform: none;
  }

  .kcs-chip:active {
    transform: none;
  }

  .kcs-mega {
    transition: opacity var(--t-base) var(--ease-out);
    translate: none;
  }

  .kcs-drawer {
    transform: none;
    transition: opacity var(--t-base) var(--ease-out);
    opacity: 0;
  }

  .kcs-drawer.is-open {
    opacity: 1;
  }

  .kcs-rail.will-reveal .kcs-rail__stage::before,
  .kcs-rail.will-reveal .kcs-rail__stage > *,
  .kcs-rail.will-reveal .kcs-rail__stage::after {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   26. Role-first: the question, the role card, the explorer, the role and
       skill pages, the Workplace Lab drawn, recognition, campus, plans.
   ---------------------------------------------------------------------- */

/* Shared: a section head with an action on the right. */
.kcs-section__head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  max-width: none;
}

.kcs-section__head--split > div {
  max-width: 62ch;
}

.kcs-h4 {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.35;
  color: var(--c-navy);
}

/* Chips as a row. Plain chips are facts, not controls. */
.kcs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
}

.kcs-chips a.kcs-chip {
  text-decoration: none;
}

.kcs-chips--plain .kcs-chip {
  cursor: default;
  background: var(--c-surface);
  border-color: var(--c-rule);
}

.kcs-chips--plain .kcs-chip:hover {
  border-color: var(--c-rule);
}

.kcs-chip--skill {
  min-height: 34px;
  padding-inline: var(--s-3);
  background: var(--c-surface);
  border-color: var(--c-rule);
  font-size: var(--fs-meta);
}

.kcs-chip--skill:hover {
  border-color: var(--c-orange);
  background: var(--c-white);
}

.kcs-chip--more {
  min-height: 34px;
  padding-inline: var(--s-3);
  border-style: dashed;
  color: var(--c-ink-3);
  font-size: var(--fs-meta);
  cursor: default;
}

.kcs-chip--more:hover {
  border-color: var(--c-rule-strong);
}

.kcs-link--external .kcs-icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.3em;
}

/* Hero: the question. */
.kcs-become {
  position: relative;
  margin-top: var(--s-6);
}

.kcs-become__label {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  letter-spacing: -0.012em;
  color: var(--c-navy);
}

.kcs-become__field {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 2px solid var(--c-navy);
  border-radius: var(--radius);
  background: var(--c-white);
}

.kcs-become__field:focus-within {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.kcs-become__icon {
  position: absolute;
  left: var(--s-4);
  top: 50%;
  translate: 0 -50%;
  width: 1.375rem;
  height: 1.375rem;
  color: var(--c-ink-3);
  pointer-events: none;
}

.kcs-become__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  padding: 0 var(--s-3) 0 calc(var(--s-4) + 1.375rem + var(--s-3));
  border: 0;
  background: transparent;
  color: var(--c-ink);
  font: 400 var(--fs-body) / 1.4 var(--f-text);
}

.kcs-become__input::placeholder {
  color: var(--c-ink-3);
}

.kcs-become__input:focus {
  outline: none;
}

.kcs-become__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.kcs-become__submit {
  flex: none;
  margin: 4px;
  min-height: 48px;
}

.kcs-become__list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: var(--s-2);
  list-style: none;
  background: var(--c-white);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -24px rgba(3, 9, 75, 0.35);
}

.kcs-become__item a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  border-radius: var(--radius);
  color: var(--c-ink);
  text-decoration: none;
}

.kcs-become__item a:hover,
.kcs-become__item[aria-selected="true"] a {
  background: var(--c-surface);
}

.kcs-become__type {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-orange-text);
}

.kcs-become__item strong {
  color: var(--c-navy);
}

.kcs-become__item small {
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-become__item--more a {
  grid-template-columns: 1fr;
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-intents {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.kcs-chip--intent {
  min-height: 36px;
  padding-inline: var(--s-3);
  border-color: var(--c-rule);
  background: var(--c-surface);
  font-size: var(--fs-meta);
  text-decoration: none;
}

.kcs-chip--intent:hover {
  background: var(--c-white);
  border-color: var(--c-navy);
}

@media (min-width: 1024px) {
  .kcs-hero--become .kcs-hero__copy {
    grid-column: shell-start / span 7;
    padding-right: var(--s-8);
  }

  .kcs-hero--become .kcs-hero__media {
    grid-column: 9 / full-end;
  }

  .kcs-hero--become .kcs-hero__title {
    font-size: clamp(2.5rem, 1.2rem + 3.4vw, 4.25rem);
  }

  .kcs-hero--become .kcs-hero__lead {
    max-width: 44ch;
  }
}

/* Role cards. White sheets on the warm surface; the facts a decision needs. */
.kcs-roles {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-7) 0 0;
  padding: 0;
  list-style: none;
}

.kcs-role {
  min-width: 0;
}

.kcs-role__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  height: 100%;
  padding: var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  border-top: 3px solid var(--c-navy);
  border-radius: var(--radius);
  transition: border-color var(--t-base) var(--ease-out);
}

.kcs-section--surface .kcs-role__card,
.kcs-explorer__results .kcs-role__card {
  border-color: transparent;
  border-top-color: var(--c-navy);
}

.kcs-role__meta {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-orange-text);
}

.kcs-role__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--c-navy);
  text-wrap: balance;
}

.kcs-role__link {
  color: inherit;
  text-decoration: none;
}

.kcs-role__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.kcs-role__tagline {
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.kcs-role__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-2);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-role__facts span + span::before {
  content: "\00B7";
  margin-right: var(--s-3);
}

.kcs-role__skills {
  position: relative;
  z-index: 2;
  margin-top: var(--s-3);
}

.kcs-role__jobs {
  margin-top: auto;
  padding-top: var(--s-4);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--c-ink-2);
  border-top: 1px solid var(--c-rule);
}

.kcs-role__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-2);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--c-navy);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--t-base) var(--ease-out);
}

.kcs-role__cta .kcs-icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--t-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .kcs-role__card:hover {
    border-top-color: var(--c-orange);
  }

  .kcs-role__card:hover .kcs-role__cta {
    text-decoration-color: var(--c-orange);
  }

  .kcs-role__card:hover .kcs-role__cta .kcs-icon {
    transform: translateX(3px);
  }
}

.kcs-role__card:focus-within {
  border-top-color: var(--c-orange);
}

/* On phones the homepage row scrolls sideways; the explorer stacks. */
.kcs-roles--scroll {
  grid-auto-flow: column;
  grid-auto-columns: min(84vw, 340px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  padding-bottom: var(--s-3);
  scrollbar-width: thin;
  scrollbar-color: var(--c-rule-strong) transparent;
}

.kcs-roles--scroll > .kcs-role {
  scroll-snap-align: start;
}

.kcs-careers__more {
  margin-top: var(--s-6);
}

@media (min-width: 768px) {
  .kcs-roles,
  .kcs-roles--scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    gap: var(--s-5);
  }
}

@media (min-width: 1024px) {
  .kcs-roles,
  .kcs-roles--scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kcs-roles--related {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
  }

  .kcs-roles--related .kcs-role__card {
    padding: var(--s-4);
  }

  .kcs-roles--related .kcs-role__tagline,
  .kcs-roles--related .kcs-role__skills,
  .kcs-roles--related .kcs-role__jobs {
    display: none;
  }
}

.kcs-prog__sections .kcs-roles--related {
  margin-top: var(--s-5);
}

.kcs-prog__sections .kcs-roles--related .kcs-role__card {
  background: var(--c-surface);
  border-color: transparent;
  border-top-color: var(--c-navy);
}

/* Not sure? Four interests, as a decision list. */

/* Skill topics. */
.kcs-skillgrid {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcs-skillcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--c-white);
  border-radius: var(--radius);
  border-bottom: 3px solid transparent;
  transition: border-color var(--t-base) var(--ease-out);
}

.kcs-section:not(.kcs-section--surface) .kcs-skillcard {
  background: var(--c-surface);
}

.kcs-skillcard__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-navy);
}

.kcs-skillcard__link {
  color: inherit;
  text-decoration: none;
}

.kcs-skillcard__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.kcs-skillcard__summary {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  line-height: 1.45;
}

.kcs-skillcard__roles {
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: var(--fs-meta);
  color: var(--c-ink-2);
  line-height: 1.5;
}

.kcs-skillcard__roles span {
  font-weight: 600;
  color: var(--c-orange-text);
}

@media (hover: hover) and (pointer: fine) {
  .kcs-skillcard:hover {
    border-bottom-color: var(--c-orange);
  }
}

.kcs-skillcard:focus-within {
  border-bottom-color: var(--c-orange);
}

@media (min-width: 640px) {
  .kcs-skillgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
  }
}

@media (min-width: 1024px) {
  .kcs-skillgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kcs-skillsec__group + .kcs-skillsec__group {
  margin-top: var(--s-8);
}

.kcs-skillsec__group .kcs-skillgrid {
  margin-top: var(--s-5);
}

/* The four kinds of learning, and the three service models. */
.kcs-kinds {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcs-kinds li {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-rule-strong);
}

.kcs-kinds strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--c-navy);
}

.kcs-kinds span {
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.kcs-kinds small {
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-kinds .kcs-link {
  margin-top: var(--s-1);
  justify-self: start;
}

@media (min-width: 640px) {
  .kcs-kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) var(--s-5);
  }
}

@media (min-width: 1024px) {
  .kcs-kinds {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kcs-kinds--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Two-column bullet list. */
@media (min-width: 768px) {
  .kcs-list--two {
    columns: 2;
    column-gap: var(--s-7);
    max-width: none;
  }

  .kcs-list--two li {
    break-inside: avoid;
  }
}

/* The Workplace Lab, drawn. A window with the task on the left and the
   review on the right, all real vocabulary, labelled as an example. */

.kcs-labmock {
  display: grid;
  margin: 0;
  background: var(--c-white);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.kcs-labmock__task {
  padding: var(--s-5);
}

.kcs-labmock__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-labmock__crumb {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
}

.kcs-labmock__title {
  margin-top: var(--s-4);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--c-navy);
}

.kcs-labmock__brief {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-labmock__cols {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-5);
}

.kcs-labmock__h {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-labmock__files {
  display: grid;
  gap: var(--s-1);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-meta);
}

.kcs-labmock__files li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) 0;
  color: var(--c-ink);
}

.kcs-labmock__files .kcs-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--c-navy);
}

.kcs-labmock__steps {
  margin: var(--s-2) 0 0;
  padding-left: 1.25rem;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--c-ink);
}

.kcs-labmock__steps li + li {
  margin-top: var(--s-1);
}

.kcs-labmock__steps li::marker {
  font-weight: 700;
  color: var(--c-orange-text);
}

.kcs-labmock__review {
  padding: var(--s-5);
  background: var(--c-surface);
  border-top: 1px solid var(--c-rule);
}

.kcs-labmock__files--sub + .kcs-labmock__h {
  margin-top: var(--s-5);
}

.kcs-labmock__feedback {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.kcs-labmock__feedback li {
  padding: var(--s-3) var(--s-4);
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
}

.kcs-labmock__fbhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
}

.kcs-labmock__feedback p {
  margin-top: var(--s-2);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--c-ink);
}

.kcs-labmock__caption {
  grid-column: 1 / -1;
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

@media (min-width: 640px) {
  .kcs-labmock__cols {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {

  .kcs-labmock {
    grid-template-columns: 3fr 2fr;
  }

  .kcs-labmock__review {
    border-top: 0;
    border-left: 1px solid var(--c-rule);
  }
}

.kcs-labtasks {
  display: grid;
  gap: var(--s-6);
}

.kcs-labtasks__list {
  margin: var(--s-3) 0 0;
  padding-left: 1.25rem;
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.kcs-labtasks__list li + li {
  margin-top: var(--s-2);
}

.kcs-labtasks__list li::marker {
  font-weight: 700;
  color: var(--c-orange-text);
}

@media (min-width: 768px) {
  .kcs-labtasks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-7);
  }
}

/* Recognition on the homepage and the professional bodies. */

.kcs-concepts {
  counter-reset: concept;
  display: grid;
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-rule-strong);
}

.kcs-concepts__item {
  counter-increment: concept;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-rule);
}

.kcs-concepts__item::before {
  content: counter(concept, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--c-orange-text);
}

.kcs-concepts__item strong {
  color: var(--c-navy);
}

.kcs-concepts__item span {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  line-height: 1.5;
}

.kcs-concepts--page {
  margin-top: 0;
}

.kcs-body {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-6);
  margin-top: var(--s-6);
  border-top: 1px solid var(--c-rule-strong);
}

.kcs-body__name {
  color: var(--c-ink-2);
}

.kcs-body__field {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-orange-text);
}

.kcs-body .kcs-navigator {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .kcs-body {
    grid-template-columns: 4fr 8fr;
    gap: var(--s-4) var(--s-8);
  }

  .kcs-body .kcs-cluster {
    grid-column: 2;
  }
}

/* The navigator: label above value, hairlines between. */
.kcs-navigator {
  display: grid;
  margin: var(--s-5) 0 0;
  border-top: 1px solid var(--c-rule-strong);
}

.kcs-navigator__row {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-rule);
}

.kcs-navigator__row dt {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-ink-3);
}

.kcs-navigator__row dd {
  margin: 0;
  color: var(--c-ink);
  line-height: 1.5;
  max-width: 66ch;
}

.kcs-navigator + .kcs-cluster {
  margin-top: var(--s-5);
}

@media (min-width: 768px) {
  .kcs-navigator__row {
    grid-template-columns: 14rem 1fr;
    gap: var(--s-4);
  }

  .kcs-navigator--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-7);
  }

  .kcs-navigator--two .kcs-navigator__row {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }
}

/* The pathway, drawn as a rail with markers. The last marker is orange. */
.kcs-pathway {
  position: relative;
  display: grid;
  gap: var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0 0 0 calc(var(--s-5) + 12px);
  list-style: none;
}

.kcs-pathway::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--c-navy);
}

.kcs-pathway__step {
  position: relative;
  display: grid;
  gap: 2px;
}

.kcs-pathway__step::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--s-5) + 12px));
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--c-navy);
  outline: 3px solid var(--c-white);
}

.kcs-pathway__step:last-child::before {
  background: var(--c-orange);
}

.kcs-pathway__name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--c-navy);
}

.kcs-pathway__text {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  line-height: 1.5;
  max-width: 60ch;
}

@media (min-width: 1024px) {
  .kcs-pathway {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--s-4);
    padding: calc(var(--s-4) + 12px) 0 0;
  }

  .kcs-pathway::before {
    left: 6px;
    right: 6px;
    top: 5px;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .kcs-pathway__step::before {
    left: 0;
    top: calc(-1 * (var(--s-4) + 12px));
  }

  .kcs-pathway__name {
    font-size: 1rem;
  }

  .kcs-pathway__text {
    font-size: var(--fs-meta);
  }
}

.kcs-role-page__programme {
  margin-top: var(--s-5);
}

.kcs-cat__tiles--one {
  grid-template-columns: minmax(0, 32rem);
}

.kcs-steps--lab .kcs-steps__step strong {
  font-weight: 500;
}

/* Qualifications on navy. */
.kcs-qualsec__grid {
  display: grid;
  gap: var(--s-7);
}

.kcs-qualsec__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-on-navy-rule);
}

.kcs-qualsec__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-on-navy-rule);
}

.kcs-qualsec__list a {
  display: grid;
  gap: 2px;
  color: var(--c-on-navy);
  text-decoration: none;
}

.kcs-qualsec__list a strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.125rem;
}

.kcs-qualsec__list a span {
  font-size: var(--fs-meta);
  color: var(--c-on-navy-2);
}

.kcs-qualsec__list a:hover strong {
  text-decoration: underline;
  text-decoration-color: var(--c-orange);
  text-underline-offset: 0.2em;
}

.kcs-status--on-navy.kcs-status--warning {
  color: var(--c-orange);
  border-color: var(--c-orange);
}

.kcs-status--on-navy.kcs-status--info {
  background: var(--c-navy-soft);
  color: var(--c-on-navy);
  border-color: var(--c-navy-soft);
}

.kcs-status--on-navy.kcs-status--neutral {
  color: var(--c-on-navy-2);
  border-color: var(--c-on-navy-rule);
}

.kcs-status--on-navy.kcs-status--success {
  background: var(--c-white);
  color: var(--c-navy);
  border-color: var(--c-white);
}

@media (min-width: 1024px) {
  .kcs-qualsec__grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--s-9);
    align-items: start;
  }
}

/* NIBS Campus. */

/* Organisations: what they get, as plain chips. */

/* Explorer. */
.kcs-explorer__bar {
  position: relative;
  z-index: 20;
  padding: var(--s-5) 0;
  background: var(--c-white);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-explorer__search {
  position: relative;
  max-width: 44rem;
}

.kcs-explorer__icon {
  position: absolute;
  left: var(--s-4);
  top: 50%;
  translate: 0 -50%;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-ink-3);
  pointer-events: none;
}

.kcs-explorer__input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--s-4) 0 calc(var(--s-4) + 1.25rem + var(--s-3));
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-ink);
  font: 400 var(--fs-body) / 1.4 var(--f-text);
}

.kcs-explorer__input:focus {
  border-color: var(--c-navy);
}

.kcs-explorer__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.kcs-explorer__status {
  margin-top: var(--s-3);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-explorer__results {
  padding-top: var(--s-6);
}

.kcs-explorer__results .kcs-roles {
  margin-top: 0;
}

.kcs-role.is-hidden {
  display: none;
}

/* The section's own padding is enough; the message sits where the first
   card would have been rather than a screen below it. */
.kcs-explorer__empty {
  padding: 0;
  max-width: 60ch;
}

.kcs-explorer__empty .kcs-btn {
  margin-top: var(--s-4);
}

/* Free and Plus, side by side. */
.kcs-tiers__list {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-7) 0 0;
  padding: 0;
  list-style: none;
}

.kcs-tier {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--c-surface);
  border-top: 4px solid var(--c-navy);
  border-radius: var(--radius);
}

.kcs-tier--plus {
  border-top-color: var(--c-orange);
}

.kcs-tier__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.012em;
  color: var(--c-navy);
}

.kcs-tier__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-tier__price strong {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-navy);
}

.kcs-tier__price span {
  font-size: var(--fs-small);
  color: var(--c-ink-3);
}

.kcs-tier__lead {
  color: var(--c-ink-2);
}

.kcs-tier .kcs-btn {
  margin-top: var(--s-3);
}

.kcs-tiers .kcs-muted {
  margin-top: var(--s-5);
}

@media (min-width: 768px) {
  .kcs-tiers__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
  }
}

.kcs-plan__price strong {
  font-family: var(--f-display);
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

.kcs-plan__price span {
  margin-left: var(--s-2);
  font-weight: 400;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

@media (min-width: 640px) {
  .kcs-plans__list--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .kcs-plans__list--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4);
  }
}

/* Mega panel for careers: roles in three columns, intents under the intro. */
.kcs-mega__inner--roles {
  grid-template-columns: 4fr 8fr;
}

.kcs-mega__links--roles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-1) var(--s-5);
}

.kcs-mega__links--roles a {
  padding-block: var(--s-2);
}

.kcs-mega__intents {
  display: grid;
  gap: var(--s-1);
  margin: var(--s-5) 0 0;
  padding: var(--s-4) 0 0;
  list-style: none;
  border-top: 1px solid var(--c-rule);
}

.kcs-mega__intents a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--c-navy);
  text-decoration: none;
}

.kcs-mega__intents a .kcs-icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--t-base) var(--ease-out);
}

.kcs-mega__intents a:hover {
  text-decoration: underline;
  text-decoration-color: var(--c-orange);
  text-underline-offset: 0.2em;
}

.kcs-mega__intents a:hover .kcs-icon {
  transform: translateX(3px);
}

/* Sticky mobile action. */
.kcs-sticky {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: var(--c-white);
  border-top: 1px solid var(--c-rule);
  transform: translateY(100%);
  transition: transform var(--t-panel) var(--ease-drawer);
}

.kcs-sticky.is-visible {
  transform: none;
}

body.has-sticky {
  padding-bottom: 80px;
}

@media (min-width: 1024px) {
  .kcs-sticky {
    display: none;
  }

  body.has-sticky {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kcs-sticky {
    transition: none;
  }

  .kcs-role__arrow,
  .kcs-mega__intents a .kcs-icon {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   27. Marketplace polish. White canvas, a wider shell for cards and search,
       one identity system for roles, tiles for discovery and skills, the
       Learn / Do / Prove plate, the Workplace Lab as a product, the explorer
       as a marketplace with a filter rail. Overrides sit here on purpose so
       the change is one place, not twelve patches.
   ---------------------------------------------------------------------- */

:root {
  --shell: 1320px;
  --shell-wide: 1520px;
  --c-navy-tint-2: #F1F3FA;
  --shadow-card: 0 1px 2px rgba(3, 9, 75, 0.06), 0 12px 32px -20px rgba(3, 9, 75, 0.25);
  --shadow-card-hover: 0 2px 4px rgba(3, 9, 75, 0.06), 0 22px 44px -22px rgba(3, 9, 75, 0.35);
  --shadow-search: 0 18px 44px -22px rgba(3, 9, 75, 0.45);
}

/* Section rhythm: white by default; a warm plate only where a section
   needs to sit apart. The homepage uses two, the explorer results one. */
.kcs-section {
  padding-block: clamp(3.5rem, 6.5vw, 6.5rem);
}

.kcs-section__head:not(.kcs-section__head--split) {
  max-width: 62ch;
}

.kcs-section__head .kcs-lead {
  margin-top: var(--s-3);
}

.kcs-section__head--split .kcs-link {
  margin-bottom: var(--s-1);
}

/* Hero: bigger statement, the search as the object, quiet intents. */
.kcs-hero--become .kcs-hero__copy {
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 6vw, 5.5rem);
}

.kcs-hero__accent {
  color: var(--c-orange);
}

.kcs-hero--become .kcs-hero__lead {
  margin-top: var(--s-4);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  max-width: 46ch;
  color: var(--c-ink-2);
}

.kcs-hero--become .kcs-become {
  margin-top: var(--s-6);
}

.kcs-become__label {
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  margin-bottom: var(--s-2);
}

.kcs-become__field {
  border: 2px solid var(--c-navy);
  box-shadow: var(--shadow-search);
  transition: box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.kcs-become__field:focus-within {
  outline: none;
  border-color: var(--c-orange);
  box-shadow: 0 0 0 4px rgba(255, 90, 55, 0.22), var(--shadow-search);
}

.kcs-become__input {
  min-height: 64px;
  font-size: var(--fs-lead);
}

.kcs-become__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--c-navy);
}

.kcs-become__submit {
  margin: 6px;
  min-height: 52px;
  padding-inline: var(--s-5);
  background: var(--c-navy);
  color: var(--c-white);
  border-color: var(--c-navy);
}

.kcs-become__submit:hover {
  background: var(--c-navy-deep);
}

.kcs-intents {
  margin-top: var(--s-3);
  gap: var(--s-2);
}

.kcs-chip--intent {
  min-height: 34px;
  background: var(--c-white);
  border-color: var(--c-rule);
  color: var(--c-ink-2);
  font-weight: 600;
}

.kcs-chip--intent:hover {
  color: var(--c-navy);
}

.kcs-hero__actions {
  margin-top: var(--s-6);
}

@media (min-width: 1024px) {
  .kcs-hero--become .kcs-hero__copy {
    grid-column: shell-start / span 7;
    padding-right: var(--s-9);
  }

  .kcs-hero--become .kcs-hero__media {
    grid-column: 9 / full-end;
  }

  .kcs-hero--become .kcs-hero__title {
    font-size: clamp(2.75rem, 1.3rem + 3.9vw, 4.75rem);
    letter-spacing: -0.03em;
  }
}

@media (min-width: 1440px) {
  .kcs-hero--become .kcs-hero__title {
    font-size: 4.75rem;
  }
}

/* Role cards: the marketplace unit, compact. Icon and area on one row, the
   title, one line of tagline, the skills as a muted line, and a footer
   with the facts and an arrow. Nothing repeats what the role page says. */
.kcs-roles {
  margin-top: var(--s-6);
}

.kcs-role__card {
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5) var(--s-4);
  border: 1px solid var(--c-rule);
  border-top: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.kcs-section--surface .kcs-role__card,
.kcs-explorer__results .kcs-role__card {
  border-color: var(--c-rule);
  border-top-color: var(--c-rule);
}

.kcs-role__top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-1);
}

.kcs-role__tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--c-navy-tint-2);
  color: var(--c-navy);
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}

.kcs-role__glyph {
  width: 22px;
  height: 22px;
}

.kcs-role__meta {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--c-ink-3); /* orange is for actions; the area is information */
}

.kcs-role__title {
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.kcs-role__tagline {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  line-height: 1.45;
  text-wrap: pretty;
}

.kcs-role__skills {
  position: static;
  z-index: auto;
  margin-top: var(--s-1);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--c-ink-3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.kcs-role__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-rule);
}

.kcs-role__facts {
  margin-top: 0;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-role__facts span + span::before {
  color: var(--c-rule-strong);
}

.kcs-role__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--c-navy-tint-2);
  color: var(--c-navy);
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.kcs-role__arrow .kcs-icon {
  width: 1rem;
  height: 1rem;
}

@media (hover: hover) and (pointer: fine) {
  .kcs-role__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--c-rule-strong);
    border-top-color: var(--c-rule-strong);
  }

  .kcs-role__card:hover .kcs-role__tile {
    background: var(--c-navy);
    color: var(--c-white);
  }

  .kcs-role__card:hover .kcs-role__arrow {
    background: var(--c-orange);
    color: var(--c-white);
    transform: translateX(3px);
  }
}

.kcs-role__card:focus-within {
  border-color: var(--c-orange);
  border-top-color: var(--c-orange);
  box-shadow: var(--shadow-card-hover);
}

.kcs-roles--scroll {
  grid-auto-columns: min(82vw, 300px);
  gap: var(--s-4);
  padding-block: var(--s-2) var(--s-4);
}

@media (min-width: 768px) {
  .kcs-roles,
  .kcs-roles--scroll {
    gap: var(--s-4);
    padding-block: 0;
  }
}

@media (min-width: 1024px) {
  .kcs-roles,
  .kcs-roles--scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
  }
}

@media (min-width: 1440px) {
  .kcs-roles--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kcs-careers__more {
  margin-top: var(--s-6);
}

.kcs-chip--skill {
  min-height: 32px;
  padding-inline: 10px;
  font-size: var(--fs-meta);
  font-weight: 600;
  background: var(--c-surface);
  border-color: transparent;
  color: var(--c-ink-2);
}

.kcs-chip--skill:hover {
  background: var(--c-navy-tint);
  border-color: transparent;
  color: var(--c-navy);
}

/* Discovery tiles: four squares with an icon, a statement and three examples. */

/* Skill tiles: compact, browsable, a career count and an arrow. */
.kcs-skillgrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.kcs-skillcard {
  gap: var(--s-1);
  padding: var(--s-5) var(--s-5) var(--s-5);
  border: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.kcs-skillcard__title {
  font-size: 1.25rem;
  font-weight: 700;
  padding-right: 3.25rem;
}

.kcs-skillcard__roles {
  margin-top: var(--s-1);
  padding-top: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-3);
}

.kcs-skillcard__arrow {
  position: absolute;
  right: var(--s-4);
  top: var(--s-4);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-rule);
  color: var(--c-navy);
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.kcs-skillcard__arrow .kcs-icon {
  width: 1.125rem;
  height: 1.125rem;
}

@media (hover: hover) and (pointer: fine) {
  .kcs-skillcard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--c-rule-strong);
    border-bottom-color: var(--c-rule-strong);
  }

  .kcs-skillcard:hover .kcs-skillcard__arrow {
    background: var(--c-navy);
    border-color: var(--c-navy);
    color: var(--c-white);
  }
}

@media (min-width: 768px) {
  .kcs-skillgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
  }
}

@media (min-width: 1024px) {
  .kcs-skillgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .kcs-skillgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* On a role page the skills sit in the main column beside the sticky card,
   which is only about 380px wide at 1024: size the cards to the column, not
   the window, so a word like "Bookkeeping" never runs out of its card. */
.kcs-skillgrid.kcs-skillgrid--page {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

/* The title has the card's full width and breaks only between words; the
   arrow disc sits at the foot beside "Used in N career paths". */
.kcs-skillcard__title {
  padding-right: 0;
  overflow-wrap: break-word;
  hyphens: manual;
}

.kcs-skillcard__roles {
  padding-right: 3rem;
}

.kcs-skillcard__arrow {
  top: auto;
  bottom: var(--s-4);
}

/* Learn. Do. Prove. on navy: the rail draws in white and orange. */
.kcs-model--plate .kcs-model__head {
  margin-bottom: var(--s-7);
}

.kcs-model--plate .kcs-model__head .kcs-lead {
  max-width: 58ch;
}

.kcs-model--plate .kcs-rail__stage::before {
  background: rgba(255, 255, 255, 0.45);
}

.kcs-model--plate .kcs-rail__stage--last::before {
  background: var(--c-orange);
}

.kcs-model--plate .kcs-rail__label {
  color: var(--c-white);
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem);
}

.kcs-model--plate .kcs-rail__label::before {
  content: "0" counter(stage) " ";
  counter-increment: stage;
  font-size: 0.4em;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 0.9em;
  color: var(--c-orange);
}

.kcs-model--plate .kcs-rail__title {
  color: var(--c-white);
  font-size: 1.25rem;
}

.kcs-model--plate .kcs-rail__text {
  color: var(--c-on-navy-2);
  font-size: var(--fs-body);
}

.kcs-model--plate .kcs-rail__stage:not(:last-child)::after {
  background: var(--c-on-navy-rule);
}

/* Workplace Lab: an app frame. */

.kcs-labmock {
  margin: 0;
}

.kcs-labmock__frame {
  overflow: hidden;
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: 0 30px 60px -30px rgba(3, 9, 75, 0.45), 0 1px 2px rgba(3, 9, 75, 0.08);
}

.kcs-labmock__chrome {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--c-navy);
  color: var(--c-on-navy-2);
  font-size: var(--fs-meta);
}

.kcs-labmock__dots {
  display: inline-flex;
  gap: 5px;
}

.kcs-labmock__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

.kcs-labmock__app {
  font-weight: 700;
  color: var(--c-white);
}

.kcs-labmock__chrome .kcs-labmock__crumb {
  margin-left: auto;
  color: var(--c-on-navy-2);
  font-size: var(--fs-meta);
}

.kcs-labmock__stepper {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0 var(--s-4);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--c-rule);
  background: var(--c-navy-tint-2);
  counter-reset: lab;
}

.kcs-labmock__stepper::-webkit-scrollbar {
  display: none;
}

.kcs-labmock__stepper li {
  counter-increment: lab;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  margin-right: var(--s-4);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
  white-space: nowrap;
}

.kcs-labmock__stepper li::before {
  content: counter(lab);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--c-rule-strong);
  font-size: 0.75rem;
  color: var(--c-ink-3);
}

.kcs-labmock__stepper li.is-done {
  color: var(--c-navy);
}

.kcs-labmock__stepper li.is-done::before {
  content: "";
  background: var(--c-navy);
  border-color: var(--c-navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
}

.kcs-labmock__stepper li.is-current {
  color: var(--c-orange-text);
}

.kcs-labmock__stepper li.is-current::before {
  border-color: var(--c-orange);
  color: var(--c-orange-text);
}

.kcs-labmock__body {
  display: grid;
}

.kcs-labmock__task {
  padding: var(--s-5);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-labmock__review {
  padding: var(--s-5);
  background: var(--c-surface);
}

.kcs-labmock__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}

.kcs-labmock__submit {
  margin-top: var(--s-5);
  pointer-events: none;
}

@media (min-width: 768px) {
  .kcs-labmock__body {
    grid-template-columns: 7fr 5fr;
  }

  .kcs-labmock__task {
    border-bottom: 0;
    border-right: 1px solid var(--c-rule);
  }
}

/* Recognition: bodies as a compact row, no glossary on the homepage. */

/* Qualifications: one navy panel on white, not a full plate. */
.kcs-qualsec__panel {
  display: grid;
  gap: var(--s-6);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 10px;
  background: var(--c-navy);
  color: var(--c-white);
}

.kcs-qualsec__panel .kcs-h2 {
  color: var(--c-white);
}

.kcs-qualsec__panel .kcs-lead {
  color: var(--c-on-navy-2);
  max-width: 40ch;
}

.kcs-qualsec__panel .kcs-cluster {
  margin-top: var(--s-5);
}

.kcs-qualsec__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-on-navy-rule);
}

.kcs-qualsec__list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-on-navy-rule);
}

.kcs-qualsec__list a {
  display: grid;
  color: var(--c-white);
  text-decoration: none;
}

.kcs-qualsec__list a:hover strong {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--c-orange);
}

.kcs-qualsec__list strong {
  font-weight: 600;
}

.kcs-qualsec__list span {
  font-size: var(--fs-meta);
  color: var(--c-on-navy-2);
}

@media (min-width: 1024px) {
  .kcs-qualsec__panel {
    grid-template-columns: 5fr 7fr;
    gap: var(--s-9);
    align-items: center;
  }
}

/* Campus: four things, not seven. */

/* Explorer as a conversation: two sentences with blanks, a search box, and
   the results answer underneath. Each blank is a native select drawn as
   inline text with a mirror span for width, so it hugs the words. */
.kcs-explorer__bar {
  position: relative;
  z-index: 2;
  scroll-margin-top: calc(var(--header-h) + 8px);
  background: var(--c-white);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-explorer__barinner {
  display: grid;
  gap: var(--s-3);
  align-items: center;
  padding-block: var(--s-4);
}

.kcs-talk {
  display: grid;
  gap: 2px;
}

.kcs-talk__line {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--c-ink-2);
  text-wrap: pretty;
}

.kcs-talk__pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 0 1px;
  padding: 0 1px 0 6px;
  border-radius: 6px;
  color: var(--c-navy);
  background: var(--c-navy-tint-2);
  box-shadow: inset 0 -2px 0 var(--c-navy-tint);
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.kcs-talk__pick .kcs-icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--c-orange);
  transition: transform var(--t-fast) var(--ease-out);
}

.kcs-talk__pick.is-set {
  background: var(--c-navy);
  color: var(--c-white);
  box-shadow: inset 0 -2px 0 var(--c-orange);
}

.kcs-talk__pick.is-set .kcs-icon {
  color: var(--c-orange);
}

.kcs-talk__pick:hover {
  background: var(--c-navy-tint);
}

.kcs-talk__pick.is-set:hover {
  background: #0B1A8A;
}

.kcs-talk__pick:hover .kcs-icon {
  transform: translateY(1px);
}

.kcs-talk__pick:focus-within {
  outline: 3px solid var(--c-orange);
  outline-offset: 2px;
}

.kcs-talk__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  font: inherit;
}

.kcs-explorer__search {
  position: relative;
  max-width: 560px;
}

.kcs-explorer__input {
  min-height: 48px;
  border: 1.5px solid var(--c-rule-strong);
  border-radius: 6px;
}

.kcs-explorer__input:focus {
  border-color: var(--c-navy);
}

.kcs-explorer__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-explorer__status .kcs-linkbtn {
  font-size: var(--fs-small);
}

.kcs-explorer__results .kcs-roles {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .kcs-explorer__barinner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    grid-template-areas: "talk search" "talk status";
    column-gap: var(--s-7);
    align-items: center;
  }

  .kcs-talk {
    grid-area: talk;
  }

  .kcs-explorer__search {
    grid-area: search;
    align-self: end;
    max-width: none;
  }

  .kcs-explorer__status {
    grid-area: status;
    align-self: start;
  }

  .kcs-explorer__results .kcs-roles--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .kcs-explorer__results .kcs-roles--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Small-text hygiene: metadata is one line, never a paragraph. */
.kcs-explorer__foot p {
  max-width: 48ch;
}

/* Reduced motion: lifts and arrows stay still, colour feedback remains. */
@media (prefers-reduced-motion: reduce) {
  .kcs-role__card,
  .kcs-skillcard {
    transition-property: border-color, box-shadow, background-color, color;
  }

  .kcs-role__card:hover,
  .kcs-skillcard:hover {
    transform: none;
  }

  .kcs-role__card:hover .kcs-role__arrow {
    transform: none;
  }
}

/* Lab mock: the frame owns the layout; the old two-column figure is retired. */
.kcs-labmock,
.kcs-labmock.kcs-labmock {
  display: block;
  grid-template-columns: none;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.kcs-labmock__review,
.kcs-labmock.kcs-labmock .kcs-labmock__review {
  border-left: 0;
  border-top: 0;
}

.kcs-labmock__caption {
  max-width: 60ch;
  margin-top: var(--s-3);
  padding: 0;
  border: 0;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
  text-wrap: pretty;
}

@media (min-width: 1024px) {

  .kcs-labmock__body {
    grid-template-columns: 7fr 5fr;
  }

  .kcs-labmock__task {
    border-right: 1px solid var(--c-rule);
  }
}

.kcs-skillcard,
.kcs-skillsec .kcs-skillcard {
  background: var(--c-white);
}

/* The hero column never grows to the search field's intrinsic width. */
@media (max-width: 1023px) {
  .kcs-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.kcs-hero__copy,
.kcs-become,
.kcs-become__field {
  min-width: 0;
}

.kcs-become__input {
  flex: 1 1 0;
  width: 100%;
}

/* Single-column grids never size to a scroller's max-content. */
@media (max-width: 1023px) {
  .kcs-qualsec__panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

.kcs-labmock__body > * {
  min-width: 0;
}

/* Inline links in lists and small headings meet the 24px target size. */
.kcs-cat__skills--compact li a,
.kcs-h4 a,
.kcs-labtasks a {
  display: inline-block;
  padding-block: 4px;
  min-height: 24px;
}

.kcs-cat__skills--compact li a {
  display: block;
}

.kcs-labmock__title {
  margin-top: var(--s-2);
}

/* -------------------------------------------------------------------------
   28. Role and skill pages as product pages: identity hero with stat tiles,
       a sticky section nav, the content column with a summary card that
       stays with the reader, and the section vocabulary (checks, timeline,
       task deck, job titles, professional-body card).
   ---------------------------------------------------------------------- */

.kcs-rolepg__hero {
  padding: var(--s-5) 0 var(--s-8);
}

.kcs-rolepg__herogrid {
  display: grid;
  gap: var(--s-6);
}

.kcs-rolepg__ident {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.kcs-rolepg__tile {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--c-navy);
  color: var(--c-white);
}

.kcs-rolepg__tile .kcs-role__glyph {
  width: 32px;
  height: 32px;
}

.kcs-rolepg__tile--mono {
  font-family: var(--f-display);
  font-size: 1.75rem;
  font-weight: 700;
}

.kcs-rolepg__kind {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--c-orange-text);
}

.kcs-rolepg__title {
  margin-top: var(--s-4);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--c-navy);
  text-wrap: balance;
}

.kcs-rolepg__lead {
  margin-top: var(--s-4);
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  line-height: 1.45;
  color: var(--c-ink-2);
  max-width: 44ch;
  text-wrap: pretty;
}

.kcs-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}

.kcs-stats__item {
  display: grid;
  gap: 2px;
  padding: var(--s-4);
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-stats__label {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-ink-3);
}

.kcs-stats__value {
  font-family: var(--f-display);
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--c-navy);
}

.kcs-stats__note {
  font-size: var(--fs-meta);
  color: var(--c-ink-2);
}

.kcs-rolepg__hero .kcs-prog__startbar {
  margin-top: var(--s-6);
}

.kcs-rolepg__media .kcs-photo {
  aspect-ratio: 5 / 4;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 60px -32px rgba(3, 9, 75, 0.45);
}

.kcs-rolepg__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 640px) {
  .kcs-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .kcs-rolepg__hero {
    padding: var(--s-6) 0 var(--s-9);
  }

  .kcs-rolepg__herogrid {
    grid-template-columns: 7fr 5fr;
    gap: var(--s-9);
    align-items: center;
  }

  .kcs-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .kcs-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Sticky section nav: one row of anchors, the current one underlined in orange. */
.kcs-subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: var(--c-white);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-subnav.kcs-prog__contents ol,
.kcs-subnav__list {
  display: flex;
  gap: var(--s-2);
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  border-left: 0;
}

.kcs-subnav__list::-webkit-scrollbar {
  display: none;
}

.kcs-subnav__list a,
.kcs-subnav.kcs-prog__contents a {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin: 0;
  padding: 0.375rem var(--s-3);
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.kcs-subnav.kcs-prog__contents a:hover {
  color: var(--c-navy);
}

.kcs-subnav.kcs-prog__contents a[aria-current="true"] {
  color: var(--c-navy);
  border-bottom-color: var(--c-orange);
  border-left: 0;
}

@media (min-width: 1024px) {
  .kcs-subnav.kcs-prog__contents ol,
  .kcs-subnav__list {
    margin: 0;
    padding: 0;
    gap: var(--s-4);
  }
}

/* Layout: the content column and the summary card. */
.kcs-rolepg__layout {
  display: grid;
  gap: var(--s-8);
  padding: var(--s-8) var(--gutter) var(--section-y);
}

.kcs-rolepg__main {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  min-width: 0;
}

.kcs-rolepg__section {
  scroll-margin-top: calc(var(--header-h) + 72px);
}

.kcs-rolepg__sechead {
  max-width: 62ch;
}

.kcs-rolepg__h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-navy);
  text-wrap: balance;
}

.kcs-rolepg__seclead {
  margin-top: var(--s-3);
  font-size: var(--fs-lead);
  color: var(--c-ink-2);
  text-wrap: pretty;
}

.kcs-rolepg__minor {
  margin-top: var(--s-6);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-ink-3);
}

.kcs-rolepg__minor + .kcs-cat__sheets,
.kcs-rolepg__minor + .kcs-chips {
  margin-top: var(--s-3);
}

.kcs-rolepg__fine {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
}

.kcs-rolepg__section > .kcs-cluster,
.kcs-rolepg__section > .kcs-notice {
  margin-top: var(--s-5);
}

/* Summary card */
.kcs-rolepg__aside {
  min-width: 0;
}

.kcs-summary {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: var(--shadow-card-hover);
}

.kcs-summary__eyebrow {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-ink-3);
}

.kcs-summary__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--c-navy);
}

.kcs-summary__price {
  color: var(--c-ink-2);
}

.kcs-summary__price strong {
  color: var(--c-navy);
}

.kcs-summary__list {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-2) 0 var(--s-3);
  padding: var(--s-4) 0;
  list-style: none;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-summary__list li {
  display: flex;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-summary__list .kcs-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 2px;
  color: var(--c-navy);
}

.kcs-summary .kcs-btn + .kcs-btn {
  margin-top: calc(var(--s-2) * -1 + 4px);
}

.kcs-summary__fine {
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

@media (min-width: 1024px) {
  .kcs-rolepg__layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--s-10);
    align-items: start;
  }

  .kcs-rolepg__aside {
    position: sticky;
    top: calc(var(--header-h) + 72px);
  }
}

@media (min-width: 1280px) {
  .kcs-rolepg__layout {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}

/* Checks: what you'll do, what you'll learn. */
.kcs-checks {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.kcs-checks li {
  display: flex;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: var(--c-white);
  font-size: var(--fs-body);
  color: var(--c-ink);
}

.kcs-checks .kcs-icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 2px;
  color: var(--c-orange);
}

@media (min-width: 768px) {
  .kcs-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }
}

/* Skill tiles on a page */
.kcs-skillgrid--page {
  margin-top: var(--s-5);
}

.kcs-rolepg__tools {
  margin-top: var(--s-6);
}

.kcs-rolepg__tools .kcs-chips {
  margin-top: var(--s-3);
}

/* Timeline: seven steps as a numbered spine. */
.kcs-timeline {
  position: relative;
  display: grid;
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
  padding: 0 0 0 calc(2.75rem + var(--s-4));
  list-style: none;
}

.kcs-timeline::before {
  content: "";
  position: absolute;
  left: 1.375rem;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 2px;
  background: var(--c-rule-strong);
}

.kcs-timeline__step {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--s-3) 0;
}

.kcs-timeline__num {
  position: absolute;
  left: calc(-2.75rem - var(--s-4));
  top: var(--s-3);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 2px solid var(--c-navy);
  background: var(--c-white);
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-timeline__step--last .kcs-timeline__num {
  border-color: var(--c-orange);
  background: var(--c-orange);
  color: var(--c-navy);
}

.kcs-timeline__name {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-timeline__text {
  color: var(--c-ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .kcs-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-8);
    padding-left: 0;
  }

  .kcs-timeline::before {
    display: none;
  }

  .kcs-timeline__step {
    padding: var(--s-4) 0 var(--s-4) calc(2.75rem + var(--s-4));
    border-top: 1px solid var(--c-rule);
  }

  .kcs-timeline__num {
    left: 0;
    top: var(--s-4);
  }
}

/* Course sheets on a page: two across, tighter. */
.kcs-cat__sheets--page {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.kcs-cat__sheets--page .kcs-cat__sheet-link {
  padding: var(--s-5);
  border: 1px solid var(--c-rule);
  border-top: 1px solid var(--c-rule);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}

.kcs-cat__sheets--page .kcs-cat__sheet:first-child {
  grid-column: auto;
}

.kcs-cat__sheets--page .kcs-cat__sheet:first-child .kcs-cat__sheet-link {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas: none;
}

.kcs-cat__sheets--page .kcs-cat__sheet:first-child .kcs-cat__sheet-link > * {
  grid-area: auto;
}

.kcs-cat__sheets--page .kcs-cat__sheet:first-child .kcs-cat__title {
  font-size: 1.5rem;
}

.kcs-cat__sheets--page .kcs-cat__sheet:first-child .kcs-cat__foot {
  flex-direction: row;
  align-items: end;
  justify-content: space-between;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-rule);
}

@media (min-width: 768px) {
  .kcs-cat__sheets--page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
  }
}

/* Task deck: the Workplace Lab tasks as numbered cards. */
.kcs-taskdeck {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.kcs-taskdeck__task {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num title"
    "num meta";
  gap: 4px var(--s-4);
  align-items: start;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-taskdeck__num {
  grid-area: num;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 6px;
  background: var(--c-navy-tint-2);
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-taskdeck__title {
  grid-area: title;
  font-weight: 600;
  color: var(--c-navy);
  line-height: 1.35;
}

.kcs-taskdeck__meta {
  grid-area: meta;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-taskdeck__meta .kcs-icon {
  width: 1rem;
  height: 1rem;
  color: var(--c-orange);
}

@media (min-width: 768px) {
  .kcs-taskdeck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
  }
}

/* Job titles: large, not chips. */
.kcs-titles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.kcs-titles li {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-rule-strong);
  border-radius: 6px;
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-navy);
}

/* Professional body card */
.kcs-bodycard {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-5);
  padding: var(--s-6);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-bodycard__short {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-navy);
}

.kcs-bodycard__name {
  margin-top: var(--s-1);
  font-weight: 600;
  color: var(--c-ink);
}

.kcs-bodycard__field {
  font-size: var(--fs-small);
  color: var(--c-ink-3);
}

.kcs-bodycard__facts {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-bodycard__facts dt {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-ink-3);
}

.kcs-bodycard__facts dd {
  margin: 4px 0 0;
  color: var(--c-ink);
  text-wrap: pretty;
}

.kcs-bodycard__fine {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-bodycard__fine strong {
  color: var(--c-navy);
}

.kcs-bodycard .kcs-cluster {
  margin-top: 0;
}

.kcs-bodycard--tbc .kcs-bodycard__name {
  font-family: var(--f-display);
  font-size: 1.375rem;
  color: var(--c-navy);
}

@media (min-width: 768px) {
  .kcs-bodycard__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5) var(--s-6);
  }
}

/* Role cards on a page keep the marketplace look, three across. */
.kcs-roles--page {
  margin-top: var(--s-5);
}

.kcs-rolepg .kcs-roles--page .kcs-role__card {
  background: var(--c-white);
  border-color: var(--c-rule);
  border-top-color: var(--c-rule);
}

@media (min-width: 1024px) {
  .kcs-roles--page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Inside a page column the cards stay at two across until the column is
   wide enough for three, and the skills line stays on the explorer. */
.kcs-roles--page .kcs-role__skills {
  display: none;
}

@media (min-width: 1680px) {
  .kcs-roles--page {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Qualification tile alone on a page */
.kcs-cat__tiles--one {
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--s-5);
  max-width: 560px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kcs-subnav.kcs-prog__contents a {
    transition: none;
  }
}

@media (max-width: 639px) {
  .kcs-skillgrid--page {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------------------------------
   29. Framed photographs, Learn Skills and Qualifications
   The frame: a photograph on a rounded plate with a navy plate offset
   behind it, a short orange rule on the corner and a fact chip floating
   over the lower edge. Nothing is drawn on the image; the plate and the
   rule are flat colour, the chip is a white card. One treatment for every
   page hero so photographs read as composed rather than placed.
   ---------------------------------------------------------------------- */
.kcs-frame {
  --frame-offset: 18px;
  --frame-radius: 12px;
  --frame-ratio: 5 / 4;
  position: relative;
  margin: 10px var(--frame-offset) calc(var(--frame-offset) + 22px) 0;
}

.kcs-frame__plate {
  position: absolute;
  inset: var(--frame-offset) calc(-1 * var(--frame-offset)) calc(-1 * var(--frame-offset)) var(--frame-offset);
  z-index: 0;
  border-radius: var(--frame-radius);
  background: var(--c-navy);
  transform: rotate(-1.2deg);
  transform-origin: 30% 70%;
}

.kcs-frame__rule {
  position: absolute;
  top: -10px;
  left: 28px;
  z-index: 2;
  width: 76px;
  height: 8px;
  border-radius: 4px;
  background: var(--c-orange);
}

.kcs-frame__photo {
  position: relative;
  z-index: 1;
  border-radius: var(--frame-radius);
  overflow: hidden;
  background: var(--c-navy-tint-2);
  box-shadow: 0 34px 64px -34px rgba(3, 9, 75, 0.5);
}

.kcs-frame .kcs-photo {
  aspect-ratio: var(--frame-ratio);
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.kcs-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--frame-zoom, 1));
  transform-origin: var(--frame-origin, 50% 50%);
}

.kcs-frame__chip {
  position: absolute;
  left: var(--s-4);
  bottom: -22px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  max-width: calc(100% - var(--s-4) - 12px);
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: 0 18px 36px -18px rgba(3, 9, 75, 0.4);
}

.kcs-frame__chip .kcs-icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-orange);
}

.kcs-frame__chipbody {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.kcs-frame__chipbody strong {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--c-navy);
}

.kcs-frame__chipbody span {
  font-size: var(--fs-meta);
  line-height: 1.3;
  color: var(--c-ink-3);
}

/* The plate settles into place on load; the picture itself never moves. */
@media (prefers-reduced-motion: no-preference) {
  .kcs-frame__plate {
    animation: kcs-frame-settle 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .kcs-frame__chip {
    animation: kcs-frame-rise 700ms 250ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

@keyframes kcs-frame-settle {
  from { transform: translate(-10px, -10px) rotate(0deg); opacity: 0; }
  to { transform: translate(0, 0) rotate(-1.2deg); opacity: 1; }
}

@keyframes kcs-frame-rise {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (min-width: 1024px) {
  .kcs-frame {
    --frame-offset: 22px;
    --frame-radius: 14px;
  }
}

/* Where the frame lives: page heroes and the role and skill heroes. The
   old plain-rectangle rules step aside. */
.kcs-pagehero__media .kcs-frame .kcs-photo,
.kcs-rolepg__media .kcs-frame .kcs-photo {
  aspect-ratio: var(--frame-ratio);
  border-radius: 0;
  box-shadow: none;
}

.kcs-pagehero--photo {
  padding-bottom: var(--s-7);
}

@media (min-width: 1024px) {
  .kcs-pagehero--photo,
  .kcs-rolepg__hero {
    padding-bottom: var(--s-7);
  }
}

.kcs-pagehero__copy .kcs-stats {
  margin-top: var(--s-6);
}

.kcs-pagehero__copy .kcs-stats + .kcs-cluster {
  margin-top: var(--s-6);
}

.kcs-pagehero--photo .kcs-page__title {
  max-width: 16ch;
}

@media (min-width: 1024px) {
  .kcs-pagehero--photo .kcs-pagehero__grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--s-10);
  }

  .kcs-pagehero--photo .kcs-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .kcs-pagehero--photo .kcs-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Learn Skills: clusters on a white canvas, each with a number, a heading
   and a count; a rule between them. */
.kcs-skillsec__cluster {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.kcs-skillsec__cluster + .kcs-skillsec__cluster {
  border-top: 1px solid var(--c-rule);
}

.kcs-skillsec__cluster .kcs-rolepg__h2 {
  scroll-margin-top: calc(var(--header-h) + 72px);
}

.kcs-skillsec__cluster {
  scroll-margin-top: calc(var(--header-h) + 56px);
}

.kcs-skillsec__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  align-items: start;
}

.kcs-skillsec__count {
  grid-column: 2;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
}

.kcs-skillsec__cluster .kcs-skillgrid--three {
  margin-top: var(--s-6);
}

/* On the white canvas the tiles are white cards with a rule, the summary
   held to two lines so every tile carries the same weight. */
.kcs-section.kcs-skillsec__cluster .kcs-skillcard {
  background: var(--c-white);
  border: 1px solid var(--c-rule);
}

.kcs-skillsec__cluster .kcs-skillcard__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
}

/* The count sits on the card's floor, so every tile in a row lines up
   whether or not its summary ran to two lines. */
.kcs-skillsec__cluster .kcs-skillcard__roles {
  margin-top: auto;
  padding-top: var(--s-3);
}

@media (min-width: 768px) {
  .kcs-skillsec__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .kcs-skillsec__count {
    grid-column: 2;
    align-self: end;
    padding-bottom: 4px;
  }

  .kcs-skillsec__cluster .kcs-skillgrid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .kcs-skillsec__cluster .kcs-skillgrid--page {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Four kinds of learning as a deck: number, duration large, name, one
   line, the count, the link. */
.kcs-kindsec .kcs-rolepg__sechead {
  margin-bottom: var(--s-7);
}

.kcs-kinds--deck {
  gap: var(--s-4);
}

.kcs-kinds--deck .kcs-kinds__item {
  position: relative;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-5) var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.kcs-kinds--deck .kcs-kinds__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.kcs-kinds__num {
  position: absolute;
  top: var(--s-4);
  right: var(--s-5);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-kinds--deck .kcs-kinds__time {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-navy);
}

.kcs-kinds__name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--c-navy);
}

.kcs-kinds--deck .kcs-kinds__desc {
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.kcs-kinds--deck .kcs-kinds__count {
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-kinds--deck .kcs-link {
  margin-top: var(--s-2);
  justify-self: start;
}

@media (prefers-reduced-motion: reduce) {
  .kcs-kinds--deck .kcs-kinds__item:hover {
    transform: none;
  }
}

/* Qualifications: the status key, the route steps, and the summary aside
   picking up the same product-page layout as roles. */
.kcs-statuskey {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  list-style: none;
}

.kcs-statuskey li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-content: start;
  gap: var(--s-2);
  min-width: 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--c-ink-2);
}

.kcs-statuskey .kcs-status {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .kcs-statuskey {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
  }
}

.kcs-qualpg__layout {
  scroll-margin-top: calc(var(--header-h) + 56px);
  border-top: 1px solid var(--c-rule);
}

.kcs-routesteps {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-6) 0 var(--s-6);
  padding: 0;
  list-style: none;
}

.kcs-routesteps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "num title"
    "num body";
  gap: var(--s-2) var(--s-4);
  align-items: start;
  padding: var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-routesteps__num {
  grid-area: num;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 6px;
  background: var(--c-navy-tint-2);
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-routesteps__title {
  grid-area: title;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--c-navy);
}

.kcs-routesteps__body {
  grid-area: body;
  color: var(--c-ink-2);
  line-height: 1.6;
}

/* Inline links inside fact lists, definition lists, plain lists, form
   consent text and the summary card reach a 24px target without changing
   the line box. */
.kcs-facts dd a,
dd a,
.kcs-list li > a,
.ff_t_c a,
.kcs-summary__list a {
  display: inline-block;
  padding: 3px 0;
  margin: -3px 0;
}

.kcs-summary__list a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kcs-summary__list a:hover {
  color: var(--c-navy);
}

/* Small screens: the frame's plate and chip stay inside the gutter. */
@media (max-width: 639px) {
  .kcs-frame {
    --frame-offset: 14px;
    margin-bottom: calc(var(--frame-offset) + 26px);
  }

  .kcs-frame__chip {
    left: var(--s-3);
    padding: 8px 12px 8px 10px;
  }

  .kcs-frame__chipbody strong {
    font-size: 0.875rem;
  }
}

/* -------------------------------------------------------------------------
   30. Homepage hero with the framed photograph
   The statement and the question stay the strongest objects. The
   photograph becomes an object too: the frame at 4:3 inside the shell
   (no longer a bleed), a larger plate and radius, the career-pathways chip
   on the lower left and the Skills Passport card on the upper right. The
   copy fades up once; the plate settles as elsewhere.
   ---------------------------------------------------------------------- */
.kcs-hero--become .kcs-hero__media {
  order: 0;
  padding: var(--s-4) var(--gutter) var(--s-2);
}

.kcs-hero--become .kcs-hero__copy {
  padding-bottom: var(--s-4);
}

.kcs-frame--hero {
  --frame-offset: 20px;
  --frame-radius: 14px;
  margin-top: var(--s-6);
}

.kcs-frame__badge {
  left: auto;
  right: calc(-1 * var(--s-3));
  top: calc(-1 * var(--s-4));
  bottom: auto;
  padding: 8px 14px 8px 10px;
}

.kcs-frame__badge .kcs-icon {
  color: var(--c-navy);
}

@media (prefers-reduced-motion: no-preference) {
  .kcs-frame__badge {
    animation-delay: 450ms;
  }

  .kcs-hero--become .kcs-hero__copy > * {
    animation: kcs-hero-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .kcs-hero--become .kcs-hero__copy > :nth-child(2) { animation-delay: 60ms; }
  .kcs-hero--become .kcs-hero__copy > :nth-child(3) { animation-delay: 120ms; }
  .kcs-hero--become .kcs-hero__copy > :nth-child(4) { animation-delay: 180ms; }
  .kcs-hero--become .kcs-hero__copy > :nth-child(5) { animation-delay: 240ms; }
}

@keyframes kcs-hero-rise {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (min-width: 1024px) {
  .kcs-hero--become .kcs-hero__grid {
    min-height: 0;
  }

  .kcs-hero--become .kcs-hero__copy {
    grid-column: shell-start / span 6;
    padding: clamp(3rem, 5.5vw, 5rem) var(--s-8) clamp(3rem, 5.5vw, 5rem) 0;
  }

  .kcs-hero--become .kcs-hero__media {
    grid-column: 8 / full-end;
    align-self: center;
    position: static;
    padding: var(--s-8) var(--gutter) var(--s-8) 0;
  }

  .kcs-frame--hero {
    --frame-offset: 22px;
    --frame-radius: 16px;
    margin-top: var(--s-5);
    margin-bottom: calc(var(--frame-offset) + 26px);
  }

  .kcs-frame--hero .kcs-frame__photo {
    box-shadow: 0 44px 80px -40px rgba(3, 9, 75, 0.55);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .kcs-hero--become .kcs-hero__title {
    font-size: clamp(2.5rem, 0.9rem + 3.5vw, 3.75rem);
  }
}

@media (min-width: 1280px) {
  .kcs-hero--become .kcs-hero__copy {
    grid-column: shell-start / span 7;
    padding-right: var(--s-9);
  }

  .kcs-hero--become .kcs-hero__media {
    grid-column: 9 / full-end;
  }

  .kcs-frame--hero {
    --frame-offset: 26px;
    --frame-radius: 18px;
  }

  .kcs-frame--hero .kcs-frame__rule {
    width: 96px;
    left: 36px;
  }

  .kcs-frame--hero .kcs-frame__chip {
    left: var(--s-5);
    bottom: -26px;
    padding: 12px 20px 12px 14px;
  }

  .kcs-frame--hero .kcs-frame__chip .kcs-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .kcs-frame--hero .kcs-frame__chipbody strong {
    font-size: 1.0625rem;
  }

  .kcs-frame--hero .kcs-frame__badge {
    left: auto;
    right: calc(-1 * var(--s-4));
    top: calc(-1 * var(--s-4));
    bottom: auto;
    padding: 10px 16px 10px 12px;
  }
}

/* -------------------------------------------------------------------------
   31. Join flow: the short account form, the plan card, checkout, receipt
   and account. FluentCart's own markup is restyled with tokens from the
   outside; its files are never touched.
   ---------------------------------------------------------------------- */
.kcs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The start page with a form: the form leads, the plan sits beside it. */
/* The form leads on every screen; the plan or the free list follows. */
.kcs-start__grid--auth .kcs-start__side {
  order: 2;
}

.kcs-start__grid--auth .kcs-start__main {
  order: 1;
}

@media (min-width: 1024px) {
  .kcs-start__grid--auth {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.kcs-checks--one {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .kcs-checks--one {
    grid-template-columns: minmax(0, 1fr);
  }
}

.kcs-start__more {
  margin-top: var(--s-5);
  color: var(--c-ink-2);
}

.kcs-start__trust,
.kcs-checkout__trust {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.kcs-start__trust li,
.kcs-checkout__trust li {
  display: flex;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
}

.kcs-start__trust .kcs-icon,
.kcs-checkout__trust .kcs-icon {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 2px;
  color: var(--c-orange);
}

/* The account form */
.kcs-auth {
  max-width: 34rem;
  padding: var(--s-6) var(--s-6) var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-auth__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-navy);
}

.kcs-auth__lead {
  margin-top: var(--s-2);
  color: var(--c-ink-2);
}

.kcs-auth__form {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.kcs-auth__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kcs-field {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

.kcs-field__label {
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--c-navy);
}

.kcs-field__hint {
  font-weight: 400;
  color: var(--c-ink-3);
}

.kcs-field__input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--s-4);
  font: inherit;
  font-size: 1rem;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1.5px solid var(--c-rule-strong);
  border-radius: 8px;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.kcs-field__input:focus {
  border-color: var(--c-navy);
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.kcs-field.is-invalid .kcs-field__input {
  border-color: var(--c-orange);
}

.kcs-field__error {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-orange-deep, #B83E1F);
}

.kcs-field__pw {
  position: relative;
}

.kcs-field__pw .kcs-field__input {
  padding-right: 4.5rem;
}

.kcs-field__reveal {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  min-height: 36px;
  padding: 0 var(--s-3);
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-navy);
  background: var(--c-navy-tint-2);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.kcs-field__reveal:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.kcs-field--check .kcs-check {
  align-items: start;
  color: var(--c-ink-2);
}

.kcs-field--check .kcs-check a {
  display: inline-block;
  padding: 3px 0;
  margin: -3px 0;
  color: var(--c-navy);
}

.kcs-auth__message {
  padding: var(--s-3) var(--s-4);
  border-radius: 8px;
  background: var(--c-navy-tint-2);
  font-size: var(--fs-small);
  color: var(--c-navy);
}

.kcs-auth__form .kcs-btn.is-busy {
  opacity: 0.7;
  cursor: progress;
}

.kcs-auth__note {
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
  text-align: center;
}

.kcs-auth__note a {
  color: var(--c-navy);
}

.kcs-auth__switch {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-auth__switch a {
  font-weight: 600;
  color: var(--c-navy);
}

/* The plan card: what you chose, what it costs, what renews. */
.kcs-plancard {
  padding: var(--s-5) var(--s-5) var(--s-4);
  /* The plan being bought is outlined in navy, as the chosen term fills navy on the membership card. No orange edge (owner, 23 September 2026). */
  border: 1.5px solid var(--c-navy);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-plancard__eyebrow {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-plancard__title {
  margin-top: var(--s-1);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--c-navy);
}

.kcs-plancard__price {
  margin-top: var(--s-3);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.kcs-plancard__price strong {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-navy);
}

.kcs-plancard__price span {
  color: var(--c-ink-3);
}

.kcs-plancard__terms {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: 8px;
  background: var(--c-navy-tint-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-plancard__list {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.kcs-plancard__list li {
  display: flex;
  gap: var(--s-2);
  align-items: start;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-plancard__list .kcs-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 3px;
  color: var(--c-navy);
}

.kcs-plancard__change {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-small);
}

.kcs-plan__terms {
  margin-top: var(--s-2);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
}

/* Checkout: FluentCart's form left, the plan right. */
.kcs-checkout {
  padding-top: var(--s-6);
  padding-bottom: var(--section-y);
}

.kcs-checkout__head .kcs-lead {
  margin-top: var(--s-3);
  max-width: 48ch;
}

.kcs-checkout__who {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--c-navy-tint-2);
  font-size: var(--fs-small);
  color: var(--c-navy);
}

.kcs-checkout__who .kcs-icon {
  width: 1rem;
  height: 1rem;
}

.kcs-checkout__grid {
  display: grid;
  gap: var(--s-7);
  margin-top: var(--s-7);
}

.kcs-checkout__main,
.kcs-checkout__side {
  min-width: 0;
}

@media (min-width: 1024px) {
  .kcs-checkout__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-10);
    align-items: start;
  }

  .kcs-checkout__side {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

/* FluentCart's checkout markup, restyled from the outside. */
.kcs-page--checkout .fct-checkout,
.kcs-page--checkout .fluent-cart-checkout {
  font-family: inherit;
  color: var(--c-ink);
}

.kcs-page--checkout .fct-checkout-form,
.kcs-page--checkout [class*="fct-checkout"] input[type="text"],
.kcs-page--checkout [class*="fct-checkout"] input[type="email"],
.kcs-page--checkout [class*="fct-checkout"] input[type="tel"],
.kcs-page--checkout [class*="fct-checkout"] select,
.kcs-page--checkout [class*="fct-checkout"] textarea {
  font: inherit;
}

.kcs-page--checkout [class*="fct-checkout"] input[type="text"],
.kcs-page--checkout [class*="fct-checkout"] input[type="email"],
.kcs-page--checkout [class*="fct-checkout"] input[type="tel"],
.kcs-page--checkout [class*="fct-checkout"] select,
.kcs-page--checkout [class*="fct-checkout"] textarea,
.kcs-page--checkout .fct-input,
.kcs-page--checkout .fct-select {
  min-height: 52px;
  padding: 0 var(--s-4);
  border: 1.5px solid var(--c-rule-strong);
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-ink);
  font-size: 1rem;
}

.kcs-page--checkout [class*="fct-checkout"] input:focus,
.kcs-page--checkout [class*="fct-checkout"] select:focus,
.kcs-page--checkout .fct-input:focus {
  border-color: var(--c-navy);
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.kcs-page--checkout .fct-checkout h2,
.kcs-page--checkout .fct-checkout h3,
.kcs-page--checkout [class*="fct-"] h2,
.kcs-page--checkout [class*="fct-"] h3,
.kcs-page--checkout .fct-section-title {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-page--checkout .fct-checkout button[type="submit"],
.kcs-page--checkout .fct-place-order-btn,
.kcs-page--checkout button.fct-checkout-submit,
.kcs-page--checkout [class*="fct-"] button[type="submit"] {
  min-height: 56px;
  padding-inline: var(--s-6);
  border: 0;
  border-radius: var(--radius, 8px);
  background: var(--c-orange);
  color: var(--c-white);
  font: inherit;
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
}

.kcs-page--checkout [class*="fct-"] button[type="submit"]:hover {
  background: var(--c-orange-deep, #E04A25);
}

.kcs-page--checkout [class*="fct-"] button[type="submit"]:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.kcs-page--checkout .fct-order-summary,
.kcs-page--checkout [class*="order-summary"],
.kcs-page--checkout .fct-payment-methods,
.kcs-page--checkout [class*="fct-payment"] {
  border-color: var(--c-rule);
  border-radius: 10px;
}

.kcs-page--checkout .fct-checkout a {
  color: var(--c-navy);
}

/* Receipt */
.kcs-receiptpg {
  padding-top: var(--s-6);
  padding-bottom: var(--section-y);
}

.kcs-receiptpg__body {
  margin-top: var(--s-6);
  max-width: 44rem;
}

.kcs-receipt {
  margin: 0 0 var(--s-7);
  padding: var(--s-6);
  border: 1px solid var(--c-rule);
  border-top: 3px solid var(--c-orange);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-receipt__eyebrow {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-receipt__title {
  margin-top: var(--s-1);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-navy);
}

.kcs-receipt__text {
  margin-top: var(--s-3);
  color: var(--c-ink-2);
  max-width: 52ch;
}

.kcs-receipt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-5);
}

.kcs-page--receipt .fct-receipt,
.kcs-page--receipt [class*="fct-"] {
  font-family: inherit;
}

/* Account */
.kcs-accountpg {
  padding-top: var(--s-6);
  padding-bottom: var(--section-y);
}

.kcs-accountpg__head .kcs-lead {
  margin-top: var(--s-3);
  max-width: 52ch;
}

.kcs-accountpg__body {
  margin-top: var(--s-6);
}

.kcs-member {
  max-width: 44rem;
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-member__eyebrow {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-member__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
  font-family: var(--f-display);
  font-size: 1.25rem;
  color: var(--c-navy);
}

.kcs-member__detail {
  margin-top: var(--s-3);
  color: var(--c-ink-2);
}

.kcs-member .kcs-cluster {
  margin-top: var(--s-4);
}

/* Dashboard: my courses with progress. */
.kcs-mycourses {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcs-mycourses__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: var(--c-white);
}

.kcs-mycourses__item a {
  font-weight: 600;
  color: var(--c-navy);
  text-decoration: none;
}

.kcs-mycourses__item a:hover {
  text-decoration: underline;
}

.kcs-mycourses__progress {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--c-navy-tint-2);
  overflow: hidden;
}

.kcs-mycourses__progress span {
  display: block;
  height: 100%;
  background: var(--c-orange);
}

.kcs-mycourses__value {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
  min-width: 2.5rem;
  text-align: right;
}

/* -------------------------------------------------------------------------
   32. Forms in two columns. Short fields pair up; names (already two
   columns inside), long text, consent and the button take the full width.
   The markup is Fluent Forms' own; only the grid is ours.
   ---------------------------------------------------------------------- */
.kcs-form__wrap .fluentform form.frm-fluent-form > fieldset {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4) var(--s-5);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.kcs-form__wrap .fluentform form.frm-fluent-form > fieldset > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.kcs-form__wrap .fluentform .ff-el-group {
  margin-bottom: 0;
  min-width: 0;
}

.kcs-form__wrap .fluentform .ff-el-group:has(textarea),
.kcs-form__wrap .fluentform .ff-el-group:has(.ff-t-container),
.kcs-form__wrap .fluentform .ff-el-group:has(.ff-el-form-check),
.kcs-form__wrap .fluentform .ff-el-group:has(.ff-el-tc),
.kcs-form__wrap .fluentform .ff-el-group:has([type="checkbox"]),
.kcs-form__wrap .fluentform .ff_submit_btn_wrapper,
.kcs-form__wrap .fluentform .ff-message-success,
.kcs-form__wrap .fluentform .ff-errors-in-stack {
  grid-column: 1 / -1;
}

.kcs-form__wrap .fluentform .ff-el-group:has(.ff-t-container) .ff-t-cell + .ff-t-cell {
  padding-left: var(--s-4);
}

.kcs-form__wrap .fluentform .ff_submit_btn_wrapper {
  margin-top: var(--s-2);
}

.kcs-form__wrap .fluentform .ff-btn-submit {
  min-height: 52px;
  padding: 0 var(--s-6);
  font-size: 1.0625rem;
  color: var(--c-white);
}

.kcs-form__wrap .fluentform .ff-btn-submit:hover {
  color: var(--c-white);
}

.kcs-form__wrap .fluentform .ff-el-form-control {
  min-height: 52px;
  border-radius: 8px;
}

.kcs-form__wrap .fluentform .ff-el-help-message {
  margin-top: var(--s-1);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-form__wrap .fluentform .ff-el-form-check-label,
.kcs-form__wrap .fluentform .ff-el-tc {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  line-height: 1.5;
}

@media (min-width: 640px) {
  .kcs-form__wrap .fluentform form.frm-fluent-form > fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------
   33. Homepage plans, and the quiet reveal
   Free beside NIBS Plus; the four plans as a row of choices inside the
   Plus card. Reveal: anything marked data-kcs-reveal (other than the rail,
   which draws itself) settles 10px into place once, the first time it
   enters the viewport. It starts visible, so a fast scroll never meets an
   empty region. Removed entirely under reduced motion.
   ---------------------------------------------------------------------- */
.will-reveal:not(.kcs-rail) {
  opacity: 0.4;
  transform: translateY(10px);
}

.will-reveal.is-visible:not(.kcs-rail) {
  opacity: 1;
  transform: none;
  transition: opacity 360ms var(--ease-out), transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.will-reveal.is-visible[data-kcs-reveal-delay="1"] { transition-delay: 60ms; }
.will-reveal.is-visible[data-kcs-reveal-delay="2"] { transition-delay: 120ms; }
.will-reveal.is-visible[data-kcs-reveal-delay="3"] { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .will-reveal:not(.kcs-rail) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.kcs-plansec__head {
  max-width: 62ch;
}

.kcs-plansec__head .kcs-lead {
  margin-top: var(--s-4);
}

.kcs-plansec__tiers {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-7);
}

.kcs-plansec__tier {
  position: relative;
  padding: var(--s-6);
  border: 1px solid var(--c-rule);
  border-top: 3px solid var(--c-navy);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  min-width: 0;
}

/* The Plus card is the one that earns; it sits forward. */
.kcs-plansec__tier--plus {
  padding-top: calc(var(--s-6) + 10px);
  border: 1.5px solid var(--c-orange);
  border-top-width: 3px;
  box-shadow: 0 30px 60px -36px rgba(3, 9, 75, 0.45), 0 0 0 6px rgba(255, 90, 55, 0.08);
}

.kcs-plansec__ribbon {
  position: absolute;
  top: -14px;
  left: var(--s-6);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--c-orange);
  color: var(--c-white);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px -8px rgba(255, 90, 55, 0.8);
}

.kcs-plansec__top {
  display: grid;
  gap: var(--s-3);
}

.kcs-plansec__eyebrow {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-plansec__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.kcs-plansec__price strong {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-navy);
}

.kcs-plansec__price span {
  color: var(--c-ink-3);
}

.kcs-plansec__equiv {
  min-height: 1.5em;
  margin-top: var(--s-1);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-orange-text);
}

.kcs-plansec__equiv:empty {
  display: none;
}

.kcs-plansec__lead {
  margin-top: var(--s-3);
  color: var(--c-ink-2);
}

.kcs-plansec__top .kcs-plansec__lead {
  margin-top: 0;
}

.kcs-plansec__terms {
  margin: var(--s-5) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.kcs-plansec__legend {
  padding: 0;
  margin-bottom: var(--s-3);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-plansec__plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
}

.kcs-plansec__plan {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--s-4);
  border: 1.5px solid var(--c-rule-strong);
  border-radius: 10px;
  color: var(--c-navy);
  background: var(--c-white);
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

.kcs-plansec__plan:hover {
  border-color: var(--c-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.kcs-plansec__plan:has(input:focus-visible) {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.kcs-plansec__plan:has(input:checked) {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: var(--c-white);
  box-shadow: 0 16px 32px -20px rgba(3, 9, 75, 0.6);
}

.kcs-plansec__plan-name {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink-2);
}

.kcs-plansec__plan-price {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.1;
}

.kcs-plansec__plan-terms {
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-plansec__plan:has(input:checked) .kcs-plansec__plan-name,
.kcs-plansec__plan:has(input:checked) .kcs-plansec__plan-terms {
  color: rgba(255, 255, 255, 0.78);
}

.kcs-plansec__plan-save {
  position: absolute;
  top: -10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-orange);
  color: var(--c-white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kcs-plansec__plan-tick {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--c-orange);
  color: var(--c-white);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 160ms ease, transform 160ms ease;
}

.kcs-plansec__plan-tick .kcs-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.kcs-plansec__plan:has(input:checked) .kcs-plansec__plan-tick {
  opacity: 1;
  transform: none;
}

.kcs-plansec__go {
  margin-top: var(--s-5);
}

.kcs-plansec__go .kcs-btn {
  font-size: 1.125rem;
}

.kcs-plansec__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-3);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-plansec__trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kcs-plansec__trust .kcs-icon {
  width: 1rem;
  height: 1rem;
  color: var(--c-navy);
}

.kcs-plansec__list {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-5);
  padding: 0;
  list-style: none;
}

.kcs-plansec__list--cols {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-rule);
}

.kcs-plansec__list li {
  display: flex;
  gap: var(--s-2);
  align-items: start;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-plansec__list .kcs-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 3px;
  color: var(--c-orange);
}

.kcs-plansec__fine {
  margin-top: var(--s-4);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

@media (min-width: 768px) {
  .kcs-plansec__list--cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-5);
  }
}

@media (min-width: 1024px) {
  .kcs-plansec__tiers {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-6);
    align-items: start;
  }

  .kcs-plansec__top {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-6);
    align-items: end;
  }

  .kcs-plansec__plans {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .kcs-plansec__plan:hover {
    transform: none;
  }
}

/* Programme pages use the framed photograph too. */
.kcs-prog__media .kcs-frame .kcs-photo {
  aspect-ratio: var(--frame-ratio);
}

/* Payment methods on the NIBS Plus page: four quiet cards. */
.kcs-paysec .kcs-plans__methods--page {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.kcs-paysec .kcs-plans__methods--page li {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-paysec .kcs-plans__methods--page strong {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  color: var(--c-navy);
}

.kcs-paysec .kcs-plans__methods--page span {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-paysec .kcs-plans__methods--page .kcs-status {
  justify-self: start;
}

.kcs-paysec .kcs-muted {
  margin-top: var(--s-5);
  max-width: 62ch;
}

@media (min-width: 768px) {
  .kcs-paysec .kcs-plans__methods--page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .kcs-paysec .kcs-plans__methods--page {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------
   34. Forms as a designed object. The Fluent Forms markup sits inside a
   white card; labels carry weight, hints sit under the label in plain
   words, fields are 52px, names pair up, consent reads as a sentence.
   ---------------------------------------------------------------------- */
.kcs-form__wrap {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-form__wrap .fluentform .ff-el-input--label {
  margin-bottom: var(--s-2);
}

.kcs-form__wrap .fluentform .ff-el-input--label label {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.3;
}

.kcs-form__wrap .fluentform .ff-el-is-required .asterisk-right::after,
.kcs-form__wrap .fluentform .ff-el-required::after {
  color: var(--c-orange);
  margin-left: 2px;
}

.kcs-form__wrap .fluentform .ff-el-help-message {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--c-ink-3);
}

.kcs-form__wrap .fluentform .ff-el-input--content .ff-el-help-message {
  margin: var(--s-2) 0 0;
}

.kcs-form__wrap .fluentform .ff-el-form-control,
.kcs-form__wrap .fluentform select.ff-el-form-control {
  min-height: 52px;
  padding: 0 var(--s-4);
  border: 1.5px solid var(--c-rule-strong);
  border-radius: 8px;
  background: var(--c-white);
  font-size: 1rem;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.kcs-form__wrap .fluentform select.ff-el-form-control {
  padding-right: 2.5rem;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2303094B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.kcs-form__wrap .fluentform textarea.ff-el-form-control {
  min-height: 132px;
  padding: var(--s-3) var(--s-4);
  line-height: 1.5;
  resize: vertical;
}

.kcs-form__wrap .fluentform .ff-el-form-control:hover {
  border-color: var(--c-ink-3);
}

.kcs-form__wrap .fluentform .ff-el-form-control:focus {
  border-color: var(--c-navy);
  box-shadow: 0 0 0 4px rgba(3, 9, 75, 0.12);
  outline: 0;
}

.kcs-form__wrap .fluentform .ff-t-container {
  display: flex;
  gap: var(--s-4);
}

.kcs-form__wrap .fluentform .ff-t-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
}

.kcs-form__wrap .fluentform .ff-el-group:has(.ff-t-container) .ff-t-cell + .ff-t-cell {
  padding-left: 0;
}

.kcs-form__wrap .fluentform .ff-el-form-check {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: var(--c-surface, #F7F5F1);
}

.kcs-form__wrap .fluentform .ff-el-form-check-label,
.kcs-form__wrap .fluentform .ff-el-tc {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
}

.kcs-form__wrap .fluentform .ff-el-form-check-input,
.kcs-form__wrap .fluentform .ff-el-tc input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--c-navy);
}

.kcs-form__wrap .fluentform .ff-el-tc a,
.kcs-form__wrap .fluentform .ff-el-form-check-label a {
  color: var(--c-navy);
}

.kcs-form__wrap .fluentform .ff-btn-submit {
  min-height: 56px;
  padding: 0 var(--s-7);
  border-radius: 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-white);
  background: var(--c-orange);
  border-color: var(--c-orange);
  box-shadow: 0 10px 24px -14px rgba(255, 90, 55, 0.7);
}

.kcs-form__wrap .fluentform .ff-btn-submit:hover {
  color: var(--c-white);
  transform: translateY(-1px);
}

.kcs-form__wrap .fluentform .ff-message-success {
  padding: var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  font-size: 1.0625rem;
  color: var(--c-navy);
}

.kcs-form__wrap .fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--c-orange);
}

.kcs-form__wrap .fluentform .ff-el-is-error .text-danger {
  margin-top: var(--s-1);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-orange-deep, #B83E1F);
}

@media (max-width: 479px) {
  .kcs-form__wrap .fluentform .ff-t-container {
    flex-direction: column;
    gap: var(--s-4);
  }
}

/* -------------------------------------------------------------------------
   35. The programme builder as a marketplace. Categories across the top,
   one group of cards at a time, and a summary card that stays with you on
   desktop. A card is a big label over a hidden checkbox: the whole card is
   the target and the foot states what clicking does. Two numbered steps
   carry the buyer from the catalogue to the proposal.
   ---------------------------------------------------------------------- */
.kcs-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.kcs-steps__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink-3);
}

.kcs-steps__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1.5px solid var(--c-rule-strong);
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: var(--fs-meta);
  font-weight: 700;
}

.kcs-steps__item.is-on {
  color: var(--c-navy);
}

.kcs-steps__item.is-on .kcs-steps__num {
  border-color: var(--c-orange);
  background: var(--c-orange);
  color: var(--c-navy); /* navy on orange, as on the buttons: white fails contrast */
}

.kcs-steps__item.is-done .kcs-steps__num {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: var(--c-white);
}

.kcs-market {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

.kcs-market__main {
  min-width: 0;
}

.kcs-market__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-market__cat {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--c-rule-strong);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}

.kcs-market__cat:hover {
  border-color: var(--c-navy);
  color: var(--c-navy);
}

.kcs-market__cat.is-on {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: var(--c-white);
}

.kcs-market__cat.is-on .kcs-pp__pill {
  background: rgba(255, 255, 255, 0.2);
  color: var(--c-white);
}

.kcs-market__group[hidden] {
  display: none;
}

.kcs-market__group + .kcs-market__group {
  margin-top: var(--s-7);
}

.kcs-market__grouphead h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c-navy);
}

.kcs-market__grouphead p {
  margin: var(--s-2) 0 var(--s-5);
  max-width: 62ch;
  font-size: var(--fs-small);
  color: var(--c-ink-3);
}

.kcs-market__grid {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcs-mcard {
  display: flex;
}

.kcs-mcard__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.kcs-mcard__inner:hover {
  border-color: var(--c-navy);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.kcs-mcard__inner input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.kcs-mcard__inner input:focus-visible + .kcs-mcard__top {
  outline: none;
}

.kcs-mcard__inner:has(input:focus-visible) {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.kcs-mcard.is-on .kcs-mcard__inner {
  border-color: var(--c-navy);
  box-shadow: inset 0 0 0 1px var(--c-navy), var(--shadow-card);
}

.kcs-mcard__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
}

.kcs-mcard__area {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3); /* orange is for actions; the area is information */
}

.kcs-mcard__dur {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-mcard__dur .kcs-icon {
  width: 1rem;
  height: 1rem;
}

.kcs-mcard__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--c-navy);
}

.kcs-mcard__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-meta);
  line-height: 1.55;
  color: var(--c-ink-2);
}

.kcs-mcard__attrs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.kcs-mcard__attrlabel {
  width: 100%;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-mcard__attr {
  padding: 5px 10px;
  border: 1px solid var(--c-rule);
  border-radius: 999px;
  background: var(--c-surface);
  font-size: var(--fs-meta);
  color: var(--c-ink-2);
}

.kcs-mcard__cta {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-rule);
}

.kcs-mcard__add {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 1.5px solid var(--c-navy);
  border-radius: 8px;
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-mcard__add .kcs-icon {
  width: 1rem;
  height: 1rem;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}

.kcs-mcard.is-on .kcs-mcard__add {
  background: var(--c-navy);
  color: var(--c-white);
}

.kcs-mcard.is-on .kcs-mcard__add .kcs-icon {
  opacity: 1;
}

.kcs-mcard__ontext {
  display: none;
}

.kcs-mcard.is-on .kcs-mcard__addtext {
  display: none;
}

.kcs-mcard.is-on .kcs-mcard__ontext {
  display: inline;
}

/* The summary. */
.kcs-market__card {
  padding: var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-market__eyebrow {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-market__count {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: var(--s-2) 0 var(--s-4);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-market__count strong {
  font-family: var(--f-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--c-navy);
}

.kcs-market__chosen {
  display: grid;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  padding: 0;
  max-height: 40vh;
  overflow-y: auto;
  list-style: none;
}

.kcs-market__chosen:empty {
  display: none;
}

.kcs-market__chosen li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border-radius: 8px;
  background: var(--c-surface);
  font-size: var(--fs-meta);
  color: var(--c-ink-2);
}

.kcs-market__chosen button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--c-ink-3);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.kcs-market__chosen button:hover {
  background: var(--c-white);
  color: var(--c-orange-text);
}

/* How many people on a chosen course: a small labelled number box. */
.kcs-market__seats {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-market__seats input {
  width: 4.25rem;
  min-height: 36px;
  padding: 0 var(--s-2);
  border: 1px solid var(--c-rule-strong);
  border-radius: 6px;
  background: var(--c-white);
  color: var(--c-navy);
  font: 600 var(--fs-small) / 1 var(--f-text);
  text-align: right;
}

.kcs-market__seats input:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 1px;
}

.kcs-market__total {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-market__total[hidden] {
  display: none;
}

.kcs-market__empty {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-market__empty[hidden] {
  display: none;
}

.kcs-market__card .kcs-btn.is-quiet {
  background: var(--c-surface-2);
  border-color: var(--c-rule-strong);
  color: var(--c-ink-3);
}

.kcs-market__clear {
  margin-top: var(--s-3);
}

.kcs-market__clear[hidden] {
  display: none;
}

.kcs-market__hint {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

/* What the enquiry already carries, said once above the form. */
.kcs-recap {
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  background: var(--c-white);
}

.kcs-recap[hidden] {
  display: none;
}

.kcs-recap__head {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-recap__head strong {
  font-family: var(--f-display);
  font-size: 1.25rem;
  color: var(--c-navy);
}

.kcs-recap ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}

.kcs-recap li {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--c-navy-tint-2);
  font-size: var(--fs-meta);
  color: var(--c-navy);
}

.kcs-recap__note {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

@media (min-width: 640px) {
  .kcs-market__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones meet the summary first, so the cards below it stay compact. */
@media (max-width: 1023px) {
  .kcs-market__card {
    padding: var(--s-4);
  }

  .kcs-market__hint {
    display: none;
  }

  .kcs-mcard__inner {
    gap: var(--s-2);
    padding: var(--s-4);
  }

  .kcs-mcard__text {
    -webkit-line-clamp: 2;
  }

  .kcs-mcard__attrs {
    gap: 6px;
  }

  .kcs-mcard__cta {
    padding-top: var(--s-3);
  }
}

@media (min-width: 1024px) {
  .kcs-market {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--s-7);
  }

  /* Source order puts the summary first; on desktop it belongs on the right. */
  .kcs-market__main {
    grid-column: 1;
    grid-row: 1;
  }

  .kcs-market__side {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
  }

  .kcs-market__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1360px) {
  .kcs-market__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------
   36. e-Learning Cafe cards. One card per real cafe: photograph, badge,
   town, address, hours, what is on site, directions. The last card is
   honest about what is not open yet and invites the next one.
   ---------------------------------------------------------------------- */
.kcs-cafes {
  display: grid;
  gap: var(--s-5);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}

.kcs-cafe {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

@media (hover: hover) {
  .kcs-cafe:not(.kcs-cafe--next):hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
  }
}

.kcs-cafe__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--c-navy);
  overflow: hidden;
}

.kcs-cafe__media .kcs-photo,
.kcs-cafe__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

@media (hover: hover) {
  .kcs-cafe:hover .kcs-cafe__media img {
    transform: scale(1.04);
  }
}

.kcs-cafe__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  background: linear-gradient(135deg, var(--c-navy), #0B1A8A);
  color: rgba(255, 255, 255, 0.55);
}

.kcs-cafe__placeholder .kcs-icon {
  width: 3rem;
  height: 3rem;
}

.kcs-cafe__badge {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); /* neutral on a photograph */
}

.kcs-cafe__body {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-5);
}

.kcs-cafe__town {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-orange);
}

.kcs-cafe__town .kcs-icon {
  width: 1rem;
  height: 1rem;
}

.kcs-cafe__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--c-navy);
}

.kcs-cafe__text {
  margin: 0;
  color: var(--c-ink-2);
}

.kcs-cafe__facts {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-2) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-rule);
}

.kcs-cafe__facts div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
}

.kcs-cafe__facts dt {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--c-ink-3);
  padding-top: 2px;
}

.kcs-cafe__facts dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink);
}

.kcs-cafe__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-2);
}

.kcs-cafe__actions .kcs-link {
  margin-left: auto;
}

.kcs-cafe--next {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
  box-shadow: 0 12px 32px -20px rgba(0, 0, 0, 0.35); /* neutral: a navy shadow on a navy card reads as a glow */
}

.kcs-cafe--next .kcs-cafe__title {
  color: var(--c-white);
}

.kcs-cafe--next .kcs-cafe__text,
.kcs-cafe--next .kcs-cafe__planned {
  color: rgba(255, 255, 255, 0.82);
}

.kcs-cafe--next .kcs-cafe__planned {
  margin: 0;
  font-size: var(--fs-small);
}

.kcs-cafe--next .kcs-cafe__planned strong {
  color: var(--c-white);
}

.kcs-cafe--next .kcs-cafe__body {
  padding: var(--s-6) var(--s-5);
  min-height: 100%;
}

.kcs-cafe--next .kcs-link {
  color: var(--c-white);
}

.kcs-cafe--next .kcs-link:hover {
  color: var(--c-orange-tint);
}

@media (min-width: 768px) {
  .kcs-cafes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .kcs-cafes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kcs-cafe:first-child:nth-last-child(2) {
    grid-column: span 2;
    grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
    grid-template-rows: none;
  }

  .kcs-cafe:first-child:nth-last-child(2) .kcs-cafe__media {
    aspect-ratio: auto;
    min-height: 100%;
  }

  .kcs-cafe:first-child:nth-last-child(2) .kcs-cafe__body {
    padding: var(--s-6);
  }
}

/* -------------------------------------------------------------------------
   37. The short homepage. Eight sections; each one says one thing. The
   skill tiles sit in two rows, the Workplace Lab lives inside the Learn.
   Do. Prove. plate, the qualifications list runs in two columns, and the
   three secondary doors (Campus, organisations, cafes) share one band.
   ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .kcs-skillsec .kcs-skillgrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kcs-model__lab {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-on-navy-rule);
}

.kcs-model__labhead {
  display: grid;
  gap: var(--s-4);
  align-items: end;
}

.kcs-model__eyebrow {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--c-white);
}

.kcs-model__labtext {
  margin: var(--s-2) 0 0;
  max-width: 56ch;
  color: var(--c-on-navy-2);
}

.kcs-model__mock {
  margin-top: var(--s-6);
}

.kcs-model__mock .kcs-labmock__frame {
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.kcs-model__mock .kcs-labmock__caption {
  color: var(--c-on-navy-2);
}

/* The mock is a white app on the navy plate; its text keeps its own ink. */
.kcs-section--navy .kcs-labmock__frame {
  color: var(--c-ink);
}

.kcs-section--navy .kcs-labmock__frame p {
  color: inherit;
}

.kcs-section--navy .kcs-labmock__frame .kcs-labmock__title {
  color: var(--c-navy);
}

.kcs-section--navy .kcs-labmock__frame .kcs-labmock__brief {
  color: var(--c-ink-2);
}

.kcs-section--navy .kcs-labmock__frame .kcs-labmock__h {
  color: var(--c-ink-3);
}

/* Phones see the top of the task and the app fades into the plate; the
   Workplace Lab page shows the whole thing. */
@media (max-width: 767px) {
  .kcs-model__mock .kcs-labmock__frame {
    max-height: 640px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  }
}

@media (min-width: 1024px) {
  .kcs-model__labhead {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-6);
  }
}

.kcs-qualsec__uniform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) 0 0;
  font-size: var(--fs-small);
  color: var(--c-on-navy-2);
}

.kcs-qualsec__list--grid li {
  grid-template-columns: minmax(0, 1fr) auto;
}

.kcs-qualsec__arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--c-on-navy-2);
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.kcs-qualsec__arrow .kcs-icon {
  width: 1rem;
  height: 1rem;
}

.kcs-qualsec__list li:hover .kcs-qualsec__arrow {
  background: var(--c-orange);
  color: var(--c-white);
}

@media (min-width: 768px) {
  .kcs-qualsec__list--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-6);
    border-top: 0;
  }

  .kcs-qualsec__list--grid li:nth-child(-n + 2) {
    border-top: 1px solid var(--c-on-navy-rule);
  }
}

.kcs-doors__list {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcs-door__link {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  height: 100%;
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

@media (hover: hover) {
  .kcs-door__link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
  }

  .kcs-door__link:hover .kcs-door__cta .kcs-icon {
    transform: translateX(4px);
  }
}

.kcs-door__media {
  display: block;
  min-height: 100%;
  background: var(--c-navy);
  overflow: hidden;
}

.kcs-door__media .kcs-photo,
.kcs-door__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kcs-door__media--tile {
  display: grid;
  place-items: center;
  background: var(--c-navy-tint-2);
  color: var(--c-navy);
}

.kcs-door__media--tile .kcs-icon {
  width: 2rem;
  height: 2rem;
}

.kcs-door__body {
  display: grid;
  gap: var(--s-1);
  align-content: center;
  padding: var(--s-4) var(--s-5);
}

.kcs-door__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--c-navy);
}

.kcs-door__text {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--c-ink-2);
}

.kcs-door__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-door__cta .kcs-icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--t-base) var(--ease-out);
}

@media (min-width: 1024px) {
  .kcs-doors__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
  }

  .kcs-door__link {
    grid-template-columns: none;
    grid-template-rows: 150px minmax(0, 1fr);
  }

  .kcs-door__body {
    padding: var(--s-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kcs-door__link,
  .kcs-door__cta .kcs-icon,
  .kcs-cafe,
  .kcs-cafe__media img {
    transition: none;
  }
}


/* -------------------------------------------------------------------------
   38. Start learning: two doors, Free and Plus, then a short list for
   everything that needs a person. On a chosen route the side column
   keeps a compact list of the other ways in.
   ---------------------------------------------------------------------- */
.kcs-startpick {
  display: grid;
  gap: var(--s-5);
}

.kcs-startpick__card {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-6);
  border: 1px solid var(--c-rule);
  border-top: 3px solid var(--c-navy);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-startpick__card--plus {
  border-color: var(--c-orange);
  border-width: 1.5px;
  border-top-width: 3px;
  box-shadow: 0 30px 60px -36px rgba(3, 9, 75, 0.45), 0 0 0 6px rgba(255, 90, 55, 0.08);
}

.kcs-startpick__eyebrow {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-startpick__card--plus .kcs-startpick__eyebrow {
  color: var(--c-orange-text);
}

.kcs-startpick__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-navy);
  text-wrap: balance;
}

.kcs-startpick__text {
  margin: 0;
  color: var(--c-ink-2);
}

.kcs-startpick__list {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-2) 0 var(--s-3);
  padding: 0;
  list-style: none;
}

.kcs-startpick__list li {
  display: flex;
  gap: var(--s-2);
  align-items: start;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-startpick__list .kcs-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 3px;
  color: var(--c-orange);
}

.kcs-startpick__fine {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-startpick__else {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-rule);
}

.kcs-startpick__else-label {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-startpick__links {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcs-startpick__links a {
  display: flex;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.kcs-startpick__links a:hover {
  border-color: var(--c-navy);
  background: var(--c-navy-tint-2);
}

.kcs-startpick__links strong {
  display: block;
  color: var(--c-navy);
}

.kcs-startpick__links .kcs-icon {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 2px;
  color: var(--c-orange);
}

.kcs-chooser--compact {
  display: grid;
  gap: var(--s-2);
  margin-top: 0;
}

.kcs-chooser--compact .kcs-chooser__option {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-color: var(--c-rule);
  border-radius: 8px;
}

.kcs-chooser--compact .kcs-chooser__option strong {
  font-size: var(--fs-small);
}

.kcs-chooser--compact .kcs-chooser__option .kcs-icon {
  width: 1rem;
  height: 1rem;
  color: var(--c-orange);
}

@media (min-width: 768px) {
  .kcs-startpick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kcs-startpick__links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .kcs-startpick {
    gap: var(--s-6);
  }
}


/* -------------------------------------------------------------------------
   39. Skills Passport as a capability profile. A profile head (initials,
   identity, the current pathway, four counts, two actions and a quiet
   settings menu), then a horizontal tab strip that sticks under the site
   header and one panel at a time. Without JavaScript every panel is printed
   in order and the tabs are ordinary anchors; printing does the same and
   adds the transcript heading.
   ---------------------------------------------------------------------- */
.kcs-pp__profile {
  padding-top: var(--s-5);
  padding-bottom: var(--s-6);
  background: var(--c-white);
}

.kcs-pp__identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4) var(--s-5);
  align-items: start;
  margin-top: var(--s-4);
}

.kcs-pp__avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

.kcs-pp__who {
  min-width: 0;
}

/* Orange in the passport marks the tab you are on, a state that needs
   attention and the one action that matters. Labels are ink. */
.kcs-pp__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-1);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-pp__who .kcs-page__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: var(--lh-snug);
}

.kcs-pp__ref {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-pp__ref span {
  color: var(--c-rule-strong);
}

.kcs-pp__pathway {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-4) 0 0;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-pp__pathway strong {
  color: var(--c-navy);
}

.kcs-pp__pathway .kcs-complete__bar {
  flex: 1 1 140px;
  max-width: 220px;
}

.kcs-pp__pathchip {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--c-navy-tint-2);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-navy);
}

.kcs-pp__pathpct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-navy);
}

.kcs-pp__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.kcs-pp__actions .kcs-btn .kcs-icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* The overflow: privacy and sharing live here, reachable and quiet. */
.kcs-pp__more {
  position: relative;
}

.kcs-pp__more > summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-rule-strong);
  border-radius: 999px;
  color: var(--c-navy);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.kcs-pp__more > summary::-webkit-details-marker {
  display: none;
}

.kcs-pp__more > summary:hover {
  border-color: var(--c-navy);
  background: var(--c-surface);
}

.kcs-pp__menu {
  position: absolute;
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 260px;
  margin-top: var(--s-2);
  padding: var(--s-2);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-pp__menu a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: 8px;
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  text-decoration: none;
}

.kcs-pp__menu a:hover {
  background: var(--c-surface);
  color: var(--c-navy);
}

.kcs-pp__menu .kcs-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--c-ink-3);
}

.kcs-pp__dev {
  margin-top: var(--s-5);
  max-width: 72ch;
}

/* Four counts, in a row that wraps to two on a phone. */
.kcs-pp__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: var(--s-6) 0 0;
  padding: 0;
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-rule);
}

.kcs-pp__stat {
  display: grid;
  gap: 1px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-white);
}

.kcs-pp__stat dt {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-pp__stat dd {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--c-navy);
}

.kcs-pp__stat span {
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

/* The tab strip. */
.kcs-pp__tabsbar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  background: var(--c-white);
}

.kcs-pp__tabs {
  display: flex;
  gap: var(--s-6);
  overflow-x: auto;
  scrollbar-width: none;
}

.kcs-pp__tabs::-webkit-scrollbar {
  display: none;
}

.kcs-pp__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) 0;
  border-bottom: 3px solid transparent;
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.kcs-pp__tab:hover {
  color: var(--c-navy);
}

.kcs-pp__tab.is-on,
.kcs-pp__tab[aria-selected="true"] {
  color: var(--c-navy);
  border-bottom-color: var(--c-orange);
}

.kcs-pp__pill {
  display: inline-block;
  min-width: 1.5rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--c-navy-tint-2);
  color: var(--c-navy);
  font-size: var(--fs-meta);
  font-weight: 700;
  text-align: center;
}

.kcs-pp__tab.is-on .kcs-pp__pill,
.kcs-pp__tab[aria-selected="true"] .kcs-pp__pill {
  background: var(--c-navy);
  color: var(--c-white);
}

/* Panels. Every one is visible until the tabs take over. */
.kcs-pp__panels {
  padding-top: var(--s-7);
  padding-bottom: var(--s-9);
}

.kcs-pp__panel[hidden] {
  display: none;
}

.kcs-pp__panel + .kcs-pp__panel {
  margin-top: var(--s-8);
  padding-top: var(--s-7);
  border-top: 1px solid var(--c-rule);
}

.kcs-pp__panels.is-tabbed .kcs-pp__panel + .kcs-pp__panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.kcs-pp__paneltitle {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
  line-height: var(--lh-snug);
  color: var(--c-navy);
}

.kcs-pp__panellead {
  margin: var(--s-3) 0 var(--s-6);
  max-width: 74ch;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-pp__panelnote {
  margin: var(--s-5) 0 0;
  max-width: 74ch;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

/* The way out of a panel the tab strip does not list. */
.kcs-pp__back {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-meta);
}

.kcs-pp__back a {
  color: var(--c-ink-3);
}

.kcs-pp__back a::before {
  content: "90";
  margin-right: 6px;
}

.kcs-pp__back a:hover {
  color: var(--c-navy);
}

/* Overview: two columns of small cards. */
.kcs-pp__overview {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-5);
}

.kcs-pp__col {
  display: grid;
  gap: var(--s-5);
  align-content: start;
}

.kcs-pp__card {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-pp__card--path {
  border-left: 1px solid var(--c-rule);
}

.kcs-pp__card .kcs-gradebook__progress {
  margin-top: var(--s-4);
}

.kcs-pp__card .kcs-cluster {
  margin-top: var(--s-5);
}

.kcs-pp__card > .kcs-muted {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-small);
}

.kcs-pp__next {
  display: grid;
  gap: 2px;
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-4);
  border-radius: 8px;
  background: var(--c-surface);
  font-size: var(--fs-small);
}

.kcs-pp__next span {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-pp__next strong {
  color: var(--c-navy);
}

.kcs-pp__feed {
  display: grid;
  gap: 0;
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}

.kcs-pp__feed li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-rule);
}

.kcs-pp__feed li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.kcs-pp__feeddate {
  grid-column: 1 / -1;
  order: -1;
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-3);
}

.kcs-pp__feedbody {
  display: grid;
  gap: 1px;
  min-width: 0;
  font-size: var(--fs-small);
}

.kcs-pp__feedbody strong {
  color: var(--c-navy);
  font-weight: 600;
}

.kcs-pp__feedbody .kcs-muted {
  font-size: var(--fs-meta);
}

.kcs-pp__mix {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-4);
  padding: 0;
  list-style: none;
}

.kcs-pp__mix li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-pp__mix strong {
  min-width: 1.5rem;
  font-family: var(--f-display);
  font-size: 1.25rem;
  color: var(--c-navy);
}

.kcs-pp__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 2px solid var(--c-rule-strong);
}

.kcs-pp__dot--verified {
  background: var(--c-navy);
  border-color: var(--c-navy);
}

.kcs-pp__dot--review {
  background: var(--c-white);
  border-color: var(--c-orange);
}

.kcs-pp__dot--developing {
  background: var(--c-white);
  border-style: dashed;
}

.kcs-pp__share {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

/* Credentials as a wallet. */
.kcs-wallet {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcs-wallet__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-wallet__card.is-off {
  background: var(--c-surface);
  box-shadow: none;
}

/* The summary a reader scans: mark, title, type and date, status. */
.kcs-wallet__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-3);
}

.kcs-wallet__id {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.kcs-wallet__line {
  display: grid;
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--c-ink-3);
}

.kcs-wallet__share {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
}

.kcs-wallet__share::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--c-ink-3);
  border-radius: 999px;
}

.kcs-wallet__share.is-shared {
  color: var(--c-navy);
}

.kcs-wallet__share.is-shared::before {
  border-color: var(--c-navy);
  background: var(--c-navy);
}

.kcs-wallet__act,
.kcs-wallet__toggle {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--c-navy);
  text-decoration: underline;
  text-decoration-color: var(--c-rule-strong);
  text-underline-offset: 0.2em;
}

.kcs-wallet__act:hover,
.kcs-wallet__toggle:hover:not(:disabled) {
  text-decoration-color: var(--c-orange);
}

/* Everything else opens on demand. */
.kcs-wallet__more summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 24px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-2);
  cursor: pointer;
  list-style: none;
}

.kcs-wallet__more summary::-webkit-details-marker {
  display: none;
}

.kcs-wallet__more summary .kcs-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--t-base) var(--ease-out);
}

.kcs-wallet__more[open] summary .kcs-icon {
  transform: rotate(180deg);
}

.kcs-wallet__more[open] .kcs-wallet__meta {
  margin-top: var(--s-2);
}

.kcs-wallet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.kcs-wallet__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--c-navy-tint-2);
  color: var(--c-navy);
}

.kcs-wallet__mark .kcs-icon {
  width: 1rem;
  height: 1rem;
}

.kcs-wallet__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--c-navy);
}

.kcs-wallet__issuer {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-wallet__meta {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-meta);
}

.kcs-wallet__meta div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--s-3);
}

.kcs-wallet__meta dt {
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-wallet__meta dd {
  margin: 0;
  color: var(--c-ink-2);
  overflow-wrap: anywhere;
}

.kcs-wallet__meta code {
  font-size: var(--fs-meta);
  color: var(--c-navy);
}

.kcs-wallet__skills {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--c-ink-2);
}

.kcs-wallet__skills span {
  display: block;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-wallet__revoked {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--c-orange-text);
}

.kcs-wallet__url {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
  overflow-wrap: anywhere;
}

.kcs-wallet__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-rule);
}

.kcs-wallet__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.kcs-wallet__toggle {
  font-size: var(--fs-meta);
}

/* Skills in three groups; a skill opens to show where it came from. */
.kcs-skillgrp + .kcs-skillgrp {
  margin-top: var(--s-6);
}

.kcs-skillgrp__head h3 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c-navy);
}

.kcs-skillgrp__head p {
  margin: var(--s-1) 0 var(--s-3);
  max-width: 70ch;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-skillset {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcs-skillitem {
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
}

.kcs-skillitem > summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  list-style: none;
}

.kcs-skillitem > summary::-webkit-details-marker {
  display: none;
}

.kcs-skillitem > summary:hover {
  background: var(--c-surface);
}

.kcs-skillitem__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-skillitem__cat {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--c-ink-3);
}

.kcs-skillitem__count {
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
  white-space: nowrap;
}

.kcs-skillitem > summary .kcs-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  color: var(--c-ink-3);
  transition: transform var(--t-base) var(--ease-out);
}

.kcs-skillitem[open] > summary .kcs-icon {
  transform: rotate(180deg);
}

.kcs-skillitem__body {
  padding: 0 var(--s-4) var(--s-4);
  border-top: 1px solid var(--c-rule);
}

.kcs-skillitem__desc {
  margin: var(--s-4) 0 0;
  max-width: 72ch;
  font-size: var(--fs-meta);
  color: var(--c-ink-2);
}

.kcs-prov {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.kcs-prov li {
  display: grid;
  gap: 2px;
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-navy-tint);
}

.kcs-prov__kind {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-prov__what {
  font-size: var(--fs-small);
  color: var(--c-navy);
}

.kcs-prov__detail {
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

@media (min-width: 640px) {
  .kcs-pp__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .kcs-pp__identity {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .kcs-pp__actions {
    grid-column: auto;
    justify-content: flex-end;
  }

  .kcs-pp__overview {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s-6);
  }

  .kcs-pp__feed li {
    grid-template-columns: 6rem minmax(0, 1fr) auto;
  }

  .kcs-pp__feeddate {
    grid-column: 1;
    order: 0;
  }
}

@media (min-width: 768px) {
  .kcs-wallet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kcs-skillset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .kcs-wallet {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kcs-skillset {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------
   40. The grade book. Ruled tables like a transcript: a warm header row,
   codes in mono, results as stamps, dates right-aligned, a caption row
   with the block's name and its running total. Rows stack on phones.
   ---------------------------------------------------------------------- */
.kcs-gradebook__head {
  display: grid;
  gap: var(--s-4);
  align-items: end;
}

.kcs-gradebook__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.kcs-gradebook__tools .kcs-btn .kcs-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.kcs-gradebook__block {
  margin-top: var(--s-6);
}

/* A record with nothing on it: one panel that says what will land here.
   The button carries the orange; the panel does not need a stripe. */
.kcs-passport__start {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-passport__start .kcs-gradebook__title {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
}

.kcs-passport__steps {
  display: grid;
  list-style: decimal;
  gap: var(--s-3);
  margin: var(--s-4) 0 0;
  padding: 0 0 0 var(--s-5);
  max-width: 68ch;
  color: var(--c-ink-2);
  font-size: var(--fs-small);
}

.kcs-passport__steps li::marker {
  color: var(--c-navy);
  font-weight: 700;
}

.kcs-passport__steps strong {
  color: var(--c-navy);
}

.kcs-passport__start .kcs-cluster {
  margin-top: var(--s-5);
}

.kcs-gradebook__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-3);
}

.kcs-gradebook__kind {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.kcs-gradebook__title {
  margin: 2px 0 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--c-navy);
}

.kcs-gradebook__sum {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-gradebook__progress {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: min(100%, 320px);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-gradebook__progress .kcs-complete__bar {
  flex: 1 1 120px;
}

.kcs-gb {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  font-size: var(--fs-small);
}

.kcs-gb thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-gb td {
  padding: 12px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--c-rule);
  color: var(--c-ink-2);
}

.kcs-gb tbody tr:last-child td {
  border-bottom: 0;
}

.kcs-gb tbody tr:nth-child(even) td {
  background: #FBFBF9;
}

.kcs-gb tr.is-done td:first-child {
  box-shadow: inset 3px 0 0 var(--c-navy);
}

.kcs-gb tr.is-current td:first-child {
  box-shadow: inset 3px 0 0 var(--c-orange);
}

.kcs-gb tr.is-off td {
  color: var(--c-ink-3);
}

.kcs-gb td strong {
  display: block;
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-gb td code {
  font-size: var(--fs-meta);
  color: var(--c-navy);
  background: var(--c-navy-tint-2);
  padding: 1px 6px;
  border-radius: 4px;
}

.kcs-gb__code,
.kcs-gb__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-gb__num {
  width: 5.5rem;
  white-space: nowrap;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-gb__date {
  width: 1%;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.kcs-gb thead .kcs-gb__date {
  text-align: right;
}

.kcs-gb__bar {
  width: 9rem;
  min-width: 7rem;
}

.kcs-gb__bar .kcs-complete__bar {
  display: block;
  margin-bottom: 4px;
}

.kcs-gb__pct {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-gb__act {
  width: 1%;
  text-align: right;
}

.kcs-gb__act > * {
  display: inline-flex;
  white-space: nowrap;
}

.kcs-gb__act .kcs-btn + .kcs-link,
.kcs-gb__act .kcs-link + .kcs-btn {
  margin-top: var(--s-2);
}

.kcs-gb__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 4px;
  padding: 0;
  font-size: var(--fs-meta);
}

.kcs-gb__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.kcs-gb__more {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-gb__empty {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--c-rule-strong);
  border-radius: 10px;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-stamp {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.kcs-stamp--success {
  background: var(--c-navy);
  color: var(--c-white);
}

.kcs-stamp--info {
  background: var(--c-navy-tint-2);
  color: var(--c-navy);
  border-color: var(--c-navy-tint);
}

.kcs-stamp--warning {
  background: #FFF1EC;
  color: var(--c-orange-text);
  border-color: #FFD3C9;
}

.kcs-stamp--neutral {
  background: transparent;
  color: var(--c-ink-3);
  border-color: var(--c-rule-strong);
}

/* Waiting on the learner: an outline, nothing filled in yet. */
.kcs-stamp--pending {
  background: var(--c-white);
  color: var(--c-ink-2);
  border-style: dashed;
  border-color: var(--c-rule-strong);
}

/* With an assessor: navy outline, a small pulse that stops for reduced motion. */
.kcs-stamp--review {
  position: relative;
  padding-left: 18px;
  background: var(--c-white);
  color: var(--c-navy);
  border-color: var(--c-navy);
}

.kcs-stamp--review::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: var(--c-orange);
  animation: kcs-stamp-pulse 1.6s ease-in-out infinite;
}

/* On its way from the Workplace Lab: dashed navy tint with a clock. */
.kcs-stamp--sync {
  position: relative;
  padding-left: 20px;
  background: var(--c-navy-tint-2);
  color: var(--c-navy);
  border-style: dashed;
  border-color: var(--c-navy-tint);
}

.kcs-stamp--sync::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 1.5px 3.5px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 50% / 3px 1.5px no-repeat;
  background-position: 50% 30%, 62% 50%;
}

@keyframes kcs-stamp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .kcs-stamp--review::before {
    animation: none;
  }
}

/* The legend under a results table. */
.kcs-legend {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
}

.kcs-legend summary {
  cursor: pointer;
  color: var(--c-ink-3);
  font-weight: 600;
  padding: var(--s-2) 0;
}

.kcs-legend summary:hover {
  color: var(--c-navy);
}

.kcs-legend__list {
  display: grid;
  gap: var(--s-2) var(--s-5);
  margin: var(--s-2) 0 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
}

.kcs-legend__list div {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: center;
}

.kcs-legend__list dt {
  margin: 0;
}

.kcs-legend__list dd {
  margin: 0;
  color: var(--c-ink-2);
}

@media (min-width: 1024px) {
  .kcs-legend__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .kcs-gradebook__head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Phones: each row becomes a small card with the column name before the value. */
@media (max-width: 767px) {
  .kcs-gb,
  .kcs-gb tbody,
  .kcs-gb tr,
  .kcs-gb td {
    display: block;
    width: auto;
  }

  .kcs-gb thead {
    display: none;
  }

  .kcs-gb tr {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--c-rule);
  }

  .kcs-gb tbody tr:nth-child(even) td {
    background: transparent;
  }

  .kcs-gb tbody tr:nth-child(even) {
    background: #FBFBF9;
  }

  .kcs-gb tr.is-done td:first-child,
  .kcs-gb tr.is-current td:first-child {
    box-shadow: none;
  }

  .kcs-gb tr.is-done {
    box-shadow: inset 3px 0 0 var(--c-navy);
  }

  .kcs-gb tr.is-current {
    box-shadow: inset 3px 0 0 var(--c-orange);
  }

  /* Label in the first column, everything the cell holds stacked in the second. */
  .kcs-gb td {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    column-gap: var(--s-3);
    padding: 4px 0;
    border: 0;
    text-align: left;
  }

  .kcs-gb td[data-label]::before {
    content: attr(data-label);
    grid-column: 1;
    grid-row: 1 / span 9;
    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--c-ink-3);
  }

  .kcs-gb td > * {
    grid-column: 2;
    min-width: 0;
    justify-self: start;
  }

  .kcs-gb td > .kcs-complete__bar,
  .kcs-gb td > .kcs-gb__list {
    justify-self: stretch;
  }

  /* An empty cell (no date yet) prints nothing rather than a bare label. */
  .kcs-gb td:empty {
    display: none;
  }

  .kcs-gb td[data-label=""],
  .kcs-gb td:not([data-label]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .kcs-gb td[data-label=""]::before,
  .kcs-gb td:not([data-label])::before {
    content: none;
  }

  .kcs-gb td[data-label=""] > *,
  .kcs-gb td:not([data-label]) > * {
    grid-column: 1;
  }

  .kcs-gb__act {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--s-3);
    padding-top: var(--s-2) !important;
  }

  .kcs-gb__act .kcs-btn + .kcs-link,
  .kcs-gb__act .kcs-link + .kcs-btn {
    margin-left: 0;
  }

  .kcs-gb__date,
  .kcs-gb__act {
    white-space: normal;
  }

  .kcs-gb__bar .kcs-complete__bar {
    width: 100%;
  }
}

/* Print: the profile itself, in ink. The formal record is the transcript at
   /transcript/, which is its own A4 document with its own reference. */
@media print {
  .kcs-masthead,
  .kcs-utilbar,
  .kcs-header,
  .kcs-footer,
  .kcs-sticky,
  .kcs-pp__tabsbar,
  .kcs-pp__actions,
  .kcs-pp__avatar,
  .kcs-gradebook__tools,
  .kcs-gb__toggle,
  .kcs-gb__act,
  .kcs-wallet__acts,
  .kcs-details,
  .kcs-legend,
  .kcs-breadcrumbs {
    display: none !important;
  }

  /* Tabs are a screen idea; on paper the record prints whole. */
  .kcs-pp__panel[hidden] {
    display: block !important;
  }

  .kcs-pp__panels.is-tabbed .kcs-pp__panel + .kcs-pp__panel {
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--c-rule);
  }

  .kcs-pp__profile,
  .kcs-pp__panels {
    padding: 0;
  }

  .kcs-pp__identity {
    display: block;
    margin-top: 0;
  }

  .kcs-pp__stats {
    border-radius: 0;
    page-break-inside: avoid;
  }

  .kcs-pp__card,
  .kcs-wallet__card,
  .kcs-skillitem {
    box-shadow: none;
    page-break-inside: avoid;
  }

  .kcs-skillitem__body {
    display: block !important;
  }

  .kcs-gb {
    box-shadow: none;
    page-break-inside: auto;
  }

  .kcs-gb tr {
    page-break-inside: avoid;
  }

  .kcs-stamp--success {
    background: #000;
    color: #fff;
  }
}


/* -------------------------------------------------------------------------
   41. Log in. FluentAuth's front-end form (WordPress markup: .login-username,
   .login-password, .login-remember, .login-submit) drawn as the account
   card: 52px inputs, labels above, one navy button. The reset-password
   form takes the same rules.
   ---------------------------------------------------------------------- */
.kcs-login__grid {
  display: grid;
  gap: var(--s-7);
  margin-top: var(--s-6);
}

.kcs-login__card {
  max-width: 34rem;
  padding: var(--s-6) var(--s-6) var(--s-5);
  border: 1px solid var(--c-rule);
  border-top: 3px solid var(--c-navy);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-login__title {
  margin: var(--s-1) 0 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--c-navy);
}

.kcs-login__lead {
  margin: var(--s-2) 0 0;
  color: var(--c-ink-2);
}

.kcs-login__card .kcs-cluster {
  margin-top: var(--s-5);
}

.kcs-login__form {
  margin-top: var(--s-5);
}

.kcs-login__form form {
  display: grid;
  gap: var(--s-4);
}

.kcs-login__form form > p {
  margin: 0;
}

.kcs-login__form label {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-login__form .fls_field_label label {
  margin-bottom: 0;
}

.kcs-login__form .fls_field_label {
  margin-bottom: var(--s-1);
}

.kcs-login__form input[type="text"],
.kcs-login__form input[type="email"],
.kcs-login__form input[type="password"] {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--s-4);
  font: inherit;
  font-size: 1rem;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1.5px solid var(--c-rule-strong);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color var(--t-base) var(--ease-out);
}

.kcs-login__form input[type="text"]:focus,
.kcs-login__form input[type="email"]:focus,
.kcs-login__form input[type="password"]:focus {
  border-color: var(--c-navy);
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.kcs-login__form .fls_field_label label {
  display: inline;
}

.kcs-login__form .fls_field_label.is-required label::after {
  content: " *";
  color: var(--c-orange-text);
}

.kcs-login__form .fls_loading_svg {
  display: none;
}

.kcs-login__form .login-remember label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-weight: 500;
  color: var(--c-ink-2);
}

.kcs-login__form .login-remember input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--c-navy);
}

.kcs-login__form .login-submit {
  margin-top: var(--s-2);
}

.kcs-login__form input[type="submit"],
.kcs-login__form button[type="submit"],
.kcs-login__form .button-primary,
.kcs-login__form .fls_login_wrapper input#wp-submit,
.kcs-login__form .fls_reset_pass_wrapper .fls_reset_pass_form #fls_reset_pass,
.kcs-login__form .fls_login_wrapper button {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 0 var(--s-5);
  border: 1.5px solid var(--c-navy);
  border-radius: 8px;
  background: var(--c-navy);
  color: var(--c-white);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.kcs-login__form input[type="submit"]:hover,
.kcs-login__form button[type="submit"]:hover,
.kcs-login__form .button-primary:hover,
.kcs-login__form .fls_login_wrapper input#wp-submit:hover,
.kcs-login__form .fls_reset_pass_wrapper .fls_reset_pass_form #fls_reset_pass:hover,
.kcs-login__form .fls_login_wrapper button:hover {
  background: #0B1A8A;
  border-color: #0B1A8A;
}

.kcs-login__form input[type="submit"]:focus-visible,
.kcs-login__form button[type="submit"]:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* FluentAuth's inline responses. */
.kcs-login__form .fls_login_error,
.kcs-login__form .fls_error,
.kcs-login__form .fls_response_error {
  padding: var(--s-3) var(--s-4);
  border-radius: 8px;
  background: #FFF1EC;
  color: var(--c-orange-text);
  font-size: var(--fs-small);
}

.kcs-login__form .fls_login_success,
.kcs-login__form .fls_success,
.kcs-login__form .fls_response_success {
  padding: var(--s-3) var(--s-4);
  border-radius: 8px;
  background: var(--c-navy-tint-2);
  color: var(--c-navy);
  font-size: var(--fs-small);
}

.kcs-login__form .fls_loading,
.kcs-login__form svg.fls_loading_icon {
  color: var(--c-navy);
}

.kcs-login__card .kcs-auth__note {
  margin-top: var(--s-4);
}

.kcs-login__side .kcs-checks {
  margin-top: var(--s-4);
}

.kcs-login__help {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--c-ink-3);
}

@media (min-width: 1024px) {
  .kcs-login__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-9);
    align-items: start;
  }

  .kcs-login__side {
    padding-top: var(--s-6);
  }
}


/* The emailed-code step of signup: a wide-spaced six-digit field. */
.kcs-field--code {
  padding: var(--s-4);
  border: 1px dashed var(--c-navy-tint);
  border-radius: 10px;
  background: var(--c-navy-tint-2);
}

.kcs-field__input--code {
  max-width: 12rem;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-align: center;
}

.kcs-field__note {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-meta);
  color: var(--c-ink-2);
}

.kcs-field__note .kcs-linkbtn {
  font-size: var(--fs-meta);
}


/* -------------------------------------------------------------------------
   42. Become a NIBS e-Learning Cafe. One page, one intent: what NIBS checks
   as a card per requirement, and the form with its reason stated above it.
   ---------------------------------------------------------------------- */
.kcs-req {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcs-req__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-req__icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--c-navy);
  color: var(--c-white);
}

.kcs-req__icon .kcs-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.kcs-req__item strong {
  align-self: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--c-navy);
}

.kcs-req__item > span:last-child {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

/* The form says why it asks before it asks. */
.kcs-apply__intro {
  margin-bottom: var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-apply__intro p {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-apply__lead {
  margin-top: 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-apply__next {
  margin-bottom: 0;
}

.kcs-apply__next strong {
  color: var(--c-navy);
}

/* One quiet way back to the learner side of the cafes. */
.kcs-becomefoot {
  padding-block: var(--s-7);
  border-top: 1px solid var(--c-rule);
}

.kcs-becomefoot p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-3);
}

@media (min-width: 768px) {
  .kcs-req {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .kcs-req {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------
   43. Course cards: the marketplace unit for programmes and courses.
   Sibling of the role card (same surface, depth and hover), carrying what
   a learner decides on before clicking: what it is, how long, what it
   leads to, whether the Workplace Lab is part of it, and what it costs to
   start. The whole card is the link. Orange appears only on hover and on
   the Free mark, which is the one commercial emphasis.
   ---------------------------------------------------------------------- */
.kcs-courses {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .kcs-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .kcs-courses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kcs-courses--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kcs-course {
  display: flex;
}

.kcs-course__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-4) var(--s-4) var(--s-3);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

/* The type and area, read after the title (never a label above it). */
.kcs-course__type {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  margin: calc(-1 * var(--s-1)) 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-navy);
}

.kcs-course__type--area {
  font-weight: 500;
  color: var(--c-ink-3);
}

.kcs-course__type span + span {
  font-weight: 500;
  color: var(--c-ink-3);
}

.kcs-course__type span + span::before {
  content: "·";
  margin-right: var(--s-2);
  color: var(--c-rule-strong);
}

.kcs-course__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--c-navy);
  text-wrap: balance;
}

.kcs-course__link {
  color: inherit;
  text-decoration: none;
}

.kcs-course__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.kcs-course__summary {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--c-ink-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.kcs-course__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: var(--s-1) 0 0;
}

.kcs-course__facts span {
  padding: 2px var(--s-2);
  border-radius: 4px;
  background: var(--c-navy-tint-2);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-navy);
}

.kcs-course__credential {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-ink-2);
}

.kcs-course__credential .kcs-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 1px;
  color: var(--c-navy);
}

.kcs-course__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: auto 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-rule);
}

.kcs-course__access {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--c-ink-3);
}

.kcs-course__access strong {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-course__card--free .kcs-course__access strong {
  color: var(--c-orange-text);
}

.kcs-course__cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s-1);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--c-navy);
  white-space: nowrap;
}

.kcs-course__cta .kcs-icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--t-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .kcs-course__card:hover {
    transform: translateY(-2px);
    border-color: var(--c-rule-strong);
    box-shadow: var(--shadow-card-hover);
  }

  .kcs-course__card:hover .kcs-course__cta {
    color: var(--c-orange-text);
  }

  .kcs-course__card:hover .kcs-course__cta .kcs-icon {
    transform: translateX(3px);
  }
}

.kcs-course__card:focus-within {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.kcs-course__link:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .kcs-course__card,
  .kcs-course__card:hover {
    transform: none;
    transition: none;
  }
}

/* Homepage: where to start. Three groups, one per kind of learning. On a
   phone each group's cards are a row to swipe, the next card peeking; from
   640 two cards sit side by side under their heading; from 1024 the groups
   are columns and subgrid lines up the heads and both rows of cards. */
.kcs-popular__head {
  margin-bottom: var(--s-6);
}

.kcs-popular__head .kcs-h2 {
  text-wrap: balance;
}

.kcs-popular__groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
}

.kcs-popular__group {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

.kcs-popular__group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-rule);
}

.kcs-popular__group-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--c-navy);
}

.kcs-popular__group-line {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: 44ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--c-ink-3);
}

.kcs-popular__all {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.kcs-popular__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: var(--s-3);
  /* Room for the focus ring, which the scroll edge would otherwise clip. */
  margin: 0 -6px;
  padding: 6px 6px var(--s-3);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-rule-strong) transparent;
}

.kcs-popular__list > .kcs-course {
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .kcs-popular__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

@media (min-width: 1024px) {
  .kcs-popular__groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    gap: var(--s-4) var(--s-5);
  }

  .kcs-popular__group {
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: var(--s-4);
  }

  .kcs-popular__list {
    grid-row: 2 / span 2;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    gap: var(--s-4);
  }
}

/* Programme enrolment card: the role page's summary card, compact. On a
   phone it gives way to the sticky bar and the contents list keeps the top. */
.kcs-summary--enrol {
  gap: var(--s-3);
  padding: var(--s-5);
}

.kcs-summary--enrol .kcs-summary__title {
  font-size: 1.25rem;
  line-height: 1.2;
}

.kcs-summary__access {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-rule);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-summary__access strong {
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-navy);
}

.kcs-summary--enrol .kcs-summary__list {
  gap: var(--s-2);
  font-size: 0.9375rem;
}

.kcs-summary--enrol .kcs-summary__fine {
  margin: 0;
  text-align: center;
}

@media (max-width: 1023px) {
  .kcs-prog__aside .kcs-summary--enrol {
    display: none;
  }
}

/* Sticky bar with a page's own action: the price line left, the button right. */
.kcs-sticky__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.kcs-sticky__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--c-ink-3);
}

.kcs-sticky__text strong {
  font-size: 0.9375rem;
  color: var(--c-navy);
}

.kcs-sticky__row .kcs-btn {
  flex: 0 0 auto;
}

/* Start learning: the programme the learner chose, carried above the plan card. */
.kcs-start__picked {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-1) var(--s-4);
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-navy-tint-2);
}

.kcs-start__picked-label {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-ink-3);
}

.kcs-start__picked-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
}

.kcs-start__picked-title strong {
  font-family: var(--f-display);
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--c-navy);
}

.kcs-start__picked-title span {
  font-size: var(--fs-meta);
  color: var(--c-ink-2);
}

.kcs-start__picked-change {
  align-self: end;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-navy);
  text-underline-offset: 0.2em;
}

/* Grade book: an empty result reads as a quiet word, not a stamp. */
.kcs-gb__muted {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
}

/* A button that is working: the icon becomes a small spinner, the label says what is happening. */
.kcs-btn.is-busy {
  cursor: progress;
  opacity: 1;
}

.kcs-btn.is-busy .kcs-icon {
  visibility: hidden;
  position: relative;
}

.kcs-btn.is-busy::after {
  content: "";
  width: 1rem;
  height: 1rem;
  margin-left: calc(-1rem - var(--s-2));
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: kcs-spin 700ms linear infinite;
}

@keyframes kcs-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .kcs-btn.is-busy::after {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.5;
  }
}

/* -------------------------------------------------------------------------
   44. The membership as one card (.kcs-offer). NIBS Plus on the white side:
   choose how long, see the price, one orange button. What it includes and
   the free way in on a warm side panel. One border, one shadow; the chosen
   term is the only thing that fills navy.
   ---------------------------------------------------------------------- */
.kcs-plansec__head {
  max-width: 60ch;
}

.kcs-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--s-6);
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--shadow-card-hover);
  overflow: hidden;
}

@media (min-width: 960px) {
  .kcs-offer {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.kcs-offer__main {
  display: grid;
  gap: var(--s-5);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.kcs-offer__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--c-navy);
}

.kcs-offer__pitch {
  margin: var(--s-1) 0 0;
  color: var(--c-ink-2);
}

.kcs-offer__terms {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.kcs-offer__legend {
  margin-bottom: var(--s-3);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--c-ink-2);
}

.kcs-offer__plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}

@media (min-width: 560px) {
  .kcs-offer__plans {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kcs-offer__plan {
  position: relative;
  display: grid;
  gap: 2px;
  align-content: start;
  min-height: 92px;
  padding: var(--s-3);
  border: 1px solid var(--c-rule-strong);
  border-radius: 10px;
  background: var(--c-white);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.kcs-offer__plan-name {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--c-ink-2);
}

.kcs-offer__plan-price {
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-navy);
}

.kcs-offer__plan-note {
  font-size: 0.8125rem;
  color: var(--c-ink-3);
}

.kcs-offer__plan-save {
  justify-self: start;
  margin-top: var(--s-1);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--c-navy-tint);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy);
}

@media (hover: hover) and (pointer: fine) {
  .kcs-offer__plan:hover {
    border-color: var(--c-navy);
  }
}

.kcs-offer__plan:has(input:checked) {
  border-color: var(--c-navy);
  background: var(--c-navy);
  box-shadow: 0 10px 24px -14px rgba(3, 9, 75, 0.55);
}

.kcs-offer__plan:has(input:checked) .kcs-offer__plan-name,
.kcs-offer__plan:has(input:checked) .kcs-offer__plan-note {
  color: var(--c-on-navy-2);
}

.kcs-offer__plan:has(input:checked) .kcs-offer__plan-price {
  color: var(--c-white);
}

.kcs-offer__plan:has(input:checked) .kcs-offer__plan-save {
  background: rgba(255, 255, 255, 0.16);
  color: var(--c-white);
}

.kcs-offer__plan:has(input:focus-visible) {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.kcs-offer__buy {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-rule);
}

.kcs-offer__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin: 0;
}

.kcs-offer__price strong {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--c-navy);
}

.kcs-offer__price span {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-offer__equiv {
  margin: 0;
  min-height: 1.5em;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-offer__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1) var(--s-4);
  margin: 0;
  font-size: 0.8125rem;
  color: var(--c-ink-3);
  text-align: center;
}

.kcs-offer__side {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--c-surface);
  border-top: 1px solid var(--c-rule);
}

@media (min-width: 960px) {
  .kcs-offer__side {
    border-top: 0;
    border-left: 1px solid var(--c-rule);
  }
}

.kcs-offer__label {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--c-ink-2);
}

.kcs-offer__list {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcs-offer__list li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--c-ink);
}

.kcs-offer__list .kcs-icon {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 2px;
  color: var(--c-navy);
}

.kcs-offer__count {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-offer__free {
  display: grid;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-rule);
}

.kcs-offer__free-title {
  margin: 0;
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-offer__free-text {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-offer__foot {
  max-width: 60ch;
  margin: var(--s-4) 0 0;
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-offer__foot a {
  color: var(--c-navy);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
  .kcs-offer__plan {
    transition: none;
  }
}

/* Homepage qualifications on white: the formal route in the page's own ink,
   so the navy close is the only navy block at the foot of the page. */
.kcs-qualsec__panel--light {
  border: 1px solid var(--c-rule);
  background: var(--c-white);
  color: var(--c-ink);
  box-shadow: var(--shadow-card);
}

.kcs-qualsec__panel--light .kcs-h2 {
  color: var(--c-navy);
}

.kcs-qualsec__panel--light .kcs-lead {
  max-width: 44ch;
  color: var(--c-ink-2);
}

.kcs-qualsec__panel--light .kcs-qualsec__uniform {
  color: var(--c-ink-3);
}



.kcs-qualsec__panel--light .kcs-qualsec__list,
.kcs-qualsec__panel--light .kcs-qualsec__list li,
.kcs-qualsec__panel--light .kcs-qualsec__list--grid li:nth-child(-n + 2) {
  border-color: var(--c-rule);
}

.kcs-qualsec__panel--light .kcs-qualsec__list a {
  color: var(--c-navy);
}

.kcs-qualsec__panel--light .kcs-qualsec__list span {
  color: var(--c-ink-3);
}

.kcs-qualsec__panel--light .kcs-qualsec__arrow {
  color: var(--c-navy);
  background: var(--c-navy-tint-2);
}

/* -------------------------------------------------------------------------
   45. Homepage calm. Career goals as compact tiles on the warm band; the
   Workplace Lab mock as a preview that fades out rather than a full screen.
   ---------------------------------------------------------------------- */
/* Heading above the tiles by default; heading and photograph beside them on desktop. */
.kcs-goals__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

.kcs-goals__intro .kcs-lead {
  max-width: 40ch;
  margin-bottom: var(--s-4);
}

.kcs-goals__photo {
  display: none;
  margin: var(--s-6) 0 0;
}

.kcs-goals__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcs-goals__list > li {
  display: grid;
}

@media (min-width: 640px) {
  .kcs-goals__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .kcs-goals__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }

  .kcs-goals__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .kcs-goals__list {
    align-self: start;
  }

  /* The photograph fills what the tiles leave; it never sets the height. */
  .kcs-goals__photo {
    position: relative;
    display: block;
    flex: 1 1 0;
    width: 100%;
    min-height: 200px;
    overflow: hidden;
    border-radius: 10px; /* the tiles' corner, so the photograph sits with them */
    background: var(--c-surface-2);
  }

  .kcs-goals__photo picture,
  .kcs-goals__photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.kcs-goals__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  min-height: 64px;
  padding: var(--s-3);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  color: var(--c-navy);
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.kcs-goals__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--c-navy-tint-2);
  color: var(--c-navy);
}

.kcs-goals__icon svg {
  width: 20px;
  height: 20px;
}

.kcs-goals__text {
  display: grid;
  min-width: 0;
}

.kcs-goals__text strong {
  font-size: 0.9375rem;
  line-height: 1.3;
}

.kcs-goals__text span {
  font-size: 0.8125rem;
  color: var(--c-ink-3);
}

.kcs-goals__arrow {
  color: var(--c-ink-3);
  transition: color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.kcs-goals__arrow .kcs-icon {
  width: 1rem;
  height: 1rem;
}

@media (hover: hover) and (pointer: fine) {
  .kcs-goals__item:hover {
    border-color: var(--c-rule-strong);
    box-shadow: var(--shadow-card);
  }

  .kcs-goals__item:hover .kcs-goals__arrow {
    color: var(--c-navy);
    transform: translateX(3px);
  }
}

.kcs-goals__item:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

/* The Lab mock on the homepage is a preview: its first screen, fading out. */
.kcs-model--plate .kcs-model__mock .kcs-labmock__frame {
  max-height: 420px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .kcs-goals__item,
  .kcs-goals__arrow {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   46. Homepage hero on navy (.kcs-hero3). The statement in white at the
   left; four curated photographs of KCS sessions at the right in two
   columns, the second set lower; a ruled proof bar on the deeper navy
   across the foot. Orange stays on the accent words and the one primary
   action. The one authored moment: the portraits rise into place in
   sequence on load, still under reduced motion.
   ---------------------------------------------------------------------- */
.kcs-hero3 {
  --hero3-offset: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--c-navy);
  color: var(--c-on-navy);
}

.kcs-hero3__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
  padding-block: clamp(2.5rem, 7vw, 4rem) clamp(3rem, 8vw, 4.5rem);
}

.kcs-hero3__title {
  max-width: 13ch;
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 1.3rem + 4.4vw, 4.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--c-on-navy);
  text-wrap: balance;
}

.kcs-hero3__accent {
  color: var(--c-orange);
}

.kcs-hero3__lead {
  max-width: 44ch;
  margin: var(--s-5) 0 0;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-on-navy-2);
  text-wrap: pretty;
}

.kcs-hero3__actions {
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-6);
}

.kcs-hero3__actions .kcs-link--on-dark {
  font-weight: 600;
}

/* The question, as a white field on navy. */
.kcs-hero3__search {
  max-width: 34rem;
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-on-navy-rule);
}

.kcs-hero3__search .kcs-become {
  margin-top: 0;
}

.kcs-hero3__search .kcs-become__label {
  font-size: 1.0625rem;
  color: var(--c-on-navy);
}

.kcs-hero3__search .kcs-become__field {
  border-color: var(--c-white);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.45);
}

.kcs-hero3__search .kcs-become__field:focus-within {
  border-color: var(--c-orange);
  box-shadow: 0 0 0 4px rgba(255, 90, 55, 0.35);
}

.kcs-hero3__search .kcs-become__input {
  min-height: 56px;
  font-size: 1.0625rem;
}

.kcs-hero3__search .kcs-become__submit {
  min-height: 44px;
}

.kcs-hero3__search .kcs-become__list {
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.5);
}

/* Four portraits, two columns; the second column sits lower. */
.kcs-hero3__mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  padding-bottom: var(--hero3-offset);
}

.kcs-hero3__tile {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-navy-deep);
}

.kcs-hero3__tile:nth-child(even) {
  translate: 0 var(--hero3-offset);
}

.kcs-hero3__tile picture,
.kcs-hero3__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tablet: the four in one staggered row, so the spread stays one screen. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .kcs-hero3__mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kcs-hero3__tile {
    aspect-ratio: 3 / 4;
  }
}

@media (min-width: 1024px) {
  .kcs-hero3__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
    min-height: clamp(600px, calc(100vh - 170px), 760px);
    padding-block: var(--s-8);
  }

  /* The headline scales with its column, so it keeps three lines from 1024 up. */
  .kcs-hero3__title {
    max-width: 15ch;
    font-size: clamp(3rem, 0.2rem + 4.2vw, 4.5rem);
  }

  .kcs-hero3__mosaic {
    gap: var(--s-4);
    width: 100%;
    max-width: 520px;
    justify-self: end;
  }

  .kcs-hero3__tile {
    aspect-ratio: 5 / 6;
  }
}

/* The facts, ruled, on the deeper navy. */
.kcs-hero3__proofwrap {
  border-top: 1px solid var(--c-on-navy-rule);
  background: var(--c-navy-deep);
}

.kcs-hero3__proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  list-style: none;
}

.kcs-hero3__proof li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4) var(--s-3) var(--s-4) 0;
}

.kcs-hero3__proof li:nth-child(n + 3) {
  border-top: 1px solid var(--c-on-navy-rule);
}

.kcs-hero3__proof .kcs-icon {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 2px;
  color: var(--c-on-navy-2);
}

.kcs-hero3__proof span {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--c-on-navy-2);
}

.kcs-hero3__proof strong {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--c-on-navy);
}

@media (min-width: 1024px) {
  .kcs-hero3__proof {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kcs-hero3__proof li {
    padding: var(--s-5) var(--s-5) var(--s-5) 0;
  }

  .kcs-hero3__proof li:nth-child(n + 3) {
    border-top: 0;
  }

  .kcs-hero3__proof li + li {
    padding-left: var(--s-5);
    border-left: 1px solid var(--c-on-navy-rule);
  }
}

@keyframes kcs-hero3-rise {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.kcs-hero3__tile {
  animation: kcs-hero3-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) calc(120ms + var(--i, 0) * 110ms) both;
}

@media (prefers-reduced-motion: reduce) {
  .kcs-hero3__tile {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   47. For Organisations. What a buyer can show their funders, as four
   plain facts under the hero; the three service models as cards, each
   with "Choose this", which fills the model into the enquiry. One quiet
   edge per card, no coloured rules; orange stays on the actions.
   ---------------------------------------------------------------------- */
.kcs-orgreport {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5) var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .kcs-orgreport { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .kcs-orgreport { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kcs-orgreport__item {
  display: grid;
  align-content: start;
  gap: var(--s-2);
}

.kcs-orgreport__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--c-navy-tint-2);
  color: var(--c-navy);
}

.kcs-orgreport__icon .kcs-icon {
  width: 22px;
  height: 22px;
}

.kcs-orgreport__item strong {
  font-family: var(--f-display);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--c-navy);
}

.kcs-orgreport__item > span:last-child {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
}

.kcs-orgmodels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .kcs-orgmodels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.kcs-orgmodels__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.kcs-orgmodels__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--c-navy);
}

.kcs-orgmodels__text {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
}

.kcs-orgmodels__for {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--c-ink-3);
}

.kcs-orgmodels__choose {
  align-self: flex-start;
  margin-top: auto;
}

/* The chosen model: a navy edge and a filled button, and the form says the same. */
.kcs-orgmodels__item.is-on {
  border-color: var(--c-navy);
  box-shadow: 0 0 0 1px var(--c-navy), var(--shadow-card);
}

.kcs-orgmodels__item.is-on .kcs-orgmodels__choose {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}

@media (prefers-reduced-motion: reduce) {
  .kcs-orgmodels__item {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   48. Accreditation on a qualification page: the QCTO statement with the
   number, the end date and the address from the letter. A quiet success
   tint, not a warning: it is the reason to trust the page.
   ---------------------------------------------------------------------- */
.kcs-accredit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-accredit__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--c-navy);
  color: var(--c-white);
}

.kcs-accredit__icon .kcs-icon {
  width: 24px;
  height: 24px;
}

.kcs-accredit p {
  margin: 0;
  max-width: 64ch;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-ink-2);
}

.kcs-accredit .kcs-accredit__title {
  margin-bottom: var(--s-1);
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-accredit .kcs-accredit__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-2);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-accredit__meta span {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   49. One form standard (23 September 2026). Every form on the site, whoever
   renders it (Fluent Forms, the sign-up form, FluentAuth's log-in, the
   verification lookup), is the same object: a white card with one quiet
   edge, semibold navy labels, 52px fields with 8px corners and a navy
   border on focus with the orange ring, and the site's primary button as
   the one submit. This section wins over the earlier per-form rules.
   ---------------------------------------------------------------------- */
.kcs-form__wrap,
.kcs-auth,
.kcs-login__card,
.kcs-verifyform {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-verifyform {
  max-width: 44rem;
}

.kcs-form__wrap .fluentform .ff-el-input--label label,
.kcs-field__label,
.kcs-login__form .fls_field_label label,
.kcs-login__form p > label,
.kcs-verifyform .kcs-label {
  font-family: var(--f-text);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-navy);
}

.kcs-form__wrap .fluentform .ff-el-form-control,
.kcs-field__input,
.kcs-login__form input[type="text"],
.kcs-login__form input[type="email"],
.kcs-login__form input[type="password"],
.kcs-verifyform .kcs-searchform__input {
  min-height: 52px;
  border: 1px solid var(--c-rule-strong);
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-ink);
}

.kcs-form__wrap .fluentform .ff-el-form-control,
.kcs-login__form input[type="text"],
.kcs-login__form input[type="email"],
.kcs-login__form input[type="password"],
.kcs-verifyform .kcs-searchform__input {
  font-size: 1rem;
}

.kcs-form__wrap .fluentform .ff-el-form-control:focus,
.kcs-field__input:focus,
.kcs-login__form input[type="text"]:focus,
.kcs-login__form input[type="email"]:focus,
.kcs-login__form input[type="password"]:focus,
.kcs-verifyform .kcs-searchform__input:focus {
  border-color: var(--c-navy);
  box-shadow: none;
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.kcs-form__wrap .fluentform .ff-btn-submit,
.kcs-auth button[type="submit"],
.kcs-login__form input[type="submit"],
.kcs-login__form button[type="submit"],
.kcs-login__form .button-primary,
.kcs-login__form .fls_login_wrapper input#wp-submit,
.kcs-login__form .fls_reset_pass_wrapper .fls_reset_pass_form #fls_reset_pass,
.kcs-login__form .fls_login_wrapper button,
.kcs-verifyform .kcs-searchform .kcs-btn {
  min-height: 56px;
  border: 1.5px solid var(--c-orange);
  border-radius: var(--radius);
  background: var(--c-orange);
  color: var(--c-navy);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  font-weight: 700;
}

.kcs-form__wrap .fluentform .ff-btn-submit:hover,
.kcs-auth button[type="submit"]:hover,
.kcs-login__form input[type="submit"]:hover,
.kcs-login__form button[type="submit"]:hover,
.kcs-login__form .button-primary:hover,
.kcs-login__form .fls_login_wrapper input#wp-submit:hover,
.kcs-login__form .fls_reset_pass_wrapper .fls_reset_pass_form #fls_reset_pass:hover,
.kcs-login__form .fls_login_wrapper button:hover,
.kcs-verifyform .kcs-searchform .kcs-btn:hover {
  border-color: var(--c-orange-deep);
  background: var(--c-orange-deep);
  color: var(--c-navy);
}

.kcs-form__wrap .fluentform .ff-btn-submit:focus-visible,
.kcs-auth button[type="submit"]:focus-visible,
.kcs-login__form input[type="submit"]:focus-visible,
.kcs-login__form button[type="submit"]:focus-visible,
.kcs-verifyform .kcs-searchform .kcs-btn:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* Fluent Forms lays out a consent label as two table cells with no gap, so
   the box touched the words; and the name field's wrapper is not the group
   the spanning rule expected, so first and last name shared a row with email. */
.kcs-form__wrap .fluentform .ff-el-tc .ff_tc_label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.kcs-form__wrap .fluentform .ff-el-tc .ff_tc_label > .ff_tc_checkbox,
.kcs-form__wrap .fluentform .ff-el-tc .ff_tc_label > .ff_t_c {
  display: block;
}

.kcs-form__wrap .fluentform form.frm-fluent-form > fieldset > .ff-name-field-wrapper,
.kcs-form__wrap .fluentform form.frm-fluent-form > fieldset > :has(> .ff-t-container) {
  grid-column: 1 / -1;
}

/* Consent and opt-in rows: the same tinted panel and 20px navy box as Fluent Forms' consent. */
.kcs-auth .kcs-field--check .kcs-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: var(--c-surface);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-2);
}

.kcs-auth .kcs-field--check .kcs-check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--c-navy);
}

/* Contact: the two ways people reach NIBS first, above the details. */
.kcs-contact__quick {
  margin-top: var(--s-4);
  gap: var(--s-3);
}

/* ==========================================================================
   50. Certificates on the homepage (.kcs-certs). The NIBS awards as a ruled
   list beside two specimens of the certificate, after the way a
   professional awarding body shows its certificates. The specimens are the
   real A4 landscape sheet drawn in HTML at any width: each sheet is a size
   container and its type is set in container units, so it scales as one
   object. Phones: heading, the specimens, then the list. Desktop: heading
   and list in five columns, the specimens in seven, held in view while the
   list scrolls past.
   ========================================================================== */
.kcs-certs__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "stack" "body";
  gap: var(--s-6);
}

.kcs-certs__intro {
  grid-area: intro;
}

.kcs-certs__intro .kcs-lead {
  max-width: 44ch;
}

.kcs-certs__body {
  grid-area: body;
}

.kcs-certs__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--c-rule);
}

.kcs-certs__list li {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--c-rule);
}

.kcs-certs__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--c-navy);
  text-wrap: balance;
}

.kcs-certs__title span {
  font-weight: 500;
}

.kcs-certs__list p {
  margin: var(--s-2) 0 0;
  max-width: 52ch;
  color: var(--c-ink-2);
  text-wrap: pretty;
}

.kcs-certs__list .kcs-link {
  margin-top: var(--s-1);
}

.kcs-certs__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-5) 0 0;
  font-size: var(--fs-small, 0.9375rem);
  color: var(--c-ink-2);
}

/* The specimens: two sheets in one grid cell, the attestation behind and
   up, the Professional Certificate in front and lower. */
.kcs-certs__stack {
  grid-area: stack;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0 var(--s-2) var(--s-4);
}

.kcs-certs__sheet {
  grid-area: 1 / 1;
  width: 82%;
  aspect-ratio: 297 / 210;
  container-type: inline-size;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(3, 9, 75, 0.08), 0 28px 56px -28px rgba(3, 9, 75, 0.38);
}

.kcs-certs__sheet--back {
  justify-self: start;
  align-self: start;
  transform: rotate(-2.5deg);
  transform-origin: 30% 60%;
}

.kcs-certs__sheet--front {
  position: relative;
  z-index: 1;
  justify-self: end;
  margin-top: 24%;
}

.kcs-certs__inner {
  position: relative;
  height: 100%;
  padding: 7cqi 7.5cqi 5cqi;
  overflow: hidden;
  color: var(--c-ink-2);
  font-family: "Public Sans", system-ui, sans-serif;
}

/* The sheet's frame and its navy bar with the orange end, as on paper. */
.kcs-certs__inner::before {
  content: "";
  position: absolute;
  inset: 3cqi;
  border: 1px solid var(--c-navy);
  pointer-events: none;
}

.kcs-certs__bar {
  position: absolute;
  top: 3cqi;
  left: 3cqi;
  right: 3cqi;
  height: 2cqi;
  background: var(--c-navy);
}

.kcs-certs__bar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 14%;
  background: var(--c-orange);
}

.kcs-certs__specimen {
  position: absolute;
  top: 7.5cqi;
  right: 7.5cqi;
  padding: 0.5cqi 1.6cqi;
  border: 1px solid var(--c-orange-text);
  border-radius: 999px;
  font-size: 1.5cqi;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-orange-text);
}

.kcs-certs__head {
  display: grid;
  justify-items: start;
  gap: 0.8cqi;
}

.kcs-certs__head img {
  width: auto;
  height: 5.2cqi;
}

.kcs-certs__head span {
  font-size: 1.45cqi;
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-certs__kind {
  margin: 4.2cqi 0 0;
  font-family: "Schibsted Grotesk", "Public Sans", system-ui, sans-serif;
  font-size: 3.9cqi;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--c-navy);
}

.kcs-certs__kind span {
  font-weight: 500;
  color: var(--c-ink-2);
}

.kcs-certs__small {
  margin: 2.6cqi 0 0;
  max-width: 64cqi;
  font-size: 1.7cqi;
  line-height: 1.35;
}

.kcs-certs__name {
  margin: 0.8cqi 0 0;
  font-family: "Schibsted Grotesk", "Public Sans", system-ui, sans-serif;
  font-size: 5.2cqi;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-navy);
}

.kcs-certs__rule {
  display: block;
  width: 20cqi;
  height: 0.5cqi;
  margin-top: 2cqi;
  background: var(--c-orange);
}

.kcs-certs__small + .kcs-certs__subject {
  margin: 0.6cqi 0 0;
}

.kcs-certs__subject {
  font-family: "Schibsted Grotesk", "Public Sans", system-ui, sans-serif;
  font-size: 3cqi;
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-navy);
}

.kcs-certs__foot {
  position: absolute;
  left: 7.5cqi;
  right: 7.5cqi;
  bottom: 6cqi;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 1.4cqi;
  line-height: 1.4;
}

.kcs-certs__foot strong {
  display: block;
  color: var(--c-navy);
}

.kcs-certs__foot svg {
  width: 10cqi;
  height: 10cqi;
  display: block;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .kcs-certs__stack {
    max-width: 40rem;
  }
}

@media (min-width: 1024px) {
  .kcs-certs__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "intro stack" "body stack";
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    row-gap: var(--s-6);
  }

  .kcs-certs__stack {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
    align-self: start;
    padding-top: var(--s-2);
  }
}

/* ==========================================================================
   51. Published policies (.kcs-legal). The Privacy Policy and the Terms of
   Use as long reading: the text at the prose measure with numbered section
   headings, and beside it the version, the dates, the contact and a
   contents list that stays in view on desktop.
   ========================================================================== */
.kcs-legal__text h2 {
  margin-top: var(--s-8);
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}

.kcs-legal__text > p:first-child + h2 {
  margin-top: var(--s-6);
}

.kcs-legal__text h3 {
  margin-top: var(--s-6);
  font-family: var(--f-display);
  font-size: 1.125rem;
  color: var(--c-navy);
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}

.kcs-legal__text > p:first-child {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-legal__text ul {
  padding-left: 1.25rem;
}

.kcs-legal__text li + li {
  margin-top: var(--s-1);
}

.kcs-legal__text a {
  overflow-wrap: anywhere;
}

.kcs-legal__facts > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-3) 0;
}

.kcs-legal__facts dt {
  font-size: 1rem;
}

.kcs-legal__facts dd {
  margin: 0;
  font-size: var(--fs-small);
}

.kcs-legal__pending {
  max-width: var(--measure);
}

.kcs-legal__toc {
  margin-top: var(--s-6);
}

.kcs-legal__tochead {
  margin: 0 0 var(--s-2);
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--c-navy);
}

.kcs-legal__toc ol {
  margin: 0;
  padding-left: 1.5rem;
  list-style: decimal;
  font-size: var(--fs-small);
  color: var(--c-ink-3);
}

.kcs-legal__toc li + li {
  margin-top: var(--s-1);
}

.kcs-legal__toc a {
  color: var(--c-ink-2);
  text-decoration: none;
}

.kcs-legal__toc a:hover,
.kcs-legal__toc a:focus-visible {
  color: var(--c-navy);
  text-decoration: underline;
  text-decoration-color: var(--c-orange);
  text-underline-offset: 0.2em;
}

@media (max-width: 1023px) {
  .kcs-legal__aside {
    order: -1;
  }

  .kcs-legal__toc {
    display: none;
  }
}

@media (min-width: 1024px) {
  .kcs-legal__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
    max-height: calc(100vh - var(--header-h) - var(--s-8));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--c-rule-strong) transparent;
  }
}

/* ==========================================================================
   52. Paying (.kcs-pay). One frame for the four pages a learner pays
   through: start, checkout, Pay@ and the receipt. The three steps (your
   account, payment, you are in), one heading that says what to do, a line
   of facts, then the task on the left and the order on the right, held in
   view on desktop. Cards share the form standard's white card with one
   quiet edge.
   ========================================================================== */
.kcs-pay {
  padding-block: var(--s-6) var(--s-9);
}

.kcs-pay__head {
  max-width: 62rem;
  margin-bottom: var(--s-7);
}

.kcs-pay__head .kcs-breadcrumbs {
  margin-bottom: var(--s-5);
}

.kcs-pay__head .kcs-steps {
  margin-bottom: var(--s-5);
}

.kcs-pay__head .kcs-page__title {
  margin: 0;
  text-wrap: balance;
}

.kcs-pay__head .kcs-lead {
  margin-top: var(--s-3);
  max-width: 52ch;
}

.kcs-pay__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-4) 0 0;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.kcs-pay__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

.kcs-pay__main {
  display: grid;
  gap: var(--s-5);
  min-width: 0;
}

.kcs-paycard {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}

.kcs-paycard > * + * {
  margin-top: var(--s-4);
}

.kcs-paycard__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-navy);
}

.kcs-paycard p {
  max-width: 56ch;
  color: var(--c-ink-2);
}

.kcs-paycard__fine {
  font-size: var(--fs-small);
  color: var(--c-ink-3) !important;
}

.kcs-paycard--online {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
}

.kcs-paycard--online > * + * {
  margin-top: 0;
}

.kcs-paycard__body > * + * {
  margin-top: var(--s-4);
}

.kcs-paycard__cta {
  width: 100%;
  justify-content: center;
}

.kcs-paycard__qr {
  display: none;
  margin: 0;
  padding: var(--s-4);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  text-align: center;
}

.kcs-paycard__qr svg {
  display: block;
  width: 148px;
  height: 148px;
  margin-inline: auto;
}

.kcs-paycard__qr figcaption {
  margin-top: var(--s-2);
  font-size: var(--fs-meta);
  color: var(--c-ink-3);
}

.kcs-pay__or {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
}

.kcs-pay__or::before,
.kcs-pay__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-rule);
}

.kcs-paynumber {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: 10px;
  background: var(--c-navy-tint);
}

.kcs-paynumber__label {
  flex-basis: 100%;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-2);
}

.kcs-paynumber__value {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--c-navy);
  overflow-wrap: anywhere;
}

.kcs-paycard__shops strong {
  display: block;
  margin-bottom: var(--s-1);
  color: var(--c-navy);
}

.kcs-paycard--done {
  text-align: left;
}

.kcs-paycard__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--c-navy);
  color: var(--c-white);
}

.kcs-paycard__icon svg {
  width: 24px;
  height: 24px;
}

.kcs-pay__dev,
.kcs-pay__part {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border-radius: 10px;
  font-size: var(--fs-small);
  color: var(--c-ink);
}

.kcs-pay__dev {
  background: var(--c-surface);
}

.kcs-pay__part {
  background: #FFF4EE;
}

.kcs-pay__dev svg,
.kcs-pay__part svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* The order, beside the task. */
.kcs-pay__aside {
  display: grid;
  gap: var(--s-5);
  min-width: 0;
}

.kcs-paysum {
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  background: var(--c-surface);
}

.kcs-paysum__label {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
}

.kcs-paysum__title {
  margin: var(--s-1) 0 0;
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-paysum__rows {
  margin: var(--s-4) 0 0;
}

.kcs-paysum__rows > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-small);
}

.kcs-paysum__rows dt {
  color: var(--c-ink-2);
}

.kcs-paysum__rows dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  text-align: right;
}

.kcs-paysum__due dt,
.kcs-paysum__due dd {
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-paynext {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paynext;
}

.kcs-paynext li {
  position: relative;
  padding: 0 0 var(--s-4) 2.5rem;
  counter-increment: paynext;
  font-size: var(--fs-small);
}

.kcs-paynext li::before {
  content: counter(paynext);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--c-rule-strong);
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-paynext strong {
  display: block;
  color: var(--c-navy);
}

.kcs-paynext span {
  color: var(--c-ink-2);
}

.kcs-pay__help {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-3);
}

@media (min-width: 640px) {
  .kcs-paycard--online {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .kcs-paycard__qr {
    display: block;
  }

  .kcs-paycard__cta {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .kcs-pay__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .kcs-pay__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
  }
}

/* The receipt: FluentCart's order summary as a quiet card beside the status. */
.kcs-receiptpg__card {
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  background: var(--c-surface);
  font-size: var(--fs-small);
}

.kcs-receiptpg__card .fct-thank-you-page-header,
.kcs-receiptpg__card .no-print {
  display: none;
}

.kcs-receiptpg__card .fct-thank-you-page,
.kcs-receiptpg__card .fct-thank-you-page-inner,
.kcs-receiptpg__card .fct-thank-you-page-content,
.kcs-receiptpg__card .fct-thank-you-page-body,
.kcs-receiptpg__card .fct-thank-you-page-body-inner,
.kcs-receiptpg__card .fct-thank-you-page-body-content,
.kcs-receiptpg__card .fct-thank-you-page-body-content-inner {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  max-width: none;
}

.kcs-receiptpg__card .fct-thank-you-page-order-items-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-rule-strong);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
}

.kcs-receiptpg__card .fct-thank-you-page-order-items-list {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-rule);
}

.kcs-receiptpg__card .fct-thank-you-page-order-items-list p {
  margin: 0;
}

.kcs-receiptpg__card .fct-thank-you-page-order-items-list-quantity {
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-receiptpg__card .fct-meta-line {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-rule);
}

.kcs-receiptpg__card .fct-thank-you-page-order-items-total-total {
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-receiptpg__card .fct-meta-line-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kcs-receiptpg__card h5,
.kcs-receiptpg__card h4 {
  margin: var(--s-4) 0 var(--s-1);
  font-family: var(--f-display);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
}

.kcs-receiptpg__card .fct-thank-you-page-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: 0;
  background: none;
}

.kcs-receiptpg__card .fct-thank-you-page-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s-4);
  border: 1.5px solid var(--c-navy);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-navy);
  font-weight: 600;
  text-decoration: none;
}

.kcs-receiptpg__card .fct-thank-you-page-footer a:hover {
  background: var(--c-navy);
  color: var(--c-white);
}

/* Ways to pay, beside the plan on the start and checkout pages. */
.kcs-paymethods {
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  background: var(--c-white);
}

.kcs-paymethods__title {
  margin: 0 0 var(--s-3);
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-navy);
}

.kcs-paymethods ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcs-paymethods li {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-small);
}

.kcs-paymethods li strong {
  display: block;
  color: var(--c-navy);
}

.kcs-paymethods li span {
  color: var(--c-ink-2);
}

.kcs-pay__meta svg,
.kcs-paycard p > svg {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

.kcs-pay .kcs-plancard--side {
  margin: 0;
}

.kcs-pay .kcs-checkout__form {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}