@charset "UTF-8";
/* ==========================================================================
   Class Recruitment — V2 DNN Skin Stylesheet
   --------------------------------------------------------------------------
   Built from typography-spec.html. Design tokens at the top, base layer,
   skin chrome (header + burger overlay + footer), DNN panes, modules.
   ========================================================================== */

/* ============ 1. DESIGN TOKENS ============ */

:root {
  /* Brand purples */
  --c-purple-deep:  #7b1fa2;
  --c-purple:       #8e24aa;
  --c-purple-light: #ba68c8;
  --c-purple-tint:  #f3e8f7;
  --c-purple-mist:  #faf5fb;
  --c-purple-dark:  #4a0e69;

  /* Accent ramps */
  --c-pink:       #d61671;  --c-pink-soft:  #fde4ef;  --c-pink-deep:  #a01057;
  --c-teal:       #00acc1;  --c-teal-soft:  #d6f1f5;  --c-teal-deep:  #006c7a;
  --c-green:      #43a047;  --c-green-soft: #dcefdd;  --c-green-deep: #2d6a30;
  --c-amber:      #ffa000;  --c-amber-soft: #ffeccd;  --c-amber-deep: #8a5500;
  --c-coral:      #ff6e40;  --c-coral-soft: #ffe2d6;  --c-coral-deep: #b34a25;
  --c-red:        #ed1b2d;  --c-red-soft:   #fde2e4;  --c-red-deep:   #8a0a17;
  --c-yellow-soft:#fff3a8;

  /* Functional */
  --c-success: var(--c-green);
  --c-warning: var(--c-amber);
  --c-error:   var(--c-red);
  --c-info:    var(--c-teal);

  /* Neutrals */
  --c-ink:         #1f1530;
  --c-ink-strong:  #110a1f;
  --c-ink-muted:   #5a4f66;
  --c-ink-subtle:  #8a8294;
  --c-line:        #ece8f0;
  --c-line-strong: #d8d2e0;
  --c-bg:          #ffffff;
  --c-bg-soft:     #faf8fc;
  --c-bg-tint:     #f5f1f8;

  /* Type */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale */
  --t-display: clamp(56px, 7vw + 1rem, 80px);
  --t-h1:      clamp(40px, 4vw + 1rem, 56px);
  --t-h2:      clamp(28px, 2.5vw + 1rem, 40px);
  --t-h3:      24px;
  --t-h4:      20px;
  --t-h5:      17px;
  --t-h6:      14px;
  --t-lead:    20px;
  --t-body:    16px;
  --t-small:   14px;
  --t-micro:   12px;

  --lh-display: 1.05;
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.6;
  --lh-relaxed: 1.7;

  /* Spacing 4-px scale */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* Radii */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* Shadows (purple-tinted) */
  --shadow-xs: 0 1px 2px rgba(31,21,48,0.04);
  --shadow-sm: 0 2px 6px rgba(31,21,48,0.05), 0 1px 2px rgba(31,21,48,0.04);
  --shadow-md: 0 6px 18px rgba(123,31,162,0.08), 0 2px 4px rgba(31,21,48,0.04);
  --shadow-lg: 0 14px 40px rgba(123,31,162,0.12), 0 4px 10px rgba(31,21,48,0.05);
  --shadow-xl: 0 24px 60px rgba(123,31,162,0.18);
  --shadow-focus: 0 0 0 4px rgba(186,104,200,0.35);

  /* Layout */
  --container: 1200px;

  /* Motion */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur:      220ms;
  --dur-slow: 420ms;

  /* Header */
  --header-h: 88px;
  --logo-h-desktop: 56px;
  --logo-h-mobile:  44px;
}

/* ============ 2. BASE RESET ============ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.is-overlay-open { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
::selection { background: var(--c-purple-light); color: #fff; }

/* ============ 3. TYPOGRAPHY ============ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--c-ink-strong);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}

h1 {
  font-size: var(--t-h1);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 var(--s-5);
}
h2 {
  font-size: var(--t-h2);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: var(--s-7) 0 var(--s-4);
}
h3 {
  font-size: var(--t-h3);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: var(--s-6) 0 var(--s-3);
}
h4 {
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--lh-snug);
  margin: var(--s-5) 0 var(--s-2);
}
h5 {
  font-size: var(--t-h5);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  margin: var(--s-4) 0 var(--s-2);
}
h6 {
  font-size: var(--t-h6);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-purple-deep);
  line-height: 1.3;
  margin: 0 0 var(--s-2);
}

.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: var(--lh-display);
  color: var(--c-ink-strong);
  margin: 0 0 var(--s-5);
}

p {
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-normal);
  margin: 0 0 var(--s-4);
}

.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
  font-weight: 400;
}

small, .small {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--c-ink-muted);
}
.micro {
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--c-ink-subtle);
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-purple-deep);
  margin-bottom: var(--s-3);
}

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

a {
  color: var(--c-purple-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur) var(--ease), text-decoration-thickness var(--dur) var(--ease);
}
a:hover { color: var(--c-purple); text-decoration-thickness: 2px; }
a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-xs); }

strong, b { font-weight: 600; color: var(--c-ink-strong); }
em, i     { font-style: italic; }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--c-bg-tint);
  color: var(--c-purple-deep);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}
kbd {
  background: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  border-bottom-width: 2px;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--c-ink);
  font-size: 0.85em;
}
mark { background: var(--c-yellow-soft); padding: 2px 6px; border-radius: 4px; color: var(--c-ink-strong); }

blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  border-left: 4px solid var(--c-purple-light);
  background: var(--c-purple-mist);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  line-height: 1.5;
  color: var(--c-ink);
}
blockquote cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-style: normal;
  color: var(--c-ink-muted);
}

hr { border: 0; height: 1px; background: var(--c-line); margin: var(--s-6) 0; }

ul, ol {
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  margin: 0 0 var(--s-4);
  padding-left: 22px;
}
li { margin-bottom: var(--s-2); }
ul > li::marker { color: var(--c-purple); }
ol > li::marker { color: var(--c-purple-deep); font-weight: 600; }

dl { margin: 0 0 var(--s-4); }
dt { font-family: var(--font-display); font-weight: 600; color: var(--c-ink-strong); }
dd { margin: 0; color: var(--c-ink-muted); }

/* Opt-in two-column term/definition grid. Use only on dl elements that
   are semantically a label/value list — never on module-output dl tags. */
