/* ============================================================================
   waldrep.css — the single source of truth for thewaldrepcompany.com
   Built 14 Sep 2026 (redesign week, D1). Replaces nothing yet.

   THE CONTRACT, in three layers. Read this before editing.

   LAYER 1  TOKENS (unscoped, inert)
     Custom properties only. A custom property renders nothing on its own, so
     this layer is safe on every page from the moment the sheet is linked.
     Names match the ones already used in the pages' inline <style> blocks, on
     purpose: this sheet is linked BEFORE the inline block, so while a page
     still carries its own :root the page wins and nothing changes. Delete that
     page's inline block and the canonical values below take over automatically.
     That is the whole migration mechanism.

   LAYER 2  GLOBAL SAFETY (unscoped, live everywhere)
     :focus-visible and prefers-reduced-motion. These are the only rules in
     this file that paint on an unconverted page. Both are deliberate: no page
     on the site honoured reduced motion before today, and most have no visible
     focus ring. Specificity is kept at its floor so any existing rule wins.

   LAYER 3  PRIMITIVES (scoped to .wc, inert until a page opts in)
     Everything else. A page joins the system by putting class="wc" on <html>
     AND deleting its inline <style> block. Never both at once: a page is
     either converted or it is not. That rule is what keeps the cascade
     predictable across a 55-page migration with no build step and no git.

   CANONICAL TOKEN DECISIONS (settled from the 9 Sep audit)
     --accent      #00c8ff   was split with #00d4ff across 15 pages
     --bg-deep     #07091a   was split with #08090d across 6 service pages
     --text-muted  #a0aab8   was split three ways; this is the highest contrast
     container     1160px / 28px gutter   was split five ways, 1080 to 1200
   ========================================================================= */


/* ==========================================================================
   LAYER 1 — TOKENS
   ========================================================================== */

:root {
  /* ---- brand surfaces ---------------------------------------------------
     Deep navy ground, one step up for sections, two for cards. Keep the three
     distinct: flattening them is what made the old service pages look muddy. */
  --bg-deep:      #07091a;
  --bg-section:   #0b0d22;
  --bg-card:      #0e1230;
  --bg-raised:    #141a3c;   /* new: hover/active surface, was ad-hoc rgba */
  --bg-mid:       #090c1f;   /* alias: the course pages reference this name */

  /* ---- brand accents ----------------------------------------------------
     Cyan is the action colour. Spend it on ONE thing per screen. Gold is the
     editorial/credential colour (newsletter, credentials, awards) and never
     an action. Blue is a quiet tertiary for informational chrome only. */
  --accent:       #00c8ff;
  --accent-glow:  rgba(0, 200, 255, 0.15);
  --accent-line:  rgba(0, 200, 255, 0.35);   /* new: named hover border */
  --gold:         #d4a843;
  --gold-dim:     rgba(212, 168, 67, 0.10);
  --gold-line:    rgba(212, 168, 67, 0.35);  /* new */
  --border-gold:  rgba(212, 168, 67, 0.22);  /* alias: used by the course pages */
  --blue:         #1e90ff;

  /* ---- ink ---------------------------------------------------------------
     --text-strong is new. Pages were hardcoding #fff in ~40 places; naming it
     means a future contrast change is one edit instead of forty. */
  --text-strong:  #ffffff;
  --text:         #e2e8f0;
  --text-muted:   #a0aab8;
  /* 5.02:1 on --bg-deep, 4.64:1 on --bg-card. The first value tried,
     #6b7688, cleared neither at 11-12px: 4.30 and 3.98. */
  --text-faint:   #768193;
  --text-secondary: #c3ccda; /* alias: the 12 service pages reference this name */

  /* ---- legacy aliases -----------------------------------------------------
     The 37 pages converted last each carried their own :root with their own
     names for the same few colours. Dropping those blocks is what unifies the
     palette; these aliases keep their CSS working while pointing every one of
     them at the canonical value. --cyan in particular was #00d4ff, the drift
     this whole exercise set out to remove. */
  --navy:         var(--bg-deep);
  --navy-mid:     var(--bg-card);
  --navy-light:   var(--bg-raised);
  --bg:           var(--bg-deep);
  --card:         var(--bg-card);
  --cyan:         var(--accent);
  --muted:        var(--text-muted);
  --text-primary: var(--text);
  --green:        var(--ok);
  --red:          var(--bad);
  --border-green: rgba(61, 220, 151, 0.25);
  --radius:       var(--r-lg);

  /* ---- lines ------------------------------------------------------------- */
  --border:       rgba(0, 200, 255, 0.14);
  --border-soft:  rgba(255, 255, 255, 0.06);
  --border-hard:  rgba(255, 255, 255, 0.12);

  /* ---- semantic (new; none of this existed) ------------------------------ */
  --ok:           #3ddc97;
  --warn:         #f0b429;
  --bad:          #ff6b6b;

  /* ---- type scale -------------------------------------------------------
     The homepage alone shipped 31 distinct font-size values. This is nine.
     Everything on a converted page comes from this list, no exceptions. */
  --fs-2xs:  0.6875rem;   /* 11px  — eyebrows, micro labels, badges     */
  --fs-xs:   0.78125rem;  /* 12.5  — meta, captions, legal              */
  --fs-sm:   0.875rem;    /* 14    — secondary body, card body          */
  --fs-base: 1rem;        /* 16    — body                               */
  --fs-md:   1.125rem;    /* 18    — lead paragraph                     */
  --fs-lg:   1.375rem;    /* 22    — h3, card title                     */
  --fs-xl:   1.75rem;     /* 28    — h2 in tight contexts               */
  --fs-2xl:  clamp(2rem, 3.2vw, 2.75rem);      /* section title         */
  --fs-3xl:  clamp(2.5rem, 5vw, 3.75rem);      /* page h1               */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.7;    /* was 1.6; the extra leading is most of "spacious" */

  --tracking-label: 0.12em;   /* uppercase eyebrows only */

  /* ---- spacing scale ----------------------------------------------------
     4px base. Section rhythm lives at --sp-9 / --sp-10. */
  --sp-1:  0.25rem;   /*   4 */
  --sp-2:  0.5rem;    /*   8 */
  --sp-3:  0.75rem;   /*  12 */
  --sp-4:  1rem;      /*  16 */
  --sp-5:  1.5rem;    /*  24 */
  --sp-6:  2rem;      /*  32 */
  --sp-7:  3rem;      /*  48 */
  --sp-8:  4rem;      /*  64 */
  --sp-9:  6rem;      /*  96 */
  --sp-10: 8rem;      /* 128 */

  /* ---- layout ------------------------------------------------------------ */
  --container:      1160px;
  --container-pad:  1.75rem;   /* 28px */
  --measure:        68ch;      /* reading width for long-form prose */
  --nav-h:          68px;

  /* ---- radius, shadow, motion -------------------------------------------- */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  18px;
  --r-pill: 999px;

  --shadow-card:  0 6px 28px rgba(0, 0, 0, 0.34);
  --shadow-lift:  0 6px 28px var(--accent-glow);

  --t-fast: 120ms ease;
  --t-base: 180ms ease;

  --z-nav: 200;
  --z-menu: 199;
  --z-skip: 9999;
}


/* ==========================================================================
   LAYER 2 — GLOBAL SAFETY
   The only rules here that paint on an unconverted page. Kept at minimum
   specificity so any existing page rule beats them.
   ========================================================================== */

/* Visible keyboard focus. Before today most pages had none at all. Mouse users
   see nothing change; :focus-visible only fires for keyboard and a11y tools. */
