/* IYKYT theme styles. Sections: tokens, base, utilities, header, hero,
   why-teach, paths, inspo, benefits, teach-here, questions, marquee, footer,
   responsive. Design source: exported Figma PDFs.

   Conventions: reuse existing tokens and classes before adding new ones.
   A color-only heading variant is a modifier (.iykyt-h2--yellow), not a new
   block class. Don't add a token unless it's referenced (brand palette colors
   are the one exception, kept complete as reference). Remove dead selectors
   when markup/JS hooks change. See CLAUDE.md in the theme root. */

:root {
  --iykyt-black: #161715;
  --iykyt-off-black: #20211e;
  --iykyt-offwhite: #fffdf4;
  --iykyt-gray: #333333;
  --iykyt-placeholder-gray: #d9d9d9;
  --iykyt-yellow: #fff200;
  --iykyt-magenta: #ec0b8c;
  --iykyt-cyan: #00aeef;

  --iykyt-page-max: 1440px;
  --iykyt-content-max: 1220px;
  --iykyt-gutter: clamp(18px, 4vw, 60px);
  --iykyt-card-gap: clamp(16px, 2vw, 28px);
  --iykyt-panel-pad: clamp(28px, 6vw, 88px);

  --iykyt-radius-panel: clamp(32px, 4.3vw, 62px);
  --iykyt-radius-card: 20px;
  --iykyt-radius-button: 999px;
  --iykyt-stroke: 4px;

  /* Salary-chart track behind each bar (interior Benefits page). */
  --iykyt-chart-track: #e7e7e2;

  --iykyt-font-display: "Big Shoulders", "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --iykyt-font-body: "TikTok Sans", "Helvetica Neue", Arial, sans-serif;

  --iykyt-header-h: 88px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background-color: var(--iykyt-black);
  color: var(--iykyt-offwhite);
  font-family: var(--iykyt-font-body);
  font-size: 16px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

p { margin: 0; }

/* Utilities */

.iykyt-container {
  width: 100%;
  max-width: var(--iykyt-content-max);
  margin-inline: auto;
  padding-inline: var(--iykyt-gutter);
}

/* Horizontal scrollers. Shared by the district chip row and the college-credit
   card rail. The row runs full-bleed and the track carries the container's left
   inset, so the first item lines up with the page text while the last one runs
   off the right edge. That cut-off item is the main cue that the row scrolls;
   the native scrollbar is hidden because it reads as a rendering fault against
   the dark ground. JS sets data-overflow so the fade only appears on a side
   that still has content to reach. Keyboard users get to the row through
   tabindex="0" on the scroller, which is required once the scrollbar is gone. */

.iykyt-scroller {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-block: 4px 8px;
  scrollbar-width: none;
}
.iykyt-scroller::-webkit-scrollbar { display: none; }
.iykyt-scroller:focus-visible { outline: 3px solid var(--iykyt-cyan); outline-offset: 4px; }

.iykyt-scroller__track {
  display: flex;
  gap: var(--iykyt-card-gap);
  width: max-content;
  margin: 0;
  padding-left: max(var(--iykyt-gutter), calc((100% - var(--iykyt-content-max)) / 2));
  padding-right: var(--iykyt-gutter);
  list-style: none;
}
.iykyt-scroller__track--chips { gap: clamp(12px, 1.4vw, 20px); }

.iykyt-scroller[data-overflow="end"] {
  -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%);
  mask-image: linear-gradient(to right, #000 80%, transparent 100%);
}
.iykyt-scroller[data-overflow="start"] {
  -webkit-mask-image: linear-gradient(to left, #000 80%, transparent 100%);
  mask-image: linear-gradient(to left, #000 80%, transparent 100%);
}
.iykyt-scroller[data-overflow="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 80%, transparent 100%);
}

.iykyt-h1 { font-size: clamp(40px, 11vw, 150px); line-height: 0.9; }
.iykyt-h2 { font-size: clamp(34px, 8vw, 92px); line-height: 0.94; }
.iykyt-h3 { font-size: clamp(30px, 5vw, 42px); line-height: 1; }
.iykyt-h4 { font-size: clamp(23px, 3.4vw, 32px); line-height: 1.02; }

.iykyt-h2--yellow { color: var(--iykyt-yellow); }

.iykyt-eyebrow {
  font-family: var(--iykyt-font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.iykyt-copy-lg { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.35; font-weight: 500; }
.iykyt-copy { font-size: 16px; line-height: 1.4; }

.iykyt-section { padding-block: clamp(40px, 6vw, 72px); }

/* Sticker images are decorative, positioned by their placement wrapper. */
.iykyt-sticker {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  user-select: none;
  pointer-events: none;
}

/* Buttons / pills */

.iykyt-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--iykyt-radius-button);
  font-family: var(--iykyt-font-body);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.iykyt-pill:hover { transform: translateY(-2px); }
.iykyt-pill:active { transform: translateY(0); }

.iykyt-pill--outline {
  border-color: var(--iykyt-yellow);
  color: var(--iykyt-yellow);
  background: transparent;
  padding: 14px 26px;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.iykyt-pill--outline:hover {
  background: var(--iykyt-yellow);
  color: var(--iykyt-black);
}

.iykyt-pill--cyan {
  background: var(--iykyt-cyan);
  color: var(--iykyt-black);
  padding: 18px 30px;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.iykyt-pill--cyan:hover { box-shadow: 6px 6px 0 var(--iykyt-black); }

.iykyt-pill--yellow {
  background: var(--iykyt-yellow);
  color: var(--iykyt-black);
  padding: 20px 28px;
  width: 100%;
  justify-content: flex-start;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Header */

.iykyt-cmyk {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.iykyt-cmyk span { display: block; width: 100%; height: 9px; }
.iykyt-cmyk span:nth-child(1) { background: var(--iykyt-cyan); }
.iykyt-cmyk span:nth-child(2) { background: var(--iykyt-yellow); }
.iykyt-cmyk span:nth-child(3) { background: var(--iykyt-magenta); }

.iykyt-header {
  position: relative;
  z-index: 50;
  background: var(--iykyt-black);
}
.iykyt-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--iykyt-header-h);
  padding-inline: clamp(18px, 4vw, 48px);
}

/* Header bar: badge left, nav centered, CTA right — one row, both variants. */
.iykyt-header__logo {
  position: relative;
  flex: 0 0 auto;
  width: clamp(120px, 13vw, 176px);
  margin-block: -10px;
  z-index: 2;
}
.iykyt-header__logo img {
  width: 100%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}
.iykyt-header__cta { margin-left: auto; flex: 0 0 auto; }

.iykyt-nav--row {
  flex: 1 1 auto;
  min-width: 0;
}
.iykyt-nav--row ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.8vw, 52px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.iykyt-nav--row a {
  font-weight: 700;
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--iykyt-offwhite);
  transition: color 0.2s ease;
}
.iykyt-nav--row a:hover,
.iykyt-nav--row a.is-active,
.iykyt-nav--row .current-menu-item a { color: var(--iykyt-yellow); }

/* Language switcher (Weglot) embedded in the header bar via [weglot_switcher] */
.iykyt-langswitch {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Hide Weglot's floating default switcher; only the shortcode one (which
   carries .weglot-shortcode, placed in the header) should show. */
.country-selector:not(.weglot-shortcode) { display: none !important; }

/* GTranslate two-flag switcher (staging spike; see inc/gtranslate.php). The
   flags are [gt-link] anchors the plugin's base.js binds and marks active. */
.iykyt-langswitch--flags { gap: 8px; }
.iykyt-langswitch--flags a {
  display: inline-flex;
  padding: 2px;
  line-height: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.iykyt-langswitch--flags a:hover,
.iykyt-langswitch--flags a:focus-visible,
.iykyt-langswitch--flags a.gt-current-lang { opacity: 1; }
.iykyt-langswitch--flags img { display: block; width: 22px; height: auto; border-radius: 2px; }

/* Suppress Google's injected top banner and the body offset it adds. */
.goog-te-banner-frame,
.skiptranslate { display: none !important; }
body { top: 0 !important; }

.iykyt-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: auto;
  color: var(--iykyt-yellow);
  background: transparent;
  border: var(--iykyt-stroke) solid var(--iykyt-yellow);
  border-radius: 12px;
}

/* Hero */

.iykyt-hero {
  position: relative;
  overflow: hidden;
  background: var(--iykyt-black) url("../images/tv-static-bg.png") 0 0 / 100% 100% no-repeat;
  padding-block: clamp(40px, 7vw, 96px) clamp(48px, 7vw, 104px);
}
.iykyt-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--iykyt-gutter);
  text-align: center;
}
.iykyt-hero__ghost {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(var(--iykyt-ghost-shift, 0px));
  width: clamp(300px, 62vw, 894px);
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}
.iykyt-hero__title {
  color: var(--iykyt-yellow);
  max-width: 100%;
  margin-inline: auto;
  overflow-wrap: break-word;
}
.iykyt-hero__line { display: block; }
.iykyt-hero__title .iykyt-boxed {
  display: inline-block;
  background: var(--iykyt-yellow);
  color: var(--iykyt-black);
  border-radius: 0.2em;
  padding: 0 0.16em 0.06em;
  line-height: 0.9;
  transform: rotate(-0.5deg);
}
.iykyt-hero__copy {
  margin-top: clamp(24px, 3vw, 40px);
  color: var(--iykyt-offwhite);
  max-width: 52ch;
  margin-inline: auto;
  font-weight: 600;
}
.iykyt-hero__sub {
  margin-top: 14px;
  color: var(--iykyt-cyan);
  font-weight: 700;
  max-width: 46ch;
  margin-inline: auto;
}
.iykyt-hero__scroll {
  display: inline-flex;
  margin-top: clamp(20px, 3vw, 34px);
  color: var(--iykyt-cyan);
  animation: iykyt-bob 1.8s ease-in-out infinite;
}
@keyframes iykyt-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.iykyt-hero__cast { display: contents; }

/* Cutouts are sized by HEIGHT (not width) so the two students read as the same
   height despite different aspect ratios, and are anchored to bottom:0 — which
   equals the top of the white Why-teach panel (see the abutting rule below), so
   they stay pegged to the container as the viewport changes. */
.iykyt-hero__cutout {
  position: absolute;
  bottom: 0;
  z-index: 2;
  height: clamp(280px, 30vw, 400px);
  width: auto;
  pointer-events: none;
}
/* Pin the cutouts to the edges of a centered page-max band, not the raw
   viewport edges, so on wide screens they don't drift out to the far corners. */
.iykyt-hero__cutout--left { left: max(0px, calc((100% - var(--iykyt-page-max)) / 2)); }
.iykyt-hero__cutout--right { right: max(0px, calc((100% - var(--iykyt-page-max)) / 2)); }

/* The section right after the hero (Why teach) abuts the hero bottom, so the
   cutouts' clipped bottoms sit exactly on the white panel's top edge. */
.iykyt-hero + .iykyt-section { padding-top: 0; }

/* Offwhite / magenta rounded panels */

.iykyt-panel {
  max-width: 1406px;
  margin-inline: auto;
  border-radius: var(--iykyt-radius-panel);
  padding: var(--iykyt-panel-pad);
}
.iykyt-panel--offwhite { background: var(--iykyt-offwhite); color: var(--iykyt-black); }
.iykyt-panel--magenta { background: var(--iykyt-magenta); color: var(--iykyt-black); }

.iykyt-panel__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.iykyt-panel__head--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: clamp(20px, 4vw, 64px);
}
.iykyt-panel__intro { font-weight: 700; }

.iykyt-panel__headlink { color: inherit; text-decoration: none; }
.iykyt-panel__headlink:hover,
.iykyt-panel__headlink:focus-visible { text-decoration: underline; text-underline-offset: 0.08em; }

/* Info card grid (Why teach) */

.iykyt-cardgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--iykyt-card-gap);
}