.dl-grid { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-2) var(--s-4); }
.dl-grid dt { font-size: var(--t-small); }
.dl-grid dd { font-size: var(--t-small); }

figure { margin: 0 0 var(--s-5); background: var(--c-bg-soft); border-radius: var(--r-md); padding: var(--s-5); }
figcaption { font-size: 13px; font-style: italic; color: var(--c-ink-muted); margin-top: var(--s-3); text-align: center; }

table { width: 100%; border-collapse: collapse; font-size: var(--t-small); margin: 0 0 var(--s-5); }
table caption {
  text-align: left;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink-muted);
  padding-bottom: var(--s-2);
  caption-side: top;
}
th {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-muted);
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1.5px solid var(--c-line-strong);
}
td { padding: 14px var(--s-4); border-bottom: 1px solid var(--c-line); color: var(--c-ink); }
tbody tr:hover { background: var(--c-bg-soft); }

/* ============ 4. LAYOUT ============ */

.class-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.class-theme { min-height: 100vh; display: flex; flex-direction: column; }
.class-main  { flex: 1 1 auto; padding-block: var(--s-6) var(--s-8); }
.class-pane  { width: 100%; }

/* ContentPane is the main page area — constrain to container width like the header.
   BannerPane and FluidPane stay full-bleed so hero banners and full-width modules can
   reach the viewport edges if they want to. */
.class-pane--content {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.class-pane--banner { margin-bottom: var(--s-6); }
.class-pane--fluid  { margin-top:    var(--s-6); }

/* ============ 5. HEADER ============ */

.class-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.class-header__row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
  padding-block: var(--s-3);
}
.class-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.class-header__logo img,
.class-header__logo svg {
  height: var(--logo-h-desktop);
  width: auto;
}
@media (max-width: 720px) {
  .class-header__logo img,
  .class-header__logo svg { height: var(--logo-h-mobile); }
  :root { --header-h: 72px; }
}

/* Search */
.class-header__search { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.class-search-toggle {
  display: none;
  background: var(--c-bg);
  border: 1.5px solid var(--c-line);
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.class-search-toggle:hover { border-color: var(--c-purple-light); color: var(--c-purple-deep); }
.class-search-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.class-search-field {
  position: relative;
  width: 100%;
  max-width: 460px;
}
.class-search-field__icon {
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-ink-subtle);
  pointer-events: none;
  z-index: 1;
}
.class-search-input,
.class-search-field input[type="text"],
.class-search-field input[type="search"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--c-ink);
  background: var(--c-bg-soft);
  padding: 12px 18px 12px 48px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-pill);
  transition: all var(--dur) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.class-search-field input::placeholder { color: var(--c-ink-subtle); }
.class-search-field input:hover { border-color: var(--c-purple-light); }
.class-search-field input:focus {
  outline: none;
  background: var(--c-bg);
  border-color: var(--c-purple);
  box-shadow: var(--shadow-focus);
}
.class-search-field .searchInputContainer a.dnnSearchBoxClearText { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 201; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.class-search-field .searchInputContainer a.dnnSearchBoxClearText:hover { text-decoration: none; }

@media (max-width: 720px) {
  .class-search-toggle { display: inline-flex; }
  .class-header__search .class-search-field { display: none; }
  body.is-search-open .class-search-field {
    display: block;
    position: absolute;
    left: 0; right: 0; top: 100%;
    padding: var(--s-3) var(--s-5);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    z-index: 49;
    max-width: none;
  }
  body.is-search-open .class-search-toggle { background: var(--c-purple-tint); border-color: var(--c-purple-light); color: var(--c-purple-deep); }
}

/* Header CTAs — desktop-only action pills next to the burger.
   Hidden below 900px; accessible via burger overlay on mobile. */
.class-header__ctas {
  display: none;
  gap: var(--s-2);
  align-items: center;
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .class-header__ctas { display: inline-flex; }
}
.class-header__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-small);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--dur) var(--ease);
  border: 1.5px solid transparent;
}
.class-header__cta svg { width: 16px; height: 16px; }
.class-header__cta--primary {
  background: var(--c-purple-deep);
  color: #fff;
  box-shadow: 0 4px 12px rgba(123, 31, 162, 0.2);
}
.class-header__cta--primary:hover {
  background: var(--c-purple);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(123, 31, 162, 0.28);
}
.class-header__cta--secondary {
  background: transparent;
  color: var(--c-purple-deep);
  border-color: var(--c-line-strong);
}
.class-header__cta--secondary:hover {
  background: var(--c-purple-mist);
  border-color: var(--c-purple-light);
  color: var(--c-purple-deep);
  text-decoration: none;
}