:focus-visible {
  outline: 2px solid var(--accent, #00c8ff);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The skip link belongs with the other global a11y primitives, not behind .wc.
   It is the first thing in the tab order on every page including the LMS and
   admin panels, which are not on the design system, and an unstyled one shows
   as a stray visible link at the top of the page. Off-screen until focused, so
   it can never disturb a layout. A page with its own rule still wins on source
   order via its inline block. */
.skip-nav {
  position: absolute; left: -9999px; top: 4px; z-index: 9999;
  background: var(--accent, #00c8ff); color: var(--bg-deep, #07091a);
  padding: 8px 16px; border-radius: 4px;
  font: 700 0.875rem/1.2 'Inter', system-ui, sans-serif; text-decoration: none;
}
.skip-nav:focus { left: 4px; }

/* Honour the OS "reduce motion" setting. Zero of 55 pages did this before, and
   D2 onward adds hover and transition work that would otherwise be unguarded.
   Only affects visitors who have explicitly asked for it. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   LAYER 3 — PRIMITIVES  (scoped to .wc — inert until a page opts in)
   ========================================================================== */

/* ---- reset + base ------------------------------------------------------- */
.wc *,
.wc *::before,
.wc *::after { box-sizing: border-box; margin: 0; padding: 0; }

.wc { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

.wc body {
  font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  background: var(--bg-deep);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wc a { color: inherit; text-decoration: none; }
.wc img, .wc svg, .wc video { display: block; max-width: 100%; }
.wc img { height: auto; }
.wc button, .wc input, .wc select, .wc textarea { font: inherit; color: inherit; }
.wc ul, .wc ol { list-style: none; }

/* Long-form prose opt-in: keeps body copy near a readable measure. */
.wc .prose { max-width: var(--measure); }
.wc .prose p + p { margin-top: var(--sp-4); }

/* ---- skip nav ----------------------------------------------------------- */
.wc .skip-nav {
  position: absolute; left: -9999px; top: 4px; z-index: var(--z-skip);
  background: var(--accent); color: var(--bg-deep);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 700;
}
.wc .skip-nav:focus { left: 4px; }

/* ---- layout ------------------------------------------------------------- */
.wc .container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--container-pad);
}
.wc section { padding-block: var(--sp-9); }
.wc .bg-section { background: var(--bg-section); }

/* ---- type --------------------------------------------------------------- */
.wc h1, .wc h2, .wc h3, .wc h4 {
  color: var(--text-strong); font-weight: 800;
  line-height: var(--lh-tight); text-wrap: balance;
}
.wc h1 { font-size: var(--fs-3xl); letter-spacing: -0.02em; }
.wc h2 { font-size: var(--fs-2xl); letter-spacing: -0.015em; }
.wc h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: -0.01em; }
.wc h4 { font-size: var(--fs-base); line-height: var(--lh-snug); }
.wc h1 span, .wc h2 span { color: var(--accent); }

.wc .section-head { margin-bottom: var(--sp-8); }
.wc .section-head.center { text-align: center; }
.wc .section-head.center .section-sub { margin-inline: auto; }

.wc .section-label {
  display: block; margin-bottom: var(--sp-3);
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent);
}
.wc .section-label.gold { color: var(--gold); }
.wc .section-title { font-size: var(--fs-2xl); font-weight: 800; color: var(--text-strong); line-height: var(--lh-tight); margin-bottom: var(--sp-4); letter-spacing: -0.015em; }
.wc .section-sub { font-size: var(--fs-md); color: var(--text-muted); max-width: 60ch; line-height: var(--lh-body); }

/* Tabular figures wherever numbers line up. Part of the instrument register. */
.wc .num, .wc table td, .wc .stat-num { font-variant-numeric: tabular-nums; }

/* ---- buttons ------------------------------------------------------------ */
/* The base geometry applies to the modifiers on their own too. The 12 service
   pages write class="btn-primary" with no base class, and a colour-only
   modifier would leave those buttons with no padding or radius at all. */
.wc .btn,
.wc .btn-primary,
.wc .btn-secondary,
.wc .btn-gold,
.wc .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.2;
  border: 1px solid transparent; border-radius: var(--r-md);
  cursor: pointer; text-align: center; text-decoration: none;
  transition: background var(--t-base), border-color var(--t-base),
              box-shadow var(--t-base), transform var(--t-base);
}
.wc .btn-ghost { padding-inline: 0; }
.wc .btn-primary   { background: var(--accent); color: var(--bg-deep); }
.wc .btn-primary:hover   { box-shadow: 0 0 28px var(--accent-glow); transform: translateY(-1px); }
.wc .btn-secondary { background: transparent; color: var(--text-strong); border-color: var(--border-hard); font-weight: 600; }
.wc .btn-secondary:hover { border-color: var(--accent); background: rgba(0, 200, 255, 0.06); }
.wc .btn-gold      { background: var(--gold); color: var(--bg-deep); letter-spacing: 0.04em; text-transform: uppercase; }
.wc .btn-gold:hover      { box-shadow: 0 0 32px var(--gold-line); transform: translateY(-1px); }
.wc .btn-ghost     { background: transparent; color: var(--accent); }
.wc .btn-ghost:hover     { text-decoration: underline; text-underline-offset: 4px; }
.wc .btn[disabled], .wc .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- cards --------------------------------------------------------------
   One card object. Border, fill and radius are spent here and nowhere else,
   so a card reads as a discrete thing and a section does not. */
.wc .card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6);
}
.wc .card-interactive { transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); }
.wc .card-interactive:hover { border-color: var(--accent-line); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.wc .card-gold { border-color: rgba(212, 168, 67, 0.20); }
.wc .card-gold.card-interactive:hover { border-color: var(--gold-line); box-shadow: 0 6px 28px var(--gold-dim); }

.wc .card-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong); margin-bottom: var(--sp-2); }
.wc .card-body  { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-body); }

/* ---- grids -------------------------------------------------------------- */
.wc .grid { display: grid; gap: var(--sp-5); }
.wc .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wc .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wc .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wc .stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.wc .row   { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* ---- eyebrow / pill / badge --------------------------------------------- */
.wc .pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  border: 1px solid var(--accent-line); background: rgba(0, 200, 255, 0.07);
  color: var(--accent);
}
.wc .pill-gold { border-color: var(--gold-line); background: var(--gold-dim); color: var(--gold); }

/* ---- forms --------------------------------------------------------------
   Inputs are the one place a visible border is non-negotiable: an invisible
   field is an unfilled field, and every lead on this site starts in one. */
.wc .field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.wc .field label {
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.wc .field input,
.wc .field select,
.wc .field textarea {
  background: var(--bg-deep); border: 1px solid var(--border-hard);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); color: var(--text);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.wc .field input:focus,
.wc .field select:focus,
.wc .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.wc .field input::placeholder,
.wc .field textarea::placeholder { color: rgba(160, 170, 184, 0.45); }
.wc .field textarea { resize: vertical; min-height: 7rem; }
.wc .field-error { font-size: var(--fs-xs); color: var(--bad); }
.wc .field input[aria-invalid="true"] { border-color: var(--bad); }

/* ---- tables -------------------------------------------------------------- */
.wc .table-wrap { overflow-x: auto; }
.wc table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.wc th {
  text-align: left; font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted); padding: 0 var(--sp-4) var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}
.wc td { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom: 1px solid var(--border-soft); vertical-align: top; }

/* ---- nav ----------------------------------------------------------------
   D2 replaces the markup this styles. Shipped now so the shell work on
   Tuesday has somewhere to land. */
/* Four container shapes carry the site nav across the site: nav.site (new
   pages), header.site-nav (about/contact/rates), header.site (catalog) and a
   bare <nav> holding .nav-inner. All four get the same chrome. */