.iykyt-card {
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-card);
  padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.6vw, 40px) clamp(30px, 4vw, 54px);
}
.iykyt-card--cyan { background: var(--iykyt-cyan); color: var(--iykyt-black); }
.iykyt-card--magenta { background: var(--iykyt-magenta); color: var(--iykyt-black); }
.iykyt-card--yellow { background: var(--iykyt-yellow); color: var(--iykyt-black); }
.iykyt-card--offwhite { background: var(--iykyt-offwhite); color: var(--iykyt-black); }
.iykyt-card--black { background: var(--iykyt-off-black); color: var(--iykyt-yellow); }
.iykyt-card--black .iykyt-card__body { color: var(--iykyt-yellow); }

.iykyt-card__eyebrow {
  display: block;
  margin-bottom: clamp(18px, 2.5vw, 30px);
  opacity: 0.85;
}
.iykyt-card--cyan .iykyt-card__eyebrow,
.iykyt-card--black .iykyt-card__eyebrow { color: var(--iykyt-offwhite); opacity: 0.9; }

.iykyt-card__title { margin-bottom: 14px; }
.iykyt-card__body { font-weight: 600; max-width: 40ch; }

/* Teaching paths deck */

.iykyt-paths__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--iykyt-card-gap);
}
.iykyt-pathcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-card);
  padding: clamp(22px, 2.4vw, 34px);
  min-height: 232px;
  color: inherit;
  text-decoration: none;
}
.iykyt-pathcard--offwhite { background: var(--iykyt-offwhite); color: var(--iykyt-black); }
.iykyt-pathcard--yellow { background: var(--iykyt-yellow); color: var(--iykyt-black); }
.iykyt-pathcard--magenta { background: var(--iykyt-magenta); color: var(--iykyt-black); }
.iykyt-pathcard--cyan { background: var(--iykyt-cyan); color: var(--iykyt-black); }
.iykyt-pathcard__icon { margin-bottom: 6px; }
.iykyt-pathcard__icon .iykyt-icon { width: 34px; height: 34px; }
.iykyt-pathcard--offwhite .iykyt-pathcard__icon { color: var(--iykyt-magenta); }
.iykyt-pathcard--yellow .iykyt-pathcard__icon { color: var(--iykyt-black); }
.iykyt-pathcard--magenta .iykyt-pathcard__icon { color: var(--iykyt-offwhite); }
.iykyt-pathcard--cyan .iykyt-pathcard__icon { color: var(--iykyt-offwhite); }
.iykyt-pathcard--bilingual .iykyt-pathcard__icon { color: var(--iykyt-cyan); }
.iykyt-pathcard__title {
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1;
  text-transform: uppercase;
}
.iykyt-pathcard__body { font-weight: 600; }

