/* =========================================================================
   CodeSpace Design System — 2026 refresh
   Faithful approximation of the codespace.co.za brand.
   All visual decisions live in :root tokens so they are easy to retune.
   Fonts are loaded via <link> in HTML (not @import) for faster first paint.
   ========================================================================= */

:root {
  /* ---- Heritage brand colour (from CodeSpace brand guide) ---- */
  --ink:          #3A3B3F;   /* charcoal — headings, text & dark sections (the "CODE" grey) */
  --ink-soft:     #54565A;
  --charcoal:     #313236;   /* deepest charcoal — dark bands */
  --primary:      #649F90;   /* heritage sage green (logo triangle) */
  --primary-dark: #4F8576;
  --primary-tint: #E7F0EC;
  --accent:       #D76239;   /* heritage terracotta (logo triangle) */
  --accent-dark:  #B94E29;
  --accent-tint:  #F6E6DC;
  --heritage-coral:      #D96A48; /* logo triangle coral — used by testimonial avatars */
  --heritage-coral-tint: #F5E1D9;
  --gold:         #D9A24A;   /* muted mustard from extended palette */
  --sand:         #BFB9AC;   /* warm light grey (the "SPACE" grey) */

  /* ---- Neutrals (warm) ---- */
  --bg:        #FFFFFF;
  --surface:   #F7F4EF;      /* warm cream */
  --surface-2: #EFEAE1;
  --border:    #E5DFD4;
  --text:      #3E3F43;
  --muted:     #726E66;      /* warm muted */
  --on-dark:   #F3EFE9;
  --on-dark-muted: #B9B4AB;

  /* ---- Type ---- */
  --font-head: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* ---- Radius / shadow / layout ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(18,24,46,.06);
  --shadow-md: 0 10px 30px rgba(18,24,46,.10);
  --shadow-lg: 0 24px 60px rgba(18,24,46,.16);
  --maxw: 1180px;
  --gut: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--ink); line-height: 1.16; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.005em; font-weight: 500; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -.005em; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1rem; }
a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.center { text-align: center; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 62ch; }
.center .lede { margin-left: auto; margin-right: auto; }