.wc nav.site,
.wc header.site-nav,
.wc header.site,
.wc nav:has(> .nav-inner) {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  background: rgba(7, 9, 26, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.wc .nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  height: var(--nav-h); max-width: 1400px; margin-inline: auto;
  padding-inline: var(--container-pad);
}
.wc .nav-brand { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.wc .nav-brand-icon { width: 36px; height: 36px; border-radius: var(--r-md); overflow: hidden; flex-shrink: 0; }
.wc .nav-brand-icon img { width: 100%; height: 100%; object-fit: cover; }
.wc .nav-brand-text { font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.wc .nav-brand-text span { color: var(--accent); }

.wc .nav-menu { display: flex; align-items: center; gap: var(--sp-1); }
.wc .nav-menu a {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted);
  white-space: nowrap; transition: color var(--t-fast), background var(--t-fast);
}
.wc .nav-menu a:hover,
.wc .nav-menu a[aria-current="page"] { color: var(--text-strong); background: rgba(255, 255, 255, 0.06); }
/* These two live INSIDE .nav-menu, so they must outrank `.wc .nav-menu a`
   (0,2,1). Matching that element selector is the point of the `a` here: drop
   it and the CTA and phone silently inherit the muted link colour. */
.wc .nav-menu a.nav-cta {
  background: var(--accent); color: var(--bg-deep); font-weight: 700;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
}
.wc .nav-menu a.nav-cta:hover { background: var(--accent); color: var(--bg-deep); box-shadow: 0 0 20px var(--accent-glow); }
.wc .nav-menu a.nav-phone {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--accent); font-weight: 600;
}
.wc .nav-menu a.nav-phone:hover { background: var(--accent-glow); color: var(--accent); }

.wc .hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 6px; flex-shrink: 0;
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.wc .hamburger span { display: block; height: 2px; width: 100%; background: var(--text); border-radius: 2px; transition: transform var(--t-base), opacity var(--t-base); }
.wc .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wc .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.wc .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- footer -------------------------------------------------------------- */
.wc footer.site { background: var(--bg-deep); border-top: 1px solid var(--border); padding: var(--sp-8) 0 var(--sp-6); }
.wc .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-7); margin-bottom: var(--sp-7); }
.wc .footer-col-title { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); margin-bottom: var(--sp-4); }
.wc .footer-links { display: flex; flex-direction: column; gap: var(--sp-3); }
.wc .footer-links a { font-size: var(--fs-sm); color: var(--text-muted); transition: color var(--t-fast); }
.wc .footer-links a:hover { color: var(--accent); }
/* The stamped footer's brand block, contact lines and socials. These were
   only ever styled by each page's inline CSS; once every page was converted
   they had no rules at all, which left the footer brand and social icons
   unstyled site-wide. */
.wc .footer-brand-name { font-size: var(--fs-base); font-weight: 800; color: var(--text-strong); margin-bottom: var(--sp-1); }
.wc .footer-brand-name span { color: var(--accent); }
.wc .footer-brand-sub { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: var(--sp-3); }
.wc .footer-brand-desc { font-size: var(--fs-sm); color: var(--text-muted); max-width: 32ch; }
.wc .footer-phone { font-size: var(--fs-base); font-weight: 700; margin-top: var(--sp-3); }
.wc .footer-phone a { color: var(--accent); }
.wc .footer-email { font-size: var(--fs-sm); margin-top: var(--sp-1); }
.wc .footer-email a { color: var(--text-muted); transition: color var(--t-fast); }
.wc .footer-email a:hover { color: var(--accent); }
.wc .footer-copy { font-size: var(--fs-xs); color: var(--text-muted); }
.wc .footer-legal { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); }
.wc .footer-legal a { font-size: var(--fs-xs); }
.wc .social-links { display: flex; gap: var(--sp-2); }
.wc .social-link {
  display: grid; place-items: center; width: 2.125rem; height: 2.125rem;
  border-radius: var(--r-md); background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-muted); transition: border-color var(--t-fast), color var(--t-fast);
}
.wc .social-link:hover { border-color: var(--accent); color: var(--accent); }

.wc .footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-3);
  padding-top: var(--sp-5); border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted);
}

/* ---- sub-page hero -------------------------------------------------------
   Deliberately NOT the homepage's 100vh opener. A sub-page hero states what
   the page is and gets out of the way, so the first screen carries content
   rather than a title card. */
.wc .page-hero {
  padding-block: calc(var(--nav-h) + var(--sp-8)) var(--sp-8);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(60rem 24rem at 72% -10%, rgba(0, 200, 255, 0.09), transparent 70%),
    var(--bg-deep);
}
.wc .page-hero h1 { max-width: 20ch; }
.wc .page-hero .lead { max-width: 56ch; margin-top: var(--sp-4); }
.wc .page-hero .row { margin-top: var(--sp-6); }

/* ---- breadcrumb ---------------------------------------------------------- */
.wc .breadcrumb {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-faint); margin-bottom: var(--sp-4);
}
.wc .breadcrumb a { color: var(--text-muted); }
.wc .breadcrumb a:hover { color: var(--accent); }
.wc .breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--text-faint); }
.wc .breadcrumb li { display: inline; }

/* ---- card extras --------------------------------------------------------- */
.wc .card-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-2xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint);
}
.wc .card-meta b { color: var(--accent); font-weight: 700; letter-spacing: normal; text-transform: none; font-size: var(--fs-sm); }
.wc .card-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm); font-weight: 600; color: var(--accent);
}
.wc .card-interactive:hover .card-link { gap: var(--sp-2); }
.wc .card-link::after { content: "\2192"; transition: transform var(--t-base); }

/* A whole card that is one link. The <a> covers the card so the hit area is
   the card, not just the label, without nesting interactive elements. */
.wc .card-as-link { position: relative; }
.wc .card-as-link .card-link::before { content: ""; position: absolute; inset: 0; }

/* ==========================================================================
   HOME PAGE COMPONENTS  (D3)
   ========================================================================== */

/* ---- hero ---------------------------------------------------------------
   Not 100vh. The old hero reserved the entire first screen for a title card,
   which pushed every offer below the fold. This one is sized to its content. */
.wc .home-hero {
  padding-block: calc(var(--nav-h) + var(--sp-8)) var(--sp-9);
  background:
    radial-gradient(52rem 30rem at 78% -6%, rgba(0, 200, 255, 0.10), transparent 70%),
    var(--bg-deep);
  border-bottom: 1px solid var(--border);
}
.wc .home-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); align-items: center; }
.wc .home-hero h1 { margin-block: var(--sp-4); max-width: 16ch; }
.wc .home-hero .lead { max-width: 52ch; }
.wc .home-hero .row { margin-top: var(--sp-6); }

.wc .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: wc-pulse 2s infinite; }
@keyframes wc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Stats read as data, so they get tabular figures and a rule, not cards. */
.wc .stat-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5);
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.wc .stat-row dt { order: 2; font-size: var(--fs-2xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--sp-1); }
.wc .stat-row dd { order: 1; font-size: var(--fs-xl); font-weight: 800; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.wc .stat-row > div { display: flex; flex-direction: column; }

/* ---- portrait -----------------------------------------------------------
   The old markup served the portrait only above 901px and fell back to a 1x1
   GIF, so every phone got an empty hero. One <img>, always present. */
.wc .home-hero-aside { display: flex; flex-direction: column; gap: var(--sp-4); }
.wc .portrait {
  position: relative; overflow: hidden;
  max-width: 30rem; width: 100%; margin-inline: auto;
  border: 1px solid var(--accent-line); border-radius: var(--r-xl);
  box-shadow: 0 0 48px rgba(0, 200, 255, 0.10), var(--shadow-card);
}
.wc .portrait img { width: 100%; height: auto; aspect-ratio: 476 / 380; object-fit: cover; object-position: center 22%; }
.wc .portrait figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--sp-7) var(--sp-5) var(--sp-4);
  background: linear-gradient(transparent, rgba(7, 9, 26, 0.94));
}
.wc .portrait figcaption { padding-right: 9.5rem; }
.wc .portrait figcaption b { display: block; color: var(--text-strong); font-size: var(--fs-base); font-weight: 800; }
.wc .portrait figcaption span { display: block; color: var(--text-muted); font-size: var(--fs-xs); margin-top: 2px; }
/* Bottom-right, not top-right: at phone widths the crop puts the subject's
   head under a top-corner badge. */