.iykyt-paths__stickers {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.iykyt-paths__stickers .iykyt-sticker--emoji { width: clamp(70px, 8vw, 108px); }
.iykyt-paths__stickers .iykyt-sticker--squiggle { width: clamp(84px, 10vw, 132px); align-self: flex-end; }

/* Teaching inspo panel */

.iykyt-inspo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: stretch;
}
.iykyt-inspo__media {
  position: relative;
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: 28px;
  overflow: hidden;
  min-height: 340px;
  background: var(--iykyt-placeholder-gray);
}
.iykyt-inspo__media img { width: 100%; height: 100%; object-fit: cover; }
.iykyt-inspo__links {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  justify-content: center;
}
.iykyt-linkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-button);
  padding: clamp(16px, 1.7vw, 22px) clamp(22px, 2.4vw, 34px);
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.iykyt-linkbar:hover { transform: translateX(4px); box-shadow: -4px 4px 0 rgba(0,0,0,0.25); }
.iykyt-linkbar .iykyt-icon { width: 26px; height: 26px; flex: 0 0 auto; }
.iykyt-linkbar--yellow { background: var(--iykyt-yellow); color: var(--iykyt-black); }
.iykyt-linkbar--cyan { background: var(--iykyt-cyan); color: var(--iykyt-black); }
.iykyt-linkbar--offwhite { background: var(--iykyt-offwhite); color: var(--iykyt-black); }
.iykyt-linkbar--black { background: var(--iykyt-off-black); color: var(--iykyt-yellow); }

/* Teaching benefits mosaic */

.iykyt-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--iykyt-card-gap);
}
.iykyt-benefit {
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-card);
  padding: clamp(24px, 2.6vw, 40px);
  color: inherit;
  text-decoration: none;
}
.iykyt-benefit--wide { grid-column: span 2; }
.iykyt-benefit--cyan { background: var(--iykyt-cyan); color: var(--iykyt-black); }
.iykyt-benefit--yellow { background: var(--iykyt-yellow); color: var(--iykyt-black); }
.iykyt-benefit--magenta { background: var(--iykyt-magenta); color: var(--iykyt-black); }
.iykyt-benefit--offwhite { background: var(--iykyt-offwhite); color: var(--iykyt-black); }
.iykyt-benefit--dark { background: var(--iykyt-off-black); color: var(--iykyt-offwhite); }
.iykyt-benefit__eyebrow { display: block; margin-bottom: 12px; opacity: 0.85; }
.iykyt-benefit--cyan .iykyt-benefit__eyebrow { color: var(--iykyt-offwhite); }
.iykyt-benefit__title { margin-bottom: 12px; font-size: clamp(26px, 3vw, 40px); line-height: 1; }
.iykyt-benefit__body { font-weight: 600; }

/* Teach here CTA */

.iykyt-teachhere__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.iykyt-teachhere__title { margin-bottom: 22px; }
.iykyt-teachhere__body { max-width: 40ch; margin-bottom: clamp(26px, 3vw, 40px); font-weight: 600; }
.iykyt-teachhere__media {
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--iykyt-placeholder-gray);
}
.iykyt-teachhere__media img { width: 100%; height: 100%; object-fit: cover; }

/* Have more questions */

.iykyt-questions__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.iykyt-questions__list { display: flex; flex-direction: column; }
.iykyt-qrow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 1.8vw, 22px) 4px;
  font-weight: 700;
  font-size: clamp(16px, 1.3vw, 18px);
  border-bottom: 2px solid currentColor;
  transition: gap 0.12s ease;
}
.iykyt-qrow:hover { gap: 22px; }
.iykyt-qrow__label { flex: 1; }
.iykyt-qrow .iykyt-qrow__lead { width: 24px; height: 24px; flex: 0 0 auto; }
.iykyt-qrow--yellow { color: var(--iykyt-yellow); }
.iykyt-qrow--magenta { color: var(--iykyt-magenta); }
.iykyt-qrow--cyan { color: var(--iykyt-cyan); }
.iykyt-questions__pill { margin-bottom: clamp(18px, 2vw, 26px); }

/* Marquee */

.iykyt-marquee {
  overflow: hidden;
  background: var(--iykyt-black);
  padding-block: clamp(22px, 3vw, 40px);
  border-top: 2px solid rgba(255, 255, 255, 0.06);
}
.iykyt-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  width: max-content;
  animation: iykyt-marquee 26s linear infinite;
}
.iykyt-marquee__track img { height: clamp(40px, 5vw, 68px); width: auto; }
@keyframes iykyt-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .iykyt-marquee__track { animation: none; }
  .iykyt-hero__scroll { animation: none; }
}

/* Footer */