/* Burger */
.class-burger {
  position: relative;
  width: 48px; height: 48px;
  border-radius: var(--r-pill);
  background: var(--c-purple-deep);
  border: 1.5px solid var(--c-purple-deep);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur) var(--ease);
}
.class-burger:hover { background: var(--c-purple); border-color: var(--c-purple); }
.class-burger:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.class-burger__bar {
  display: block;
  width: 18px; height: 2px;
  background: #fff;
  border-radius: var(--r-pill);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
@media (min-width: 721px) {
  .class-burger { width: 52px; height: 52px; }
  .class-burger__bar { width: 22px; }
}

/* ============ 6. OVERLAY ============ */

.class-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background:
    radial-gradient(900px 600px at 80% 10%, rgba(186, 104, 200, 0.35), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(123, 31, 162, 0.45), transparent 60%),
    linear-gradient(135deg, #1a0d2b 0%, #2a1042 40%, #110a1f 100%);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-5) var(--s-5);
  overflow-y: auto;
}
body.is-overlay-open .class-overlay {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.class-overlay__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
  animation: classDrift 18s ease-in-out infinite;
}
.class-overlay__orb--1 { width: 520px; height: 520px; background: #ba68c8; top: -120px; right: -80px; animation-delay: 0s; }
.class-overlay__orb--2 { width: 420px; height: 420px; background: #7b1fa2; bottom: -100px; left: -60px; animation-delay: -6s; }
.class-overlay__orb--3 { width: 320px; height: 320px; background: #8e24aa; top: 35%; left: 45%; opacity: 0.35; animation-delay: -12s; }

@keyframes classDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.06); }
  66%      { transform: translate(-30px, 40px) scale(0.96); }
}

.class-overlay__close {
  position: absolute;
  top: var(--s-4); right: var(--s-5);
  width: 48px; height: 48px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
  z-index: 2;
}
.class-overlay__close:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); }
.class-overlay__close:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); }

.class-overlay__nav { position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: var(--s-7) 0; z-index: 1; }
.class-overlay__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-4); text-align: center; width: 100%; max-width: 560px; }
.class-overlay__item { margin: 0; }
.class-overlay__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.025em;
  color: #fff;
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.class-overlay__link:hover { color: var(--c-purple-light); text-decoration: none; transform: translateY(-1px); }
.class-overlay__item.is-current > .class-overlay__link { color: var(--c-purple-light); }
.class-overlay__sublist {
  list-style: none;
  padding: 0;
  margin: var(--s-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}
.class-overlay__sublink {
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: all var(--dur) var(--ease);
}
.class-overlay__sublink:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.class-overlay__ctas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  max-width: 360px;
  width: 100%;
  margin-inline: auto;
}
@media (min-width: 600px) { .class-overlay__ctas { flex-direction: row; max-width: 520px; } }

.class-overlay__foot {
  position: relative;
  z-index: 1;
  padding-top: var(--s-5);
  margin-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  gap: var(--s-4);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--t-small);
  color: rgba(255, 255, 255, 0.55);
}
.class-overlay__foot a { color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: color var(--dur) var(--ease); }
.class-overlay__foot a:hover { color: #fff; }
.class-overlay__login, .class-overlay__user { font-size: var(--t-small); }

/* Burger turns into an X when overlay is open */
body.is-overlay-open .class-burger { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); position: fixed; top: var(--s-3); right: var(--s-5); z-index: 65; }
body.is-overlay-open .class-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.is-overlay-open .class-burger__bar:nth-child(2) { opacity: 0; }
body.is-overlay-open .class-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ 7. BUTTONS ============ */

.class-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.class-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.class-btn:active { transform: translateY(1px); }

.class-btn--primary { background: var(--c-purple-deep); color: #fff; box-shadow: var(--shadow-md); }
.class-btn--primary:hover { background: var(--c-purple); color: #fff; box-shadow: var(--shadow-lg); text-decoration: none; }

.class-btn--secondary { background: var(--c-purple-tint); color: var(--c-purple-deep); }
.class-btn--secondary:hover { background: var(--c-purple-light); color: #fff; text-decoration: none; }

.class-btn--ghost { background: transparent; color: var(--c-purple-deep); border-color: var(--c-line-strong); }
.class-btn--ghost:hover { background: var(--c-purple-mist); border-color: var(--c-purple-light); text-decoration: none; }

.class-btn--invert { background: #fff; color: var(--c-purple-deep); }
.class-btn--invert:hover { background: var(--c-purple-tint); color: var(--c-purple-deep); text-decoration: none; }

.class-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.class-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); color: #fff; text-decoration: none; }

.class-btn--sm { padding: 10px 18px; font-size: var(--t-small); }
.class-btn--lg { padding: 18px 32px; font-size: var(--t-lead); }
.class-btn--block { display: flex; width: 100%; }

/* ============ 8. FORMS ============ */

label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--c-ink);
  margin-bottom: var(--s-2);
}
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], input[type="number"], input[type="url"], input[type="date"],
select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--c-ink);
  background: var(--c-bg);
  padding: 14px var(--s-4);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-md);
  line-height: 1.4;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-appearance: none; appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--c-ink-subtle); }