.wc .portrait-badge {
  position: absolute; right: var(--sp-4); bottom: var(--sp-4);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: var(--gold-dim); border: 1px solid var(--gold-line); color: var(--gold);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
}

.wc .cred-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.wc .cred-list li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4);
}
.wc .cred-mark { width: 10px; height: 10px; border-radius: 50%; margin-top: 0.45em; flex-shrink: 0; background: var(--accent); }
.wc .cred-mark.gold { background: var(--gold); }
.wc .cred-list b { display: block; color: var(--text-strong); font-size: var(--fs-sm); margin-bottom: 2px; }
.wc .cred-list span span, .wc .cred-list li > span { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); }

/* ---- trust strip --------------------------------------------------------- */
.wc .trust-strip { background: var(--bg-card); border-bottom: 1px solid var(--border); padding-block: var(--sp-4); }
.wc .trust-strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-5); }
.wc .trust-strip li { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: var(--sp-2); }
.wc .trust-strip li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* ---- the four lanes -----------------------------------------------------
   Equal weight on purpose. Services used to occupy the page while training,
   software and Court-Ready AI lived in unnamed padding strips. */
.wc .lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.wc .lane {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; transition: border-color var(--t-base), box-shadow var(--t-base);
}
.wc .lane:hover { border-color: var(--accent-line); box-shadow: var(--shadow-lift); }
/* All the supplied photography is portrait (phone-shot). A 3:4 source in a
   16:9 box shows only the middle 42% of the frame; 4:3 shows about 56% and
   still reads as a card band rather than a full portrait. Per-image
   object-position below puts the subject inside that band. */
.wc .lane-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-deep); border-bottom: 1px solid var(--border); }
.wc .lane-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Where the subject is not in the vertical middle of the frame. */
.wc .pos-upper img, .wc img.pos-upper { object-position: center 26%; }
.wc .pos-lower img, .wc img.pos-lower { object-position: center 62%; }
.wc .lane-media-ui { display: grid; place-items: center; padding: var(--sp-5); }
.wc .lane-body { padding: var(--sp-6); display: flex; flex-direction: column; }
.wc .lane-body h3 { margin-block: var(--sp-2) var(--sp-3); }
.wc .lane-body > p { font-size: var(--fs-sm); color: var(--text-muted); }
.wc .lane-body .card-link { margin-top: auto; padding-top: var(--sp-4); }

.wc .ticks { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.wc .ticks li { position: relative; padding-left: var(--sp-5); font-size: var(--fs-sm); color: var(--text); }
.wc .ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--accent); background: var(--accent-glow);
}

/* ---- the Toolkit panel --------------------------------------------------
   An HTML rendition rather than a screenshot: stays sharp at any pixel
   density, reflows on a phone, and cannot go stale against a raster crop. */
.wc .ui-panel {
  width: 100%; max-width: 26rem;
  background: var(--bg-deep); border: 1px solid var(--accent-line);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card);
  font-variant-numeric: tabular-nums;
}
.wc .ui-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase;
}
.wc .ui-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.wc .ui-case { color: var(--text-muted); }
.wc .ui-flag { margin-left: auto; color: var(--ok); font-weight: 700; }
.wc .ui-body { padding: var(--sp-4); }
.wc .ui-title { font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); margin-bottom: var(--sp-3); }
.wc .ui-meter { height: 5px; border-radius: var(--r-pill); background: var(--border-soft); overflow: hidden; }
.wc .ui-meter span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.wc .ui-meter-label { display: flex; justify-content: space-between; margin-top: var(--sp-2); font-size: var(--fs-2xs); color: var(--text-muted); }
.wc .ui-meter-label b { color: var(--accent); }
.wc .ui-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.wc .ui-stats dt { font-size: var(--fs-2xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); }
.wc .ui-stats dd { font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong); line-height: 1.1; }
.wc .ui-event {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.wc .ui-event span { display: block; font-size: var(--fs-2xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 2px; }

/* Court-Ready AI gets its own mark inside the same palette, so it reads as a
   distinct product without leaving the brand. */
.wc .crai-mark {
  display: grid; place-items: center; text-align: center;
  width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--gold-line); border-radius: var(--r-md);
  background:
    repeating-linear-gradient(135deg, rgba(212,168,67,0.05) 0 10px, transparent 10px 20px),
    var(--bg-deep);
}
.wc .crai-mark span { font-size: var(--fs-2xl); font-weight: 800; color: var(--gold); line-height: 1; letter-spacing: -0.03em; }
.wc .crai-mark em { display: block; font-style: normal; font-size: var(--fs-2xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--sp-2); }

/* Used in the homepage markup; these were missing rules entirely. */
.wc .feature-body { min-width: 0; }
.wc .lane-crai .lane-media-ui { background: var(--bg-deep); }

/* ---- feature band (All-Access) ------------------------------------------- */
.wc .feature { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); align-items: center; }
.wc .feature-media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
.wc .feature-media img { width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
.wc .feature-media figcaption { padding: var(--sp-3) var(--sp-4); background: var(--bg-card); font-size: var(--fs-xs); color: var(--text-muted); }
.wc .feature .row { margin-top: var(--sp-6); }
.wc .gold-text { color: var(--gold); }

/* ---- process ------------------------------------------------------------- */
.wc .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); counter-reset: step; }
.wc .steps li { display: flex; flex-direction: column; gap: var(--sp-2); }
.wc .step-n {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent);
  font-weight: 800; font-size: var(--fs-base); margin-bottom: var(--sp-2);
  background: var(--bg-deep); box-shadow: 0 0 18px var(--accent-glow);
}
.wc .steps p { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- newsletter band ----------------------------------------------------- */
.wc .nl-band {
  background: linear-gradient(135deg, var(--bg-deep), var(--bg-card) 50%, var(--bg-deep));
  border-block: 1px solid var(--border);
}
.wc .nl-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-8); align-items: center; }
.wc .nl-form { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.wc .nl-input {
  flex: 1 1 15rem; min-width: 0;
  background: var(--bg-deep); border: 1px solid var(--border-hard); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: var(--text);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.wc .nl-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); }
.wc .nl-input::placeholder { color: rgba(160, 170, 184, 0.45); }
.wc .nl-success { margin-top: var(--sp-3); color: var(--gold); font-weight: 600; font-size: var(--fs-sm); }
.wc .nl-note { margin-top: var(--sp-3); font-size: var(--fs-xs); }
.wc .nl-note a { color: var(--text-muted); border-bottom: 1px solid var(--border); }
.wc .nl-note a:hover { color: var(--accent); }
.wc .nl-media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
.wc .nl-media img { width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }

