/* BUILD 2026-redesign-1030_1 */
/* =============================================================================
   program-index.css - Program Pages index (/program-pages/)
   Staged 2026-09-24. Loaded by the program-index-2026 Format, not HEAD FILES,
   so it only ships on this one page.

   Tokens come from variables.css; every var() carries its hex as a fallback so
   the page still reads correctly if the token file changes order.

   1022_1: running text moves to --pix-body (= --body-ink, #4D5056), matching
   paragraphs sitewide and on Program Pages. Headings, program names, labels,
   inputs and the badge stay on --pix-ink (navy). The row credential line moves
   off Granite to --pix-body.
   1022_2: the intro heading is the page h1 (the page had none); .pix h1 joins
   the global.css neutraliser so legacy h1 caps/Roboto Condensed don't apply.
   1029_3 (VP: no baby blue): tint, card, rule and muted-on-navy are neutral
   Granite grays (#F4F5F6, #F4F5F6, #D9DADC, #DCDEE0). Health Aqua is now the guide's
   #44B8AB (was #00ABB5).

   AA, per the Standing Rule (ratios measured, not assumed):
     #003A52 on white 12.16 | on #F4F5F6 11.14
     #4D5056 on white 8.09  | on #F4F5F6 7.41
     #0077A6 on white 5.01  | on #F4F5F6 4.59
     #00648C on #F4F5F6 6.01 (small links on the tint band)
     #DCDEE0 on #003A52 9.01 | #FACF0A on #003A52 8.10 | white on #B34700 5.50
     tile school label = school colour mixed 35% into white, on #003A52:
       Business 7.16 | Health 9.04 | Humanities 5.90 | Tech 8.10 | STEM 6.84 | grey 7.72
     watermark = school colour (or school-map's optional watermark colour -
       Humanities uses #6F86D6) 30% into #003A52, 40% on hover. Worst case for
       text that can overlap it (#DCDEE0): Health at 40%, 4.51 - only 0.01
       over AA, so do not raise it. 50% fails. (Measure in the browser.)
     field borders #6B8A99 on white 3.67 (UI component, needs 3:1)
     focus rings: #003A52 on white/tint (>= 11), #FACF0A on #003A52 (8.10)
     NOT used: gold focus ring on white (1.50) - the Pass 3 artboard had one;
     it is replaced by a deep-blue ring. The chevron still fills gold on focus.
   ========================================================================== */
 .pix {
	 --pix-ink: var(--heading-ink, #003A52);
	 --pix-body: var(--body-ink, #4D5056);
	 --pix-deep: var(--primary-deep, #003A52);
	 --pix-blue: var(--primary-color, #0077A6);
	 --pix-blue-on-tint: var(--primary-hover, #00648C);
	 --pix-gold: #FACF0A;
	 --pix-on-gold: var(--on-gold, #003A52);
	 --pix-tint: var(--fast-facts-bg-color, #F4F5F6);
	 --pix-card: #F4F5F6;
	 --pix-granite: #707379;
	 --pix-on-deep-muted: #DCDEE0;
	 --pix-field-border: #6B8A99;
	 --pix-rule: #D9DADC;
	 font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
	 color: var(--pix-ink);
	 line-height: 1.5;
}
 .pix *, .pix *::before, .pix *::after {
	 box-sizing: border-box;
}
/* global.css neutralisers: underline borders, brown hovers, uppercase headings */
 .pix a {
	 border-bottom: 0;
}
 .pix h1, .pix h2, .pix h3 {
	 font-family: inherit;
	 text-transform: none;
	 margin: 0;
	 letter-spacing: var(--tracking-heading, -0.015em);
}
/* :where() keeps these resets at zero specificity so component margins win */
 :where(.pix) p {
	 margin: 0;
}
 :where(.pix) ul {
	 list-style: none;
	 margin: 0;
	 padding: 0;
}
/* ---- bands ------------------------------------------------------------- */
 .pix-band {
	 padding: 66px 0 78px;
}
 .pix-find {
	 background: var(--pix-tint);
	 padding-top: 68px;
}
 .pix-credentials {
	 padding: 68px 0 72px;
}
 .pix-tools {
	 background: var(--pix-deep);
	 padding: 64px 0 70px;
}
 .pix-h2 {
	 font-size: 34px;
	 font-weight: 700;
	 line-height: 1.2;
	 color: var(--pix-ink);
	 text-align: center;
}
 .pix-h2--left {
	 text-align: left;
}
/* #pix-find-h takes focus only programmatically (tabindex -1, after a credential card click). It is not a control, so it draws no ring. */
 .pix .pix-h2:focus, .pix .pix-h2:focus-visible {
	 outline: none;
}
 .pix-sub {
	 text-align: center;
	 font-size: 18px;
	 color: var(--pix-body);
	 margin: 14px auto 44px;
	 max-width: 46em;
}
 .pix-h3 {
	 font-size: 19px;
	 font-weight: 700;
	 line-height: 1.3;
	 color: var(--pix-ink);
}
/* ---- intro + badge ----------------------------------------------------- */
 .pix-intro {
	 padding: 52px 0 0;
}
 .pix-intro-grid {
	 display: grid;
	 grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	 gap: 52px;
	 align-items: start;
}
 .pix-intro-body {
	 margin-top: 16px;
	 font-size: 18px;
	 line-height: 1.6;
	 color: var(--pix-body);
}
 .pix-intro-body p + p {
	 margin-top: 12px;
}
 .pix-intro-body a {
	 color: var(--pix-blue);
	 text-decoration: underline;
}
 .pix-badge {
	 background: var(--pix-tint);
	 border-radius: 12px;
	 padding: 28px;
	 color: var(--pix-ink);
}
 .pix-badge-total {
	 font-size: 16px;
}
 .pix-badge-num {
	 display: block;
	 font-size: 46px;
	 font-weight: 800;
	 line-height: 1;
	 margin-bottom: 6px;
}
 .pix-badge-split {
	 font-size: 16px;
	 line-height: 1.85;
	 border-top: 1px solid #D9DADC;
	 margin-top: 18px;
	 padding-top: 14px;
}
/* ---- band 1: highlight tiles ------------------------------------------ */
 .pix-deal {
	 display: grid;
	 grid-template-columns: repeat(4, minmax(0, 1fr));
	 gap: 24px;
}
/* no-JS: the first four, static, never an empty container */
 .pix-carousel:not(.is-dealt) .pix-deal-item:nth-child(n+5) {
	 display: none;
}
 .pix-tile {
	 position: relative;
	 overflow: hidden;
	 display: block;
	 height: 315px;
	 padding: 30px 28px;
	 background: var(--pix-deep);
	 border-radius: 12px;
	 color: #fff;
	 text-decoration: none;
	 transition: transform .22s ease, box-shadow .22s ease;
}
 .pix-tile::after {
	/* school colour bar, 7px -> 12px */
	 content: "";
	 position: absolute;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 height: 7px;
	 background: var(--pix-school, #707379);
	 transition: height .22s ease;
}
 .pix-tile-mark {
	/* one watermark icon, bleeding off the corner */
	 position: absolute;
	 right: -26px;
	 bottom: -14px;
	 font-size: 190px;
	 line-height: 1;
	 color: #0E5A74;
	 color: color-mix(in srgb, var(--pix-mark, var(--pix-school, #707379)) 30%, #003A52);
	 transition: transform .28s ease, color .28s ease;
}
 .pix-tile-text {
	 position: relative;
	 z-index: 1;
	 display: block;
}
 .pix-tile-school {
	 display: block;
	 font-size: 12px;
	 font-weight: 800;
	 letter-spacing: .09em;
	 text-transform: uppercase;
	 line-height: 1.35;
	 color: #DCDEE0;
	 color: color-mix(in srgb, var(--pix-school, #707379) 35%, #fff);
}
 .pix .pix-tile-name {
	 font-size: 25px;
	 font-weight: 700;
	 line-height: 1.18;
	 color: #fff;
	 margin-top: 14px;
}
 .pix-tile-cred {
	 display: block;
	 font-size: 15px;
	 color: var(--pix-on-deep-muted);
	 margin-top: 11px;
}
 .pix-tile-chev {
	 position: absolute;
	 left: 28px;
	 bottom: 26px;
	 z-index: 1;
	 width: 40px;
	 height: 40px;
	 border-radius: 50%;
	 border: 2px solid var(--pix-gold);
	 color: var(--pix-gold);
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 font-size: 18px;
	 transition: background-color .22s ease, color .22s ease;
}
 .pix-tile:hover, .pix-tile:focus-visible {
	 transform: translateY(-6px);
	 box-shadow: 0 14px 30px rgba(0, 58, 82, .28);
	 color: #fff;
}
 .pix-tile:hover::after, .pix-tile:focus-visible::after {
	 height: 12px;
}
 .pix-tile:hover .pix-tile-mark, .pix-tile:focus-visible .pix-tile-mark {
	 transform: scale(1.14) rotate(-5deg);
	 color: color-mix(in srgb, var(--pix-mark, var(--pix-school, #707379)) 40%, #003A52);
}
 .pix-tile:hover .pix-tile-chev, .pix-tile:focus-visible .pix-tile-chev {
	 background: var(--pix-gold);
	 color: var(--pix-deep);
}
 .pix-tile:focus-visible {
	 outline: 3px solid var(--pix-deep);
	 outline-offset: 3px;
}
/* page change: current tiles slide out, the next set slides in, staggered */
 .pix-deal-item.is-leaving {
	 animation: pix-leave .18s ease-in forwards;
}
 .pix-deal-item.is-entering {
	 animation: pix-enter .42s cubic-bezier(.2, .8, .2, 1) both;
}
 @keyframes pix-leave {
	 to {
		 opacity: 0;
		 transform: translateX(calc(var(--pix-dir, 1) * -32px));
	}
}
 @keyframes pix-enter {
	 from {
		 opacity: 0;
		 transform: translateX(calc(var(--pix-dir, 1) * 48px));
	}
}
 .pix-carousel-nav {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 gap: 14px;
	 margin-top: 34px;
}
 .pix-carousel-nav[hidden] {
	 display: none;
}
 .pix-nav-btn {
	 width: 46px;
	 height: 46px;
	 border-radius: 50%;
	 border: 2px solid var(--pix-blue);
	 background: #fff;
	 color: var(--pix-blue);
	 font-size: 18px;
	 line-height: 1;
	 cursor: pointer;
}
 .pix-nav-btn:hover {
	 background: var(--pix-blue);
	 color: #fff;
}
 .pix-dots {
	 display: flex;
	 gap: 2px;
}
 .pix-dot {
	/* 28px target, 12px visible dot */
	 width: 28px;
	 height: 28px;
	 padding: 0;
	 border: 0;
	 background: transparent;
	 cursor: pointer;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}
 .pix-dot::before {
	 content: "";
	 width: 12px;
	 height: 12px;
	 border-radius: 50%;
	 border: 2px solid var(--pix-blue);
}
 .pix-dot[aria-current="true"]::before {
	 background: var(--pix-deep);
	 border-color: var(--pix-deep);
}
 .pix-counter {
	 display: none;
	 min-width: 64px;
	 text-align: center;
	 font-size: 16px;
	 font-weight: 700;
	 color: var(--pix-ink);
}
 .pix-nav-btn:focus-visible, .pix-dot:focus-visible {
	 outline: 3px solid var(--pix-deep);
	 outline-offset: 2px;
}
/* ---- gold pill (See all / Show more) ---------------------------------- */
 .pix-pill-row {
	 text-align: center;
	 margin-top: 34px;
}
 .pix-pill {
	 display: inline-block;
	 background: var(--pix-gold);
	 color: var(--pix-on-gold);
	 border: 0;
	 border-radius: 40px;
	 padding: 15px 56px;
	 font-family: inherit;
	 font-size: 16px;
	 font-weight: 800;
	 letter-spacing: .07em;
	 text-transform: uppercase;
	 text-decoration: none;
	 cursor: pointer;
}
 .pix-pill:hover {
	 background: var(--pix-deep);
	 color: #fff;
}
 .pix-pill:focus-visible {
	 outline: 3px solid var(--pix-deep);
	 outline-offset: 3px;
}
/* ---- band 2: filters + A-Z list --------------------------------------- */
 .pix-filters {
	 display: grid;
	 grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	 gap: 20px;
	 align-items: end;
	 background: #fff;
	 border: 1px solid var(--pix-rule);
	 border-radius: 12px;
	 padding: 30px;
}
 .pix-filters[hidden] {
	 display: none;
}
 .pix-field label, .pix-label-row label {
	 display: block;
	 font-size: 14px;
	 font-weight: 700;
	 color: var(--pix-ink);
	 margin-bottom: 8px;
}
 .pix-label-row {
	 display: flex;
	 align-items: baseline;
	 justify-content: space-between;
	 gap: 8px;
}
 .pix-label-row a {
	 font-size: 13px;
	 font-weight: 600;
	 color: var(--pix-blue);
	 text-decoration: underline;
	 white-space: nowrap;
}
 .pix .pix-field input, .pix .pix-field select {
	 box-sizing: border-box;
	/* legacy normalize makes search inputs content-box */
	 display: block;
	 width: 100%;
	 height: 52px;
	 border: 2px solid var(--pix-field-border);
	 border-radius: 8px;
	 padding: 0 14px;
	 font-family: inherit;
	 font-size: 16px;
	 color: var(--pix-ink);
	 background-color: #fff;
}
 .pix .pix-field input {
	 -webkit-appearance: none;
	 appearance: none;
}
 .pix .pix-field input:focus, .pix .pix-field select:focus {
	 outline: 3px solid var(--pix-blue);
	 outline-offset: 1px;
	 border-color: var(--pix-deep);
}
 .pix-status-row {
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 gap: 16px;
	 margin-top: 28px;
	 min-height: 44px;
}
 .pix-count {
	 font-size: 17px;
	 color: var(--pix-body);
}
 .pix-clear {
	 border: 0;
	 background: none;
	 padding: 10px;
	 font-family: inherit;
	 font-size: 16px;
	 font-weight: 600;
	 color: var(--pix-blue-on-tint);
	 text-decoration: underline;
	 cursor: pointer;
}
 .pix-clear[hidden] {
	 display: none;
}
 .pix-clear--inline {
	 padding: 0 4px;
}
 .pix-clear:focus-visible {
	 outline: 3px solid var(--pix-deep);
	 outline-offset: 2px;
}
 .pix-list {
	 display: grid;
	 grid-template-columns: repeat(3, minmax(0, 1fr));
	 gap: 16px;
	 margin-top: 14px;
}
 .pix-row[hidden] {
	 display: none;
}
 .pix-row a {
	 display: block;
	 height: 100%;
	 background: #fff;
	 border-left: 6px solid var(--pix-school, #707379);
	 border-radius: 8px;
	 padding: 20px 22px;
	 text-decoration: none;
}
 .pix .pix-row-name {
	 font-size: 19px;
	 font-weight: 700;
	 line-height: 1.3;
	 color: var(--pix-ink);
}
 .pix-row-cred {
	 display: block;
	 font-size: 15px;
	 color: var(--pix-body);
	 margin-top: 7px;
}
 .pix-row a:hover .pix-row-name {
	 text-decoration: underline;
}
 .pix-row a:focus-visible {
	 outline: 3px solid var(--pix-deep);
	 outline-offset: 2px;
}
 .pix-empty {
	 margin-top: 20px;
	 font-size: 17px;
	 color: var(--pix-body);
}
 .pix-empty[hidden] {
	 display: none;
}
/* ---- band 3: credential explainers ------------------------------------ */
 .pix-cred-grid {
	 display: grid;
	 grid-template-columns: repeat(3, minmax(0, 1fr));
	 gap: 20px;
}
 .pix-cred-grid + .pix-stack, .pix-stack + .pix-cred-grid {
	 margin-top: 20px;
}
 .pix-cred a {
	 display: block;
	 height: 100%;
	 background: var(--pix-card);
	 border-radius: 10px;
	 padding: 26px;
	 text-decoration: none;
	 color: var(--pix-ink);
}
 .pix-cred-head {
	 display: flex;
	 align-items: baseline;
	 gap: 11px;
}
 .pix-cred-badge {
	 flex-shrink: 0;
	 background: var(--pix-deep);
	 color: #fff;
	 font-size: 13px;
	 font-weight: 800;
	 padding: 5px 10px;
	 border-radius: 5px;
}
 .pix-cred--technical-certificate .pix-cred-badge {
	 background: #B34700;
}
 .pix .pix-cred-name {
	 font-size: 19px;
	 font-weight: 700;
	 line-height: 1.3;
	 color: var(--pix-ink);
}
 .pix-cred-blurb {
	 display: block;
	 margin-top: 12px;
	 font-size: 16px;
	 line-height: 1.55;
	 color: var(--pix-body);
}
 .pix-cred-count {
	 display: block;
	 margin-top: 14px;
	 font-size: 15px;
	 font-weight: 700;
	 color: var(--pix-blue);
}
 .pix-cred a:hover .pix-cred-count {
	 text-decoration: underline;
}
 .pix-cred a:focus-visible {
	 outline: 3px solid var(--pix-deep);
	 outline-offset: 2px;
}
 .pix-stack {
	 background: var(--pix-card);
	 border-radius: 10px;
	 padding: 24px 26px;
}
 .pix-stack p {
	 margin-top: 10px;
	 font-size: 16px;
	 line-height: 1.55;
	 color: var(--pix-body);
	 max-width: 940px;
}
/* ---- band 4: planning tools ------------------------------------------- */
 .pix-tools .pix-h2 {
	 color: #fff;
}
 .pix-tools .pix-sub {
	 color: var(--pix-on-deep-muted);
}
 .pix-tool-grid {
	 display: grid;
	 grid-template-columns: repeat(3, minmax(0, 1fr));
	 gap: 30px;
}
 .pix-tool-icon {
	 display: block;
	 font-size: 40px;
	 color: var(--pix-gold);
}
 .pix-tools .pix-h3 {
	 font-size: 20px;
	 margin-top: 16px;
}
 .pix-tools .pix-h3 a {
	 color: #fff;
	 text-decoration: none;
}
 .pix-tools .pix-h3 a:hover {
	 color: #fff;
	 text-decoration: underline;
}
 .pix-tools .pix-h3 a:focus-visible {
	 outline: 3px solid var(--pix-gold);
	 outline-offset: 3px;
}
 .pix-tool p {
	 margin-top: 9px;
	 font-size: 16px;
	 line-height: 1.55;
	 color: var(--pix-on-deep-muted);
}
/* ---- responsive -------------------------------------------------------- */
 @media (max-width: 1199.98px) {
	 .pix-deal {
		 grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	 .pix-filters {
		 grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	 .pix-field--q {
		 grid-column: 1 / -1;
	}
}
 @media (max-width: 991.98px) {
	 .pix-intro-grid {
		 grid-template-columns: minmax(0, 1fr);
		 gap: 28px;
	}
	 .pix-list, .pix-cred-grid, .pix-tool-grid {
		 grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
 @media (max-width: 575.98px) {
	 .pix-band {
		 padding: 44px 0 52px;
	}
	 .pix-intro {
		 padding-top: 32px;
	}
	 .pix-h2 {
		 font-size: 28px;
	}
	 .pix-sub {
		 font-size: 17px;
		 margin-bottom: 28px;
	}
	 .pix-deal, .pix-filters, .pix-list, .pix-cred-grid, .pix-tool-grid {
		 grid-template-columns: minmax(0, 1fr);
	}
	 .pix-filters {
		 padding: 20px;
		 gap: 16px;
	}
	 .pix-tile {
		 height: 260px;
		 padding: 26px 24px;
	}
	 .pix-tile-chev {
		 left: 24px;
		 bottom: 22px;
	}
	 .pix-pill {
		 padding: 15px 36px;
	}
	 .pix-dots {
		 display: none;
	}
	/* one tile per page: a counter, not 12 dots */
	 .pix-counter {
		 display: block;
	}
}
 @media (prefers-reduced-motion: reduce) {
	 .pix-tile, .pix-tile::after, .pix-tile-mark, .pix-tile-chev {
		 transition: none;
	}
	 .pix-tile:hover, .pix-tile:focus-visible {
		 transform: none;
	}
	 .pix-tile:hover .pix-tile-mark, .pix-tile:focus-visible .pix-tile-mark {
		 transform: none;
	}
	 .pix-deal-item.is-leaving, .pix-deal-item.is-entering {
		 animation: none;
	}
}
/* ---- SLCC Tech (2026-10-06, build 1006_1) --------------------------------
   Filter checkbox spans the full filter row, under the four fields. Row tag #B34700 on the white row card 5.50:1. Tile tag #DCDEE0 on #003A52 9.01:1. */
 .pix-field--tech {
	 grid-column: 1 / -1;
	 display: flex;
	 align-items: center;
	 gap: 10px;
}
 .pix .pix-field--tech input {
	 width: 22px;
	 height: 22px;
	 margin: 0;
	 padding: 0;
	 flex: 0 0 auto;
	 -webkit-appearance: auto;
	 appearance: auto;
	 accent-color: var(--pix-deep);
}
 .pix .pix-field--tech label {
	 margin: 0;
	 font-size: 16px;
	 font-weight: 600;
}
 .pix-row-tech {
	 display: block;
	 margin-top: 6px;
	 font-size: 13px;
	 font-weight: 700;
	 letter-spacing: .04em;
	 text-transform: uppercase;
	 color: #B34700;
}
 .pix-tile-tech {
	 display: block;
	 margin-top: 8px;
	 font-size: 12px;
	 font-weight: 800;
	 letter-spacing: .09em;
	 text-transform: uppercase;
	 color: var(--pix-on-deep-muted);
}

/* 1030_1: Not Sure link under the intro text; space between the Featured programs
   heading and the carousel now that the highlights subtitle is blank. */
.pix .pix-intro-cta {
	margin: 1.5rem 0 0;
}
.pix .pix-highlights .pix-h2 + .pix-carousel {
	margin-top: 2rem;
}