.iykyt-footer {
  background: var(--iykyt-off-black);
  color: var(--iykyt-offwhite);
  padding-block: clamp(40px, 5vw, 64px);
}
.iykyt-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.iykyt-footer__wordmark { width: clamp(120px, 12vw, 160px); }
.iykyt-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.iykyt-footer__nav a { font-weight: 600; }
.iykyt-footer__nav a:hover { color: var(--iykyt-yellow); }
.iykyt-footer__legal { width: 100%; font-size: 13px; opacity: 0.6; }

/* Micro-interactions */

/* Cards lift on hover. The high-specificity rule re-applies the lift inside
   reveal groups, whose resting transform:none would otherwise win the cascade. */
.iykyt-card,
.iykyt-pathcard,
.iykyt-benefit {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.iykyt-card:hover,
.iykyt-pathcard:hover,
.iykyt-benefit:hover {
  transform: translateY(-4px);
  box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.16);
}
.reveal-ready [data-reveal-group].is-in > .iykyt-card:hover,
.reveal-ready [data-reveal-group].is-in > .iykyt-pathcard:hover,
.reveal-ready [data-reveal-group].is-in > .iykyt-benefit:hover {
  transform: translateY(-4px);
  transition-delay: 0s;
}
.iykyt-pathcard:focus-visible,
.iykyt-benefit:focus-visible {
  outline: 3px solid var(--iykyt-cyan);
  outline-offset: 4px;
}

/* Path-card and question icons ink themselves in when their card arrives. The
   pathLength=1 on each shape (see inc/icons.php) lets one dashoffset draw them. */
.reveal-ready .iykyt-pathcard__icon .iykyt-icon path,
.reveal-ready .iykyt-pathcard__icon .iykyt-icon circle,
.reveal-ready .iykyt-qrow__lead path,
.reveal-ready .iykyt-qrow__lead circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.7s ease 0.35s;
}
.reveal-ready [data-reveal-group].is-in .iykyt-pathcard__icon .iykyt-icon path,
.reveal-ready [data-reveal-group].is-in .iykyt-pathcard__icon .iykyt-icon circle,
.reveal-ready .iykyt-questions__list.is-in .iykyt-qrow__lead path,
.reveal-ready .iykyt-questions__list.is-in .iykyt-qrow__lead circle {
  stroke-dashoffset: 0;
}

/* Stickers bob gently; the marquee pauses on hover. */
.iykyt-paths__stickers .iykyt-sticker {
  animation: iykyt-bob-slow 3.6s ease-in-out infinite;
}
.iykyt-paths__stickers .iykyt-sticker--squiggle { animation-delay: -1.8s; }
@keyframes iykyt-bob-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.iykyt-marquee:hover .iykyt-marquee__track { animation-play-state: paused; }

/* Scroll reveal */

/* Elements fade and rise into place as they enter the viewport. The hidden
   start state is scoped under .reveal-ready (added by JS), so the page degrades
   to fully visible without JS. transform + opacity only, so it stays composited
   and cheap. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-ready [data-reveal="scale"] {
  transform: scale(0.96);
}
.reveal-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Grid children rise in order once the group enters. Used only on card grids
   whose cards carry no hover transform, so the resting transform:none can't
   fight a hover state. */