/* ---- FAQ ----------------------------------------------------------------- */
.wc .faq-list { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 52rem; }
.wc .faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.wc .faq-q {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  width: 100%; padding: var(--sp-4) var(--sp-5);
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--fs-base); font-weight: 600; color: var(--text);
}
.wc .faq-q:hover { background: rgba(255, 255, 255, 0.02); }
.wc .faq-toggle { flex-shrink: 0; color: var(--text-muted); transition: transform var(--t-base); }
.wc .faq-item.open .faq-toggle { transform: rotate(180deg); }
.wc .faq-a { display: none; padding: 0 var(--sp-5) var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.wc .faq-item.open .faq-a { display: block; padding-top: var(--sp-3); border-top: 1px solid var(--border); }

/* ---- contact ------------------------------------------------------------- */
.wc .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-8); align-items: start; }
.wc .contact-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.wc .contact-list li { display: flex; flex-direction: column; gap: 2px; }
.wc .ci-label { font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.wc .contact-list a { color: var(--accent); font-weight: 600; }
.wc .contact-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wc .contact-media { margin-top: var(--sp-6); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
.wc .contact-media img { width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
.wc .contact-card { padding: var(--sp-6); }
.wc .contact-card .card-body { margin-bottom: var(--sp-5); }
.wc .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.wc .req { color: var(--accent); }
.wc .form-submit { width: 100%; margin-top: var(--sp-2); }
.wc .form-success {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--ok); border-radius: var(--r-md);
  background: rgba(61, 220, 151, 0.08); color: var(--ok);
  font-size: var(--fs-sm); font-weight: 600;
}

/* ---- home responsive ----------------------------------------------------- */
@media (max-width: 1024px) {
  .wc .home-hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .wc .home-hero h1 { max-width: none; }
  .wc .feature, .wc .nl-grid, .wc .contact-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .wc .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .wc .lanes { grid-template-columns: 1fr; }
  .wc .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wc .home-hero { padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-7); }
  .wc .steps { grid-template-columns: 1fr; }
  .wc .field-row { grid-template-columns: 1fr; }
  .wc .ui-stats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
}

/* ==========================================================================
   SERVICE PAGE COMPONENTS  (D4)

   The 12 service pages already shared one class vocabulary across two
   divergent stylesheets: six in Inter, six in system fonts, each with its own
   11-17KB inline block. Rather than rewrite twelve page bodies, this defines
   that vocabulary once. The markup on every service page is untouched; only
   the rules behind it change. That keeps each page's copy, schema, form and
   SEO exactly as they were, which is what makes converting all twelve in one
   pass safe.
   ========================================================================== */

/* ---- hero + breadcrumb --------------------------------------------------- */
.wc .service-hero {
  padding-block: calc(var(--nav-h) + var(--sp-7)) var(--sp-8);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(56rem 26rem at 76% -8%, rgba(0, 200, 255, 0.09), transparent 70%),
    var(--bg-deep);
}
.wc .hero-tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--accent-line); background: rgba(0, 200, 255, 0.07);
  color: var(--accent); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.wc .hero-h1 {
  font-size: var(--fs-3xl); font-weight: 800; line-height: var(--lh-tight);
  letter-spacing: -0.02em; color: var(--text-strong);
  margin-bottom: var(--sp-4); text-wrap: balance; max-width: 20ch;
}
.wc .hero-sub { font-size: var(--fs-md); color: var(--text-muted); max-width: 58ch; margin-bottom: var(--sp-6); }
.wc .hero-ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.wc .breadcrumb { padding-top: var(--sp-4); }

/* ---- stat bar ------------------------------------------------------------ */
.wc .stat-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-8);
  padding: var(--sp-6); margin-top: var(--sp-7);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.wc .stat-item { display: flex; flex-direction: column; gap: var(--sp-1); }
.wc .stat-number { font-size: var(--fs-xl); font-weight: 800; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.wc .stat-label { font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; }

/* ---- capability cards ---------------------------------------------------- */
.wc .cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.wc .cap-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.wc .cap-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-lift); }
.wc .cap-card-icon {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-md); margin-bottom: var(--sp-4);
  background: var(--accent-glow); border: 1px solid var(--border); color: var(--accent);
}
.wc .cap-card-title { font-size: var(--fs-base); font-weight: 700; color: var(--text-strong); margin-bottom: var(--sp-2); }
.wc .cap-card p { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- two-column detail + scope ------------------------------------------- */
.wc .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }
.wc .svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.wc .scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.wc .scope-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); }
.wc .scope-card.in { border-left: 3px solid var(--ok); }
.wc .scope-card.out { border-left: 3px solid var(--text-faint); }
.wc .scope-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.wc .scope-title { font-size: var(--fs-base); font-weight: 700; color: var(--text-strong); }
.wc .scope-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.wc .scope-list li { font-size: var(--fs-sm); color: var(--text-muted); padding-left: var(--sp-5); position: relative; }
.wc .scope-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 1px; background: var(--border-hard); }
.wc .scope-note { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- checklists ---------------------------------------------------------- */
.wc .checklist { display: flex; flex-direction: column; gap: var(--sp-3); }
.wc .checklist li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--fs-sm); color: var(--text-secondary, #c3ccda); line-height: var(--lh-snug);
}
.wc .checklist li svg { flex-shrink: 0; margin-top: 0.15em; color: var(--accent); }

/* ---- "who we serve" tiles ------------------------------------------------ */
.wc .serve-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sp-4); margin-top: var(--sp-7); }
.wc .serve-item {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  transition: border-color var(--t-base);
}
.wc .serve-item:hover { border-color: var(--accent-line); }
.wc .serve-icon {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  border-radius: var(--r-md); background: rgba(0, 200, 255, 0.10);
  border: 1px solid rgba(0, 200, 255, 0.20); color: var(--accent);
}
.wc .serve-text { font-size: var(--fs-sm); color: var(--text-muted); }
.wc .serve-text b, .wc .serve-text strong { display: block; color: var(--text-strong); font-weight: 700; margin-bottom: 2px; }

/* ---- pricing ------------------------------------------------------------- */
.wc .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--sp-5); margin-top: var(--sp-7); }
.wc .price-card {
  position: relative; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6);
}
.wc .price-card.featured { border-color: rgba(30, 144, 255, 0.45); box-shadow: 0 0 32px rgba(30, 144, 255, 0.09); }
.wc .price-type { color: var(--accent); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: var(--sp-2); }
.wc .price-title { font-size: var(--fs-lg); font-weight: 800; color: var(--text-strong); margin-bottom: var(--sp-4); }
.wc .price-amount { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.wc .price-number { font-size: var(--fs-2xl); font-weight: 900; color: var(--text-strong); line-height: 1; font-variant-numeric: tabular-nums; }
.wc .price-unit, .wc .price-from { color: var(--text-muted); font-size: var(--fs-sm); }
.wc .price-divider { border: 0; border-top: 1px solid var(--border); margin-block: var(--sp-5); }
.wc .price-items { display: flex; flex-direction: column; gap: var(--sp-3); }
.wc .price-items li { font-size: var(--fs-sm); color: var(--text-secondary, #c3ccda); display: flex; gap: var(--sp-3); align-items: flex-start; }
.wc .price-note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; }

/* ---- CTA band ------------------------------------------------------------ */
.wc .cta-band {
  padding: var(--sp-8) var(--sp-7); text-align: center; border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(0, 200, 255, 0.07), rgba(30, 144, 255, 0.07));
  border: 1px solid var(--accent-line);
}
.wc .cta-band .section-sub { margin-inline: auto; }
.wc .cta-pair { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-6); }
.wc .cta-note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); }

/* ---- inline links -------------------------------------------------------- */
.wc .text-link, .wc .inline-link, .wc .content-link, .wc .body-link, .wc .copy-link {
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.wc .text-link:hover, .wc .inline-link:hover, .wc .content-link:hover,
.wc .body-link:hover, .wc .copy-link:hover { text-decoration-thickness: 2px; }

.wc .review-callout {
  background: var(--bg-card); border: 1px solid var(--accent-line);
  border-left-width: 3px; border-radius: var(--r-md);
  padding: var(--sp-5); margin-block: var(--sp-5);
}
.wc .review-callout-title { font-weight: 700; color: var(--text-strong); margin-bottom: var(--sp-2); }

/* ---- service responsive -------------------------------------------------- */
@media (max-width: 1024px) {
  .wc .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc .detail-grid, .wc .scope-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 640px) {
  .wc .cards-grid, .wc .svc-row { grid-template-columns: 1fr; }
  .wc .stat-bar { gap: var(--sp-5); padding: var(--sp-5); }
  .wc .cta-band { padding: var(--sp-7) var(--sp-5); }
}

/* ==========================================================================
   CATALOG PAGE  (D4)

   /catalog/ ran a second visual identity: cream ground #FBFAF6, Georgia
   headings, its own navy #12263A and blue #3F8FE8, system fonts and a
   separate header. Same markup, dark palette. Scoped under .catalog because
   its short class names (.card, .grid, .price, .meta) mean different things
   from the base components and would otherwise collide.
   ========================================================================== */

.wc .catalog .wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); }