input:hover, select:hover, textarea:hover { border-color: var(--c-purple-light); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-purple);
  box-shadow: var(--shadow-focus);
}
textarea { min-height: 120px; resize: vertical; }
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a4f66' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 44px;
}

/* ============ 9. BADGES & ACCENT BOXES ============ */

.class-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--c-purple-tint);
  color: var(--c-purple-deep);
  white-space: nowrap;
}
.class-badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }
.class-badge--practitioner { background: var(--c-teal-soft);   color: var(--c-teal-deep); }
.class-badge--leader       { background: var(--c-amber-soft);  color: var(--c-amber-deep); }
.class-badge--manager      { background: var(--c-purple-tint); color: var(--c-purple-deep); }
.class-badge--bank         { background: var(--c-pink-soft);   color: var(--c-pink-deep); }
.class-badge--apprentice   { background: var(--c-green-soft);  color: var(--c-green-deep); }
.class-badge--urgent       { background: var(--c-coral-soft);  color: var(--c-coral-deep); }

/* Tinted callout cards */
.class-tint-card {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.class-tint-card--purple { background: var(--c-purple-tint); color: var(--c-purple-deep); }
.class-tint-card--teal   { background: var(--c-teal-soft);   color: var(--c-teal-deep); }
.class-tint-card--pink   { background: var(--c-pink-soft);   color: var(--c-pink-deep); }
.class-tint-card--amber  { background: var(--c-amber-soft);  color: var(--c-amber-deep); }
.class-tint-card--green  { background: var(--c-green-soft);  color: var(--c-green-deep); }
.class-tint-card--coral  { background: var(--c-coral-soft);  color: var(--c-coral-deep); }

/* Accent-bordered feature boxes */
.class-feature {
  padding: var(--s-5);
  background: var(--c-bg-soft);
  border-radius: var(--r-lg);
  border-left: 4px solid var(--c-purple-deep);
}
.class-feature--purple { border-color: var(--c-purple-deep); }
.class-feature--teal   { border-color: var(--c-teal); }
.class-feature--pink   { border-color: var(--c-pink); }
.class-feature--amber  { border-color: var(--c-amber); }
.class-feature--green  { border-color: var(--c-green); }
.class-feature--coral  { border-color: var(--c-coral); }
.class-feature__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--c-purple-tint);
  color: var(--c-purple-deep);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-4);
}
.class-feature--teal .class-feature__icon  { background: var(--c-teal-soft);  color: var(--c-teal-deep); }
.class-feature--pink .class-feature__icon  { background: var(--c-pink-soft);  color: var(--c-pink-deep); }
.class-feature--amber .class-feature__icon { background: var(--c-amber-soft); color: var(--c-amber-deep); }
.class-feature--green .class-feature__icon { background: var(--c-green-soft); color: var(--c-green-deep); }
.class-feature--coral .class-feature__icon { background: var(--c-coral-soft); color: var(--c-coral-deep); }

/* Notices */
.class-notice {
  padding: 14px 18px;
  border-radius: var(--r-md);
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: var(--t-small);
  line-height: 1.5;
}
.class-notice strong { font-weight: 600; }
.class-notice--info    { background: var(--c-teal-soft);  color: var(--c-teal-deep); }
.class-notice--success { background: var(--c-green-soft); color: var(--c-green-deep); }
.class-notice--warn    { background: var(--c-amber-soft); color: var(--c-amber-deep); }
.class-notice--error   { background: var(--c-red-soft);   color: var(--c-red-deep); }
.class-notice--brand   { background: var(--c-purple-tint); color: var(--c-purple-deep); }

/* ============ 10. FOOTER ============ */

.class-footer {
  margin-top: 0;
  color: rgba(255, 255, 255, 0.85);
  background:
    radial-gradient(700px 400px at 80% -10%, rgba(186,104,200,0.25), transparent 65%),
    linear-gradient(135deg, #7b1fa2 0%, #4a0e69 100%);
}
.class-footer__inner {
  display: grid;
  grid-template-columns: 1.3fr 3fr;
  gap: var(--s-6);
  padding-block: var(--s-6) var(--s-5);
}
@media (max-width: 900px) {
  .class-footer__inner { grid-template-columns: 1fr; gap: var(--s-6); }
}
.class-footer__brand { display: flex; flex-direction: column; gap: var(--s-3); }
.class-footer__logo img, .class-footer__logo svg {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
}
.class-footer__tag {
  font-size: var(--t-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 36ch;
  margin: 0;
}
.class-footer__social {
  list-style: none;
  padding: 0;
  margin: var(--s-1) 0 0;
  display: flex;
  gap: var(--s-2);
}
.class-footer__social a {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}
.class-footer__social a:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }
.class-footer__social a:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); }