.reveal-ready [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-ready [data-reveal-group].is-in > * {
  opacity: 1;
  transform: none;
}
.reveal-ready [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 0.09s; }
.reveal-ready [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 0.18s; }
.reveal-ready [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 0.27s; }
.reveal-ready [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 0.36s; }
.reveal-ready [data-reveal-group].is-in > *:nth-child(6) { transition-delay: 0.45s; }

/* Hero students rise into place on load. */
.reveal-ready .iykyt-hero__cutout {
  animation: iykyt-rise-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reveal-ready .iykyt-hero__cutout--right { animation-delay: 0.12s; }
@keyframes iykyt-rise-in {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

/* Hero headline: the two lines rise on load, then the boxed word springs in. */
.reveal-ready .iykyt-hero__line {
  animation: iykyt-rise-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reveal-ready .iykyt-hero__line:nth-child(2) { animation-delay: 0.12s; }
.reveal-ready .iykyt-hero__title .iykyt-boxed {
  animation: iykyt-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.36s both;
}
@keyframes iykyt-pop-in {
  from { opacity: 0; transform: rotate(-0.5deg) scale(0.6); }
  to   { opacity: 1; transform: rotate(-0.5deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal-group] > *,
  .reveal-ready .iykyt-hero__cutout,
  .reveal-ready .iykyt-hero__line,
  .reveal-ready .iykyt-hero__title .iykyt-boxed,
  .iykyt-paths__stickers .iykyt-sticker {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .reveal-ready .iykyt-hero__title .iykyt-boxed { transform: rotate(-0.5deg); }
}

/* Responsive */

@media (max-width: 960px) {
  :root { --iykyt-header-h: 72px; }

  .iykyt-nav--row,
  .iykyt-header__cta { display: none; }
  .iykyt-burger { display: inline-flex; }

  .iykyt-nav--row.is-open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--iykyt-black);
    padding: 18px clamp(18px, 4vw, 48px) 26px;
    border-top: 2px solid rgba(255,255,255,0.08);
  }
  .iykyt-nav--row.is-open ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .iykyt-inspo__grid,
  .iykyt-teachhere__grid,
  .iykyt-questions__grid,
  .iykyt-panel__head--split {
    grid-template-columns: 1fr;
  }
  .iykyt-benefit--wide { grid-column: span 3; }
}

@media (max-width: 720px) {
  .iykyt-cardgrid,
  .iykyt-paths__grid,
  .iykyt-benefits__grid {
    grid-template-columns: 1fr;
  }
  .iykyt-benefit--wide { grid-column: span 1; }
  .iykyt-paths__stickers { justify-content: flex-start; padding-top: 8px; }
  .iykyt-pill--cyan { white-space: normal; max-width: 100%; }
}

@media (max-width: 768px) {
  .iykyt-hero { display: flex; flex-direction: column; padding-bottom: 0; }
  .iykyt-hero__inner { order: 1; }
  .iykyt-hero__cast {
    order: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(10px, 3vw, 36px);
    margin-top: clamp(10px, 2vw, 20px);
    position: relative;
    z-index: 2;
  }
  .iykyt-hero__cutout {
    position: static;
    opacity: 1;
    height: auto;
    width: clamp(130px, 34vw, 260px);
  }
}

/* Interior pages (Teaching Paths, Teaching Benefits)
   ---------------------------------------------------
   Shared fill classes replace the per-component color variants used on the
   landing sections: the interior pages carry many card types, so one fill set
   keeps the palette in one place. Off-black ("dark") flips text to offwhite;
   components that need a different accent (e.g. dark tile titles) override it. */

.iykyt-fill--cyan { background: var(--iykyt-cyan); color: var(--iykyt-black); }
.iykyt-fill--magenta { background: var(--iykyt-magenta); color: var(--iykyt-black); }
.iykyt-fill--yellow { background: var(--iykyt-yellow); color: var(--iykyt-black); }
.iykyt-fill--offwhite { background: var(--iykyt-offwhite); color: var(--iykyt-black); }
.iykyt-fill--dark { background: var(--iykyt-off-black); color: var(--iykyt-offwhite); }

/* Interior hero */

.iykyt-ihero {
  position: relative;
  overflow: hidden;
  background: var(--iykyt-black) url("../images/tv-static-bg.png") 0 0 / cover no-repeat;
  padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 104px);
}
.iykyt-ihero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--iykyt-content-max);
  margin-inline: auto;
  padding-inline: var(--iykyt-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.iykyt-ihero__title { color: var(--iykyt-yellow); font-size: clamp(44px, 7.4vw, 92px); line-height: 1.05; white-space: nowrap; }
.iykyt-ihero__rule {
  display: block;
  width: clamp(120px, 16vw, 220px);
  height: 6px;
  margin: clamp(20px, 3vw, 32px) 0 clamp(18px, 2.4vw, 26px);
  background: var(--iykyt-magenta);
  border-radius: 999px;
}
.iykyt-ihero__intro {
  color: var(--iykyt-offwhite);
  max-width: 46ch;
  font-weight: 600;
}
.iykyt-ihero__media { position: relative; }
.iykyt-ihero__inner:has(.iykyt-ihero__media--lockup) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
}
.iykyt-photo {
  margin: 0;
  border: var(--iykyt-stroke) solid;
  border-radius: 18px;
  overflow: hidden;
  background: var(--iykyt-placeholder-gray);
}
.iykyt-photo img { width: 100%; height: 100%; object-fit: cover; }
.iykyt-photo--cyan { border-color: var(--iykyt-cyan); }
.iykyt-photo--magenta { border-color: var(--iykyt-magenta); }
.iykyt-photo--yellow { border-color: var(--iykyt-yellow); }
.iykyt-ihero__media--single .iykyt-photo { min-height: clamp(200px, 26vw, 300px); }

/* Rotating teacher quotes. Prev/next buttons flank a stage that shows one slide
   at a time (theme.js toggles [hidden]); without JS every slide stays visible.
   Each slide is a grid: open mark top-left, quote text, closing mark bottom-
   right, attribution below. Markup in template-parts/section-quotes.php. */

.iykyt-quotes__viewport {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.6vw, 22px);
}
.iykyt-quotes__stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: clamp(300px, 34vw, 440px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.iykyt-quote[hidden] { display: none; }
.iykyt-quote {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: clamp(10px, 2vw, 28px);
  row-gap: clamp(14px, 2.6vw, 32px);
  align-items: start;
}
.iykyt-quote__mark {
  align-self: start;
}
img.iykyt-quote__mark {
  width: clamp(72px, 11vw, 172px);
  height: auto;
}
.iykyt-quote__mark--open { grid-column: 1; grid-row: 1; }
.iykyt-quote__mark--close {
  grid-column: 3;
  grid-row: 1 / 3;
  justify-self: end;
  align-self: end;
}
img.iykyt-quote__mark--close {
  width: clamp(88px, 13.5vw, 208px);
  transform: rotate(180deg);
}
.iykyt-quote__mark--text {
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  line-height: 0.7;
  font-size: clamp(96px, 14vw, 210px);
}
.iykyt-quote--pink .iykyt-quote__mark--text { color: var(--iykyt-magenta); }
.iykyt-quote--cyan .iykyt-quote__mark--text { color: var(--iykyt-cyan); }
.iykyt-quote__text {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  color: var(--iykyt-yellow);
  font-family: var(--iykyt-font-body);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 80px);
  line-height: 1.16;
}
.iykyt-quote__cite {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  font-family: var(--iykyt-font-body);
  font-weight: 600;
  font-size: clamp(12px, 1.1vw, 16px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.iykyt-quote__name { color: var(--iykyt-cyan); }
.iykyt-quote--cyan .iykyt-quote__name { color: var(--iykyt-magenta); }
.iykyt-quote__role { color: var(--iykyt-offwhite); }
.iykyt-quote__rule {
  flex: 1 1 auto;
  height: 0;
  border-top: 2px solid var(--iykyt-gray);
}
.iykyt-quotes__nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 4vw, 56px);
  height: clamp(40px, 4vw, 56px);
  padding: 0;
  border: none;
  border-radius: var(--iykyt-radius-button);
  background: #393938;
  color: var(--iykyt-offwhite);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}
.iykyt-quotes__nav:hover { background: #4a4a48; transform: translateY(-2px); }
.iykyt-quotes__nav:focus-visible { outline: 3px solid var(--iykyt-cyan); outline-offset: 3px; }
.iykyt-quotes__nav .iykyt-icon { width: clamp(20px, 2vw, 28px); height: auto; }
.iykyt-quotes__nav--prev .iykyt-icon { transform: scaleX(-1); }

@media (max-width: 640px) {
  /* Stack to one column so the text and attribution use the full width. The
     quote marks stop taking their own columns and bracket the quote instead:
     opening mark top-left, closing mark bottom-right. */
  .iykyt-quote {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: clamp(10px, 3vw, 18px);
  }
  .iykyt-quote__mark--open { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; }
  .iykyt-quote__text { grid-column: 1; grid-row: 2; align-self: start; font-size: clamp(26px, 8vw, 40px); }
  .iykyt-quote__cite { grid-column: 1; grid-row: 3; flex-wrap: wrap; row-gap: 6px; }
  .iykyt-quote__mark--close { grid-column: 1; grid-row: 4; justify-self: end; align-self: start; }
  .iykyt-quote__rule { flex-basis: 100%; order: 3; }
  img.iykyt-quote__mark { width: clamp(56px, 16vw, 84px); }
}

.iykyt-comingsoon__text {
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--iykyt-yellow);
  text-align: center;
}
.iykyt-ihero__sticker {
  position: absolute;
  width: clamp(72px, 9vw, 120px);
  z-index: 3;
}
.iykyt-ihero__sticker--benefits { right: -3%; top: 42%; width: clamp(64px, 7vw, 96px); }

/* Teaching Paths hero lockup. One responsive coordinate canvas: the wrapper
   carries the Figma frame's 648.65 x 559.22 ratio and every layer is placed
   with percentages measured off that frame, so the cluster scales as a unit
   without a second set of pixel values. The wrapper itself draws nothing. The
   colored boxes are outline only, so the page's textured black shows through,
   and the transparent cutout PNGs sit above them, overhanging on purpose.
   Source order is Figma's paint order, which is what puts the coach over the
   student where they overlap. */

.iykyt-lockup {
  --iykyt-lockup-stroke: 3px;
  position: relative;
  width: 100%;
  max-width: 605.11px;
  margin-inline: auto 0;
  aspect-ratio: 605.11 / 551.58;
}

.iykyt-lockup__box {
  position: absolute;
  width: 37.67%;
  height: 41.33%;
  border: var(--iykyt-lockup-stroke) solid;
  border-radius: 20px;
  pointer-events: none;
}
.iykyt-lockup__box--cyan { left: 19.14%; top: 10.19%; border-color: var(--iykyt-cyan); }
.iykyt-lockup__box--magenta { left: 62.33%; top: 22.17%; border-color: var(--iykyt-magenta); }
.iykyt-lockup__box--yellow { left: 0; top: 62.74%; width: 56.81%; height: 37.26%; border-color: var(--iykyt-yellow); }

/* Figma reports Scale: Crop on each image layer, so the wrapper is the crop
   window and the PNG covers it. The wrapper is always larger than its box —
   never clip a person to the box outline. */
.iykyt-lockup__cut {
  position: absolute;
  overflow: hidden;
  border-radius: 20px;
}
.iykyt-lockup__cut img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.iykyt-lockup__cut--student img { object-position: center top; }
.iykyt-lockup__cut--student { left: 13.13%; top: 0; width: 46.46%; height: 50.97%; }
.iykyt-lockup__cut--teacher { left: 60%; top: 15%; width: 40%; height: 46%; }
.iykyt-lockup__cut--team { left: 0; top: 57%; width: 56.81%; height: 43%; }
.iykyt-lockup__cut--team img { object-position: center top; }

.iykyt-lockup__sticker {
  position: absolute;
  left: 64%;
  top: 68.84%;
  width: 23.71%;
  height: auto;
  pointer-events: none;
}

/* Section band head (eyebrow + display heading, optional intro on the right) */

.iykyt-bandhead { margin-bottom: clamp(28px, 4vw, 52px); }
.iykyt-bandhead--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
}
.iykyt-eyebrow--magenta { color: var(--iykyt-magenta); }
.iykyt-bandhead__title {
  margin-top: 12px;
  color: var(--iykyt-offwhite);
  text-transform: uppercase;
}
.iykyt-bandhead--sentence .iykyt-bandhead__title { text-transform: none; }
.iykyt-bandhead__intro {
  color: var(--iykyt-offwhite);
  font-weight: 700;
  max-width: 48ch;
}