.wc .catalog .hero {
  padding-block: calc(var(--nav-h) + var(--sp-7)) var(--sp-8);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(56rem 26rem at 78% -8%, rgba(0, 200, 255, 0.10), transparent 70%),
    var(--bg-deep);
}
.wc .catalog .hero h1 { font-size: var(--fs-3xl); font-weight: 800; color: var(--text-strong); letter-spacing: -0.02em; margin-bottom: var(--sp-3); }
.wc .catalog .tag { font-size: var(--fs-md); color: var(--text-muted); max-width: 62ch; margin-bottom: var(--sp-5); }
.wc .catalog .intro { color: var(--text-muted); max-width: 70ch; font-size: var(--fs-sm); }

.wc .catalog .stats { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-6); }
.wc .catalog .stat { border-left: 2px solid var(--accent); padding-left: var(--sp-4); }
.wc .catalog .stat b { display: block; font-size: var(--fs-xl); font-weight: 800; color: var(--text-strong); line-height: 1; font-variant-numeric: tabular-nums; }
.wc .catalog .stat span { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }

.wc .catalog .props { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.wc .catalog .prop {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: var(--fs-xs); font-weight: 600; color: var(--text);
}

.wc .catalog section.cat { padding-block: var(--sp-8) 0; }
.wc .catalog .cat-head { border-bottom: 1px solid var(--border); padding-bottom: var(--sp-3); margin-bottom: var(--sp-6); }
.wc .catalog .cat-head h2 { font-size: var(--fs-xl); color: var(--text-strong); font-weight: 800; letter-spacing: -0.015em; margin-bottom: var(--sp-1); }
.wc .catalog .cat-head p { color: var(--text-muted); font-size: var(--fs-sm); max-width: 74ch; }

.wc .catalog .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-4); }

.wc .catalog .card {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.wc .catalog .card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.wc .catalog .ct { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.wc .catalog .ct h3 { font-size: var(--fs-base); font-weight: 700; color: var(--text-strong); line-height: var(--lh-snug); }

/* Level badges. One hue each, all legible on the dark card. */
.wc .catalog .lvl {
  flex: none; white-space: nowrap;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm);
  border: 1px solid currentColor;
}
.wc .catalog .lf { color: #5fc7ff; background: rgba(95, 199, 255, 0.10); }
.wc .catalog .la { color: var(--gold); background: var(--gold-dim); }
.wc .catalog .lw { color: #8fb3d9; background: rgba(143, 179, 217, 0.10); }
.wc .catalog .ls { color: #9aa8bd; background: rgba(154, 168, 189, 0.10); }
.wc .catalog .li { color: #b39be8; background: rgba(179, 155, 232, 0.12); }

.wc .catalog .meta { font-size: var(--fs-xs); color: var(--accent); font-weight: 700; margin-block: var(--sp-3) var(--sp-2); }
.wc .catalog .price { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3); font-variant-numeric: tabular-nums; }
.wc .catalog .pl { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-right: var(--sp-1); }
.wc .catalog .pv { color: var(--ok); font-weight: 700; }
.wc .catalog .pi { color: var(--text-strong); font-weight: 700; }
.wc .catalog .psep { color: var(--text-faint); margin-inline: var(--sp-1); }

.wc .catalog .blurb { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3); }

.wc .catalog .topics { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.wc .catalog .topics li {
  font-size: var(--fs-2xs); color: var(--text-muted);
  padding: 2px var(--sp-2); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft);
}

/* Who the course is for. Already in the markup; now it reads as the card's
   closing line rather than fine print. */
.wc .catalog .aud {
  margin-top: auto; padding-top: var(--sp-3);
  border-top: 1px dashed var(--border);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.wc .catalog .aud b { color: var(--text); font-weight: 700; }

/* Catalog lead-magnet band. This form posts to submit-lead, so it is one of
   the few on the site that actually reaches Supabase. Styling only. */
.wc .catalog .lm-band {
  padding-block: var(--sp-8);
  border-top: 1px solid var(--border);
  background: linear-gradient(160deg, var(--bg-card), var(--bg-deep));
}
.wc .catalog .lm-title { font-size: var(--fs-xl); font-weight: 800; color: var(--text-strong); margin-bottom: var(--sp-2); }
.wc .catalog .lm-sub { color: var(--text-muted); max-width: 52ch; margin: 0 auto var(--sp-5); font-size: var(--fs-sm); }
.wc .catalog .lm-form { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; max-width: 36rem; margin-inline: auto; }
.wc .catalog .lm-input {
  flex: 1 1 11rem; min-width: 9rem;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--border-hard); background: var(--bg-deep);
  color: var(--text); font-size: var(--fs-sm);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.wc .catalog .lm-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.wc .catalog .lm-input::placeholder { color: rgba(160, 170, 184, 0.45); }
.wc .catalog .lm-error { width: 100%; color: var(--bad); font-size: var(--fs-xs); margin-top: var(--sp-1); }
.wc .catalog .lm-ready { color: var(--text-strong); margin-bottom: var(--sp-3); }
.wc .catalog .lm-note { color: var(--text-faint); font-size: var(--fs-xs); margin-top: var(--sp-4); }
.wc .catalog .logobox-46 { width: 46px; height: 46px; }

@media (max-width: 560px) {
  .wc .catalog .grid { grid-template-columns: 1fr; }
  .wc .catalog .stats { gap: var(--sp-4); }
}

/* ==========================================================================
   COURSE PAGES  (post-launch pass)

   Seven pages: the /courses/ index, five course detail pages and the COI-CRP
   legal page, carrying 455KB of inline CSS between the 44 unconverted pages
   and the largest single block of it. Same method as the service pages and the
   catalog: define the vocabulary they already use, then delete their inline
   CSS. No page body is rewritten, so every enrol button, price gate and
   checkout handler stays exactly where it was.

   Scoped under .course because the generic names here (.page, .section, .hero,
   .meta, .card-actions) mean different things elsewhere in this sheet.
   ========================================================================== */

.wc .course .page { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); }
.wc .course .section { padding-block: var(--sp-9); }
.wc .course .section-inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); }
.wc .course .section-block { margin-bottom: var(--sp-7); }
.wc .course .bg-mid { background: var(--bg-mid, #090c1f); }

/* ---- hero ---------------------------------------------------------------- */
.wc .course .hero {
  padding-block: calc(var(--nav-h) + var(--sp-7)) var(--sp-8);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(56rem 26rem at 76% -8%, rgba(0, 200, 255, 0.09), transparent 70%),
    var(--bg-deep);
}
.wc .course .hero-layout {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-8); align-items: start;
}
.wc .course .hero-inner, .wc .course .aa-hero-inner {
  width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad);
}
.wc .course .hero-breadcrumb { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-4); }
.wc .course .hero-breadcrumb a { color: var(--text-muted); }
.wc .course .hero-breadcrumb a:hover { color: var(--accent); }
.wc .course .hero-badge, .wc .course .hero-label {
  display: inline-block; margin-bottom: var(--sp-4);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: rgba(0, 200, 255, 0.07); border: 1px solid var(--accent-line); color: var(--accent);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.wc .course .hero h1 { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); margin-bottom: var(--sp-4); text-wrap: balance; }
.wc .course .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.wc .course .hero-specs { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-5); }
.wc .course .hero-cred {
  display: inline-flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md);
  background: var(--gold-dim); border: 1px solid var(--border-gold, rgba(212, 168, 67, 0.22)); color: var(--gold);
  font-size: var(--fs-sm); font-weight: 600;
}
.wc .course .cred-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.wc .course .cred-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: rgba(0, 200, 255, 0.07); border: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-secondary, #c3ccda);
}