/* Footer four-column nav (Razor template) */
.class-footer__nav { width: 100%; }
.class-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-4);
}
@media (max-width: 900px) { .class-footer__columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .class-footer__columns { grid-template-columns: 1fr; } }
.class-footer__col { display: flex; flex-direction: column; gap: var(--s-1); }
.class-footer__col-head {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  margin: 0 0 var(--s-2);
}
.class-footer__col-head a { color: #fff; text-decoration: none; }
.class-footer__col-head a:hover { color: var(--c-purple-light); text-decoration: none; }
.class-footer__col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.class-footer__col-list a {
  font-size: var(--t-small);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.class-footer__col-list a:hover { color: #fff; text-decoration: none; }
.class-footer__col-list li { margin: 0; }

/* Footer base strip */
.class-footer__base {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--s-3);
}
.class-footer__base-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: var(--t-micro);
  color: rgba(255, 255, 255, 0.55);
}
.class-footer__copy { color: rgba(255, 255, 255, 0.55); }
.class-footer__copy a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.class-footer__legal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.class-footer__legal a {
  font-size: var(--t-micro);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.class-footer__legal a:hover { color: #fff; }

/* ============ 11. DNN PANES / EDIT MODE ============ */
/* Soft styling for empty edit-mode panes so they don't break the visual flow */
.class-pane:empty { display: none; }
.DnnModule { margin-bottom: var(--s-5); }
.DnnModule:last-child { margin-bottom: 0; }
.DnnLeftPane, .DnnRightPane, .DnnContentPane { padding: 0; }

/* Module title (when set to be visible) */
.DnnModule .DnnContainer h2.Head,
.DnnModule .DnnContainer h2.Title { font-size: var(--t-h3); margin-bottom: var(--s-4); }

/* ============ 12. MODULE HOOKS — JobAdmin / Registration / FAQ ============ */
/*
  The three custom modules each ship their own Module.css under
  ~/DesktopModules/{Module}/css/. The skin's job is to set the brand
  base so anything those CSS files don't explicitly style inherits
  sensible brand values. The selectors below give the modules a
  light skin-level pass for buttons, inputs and cards.
*/

/* --- JobAdmin --- */
.jobadmin .ja-input, .jobadmin .ja-select { border-radius: var(--r-md); }
.jobadmin .ja-btn {
  background: var(--c-purple-deep); color: #fff;
  border: 0; padding: 12px 22px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.jobadmin .ja-btn:hover { background: var(--c-purple); }
.jobadmin .ja-link { color: var(--c-purple-deep); }
.jobadmin .ja-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: all var(--dur) var(--ease);
}
.jobadmin .ja-card:hover { border-color: var(--c-purple-light); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.jobadmin .ja-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h4); color: var(--c-ink-strong); }
.jobadmin .ja-card__meta { font-size: var(--t-small); color: var(--c-ink-muted); }
.jobadmin .ja-card__cta { font-family: var(--font-display); font-weight: 600; color: var(--c-purple-deep); }
.jobadmin .ja-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4); }
.jobadmin .ja-badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* Job badge variants — soft accent tints from the brand palette so each pill
   type is visually distinct at a glance. Same soft-tint + deep-text pairing
   as the rest of the accent system in the moodboard. Module.css defines
   empty placeholders for these classes; the skin fills them in.

   Sector   → brand purple (category — the most important meta)
   Contract → amber          (permanent / temporary / bank etc.)
   Location → teal           (geographic, calm)
   Salary   → green          (money / growth)                                  */