/* ---- Eyebrow / kicker ---- */
.kicker {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary-dark); margin-bottom: 14px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  padding: 13px 26px; border-radius: var(--r-pill); border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s; text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-dark); box-shadow: var(--shadow-md); }
.btn--teal { background: var(--primary); color: #fff; }
.btn--teal:hover { background: var(--primary-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary-dark); }
.btn--light { background: #fff; color: var(--ink); }
.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--on-dark:hover { background: rgba(255,255,255,.12); }

/* ---- Header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand img { height: 46px; width: auto; display: block; }
.site-footer .brand img { height: 54px; }
.logo-mark {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  letter-spacing: .17em;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.nav-links { display: flex; gap: 6px; align-items: center; }
.nav-links a {
  font-family: var(--font-head); font-weight: 500; font-size: .95rem; color: var(--ink);
  padding: 8px 14px; border-radius: var(--r-pill);
}
.nav-links a:hover { background: var(--surface-2); text-decoration: none; }
.nav-links a.active { color: var(--primary-dark); background: var(--primary-tint); }
/* Mobile nav + shared breakpoints live in responsive.css */

/* ---- Hero ---- */
.hero { background: var(--surface); position: relative; overflow: hidden; }
.hero--dark { background: var(--charcoal); color: var(--on-dark); }
.hero--dark h1 { color: #fff; }
.hero--dark .lede { color: var(--on-dark-muted); }
.hero__inner { padding: 90px var(--gut) 80px; position: relative; z-index: 2; }
.hero__blob {
  position: absolute; border-radius: 50%; filter: blur(8px); opacity: .35; z-index: 1;
}

/* ---- Cards / grid ---- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .2s ease;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ---- Stat ---- */
.stat { text-align: center; }
.stat__num { font-family: var(--font-head); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--primary-dark); line-height: 1; letter-spacing: -.01em; }
.stat__num.alt { color: var(--accent); }
.stat__label { color: var(--muted); margin-top: 8px; font-size: .98rem; }

/* ---- Pills / tags ---- */
.tag {
  display: inline-block; font-size: .78rem; font-weight: 600; font-family: var(--font-head);
  padding: 4px 11px; border-radius: var(--r-pill); background: var(--primary-tint); color: var(--primary-dark);
  margin: 0 6px 6px 0;
}
.tag--gray { background: var(--surface-2); color: var(--muted); }
.tag--coral { background: #FFE7E3; color: var(--accent-dark); }

/* ---- Quote / testimonial ---- */
.quote { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); break-inside: avoid; }
.quote__text { font-size: 1.02rem; color: var(--text); }
.quote__who { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: .95rem; flex: none; }
.quote__name { font-weight: 600; font-family: var(--font-head); color: var(--ink); }
.quote__role { font-size: .85rem; color: var(--muted); }

/* ---- Masonry-ish columns for reviews ---- */
.masonry { column-count: 3; column-gap: 24px; }
.masonry > * { margin-bottom: 24px; }
@media (max-width: 900px) { .masonry { column-count: 2; } }
@media (max-width: 600px) { .masonry { column-count: 1; } }

/* ---- Dark band ---- */
.band-dark { background: var(--charcoal); color: var(--on-dark); }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .lede { color: var(--on-dark-muted); }
.band-teal { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
.band-teal h2 { color: #fff; }

/* ---- Footer ---- */
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.site-footer a { color: var(--on-dark-muted); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 20px; font-size: .85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---- Site chrome: header wordmark + footer (shared by every page) ----
   Moved out of inline style="" attributes on 26 Aug 2026. Two reasons: one place to change
   the header/footer instead of six, and Netlify's "Pretty URLs" post-processing re-quotes
   inline styles and breaks any that contain a single quote (e.g. 'Poppins'). Rule: no
   inline styles in the header or footer. */
.brand { text-decoration: none; }
.logo-mark { font-size: 22px; }
.logo-mark__code { color: #2E2E2E; }
.logo-mark__grey { color: #B0ACA5; }
.logo-mark__white { color: #fff; }
.logo-mark__tri { overflow: visible; margin: 0 .05em; }

.site-footer { background: #2E2E2E; color: #F2F1EE; padding: 48px 0 24px; }
.footer-top {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 32px;
}
.footer-tagline { max-width: 560px; }
.footer-kicker {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: #FF8A7C; margin-bottom: 12px;
}
.footer-title {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 30px; line-height: 1.15;
  letter-spacing: -.01em; color: #F2F1EE;
}
.site-footer .footer-btn, .site-footer .footer-btn:hover {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; color: #fff; background: #FF6A5A;
  border-radius: 999px; padding: 13px 26px; text-decoration: none; white-space: nowrap;
}
.footer-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 0 24px;
}
.footer-brand { text-decoration: none; display: inline-flex; align-items: center; }
.footer-brand .logo-mark { font-size: 1.15rem; }
.footer-brand .logo-mark__tri-wrap { display: inline-block; margin: 0 .06em; vertical-align: baseline; }
.footer-brand .logo-mark__tri { display: inline-block; margin: 0; }
.site-footer .footer-social, .site-footer .footer-social:hover {
  display: inline-flex; align-items: center; gap: 8px; color: #B0ACA5; text-decoration: none;
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 14px;
}
.footer-social svg { display: block; }
/* Grad-story block (home + hire): name and timeline titles. Class, not inline, for the same Netlify reason. */
.story-title { font-family: 'Poppins', sans-serif; font-weight: 600; color: #2E2E2E; }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 12.5px; color: #8A867F;
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px;
}

/* ---- Notice / banner ---- */
.notice {
  background: var(--gold); color: #4A3500; font-family: var(--font-head); font-weight: 600;
  text-align: center; font-size: .9rem; padding: 9px 16px;
}

/* ---- Async data status ---- */
.data-status {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
  font-size: .95rem;
  break-inside: avoid;
}
.data-status--loading::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 14px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: cs-spin .7s linear infinite;
}
.data-status--error { color: var(--ink); }
.is-loading { min-height: 120px; }
@keyframes cs-spin { to { transform: rotate(360deg); } }

/* ---- Filters / pills ---- */
.pj-filter,
.filter-pill {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .88rem;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  cursor: pointer;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
  transition: background .15s, color .15s, border-color .15s;
}
.pj-filter:hover,
.filter-pill:hover { border-color: var(--primary); }
.pj-filter.is-active,
.filter-pill.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.pj-filter:focus-visible,
.filter-pill:focus-visible,
.pj-play:focus-visible,
.video-cover:focus-visible,
.lightbox__close:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}
.pj-play:focus-visible .ring,
.video-cover:focus-visible .play-ring {
  transform: scale(1.07);
  box-shadow: 0 0 0 3px var(--primary), var(--shadow-md);
}
.result-count {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  font-size: .95rem;
}

/* ---- Project media / cards ---- */
.pj-thumb { position: relative; display: grid; place-items: center; overflow: hidden; }
.pj-thumb--img { aspect-ratio: 16/9; background: var(--surface-2); }
.pj-thumb--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-thumb--hero { aspect-ratio: 16/10; }
.pj-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(58,59,63,.82); color: #fff;
  font-size: .72rem; font-weight: 600; font-family: var(--font-head);
  padding: 4px 10px; border-radius: var(--r-pill);
}
.pj-play {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; width: 100%; height: 100%;
}
.pj-play .ring {
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: grid; place-items: center;
  box-shadow: var(--shadow-md); transition: transform .15s ease;
}
.pj-play:hover .ring { transform: scale(1.07); }
.pj-play .tri {
  border-left: 17px solid var(--accent);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
}
.pj-card {
  padding: 0;
  overflow: hidden;
  break-inside: avoid;
}
.pj-card__body { padding: 20px; }
.pj-card__body--featured { padding: 22px; }
.pj-card__title { margin: 0 0 4px; font-size: 1.1rem; }
.pj-card__by {
  font-size: .82rem; color: var(--muted);
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.pj-card__by--featured {
  display: block; font-size: .85rem; color: var(--muted); margin: 0;
}
.pj-card__summary {
  margin: 0 0 14px; color: var(--muted); font-size: .9rem;
}
.pj-card__summary--featured {
  margin: 12px 0 0; color: var(--muted); font-size: .95rem;
}
.pj-card__tags { display: flex; flex-wrap: wrap; margin-bottom: 14px; }
.tag--featured { background: #FFE7E3; color: #E5503F; }
.proj-story {
  font-size: .86rem; line-height: 1.5; color: var(--ink-soft);
  font-style: italic; border-left: 3px solid var(--primary);
  padding-left: 12px; margin: 0 0 12px;
}
.proj-story .label {
  display: block; font-style: normal; font-family: var(--font-head);
  font-weight: 700; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--primary-dark); margin-bottom: 3px;
}
.avatar--sm { width: 22px; height: 22px; font-size: .6rem; }
.btn--compact { font-size: .88rem; padding: 8px 16px; }
.btn--icon { font-size: .85rem; padding: 8px 16px; gap: 7px; }

/* ---- Graduate cards ---- */
.grad-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.grad-card__head { margin-bottom: 14px; }
.grad-card__name {
  font-family: var(--font-head); font-weight: 700; color: var(--ink);
  font-size: 1.05rem; line-height: 1.2;
}
.grad-card__title {
  color: var(--primary-dark); font-weight: 600; font-size: .9rem; margin-top: 2px;
}
.grad-card__meta {
  font-size: .85rem; color: var(--muted); margin: 3px 0;
  display: flex; gap: 6px; align-items: center;
}
.grad-card__note {
  font-size: .9rem; color: var(--muted); margin: 12px 0 14px; line-height: 1.55;
}
.grad-card__tags { display: flex; flex-wrap: wrap; margin-bottom: 4px; }
.grad-card__avail { font-weight: 700; }
.grad-card__actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 16px;
}
.grad-card__actions--top { margin: 2px 0 0; padding-top: 6px; flex-wrap: wrap; }

/* ---- Video cover (testimonials hero) ---- */
.video-cover {
  position: relative; display: block; width: 100%; aspect-ratio: 16/10;
  border: 0; padding: 0; border-radius: var(--r-lg); overflow: hidden;
  cursor: pointer; box-shadow: var(--shadow-lg); background: #000;
}
.video-cover__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .88;
}
.video-cover__badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(18,24,46,.78); color: #fff;
  font-size: .75rem; font-weight: 600; font-family: var(--font-head);
  padding: 5px 12px; border-radius: var(--r-pill);
}
.video-cover__play {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.play-ring {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: grid; place-items: center;
  box-shadow: var(--shadow-md); transition: transform .15s ease;
}
button.video-cover:hover .play-ring { transform: scale(1.07); }
.play-tri {
  border-left: 19px solid var(--accent);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 6px;
}
.quote-hero__who {
  display: flex; gap: 12px; align-items: center; margin-top: 18px;
}
.quote-hero__avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
}
.quote-hero__name {
  font-family: var(--font-head); font-weight: 700; color: var(--ink);
}
.quote-hero__role { font-size: .85rem; color: var(--muted); }
.quote__headline { margin: 0 0 10px; font-size: 1.15rem; }
.quote__text { margin: 0; }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,20,22,.82);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox__inner {
  position: relative; width: min(960px, 100%); aspect-ratio: 16/9;
  background: #000; border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.lightbox__inner video,
.lightbox__inner iframe { width: 100%; height: 100%; border: 0; display: block; }
.lightbox__close {
  position: absolute; top: -14px; right: -14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 0; cursor: pointer;
  font-size: 1.2rem; line-height: 1;
  box-shadow: var(--shadow-md); color: var(--ink);
}
@media (max-width: 520px) {
  .lightbox__close { top: 8px; right: 8px; }
}

/* ---- Utility ---- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}
.flex{display:flex}.gap{gap:16px}.wrap-flex{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}
.hide{display:none !important;}

/* =====================================================================================
   HOME PAGE — 2026 refresh palette and heavier headings
   Until 26 Aug 2026 index.html carried its own copy of the stylesheet, which had drifted:
   a different colour palette (teal/coral) and bolder headings. The other five pages run
   the heritage palette from :root above (the Impact page switches to this same refresh
   palette in impact.css). Kept exactly as it was, scoped to <body class="page-home">, so
   nothing changed visually. To put the whole site on one palette: pick one, and either
   delete this block (heritage everywhere) or move these tokens into :root (refresh
   everywhere).
   ===================================================================================== */
.page-home {
  --ink: #2E2E2E; --ink-soft: #4D4D4D; --charcoal: #2E2E2E;
  --primary: #15B5AC; --primary-dark: #0E8A83; --primary-tint: #E5F7F5;
  --accent: #FF6A5A; --accent-dark: #E5503F; --accent-tint: #FFE7E3;
  --heritage-ink: #4D4D4D; --heritage-grey: #B0ACA5; --heritage-teal: #5B9B8F; --heritage-sand: #E9E4DB;
  --surface: #F5F8FA; --surface-2: #EDF1F5; --border: #E1E7ED;
  --text: #2E2E2E; --muted: #6E6A64; --on-dark: #F2F1EE; --on-dark-muted: #B0ACA5;
}
.page-home h1, .page-home h2, .page-home h3, .page-home h4, .page-home h5 { line-height: 1.15; font-weight: 700; }
.page-home h1 { letter-spacing: -0.02em; font-weight: 700; }
.page-home h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.01em; }
.page-home .stat__num { font-weight: 800; letter-spacing: -.02em; }
.page-home .notice { background: var(--heritage-coral); color: #fff; }
.page-home .brand { color: var(--ink); }
.page-home .quote__text { margin: 0 0 1rem; }  /* the shared sheet zeroes it for the Testimonials page; Home never did */
.page-home .btn { transition: transform .15s cubic-bezier(.2,.7,.3,1), box-shadow .2s cubic-bezier(.2,.7,.3,1), background .2s; }
.page-home .card { transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .2s cubic-bezier(.2,.7,.3,1); }
@media (max-width: 900px) { .page-home .hero__inner { grid-template-columns: 1fr !important; } }

/* Menu highlight in the refresh teal on the pages that had it hard-coded inline
   (hire, showcase, case studies). Testimonials never had it, so its highlight is the
   heritage sage from :root — the one page that differs. */
.page-hire .nav-links a, .page-showcase .nav-links a, .page-case-studies .nav-links a { color: #2E2E2E; text-decoration: none; }
.page-hire .nav-links a:hover, .page-showcase .nav-links a:hover, .page-case-studies .nav-links a:hover { background: #EDF1F5; }
.page-hire .nav-links a.active, .page-showcase .nav-links a.active, .page-case-studies .nav-links a.active { color: #0E8A83; background: #E5F7F5; }

/* =====================================================================================
   PAGE COMPONENTS — moved out of inline style="" attributes on 26 Aug 2026.
   Rule for the whole site: no inline styles in the HTML. Add a class here instead.
   ===================================================================================== */

/* ---- Small utilities (same idea as the existing .center / .mt-0).
   !important on purpose: they replace inline styles, which always won, and page rules like
   `.finding h2 { margin: 0 0 20px }` would otherwise outrank a single class. ---- */
.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-14 { margin: 0 0 14px !important; }
.mb-22 { margin: 0 0 22px !important; }
.mb-36 { margin-bottom: 36px !important; }
.mb-40 { margin-bottom: 40px !important; }
.text-muted { color: var(--muted) !important; }
.text-primary { color: var(--primary) !important; }
.meta { font-size: .85rem !important; color: var(--muted) !important; }

/* ---- Sections. Doubled-up selectors so these beat the phone rules in responsive.css
   (`.section { padding: 56px 0 }` at 768px), as the inline styles they replace did. ---- */
.section--surface { background: var(--surface); }
.section--white { background: #fff; }
.section.section--pb-0, .section--tight.section--pb-0 { padding-bottom: 0; }
.section.section--pt-0 { padding-top: 0; }
.section.section--pt-32 { padding-top: 32px; }
.section.section--pt-36 { padding-top: 36px; }
.section.section--pt-64 { padding-top: 64px; }
.section.cta-band { padding: 56px 0; }
.section-intro { max-width: 640px; margin: 0 auto 44px; }
.section-intro--projects { max-width: 620px; margin-bottom: 40px; }
.section-intro--stories { max-width: 660px; margin-bottom: 40px; }
.section-intro--now { max-width: 680px; }
.section-more { margin-top: 36px; }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.section-head--mb-30 { margin-bottom: 30px; }
.section-head--mb-36 { margin-bottom: 36px; }
.section-head__text { max-width: 560px; }
.grid--gap-24 { gap: 24px; }

/* ---- Hero variants ---- */
/* Photo hero (Impact and Home): full-bleed photo with a dark scrim so white text stays readable. */
.hero--photo {
  background:
    linear-gradient(90deg, rgba(24,24,26,.82) 0%, rgba(24,24,26,.55) 46%, rgba(24,24,26,.12) 78%, rgba(24,24,26,.05) 100%),
    url('/assets/hero/header-bg.webp') center / cover no-repeat #2E2E2E;
}
.hero--photo .hero__inner { padding: 110px var(--gut) 100px; }
.hero--photo__text { max-width: 640px; }
@media (max-width: 768px) {
  .hero--photo {
    background:
      linear-gradient(180deg, rgba(24,24,26,.78) 0%, rgba(24,24,26,.55) 60%, rgba(24,24,26,.30) 100%),
      url('/assets/hero/header-bg.webp') 85% 0% / cover no-repeat #2E2E2E;   /* top-anchored so the graduate's head isn't cropped on phones (Emma, 4 Sep 2026) */
  }
  .hero--photo .hero__inner { padding: 72px var(--gut) 64px; }
}

.hero__wrap { position: relative; z-index: 2; padding: 48px 24px 44px; }
.hero__wrap--top { padding-bottom: 12px; }
.hero__wrap--tail { padding: 8px 24px 44px; }
.hero__wrap--solo { padding-bottom: 40px; }
.hero__text { max-width: 780px; }
.hero__title--xl { font-size: clamp(2.6rem, 4.4vw, 3.8rem); }
.hero__title--md { font-size: clamp(2rem, 3.6vw, 3rem); margin: .2em 0 .4em; }
.hero__blob--primary-xl { width: 420px; height: 420px; background: var(--primary); top: -120px; right: -120px; opacity: .28; }
.hero__blob--accent-sm  { width: 260px; height: 260px; background: var(--accent); bottom: -100px; left: 38%; opacity: .22; }
.hero__blob--accent-lg  { width: 320px; height: 320px; background: var(--accent); top: -70px; right: 4%; }
.hero__blob--primary-lg { width: 320px; height: 320px; background: var(--primary); top: -90px; right: 8%; }
.hero__blob--coral-sm   { width: 220px; height: 220px; background: var(--heritage-coral); bottom: -100px; left: -60px; }
.hero__blob--accent-xl  { width: 360px; height: 360px; background: var(--accent); top: -110px; right: -70px; opacity: .22; }
.hero__blob--primary-md { width: 300px; height: 300px; background: var(--primary); bottom: -120px; left: -60px; opacity: .20; }
.kicker--accent { color: var(--accent); }
.kicker--gold { color: var(--gold); }
.kicker--on-dark { color: #fff; opacity: .85; }

/* ---- Hero figure: a cut-out photo standing on the hero's bottom edge (Impact page) ---- */
.hero__figure { position: relative; display: flex; align-items: flex-end; justify-content: center; align-self: stretch; margin-bottom: -80px; }
.hero__figure img { width: 100%; max-width: 520px; height: auto; display: block; }
@media (max-width: 768px) {
  .hero__figure { margin-bottom: -32px; }   /* .hero__inner bottom padding is 32px on phones */
  .hero__figure img { max-width: 360px; }
}

.pj-card__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ---- Featured project frame (home hero, showcase hero) ---- */
.feature-frame { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.feature-frame--deep { box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.feature-frame__body { padding: 22px; }
.feature-frame__title { margin: .5em 0 4px; }
.feature-frame__text { margin: 12px 0 14px; color: var(--muted); font-size: .95rem; }
.pj-thumb--wide { aspect-ratio: 16/10; }

/* ---- Project cards written in HTML (home) ---- */
.card.card--flush { padding: 0; overflow: hidden; break-inside: avoid; }  /* beats responsive.css .card { padding: 20px } on phones */
.pj-body { padding: 20px; }
.pj-title { margin: 0 0 4px; font-size: 1.1rem; }
.pj-byline { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.pj-text { margin: 0 0 14px; color: var(--muted); font-size: .9rem; }
.pj-tags { display: flex; flex-wrap: wrap; margin-bottom: 14px; }

/* ---- Employer logo strip (home) ---- */
.logostrip { display: flex; flex-wrap: wrap; gap: 36px 24px; justify-content: center; align-items: center; max-width: 1020px; margin: 0 auto; }
.logostrip__title { margin: 0 auto 44px; max-width: 640px; }
.logostrip > .logostrip__cell { flex: 0 0 170px; height: 64px; display: grid; place-items: center; }
.logostrip__logo { max-height: 44px; max-width: 150px; width: auto; object-fit: contain; }
.logostrip__text { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: #9CA3AF; letter-spacing: .01em; }

/* ---- Graduate teaser cards (home "Graduates ready to interview") ---- */
.grad-teaser { padding: 24px; }
.grad-teaser__head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.grad-teaser__head .avatar { font-size: 18px; }
.grad-teaser__name { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.grad-teaser__role { color: var(--primary-dark); font-weight: 600; font-size: .9rem; }
.grad-teaser__meta { font-size: .85rem; color: var(--muted); margin: 3px 0; }
.grad-teaser__text { font-size: .9rem; color: var(--muted); margin: 12px 0 14px; }
.avatar--lg { width: 48px; height: 48px; }
.btn--sm { font-size: .88rem; padding: 9px 18px; }

/* ---- Grad story: Mamo's card with the timeline (home, hire) ---- */
.card.grad-story { padding: 32px; }  /* beats responsive.css .card { padding: 20px } on phones */
.grad-story__who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.grad-story__photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
h2.grad-story__title { margin: .5em 0 .4em; font-size: 1.6rem; }  /* h2 so it beats .page-home h2 */
.grad-story__text { color: var(--muted); margin: 0 0 16px; }
.grad-story__quote { color: var(--muted); font-style: italic; margin: 0; }
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline__row { display: flex; gap: 14px; }
.timeline__rail { display: flex; flex-direction: column; align-items: center; }
.timeline__dot { width: 12px; height: 12px; border-radius: 50%; background: #FF6A5A; flex: none; margin-top: 5px; }
.timeline__line { width: 2px; flex: 1; background: #E5DFD4; }
.timeline__body { padding-bottom: 18px; }

/* ---- Big pull quote (home, Marlon) ---- */
.quote-feature { max-width: 900px; }
.quote-feature__mark { font-family: var(--font-head); font-weight: 800; font-size: 4rem; line-height: 1; color: var(--primary); }
.quote-feature__text { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.32; color: var(--ink); margin: 0 0 24px; }
.byline { display: flex; gap: 12px; align-items: center; }
.byline__name { font-family: var(--font-head); font-weight: 700; color: var(--ink); }

/* ---- Call-to-action bands (bottom of hire, showcase, testimonials, case studies) ---- */
.cta-band__wrap { max-width: 640px; }
.cta-band__wrap--wide { max-width: 720px; }
.cta-band__title { margin-bottom: 10px; color: #fff; }
.cta-band__text { font-size: 1.15rem; margin-bottom: 24px; color: #fff; }
.cta-band__lede { color: rgba(255,255,255,.9); margin-bottom: 26px; }
.cta-band__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- Floating "Top" button, all pages (Emma, 2 Sep 2026) ---- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 600; font-size: .85rem;
  background: var(--ink); color: #fff; border: 0; border-radius: 999px;
  padding: 10px 16px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--primary-dark, #0E8A83); }

/* ---- Hire page: search + filters ---- */
.filter-bar {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 16px; box-shadow: var(--shadow-sm); margin-bottom: 18px;
}
.filter-bar .filter-search {
  padding: 10px 16px; border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font-body); font-size: .95rem; color: var(--text); outline: none;
}
.filter-bar > .filter-select {
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-body);
  font-size: .92rem; background: #fff; color: var(--text); cursor: pointer; outline: none;
}
.filter-bar > .filter-clear {
  background: none; border: 0; color: var(--accent-dark); font-weight: 600; font-family: var(--font-head);
  cursor: pointer; font-size: .85rem; padding: 8px 6px;
}
/* Freelance / Full-time toggle (replaced the availability select, 2 Sep 2026).
   Click the active side again to show everyone. */
.avail-toggle { display: inline-flex; vertical-align: middle; background: #fff; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.avail-toggle__btn {
  font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--ink);
  background: none; border: 0; padding: 10px 18px; cursor: pointer;
  transition: background .15s, color .15s;
}
.avail-toggle__btn + .avail-toggle__btn { border-left: 1px solid var(--border); }
.avail-toggle__btn:hover { background: var(--surface-2); }
.avail-toggle__btn.is-active { background: var(--ink); color: #fff; }
.avail-toggle--lede { margin-top: 16px; }
.results-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.sort-wrap { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); }
.sort-select {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-body);
  font-size: .9rem; background: #fff; color: var(--text); cursor: pointer; outline: none;
}
.hire-note { font-size: .88rem; color: var(--muted); margin-top: 28px; max-width: 640px; }

/* ---- Case studies page (was an inline <style> block in case-studies.html). Scoped to the page:
   .pullquote and .story also exist on the Impact page with different styling. ---- */
.page-case-studies .stories-intro__wrap { max-width: 760px; }
.page-case-studies .stories-intro p { font-size: 1.08rem; }
.page-case-studies .feature {
  display: grid; grid-template-columns: 240px 1fr; gap: 0;
  overflow: hidden; padding: 0; align-items: stretch;
}
.page-case-studies .feature__img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.page-case-studies .feature__body { padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.page-case-studies .feature__title { margin: .4em 0; }
.page-case-studies .feature__cta { align-self: flex-start; font-size: .9rem; padding: 9px 18px; }
.page-case-studies .feature--flip .feature__img { order: 2; }
@media (max-width: 640px) {
  .page-case-studies .feature, .page-case-studies .feature--flip { grid-template-columns: 1fr; }
  .page-case-studies .feature--flip .feature__img { order: 0; }
  .page-case-studies .feature__img { min-height: 200px; }
  .page-case-studies .feature__body { padding: 22px 20px; }
}
.page-case-studies .grad-card { text-align: center; padding: 22px 18px; }
.page-case-studies .grad-card img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; }
.page-case-studies .grad-card .grad-name { font-family: var(--font-head); font-weight: 600; color: var(--ink); margin: 0; }
.page-case-studies .grad-card .grad-role { color: var(--muted); font-size: .9rem; margin: 2px 0 0; }
.page-case-studies .grad-card .grad-co { color: var(--primary-dark); font-size: .86rem; font-weight: 600; margin: 4px 0 0; }
.page-case-studies .grad-card .grad-li { display: inline-flex; margin-top: 12px; font-size: .82rem; }
.page-case-studies .story { padding: 0; overflow: hidden; margin-bottom: 22px; scroll-margin-top: 90px; }
.page-case-studies .story > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 96px 1fr auto;
  gap: 20px; align-items: center; padding: 22px 28px;
}
.page-case-studies .story > summary::-webkit-details-marker { display: none; }
.page-case-studies .story > summary img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.page-case-studies .story__sumtitle { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 1.18rem; margin: 0 0 4px; }
.page-case-studies .story__sumlede { color: var(--muted); font-size: .96rem; margin: 0; }
.page-case-studies .story__toggle { font-family: var(--font-head); font-weight: 600; color: var(--primary-dark); white-space: nowrap; font-size: .92rem; }
.page-case-studies .story[open] .story__toggle .more { display: none; }
.page-case-studies .story:not([open]) .story__toggle .less { display: none; }
.page-case-studies .story__inner { padding: 4px 28px 34px; border-top: 1px solid var(--border); }
.page-case-studies .story__inner h4 { font-family: var(--font-head); color: var(--primary-dark); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin: 28px 0 10px; }
.page-case-studies .story__inner h4:first-child { margin-top: 22px; }
.page-case-studies .story__inner ul { padding-left: 1.1em; }
.page-case-studies .story__inner ul li { margin-bottom: 8px; }
.page-case-studies .pullquote {
  border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 18px 22px; margin: 22px 0; font-family: var(--font-head); font-size: 1.12rem; color: var(--ink); font-weight: 500;
}
@media (max-width: 560px) {
  .page-case-studies .story > summary { grid-template-columns: 64px 1fr; padding: 18px 16px; gap: 14px; }
  .page-case-studies .story > summary img { width: 64px; height: 64px; }
  .page-case-studies .story__toggle { grid-column: 2; }
  .page-case-studies .story__inner { padding: 4px 16px 28px; }
  .page-case-studies .story__sumtitle { font-size: 1.05rem; }
}

/* ---- Home-only bits from the old inline block ---- */
.tag--orange { background: var(--heritage-coral-tint); color: var(--heritage-coral); }
.pj-feat {
  position: absolute; top: 12px; right: 12px; z-index: 2; background: #FFE7E3; color: var(--accent-dark);
  font-size: .72rem; font-weight: 700; font-family: var(--font-head); padding: 4px 11px; border-radius: var(--r-pill);
}

/* ---- Announcement bar (site-wide, time-limited — nav.js removes it after the date set there) ---- */
.announce {
  background: var(--accent-tint); color: var(--ink); font-family: var(--font-head); font-weight: 500;
  font-size: .92rem; text-align: center; padding: 10px 16px; line-height: 1.45;
}
.announce { position: relative; padding-right: 44px; }
.announce__close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 6px 8px;
  font-size: .85rem; line-height: 1; color: inherit; opacity: .7;
}
.announce__close:hover { opacity: 1; }
.announce a { color: var(--accent-dark); font-weight: 700; white-space: nowrap; }
.announce a:hover { text-decoration: underline; }

/* ---- "What we do now" — four offerings written to graduates (home) ---- */
.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.offer { padding: 26px 24px; display: flex; flex-direction: column; }
.offer h3 { font-size: 1.12rem; margin: 0 0 8px; }
.offer p { color: var(--muted); font-size: .95rem; margin: 0 0 18px; flex: 1; }
.offer a { font-family: var(--font-head); font-weight: 600; color: var(--primary-dark); }
.offer__soon { align-self: flex-start; margin: 0; font-size: 1rem; padding: 6px 16px; }   /* coral pill at the same text size as the other cards' links */
@media (max-width: 980px) { .offer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .offer-grid { grid-template-columns: 1fr; } }

/* ---- Emma's letter (Our story). Compact on purpose: the whole letter should read in one screen where it can. ---- */
.section.letter-section { padding: 28px 0 56px; }
.letter { max-width: 800px; margin: 0 auto; padding: 28px 36px 26px; }
.letter__photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.letter__photos img { width: 100%; height: 120px; object-fit: cover; object-position: 50% 35%; border-radius: 10px; display: block; }
.letter__photos img:last-child { object-position: 50% 2%; }   /* graduation portrait: face and the full cap in frame */
.letter__photos img:nth-child(2) { object-position: 50% 100%; }   /* team photo: crop the top so the CODESPACE letter lights show */
@media (max-width: 560px) {
  /* Phones show only the Table Mountain group photo, full width (Emma, 3 Sep 2026) */
  .letter__photos { grid-template-columns: 1fr; gap: 0; }
  .letter__photos img { display: none; }
  .letter__photos img:nth-child(3) { display: block; height: 170px; }
}
.letter__meta { font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.letter h2 { font-size: clamp(1.3rem, 2.1vw, 1.55rem); line-height: 1.25; margin: 0 0 14px; }
.letter p { font-size: .96rem; line-height: 1.5; margin: 0 0 11px; }
.letter__signoff { margin: 18px 0 0 !important; font-style: italic; }
.letter__sign { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.letter__sign .avatar { width: 40px; height: 40px; font-size: .9rem; }
.letter__photo-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.letter__name { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
@media (max-width: 560px) { .letter { padding: 22px 18px; } }

/* ---- Footer, from 31 Aug 2026: wordmark + LinkedIn + copyright only ---- */
.footer-row { padding: 8px 0 24px; }