/* ---- price card + enrol -------------------------------------------------
   The enrol button is the purchase path. Geometry only; every id, data
   attribute and handler on it is untouched. */
.wc .course .pc-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); }
.wc .course .pc-price { font-size: var(--fs-2xl); font-weight: 900; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.wc .course .pc-unit, .wc .course .pc-note { font-size: var(--fs-xs); color: var(--text-muted); }
.wc .course .pc-note { text-align: center; }
.wc .course .pc-details { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); font-size: var(--fs-sm); }
.wc .course .pc-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-soft); }
.wc .course .pc-label { color: var(--text-muted); }
.wc .course .pc-val { font-weight: 600; color: var(--text-secondary, #c3ccda); }
.wc .course .pc-instruct { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-3); }
.wc .course .enroll-btn {
  display: block; width: 100%; text-align: center;
  padding: var(--sp-4); border: 0; border-radius: var(--r-md);
  background: var(--accent); color: var(--bg-deep);
  font-weight: 800; font-size: var(--fs-base); cursor: pointer; text-decoration: none;
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.wc .course .enroll-btn:hover { box-shadow: 0 0 28px var(--accent-glow); transform: translateY(-1px); }
.wc .course .pc-alt {
  display: block; text-align: center; margin-top: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-md);
  background: transparent; border: 1px solid var(--accent-line); color: var(--accent);
  font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
}
.wc .course .pc-alt:hover { background: rgba(0, 200, 255, 0.06); }
.wc .course .already-enrolled {
  display: none; margin-bottom: var(--sp-3); text-align: center;
  padding: var(--sp-4); border-radius: var(--r-md);
  background: rgba(61, 220, 151, 0.08); border: 1px solid rgba(61, 220, 151, 0.28);
  color: var(--ok); font-size: var(--fs-sm);
}
.wc .course .enroll-msg { display: none; margin-bottom: var(--sp-3); text-align: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); }

/* ---- outcomes, modules, audience ----------------------------------------- */
.wc .course .outcomes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
.wc .course .outcome-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: rgba(0, 200, 255, 0.04); border: 1px solid var(--border); }
.wc .course .outcome-check { color: var(--accent); font-weight: 800; flex-shrink: 0; }
.wc .course .outcome-text { font-size: var(--fs-sm); color: var(--text-secondary, #c3ccda); }

.wc .course .module-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-7); }
.wc .course .module-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.wc .course .module-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); cursor: pointer; user-select: none; }
.wc .course .module-header:hover { background: rgba(255, 255, 255, 0.02); }
.wc .course .module-num { flex-shrink: 0; padding: 2px var(--sp-3); border-radius: var(--r-sm); background: rgba(0, 200, 255, 0.10); border: 1px solid var(--border); color: var(--accent); font-size: var(--fs-2xs); font-weight: 700; }
.wc .course .module-title-text { flex: 1; font-size: var(--fs-base); font-weight: 700; color: var(--text-strong); }
.wc .course .module-toggle { flex-shrink: 0; color: var(--text-muted); transition: transform var(--t-base); }
.wc .course .module-item.open .module-toggle { transform: rotate(180deg); }
.wc .course .module-body { display: none; padding: 0 var(--sp-5) var(--sp-4); border-top: 1px solid var(--border); }
.wc .course .module-item.open .module-body { display: block; }
.wc .course .lesson-list { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); }
.wc .course .lesson-list li { font-size: var(--fs-sm); color: var(--text-muted); }

.wc .course .audience-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
.wc .course .audience-chip { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); text-align: center; }
.wc .course .audience-icon { font-size: 1.4rem; margin-bottom: var(--sp-2); }
.wc .course .audience-name { font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); }

/* ---- course meta, seats, pillars ----------------------------------------- */
.wc .course .course-meta-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-5); }
.wc .course .cm-label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); }
.wc .course .cm-val { font-size: var(--fs-base); font-weight: 700; color: var(--text-strong); }
.wc .course .seat-stack { display: flex; flex-direction: column; margin-top: var(--sp-5); }
.wc .course .seat-anchor {
  background: var(--gold-dim); border: 1px solid rgba(240, 180, 41, 0.35);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-5);
  font-size: var(--fs-sm); color: var(--text-secondary, #c3ccda);
}
.wc .course .seat-item { display: flex; gap: var(--sp-4); padding-block: var(--sp-4); border-bottom: 1px solid var(--border-soft); }
.wc .course .seat-num { flex: 0 0 2.15rem; height: 2.15rem; display: grid; place-items: center; border-radius: 50%; background: rgba(240, 180, 41, 0.12); border: 1px solid rgba(240, 180, 41, 0.4); color: var(--warn); font-weight: 800; font-size: var(--fs-sm); }
.wc .course .seat-body { font-size: var(--fs-sm); color: var(--text-muted); }
.wc .course .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp-5); margin-top: var(--sp-6); }
.wc .course .pillar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); }
.wc .course .pillar-icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--r-md); background: var(--accent-glow); border: 1px solid var(--border); color: var(--accent); margin-bottom: var(--sp-3); }
.wc .course .pillar-title { font-size: var(--fs-base); font-weight: 700; color: var(--text-strong); margin-bottom: var(--sp-2); }
.wc .course .pillar-desc { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- instructor, certificate, CTA ---------------------------------------- */
.wc .course .instructor-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6); align-items: start; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--sp-7); margin-top: var(--sp-7); }
.wc .course .instructor-avatar { width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid var(--accent); }
.wc .course .instructor-name { font-size: var(--fs-lg); font-weight: 800; color: var(--text-strong); }
.wc .course .instructor-title { font-size: var(--fs-sm); color: var(--accent); margin-bottom: var(--sp-3); }
.wc .course .instructor-bio { font-size: var(--fs-sm); color: var(--text-muted); }
.wc .course .cert-card { background: linear-gradient(135deg, var(--gold-dim), rgba(0, 200, 255, 0.04)); border: 1px solid var(--border-gold, rgba(212, 168, 67, 0.22)); border-radius: var(--r-xl); padding: var(--sp-7); margin-top: var(--sp-7); text-align: center; }
.wc .course .cert-icon { font-size: 2.6rem; margin-bottom: var(--sp-3); }
.wc .course .cert-title { font-size: var(--fs-lg); font-weight: 800; color: var(--text-strong); margin-bottom: var(--sp-2); }
.wc .course .cert-desc { font-size: var(--fs-sm); color: var(--text-muted); max-width: 60ch; margin-inline: auto; }
.wc .course .cta-section { background: linear-gradient(135deg, var(--bg-card), var(--bg-deep)); border-top: 1px solid var(--border); padding-block: var(--sp-9); text-align: center; }
.wc .course .cta-inner { max-width: 44rem; margin-inline: auto; padding-inline: var(--container-pad); }
.wc .course .cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); }
.wc .course .gov-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); margin-top: var(--sp-6); }
.wc .course .gov-title { font-size: var(--fs-base); font-weight: 700; color: var(--text-strong); margin-bottom: var(--sp-2); }
.wc .course .gov-desc { font-size: var(--fs-sm); color: var(--text-muted); }
.wc .course .gov-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.wc .course .toc { margin-top: var(--sp-5); }
.wc .course .toc-title { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); margin-bottom: var(--sp-3); }