.jobadmin .ja-badge {
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.jobadmin .ja-badge--sector   { background: var(--c-purple-tint); color: var(--c-purple-deep); }
.jobadmin .ja-badge--contract { background: var(--c-amber-soft);  color: var(--c-amber-deep); }
.jobadmin .ja-badge--location { background: var(--c-teal-soft);   color: var(--c-teal-deep); }
.jobadmin .ja-badge--salary   { background: var(--c-green-soft);  color: var(--c-green-deep); }

/* Subtle lift on card hover — pills intensify a touch so the card feels alive */
.jobadmin .ja-card:hover .ja-badge--sector   { background: #ecd6f3; }
.jobadmin .ja-card:hover .ja-badge--contract { background: #ffe1b3; }
.jobadmin .ja-card:hover .ja-badge--location { background: #c4ebef; }
.jobadmin .ja-card:hover .ja-badge--salary   { background: #cae5cc; }

/* JobDetails (.cr-*) */
.jobadmin-public .cr-job { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
.jobadmin-public .cr-job-hero { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-6); align-items: start; }
@media (max-width: 900px) { .jobadmin-public .cr-job-hero { grid-template-columns: 1fr; } }
.jobadmin-public .cr-job-title { font-family: var(--font-display); font-size: var(--t-h1); line-height: 1.1; color: var(--c-ink-strong); margin: 0 0 var(--s-4); }
.jobadmin-public .cr-job-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }
.jobadmin-public .cr-chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-bg-tint); font-size: var(--t-small); color: var(--c-ink-muted); }
.jobadmin-public .cr-chip--qualification { background: var(--c-teal-soft); color: var(--c-teal-deep); }
.jobadmin-public .cr-job-salary { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); color: var(--c-purple-deep); margin: var(--s-3) 0; }
.jobadmin-public .cr-card { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-5); }
.jobadmin-public .cr-card--sticky { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
.jobadmin-public .cr-h2 { font-size: var(--t-h3); margin: 0 0 var(--s-3); }
.jobadmin-public .cr-h3 { font-size: var(--t-h4); margin: var(--s-4) 0 var(--s-2); }
.jobadmin-public .cr-field { margin-bottom: var(--s-4); }
.jobadmin-public .cr-label { font-family: var(--font-display); font-weight: 600; font-size: var(--t-small); display: block; margin-bottom: var(--s-2); }
.jobadmin-public .cr-input { width: 100%; padding: 12px var(--s-4); border: 1.5px solid var(--c-line-strong); border-radius: var(--r-md); font-size: var(--t-body); }
.jobadmin-public .cr-check { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-size: var(--t-small); }
.jobadmin-public .cr-btn { padding: 14px 24px; border-radius: var(--r-pill); border: 0; font-family: var(--font-display); font-weight: 600; cursor: pointer; background: var(--c-bg-tint); color: var(--c-purple-deep); }
.jobadmin-public .cr-btn--primary { background: var(--c-purple-deep); color: #fff; }
.jobadmin-public .cr-btn--primary:hover { background: var(--c-purple); }
.jobadmin-public .cr-muted { color: var(--c-ink-muted); font-size: var(--t-small); }
.jobadmin-public .cr-hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-5) 0; }
.jobadmin-public .cr-contact { display: flex; gap: var(--s-3); align-items: center; }
.jobadmin-public .cr-contact__photo { width: 56px; height: 56px; border-radius: var(--r-pill); object-fit: cover; }
.jobadmin-public .cr-back-link { display: inline-flex; gap: 6px; font-size: var(--t-small); color: var(--c-ink-muted); margin-bottom: var(--s-3); text-decoration: none; }
.jobadmin-public .cr-back-link:hover { color: var(--c-purple-deep); }

/* JobAdmin pager */
.jobadmin .ja-pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.jobadmin .ja-pager__summary { font-size: var(--t-small); color: var(--c-ink-muted); }
.jobadmin .ja-pager__links a { padding: 6px 12px; border-radius: var(--r-sm); color: var(--c-purple-deep); text-decoration: none; }
.jobadmin .ja-pager__links a:hover { background: var(--c-purple-tint); }

/* --- Registration --- */
.registration-wizard { background: var(--c-bg); }
.registration-page { padding-block: var(--s-5); }
.registration-progress { margin-bottom: var(--s-5); }
.registration-step-label { font-family: var(--font-display); font-size: var(--t-small); color: var(--c-ink-muted); display: block; margin-bottom: var(--s-2); }
.registration-progress-bar { height: 6px; background: var(--c-bg-tint); border-radius: var(--r-pill); overflow: hidden; }
.registration-progress-fill { height: 100%; background: linear-gradient(90deg, var(--c-purple-deep), var(--c-purple-light)); border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease); }

.registration-section-title { font-size: var(--t-h3); margin: var(--s-5) 0 var(--s-3); }
.registration-intro { padding: var(--s-4); background: var(--c-bg-soft); border-radius: var(--r-md); font-size: var(--t-small); margin-bottom: var(--s-5); }
.registration-notice { background: var(--c-amber-soft); color: var(--c-amber-deep); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); }

