:root{
    --ink:#0A0A0A;
    --ink-rgb:10,10,10;
    --ink-2:#141414;
    --surface:#FEFEFE;
    --surface-alt:#F7F6F4;
    --surface-muted:#EEEEEE;
    --border:#E2E2E2;
    --text:#0A0A0A;
    --text-muted:#6B6B6B;
    --red:#2251FF;
    --red-rgb:34,81,255;
    --red-hover:#0A2ECC;
    --on-dark:#FFFFFF;
    --on-dark-muted:rgba(255,255,255,.82);
    --on-dark-faint:rgba(255,255,255,.64);
    --blue-tint-on-dark:#8FB1FF;
    --focus-ring:#2251FF;
    --section-x:clamp(20px, 5vw, 56px);
    --section-y:clamp(56px, 9vw, 96px);
    --radius:2px;
    --font-body:'DM Sans', Helvetica Neue, Arial, sans-serif;
    --font-serif:'Newsreader', Georgia, serif;
    --ease-out-quart:cubic-bezier(.25,1,.5,1);
    --ease-out-expo:cubic-bezier(.16,1,.3,1);
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
  body{
    margin:0;background:var(--surface);color:var(--text);font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;line-height:1.5;
  }
  img{max-width:100%;display:block}
  a{color:var(--red);text-decoration:none}
  a:hover{color:var(--red-hover)}
  ::selection{background:var(--red);color:#fff}
  button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
  input{font-family:inherit;font-size:inherit}
  h1,h2,h3{margin:0;font-weight:500}
  p{margin:0}
  ul{margin:0;padding:0;list-style:none}

  .visually-hidden{
    position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .skip-link{
    position:absolute;top:-100%;left:12px;z-index:200;background:var(--red);color:#fff;
    padding:12px 20px;font-size:14px;font-weight:700;border-radius:var(--radius);transition:top .15s var(--ease-out-quart);
  }
  .skip-link:focus{top:12px}
  :focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
  .on-dark :focus-visible{outline-color:#fff}

  .reveal-armed [data-reveal]{
    opacity:0;transform:translateY(46px) scale(.97);
    transition:opacity 1.55s var(--ease-out-expo), transform 1.55s var(--ease-out-expo);
    transition-delay:var(--reveal-delay,0ms);
  }
  .reveal-armed [data-reveal].is-visible{opacity:1;transform:none}

  /* ---------- header ---------- */
  .site-header{
    position:sticky;top:0;z-index:60;background:var(--ink);color:#fff;
    transform:translateY(calc(var(--hide, 0) * -100%));opacity:calc(1 - var(--hide, 0));
    transition:transform .12s linear, opacity .12s linear;
  }
  .site-header.is-gone{pointer-events:none}
  @media (prefers-reduced-motion:reduce){ .site-header{transition:none} }

  .main-nav{display:flex;justify-content:space-between;align-items:center;padding:0 var(--section-x);min-height:72px}
  .main-nav__brand{display:flex;align-items:center;gap:36px}
  .logo-img{width:150px;height:auto;flex:none}

  .menu-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-10px;flex:none}
  .menu-toggle .bar{display:block;width:19px;height:1.5px;background:#fff;margin:4px auto}

  .nav-links{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
  .nav-item{position:relative}
  /* Buttons don't inherit .nav-links' weight/transform/tracking from their ancestor <ul> the way
     <a> does, so a plain nav-item link (Calendar) rendered bold+uppercase next to the dropdown
     triggers, which stay their unstyled 400/normal-case. Force both to the buttons' own look. */
  .nav-item > button, .nav-item > a{display:flex;align-items:center;gap:5px;padding:24px 2px;min-height:44px;color:#fff;font-weight:400;text-transform:none;letter-spacing:normal}
  .nav-item > button:hover,.nav-item > button:focus-visible,.nav-item > a:hover,.nav-item > a:focus-visible{color:#D4A849}

  /* Hardcoded gold (not var(--red), which is still literal blue in this
     shared stylesheet) to match the homepage's already-rebranded nav. */
  .nav-drop{
    position:absolute;top:100%;left:-18px;width:260px;background:#111;color:#fff;padding:18px 20px;
    display:flex;flex-direction:column;gap:12px;border-bottom:4px solid #D4A849;border-radius:0 0 16px 16px;
    text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:400;
  }
  .nav-drop[hidden]{display:none}
  /* invisible bridge above the panel so hovering down from the trigger never leaves the menu */
  .nav-drop::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
  .nav-drop a{
    min-height:24px;display:flex;align-items:center;
    background-image:linear-gradient(to right,#D4A849 50%,#fff 50%);
    background-size:200% 100%;background-repeat:no-repeat;background-position:100% 0;
    background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    transition:background-position .4s var(--ease-out-quart);
  }
  .nav-drop a:hover,.nav-drop a:focus-visible{background-position:0 0}

  /* ---- mega dropdown (Our Programs): by level / by department, Bain-style ---- */
  .nav-drop--mega{
    width:min(600px,92vw);flex-direction:row;align-items:flex-start;gap:0;padding:24px 28px;
  }
  .nav-drop__col{display:flex;flex-direction:column;gap:12px;flex:none;width:150px}
  .nav-drop__col--departments{flex:none;width:auto;border-left:1px solid rgba(255,255,255,.15);padding-left:20px;margin-left:12px}
  .nav-drop__deptcols{display:flex;gap:24px}
  .nav-drop__deptcol{display:flex;flex-direction:column;gap:12px;flex:0 0 245px;width:245px}
  .nav-drop__deptcol a{white-space:nowrap}
  .nav-drop .nav-drop__heading{
    display:block;font-size:16px;font-weight:700;letter-spacing:.02em;text-transform:none;margin:0 0 10px;
    background-image:none;-webkit-text-fill-color:#D4A849;color:#D4A849;
  }
  .nav-drop__divider{height:1px;background:rgba(255,255,255,.15);margin:10px 0}
  .nav-drop--mega .nav-drop__viewall{
    font-weight:600;font-size:15px;
    background-image:linear-gradient(to right,#fff 50%,#D4A849 50%);
    background-size:200% 100%;background-repeat:no-repeat;background-position:100% 0;
    background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    transition:background-position .4s var(--ease-out-quart);
  }
  .nav-drop--mega .nav-drop__viewall:hover,.nav-drop--mega .nav-drop__viewall:focus-visible{background-position:0 0}
  @media (min-width:901px){
    /* left edge starts at the "X" in NEXOR (~44% across the 150px logotype), sized to content so department text never wraps */
    .nav-drop--mega{position:fixed;top:72px;left:calc(var(--section-x) + 66px);width:max-content;max-width:calc(100vw - 2 * var(--section-x) - 66px)}
  }
  @media (max-width:900px){
    .nav-drop--mega{flex-direction:column;width:auto;border-bottom:0;padding:0 0 14px}
    .nav-drop__col{width:auto}
    .nav-drop__col--departments{border-left:0;padding-left:0;margin-left:0;border-top:1px solid rgba(255,255,255,.15);padding-top:14px;margin-top:10px}
    .nav-drop__deptcol{width:auto;flex:none}
    .nav-drop__deptcol a{white-space:normal}
    .nav-drop__deptcols{flex-direction:column;gap:0}
    /* tappable rows, and the column stretches so the dividers run the full width */
    .nav-drop--mega{align-items:stretch}
    .nav-drop__col,.nav-drop__deptcol{gap:0}
    .nav-drop a{min-height:44px}
    .nav-drop .nav-drop__heading{margin:4px 0 0}
  }

  .nav-utility{display:flex;align-items:center;gap:16px}
  .icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:50%}
  .icon-btn:hover,.icon-btn:focus-visible{background:rgba(255,255,255,.12)}
  .icon-btn svg{width:18px;height:18px}
  .lang-btn{display:flex;align-items:center;gap:5px;min-height:44px;padding:0 4px;color:#fff;
    font-size:11.75px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
  .lang-btn:hover,.lang-btn:focus-visible{color:var(--blue-tint-on-dark)}
  .lang-btn .chev{font-size:8px}
  .lang-btn__short{display:none}
  .nav-cta{
    display:flex;align-items:center;min-height:40px;padding:0 22px;color:var(--ink);
    background:linear-gradient(135deg,#E0B84A,#B8860B);background-size:140% 140%;background-position:0% 0%;
    border-radius:var(--radius);font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    box-shadow:0 0 0 rgba(184,134,11,0);transform:translateY(0);
    transition:background-position .4s var(--ease-out-quart),box-shadow .4s var(--ease-out-quart),transform .4s var(--ease-out-quart) !important;
    flex:none;
  }
  .nav-cta:hover,.nav-cta:focus-visible{
    color:var(--ink);background-position:100% 100%;
    box-shadow:0 4px 16px rgba(184,134,11,.25);transform:translateY(-2px) !important;
  }
  .nav-cta:active{
    color:var(--ink);transform:translateY(1px) !important;
    box-shadow:0 4px 6px rgba(184,134,11,.25);
    transition:background-position .4s var(--ease-out-quart),box-shadow .1s ease-in,transform .1s ease-in;
  }
  .nav-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
  @media (max-width:520px){ .nav-cta{padding:0 16px;font-size:10.5px} .main-nav__brand{gap:10px} .logo-img{width:128px} }

  @media (max-width:900px){
    .menu-toggle{display:flex}
    .lang-btn__long{display:none}
    .lang-btn__short{display:inline}
    /* absolute, not fixed: the sticky header is transformed, so a fixed child would be sized to the 72px bar (zero height) */
    .nav-links{
      position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 72px);max-height:calc(100svh - 72px);
      background:var(--ink);flex-direction:column;align-items:stretch;
      padding:8px var(--section-x) 32px;overflow-y:auto;transform:translateY(-8px);opacity:0;pointer-events:none;
      transition:opacity .18s var(--ease-out-quart), transform .18s var(--ease-out-quart);
    }
    .nav-links[data-mobile-open="true"]{opacity:1;transform:none;pointer-events:auto}
    .nav-item{border-bottom:1px solid rgba(255,255,255,.14)}
    .nav-item > button{width:100%;justify-content:space-between}
    .nav-drop{position:static;width:auto;background:transparent;border-bottom:0;border-radius:0;padding:0 0 14px}
  }

  /* ---------- banner (hero): centered, McKinsey-style animation, blue accent, rotating topics ---------- */
  .banner--centered{
    position:relative;min-height:100vh;min-height:100svh;overflow:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    background:var(--ink);color:#fff;padding:96px var(--section-x);
  }
  .banner__fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;mix-blend-mode:screen;opacity:.6}
  .banner__slides{position:absolute;inset:0;z-index:0}
  .banner__bg-slide{
    position:absolute;inset:0;margin:0;opacity:0;
    transition:opacity 1.6s var(--ease-out-quart);
  }
  .banner__bg-slide.is-active{opacity:1}
  .banner__bg-slide.is-active .banner__bg-slide-inner{animation:kenburns 7.5s var(--ease-out-quart) forwards}
  .banner__bg-slide-inner{position:absolute;inset:0;background:radial-gradient(120% 90% at 78% 12%,rgba(34,81,255,.4) 0%,rgba(10,10,10,.32) 45%,#0A0A0A 78%)}
  @keyframes kenburns{from{transform:scale(1.0)}to{transform:scale(1.1)}}
  .banner__scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(10,10,10,.4),rgba(10,10,10,.68))}
  .hero-logo{position:relative;z-index:3;width:clamp(140px,16vw,200px);height:auto;margin-bottom:clamp(8px,1.2vw,14px)}
  .banner__sweep{
    position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
    transform:translateX(-130%);
  }
  .banner__sweep.is-sweeping{animation:sweep-move 1.1s var(--ease-out-expo)}
  @keyframes sweep-move{from{transform:translateX(-130%)}to{transform:translateX(130%)}}

  .banner__content-stack{position:relative;z-index:3;width:100%;max-width:1100px;min-height:clamp(320px,34vw,420px)}
  .banner__content{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    opacity:0;transition:opacity 1.2s var(--ease-out-quart);
  }
  .banner__content.is-active{opacity:1}
  .banner__content .eyebrow{color:#fff;opacity:.78}
  .banner__content h1,.banner__content h2{
    margin-top:22px;max-width:22ch;font-size:clamp(2rem,5.4vw,5.6rem);line-height:1.05;
    font-weight:500;letter-spacing:-.025em;text-wrap:balance;
  }
  .banner__content.is-active h1,
  .banner__content.is-active h2{animation:heading-pulse .7s var(--ease-out-expo)}
  @keyframes heading-pulse{0%{transform:scale(1.035)}100%{transform:scale(1)}}
  .banner__content p{width:100%;margin-top:32px;max-width:620px;font-family:var(--font-serif);
    font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.55;color:var(--on-dark-muted);
  }

  .hero__cue{
    position:relative;z-index:3;margin-top:44px;width:56px;height:56px;border:1.5px solid rgba(255,255,255,.55);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    animation:cue-bob 2.6s var(--ease-out-quart) infinite;
    transition:background .3s var(--ease-out-quart), border-color .3s var(--ease-out-quart);
  }
  .hero__cue.is-paused{animation-play-state:paused}
  .hero__cue svg{width:20px;height:20px;transition:transform .45s var(--ease-out-expo), opacity .28s ease}
  .hero__cue:hover,.hero__cue:focus-visible{background:rgba(255,255,255,.1);border-color:#fff}
  .hero__cue:hover svg,.hero__cue:focus-visible svg{transform:translateY(3px)}
  .hero__cue.is-launching{animation-play-state:paused;border-color:#fff}
  .hero__cue.is-launching svg{transform:translateY(30px);opacity:0}
  .hero__cue::after{
    content:"";position:absolute;inset:-1.5px;border-radius:50%;
    border:1.5px solid rgba(var(--red-rgb),.7);opacity:0;transform:scale(.7);
  }
  .hero__cue.is-launching::after{animation:cue-launch-ring .6s var(--ease-out-expo)}
  @keyframes cue-launch-ring{
    from{opacity:.85;transform:scale(.7)}
    to{opacity:0;transform:scale(1.95)}
  }
  @keyframes cue-bob{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(7px)}
  }
  @media (prefers-reduced-motion:reduce){
    .hero__cue{animation:none}
    .hero__cue.is-launching svg{transform:none;opacity:1}
    .hero__cue.is-launching::after{animation:none}
    .banner__bg-slide.is-active .banner__bg-slide-inner{animation:none}
  }

  /* ---------- generic section scaffolding ---------- */
  .section{padding:var(--section-y) var(--section-x) 0}
  .section--band{padding:var(--section-y) var(--section-x)}
  .eyebrow{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
  .eyebrow--red{color:#D4A849}
  .eyebrow--on-dark{color:var(--on-dark-faint)}
  h2.headline{font-size:clamp(1.9rem,4vw,2.65rem);line-height:1.13;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
  h2.headline--on-dark{color:#fff}
  .lede{font-family:var(--font-serif);font-size:clamp(1.05rem,1.8vw,1.15rem);line-height:1.6;color:#3d3d3d}

  /* Hardcoded gold (not var(--red), which is still literal blue in this
     shared stylesheet) so "See full program" matches the homepage's sweep. */
  .link-arrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
    border-bottom:1px solid rgba(10,10,10,.45);padding-bottom:5px;min-height:44px;
    background-image:linear-gradient(to right,#D4A849 50%,var(--text) 50%);
    background-size:200% 100%;background-repeat:no-repeat;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    transition:background-position .4s var(--ease-out-quart),border-color .3s var(--ease-out-quart);}
  .link-arrow:hover,.link-arrow:focus-visible{
    background-position:0 0;border-color:#D4A849;
    transition:background-position .4s var(--ease-out-quart),border-color .3s var(--ease-out-quart);
  }

  .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 34px;
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:var(--radius);
    transition:background .2s var(--ease-out-quart), transform .2s var(--ease-out-quart), color .2s var(--ease-out-quart), border-color .2s var(--ease-out-quart);}
  .btn:active{transform:scale(.97)}
  .btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
  /* Hardcoded gold (not var(--red)/var(--red-hover), still literal blue in
     this shared stylesheet) — btn--solid is used only within programs pages. */
  /* Same gradient-sweep + lift animation as .nav-cta ("Book a call") so
     "See full program" behaves identically. Hardcoded gold, not var(--red). */
  .btn--solid{
    background:linear-gradient(135deg,#E0B84A,#B8860B);background-size:140% 140%;background-position:0% 0%;
    color:var(--ink);box-shadow:0 0 0 rgba(184,134,11,0);transform:translateY(0);
    transition:background-position .4s var(--ease-out-quart),box-shadow .4s var(--ease-out-quart),transform .4s var(--ease-out-quart) !important;
  }
  .btn--solid:hover:not(:disabled),.btn--solid:focus-visible{
    color:var(--ink);background-position:100% 100%;
    box-shadow:0 4px 16px rgba(184,134,11,.25);transform:translateY(-2px) !important;
  }
  .btn--solid:active{
    color:var(--ink);transform:translateY(1px) !important;
    box-shadow:0 4px 6px rgba(184,134,11,.25);
    transition:background-position .4s var(--ease-out-quart),box-shadow .1s ease-in,transform .1s ease-in;
  }
  .btn--solid:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  /* Hardcoded gold (not var(--red), still literal blue in this shared
     stylesheet) so these outline buttons match the site's gold accent. */
  .btn--outline-red{border:1px solid #D4A849;color:#D4A849}
  .btn--outline-red:hover:not(:disabled),.btn--outline-red:focus-visible{background:#D4A849;color:var(--ink)}
  .btn--outline-white{border:1px solid #fff;color:#fff}
  .btn--outline-white:hover:not(:disabled),.btn--outline-white:focus-visible{background:#fff;color:#D4A849}

  .text-input{min-height:48px;padding:0 16px;border:1px solid #C6CAD1;background:#fff;font-size:15px;color:var(--text);
    border-radius:var(--radius);flex:1}
  .field-row{display:flex;gap:12px}

  .ph-figure{position:relative;background:var(--surface-muted);overflow:hidden}
  .ph-figure__pattern{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(10,10,10,.05) 0 1px,transparent 1px 14px)}
  .ph-figure figcaption{position:relative;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;
    padding:16px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8B8B8B}

  /* ---------- resources / blog ---------- */
  .resources-grid{margin-top:44px;display:grid;grid-template-columns:1.3fr 1fr;gap:1px;background:var(--border)}
  .resource-feature{background:var(--surface);display:grid;grid-template-columns:1fr 1fr}
  .resource-feature__figure{aspect-ratio:4/3;min-height:0}
  .resource-feature__body{padding:30px 28px;display:flex;flex-direction:column;justify-content:center;min-width:0}
  .resource-feature__body h3{margin-top:8px;font-size:22px;line-height:1.25;font-weight:500;color:var(--ink)}
  .resource-feature__body p{margin-top:10px;font-family:var(--font-serif);font-size:15.5px;line-height:1.55;color:var(--text-muted)}
  .resource-list{background:var(--surface);display:flex;flex-direction:column}
  .resource-list__item{padding:22px 26px;border-top:1px solid var(--border);min-width:0}
  .resource-list__item:first-child{border-top:0}
  .resource-list__item .eyebrow{display:block;margin-bottom:6px}
  .resource-list__item h4{font-size:16px;font-weight:500;line-height:1.35}
  .resource-list__item h4 a{color:var(--ink)}
  .resource-list__item h4 a:hover,.resource-list__item h4 a:focus-visible{color:var(--red)}
  @media (max-width:900px){
    .resources-grid{grid-template-columns:1fr}
    .resource-feature{grid-template-columns:1fr}
  }

  /* ---------- Kenneth's video — scroll-pinned zoom-through ---------- */
  .kenneth-wrap{position:relative;background:var(--ink)}
  .kenneth-stage{
    display:flex;align-items:center;justify-content:center;
    padding:0 var(--section-x);
  }
  .kenneth-stage.is-pinnable{height:100svh;padding:0;overflow:hidden}
  .kenneth-frame{
    position:relative;width:min(1160px, calc(100vw - 2 * var(--section-x)));
    aspect-ratio:2.1 / 1;border-radius:var(--radius);overflow:hidden;
    background:var(--surface-muted);transform-origin:center center;
    display:flex;align-items:center;justify-content:center;
  }
  .kenneth-stage.is-pinnable .kenneth-frame{will-change:transform}
  .kenneth-video{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;display:block;
    background:radial-gradient(120% 90% at 70% 18%, #14203a 0%, var(--ink) 68%);
  }
  .kenneth-frame__pattern{
    position:absolute;inset:0;pointer-events:none;transition:opacity .5s var(--ease-out-quart);
    background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 1px,transparent 1px 14px);
  }
  .kenneth-frame.is-playing .kenneth-frame__pattern{opacity:0}
  .kenneth-frame__scrim{
    position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease-out-quart);
    background:radial-gradient(62% 62% at 50% 45%, transparent 0, rgba(10,10,10,.30) 100%);
  }
  .kenneth-frame.is-full .kenneth-frame__scrim{opacity:1}
  .kenneth__play{
    position:relative;z-index:3;width:76px;height:76px;border-radius:50%;
    background:rgba(var(--ink-rgb),.82);color:#fff;display:flex;align-items:center;justify-content:center;
    transition:transform .25s var(--ease-out-quart), background .25s var(--ease-out-quart);
  }
  .kenneth__play svg{width:24px;height:24px;margin-left:3px}
  .kenneth__play:hover,.kenneth__play:focus-visible{transform:scale(1.08);background:var(--red)}

  /* ---------- Kenneth's video — in-place player controls ---------- */
  .kenneth__tap{position:absolute;inset:0;z-index:2;background:transparent;cursor:pointer}
  .kenneth-frame.is-player .kenneth__play{opacity:0;pointer-events:none;transform:scale(.9)}
  .kenneth-controls{
    position:absolute;left:0;right:0;bottom:0;z-index:4;
    display:flex;flex-direction:column;gap:10px;
    padding:clamp(28px,4vw,44px) clamp(16px,2.6vw,32px) clamp(12px,2vw,20px);
    background:linear-gradient(transparent, rgba(6,8,13,.74) 66%);
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out-quart);
  }
  .kenneth-frame.is-player .kenneth-controls{opacity:1;pointer-events:auto}
  .kenneth-frame.is-player.ctl-idle .kenneth-controls{opacity:0;pointer-events:none}
  .kenneth-frame.is-player.ctl-idle{cursor:none}
  .kenneth-controls__scrub{position:relative;height:15px;display:flex;align-items:center;cursor:pointer;touch-action:none}
  .kenneth-controls__scrub::before{content:"";position:absolute;left:0;right:0;height:2px;background:rgba(255,255,255,.28);transition:height .15s var(--ease-out-quart)}
  .kenneth-controls__scrub:hover::before,.kenneth-controls__scrub.is-drag::before,.kenneth-controls__scrub:focus-visible::before{height:4px}
  .kenneth-controls__fill{position:absolute;left:0;width:0;height:2px;background:var(--red);transition:height .15s var(--ease-out-quart)}
  .kenneth-controls__scrub:hover .kenneth-controls__fill,.kenneth-controls__scrub.is-drag .kenneth-controls__fill{height:4px}
  .kenneth-controls__head{
    position:absolute;left:0;width:12px;height:12px;border-radius:50%;background:var(--red);
    transform:translateX(-50%) scale(0);transition:transform .15s var(--ease-out-quart);
  }
  .kenneth-controls__scrub:hover .kenneth-controls__head,.kenneth-controls__scrub.is-drag .kenneth-controls__head,.kenneth-controls__scrub:focus-visible .kenneth-controls__head{transform:translateX(-50%) scale(1)}
  .kenneth-controls__row{display:flex;align-items:center;gap:12px;color:#fff}
  .kenneth-controls__spacer{flex:1}
  .kctl-btn{
    color:#fff;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius);flex:none;
    transition:background .18s var(--ease-out-quart);
  }
  .kctl-btn:hover,.kctl-btn:focus-visible{background:rgba(255,255,255,.16)}
  .kctl-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .kctl-btn--play svg{fill:currentColor;stroke:none;width:16px;height:16px}
  .kctl-rate{width:auto;min-width:42px;padding:0 9px;font:600 12px/1 var(--font-body);letter-spacing:.09em}
  .kenneth-controls__time{
    font:500 12.5px/1 var(--font-body);letter-spacing:.05em;color:var(--on-dark-muted);
    font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  .kenneth-frame:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0;transform:none !important}
  .kenneth-frame:fullscreen .kenneth-video{object-fit:contain;background:#000}
  @media (max-width:560px){
    .kenneth-controls__row{gap:7px}
    .kenneth-controls__time{font-size:11px}
    .kctl-btn{width:30px;height:30px}
    .kctl-rate{min-width:34px;padding:0 6px}
  }

  @media (max-width:768px), (prefers-reduced-motion:reduce){
    .kenneth-stage,.kenneth-stage.is-pinnable{position:static;height:auto;padding:0 var(--section-x);overflow:visible}
    .kenneth-frame{transform:none !important}
  }

  /* ---------- who we are ---------- */
  .who-we-are{max-width:900px;margin:0 auto;text-align:center}
  .who-we-are p.lede{margin:20px auto 0;max-width:64ch}
  .pillars{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);text-align:left}
  .pillar{background:#fff;padding:24px 22px}
  .pillar .num{font-size:11px;letter-spacing:.1em;color:var(--text-muted)}
  .pillar h3{margin:10px 0 8px;font-size:18px;font-weight:500;color:var(--ink)}
  .pillar p{font-family:var(--font-serif);font-size:15.5px;line-height:1.55;color:#3d3d3d}
  @media (max-width:760px){ .pillars{grid-template-columns:1fr} }

  /* ---------- before / after ---------- */
  .compare{display:flex;flex-direction:column;gap:1px;background:var(--border);border-top:2px solid var(--ink)}
  .compare-row{background:#fff;display:grid;grid-template-columns:230px 1fr 1fr 190px}
  .compare-row > div{padding:28px 26px;border-right:1px solid var(--border)}
  .compare-row > div:last-child{border-right:0;background:var(--surface-muted)}
  .compare-row dt{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted)}
  /* Hardcoded dark gold (not var(--red), still literal blue in this shared
     stylesheet, and darker than the usual #D4A849 accent because this label
     sits on the row's muted last-child background — #D4A849 there is only
     1.9:1 contrast; this shade clears 4.5:1 on both white and muted). */
  .compare-row dt.after-label{color:#7A5C14}
  .compare-row dd{margin:8px 0 0;font-family:var(--font-serif);font-size:16px;line-height:1.55;color:#3d3d3d}
  .compare-row .field-name{margin-top:8px;font-family:var(--font-body);font-size:17px;font-weight:500;color:var(--ink);line-height:1.3}
  .compare-stat{font-family:var(--font-body);font-size:30px;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin:0}
  .compare-stat + dd{margin-top:4px;font-size:12px;color:var(--text-muted);line-height:1.4}
  @media (max-width:900px){
    .compare-row{grid-template-columns:1fr}
    .compare-row > div{border-right:0;border-bottom:1px solid var(--border)}
  }

  /* ---------- value proposition ---------- */
  .value-grid{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
  .value-item{background:#fff;padding:28px 24px;display:flex;flex-direction:column}
  .value-item:nth-child(even){background:var(--surface-muted)}
  .value-item h3{font-size:18px;font-weight:500;color:var(--ink);line-height:1.3}
  .value-item p{margin-top:10px;font-family:var(--font-serif);font-size:15px;line-height:1.55;color:var(--text-muted)}
  @media (max-width:900px){ .value-grid{grid-template-columns:1fr 1fr} }
  @media (max-width:560px){ .value-grid{grid-template-columns:1fr} }

  /* ---------- achievements ---------- */
  .achievements{position:relative;overflow:hidden;background:var(--ink);color:#fff}
  .achievements__fx{position:absolute;inset:0;z-index:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.7}
  .achievements__content{position:relative;z-index:1}
  .stat-grid{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
  .stat{border-top:1px solid rgba(255,255,255,.28);padding-top:18px}
  .stat__num{display:block;font-size:clamp(2.4rem,5vw,3.4rem);font-weight:500;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
  .stat p{margin-top:8px;font-family:var(--font-serif);font-size:15px;line-height:1.5;color:var(--on-dark-muted)}
  @media (max-width:900px){ .stat-grid{grid-template-columns:1fr 1fr;gap:28px} }
  @media (max-width:520px){ .stat-grid{grid-template-columns:1fr} }

  /* ---------- testimonials + certifications ---------- */
  .testimonial-grid{margin-top:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
  /* Hardcoded gold (not var(--red), still literal blue in this shared stylesheet). */
  .testimonial{background:#fff;padding:26px 24px;border-top:2px solid #D4A849}
  .testimonial p{font-family:var(--font-serif);font-size:17px;line-height:1.55;color:var(--ink)}
  .testimonial cite{display:block;margin-top:16px;font-style:normal;font-size:13px;color:var(--text-muted)}
  @media (max-width:900px){ .testimonial-grid{grid-template-columns:1fr} }

  .cert-row{margin-top:56px;padding-top:36px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:center;gap:20px}
  .cert-row .eyebrow{width:100%}
  .cert-badge{
    height:64px;padding:0 22px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
    font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);text-align:center;line-height:1.3;
  }
  .cert-badge--logo{padding:0 14px}
  .cert-badge--logo img{height:44px;width:auto;display:block}

  /* Honest "content pending" state — distinguishes not-yet-shipped copy from
     broken/leftover placeholder text (see why-us.html's proof sections). */
  .metric-tile.is-pending .metric-num{color:var(--text-muted);font-weight:400}
  .testimonial.is-pending p,.review-card.is-pending p{font-style:italic;color:var(--text-muted)}
  .is-pending-label{display:block;margin-top:10px;font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
  .cert-badge.is-pending{border-style:dashed}

  /* ---------- Q&A diagnostic ---------- */
  .qa-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .qa-inner h2.headline{max-width:20ch}
  .qa-inner > div:first-child .lede{margin-top:16px;max-width:480px}
  @media (max-width:900px){ .qa-inner{grid-template-columns:1fr} }

  .qa-panel{position:relative}
  .qa-step{view-transition-name:qa-step}
  .qa-step[hidden]{display:none}
  .quiz-progress{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 18px}
  .quiz-progress span:first-child{font-size:13px;font-weight:700}
  .quiz-progress span:last-child{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
  .quiz-options{display:flex;flex-wrap:wrap;gap:10px;max-width:720px}
  .quiz-option{
    padding:11px 20px;min-height:44px;border:1px solid var(--red);font-size:12.5px;font-weight:500;border-radius:var(--radius);
    background:transparent;color:var(--red);transition:background .15s var(--ease-out-quart), color .15s var(--ease-out-quart);
  }
  .quiz-option[aria-pressed="true"]{background:var(--red);color:#fff}
  .quiz-option:hover:not([aria-pressed="true"]){background:rgba(34,81,255,.08)}
  .quiz-actions{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap}
  .qa-result__text{font-family:var(--font-serif);font-size:22px;line-height:1.5;color:var(--ink);max-width:36ch}
  .qa-result .btn{margin-top:26px;margin-right:14px}

  @media (prefers-reduced-motion:no-preference){
    ::view-transition-old(qa-step){animation:qa-out .32s var(--ease-out-quart) both}
    ::view-transition-new(qa-step){animation:qa-in .38s var(--ease-out-quart) both}
    @keyframes qa-out{to{opacity:0;transform:translateX(-14px)}}
    @keyframes qa-in{from{opacity:0;transform:translateX(14px)}}
  }

  /* ---------- services ---------- */
  .program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
  .program-card{background:#fff;padding:32px 30px 30px;display:flex;flex-direction:column;min-height:270px}
  .program-card--dark{background:var(--ink);color:#fff}
  .program-card h3{margin:16px 0 12px;font-size:22px;line-height:1.25}
  .program-card p{font-family:var(--font-serif);font-size:16px;line-height:1.55;color:#3d3d3d;flex:1}
  .program-card--dark p{color:var(--on-dark-muted)}
  .program-card__meta{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted);line-height:1.7}
  .program-card--dark .program-card__meta{border-top-color:rgba(255,255,255,.25)}
  .program-card .link-arrow{margin-top:22px;align-self:flex-start;border-color:rgba(10,10,10,.45)}
  .program-card--dark .link-arrow{color:#fff;border-color:rgba(255,255,255,.45)}
  .program-card--dark .link-arrow:hover,.program-card--dark .link-arrow:focus-visible{color:var(--blue-tint-on-dark);border-color:var(--blue-tint-on-dark)}
  @media (max-width:900px){ .program-grid{grid-template-columns:1fr 1fr} }
  @media (max-width:640px){ .program-grid{grid-template-columns:1fr} }

  /* ---------- blog: field-notes listing + article ---------- */
  .blog-feature{
    margin-top:44px;background:#fff;border:1px solid var(--border);
    padding:44px 40px;display:flex;flex-direction:column;
    transition:transform .4s var(--ease-out-expo), border-color .3s var(--ease-out-quart);
  }
  .blog-feature:hover{transform:translateY(-6px);border-color:var(--ink)}
  .blog-feature h3{margin-top:16px;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.18;font-weight:500;letter-spacing:-.015em;color:var(--ink);max-width:20ch}
  .blog-feature p{margin-top:16px;font-family:var(--font-serif);font-size:17px;line-height:1.6;color:#3d3d3d;max-width:62ch}
  .blog-feature .link-arrow{margin-top:24px;align-self:flex-start}

  .blog-grid{margin-top:1px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
  .blog-card{background:#fff;padding:28px 26px;display:flex;flex-direction:column;min-height:240px}
  .blog-card:nth-child(even){background:var(--surface-muted)}
  .blog-card h3{margin-top:14px;font-size:19px;line-height:1.3;font-weight:700;color:var(--ink)}
  .blog-card p{margin-top:10px;font-family:var(--font-serif);font-size:15px;line-height:1.55;color:#3d3d3d;flex:1}
  .blog-card__meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:11px;letter-spacing:.04em;color:var(--text-muted)}
  .blog-card--upcoming{border:1px dashed var(--border)}
  .blog-card--upcoming h3{color:var(--text-muted)}
  @media (max-width:900px){ .blog-grid{grid-template-columns:1fr 1fr} }
  @media (max-width:560px){ .blog-grid{grid-template-columns:1fr} }

  .post-header{max-width:70ch}
  .post-header h1{margin-top:16px;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.1;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
  .post-meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 16px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
  .post-body{margin-top:40px;max-width:70ch;font-family:var(--font-serif);font-size:18px;line-height:1.7;color:#232323}
  .post-body h2{margin-top:44px;font-family:var(--font-body);font-size:1.5rem;font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
  .post-body p{margin-top:18px}
  .post-body p:first-of-type{margin-top:0}
  .post-body ul{margin-top:18px;display:flex;flex-direction:column;gap:10px;padding-left:22px}
  .post-body li{list-style:disc}
  .post-pullquote{margin:44px 0;max-width:52ch;font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:1.55rem;line-height:1.45;color:var(--ink)}
  .post-footer{margin-top:56px;padding-top:28px;border-top:1px solid var(--border)}

  .hrd-badge{display:flex;align-items:center;gap:14px;border:1px solid var(--ink);padding:10px 16px;border-radius:var(--radius)}
  .hrd-badge__mark{width:44px;height:44px;flex:none}
  .hrd-badge__mark img{width:100%;height:100%;object-fit:contain;display:block}
  .hrd-badge p{font-size:11.5px;line-height:1.5}
  .hrd-badge p span{display:block;color:var(--text-muted)}
  .programs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

  .schedule-cta{display:flex;justify-content:center;margin-top:44px}

  /* ---------- closing statement (scroll-scrubbed letter fill) ---------- */
  .closer{
    text-align:center;
    padding-top:clamp(40px,6vw,72px);
  }
  .closer__line{
    margin:0 auto;max-width:20ch;
    font-family:var(--font-body);font-weight:700;
    font-size:clamp(2.2rem,7vw,5rem);line-height:1.06;letter-spacing:-.025em;
    color:var(--ink);text-wrap:balance;
  }
  .closer__line .fillword{ display:inline-block;white-space:nowrap }
  .closer__line .fillchar{
    color:rgba(10,10,10,.52);
    transition:color .16s cubic-bezier(.2,0,0,1);
  }
  .closer__line .fillchar.is-filled{ color:var(--ink) }
  .closer__kicker{
    margin:clamp(22px,3.2vw,36px) 0 0;
    font-family:var(--font-serif);font-size:clamp(1.35rem,2.2vw,1.6rem);font-weight:500;font-style:italic;
    line-height:1.55;letter-spacing:0;text-transform:none;color:var(--text-muted);
  }
  @media (prefers-reduced-motion:reduce){ .closer__line .fillchar{ color:var(--ink) } }

  /* ---------- footer ---------- */
  .site-footer{background:var(--ink);color:#fff;padding:0 var(--section-x) 28px;margin-top:96px}
  .footer-divider{height:1px;background:rgba(255,255,255,.2)}
  .footer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;padding:32px 0 24px;font-size:13px;line-height:1.8}
  .footer-nav-col h3{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px;font-weight:500}
  .footer-nav-col a{
    display:block;
    background-image:linear-gradient(to right,#D4A849 50%,rgba(255,255,255,.82) 50%);
    background-size:200% 100%;background-repeat:no-repeat;background-position:100% 0;
    background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    transition:background-position .4s var(--ease-out-quart);
  }
  .footer-nav-col a:hover,.footer-nav-col a:focus-visible{background-position:0 0}

  /* touch screens: footer links, breadcrumb links and the logo get a 44px-tall tap area without changing the look */
  @media (pointer:coarse){
    .footer-nav-col a{display:flex;align-items:center;min-height:44px}
    .breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
    .main-nav__brand > a{display:flex;align-items:center;min-height:44px}
  }
  .footer-contact h3{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px;font-weight:500}
  .footer-contact a{
    display:inline-block;
    background-image:linear-gradient(to right,#D4A849 50%,rgba(255,255,255,.82) 50%);
    background-size:200% 100%;background-repeat:no-repeat;background-position:100% 0;
    background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    transition:background-position .4s var(--ease-out-quart);
  }
  .footer-contact a:hover,.footer-contact a:focus-visible{background-position:0 0}
  .footer-bottom{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;padding-top:24px}
  .footer-bottom p{margin-top:10px;font-size:11.5px;color:rgba(255,255,255,.5);line-height:1.7}
  .footer-bottom p a{color:inherit;text-decoration:underline;text-underline-offset:2px}
  .footer-bottom p a:hover,.footer-bottom p a:focus-visible{color:#fff}
  .social-row{display:flex;gap:10px}
  /* Hardcoded gold hover (not var(--red), which is still literal blue in this
     shared stylesheet) to match the rest of this footer's already-gold links. */
  .social-btn{
    width:44px;height:44px;border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;border-radius:50%;
    color:#fff;
    transition:border-color .3s var(--ease-out-quart), background .3s var(--ease-out-quart), color .3s var(--ease-out-quart), transform .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-quart);
  }
  .social-btn svg,.social-btn img{width:16px;height:16px;transition:transform .3s var(--ease-out-expo)}
  .social-btn .icon-facebook{width:21px;height:21px}
  .social-btn img{object-fit:contain}
  .social-btn:hover,.social-btn:focus-visible{
    border-color:#D4A849;background:rgba(212,168,73,.12);color:#D4A849;
    transform:translateY(-4px);box-shadow:0 6px 16px rgba(212,168,73,.25);
  }
  .social-btn:hover svg,.social-btn:focus-visible svg,.social-btn:hover img,.social-btn:focus-visible img{transform:scale(1.12)}
  .social-btn:active{transform:translateY(-1px) scale(.95)}
  .social-btn:focus-visible{outline:2px solid #D4A849;outline-offset:3px}
  /* Same shape + gold hover as the footer's social-btn, base colour reverted
     to ink for use on a light card (e.g. team-card) instead of a dark footer. */
  .social-btn--on-light{border-color:rgba(10,10,10,.25);color:var(--ink)}
  @media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} }
  /* Phone: same footer as the home page, two balanced columns instead of one long list */
  @media (max-width:520px){
    .footer-grid{display:block;column-count:2;column-gap:28px;padding:22px 0 16px;font-size:12.5px;line-height:1.65}
    .footer-nav-col,.footer-contact{break-inside:avoid;margin-bottom:18px}
    .footer-nav-col h3,.footer-contact h3{margin-bottom:6px}
    .footer-nav-col a{display:inline-block;min-height:0}
    .footer-bottom{gap:14px;padding-top:16px}
    .site-footer{padding-bottom:20px}
  }

  /* ---------- comprehensive motion: hover-lift, text reveal, nav entrance, pick pulse ---------- */
  .pillar,.value-item,.stat,.testimonial,.program-card,.team-card,.metric-tile,.review-card{
    transition:transform .4s var(--ease-out-expo), border-color .3s var(--ease-out-quart);
  }
  .pillar:hover,.value-item:hover,.stat:hover,.testimonial:hover,.program-card:hover,.team-card:hover,.metric-tile:hover,.review-card:hover{
    /* !important: beats .reveal-armed [data-reveal].is-visible{transform:none},
       which otherwise silently cancels this lift once the card has scrolled
       into view (same collision fixed on .nav-cta earlier). */
    transform:translateY(-10px) scale(1.02) !important;
  }

  /* Team photos: curtain-wipe reveal (not the sitewide flat fade) — this
     section exists to introduce real people, so it earns its own entrance.
     Piggybacks on the existing reveal-armed/is-visible toggle, no new JS. */
  .reveal-armed .team-card[data-reveal] .team-card__photo{
    clip-path:inset(0 0 0 100%);
    transition:clip-path .9s var(--ease-out-expo);
    transition-delay:var(--reveal-delay,0ms);
  }
  .reveal-armed .team-card[data-reveal].is-visible .team-card__photo{clip-path:inset(0 0 0 0)}
  @media (prefers-reduced-motion:reduce){
    .reveal-armed .team-card[data-reveal] .team-card__photo{clip-path:none;transition:none}
  }
  .team-card__photo img{transition:transform .5s var(--ease-out-quart)}
  .team-card:hover .team-card__photo img{transform:scale(1.06)}

  .reveal-armed [data-reveal-text]{
    clip-path:inset(0 100% 0 0);
    transition:clip-path 1.6s var(--ease-out-expo);
    transition-delay:var(--reveal-delay,0ms);
  }
  .reveal-armed [data-reveal-text].is-visible{clip-path:inset(0 0 0 0)}
  /* Section-heading lockup — one fixed, unhurried timing on every section
     (no per-index --reveal-delay stagger): the eyebrow eases up first, the
     headline wipes in a beat behind it. Matches the "Who we are" heading. */
  .reveal-armed .eyebrow[data-reveal]{
    transform:translateY(12px);
    transition:opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
    transition-delay:0ms;
  }
  .reveal-armed .headline[data-reveal-text]{
    opacity:0;
    transition:clip-path 1.9s var(--ease-out-expo), opacity 1.15s var(--ease-out-expo);
    transition-delay:220ms;
  }
  .reveal-armed .headline[data-reveal-text].is-visible{opacity:1}
  /* short headlines: stretch the reveal so it doesn't finish early —
     more for the shortest one ("In their words.") */
  .reveal-armed #compare-heading[data-reveal-text]{
    transition:clip-path 2.5s var(--ease-out-expo) 220ms, opacity 1.5s var(--ease-out-expo) 220ms;
  }
  .reveal-armed #achievements-heading[data-reveal-text]{
    transition:clip-path 2.7s var(--ease-out-expo) 220ms, opacity 1.6s var(--ease-out-expo) 220ms;
  }
  .reveal-armed #testimonials-heading[data-reveal-text]{
    transition:clip-path 3.7s var(--ease-out-expo) 220ms, opacity 2.2s var(--ease-out-expo) 220ms;
  }

  .nav-drop{transition:opacity .18s var(--ease-out-quart), transform .18s var(--ease-out-quart)}
  @starting-style{
    .nav-drop:not([hidden]){opacity:0;transform:translateY(-6px)}
  }

  @keyframes pick-pulse{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}}
  .quiz-option.just-picked{animation:pick-pulse .32s var(--ease-out-quart)}

  .kenneth__play{position:relative}
  .kenneth__play::after{
    content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(var(--red-rgb),.4);
    animation:play-ring 2.6s var(--ease-out-quart) infinite;
  }
  @keyframes play-ring{0%{transform:scale(.92);opacity:.7}100%{transform:scale(1.28);opacity:0}}
  /* one emphasized beat when the hero cue delivers the visitor here */
  .kenneth__play.is-arriving{animation:play-arrive .72s var(--ease-out-expo)}
  .kenneth__play.is-arriving::after{border-color:rgba(var(--red-rgb),.8);animation:play-ring .72s var(--ease-out-quart) 1}
  @keyframes play-arrive{0%{transform:scale(1)}34%{transform:scale(1.13)}100%{transform:scale(1)}}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  }

  /* ---------- sub-page additions: breadcrumb ---------- */
  .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
  .breadcrumb a{color:var(--text-muted)}
  .breadcrumb a:hover,.breadcrumb a:focus-visible{color:var(--red)}
  .breadcrumb span[aria-hidden]{color:var(--border)}
  .breadcrumb .is-current{color:var(--ink)}

  /* ---------- sub-page additions: page hero (non-banner pages) ---------- */
  .page-hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:64px var(--section-x) 56px}
  .page-hero__fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;mix-blend-mode:screen;opacity:.65;pointer-events:none}
  .page-hero > :not(.page-hero__fx){position:relative;z-index:1}
  .page-hero .eyebrow{color:var(--on-dark-faint)}
  .page-hero h1{margin-top:14px;max-width:24ch;font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.08;letter-spacing:-.02em;font-weight:500}
  .page-hero .lede{margin-top:18px;max-width:640px;color:var(--on-dark-muted)}
  /* Programs headline keeps the page-hero title font; it just runs wider so the forced line break sits after "AI,", with the closing phrase in gold. */
  .page-hero h1.page-hero__title{max-width:none}
  .page-hero h1.page-hero__title .gold{color:#D7B054}

  /* ---------- sub-page additions: metric tiles (case studies summary) ---------- */
  .metric-grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
  .metric-tile{background:#fff;padding:28px 24px}
  .metric-tile .metric-num{display:block;font-size:clamp(2rem,4vw,2.8rem);font-weight:500;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
  .metric-tile p{margin-top:8px;font-family:var(--font-serif);font-size:15px;line-height:1.5;color:var(--text-muted)}
  @media (max-width:760px){ .metric-grid{grid-template-columns:1fr} }

  /* ---------- sub-page additions: Google reviews (dedicated page only) ---------- */
  .review-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
  .review-card{background:#fff;padding:24px 22px}
  /* Hardcoded gold (not var(--red), still literal blue in this shared stylesheet). */
  .review-card .stars{color:#D4A849;font-size:14px;letter-spacing:.1em}
  .review-card p{margin-top:12px;font-family:var(--font-serif);font-size:15px;line-height:1.55;color:#3d3d3d}
  .review-card cite{display:block;margin-top:14px;font-style:normal;font-size:12.5px;color:var(--text-muted)}
  @media (max-width:900px){ .review-grid{grid-template-columns:1fr} }

  /* ---------- sub-page additions: team grid (who we are) ---------- */
  .team-grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
  .team-card{background:#fff;padding:26px 24px 28px;display:flex;flex-direction:column}
  .team-card:nth-child(even){background:var(--surface-alt)}
  .team-card__photo{aspect-ratio:1/1;background:var(--surface-muted);overflow:hidden}
  .team-card__photo img{width:100%;height:100%;object-fit:cover;display:block}
  .team-card h3{margin-top:18px;font-size:19px;font-weight:500;color:var(--ink)}
  .team-card .role{margin-top:4px;font-size:12.5px;letter-spacing:.04em;color:var(--text-muted)}
  .team-card p{margin-top:12px;font-family:var(--font-serif);font-size:14.5px;line-height:1.55;color:#3d3d3d;flex:1}
  .team-card .li-link{margin-top:16px;align-self:flex-start}
  @media (max-width:900px){ .team-grid{grid-template-columns:1fr 1fr} }
  @media (max-width:560px){ .team-grid{grid-template-columns:1fr} }

  /* ---------- sub-page additions: department directory (programs index) ---------- */
  .dept-jump{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px}
  .dept-jump a{padding:9px 16px;border:1px solid rgba(255,255,255,.35);font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#fff;border-radius:var(--radius);min-height:44px;display:inline-flex;align-items:center}
  .dept-jump a:hover,.dept-jump a:focus-visible{border-color:var(--red);color:var(--blue-tint-on-dark)}
  .dept-section{padding:var(--section-y) var(--section-x) 0;border-top:1px solid var(--border)}
  .dept-section:first-of-type{border-top:0}
  .dept-section__head{max-width:720px}
  .dept-section__head .eyebrow{color:#D4A849;font-weight:700}
  .dept-section__head p{margin-top:12px}
  .course-grid{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
  .course-card{background:#fff;padding:26px 24px;display:flex;flex-direction:column;min-height:220px;position:relative;z-index:1;
    transition:transform .4s var(--ease-out-expo), box-shadow .3s var(--ease-out-quart);}
  .course-card:nth-child(even){background:var(--surface-muted)}
  /* Hardcoded gold (not var(--red), which is still literal blue in this
     shared stylesheet) so the hover ring matches the homepage's gold accent. */
  .course-card:hover{transform:translateY(-10px) scale(1.02);z-index:2;
    box-shadow:0 16px 32px rgba(10,10,10,.14), 0 0 0 2px #D4A849 inset;}
  .course-card__icon{width:26px;height:26px;color:#D4A849}
  .course-card__icon svg{width:100%;height:100%}
  .course-card .code{display:block;margin-top:14px;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--text-muted)}
  .course-card h3{margin-top:8px;font-size:17px;line-height:1.3;font-weight:700;color:var(--ink)}
  .course-card p{margin-top:10px;font-family:var(--font-serif);font-size:14px;line-height:1.5;color:var(--text-muted);flex:1}
  .course-card .link-arrow{margin-top:14px;align-self:flex-start;font-size:10.5px}
  @media (max-width:900px){ .course-grid{grid-template-columns:1fr 1fr} }
  @media (max-width:560px){ .course-grid{grid-template-columns:1fr} }

  /* ---------- sub-page additions: course detail page ---------- */
  .course-detail{display:grid;grid-template-columns:1fr 320px;gap:64px;align-items:start}
  .course-detail__main h1{font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.15;font-weight:500;letter-spacing:-.015em;color:var(--ink);max-width:22ch}
  .course-detail__main .lede{margin-top:18px}
  .outcome-list{margin-top:16px;display:flex;flex-direction:column;gap:12px}
  .outcome-list li{display:flex;gap:12px;align-items:flex-start;font-family:var(--font-serif);font-size:15.5px;line-height:1.5;color:#3d3d3d}
  .outcome-list li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;background:#D4A849}
  .outcome-list li b{display:block;margin-bottom:2px;font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;font-size:14.5px;font-weight:700;color:var(--ink)}
  .course-sidebar{background:var(--surface-alt);border:1px solid var(--border);padding:28px 24px;display:flex;flex-direction:column;gap:20px}
  .course-sidebar dt{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
  .course-sidebar dd{margin-top:6px;font-size:15px;font-weight:500;color:var(--ink)}
  .course-sidebar .btn{width:100%}
  @media (max-width:900px){ .course-detail{grid-template-columns:1fr} .course-sidebar{order:-1} }

  /* ---------- sub-page additions: course snapshot strip (icon + fact) ---------- */
  .snapshot-strip{margin-top:28px;display:flex;flex-wrap:wrap;gap:1px;background:var(--border);border:1px solid var(--border)}
  .snapshot-item{flex:1 1 160px;min-width:150px;background:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px}
  .snapshot-item svg{width:19px;height:19px;flex:none;color:#D4A849}
  .snapshot-item .snapshot-value{display:block;font-size:14px;font-weight:500;color:var(--ink);line-height:1.25}
  .snapshot-item .snapshot-label{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-top:2px}

  /* ---------- sub-page additions: program workflow diagram (icon flowchart) ---------- */
  .process-flow{margin-top:24px;display:flex;align-items:flex-start}
  .process-step{flex:1;display:flex;flex-direction:column;align-items:flex-start;position:relative;padding-right:28px}
  .process-step:last-child{padding-right:0}
  .process-step__icon{width:42px;height:42px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);flex:none;background:#fff;position:relative;z-index:1}
  .process-step__icon svg{width:18px;height:18px}
  .process-step__connector{position:absolute;top:20px;left:42px;right:0;height:1px;background:var(--border)}
  .process-step__connector::after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;border-top:1.5px solid var(--border);border-right:1.5px solid var(--border);transform:rotate(45deg)}
  .process-step:last-child .process-step__connector{display:none}
  .process-step .step-num{font-size:10px;letter-spacing:.1em;color:var(--text-muted)}
  .process-step h4{margin-top:12px;font-size:14px;font-weight:500;color:var(--ink)}
  .process-step p{margin-top:6px;font-family:var(--font-serif);font-size:13px;line-height:1.5;color:var(--text-muted);max-width:22ch}
  @media (max-width:760px){
    .process-flow{flex-direction:column;gap:24px}
    .process-step{padding-right:0}
    .process-step__connector{display:none}
  }

  /* ---------- sub-page additions: programs explorer (department rail, filters, feature row) ---------- */
  #programs-explorer[hidden],#programs-fallback[hidden]{display:none}

  /* Same band the home page's "Our Programs" cards sit on: separated white
     cards read against the off-white, not against each other. */
  /* The light band holds the level legend; every filter lives in the panel behind the
     gold Filters button (see .filter-dock). Only the results below are the dark scene. */
  #explorer-root{background:var(--surface-alt);border-top:1px solid var(--border);padding-bottom:44px}

  /* Dark scene: the same night-sky as the home page's "Who we are" (blue glow + drifting
     particle network), pinned to the viewport with position:sticky so this very tall band
     stays cheap. Cards are translucent. */
  .explorer-results{position:relative;background:var(--ink);color:#fff;padding:0 var(--section-x) var(--section-y)}
  .explorer-fx{position:absolute;inset:0;overflow:clip;pointer-events:none}
  .explorer-fx__sky{position:sticky;top:0;height:100vh;overflow:hidden;background:radial-gradient(160% 140% at 50% 30%,rgba(34,81,255,.2) 0%,rgba(var(--ink-rgb),.35) 55%,var(--ink) 100%),radial-gradient(140% 120% at 85% 90%,rgba(34,81,255,.1) 0%,transparent 65%),var(--ink)}
  .explorer-fx__sky canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.7}
  .explorer-results > :not(.explorer-fx):not(.filter-dock){position:relative;z-index:1}
  .explorer-results .dept-section{border-top-color:rgba(255,255,255,.22)}
  .explorer-results .dept-section__head .headline{color:#fff}

  /* Level legend: says what L1 / L2 / L3 mean, in the level colours used everywhere
     else (white Foundation, black Applied, gold Executive). Wording is the 2027
     catalogue's. Open on wide screens; a small toggle on phones. */
  .level-legend{margin-bottom:0}

  /* The catalogue in four numbers, above the level boxes. Numerals are Instrument Serif, as in the
     catalogue's stat strip (loaded on this page only). Gold is the darker #A67C0A here so the numbers keep
     3:1 on the light band; the catalogue's #D7B054 is for dark grounds. */
  .prog-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-bottom:36px;padding-bottom:36px;border-bottom:1px solid var(--border)}
  .prog-stat{display:block;text-align:center}
  .prog-stat__n{display:block;font-family:"Instrument Serif",Georgia,serif;font-size:clamp(3.4rem,8.2vw,5.8rem);font-weight:400;line-height:1;color:#A67C0A;font-variant-numeric:tabular-nums}
  .prog-stat__l{display:block;margin-top:16px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--ink)}
  @media (max-width:640px){.prog-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;margin-bottom:28px;padding-bottom:28px}}
  /* Entrance, armed by programs-motion.js only when motion is allowed: the four numbers rise in turn,
     then Level 1, 2 and 3 rise one after another. Without the script the band is just shown. */
  /* The hidden state has no transition (it must snap in, or the script arming the band would start its own
     delayed fade-out that the reveal then cancels); only the reveal state carries the transitions. */
  .prog-stats.is-armed .prog-stat{opacity:0;transform:translateY(16px)}
  .prog-stats.is-armed.is-in .prog-stat{opacity:1;transform:none;transition:opacity .6s var(--ease-out-expo),transform .9s var(--ease-out-expo);transition-delay:calc(var(--i,0) * 90ms)}
  /* Level by level: each box rises and its outline settles into the level colour, then its badge fills in
     (wipes left to right), then the line under it fades up. Foundation, Applied, Executive, 240ms apart. */
  .level-legend.is-armed .level-legend__item{opacity:0;transform:translateY(40px) scale(.97);border-color:rgba(10,10,10,.08)}
  .level-legend.is-armed .level-legend__badge{clip-path:inset(0 100% 0 0)}
  .level-legend.is-armed .level-legend__item p{opacity:0;transform:translateY(8px)}
  .level-legend.is-armed.is-in .level-legend__item{opacity:1;transform:none;border-color:var(--lv-edge);transition:opacity .8s var(--ease-out-expo),transform 1.1s var(--ease-out-expo),border-color .9s var(--ease-out-quart);transition-delay:calc(300ms + var(--i,0) * 240ms)}
  .level-legend.is-armed.is-in .level-legend__badge{clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease-out-expo);transition-delay:calc(680ms + var(--i,0) * 240ms)}
  .level-legend.is-armed.is-in .level-legend__item p{opacity:1;transform:none;transition:opacity .7s var(--ease-out-expo),transform .8s var(--ease-out-expo);transition-delay:calc(920ms + var(--i,0) * 240ms)}

  /* Closing line on the programs page: letters start faint and each word lifts into place as the scroll
     reaches it (script adds .is-scrub; scrubbed both ways, so scrolling back un-writes it). */
  .closer__line.is-scrub .fillchar:not(.is-filled){color:rgba(10,10,10,.14)}
  .closer__line.is-scrub .fillchar{transition:color .4s cubic-bezier(.2,0,0,1)}
  .closer__line.is-scrub .fillword{transform:translateY(.34em);transition:transform .8s var(--ease-out-expo)}
  .closer__line.is-scrub .fillword.is-up{transform:none}
  .level-legend__toggle{display:none;align-items:center;justify-content:space-between;min-height:44px;padding:0 18px;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
  .level-legend__toggle::-webkit-details-marker{display:none}
  .level-legend__toggle::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease-out-quart)}
  .level-legend[open] .level-legend__toggle::after{transform:rotate(-135deg) translateY(-2px)}
  .level-legend__toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .level-legend__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  /* Metallic outline: the same light-to-dark gradient as the badge inside, on the border (a white fill inside a gradient border-box),
     bronze / silver / gold in the same medals as the badge. */
  .level-legend__item{--lv-edge:rgba(10,10,10,.22);--lv-grad:linear-gradient(135deg,#EDEDED 0%,#9A9A9A 50%,#EDEDED 100%);display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 24px 24px;
    background:linear-gradient(#fff,#fff) padding-box,var(--lv-grad) border-box;border:3px solid transparent !important;border-radius:16px;text-align:center;box-shadow:0 6px 18px rgba(10,10,10,.08)}
  .level-legend__item--1{--lv-edge:#3470F5;--lv-grad:linear-gradient(135deg,#4A80F8 0%,#2F63E8 100%)}
  .level-legend__item--2{--lv-edge:#10284B;--lv-grad:linear-gradient(135deg,#183759 0%,#0D2140 100%)}
  .level-legend__item--3{--lv-edge:#D0B063;--lv-grad:linear-gradient(135deg,#DDBF76 0%,#C29F50 100%)}
  .level-legend__badge{padding:9px 18px;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
  .level-legend__item--1 .level-legend__badge{background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 46%,rgba(255,255,255,0) 52%),linear-gradient(135deg,#4A80F8 0%,#2F63E8 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.08);border-radius:2px;color:#fff}
  .level-legend__item--2 .level-legend__badge{background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 46%,rgba(255,255,255,0) 52%),linear-gradient(135deg,#183759 0%,#0D2140 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.08);border-radius:2px;color:#fff}
  .level-legend__item--3 .level-legend__badge{background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 46%,rgba(255,255,255,0) 52%),linear-gradient(135deg,#DDBF76 0%,#C29F50 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.08);border-radius:2px;color:#fff}
  .level-legend__item p{font-size:15px;line-height:1.5;color:#555;text-wrap:pretty}
  @media (max-width:699px){
    .level-legend__toggle{display:flex}
    .level-legend[open] .level-legend__toggle{margin-bottom:12px}
    .level-legend__list{grid-template-columns:1fr;gap:12px}
    .level-legend__item{gap:10px;padding:16px 18px 18px}
    .level-legend__badge{padding:8px 14px;font-size:11.5px}
    .level-legend__item p{font-size:14px}
  }

  /* Tier mark: one small square whose colour is a program's level — white
     Foundation, black Applied, gold Executive. The same mark runs through the
     level chips, the department strip, chapter heads and cards, so it reads as a legend.
     --tm-edge is the outline that keeps white/black legible: ink on light
     surfaces, white on the dark strip and the pressed chip. */
  .tier-mark{--tm-edge:var(--ink);display:inline-block;flex:none;width:9px;height:9px;box-sizing:border-box;border:1.5px solid var(--tm-edge);border-radius:50%;background:#fff}
  .tier-mark--2{background:var(--ink)}
  .tier-mark--3{background:#D4A849;border-color:#B8860B}
  .tier-mark--gap{margin-left:6px}

  /* Department strip: "All" plus the eight departments in one slim row (a
     3x3 grid below 1200px), as soft white capsules on the band, the same
     language as the cards below. Each carries one square per program; the
     level chips drive it live: other levels ghost out, the count follows, and
     a department with nothing at that level dims. Hover rings gold (as the
     cards do); selected = gold fill sweeping in from the left. */
  .dept-strip{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .dept-strip[hidden],.cov-tip[hidden]{display:none}
  .strip-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name name" "marks icon";align-content:space-between;align-items:end;gap:10px 8px;min-height:64px;padding:12px 14px;border:0;border-radius:16px;text-align:left;color:var(--ink);
    background:#fff linear-gradient(#D4A849,#D4A849) no-repeat left top / 0% 100%;
    transition:background-size .5s var(--ease-out-expo),box-shadow .25s var(--ease-out-quart),opacity .3s var(--ease-out-quart)}
  .strip-item > svg{grid-area:icon;width:18px;height:18px;color:#B8860B}
  .strip-item__name{grid-area:name;font-size:12.5px;font-weight:600;line-height:1.25}
  .strip-item__marks{grid-area:marks;display:flex;flex-wrap:wrap;align-items:center;gap:3px;min-width:0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-variant-numeric:tabular-nums}
  .strip-item__marks .tier-mark{width:10px;height:10px;transition:opacity .3s var(--ease-out-quart)}
  .strip-item__marks .tier-mark--gap{margin-left:3px}
  .strip-item__marks .tier-mark.is-off{opacity:.2}
  .strip-item--all .strip-item__marks{flex-wrap:nowrap;white-space:nowrap;text-transform:none;letter-spacing:0;font-size:11.5px}
  .strip-item:not(.is-active):not(.is-none):hover{box-shadow:inset 0 0 0 2px #D4A849}
  .strip-item.is-active{background-size:100% 100%}
  .strip-item.is-active > svg{color:var(--ink)}
  .strip-item.is-active .strip-item__marks{color:rgba(10,10,10,.78)}
  .strip-item.is-active .tier-mark--3{background:#B8860B;border-color:var(--ink)}
  .strip-item.is-none{opacity:.45;cursor:not-allowed}
  .strip-item:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  @media (max-width:599px){
    .strip-item{grid-template-areas:"name name" "marks marks";padding:10px 10px}
    .strip-item__name{font-size:12px}
    .strip-item > svg{display:none}
    .strip-item__marks{gap:2px}
    .strip-item__marks .tier-mark{width:8px;height:8px}
  }
  @media (min-width:1200px){
    .dept-strip{grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
    .strip-item{min-height:0;padding:12px 10px 11px}
    .strip-item__name{min-height:2.5em}
    .strip-item__marks{gap:2px}
    .strip-item__marks .tier-mark{width:9px;height:9px}
  }

  /* Hover / focus peek: a cell lists its program titles, a department header
     shows its one-line hook. One shared element, positioned by the script. */
  .cov-tip{position:absolute;z-index:6;width:max-content;max-width:300px;padding:14px 16px 12px;background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:14px;box-shadow:0 14px 30px rgba(10,10,10,.3);pointer-events:none;animation:cov-tip-in .16s var(--ease-out-quart)}
  @keyframes cov-tip-in{from{opacity:0;transform:translateY(4px)}}
  .cov-tip__title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#D4A849}
  .cov-tip ul{margin-top:10px;display:flex;flex-direction:column;gap:8px}
  .cov-tip li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;font-size:13px;line-height:1.35;color:#fff}
  .cov-tip li .tier-mark{--tm-edge:#fff;width:9px;height:9px;align-self:center}
  .cov-tip li em{font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-faint)}
  .cov-tip__hook{font-family:var(--font-serif);font-size:15px;line-height:1.4;color:#fff}
  @media (prefers-reduced-motion:reduce){
    .strip-item,.strip-item__marks .tier-mark{transition:none}
    .cov-tip{animation:none}
  }

  /* Filter dock: a gold "Filters" button that rests at the right end of the first track
     title (the top-right of the cards) and pins top-right under the nav as the reader
     scrolls (sticky), so the filter is always in reach. It opens one panel holding every
     control. The dock is zero-height and first inside .explorer-results, so it is pinned
     through the results and lets go at the closer. --dock-y drops the button onto the
     first title's centre line without moving the layout. Non-modal: the page stays live behind it. */
  .filter-dock{--dock-y:12px;position:sticky;top:calc(84px - var(--dock-y));z-index:40;height:0}
  .filter-toggle{position:absolute;top:var(--dock-y);right:0;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 16px;border:1.5px solid #D4A849;border-radius:999px;background:#D4A849;color:var(--ink);font-size:14px;font-weight:600;letter-spacing:.01em;cursor:pointer;
    box-shadow:0 10px 24px rgba(10,10,10,.28),0 2px 6px rgba(10,10,10,.16);
    transition:transform .25s var(--ease-out-quart),box-shadow .25s var(--ease-out-quart),background .2s var(--ease-out-quart),color .2s var(--ease-out-quart)}
  .filter-toggle svg{width:20px;height:20px;flex:none}
  .filter-toggle:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(10,10,10,.32),0 3px 8px rgba(10,10,10,.18)}
  .filter-toggle:focus-visible{outline:0;box-shadow:0 0 0 2px var(--ink),0 0 0 5px #fff,0 10px 24px rgba(10,10,10,.28)}
  .filter-dock.is-open .filter-toggle{background:var(--ink);color:#D4A849}
  .filter-toggle__badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
  .filter-dock.is-open .filter-toggle__badge{background:#D4A849;color:var(--ink)}
  .filter-toggle__badge[hidden],.filter-panel[hidden],.filter-clear[hidden]{display:none}

  .filter-panel{position:absolute;top:calc(var(--dock-y) + 60px);right:0;width:min(700px,calc(100vw - 2 * var(--section-x)));max-height:calc(100vh - 164px);max-height:calc(100dvh - 164px);display:flex;flex-direction:column;background:#fff;color:var(--ink);border:1px solid var(--border);border-radius:20px;scroll-margin:88px 0 16px;
    box-shadow:0 28px 64px rgba(10,10,10,.34),0 3px 8px rgba(10,10,10,.14);animation:filter-panel-in .2s var(--ease-out-quart)}
  @keyframes filter-panel-in{from{opacity:0;transform:translate(14px,-6px)}}
  .filter-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 6px 4px 20px;border-bottom:1px solid var(--border)}
  .filter-panel__title{font-size:14px;font-weight:600}
  .filter-panel__close{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink);cursor:pointer;transition:background .15s var(--ease-out-quart)}
  .filter-panel__close:hover{background:var(--surface-alt)}
  .filter-panel__close svg{width:18px;height:18px}
  .filter-panel__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;align-content:start;gap:8px;padding:16px 20px 20px}
  .filter-panel__label{margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
  /* the action bar sits on the off-white, so the white body above and the buttons read as two layers */
  .filter-panel__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 20px;background:var(--surface-alt);border-top:1px solid var(--border);border-radius:0 0 19px 19px}
  .filter-panel button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

  /* Inside the panel the tracks are a 3-wide grid of compact off-white tiles (white on white would
     vanish): name left, icon right. The per-program level dots stay in the markup for the script and
     screen readers but are not drawn here. */
  .filter-panel .dept-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .filter-panel .strip-item{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name icon";align-content:center;align-items:center;gap:8px;min-height:46px;padding:9px 12px 9px 14px;background-color:var(--surface-alt)}
  .filter-panel .strip-item > svg{display:block}
  .filter-panel .strip-item__name{min-height:0;font-size:13px}
  .filter-panel .strip-item__marks{display:none}

  .filter-search{width:100%;min-height:40px;padding:0 18px;border:1px solid var(--border);background:#fff;font-size:14px;color:var(--text);border-radius:999px}
  .filter-search:focus-visible{border-color:#D4A849}
  .filter-pills{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .filter-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--text-muted);font-size:13px;font-weight:500;transition:background .15s var(--ease-out-quart),border-color .15s var(--ease-out-quart),color .15s var(--ease-out-quart)}
  .filter-chip:hover{border-color:var(--ink);color:var(--ink)}
  .filter-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .filter-count{flex:1 1 220px;font-size:12px;line-height:1.4;color:var(--text-muted)}
  .filter-clear{min-height:40px;padding:0 6px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .filter-done{min-height:40px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s var(--ease-out-quart),color .2s var(--ease-out-quart)}
  .filter-done:hover{background:#D4A849;color:var(--ink)}
  /* touch: keep the 44px targets */
  @media (pointer:coarse){
    .filter-search,.filter-chip,.filter-clear,.filter-done{min-height:44px}
    .filter-panel__close{width:44px;height:44px}
    .filter-panel .strip-item{min-height:48px}
  }
  @media (max-width:599px){
    .filter-panel__head{padding-left:16px}
    .filter-panel__body{padding:14px 16px 16px}
    .filter-panel__foot{padding:12px 16px}
    .filter-panel .dept-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
    .filter-panel .strip-item{padding:8px 10px 8px 12px}
    .filter-panel .strip-item__name{font-size:12.5px}
    .filter-count{flex-basis:100%}
  }
  @media (prefers-reduced-motion:reduce){
    .filter-toggle,.filter-done{transition:none}
    .filter-toggle:hover{transform:none}
    .filter-panel{animation:none}
  }

  /* Department chapter: a ruled head (the name) over that department's cards. Used by the "all" view and the
     single-department view alike. */
  .chapter{margin-top:64px}
  .chapter:first-child{margin-top:36px}
  .chapter__head{padding-top:26px;border-top:1px solid rgba(255,255,255,.22)}
  .chapter:first-child .chapter__head{padding-top:0;border-top:0}
  .chapter__name{font-size:clamp(1.6rem,3vw,2.15rem);line-height:1.1;font-weight:500;letter-spacing:-.015em;color:#fff;text-wrap:balance}
  .chapter .course-grid{margin-top:40px}


  /* Catalogue card: builds on .course-card, whose hover lift + gold ring are
     left exactly as they were (the related-program cards on the course pages
     still use the base card). Only the inside is reorganised: the program on
     top (depth + length, title, subtitle), a ticket stub below (who it is for + the link). */
  .course-card--rich,.course-card--rich:nth-child(even){background:rgba(20,40,120,.75);border-radius:18px}
  .course-card--rich:hover{background:rgba(28,52,140,.85)}
  @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
    .course-card--rich,.course-card--rich:nth-child(even){background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
    .course-card--rich:hover{background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.08))}
  }
  /* Hairline edge so the card reads as a surface, not text floating on the sky.
     Lower specificity than the base card's :hover, so the gold hover ring still wins. */
  .course-card--rich{min-height:0;padding:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.28),0 14px 34px rgba(4,12,60,.35)}
  .course-card--rich .course-card__spec{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff}
  /* The level is the same box the legend above uses (white Foundation, black Applied, gold Executive), name only. */
  /* letter-spacing leaves .14em of empty space after the last letter; take it off the right padding so the word sits dead centre */
  .course-card__level{padding:6px calc(12px - .14em) 6px 12px;text-align:center;text-transform:uppercase;border-radius:7px;font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.2;white-space:nowrap}
  .course-card__level--1{background:#fff;color:var(--ink)}
  .course-card__level--2{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
  .course-card__level--3{background:#D4A849;color:var(--ink)}
  .course-card--rich .course-card__sep{color:var(--on-dark-faint);font-weight:500}
  .course-card--rich .course-card__dur{color:#E3BC62;font-weight:600}
  .course-card--rich .course-card__icon{display:none}
  /* Title: regular-weight and larger (like the home cards). The part after the colon continues it in the same face and size, one step lighter. */
  .course-card--rich h3{margin-top:16px;font-size:22px;line-height:1.3;font-weight:500;letter-spacing:-.012em;color:#fff;text-wrap:pretty}
  .course-card__main{display:block}
  .course-card__sub{display:block;margin-top:6px;font-weight:400;color:rgba(255,255,255,.82);text-wrap:pretty}
  .course-card__for{margin-top:20px;display:flex;align-items:baseline;gap:12px;font-size:17px;line-height:1.5;font-weight:500;color:rgba(255,255,255,.9)}
  .course-card__for b{flex:none;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#E3BC62}
  /* Card: the program and who it is for on top; a dashed cut line, inset to the
     text edges, then the link. */
  .course-card__head{flex:1;padding:28px 32px 22px}
  .course-card__foot{display:flex;flex-direction:column;padding:16px 32px 22px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 5px,transparent 5px 11px) 32px 0 / calc(100% - 64px) 2px no-repeat}
  /* The whole card is the target, so the link is a label and does not need its own 44px slot. */
  .course-card--rich .link-arrow{margin-top:0;min-height:32px;padding-bottom:4px;font-size:13.5px;font-weight:700;background-image:linear-gradient(to right,#D4A849 50%,#fff 50%);border-color:rgba(255,255,255,.45)}

  /* The whole card is the link: the anchor's ::after stretches over the card
     (its nearest positioned ancestor), and hovering anywhere on the card
     lights the "See full program" link exactly as hovering the link does. */
  .course-card--rich{cursor:pointer}
  .course-card--rich .link-arrow::after{content:"";position:absolute;inset:0;border-radius:18px}
  .course-card--rich:hover .link-arrow{background-position:0 0;border-color:#D4A849}
  /* One ring around the whole card for keyboard focus, instead of a ring on the small link. */
  @supports selector(:has(a)){
    .course-card--rich:has(.link-arrow:focus-visible){outline:3px solid #D4A849;outline-offset:2px}
    .course-card--rich .link-arrow:focus-visible{outline:0}
  }

  /* Six-column tiling keeps a department's last row centred at normal card
     width (two of the six columns, like every other card): a lone last card
     takes the middle slot, a last pair takes the two middle slots. */
  .course-grid--tiled{grid-template-columns:repeat(6,1fr);gap:20px;background:transparent}
  .course-grid--tiled .course-card{grid-column:span 2}
  .course-grid--tiled .course-card:nth-child(3n+1):last-child{grid-column:3 / span 2}
  .course-grid--tiled .course-card:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2}
  .course-grid--tiled .course-card:nth-child(3n+2):last-child{grid-column:4 / span 2}
  @media (max-width:900px){
    .course-grid--tiled{grid-template-columns:1fr 1fr}
    .course-grid--tiled .course-card,
    .course-grid--tiled .course-card:nth-child(3n+1):last-child,
    .course-grid--tiled .course-card:nth-child(3n+1):nth-last-child(2),
    .course-grid--tiled .course-card:nth-child(3n+2):last-child{grid-column:auto}
    /* a lone last card keeps card width and centres */
    .course-grid--tiled .course-card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc((100% - 20px) / 2)}
  }
  @media (max-width:560px){
    .course-grid--tiled{grid-template-columns:1fr}
    .course-grid--tiled .course-card:last-child:nth-child(odd){width:auto;justify-self:stretch}
  }

  .empty-state{margin-top:32px;padding:56px 24px;text-align:center;border:1px dashed rgba(255,255,255,.25)}
  .empty-state p{font-family:var(--font-serif);color:var(--on-dark-muted);font-size:15px;max-width:40ch;margin:0 auto}
  .empty-state button{margin-top:18px;color:#D4A849;font-size:12.5px;font-weight:500;text-decoration:underline}

  #programs-explorer{opacity:1;transition:opacity .14s var(--ease-out-quart)}
  #programs-explorer.is-updating{opacity:0}
  @media (prefers-reduced-motion:reduce){ #programs-explorer{transition:none} }

  /* ---------- sub-page additions: simple content table (training schedule) ---------- */
  .schedule-table{margin-top:40px;width:100%;border-collapse:collapse}
  .schedule-table th{text-align:left;padding:12px 16px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--ink)}
  .schedule-table td{padding:16px;border-bottom:1px solid var(--border);font-size:14.5px}
  .schedule-table td.dept{color:var(--text-muted);font-size:12.5px}
  .schedule-table tr:hover td{background:var(--surface-alt)}
  .schedule-note{margin-top:28px;padding:18px 20px;border:1px solid var(--border);background:var(--surface-alt);font-size:13px;line-height:1.6;color:var(--text-muted)}

  /* ---------- programs: track title bar and catalogue cards ---------- */
  /* Track title bar: each track's name sits on a dark bar that sticks under the nav as its
     cards scroll (the Filters button rests at its right end, so it never covers a card). The
     next track's bar takes over when its section arrives. */
  .chapter__head,.chapter:first-child .chapter__head{position:sticky;top:72px;z-index:5;display:flex;align-items:center;min-height:72px;margin:0 calc(-1 * var(--section-x));padding:0 calc(var(--section-x) + 176px) 0 var(--section-x);border-top:0;background:linear-gradient(90deg,#070708,#0F1424);border-bottom:1px solid rgba(255,255,255,.14);box-shadow:0 10px 22px rgba(0,0,0,.5)}
  .chapter:first-child{margin-top:0}
  @media (max-width:599px){ .chapter__head,.chapter:first-child .chapter__head{padding-right:calc(var(--section-x) + 124px)} }

  /* Catalogue cards, three across: level dot + name, duration, title, who it is for, cut line, link.
     Solid, opaque cards in front of the scene (no see-through glass, so the particle network never runs
     behind the text). Colour: no blue. Default "ivory" (warm paper + gold on the ink scene, the strongest
     separation); ?cards=graphite (charcoal with a gold top light) and ?cards=edge (charcoal with a
     level-coloured top light: white / silver / gold) are alternatives. */
  .course-card--rich .course-card__spec{gap:10px}
  /* level: the name in a slim metallic box (about 25px tall), blue / navy / gold from the reference, white text, near-square corners, with a subtle gloss and halo (dark text) */
  .course-card--rich .course-card__level{display:inline-flex;align-items:center;padding:5px calc(16px - .16em) 5px 16px;border:0;border-radius:2px;font-size:11.5px;font-weight:700;letter-spacing:.16em;line-height:1.3;white-space:nowrap;text-transform:uppercase;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.08)}
  .course-card--rich .course-card__level--1{background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 46%,rgba(255,255,255,0) 52%),linear-gradient(135deg,#4A80F8 0%,#2F63E8 100%);color:#fff}
  .course-card--rich .course-card__level--2{background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 46%,rgba(255,255,255,0) 52%),linear-gradient(135deg,#183759 0%,#0D2140 100%);color:#fff}
  .course-card--rich .course-card__level--3{background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 46%,rgba(255,255,255,0) 52%),linear-gradient(135deg,#DDBF76 0%,#C29F50 100%);color:#fff}
  .course-card--rich .course-card__dur{color:rgba(255,255,255,.7);font-weight:500}
  .course-card--l1{--lv:241,243,246}
  .course-card--l2{--lv:74,128,248}
  .course-card--l3{--lv:90,120,180}

  /* depth (default): the home page's "Who we are" glass card, given real depth. At rest it is a raised slab:
     bevelled edge, a gold hairline on top, three stacked soft shadows. On hover (mouse) it tilts in 3D toward
     the cursor (angles from programs-explorer.js: --rx/--ry, glare position --mx/--my), the text lifts off the face
     at different depths, a specular glare follows the pointer and the shadow slides opposite the tilt. */
  .explorer-results--cards-depth .course-card--rich,.explorer-results--cards-depth .course-card--rich:nth-child(even){
    border-radius:14px;transform-style:preserve-3d;-webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(165deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.09) 100%),rgba(16,17,24,.74);
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.3),inset -1px -1px 0 rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.5),0 16px 30px rgba(0,0,0,.5),0 40px 70px rgba(0,0,0,.4)}
  .explorer-results--cards-depth .course-card__head,.explorer-results--cards-depth .course-card__foot{transform-style:preserve-3d}
  .explorer-results--cards-depth .course-card--rich::after{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,168,73,.85),transparent);pointer-events:none}
  .explorer-results--cards-depth .course-card--rich::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s var(--ease-out-quart);
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.22),rgba(255,255,255,0) 60%)}
  .explorer-results--cards-depth .course-card--rich:hover{background:linear-gradient(165deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.08) 55%,rgba(255,255,255,.12) 100%),rgba(20,21,30,.78);
    box-shadow:inset 0 0 0 1.5px rgba(212,168,73,.9),inset 1px 1px 0 rgba(255,255,255,.4),0 20px 40px rgba(0,0,0,.6)}
  .explorer-results--cards-depth .course-card--rich:hover::before{opacity:1}
  @media (hover:hover) and (prefers-reduced-motion:no-preference){
    .explorer-results--cards-depth .course-card--rich{transition:transform .35s var(--ease-out-expo),box-shadow .35s var(--ease-out-quart),background .3s var(--ease-out-quart)}
    .explorer-results--cards-depth .course-card--rich:hover{transform:perspective(1100px) translateY(-12px) rotateX(calc(var(--rx,0) * 1deg)) rotateY(calc(var(--ry,0) * 1deg)) scale(1.03);
      box-shadow:inset 0 0 0 1.5px rgba(212,168,73,.9),inset 1px 1px 0 rgba(255,255,255,.4),calc(var(--ry,0) * -2px) calc(30px + var(--rx,0) * 2px) 60px rgba(0,0,0,.7)}
    .explorer-results--cards-depth .course-card__spec,.explorer-results--cards-depth .course-card--rich h3,.explorer-results--cards-depth .course-card__for,.explorer-results--cards-depth .course-card__foot{transition:transform .35s var(--ease-out-expo)}
    .explorer-results--cards-depth .course-card--rich:hover .course-card__spec{transform:translateZ(22px)}
    .explorer-results--cards-depth .course-card--rich:hover h3{transform:translateZ(40px)}
    .explorer-results--cards-depth .course-card--rich:hover .course-card__for{transform:translateZ(18px)}
    .explorer-results--cards-depth .course-card--rich:hover .course-card__foot{transform:translateZ(30px)}
  }

  /* card titles bold (DM Sans is loaded at 400 / 500 / 700, so bold is 700); the main title brand gold, the subtitle after the colon white */
  /* card titles match the page-hero title: DM Sans medium with the same -.02em tracking */
  .explorer-results .course-card--rich h3{font-weight:500;letter-spacing:-.02em}
  .explorer-results .course-card__sub{font-weight:400;letter-spacing:-.02em}
  .explorer-results .course-card--rich h3{color:#D4A849;font-size:28px}
  .explorer-results .course-card__sub{font-size:19.5px}
  /* soft glow on the card contents, like the selected level pill's halo: gold on the title and level box, none on the subtitle, so the text stays crisp */
  .explorer-results .course-card--rich h3{text-shadow:0 0 15px rgba(212,168,73,.26)}
  .explorer-results .course-card__sub{text-shadow:none}
  .explorer-results .course-card__sub{color:#fff}
  /* every level tag the same width (the longest word, FOUNDATION, sets it), text centred */
  .explorer-results .course-card--rich .course-card__level{width:132px;justify-content:center;padding-left:0;padding-right:calc(0px - .16em + .16em)}
  /* duration: bigger and bold */
  .explorer-results .course-card--rich .course-card__dur{font-size:16px;font-weight:700;letter-spacing:.1em}
  .explorer-results .course-card--rich .course-card__level--1{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.08),0 4px 12px rgba(52,112,245,.3)}
  .explorer-results .course-card--rich .course-card__level--2{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.35)}
  .explorer-results .course-card--rich .course-card__level--3{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.08),0 4px 12px rgba(208,176,99,.28)}

  /* Off-white glass cards on every track (the Microsoft Copilot Enablement look). Same see-through build as the dark cards
     (translucent base, light gradient, inset edge highlights, layered shadow), just light, so the background still shows faintly through it. */
  .explorer-results .course-card--rich,
  .explorer-results .course-card--rich:nth-child(even){background:linear-gradient(165deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.34) 55%,rgba(255,255,255,.55) 100%),rgba(246,244,239,.86);
    box-shadow:inset 0 0 0 1px rgba(212,168,73,.5),inset 1px 1px 0 rgba(255,255,255,.85),inset -1px -1px 0 rgba(10,10,10,.14),0 2px 4px rgba(0,0,0,.4),0 16px 30px rgba(0,0,0,.42),0 40px 70px rgba(0,0,0,.34)}
  .explorer-results--cards-depth .course-card--rich:hover{background:linear-gradient(165deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.34) 55%,rgba(255,255,255,.5) 100%),rgba(244,244,246,.86);
    box-shadow:inset 0 0 0 1.5px rgba(212,168,73,.9),inset 1px 1px 0 rgba(255,255,255,.9),0 20px 40px rgba(0,0,0,.55)}
  .explorer-results .course-card--rich::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.7),rgba(255,255,255,0) 60%)}
  .explorer-results .course-card--rich h3{color:#7A5C14;text-shadow:none}
  .explorer-results .course-card--rich .course-card__sub{color:#23252d}
  .explorer-results .course-card--rich .course-card__for{color:var(--ink)}
  .explorer-results .course-card--rich .course-card__for b,
  .explorer-results .course-card--rich .course-card__dur{color:#7A5C14}
  .explorer-results .course-card--rich .course-card__sep{color:#767884}
  .explorer-results .course-card--rich .course-card__foot{background:repeating-linear-gradient(90deg,rgba(10,10,10,.22) 0 5px,transparent 5px 11px) 32px 0 / calc(100% - 64px) 2px no-repeat}
  .explorer-results .course-card--rich .link-arrow{background-image:linear-gradient(to right,#B8860B 50%,var(--ink) 50%);border-color:rgba(10,10,10,.45)}

  /* ivory (default) */
  .explorer-results--cards-ivory .course-card--rich,.explorer-results--cards-ivory .course-card--rich:nth-child(even){background:linear-gradient(180deg,#F9F5EB 0%,#EEE7D6 100%);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 24px 48px rgba(0,0,0,.65)}
  .explorer-results--cards-ivory .course-card--rich:hover{background:#FFFBF2;box-shadow:0 20px 40px rgba(0,0,0,.6),0 0 0 2px #D4A849 inset}
  .explorer-results--cards-ivory .course-card--rich h3,.explorer-results--cards-ivory .course-card__for,.explorer-results--cards-ivory .course-card--rich .course-card__level{color:var(--ink)}
  .explorer-results--cards-ivory .course-card__sub{color:#4a463d}
  .explorer-results--cards-ivory .course-card__for b,.explorer-results--cards-ivory .course-card--rich .course-card__dur{color:#7A5C14}
  .explorer-results--cards-ivory .course-card--rich .course-card__sep{color:#8a8578}
  .explorer-results--cards-ivory .course-card__foot{background:repeating-linear-gradient(90deg,rgba(10,10,10,.2) 0 5px,transparent 5px 11px) 32px 0 / calc(100% - 64px) 2px no-repeat}
  .explorer-results--cards-ivory .course-card--rich .link-arrow{background-image:linear-gradient(to right,#B8860B 50%,var(--ink) 50%);border-color:rgba(10,10,10,.45)}

  /* graphite: charcoal card, a gold light along the top edge */
  .explorer-results--cards-graphite .course-card--rich,.explorer-results--cards-graphite .course-card--rich:nth-child(even){background:linear-gradient(180deg,#2C2E37 0%,#1B1D24 100%);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.11),0 24px 48px rgba(0,0,0,.7)}
  .explorer-results--cards-graphite .course-card--rich::after{content:"";position:absolute;top:0;left:28px;right:28px;height:2px;background:linear-gradient(90deg,transparent,#D4A849 30%,#D4A849 70%,transparent);box-shadow:0 0 18px 2px rgba(212,168,73,.4);pointer-events:none}
  .explorer-results--cards-graphite .course-card--rich:hover{background:linear-gradient(180deg,#363843 0%,#22242C 100%);box-shadow:0 20px 40px rgba(0,0,0,.65),0 0 0 2px #D4A849 inset}

  /* edge: charcoal card, top light coloured by level (white Foundation, silver Applied, gold Executive) */
  .explorer-results--cards-edge .course-card--rich,.explorer-results--cards-edge .course-card--rich:nth-child(even){
    background:radial-gradient(90% 55% at 50% 0%,rgba(var(--lv),.18) 0%,rgba(var(--lv),0) 70%),linear-gradient(180deg,#272931 0%,#191B21 100%);
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px rgba(var(--lv),.3),0 22px 44px rgba(0,0,0,.7)}
  .explorer-results--cards-edge .course-card--rich::after{content:"";position:absolute;top:0;left:28px;right:28px;height:3px;border-radius:0 0 3px 3px;background:rgb(var(--lv));box-shadow:0 0 24px 3px rgba(var(--lv),.5);pointer-events:none}
  .explorer-results--cards-edge .course-card--rich:hover{background:radial-gradient(90% 55% at 50% 0%,rgba(var(--lv),.26) 0%,rgba(var(--lv),0) 70%),linear-gradient(180deg,#30333C 0%,#1F2128 100%);box-shadow:0 20px 40px rgba(0,0,0,.65),0 0 0 2px #D4A849 inset}

  /* lift only where hover exists, so a tap does not leave a card stuck raised */
  @media (hover:none){
    .course-card:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.28),0 14px 34px rgba(4,12,60,.35)}
  }

  /* ---------- programs: inline filter bar (wide screens) ---------- */
  .filter-inline{display:none}
  .track-menu__btn:focus-visible{outline:2px solid #D4A849;outline-offset:2px}
  /* Level control: one gold pill that slides to the selected level */
  .filter-seg{position:relative;display:flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18)}
  .filter-seg__thumb{position:absolute;top:3px;left:0;height:38px;width:0;border-radius:999px;background:linear-gradient(135deg,#E0B84A,#C99A2E);box-shadow:0 4px 14px rgba(212,168,73,.35);pointer-events:none;transition:transform .5s var(--ease-out-expo),width .5s var(--ease-out-expo)}
  .filter-seg button{position:relative;z-index:1;height:38px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:rgba(255,255,255,.82);cursor:pointer;transition:color .25s var(--ease-out-quart)}
  .filter-seg button:hover{color:#fff}
  .filter-seg button[aria-pressed="true"]{color:var(--ink)}
  .filter-seg button:focus-visible{outline:2px solid #fff;outline-offset:1px}
  @media (prefers-reduced-motion:reduce){.filter-seg__thumb{transition:none}}
  /* Track menu: a themed listbox (not the browser's select popup), with a live count per track */
  .track-menu{position:relative}
  .track-menu__btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;height:44px;width:290px;padding:0 14px 0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .2s var(--ease-out-quart),background .2s var(--ease-out-quart)}
  .track-menu__btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .track-menu__btn svg{flex:none;width:16px;height:16px;opacity:.75;transition:transform .3s var(--ease-out-expo)}
  .track-menu__btn:hover{border-color:rgba(212,168,73,.7)}
  .track-menu__btn[aria-expanded="true"]{border-color:#D4A849;background:rgba(212,168,73,.12)}
  .track-menu__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
  .track-menu__list{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:340px;max-height:min(62vh,460px);overflow-y:auto;margin:0;padding:8px;list-style:none;background:rgba(16,17,24,.98);border:1px solid rgba(255,255,255,.16);border-radius:16px;box-shadow:0 28px 64px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.4);animation:track-menu-in .22s var(--ease-out-expo)}
  .track-menu__list[hidden]{display:none}
  @keyframes track-menu-in{from{opacity:0;transform:translateY(-8px) scale(.98)}}
  .track-menu__list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 14px;border-radius:10px;font-size:14px;font-weight:500;color:rgba(255,255,255,.92);cursor:pointer;transition:background .15s var(--ease-out-quart)}
  .track-menu__list li em{font-style:normal;font-size:12px;font-weight:600;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
  .track-menu__list li:hover,.track-menu__list li:focus-visible{background:rgba(255,255,255,.1);outline:0}
  .track-menu__list li:focus-visible{box-shadow:inset 0 0 0 2px #D4A849}
  .track-menu__list li[aria-selected="true"]{background:rgba(212,168,73,.16);color:#F0CB6E;font-weight:700}
  .track-menu__list li[aria-selected="true"] em{color:#E3BC62}
  .track-menu__list li.is-empty{opacity:.4;cursor:not-allowed}
  .track-menu__list li[data-track="all"]{margin-bottom:6px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.12);border-radius:10px 10px 0 0}
  @media (prefers-reduced-motion:reduce){.track-menu__list{animation:none}.track-menu__btn svg{transition:none}}
  @media (min-width:1366px){
    .filter-toggle{display:none}
    .filter-panel{display:none !important}
    .filter-inline{position:absolute;top:var(--dock-y);right:0;display:flex;align-items:center;gap:10px;height:48px}
    .chapter__head,.chapter:first-child .chapter__head{padding-right:calc(var(--section-x) + 640px)}
    .chapter__name{font-size:clamp(1.5rem,2.1vw,1.85rem)}
  }

  /* ---------- programs: ledger look (?look=ledger) — daylight, hairline-ruled, no shadow or blur,
     signal-blue accent, per DESIGN.md. For side-by-side comparison with the glass scene. ---------- */
  .explorer-results--ledger{background:var(--surface);color:var(--ink)}
  .explorer-results--ledger .explorer-fx{display:none}
  .explorer-results--ledger .chapter__name{color:var(--ink)}
  .explorer-results--ledger .chapter__head,.explorer-results--ledger .chapter:first-child .chapter__head{background:#fff;border-bottom-color:var(--border);box-shadow:0 1px 0 var(--border)}
  .explorer-results--ledger .course-card--rich,
  .explorer-results--ledger .course-card--rich:nth-child(even){
    background:#fff;border-radius:2px;box-shadow:none;border:1px solid var(--border);-webkit-backdrop-filter:none;backdrop-filter:none}
  .explorer-results--ledger .course-card--rich:hover{background:#fff;transform:none;box-shadow:inset 0 0 0 1px var(--red);border-color:var(--red)}
  .explorer-results--ledger .course-card--rich h3{color:var(--ink)}
  .explorer-results--ledger .course-card__sub{color:#3d3d3d}
  .explorer-results--ledger .course-card__for{color:var(--ink)}
  .explorer-results--ledger .course-card__for b,
  .explorer-results--ledger .course-card--rich .course-card__dur{color:#7A5C14}
  .explorer-results--ledger .course-card--rich .course-card__sep{color:var(--text-muted)}
  .explorer-results--ledger .course-card--rich .course-card__level{color:var(--ink)}
  .explorer-results--ledger .course-card__foot{background:repeating-linear-gradient(90deg,rgba(10,10,10,.16) 0 5px,transparent 5px 11px) 32px 0 / calc(100% - 64px) 2px no-repeat}
  .explorer-results--ledger .course-card--rich .link-arrow{background-image:linear-gradient(to right,var(--red) 50%,var(--ink) 50%);border-color:rgba(10,10,10,.45)}
  .explorer-results--ledger .course-card--rich:hover .link-arrow{border-color:var(--red)}
  .explorer-results--ledger .empty-state{border-color:var(--border)}
  .explorer-results--ledger .empty-state p{color:#3d3d3d}
  .explorer-results--ledger .empty-state button{color:var(--red)}