/* District Programs — arrow cards */

.iykyt-arrowgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--iykyt-card-gap);
}
.iykyt-arrowcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-card);
  padding: clamp(24px, 2.6vw, 36px) clamp(24px, 2.8vw, 40px) clamp(28px, 3.2vw, 44px);
}
.iykyt-arrowcard__arrow {
  position: absolute;
  top: clamp(20px, 2.2vw, 30px);
  right: clamp(20px, 2.4vw, 32px);
  display: inline-flex;
  color: var(--iykyt-black);
}
.iykyt-arrowcard__title {
  max-width: 78%;
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
  text-transform: uppercase;
}
.iykyt-arrowcard__body { font-weight: 600; max-width: 46ch; }

/* Early Experience — chip row + feature card */

.iykyt-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-button);
  padding: 16px clamp(24px, 2.4vw, 36px);
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.iykyt-early__feature { max-width: 560px; margin-top: clamp(24px, 3vw, 40px); }

/* Education Pathways — program columns */

.iykyt-programgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--iykyt-card-gap);
}
.iykyt-programcard {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-card);
  padding: clamp(24px, 2.6vw, 36px);
}
.iykyt-programcard__title {
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.02;
  text-transform: uppercase;
}
.iykyt-programcard__lead { font-weight: 600; }
.iykyt-programcard__links { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.iykyt-programlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 8px;
  margin-inline: -8px;
  border-radius: 10px;
  border-bottom: 2px solid var(--iykyt-gray);
  font-weight: 600;
  transition: gap 0.12s ease, background-color 0.15s ease;
}
.iykyt-programlink:hover { gap: 18px; background-color: rgba(0, 0, 0, 0.06); }
.iykyt-programlink .iykyt-icon { flex: 0 0 auto; transition: transform 0.15s ease; }
.iykyt-programlink:hover .iykyt-icon { transform: translateX(4px); }
.iykyt-programlink__small {
  display: block;
  margin-bottom: 2px;
  font-family: var(--iykyt-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.iykyt-programlink__label { display: block; line-height: 1.2; }
.iykyt-programcard__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--iykyt-font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Bilingual Educators — directory cards */

.iykyt-dirgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--iykyt-card-gap);
}
.iykyt-dircard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-card);
  padding: clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 34px) clamp(22px, 2.4vw, 30px);
}
.iykyt-dircard__label { color: var(--iykyt-magenta); }
.iykyt-dircard__headline {
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1;
  color: var(--iykyt-black);
}
.iykyt-dircard__body { font-weight: 600; }
.iykyt-dircard__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--iykyt-cyan);
  font-family: var(--iykyt-font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* College Credits — horizontal rail */

.iykyt-railcard {
  flex: 0 0 clamp(260px, 30vw, 360px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 300px;
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-card);
  padding: clamp(24px, 2.4vw, 34px);
}
.iykyt-railcard__title {
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  text-transform: uppercase;
}
.iykyt-railcard__body { font-weight: 600; }
.iykyt-railcard__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--iykyt-font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Salary Snapshot — bar chart */

.iykyt-chart__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.iykyt-chart__row {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(0, 2.4fr) auto;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}
.iykyt-chart__name { font-weight: 700; font-size: clamp(13px, 1.1vw, 16px); }
.iykyt-chart__track {
  height: 22px;
  background: var(--iykyt-chart-track);
  border-radius: 999px;
  overflow: hidden;
}
.iykyt-chart__bar { display: block; height: 100%; width: var(--pct, 0%); border-radius: 999px; }
.iykyt-chart__bar--yellow { background: var(--iykyt-yellow); }
.iykyt-chart__bar--cyan { background: var(--iykyt-cyan); }
.iykyt-chart__bar--magenta { background: var(--iykyt-magenta); }
.iykyt-chart__value {
  min-width: 3.5ch;
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  text-align: right;
}
.iykyt-chart__foot { margin-top: clamp(20px, 2.4vw, 30px); font-size: 13px; opacity: 0.7; }

/* Bilingual bonus callout */

.iykyt-section--tight { padding-block: clamp(20px, 3vw, 36px); }
.iykyt-beginning { max-width: 62ch; margin-bottom: clamp(24px, 3vw, 36px); }
.iykyt-beginning__title { margin-bottom: 12px; }
.iykyt-beginning__body { color: var(--iykyt-offwhite); font-weight: 600; }
.iykyt-callout {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-card);
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 44px);
}
.iykyt-callout__icon { flex: 0 0 auto; color: var(--iykyt-black); }
.iykyt-callout__title {
  margin-bottom: 8px;
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1;
}
.iykyt-callout__body { font-weight: 600; max-width: 70ch; }