.registration-field { margin-bottom: var(--s-4); }
.registration-field label { font-family: var(--font-display); font-weight: 600; font-size: var(--t-small); margin-bottom: var(--s-2); display: block; }
.req { color: var(--c-error); font-weight: 700; }
.registration-input, .registration-input-short, .registration-input-date { width: 100%; padding: 12px var(--s-4); border: 1.5px solid var(--c-line-strong); border-radius: var(--r-md); font-size: var(--t-body); transition: border-color var(--dur) var(--ease); }
.registration-input:focus { outline: none; border-color: var(--c-purple); box-shadow: var(--shadow-focus); }
.registration-input-short { max-width: 240px; }
.registration-input-date { max-width: 200px; }
.registration-readonly { padding: 10px var(--s-4); background: var(--c-bg-soft); border-radius: var(--r-md); display: inline-block; }
.registration-radio { display: flex; gap: var(--s-4); }
.registration-radio label { font-family: var(--font-body); font-weight: 400; cursor: pointer; }
.registration-conditional { background: var(--c-purple-mist); border-left: 3px solid var(--c-purple-light); padding: var(--s-4); border-radius: 0 var(--r-md) var(--r-md) 0; margin-bottom: var(--s-4); }
.registration-question-block { padding-bottom: var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px dashed var(--c-line); }
.registration-question-block:last-child { border-bottom: 0; }
.registration-declaration-text { font-size: var(--t-small); line-height: 1.7; color: var(--c-ink-muted); }
.registration-errors { background: var(--c-red-soft); color: var(--c-red-deep); padding: var(--s-4); border-radius: var(--r-md); margin-bottom: var(--s-4); }
.registration-success-panel { background: var(--c-green-soft); color: var(--c-green-deep); padding: var(--s-5); border-radius: var(--r-md); margin-bottom: var(--s-4); }
.registration-access-panel { background: var(--c-amber-soft); color: var(--c-amber-deep); padding: var(--s-5); border-radius: var(--r-md); margin-bottom: var(--s-4); }
.registration-grid { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.registration-grid th, .registration-grid td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); text-align: left; }
.registration-subform { background: var(--c-bg-soft); padding: var(--s-5); border-radius: var(--r-md); margin: var(--s-4) 0; }
.registration-subform-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.registration-nav { display: flex; gap: var(--s-3); justify-content: space-between; padding-top: var(--s-5); border-top: 1px solid var(--c-line); margin-top: var(--s-5); }
.registration-btn, .registration-btn-submit { background: var(--c-purple-deep); color: #fff; padding: 14px 24px; border-radius: var(--r-pill); border: 0; font-family: var(--font-display); font-weight: 600; cursor: pointer; }
.registration-btn:hover { background: var(--c-purple); }
.registration-btn-secondary { background: var(--c-purple-tint); color: var(--c-purple-deep); padding: 14px 24px; border-radius: var(--r-pill); border: 0; font-family: var(--font-display); font-weight: 600; cursor: pointer; }
.registration-btn-link, .registration-btn-link-edit { background: transparent; color: var(--c-purple-deep); border: 0; padding: 6px 10px; cursor: pointer; font-family: var(--font-display); font-weight: 600; }
.registration-btn-link:hover, .registration-btn-link-edit:hover { text-decoration: underline; }

/* --- FAQ --- */

/* Filter bar */
.faq-display .faq-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--c-purple-mist);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  margin-bottom: var(--s-5);
}
.faq-display .faq-filter-bar label { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--c-ink-muted); }
.faq-display .faq-filter-search,
.faq-display .faq-filter-select {
  padding: 10px var(--s-3);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  font-size: var(--t-small);
  min-width: 200px;
}
.faq-display .faq-filter-search:focus,
.faq-display .faq-filter-select:focus { outline: none; border-color: var(--c-purple); box-shadow: var(--shadow-focus); }
.faq-display .faq-btn {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--c-bg);
  border: 1.5px solid var(--c-line-strong);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--c-ink);
  transition: all var(--dur) var(--ease);
}
.faq-display .faq-btn:hover { border-color: var(--c-purple-light); color: var(--c-purple-deep); }
.faq-display .faq-btn--primary { background: var(--c-purple-deep); color: #fff; border-color: var(--c-purple-deep); }
.faq-display .faq-btn--primary:hover { background: var(--c-purple); border-color: var(--c-purple); color: #fff; }

/* Category */
.faq-display .faq-category { margin-bottom: var(--s-6); }
.faq-display .faq-category-title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-ink-strong);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
  margin: 0 0 var(--s-4);
}

/* List + items — explicit overrides so the base dl rules don't grid the items */
.faq-display .faq-list {
  display: block;
  grid-template-columns: none;
  gap: 0;
  margin: 0;
  padding: 0;
}
.faq-display .faq-item {
  display: block;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  margin-bottom: var(--s-2);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq-display .faq-item:hover { border-color: var(--c-purple-light); }
.faq-display .faq-item.is-open {
  border-color: var(--c-purple);
  box-shadow: var(--shadow-sm);
}

/* Question */
.faq-display .faq-question {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--c-ink-strong);
  background: transparent;
  margin: 0;
  padding: var(--s-4) var(--s-7) var(--s-4) var(--s-5);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Override the FAQ Module's "+ " before-pseudo so our chevron is the sole indicator */
.faq-display .faq-question::before { content: none !important; }
.faq-display .faq-question::after {
  content: "";
  position: absolute;
  right: var(--s-5); top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--c-purple-deep);
  border-bottom: 2px solid var(--c-purple-deep);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.faq-display .faq-item.is-open .faq-question::after {
  transform: translateY(-30%) rotate(-135deg);
}
.faq-display .faq-question:hover {
  background: var(--c-purple-mist);
  color: var(--c-purple-deep);
}
.faq-display .faq-item.is-open .faq-question {
  background: var(--c-purple-mist);
  color: var(--c-purple-deep);
}

/* Answer */
.faq-display .faq-answer {
  display: block;
  height: 0;
  overflow: hidden;
  margin: 0;
  background: var(--c-bg);
}
.faq-display .faq-answer-inner {
  display: block;
  padding: var(--s-2) var(--s-5) var(--s-4);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
}

/* Empty state */
.faq-display .faq-empty {
  padding: var(--s-5);
  background: var(--c-bg-soft);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--c-ink-muted);
  font-style: italic;
}

/* ============ 13. PAGE LAYOUT UTILITIES ============ */
/*
   Reusable primitives for building content pages. Every content page —
   Home, Client, Candidate, Contact, Team — composes from these.

   .class-section        — padded page section (spacing + optional background)
   .class-fullbleed      — break out of container to viewport edges
   .class-container--sm  — narrow (720px) container for text-forward content
   .class-container--lg  — wide (1400px) container for image-heavy layouts
   .class-grid           — responsive card grid (2/3/4 column)
   .class-media          — image + text side by side
   .class-hero           — reusable hero pattern (gradient + text + CTAs)
   .class-panel          — reusable card panel with brand background variants
*/