/* ---- /courses/ index cards ----------------------------------------------- */
.wc .course .course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: var(--sp-5); margin-top: var(--sp-7); }
.wc .course .course-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); }
.wc .course .course-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.wc .course .course-badge { align-self: flex-start; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: rgba(0, 200, 255, 0.08); border: 1px solid var(--accent-line); color: var(--accent); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.wc .course .course-title { font-size: var(--fs-lg); font-weight: 800; color: var(--text-strong); margin-bottom: var(--sp-2); }
.wc .course .course-desc { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }
.wc .course .course-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.wc .course .course-price { font-size: var(--fs-xl); font-weight: 900; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.wc .course .course-price-unit { font-size: var(--fs-xs); color: var(--text-muted); }
.wc .course .course-meta { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-3); }
.wc .course .course-modules { font-size: var(--fs-xs); color: var(--text-faint); padding-top: var(--sp-3); border-top: 1px solid var(--border-soft); margin-bottom: var(--sp-4); }
.wc .course .card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: auto; }
.wc .course .card-enroll { flex: 1 1 auto; text-align: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--accent); color: var(--bg-deep); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; }
.wc .course .card-enroll:hover { box-shadow: 0 0 22px var(--accent-glow); }
.wc .course .card-group { flex: 1 1 auto; text-align: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: transparent; border: 1px solid var(--border-hard); color: var(--text); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.wc .course .card-group:hover { border-color: var(--accent); color: var(--accent); }

/* ---- All-Access page ----------------------------------------------------- */
.wc .course .aa-price-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3); margin-block: var(--sp-4); }
.wc .course .aa-price-now { font-size: var(--fs-2xl); font-weight: 900; color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; }
.wc .course .aa-price-was { font-size: var(--fs-md); color: var(--text-faint); text-decoration: line-through; }
.wc .course .aa-save { padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--gold-dim); border: 1px solid var(--border-gold, rgba(212, 168, 67, 0.22)); color: var(--gold); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.wc .course .aa-stack { margin-top: var(--sp-6); }
.wc .course .aa-stack-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: baseline; padding-block: var(--sp-3); border-bottom: 1px solid var(--border-soft); }
.wc .course .aa-stack-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.wc .course .aa-stack-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.wc .course .aa-stack-price { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wc .course .aa-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding-top: var(--sp-4); }
.wc .course .aa-total-label { font-size: var(--fs-sm); color: var(--text-muted); }
.wc .course .aa-total-val { font-size: var(--fs-lg); font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.wc .course .aa-incl { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.wc .course .aa-incl-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.wc .course .aa-incl-num { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--gold-dim); border: 1px solid var(--border-gold, rgba(212, 168, 67, 0.22)); color: var(--gold); font-weight: 800; font-size: var(--fs-sm); }
.wc .course .aa-incl-title { font-size: var(--fs-base); font-weight: 700; color: var(--text-strong); margin-bottom: var(--sp-1); }
.wc .course .aa-incl-desc { font-size: var(--fs-sm); color: var(--text-muted); }
.wc .course .aa-note { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); margin-top: var(--sp-6); }
.wc .course .aa-note-title { font-weight: 700; color: var(--text-strong); margin-bottom: var(--sp-2); }
.wc .course .aa-faq { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.wc .course .aa-faq-a { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-2); }
.wc .course .aa-compliance { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-6); }
.wc .course .aa-video-wrap { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); margin-top: var(--sp-5); }
.wc .course .aa-play { position: absolute; inset: 0; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--text-strong); }
.wc .course .aa-play-ring { width: 4rem; height: 4rem; border-radius: 50%; border: 2px solid var(--accent); display: grid; place-items: center; background: rgba(7, 9, 26, 0.6); }
.wc .course .aa-play-label { font-size: var(--fs-xs); margin-top: var(--sp-2); }

/* ---- sticky mobile purchase bar -----------------------------------------
   Five course pages carry a fixed bottom bar with the enrol button. Its CSS
   went out with the inline block on the first pass, which left an unstyled
   purchase control on phones. Restored from the pre-conversion backup. */
.wc .course .mobile-cta { display: none; }

@media (max-width: 800px) {
  .wc .course .mobile-cta {
    display: flex; gap: var(--sp-3);
    position: fixed; inset: auto 0 0 0; z-index: 99990;
    padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: rgba(7, 9, 26, 0.97);
    border-top: 1px solid var(--accent-line);
    backdrop-filter: blur(12px);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
  }
  .wc .course .mobile-cta button,
  .wc .course .mobile-cta a {
    flex: 1; min-height: 48px;           /* 48px: a real touch target */
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid transparent; border-radius: var(--r-md);
    font-size: var(--fs-sm); font-weight: 800; line-height: 1.2;
    text-align: center; text-decoration: none; cursor: pointer;
  }
  .wc .course .mobile-cta .mc-primary { flex: 1.35; background: var(--accent); color: var(--bg-deep); }
  .wc .course .mobile-cta .mc-secondary { background: transparent; color: var(--text-secondary, #c3ccda); border-color: var(--border-hard); }
  /* clear the bar so it never covers the end of the page */
  .wc .course body, .wc body.course { padding-bottom: 76px; }
}

/* ---- course responsive --------------------------------------------------- */
@media (max-width: 1024px) {
  .wc .course .hero-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .wc .course .instructor-card { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .wc .course .instructor-avatar { width: 6rem; height: 6rem; }
}
@media (max-width: 560px) {
  .wc .course .course-grid, .wc .course .outcomes-grid, .wc .course .audience-grid { grid-template-columns: 1fr; }
  .wc .course .section { padding-block: var(--sp-7); }
  .wc .course .aa-stack-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- utilities ----------------------------------------------------------- */
.wc .visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.wc .center     { text-align: center; }
.wc .muted      { color: var(--text-muted); }
.wc .faint      { color: var(--text-faint); }
.wc .lead       { font-size: var(--fs-md); color: var(--text-muted); line-height: var(--lh-body); }
.wc .mt-0 { margin-top: 0; }
.wc .mb-0 { margin-bottom: 0; }

/* ---- responsive ----------------------------------------------------------
   Two breakpoints, not five. 900px is the tablet/stack point the site already
   uses; 560px is the phone point. Anything needing a third breakpoint is a
   component that wants rethinking, not another media query. */
/* Nav has its own breakpoints, set by how much the link row actually needs
   rather than by the layout grid. Measured 15 Sep: brand 204px + five items +
   Student Login + phone + CTA = 1130px, so the full row only fits above about
   1180px. Between 1025 and 1240 the phone drops out (it is still in the footer,
   on /contact/ and one tap away in the mobile menu) and the links tighten.
   At 1024 and below the whole row becomes the hamburger menu. */
@media (max-width: 1240px) {
  .wc .nav-menu a.nav-phone { display: none; }
  .wc .nav-menu a:not(.nav-cta) { padding-inline: var(--sp-2); }
}
@media (max-width: 1024px) {
  .wc .hamburger { display: flex; }
  .wc .nav-menu {
    display: none; position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4) var(--sp-5);
    /* Solid, not rgba. The menu sits inside nav.site, which carries
       backdrop-filter; a translucent child composites against that blurred
       layer and the page reads straight through it. Opaque fixes it outright
       and is what an overlay menu wants anyway. */
    background: var(--bg-deep); border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    overscroll-behavior: contain;
    z-index: var(--z-menu);
  }
  .wc .nav-menu.open { display: flex; }
  /* the phone comes back inside the opened menu, where there is room */
  .wc .nav-menu a { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); white-space: normal; }
  .wc .nav-menu a.nav-phone { display: flex; }
  .wc .nav-menu a.nav-cta { text-align: center; justify-content: center; margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
}

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

@media (max-width: 560px) {
  .wc .grid-2, .wc .grid-3, .wc .grid-4, .wc .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .wc section { padding-block: var(--sp-7); }
  .wc .container { padding-inline: var(--sp-4); }
  .wc .card { padding: var(--sp-5); }
}

/* Print: the site gets printed by attorneys more than anyone expects. */
@media print {
  .wc nav.site, .wc header.site-nav, .wc header.site, .wc .hamburger,
  .wc footer.site, .wc footer, .wc .skip-nav { display: none !important; }
  .wc body { background: #fff; color: #000; }
  .wc a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #444; }
}