/* Benefits Snapshot + Job Demand — tile mosaic */

.iykyt-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--iykyt-card-gap);
}
.iykyt-mosaic--benefits {
  grid-template-areas:
    "a a a a a a b b b b b b"
    "c c c d d d d e e e e e";
}
.iykyt-mosaic--demand {
  grid-template-areas:
    "a a a a a b b b b b b b"
    "c c c c d d d d e e e e";
}
.iykyt-tile--a { grid-area: a; }
.iykyt-tile--b { grid-area: b; }
.iykyt-tile--c { grid-area: c; }
.iykyt-tile--d { grid-area: d; }
.iykyt-tile--e { grid-area: e; }
.iykyt-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-card);
  padding: clamp(24px, 2.6vw, 38px);
}
.iykyt-tile__icon { margin-bottom: 4px; }
.iykyt-tile__title {
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1;
}
.iykyt-tile__body { font-weight: 600; }
.iykyt-mosaic--demand .iykyt-tile__title { text-transform: uppercase; }
.iykyt-fill--dark .iykyt-tile__title { color: var(--iykyt-yellow); }

/* Career ladder */

.iykyt-ladder {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-button);
}
.iykyt-ladder__step {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 24px);
}
.iykyt-ladder__sep {
  flex: 1 1 0;
  min-width: clamp(28px, 3vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--iykyt-black);
}
.iykyt-ladder__level {
  font-family: var(--iykyt-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
.iykyt-ladder__role {
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  font-size: clamp(14px, 1.3vw, 19px);
  line-height: 1.05;
  text-transform: uppercase;
}

/* Large transitional statement */

.iykyt-statement {
  max-width: 16ch;
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  color: var(--iykyt-yellow);
  font-size: clamp(38px, 7vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.01em;
}

/* Fast facts */

.iykyt-statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--iykyt-card-gap);
}
.iykyt-statcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-card);
  padding: clamp(24px, 2.4vw, 32px);
}
.iykyt-statcard__value {
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.9;
}
.iykyt-statcard__label { font-weight: 600; }
.iykyt-bigstat { margin-block: clamp(72px, 12vw, 140px) clamp(24px, 4vw, 56px); text-align: center; }
.iykyt-bigstat__value {
  display: block;
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  color: var(--iykyt-yellow);
  font-size: clamp(64px, 13vw, 180px);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.iykyt-bigstat__body {
  margin: clamp(18px, 2.4vw, 28px) auto 0;
  max-width: 52ch;
  color: var(--iykyt-offwhite);
  font-weight: 600;
}

/* Hover + reveal integration for interior cards */

.iykyt-arrowcard,
.iykyt-programcard,
.iykyt-dircard,
.iykyt-railcard,
.iykyt-tile,
.iykyt-statcard {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.iykyt-arrowcard:hover,
.iykyt-programcard:hover,
.iykyt-dircard:hover,
.iykyt-railcard:hover,
.iykyt-tile:hover,
.iykyt-statcard:hover {
  transform: translateY(-4px);
  box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.16);
}
.reveal-ready [data-reveal-group].is-in > .iykyt-arrowcard:hover,
.reveal-ready [data-reveal-group].is-in > .iykyt-programcard:hover,
.reveal-ready [data-reveal-group].is-in > .iykyt-dircard:hover,
.reveal-ready [data-reveal-group].is-in > .iykyt-tile:hover,
.reveal-ready [data-reveal-group].is-in > .iykyt-statcard:hover {
  transform: translateY(-4px);
  transition-delay: 0s;
}

/* Interior responsive */

@media (max-width: 960px) {
  .iykyt-lockup { margin-inline: auto; }
  .iykyt-ihero__inner { grid-template-columns: 1fr; }
  .iykyt-ihero__title { white-space: normal; }
  .iykyt-ihero__inner:has(.iykyt-ihero__media--lockup) { grid-template-columns: 1fr; }
  .iykyt-ihero__media--lockup { order: -1; }
  .iykyt-bandhead--split { grid-template-columns: 1fr; align-items: start; }
  .iykyt-programgrid,
  .iykyt-dirgrid,
  .iykyt-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iykyt-mosaic--benefits,
  .iykyt-mosaic--demand {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .iykyt-mosaic .iykyt-tile { grid-area: auto; }
  .iykyt-ladder { overflow-x: auto; scrollbar-width: none; }
  .iykyt-ladder::-webkit-scrollbar { display: none; }
  .iykyt-ladder__step { flex: 0 0 auto; min-width: 150px; }
}

@media (max-width: 720px) {
  .iykyt-lockup { --iykyt-lockup-stroke: 2px; }
  .iykyt-arrowgrid,
  .iykyt-programgrid,
  .iykyt-dirgrid,
  .iykyt-statgrid { grid-template-columns: 1fr; }
  .iykyt-chart__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name value"
      "track track";
    row-gap: 8px;
  }
  .iykyt-chart__name { grid-area: name; }
  .iykyt-chart__value { grid-area: value; text-align: right; }
  .iykyt-chart__track { grid-area: track; }
  .iykyt-callout { flex-direction: column; align-items: flex-start; }
  .iykyt-statement { max-width: none; }
  #statement { padding-block: clamp(56px, 15vw, 80px); }
}

/* Teach Here popup. A cyan modal panel of participating-district pills, opened
   by the "Participating Dallas County Districts" CTA (any [data-teach-popup-open]
   trigger) and closed by the X, the backdrop, or Escape. Markup lives in
   template-parts/teach-here-popup.php; behaviour in theme.js (initTeachPopup). */

body.iykyt-modal-open { overflow: hidden; }

.iykyt-teach-popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 32px);
}
.iykyt-teach-popup[hidden] { display: none; }