/* Section wrapper — the workhorse for stacking content on any page */
.class-section {
  padding-block: var(--s-8);
  position: relative;
}
.class-section--sm { padding-block: var(--s-6); }
.class-section--md { padding-block: var(--s-7); }
.class-section--lg { padding-block: var(--s-9); }
.class-section--xl { padding-block: var(--s-10); }
.class-section--flush { padding-block: 0; }

/* Section background variants — from the moodboard rhythm system */
.class-section--soft   { background: var(--c-bg-soft); }
.class-section--mist   { background: var(--c-purple-mist); }
.class-section--tint   { background: var(--c-purple-tint); }
.class-section--brand  {
  color: #fff;
  background:
    radial-gradient(700px 400px at 20% 20%, rgba(186,104,200,0.25), transparent 60%),
    radial-gradient(600px 350px at 90% 80%, rgba(214,22,113,0.15), transparent 60%),
    linear-gradient(135deg, #7b1fa2 0%, #4a0e69 100%);
}
.class-section--brand h1, .class-section--brand h2, .class-section--brand h3,
.class-section--brand h4, .class-section--brand h5 { color: #fff; }
.class-section--brand p, .class-section--brand .lead { color: rgba(255, 255, 255, 0.85); }
.class-section--dark {
  color: #fff;
  background: linear-gradient(135deg, #1a0d2b 0%, #2a1042 100%);
}
.class-section--dark h1, .class-section--dark h2, .class-section--dark h3 { color: #fff; }
.class-section--dark p, .class-section--dark .lead { color: rgba(255, 255, 255, 0.8); }

/* Full-bleed — for use INSIDE a constrained container (ContentPane).
   Breaks the element out to the viewport width, then internal .class-container
   re-constrains its children to the design width. This is THE utility that
   lets an entire page composition sit inside a single ContentPane and still
   have full-bleed hero and CTA bands. */
.class-fullbleed {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* When the viewport has a scrollbar, 100vw includes it — avoid H-scroll: */
  padding-right: 0;
}

/* Container variants */
.class-container--sm { max-width: 720px; }
.class-container--lg { max-width: 1400px; }
.class-container--reading { max-width: 640px; }  /* max ~66 characters per line */

/* Section headers — the eyebrow + h2 + lead pattern that opens most sections */
.class-section-head {
  max-width: 720px;
  margin: 0 auto var(--s-6);
  text-align: center;
}
.class-section-head--left { margin-left: 0; text-align: left; }
.class-section-head h2 { margin: var(--s-2) 0 var(--s-3); }
.class-section-head .lead { color: var(--c-ink-muted); margin: 0; }

/* Responsive card grids — the go-to for stacking cards, benefits, features */
.class-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
.class-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.class-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.class-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.class-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.class-grid--gap-sm { gap: var(--s-3); }
.class-grid--gap-lg { gap: var(--s-6); }

@media (max-width: 900px) {
  .class-grid--3, .class-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .class-grid--2, .class-grid--3, .class-grid--4 { grid-template-columns: 1fr; }
}

/* Media object — image left, text right (or reverse). For Client/Candidate
   propositions paired with imagery, About sections, testimonial highlights. */
.class-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 720px) {
  .class-media { grid-template-columns: 1fr 1fr; }
  .class-media--reverse .class-media__figure { order: 2; }
  .class-media--narrow-figure { grid-template-columns: 5fr 7fr; }
  .class-media--wide-figure   { grid-template-columns: 7fr 5fr; }
}
.class-media__figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-bg-soft);
  aspect-ratio: 4 / 3;
}
.class-media__figure img,
.class-media__figure svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.class-media__body h2, .class-media__body h3 { margin-top: 0; }

/* Hero pattern — reusable across all content pages */
.class-hero {
  position: relative;
  overflow: hidden;
  padding: var(--s-9) 0 var(--s-8);
  color: #fff;
  background:
    radial-gradient(1000px 600px at 80% 10%, rgba(186,104,200,0.35), transparent 60%),
    radial-gradient(800px 500px at 10% 90%, rgba(123,31,162,0.45), transparent 60%),
    linear-gradient(135deg, #1a0d2b 0%, #4a0e69 45%, #7b1fa2 100%);
}
.class-hero__inner { position: relative; z-index: 2; }
.class-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--s-4);
}
.class-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 0 0 var(--s-5);
  background: linear-gradient(135deg, #ffffff 0%, #ba68c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.class-hero__lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 58ch;
  margin: 0 0 var(--s-6);
}

/* Italic accent word inside a hero title, with a hand-drawn squiggle
   underline. Use like:
     <h1 class="class-hero__title">Nursery jobs, <span class="class-hero__title-accent">done right<svg class="class-hero__title-squiggle" ...>...</svg></span>.</h1>
*/
.class-hero__title-accent {
  display: inline-block;
  position: relative;
  font-style: italic;
  font-weight: 500;
}
.class-hero__title-squiggle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.14em;
  width: 100%;
  height: 0.24em;
  color: #ba68c8;
  overflow: visible;
}

.class-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* Embedded search bar for hero — glassy pill, icon + input + button on one row */
.class-hero__search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 6px 6px 20px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  max-width: 560px;
  margin: 0 0 var(--s-6);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.class-hero__search:focus-within {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 2