.iykyt-teach-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 23, 21, 0.72);
}

.iykyt-teach-popup__panel {
  position: relative;
  width: min(1406px, 100%);
  max-height: calc(100dvh - clamp(28px, 6vw, 64px));
  overflow-y: auto;
  background: var(--iykyt-cyan);
  color: var(--iykyt-black);
  border-radius: var(--iykyt-radius-panel);
  padding: clamp(48px, 6vw, 100px) clamp(24px, 5vw, 80px) clamp(40px, 5vw, 76px);
}

.iykyt-teach-popup__close {
  position: absolute;
  top: clamp(18px, 3vw, 40px);
  right: clamp(18px, 3vw, 48px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--iykyt-black);
  transition: transform 0.12s ease;
}
.iykyt-teach-popup__close:hover { transform: rotate(90deg); }

.iykyt-teach-popup__title {
  font-size: clamp(38px, 7vw, 92px);
  line-height: 0.94;
  margin: 0 0 clamp(24px, 3.5vw, 44px);
  max-width: 12ch;
}

.iykyt-teach-popup__districts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 16px);
}

.iykyt-teach-popup__district {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: clamp(58px, 6vw, 80px);
  padding: 0 clamp(22px, 2.4vw, 40px);
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-button);
  background: var(--iykyt-offwhite);
  color: var(--iykyt-black);
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
a.iykyt-teach-popup__district:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 var(--iykyt-black);
}

@media (max-width: 560px) {
  .iykyt-teach-popup__district {
    width: 100%;
    justify-content: space-between;
  }
}

/* Job Demand closing bridge line, below the demand mosaic. */

.iykyt-jobdemand__note {
  margin-top: clamp(24px, 3vw, 40px);
  max-width: 68ch;
}

/* District Programs cards open the district popup. They stay <article> elements
   so the fill background always paints; role="button" + tabindex make them the
   trigger, and JS handles click and Enter/Space. */

.iykyt-arrowcard--link {
  cursor: pointer;
}

/* District Programs popup. Same overlay behaviour as the Teach Here popup, with
   a cyan panel and a vertical list of outbound program links.
   Markup in template-parts/district-programs-popup.php. */

.iykyt-district-popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 32px);
}
.iykyt-district-popup[hidden] { display: none; }

.iykyt-district-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 23, 21, 0.72);
}

.iykyt-district-popup__panel {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100dvh - clamp(28px, 6vw, 64px));
  overflow-y: auto;
  color: var(--iykyt-black);
  border-radius: var(--iykyt-radius-panel);
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px) clamp(36px, 4vw, 60px);
}

/* Hide the panel scrollbar on both popups; they stay scrollable by wheel and
   touch, matching the horizontal scrollers elsewhere. */
.iykyt-teach-popup__panel,
.iykyt-district-popup__panel {
  scrollbar-width: none;
}
.iykyt-teach-popup__panel::-webkit-scrollbar,
.iykyt-district-popup__panel::-webkit-scrollbar {
  display: none;
}

.iykyt-district-popup__close {
  position: absolute;
  top: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 36px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--iykyt-black);
  transition: transform 0.12s ease;
}
.iykyt-district-popup__close:hover { transform: rotate(90deg); }

.iykyt-district-popup__title {
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 0.96;
  margin: 0 0 clamp(22px, 3vw, 40px);
  max-width: 16ch;
}

.iykyt-district-popup__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
}

.iykyt-district-popup__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 30px);
  border: var(--iykyt-stroke) solid var(--iykyt-black);
  border-radius: var(--iykyt-radius-card);
  background: var(--iykyt-offwhite);
  color: var(--iykyt-black);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
a.iykyt-district-popup__row:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 var(--iykyt-black);
}
.iykyt-district-popup__row--static { cursor: default; }

.iykyt-district-popup__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.iykyt-district-popup__cat { color: var(--iykyt-magenta); }
.iykyt-district-popup__text { font-weight: 600; }
.iykyt-district-popup__row svg { flex: 0 0 auto; }

@media (max-width: 560px) {
  .iykyt-district-popup__row {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* Get Inspired closing CTA. A cyan panel shared by the interior pages: centered
   heading + sub, a yellow Get inspired button, and a Follow Along social row.
   Markup in template-parts/section-get-inspired.php. */

.iykyt-getinspired__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(22px, 3vw, 34px);
  background: var(--iykyt-cyan);
  color: var(--iykyt-black);
  border-radius: 30px;
  padding: clamp(40px, 7vw, 80px) clamp(24px, 6vw, 96px);
}
.iykyt-getinspired__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}
.iykyt-getinspired__title { color: var(--iykyt-black); max-width: 18ch; }
.iykyt-getinspired__sub {
  color: var(--iykyt-black);
  font-weight: 700;
  max-width: 34ch;
}
.iykyt-getinspired__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 28px);
  margin-top: clamp(6px, 1.2vw, 14px);
  padding: clamp(16px, 2vw, 26px) clamp(34px, 5vw, 84px);
  background: var(--iykyt-yellow);
  color: var(--iykyt-black);
  border-radius: 30px;
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 60px);
  line-height: 1;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.iykyt-getinspired__btn:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 var(--iykyt-black); }
.iykyt-getinspired__btn:active { transform: translateY(0); }
.iykyt-getinspired__btn svg { width: 1em; height: 1em; }
.iykyt-getinspired__follow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(10px, 2vw, 28px);
}
.iykyt-getinspired__follow {
  font-family: var(--iykyt-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(22px, 2.6vw, 42px);
  line-height: 1;
}
.iykyt-getinspired__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2vw, 26px);
}
.iykyt-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 6vw, 72px);
  height: clamp(52px, 6vw, 72px);
  border-radius: 50%;
  background: #111114;
  border: 1px solid rgba(255, 255, 255, 0.92);
  transition: transform 0.12s ease;
}
.iykyt-social:hover { transform: translateY(-3px); }
.iykyt-social svg { width: 52%; height: 52%; display: block; }
.iykyt-social--facebook { color: var(--iykyt-cyan); }
.iykyt-social--x { color: var(--iykyt-offwhite); }
.iykyt-social--instagram { color: var(--iykyt-magenta); }
.iykyt-social--threads { color: var(--iykyt-offwhite); }
.iykyt-social--youtube { color: var(--iykyt-offwhite); }
.iykyt-social--tiktok { color: var(--iykyt-magenta); }
.iykyt-social--snapchat { color: var(--iykyt-yellow); }