/* <!-- Curriculum-page scoped styles + animations --> */

  /* ============ HERO ============ */
  .cur-hero {
      position: relative;
      padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
      overflow: hidden;
      isolation: isolate;
  }

  .cur-hero::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -8%;
      top: -20%;
      width: 58%;
      height: 140%;
      background:
          radial-gradient(40% 50% at 20% 30%, rgba(244, 138, 79, 0.28), transparent 70%),
          radial-gradient(45% 45% at 35% 70%, rgba(232, 106, 44, 0.18), transparent 70%),
          radial-gradient(55% 55% at 55% 20%, rgba(255, 210, 170, 0.25), transparent 70%);
      filter: blur(6px);
      pointer-events: none;
      animation: curBlob 18s ease-in-out infinite alternate;
  }

  @keyframes curBlob {
      0% {
          transform: translate(0, 0) scale(1);
      }

      100% {
          transform: translate(2%, -2%) scale(1.05);
      }
  }

  .cur-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(180deg, transparent 0%, rgba(255, 251, 247, 0.4) 70%, var(--c-bg) 100%);
      pointer-events: none;
  }

  .cur-hero .hero-split {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: clamp(2rem, 4.5vw, 4rem);
      align-items: center;
  }

  .cur-hero .hero-text {
      position: relative;
      padding-left: 1.25rem;
  }

  .cur-hero .hero-text::before {
      content: "";
      position: absolute;
      left: 0;
      top: .4rem;
      bottom: .4rem;
      width: 3px;
      border-radius: 3px;
      background: linear-gradient(180deg, var(--o-500) 0%, var(--o-300) 50%, rgba(232, 106, 44, 0) 100%);
  }

  .cur-hero .hero-text>.crumbs {
      margin-bottom: .9rem;
      font-size: .8rem;
  }

  .cur-hero .hero-text>.eyebrow {
      margin-bottom: 1rem;
  }

  .cur-hero .hero-text h1 {
      font-size: clamp(2rem, 3.4vw, 3rem);
      line-height: 1.08;
      letter-spacing: -0.025em;
      max-width: none;
      margin: 0 0 1.1rem;
  }

  .cur-hero .hero-text h1 .hl {
      background: linear-gradient(100deg, var(--o-700) 0%, var(--o-500) 45%, #F5A623 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  @media (min-width: 640px) {
      .cur-hero .hero-text h1 .hl {
          white-space: nowrap;
      }
  }

  .cur-hero .hero-text p.lead {
      max-width: 52ch;
      font-size: 1.05rem;
      color: var(--c-text-2);
      margin: 0 0 1.5rem;
  }

  /* ---- Program Snapshot card (right side of hero) ---- */
  .snapshot {
      position: relative;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: var(--radius-xl);
      padding: 1.6rem 1.6rem 1.4rem;
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      isolation: isolate;
  }

  .snapshot::before {
      content: "";
      position: absolute;
      z-index: 0;
      right: -30%;
      top: -40%;
      width: 70%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232, 106, 44, 0.14), transparent 70%);
      pointer-events: none;
  }

  .snap-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-bottom: 1.1rem;
      border-bottom: 1px solid var(--c-line);
      margin-bottom: 1.1rem;
  }

  .snap-title {
      display: flex;
      align-items: center;
      gap: .75rem;
  }

  .snap-ico {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--o-400), var(--o-600));
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px -8px rgba(232, 106, 44, 0.55);
      flex-shrink: 0;
  }

  .snap-ico svg {
      width: 20px;
      height: 20px;
  }

  .snap-t1 {
      font-weight: 700;
      letter-spacing: -0.01em;
      font-size: 1rem;
      color: var(--c-text);
      line-height: 1.1;
  }

  .snap-t2 {
      font-size: .75rem;
      color: var(--c-muted);
      font-weight: 500;
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-top: 3px;
  }

  .snap-badge {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--o-700);
      background: var(--o-50);
      padding: .35rem .65rem;
      border-radius: 999px;
      border: 1px solid var(--o-100);
      white-space: nowrap;
  }

  .snap-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-bottom: 1.25rem;
  }

  .snap-cell {
      padding: .65rem 0;
      text-align: center;
      position: relative;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 550ms var(--ease), transform 550ms var(--ease);
  }

  .snapshot.in .snap-cell {
      opacity: 1;
      transform: none;
  }

  .snapshot.in .snap-cell:nth-child(1) {
      transition-delay: 80ms;
  }

  .snapshot.in .snap-cell:nth-child(2) {
      transition-delay: 180ms;
  }

  .snapshot.in .snap-cell:nth-child(3) {
      transition-delay: 280ms;
  }

  .snapshot.in .snap-cell:nth-child(4) {
      transition-delay: 380ms;
  }

  .snap-cell+.snap-cell::before {
      content: "";
      position: absolute;
      left: 0;
      top: 20%;
      bottom: 20%;
      width: 1px;
      background: var(--c-line);
  }

  .snap-k {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--c-text);
      line-height: 1;
      font-variant-numeric: tabular-nums;
  }

  .snap-v {
      font-size: .73rem;
      color: var(--c-muted);
      margin-top: .4rem;
      letter-spacing: .02em;
  }

  .snap-list {
      position: relative;
      z-index: 1;
      display: grid;
      gap: .55rem;
      padding: 1rem 0 1.1rem;
      border-top: 1px dashed var(--c-line);
      border-bottom: 1px dashed var(--c-line);
      margin-bottom: 1.1rem;
  }

  .snap-row {
      display: flex;
      align-items: center;
      gap: .65rem;
      font-size: .88rem;
      color: var(--c-text-2);
      opacity: 0;
      transform: translateX(-8px);
      transition: opacity 550ms var(--ease), transform 550ms var(--ease);
  }

  .snapshot.in .snap-row {
      opacity: 1;
      transform: none;
  }

  .snapshot.in .snap-row:nth-child(1) {
      transition-delay: 480ms;
  }

  .snapshot.in .snap-row:nth-child(2) {
      transition-delay: 560ms;
  }

  .snapshot.in .snap-row:nth-child(3) {
      transition-delay: 640ms;
  }

  .snapshot.in .snap-row:nth-child(4) {
      transition-delay: 720ms;
  }

  .snap-row-ico {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--o-50);
      color: var(--o-600);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .snap-row-t {
      line-height: 1.4;
      font-weight: 500;
  }

  .snap-cta {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      padding: .95rem 1.1rem;
      background: var(--c-text);
      color: #fff;
      border-radius: 12px;
      font-weight: 600;
      font-size: .93rem;
      letter-spacing: -0.01em;
      transition: background var(--t) var(--ease), transform var(--t-fast) var(--ease);
  }

  .snap-cta:hover {
      background: #000;
      transform: translateY(-1px);
  }

  .snap-cta svg {
      transition: transform var(--t-fast) var(--ease);
  }

  .snap-cta:hover svg {
      transform: translateX(3px);
  }

  /* ============ TIMELINE SECTION ============ */
  .cur-years {
      padding: clamp(4rem, 8vw, 7rem) 0;
      position: relative;
  }

  .cur-years-head {
      max-width: 780px;
      margin: 0 auto 3rem;
      text-align: center;
  }

  .cur-years-head h2 {
      font-size: clamp(2rem, 3.4vw, 3rem);
      letter-spacing: -0.025em;
      line-height: 1.08;
  }

  .cur-years-head h2 .hl {
      background: linear-gradient(120deg, var(--o-600), var(--o-400));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  .cur-years-head p {
      color: var(--c-text-2);
      max-width: 56ch;
      margin: .75rem auto 0;
  }

  .year-stack {
      position: relative;
      max-width: 1040px;
      margin: 0 auto;
  }

  .year-stack::before {
      content: "";
      position: absolute;
      left: 68px;
      top: 40px;
      bottom: 40px;
      width: 2px;
      background: linear-gradient(180deg, var(--o-400) 0%, var(--o-300) 40%, var(--c-line) 100%);
      z-index: 0;
  }

  .year-card {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 136px 1fr;
      gap: 1.5rem;
      padding: 1.75rem;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: var(--radius-lg);
      margin-bottom: 1.25rem;
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 700ms var(--ease), transform 700ms var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  }

  .cur-years.in .year-card {
      opacity: 1;
      transform: none;
  }

  .cur-years.in .year-card:nth-child(1) {
      transition-delay: 120ms;
  }

  .cur-years.in .year-card:nth-child(2) {
      transition-delay: 260ms;
  }

  .cur-years.in .year-card:nth-child(3) {
      transition-delay: 400ms;
  }

  .cur-years.in .year-card:nth-child(4) {
      transition-delay: 540ms;
  }

  .year-card:hover {
      border-color: var(--o-200);
      box-shadow: var(--shadow-lg);
  }

  .year-badge {
      position: relative;
      width: 108px;
      height: 108px;
      border-radius: 20px;
      background: linear-gradient(160deg, #FFFBF7 0%, #FFF2E4 100%);
      border: 1px solid var(--o-100);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px -10px rgba(232, 106, 44, 0.25);
  }

  .year-badge::after {
      content: "";
      position: absolute;
      right: -8px;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--c-bg);
      border: 3px solid var(--o-500);
      box-shadow: 0 0 0 4px var(--c-bg);
  }

  .year-badge .num {
      font-family: var(--font-display);
      font-size: 2.4rem;
      font-weight: 800;
      letter-spacing: -0.04em;
      background: linear-gradient(135deg, var(--o-700), var(--o-400));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      line-height: 1;
  }

  .year-badge .lab {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .18em;
      color: var(--o-700);
      text-transform: uppercase;
      margin-top: .4rem;
  }

  .year-body .tag {
      display: inline-block;
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--o-700);
      background: var(--o-50);
      padding: .3rem .65rem;
      border-radius: 999px;
      border: 1px solid var(--o-100);
      margin-bottom: .75rem;
  }

  .year-body h3 {
      font-size: 1.35rem;
      margin: 0 0 .5rem;
      letter-spacing: -0.02em;
  }

  .year-body p {
      color: var(--c-text-2);
      font-size: .96rem;
      margin: 0 0 1rem;
      line-height: 1.55;
  }

  .year-chips {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
  }

  .year-chips .chip {
      padding: .32rem .7rem;
      border-radius: 999px;
      background: var(--c-bg);
      border: 1px solid var(--c-line);
      color: var(--c-text-2);
      font-size: .78rem;
      font-weight: 500;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 400ms var(--ease), transform 400ms var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }

  .year-chips .chip:hover {
      background: var(--o-50);
      border-color: var(--o-200);
      color: var(--o-700);
  }

  .cur-years.in .year-chips .chip {
      opacity: 1;
      transform: none;
  }

  .cur-years.in .year-card:nth-child(1) .year-chips .chip {
      transition-delay: calc(180ms + var(--i, 0) * 40ms);
  }

  .cur-years.in .year-card:nth-child(2) .year-chips .chip {
      transition-delay: calc(320ms + var(--i, 0) * 40ms);
  }

  .cur-years.in .year-card:nth-child(3) .year-chips .chip {
      transition-delay: calc(460ms + var(--i, 0) * 40ms);
  }

  .cur-years.in .year-card:nth-child(4) .year-chips .chip {
      transition-delay: calc(600ms + var(--i, 0) * 40ms);
  }

  /* ============ ADAPTIVE CURRICULUM ============ */
  .adaptive {
      position: relative;
      padding: clamp(4rem, 8vw, 6.5rem) 0;
      overflow: hidden;
      isolation: isolate;
      background: linear-gradient(180deg, var(--c-bg) 0%, #FFFAF2 100%);
  }

  .adaptive::before {
      content: "";
      position: absolute;
      z-index: -1;
      right: -10%;
      top: 10%;
      width: 55%;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(244, 138, 79, 0.12), transparent 65%);
      pointer-events: none;
      border-radius: 50%;
  }

  .adaptive-head {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 2rem;
      margin-bottom: 2.5rem;
  }

  .adaptive-head h2 {
      font-size: clamp(1.9rem, 3.2vw, 2.6rem);
      line-height: 1.08;
      letter-spacing: -0.025em;
      margin: .5rem 0 0;
      max-width: 22ch;
  }

  .adaptive-head h2 .hl {
      background: linear-gradient(120deg, var(--o-700), var(--o-400));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  .adaptive-head .sub {
      max-width: 46ch;
      color: var(--c-text-2);
      font-size: 1rem;
      margin: 0;
  }

  .adaptive-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
  }

  .adaptive-cell {
      position: relative;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: var(--radius-lg);
      padding: 1.5rem 1.5rem 1.35rem;
      overflow: hidden;
      isolation: isolate;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 650ms var(--ease), transform 650ms var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  }

  .adaptive-grid.in .adaptive-cell {
      opacity: 1;
      transform: none;
  }

  .adaptive-grid.in .adaptive-cell:nth-child(1) {
      transition-delay: 100ms;
  }

  .adaptive-grid.in .adaptive-cell:nth-child(2) {
      transition-delay: 220ms;
  }

  .adaptive-grid.in .adaptive-cell:nth-child(3) {
      transition-delay: 340ms;
  }

  .adaptive-grid.in .adaptive-cell:nth-child(4) {
      transition-delay: 460ms;
  }

  .adaptive-cell:hover {
      border-color: var(--o-200);
      box-shadow: var(--shadow);
  }

  .adaptive-cell .step {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--o-700);
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      margin-bottom: 1rem;
  }

  .adaptive-cell .step::before {
      content: "";
      width: 22px;
      height: 1px;
      background: var(--o-500);
  }

  .adaptive-cell h3 {
      font-size: 1.1rem;
      letter-spacing: -0.015em;
      margin: 0 0 .5rem;
  }

  .adaptive-cell p {
      font-size: .88rem;
      color: var(--c-text-2);
      margin: 0;
      line-height: 1.55;
  }

  .adaptive-ticker {
      margin-top: 2rem;
      padding: 1rem 1.2rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      background: #15130F;
      color: #FFE8D6;
      border-radius: var(--radius);
      overflow: hidden;
      position: relative;
  }

  .adaptive-ticker .live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--o-400);
      box-shadow: 0 0 10px var(--o-400);
      animation: adTickerDot 1.8s ease-in-out infinite;
      flex-shrink: 0;
  }

  @keyframes adTickerDot {
      0%, 100% {
          opacity: .4;
      }

      50% {
          opacity: 1;
      }
  }

  .adaptive-ticker .lab {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--o-300);
      flex-shrink: 0;
  }

  .adaptive-ticker .tape {
      flex: 1;
      overflow: hidden;
      position: relative;
      mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }

  .adaptive-ticker .tape-track {
      display: inline-flex;
      gap: 2.5rem;
      padding-right: 2.5rem;
      white-space: nowrap;
      animation: adTape 28s linear infinite;
      color: rgba(255, 232, 214, 0.85);
      font-size: .92rem;
      font-weight: 500;
  }

  .adaptive-ticker .tape-track span {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
  }

  .adaptive-ticker .tape-track span::before {
      content: "";
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--o-500);
  }

  @keyframes adTape {
      0% {
          transform: translateX(0);
      }

      100% {
          transform: translateX(-50%);
      }
  }

  /* ============ SPECIALISATION TRACKS ============ */
  .tracks {
      padding: clamp(4rem, 8vw, 7rem) 0;
      background: linear-gradient(180deg, var(--c-cream) 0%, #FAF0E3 100%);
      position: relative;
      overflow: hidden;
  }

  .tracks::before {
      content: "TRACKS";
      position: absolute;
      top: -4%;
      left: -2%;
      font-size: clamp(7rem, 16vw, 18rem);
      font-weight: 800;
      letter-spacing: -0.06em;
      color: rgba(232, 106, 44, 0.05);
      pointer-events: none;
      line-height: 0.8;
      z-index: 0;
  }

  .tracks-head {
      max-width: 780px;
      margin: 0 auto 3rem;
      text-align: center;
      position: relative;
      z-index: 1;
  }

  .tracks-head h2 {
      font-size: clamp(2rem, 3.4vw, 2.8rem);
      letter-spacing: -0.025em;
      line-height: 1.1;
  }

  .tracks-head p {
      color: var(--c-text-2);
      max-width: 56ch;
      margin: .75rem auto 0;
  }

  .tracks-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      position: relative;
      z-index: 1;
  }

  @media (max-width: 1100px) {
      .tracks-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  .track {
      position: relative;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
      overflow: hidden;
      isolation: isolate;
      min-height: 320px;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 700ms var(--ease), transform 700ms var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  }

  .tracks-grid.in .track {
      opacity: 1;
      transform: none;
  }

  .tracks-grid.in .track:nth-child(1) {
      transition-delay: 100ms;
  }

  .tracks-grid.in .track:nth-child(2) {
      transition-delay: 180ms;
  }

  .tracks-grid.in .track:nth-child(3) {
      transition-delay: 260ms;
  }

  .tracks-grid.in .track:nth-child(4) {
      transition-delay: 340ms;
  }

  .tracks-grid.in .track:nth-child(5) {
      transition-delay: 420ms;
  }

  .tracks-grid.in .track:nth-child(6) {
      transition-delay: 500ms;
  }

  .tracks-grid.in .track:nth-child(7) {
      transition-delay: 580ms;
  }

  .tracks-grid.in .track:nth-child(8) {
      transition-delay: 660ms;
  }

  .track:hover {
      border-color: var(--o-200);
      box-shadow: var(--shadow-lg);
      transform: translateY(-4px);
  }

  .track::before {
      content: "";
      position: absolute;
      z-index: -1;
      right: -40px;
      top: -40px;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, var(--o-100), transparent 65%);
      transition: transform 700ms var(--ease), opacity var(--t) var(--ease);
      opacity: .6;
  }

  .track:hover::before {
      transform: scale(1.25);
      opacity: 1;
  }

  .track-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.25rem;
  }

  .track-id {
      font-family: var(--font-display);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .18em;
      color: var(--o-700);
      text-transform: uppercase;
  }

  .track-ico {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--o-50), #FFE8D6);
      color: var(--o-600);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--o-100);
  }

  .track-ico svg {
      width: 22px;
      height: 22px;
  }

  .track h3 {
      font-size: 1.25rem;
      letter-spacing: -0.02em;
      margin: 0 0 .55rem;
  }

  .track p {
      color: var(--c-text-2);
      font-size: .93rem;
      margin: 0 0 1.15rem;
      line-height: 1.55;
  }

  .track-tags {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
      margin-top: auto;
  }

  .track-tag {
      padding: .28rem .6rem;
      border-radius: 999px;
      background: var(--c-bg);
      border: 1px solid var(--c-line);
      color: var(--c-text-2);
      font-size: .74rem;
      font-weight: 500;
  }

  .track-foot {
      margin-top: 1.15rem;
      padding-top: 1rem;
      border-top: 1px dashed var(--c-line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--c-muted);
      font-size: .8rem;
  }

  .track-foot .arrow {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      color: var(--o-700);
      font-weight: 700;
      transition: transform var(--t-fast) var(--ease);
  }

  .track:hover .track-foot .arrow {
      transform: translateX(4px);
  }

  /* ============ APPLIED OUTCOMES BAND ============ */
  .grad-band {
      padding: clamp(4rem, 7vw, 6rem) 0;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #1D1B18 0%, #2a1e14 50%, #1D1B18 100%);
      color: #FFFBF7;
  }

  .grad-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
          radial-gradient(400px 260px at 15% 20%, rgba(244, 138, 79, 0.25), transparent 60%),
          radial-gradient(500px 300px at 85% 80%, rgba(232, 106, 44, 0.18), transparent 60%);
      pointer-events: none;
  }

  .grad-band::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
      pointer-events: none;
  }

  .grad-inner {
      position: relative;
      z-index: 1;
  }

  .grad-head {
      max-width: 720px;
      margin: 0 auto 3rem;
      text-align: center;
  }

  .grad-head .eyebrow {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.14);
      color: #FFD1AD;
  }

  .grad-head h2 {
      color: #fff;
      font-size: clamp(1.9rem, 3.2vw, 2.6rem);
      letter-spacing: -0.025em;
      line-height: 1.1;
  }

  .grad-head h2 .hl {
      background: linear-gradient(120deg, #F5A623, #F48A4F);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  .grad-head p {
      color: rgba(255, 255, 255, 0.7);
      max-width: 56ch;
      margin: .75rem auto 0;
  }

  .grad-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
  }

  .grad-cell {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-lg);
      padding: 1.75rem 1.5rem;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 700ms var(--ease), transform 700ms var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
  }

  .grad-grid.in .grad-cell {
      opacity: 1;
      transform: none;
  }

  .grad-grid.in .grad-cell:nth-child(1) {
      transition-delay: 100ms;
  }

  .grad-grid.in .grad-cell:nth-child(2) {
      transition-delay: 220ms;
  }

  .grad-grid.in .grad-cell:nth-child(3) {
      transition-delay: 340ms;
  }

  .grad-grid.in .grad-cell:nth-child(4) {
      transition-delay: 460ms;
  }

  .grad-cell:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(244, 138, 79, 0.35);
  }

  .grad-num {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 3.4vw, 3rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1;
      background: linear-gradient(135deg, #FFE8D6 0%, #F5A623 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      display: flex;
      align-items: baseline;
      gap: .1rem;
      font-variant-numeric: tabular-nums;
      margin-bottom: .5rem;
  }

  .grad-num .suf {
      color: #F48A4F;
      -webkit-text-fill-color: #F48A4F;
  }

  .grad-label {
      font-size: .88rem;
      color: rgba(255, 255, 255, 0.75);
      line-height: 1.4;
  }

  /* ============ Responsive ============ */
  @media (max-width: 960px) {
      .cur-hero .hero-split {
          grid-template-columns: 1fr;
          gap: 2.5rem;
      }

      .snapshot {
          max-width: 560px;
          margin: 0 auto;
      }

      .adaptive-head {
          grid-template-columns: 1fr;
          gap: 1rem;
      }

      .adaptive-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .year-stack::before {
          left: 42px;
      }

      .year-card {
          grid-template-columns: 72px 1fr;
          gap: 1rem;
          padding: 1.5rem;
      }

      .year-badge {
          width: 72px;
          height: 72px;
          border-radius: 16px;
      }

      .year-badge .num {
          font-size: 1.5rem;
      }

      .year-badge .lab {
          font-size: .58rem;
          letter-spacing: .12em;
      }

      .year-badge::after {
          display: none;
      }

      .tracks-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .grad-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media (max-width: 600px) {
      .tracks-grid {
          grid-template-columns: 1fr;
      }

      .grad-grid {
          grid-template-columns: 1fr 1fr;
          gap: .85rem;
      }

      .grad-cell {
          padding: 1.25rem;
      }

      .year-card {
          grid-template-columns: 1fr;
      }

      .year-stack::before {
          display: none;
      }
  }

  @media (max-width: 600px) {
      .adaptive-grid {
          grid-template-columns: 1fr;
      }

      .adaptive-ticker {
          flex-direction: column;
          align-items: flex-start;
          gap: .6rem;
      }
  }

  @media (max-width: 520px) {
      .snap-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: .5rem 0;
      }

      .snap-cell+.snap-cell:nth-child(2)::before,
      .snap-cell+.snap-cell:nth-child(4)::before {
          display: none;
      }
  }

  /* ============ INDUSTRY-ORIENTED ADVANCED CURRICULUM (stacked year bands) ============ */
  .ioc {
      padding: clamp(4rem, 8vw, 7rem) 0;
      position: relative;
      overflow-x: clip;
      /* instead of `hidden` — so sticky year nav works inside */
      overflow-y: visible;
      isolation: isolate;
      background: linear-gradient(180deg, var(--c-bg) 0%, #FFF9F1 60%, var(--c-bg) 100%);
  }

  .ioc::before {
      content: "CURRICULUM";
      position: absolute;
      z-index: -1;
      top: 3%;
      right: -3%;
      font-size: clamp(5rem, 11vw, 13rem);
      font-weight: 800;
      letter-spacing: -0.06em;
      color: rgba(232, 106, 44, 0.04);
      line-height: .85;
      pointer-events: none;
  }

  .ioc-head {
      text-align: center;
      max-width: 820px;
      margin: 0 auto 2.5rem;
  }

  .ioc-head h2 {
      font-size: clamp(2rem, 3.4vw, 2.9rem);
      letter-spacing: -0.025em;
      line-height: 1.08;
      margin-top: .75rem;
  }

  .ioc-head h2 .hl {
      background: linear-gradient(120deg, var(--o-700), var(--o-400));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  .ioc-head p {
      color: var(--c-text-2);
      max-width: 60ch;
      margin: .85rem auto 0;
      font-size: 1rem;
      line-height: 1.55;
  }

  /* Floating year selector — sticks to the top while scrolling through the curriculum */
  .ioc-anchors-wrap {
      position: sticky;
      top: 68px;
      z-index: 30;
      display: flex;
      justify-content: center;
      margin-bottom: 2.5rem;
      pointer-events: none;
  }

  .ioc-anchors {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .3rem;
      padding: .4rem;
      background: rgba(255, 251, 247, 0.85);
      backdrop-filter: saturate(170%) blur(14px);
      -webkit-backdrop-filter: saturate(170%) blur(14px);
      border: 1px solid var(--c-line);
      border-radius: 999px;
      box-shadow: 0 14px 36px -18px rgba(60, 30, 10, 0.25), 0 2px 6px rgba(60, 30, 10, 0.04);
      pointer-events: auto;
      transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  }

  .ioc-anchors.is-pinned {
      box-shadow: 0 20px 44px -22px rgba(60, 30, 10, 0.35), 0 2px 6px rgba(60, 30, 10, 0.06);
      border-color: var(--c-line-2);
  }

  .ioc-anchors a {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .55rem .95rem;
      border-radius: 999px;
      font-size: .85rem;
      font-weight: 700;
      color: var(--c-muted-2);
      letter-spacing: -0.005em;
      transition: background var(--t) var(--ease), color var(--t) var(--ease);
      white-space: nowrap;
  }

  .ioc-anchors a:hover {
      background: var(--c-cream);
      color: var(--c-text);
  }

  .ioc-anchors a.is-active {
      background: linear-gradient(135deg, var(--o-500), var(--o-700));
      color: #fff;
      box-shadow: 0 8px 20px -8px rgba(232, 106, 44, 0.55);
  }

  .ioc-anchors a .n {
      font-family: var(--font-display);
      background: var(--c-bg);
      color: var(--o-700);
      width: 22px;
      height: 22px;
      border-radius: 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: .72rem;
      font-weight: 800;
      border: 1.5px solid var(--o-200);
      transition: all var(--t) var(--ease);
  }

  .ioc-anchors a.is-active .n {
      background: #fff;
      color: var(--o-700);
      border-color: #fff;
  }

  .ioc-anchors a:hover .n {
      background: #fff;
      border-color: var(--o-400);
  }

  /* Give year bands enough scroll-margin so sticky nav doesn't cover their heads */
  .year-band {
      scroll-margin-top: 140px;
  }

  /* Year band — one block per year, all rendered, never hidden */
  .year-band {
      position: relative;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: var(--radius-xl);
      padding: clamp(1.75rem, 3vw, 2.5rem);
      overflow: hidden;
      isolation: isolate;
      margin-bottom: 1.75rem;
      box-shadow: 0 14px 40px -24px rgba(60, 30, 10, 0.2);
      scroll-margin-top: 140px;
  }

  .year-band::before {
      content: "";
      position: absolute;
      z-index: -1;
      right: -15%;
      top: -20%;
      width: 50%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232, 106, 44, 0.1), transparent 65%);
      pointer-events: none;
  }

  .year-band.final {
      background: linear-gradient(180deg, #FFF6EF 0%, var(--c-surface) 100%);
      border-color: var(--o-200);
      box-shadow: 0 24px 60px -28px rgba(232, 106, 44, 0.28);
  }

  .yb-head {
      display: grid;
      grid-template-columns: 120px 1fr auto;
      gap: 1.5rem;
      align-items: center;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--c-line);
      margin-bottom: 1.75rem;
  }

  .yb-tile {
      width: 120px;
      height: 120px;
      border-radius: 24px;
      background: linear-gradient(160deg, #FFFBF7, #FFE8D6);
      border: 1px solid var(--o-100);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 14px 28px -14px rgba(232, 106, 44, 0.3);
  }

  .yb-tile .num {
      font-family: var(--font-display);
      font-size: 2.7rem;
      font-weight: 800;
      letter-spacing: -0.05em;
      line-height: 1;
      background: linear-gradient(135deg, var(--o-700), var(--o-400));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  .yb-tile .lab {
      font-size: .62rem;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--o-700);
      margin-top: .5rem;
  }

  .year-band.final .yb-tile .num {
      background: linear-gradient(135deg, #F5A623, var(--o-600));
      -webkit-background-clip: text;
      background-clip: text;
  }

  .yb-info .tag {
      display: inline-block;
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--o-700);
      background: var(--o-50);
      border: 1px solid var(--o-100);
      padding: .3rem .65rem;
      border-radius: 999px;
      margin-bottom: .55rem;
  }

  .yb-info h3 {
      font-size: clamp(1.4rem, 2.4vw, 1.85rem);
      letter-spacing: -0.02em;
      margin: 0 0 .35rem;
  }

  .yb-info p {
      color: var(--c-text-2);
      font-size: .95rem;
      margin: 0;
      max-width: 62ch;
      line-height: 1.55;
  }

  .yb-pill {
      background: #1D1B18;
      color: #FFE8D6;
      padding: .5rem .85rem;
      border-radius: 12px;
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      white-space: nowrap;
  }

  .yb-pill .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #F5A623;
      box-shadow: 0 0 6px #F5A623;
  }

  .year-band.final .yb-pill {
      background: linear-gradient(135deg, var(--o-600), var(--o-700));
      color: #fff;
  }

  .yb-section-label {
      display: flex;
      align-items: center;
      gap: .65rem;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--o-700);
      margin-bottom: 1rem;
  }

  .yb-section-label::before {
      content: "";
      width: 22px;
      height: 1px;
      background: var(--o-500);
  }

  .yb-section-label .count {
      color: var(--c-muted-2);
      font-weight: 700;
      letter-spacing: .04em;
  }

  /* Subjects grid (bigger, more readable) */
  .yb-subjects {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .75rem;
      margin-bottom: 1.75rem;
  }

  .subj {
      position: relative;
      display: grid;
      grid-template-columns: 38px 1fr;
      gap: .75rem;
      padding: .9rem 1rem;
      background: var(--c-bg);
      border: 1px solid var(--c-line);
      border-radius: 12px;
      transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
  }

  .subj:hover {
      background: var(--c-surface);
      border-color: var(--o-200);
      transform: translateY(-2px);
  }

  .subj .si {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--o-50), #FFE8D6);
      border: 1px solid var(--o-100);
      color: var(--o-600);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .subj .si svg {
      width: 18px;
      height: 18px;
  }

  .subj .st {
      font-size: .92rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--c-text);
      line-height: 1.2;
  }

  .subj .sd {
      font-size: .78rem;
      color: var(--c-muted);
      margin-top: 3px;
      line-height: 1.35;
  }

  .yb-stack {
      padding: 1.1rem 1.25rem;
      background: linear-gradient(100deg, #15130F, #1D1B18);
      color: #FFE8D6;
      border-radius: 14px;
      display: flex;
      flex-wrap: wrap;
      gap: .85rem;
      align-items: center;
      margin-bottom: 1.75rem;
  }

  .yb-stack .label {
      font-size: .66rem;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #FFD1AD;
      padding-right: .75rem;
      border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .stack-chip {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .38rem .75rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #FFE8D6;
      font-size: .78rem;
      font-weight: 600;
      transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }

  .stack-chip:hover {
      background: rgba(244, 138, 79, 0.14);
      border-color: rgba(244, 138, 79, 0.35);
      transform: translateY(-1px);
  }

  .stack-chip .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--o-400);
  }

  .yb-milestones {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .75rem;
  }

  .milestone {
      position: relative;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: 14px;
      overflow: hidden;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
  }

  .milestone:hover {
      border-color: var(--o-200);
      box-shadow: var(--shadow);
      transform: translateY(-3px);
  }

  .milestone .mi {
      position: relative;
      aspect-ratio: 16 / 7;
      background: linear-gradient(135deg, #FFE8D6 0%, #FFD1AD 55%, #F48A4F 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      isolation: isolate;
  }

  .milestone .mi::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
          radial-gradient(60% 50% at 30% 30%, rgba(255, 255, 255, 0.35), transparent 70%),
          radial-gradient(50% 40% at 80% 85%, rgba(207, 90, 34, 0.2), transparent 70%);
      pointer-events: none;
  }

  .milestone .mi::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background-image:
          linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
      background-size: 20px 20px;
      mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
      -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
      pointer-events: none;
  }

  .milestone .mi img {
      position: absolute;
      inset: 0;
      z-index: 3;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  .milestone .mi .glyph {
      position: relative;
      z-index: 2;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 11px;
      background: rgba(207, 90, 34, 0.28);
      border: 1px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.25);
  }

  .milestone .mi .glyph svg {
      width: 20px;
      height: 20px;
  }

  .milestone .mi .badge {
      position: absolute;
      top: .45rem;
      left: .45rem;
      z-index: 4;
      font-size: .54rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: .18rem .42rem;
      border-radius: 999px;
      background: rgba(15, 13, 10, 0.55);
      color: #FFE8D6;
      border: 1px solid rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
  }

  .milestone .mb {
      padding: .65rem .8rem .8rem;
      display: flex;
      flex-direction: column;
      gap: .2rem;
      flex: 1;
  }

  .milestone .mt {
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--c-text);
      line-height: 1.25;
  }

  .milestone .md {
      font-size: .7rem;
      color: var(--c-muted);
      line-height: 1.35;
  }

  /* Alternate tile palettes so milestones read visually different */
  .milestone.p2 .mi {
      background: linear-gradient(135deg, #EFEBFF 0%, #C4B8FB 55%, #7A6CCF 100%);
  }

  .milestone.p2 .mi .glyph {
      background: rgba(75, 62, 143, 0.32);
  }

  .milestone.p3 .mi {
      background: linear-gradient(135deg, #D7F2E4 0%, #A3D8BE 55%, #2F8F5F 100%);
  }

  .milestone.p3 .mi .glyph {
      background: rgba(47, 143, 95, 0.3);
  }

  .milestone.p4 .mi {
      background: linear-gradient(135deg, #FFF2CF 0%, #F5D48A 55%, #B88714 100%);
  }

  .milestone.p4 .mi .glyph {
      background: rgba(184, 135, 20, 0.3);
  }

  /* Year-4 dual-path (rendered inline, both visible at once) */
  .y4-paths {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1.75rem;
  }

  .y4-path {
      position: relative;
      padding: 1.25rem;
      background: var(--c-bg);
      border: 1px solid var(--c-line);
      border-radius: 14px;
  }

  .y4-path .y4-head {
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: .75rem;
      align-items: center;
      margin-bottom: .85rem;
      padding-bottom: .85rem;
      border-bottom: 1px dashed var(--c-line);
  }

  .y4-path .pi {
      width: 40px;
      height: 40px;
      border-radius: 11px;
      background: linear-gradient(135deg, var(--o-500), var(--o-700));
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
  }

  .y4-path.research .pi {
      background: linear-gradient(135deg, #4B3E8F, #7A6CCF);
  }

  .y4-path .pt {
      font-size: .66rem;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--o-700);
      line-height: 1;
  }

  .y4-path.research .pt {
      color: #4B3E8F;
  }

  .y4-path .pname {
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      margin-top: 4px;
      color: var(--c-text);
  }

  .y4-path ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: .45rem;
  }

  .y4-path li {
      display: flex;
      gap: .55rem;
      align-items: flex-start;
      font-size: .88rem;
      color: var(--c-text-2);
      line-height: 1.5;
  }

  .y4-path li svg {
      color: var(--o-500);
      flex-shrink: 0;
      margin-top: 3px;
  }

  .y4-path.research li svg {
      color: #4B3E8F;
  }

  /* ============ In-year "What you'll build" carousel (lives inside each year band) ============ */
  .yb-build {
      margin-top: 1.75rem;
      padding-top: 1.5rem;
      border-top: 1px dashed var(--c-line);
  }

  .yb-build-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 1rem;
  }

  .yb-build-head .yb-section-label {
      margin-bottom: 0;
  }

  .yb-build-nav {
      display: inline-flex;
      gap: .35rem;
  }

  .yb-build-nav button {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: var(--c-bg);
      border: 1px solid var(--c-line);
      color: var(--c-text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }

  .yb-build-nav button:hover:not([disabled]) {
      background: var(--o-50);
      border-color: var(--o-200);
      color: var(--o-700);
      transform: translateY(-1px);
  }

  .yb-build-nav button[disabled] {
      opacity: .35;
      cursor: not-allowed;
  }

  .yb-build-nav button svg {
      width: 16px;
      height: 16px;
  }

  /* Legend — tiny inline version, per year */
  .yb-build-legend {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .75rem;
      font-size: .72rem;
      color: var(--c-muted);
  }

  .yb-build-legend span {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      font-weight: 600;
  }

  .yb-build-legend span::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 2px;
  }

  .yb-build-legend .lg-proj::before {
      background: linear-gradient(135deg, var(--o-400), var(--o-600));
  }

  .yb-build-legend .lg-hack::before {
      background: linear-gradient(135deg, #F5A623, var(--o-500));
  }

  .yb-build-legend .lg-comp::before {
      background: linear-gradient(135deg, #4B3E8F, #7A6CCF);
  }

  /* Carousel track */
  .yb-carousel {
      position: relative;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
      margin: 0 -.5rem;
      padding: .25rem .5rem .75rem;
  }

  .yb-carousel::-webkit-scrollbar {
      display: none;
  }

  .yb-carousel-track {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: calc((100% - 1.6rem) / 3);
      gap: .8rem;
  }

  @media (max-width: 1000px) {
      .yb-carousel-track {
          grid-auto-columns: calc((100% - .8rem) / 2);
      }
  }

  @media (max-width: 640px) {
      .yb-carousel-track {
          grid-auto-columns: 88%;
      }
  }

  .yb-card {
      position: relative;
      scroll-snap-align: start;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: 14px;
      overflow: hidden;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
  }

  .yb-card:hover {
      border-color: var(--o-200);
      box-shadow: var(--shadow);
      transform: translateY(-3px);
  }

  .yb-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--o-500), var(--o-300));
      z-index: 1;
  }

  .yb-card.hack::before {
      background: linear-gradient(180deg, #F5A623, var(--o-500));
  }

  .yb-card.comp::before {
      background: linear-gradient(180deg, #4B3E8F, #7A6CCF);
  }

  .yb-card .bh {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      padding: .8rem 1rem .5rem 1.2rem;
  }

  .yb-card .bt {
      font-size: .58rem;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      padding: .22rem .5rem;
      border-radius: 999px;
  }

  .yb-card.proj .bt {
      background: rgba(232, 106, 44, 0.12);
      color: var(--o-700);
  }

  .yb-card.hack .bt {
      background: rgba(245, 166, 35, 0.14);
      color: #B88714;
  }

  .yb-card.comp .bt {
      background: rgba(75, 62, 143, 0.12);
      color: #4B3E8F;
  }

  .yb-card .bi {
      width: 30px;
      height: 30px;
      border-radius: 9px;
      background: linear-gradient(135deg, var(--o-50), #FFE8D6);
      border: 1px solid var(--o-100);
      color: var(--o-600);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .yb-card.hack .bi {
      background: linear-gradient(135deg, #FFF2CF, #FFE4A5);
      color: #B88714;
      border-color: #F5D48A;
  }

  .yb-card.comp .bi {
      background: linear-gradient(135deg, #EFEBFF, #D5CCFA);
      color: #4B3E8F;
      border-color: rgba(75, 62, 143, 0.2);
  }

  .yb-card .bi svg {
      width: 14px;
      height: 14px;
  }

  .yb-card .bb {
      padding: 0 1.2rem 1rem;
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
  }

  .yb-card h4 {
      font-size: .95rem;
      letter-spacing: -0.01em;
      margin: 0 0 .3rem;
  }

  .yb-card p {
      font-size: .8rem;
      color: var(--c-text-2);
      margin: 0 0 .75rem;
      line-height: 1.45;
  }

  .yb-card .bg {
      display: flex;
      flex-wrap: wrap;
      gap: .3rem;
      margin-top: auto;
      padding-top: .65rem;
      border-top: 1px dashed var(--c-line);
  }

  .yb-card .bg span {
      font-size: .66rem;
      font-weight: 600;
      padding: .2rem .5rem;
      border-radius: 999px;
      background: var(--c-bg);
      border: 1px solid var(--c-line);
      color: var(--c-text-2);
  }


  @media (max-width: 1000px) {
      .yb-head {
          grid-template-columns: 96px 1fr;
      }

      .yb-pill {
          grid-column: 1 / -1;
          justify-self: start;
          margin-top: .5rem;
      }

      .yb-tile {
          width: 96px;
          height: 96px;
          border-radius: 20px;
      }

      .yb-tile .num {
          font-size: 2.2rem;
      }

      .yb-subjects, .yb-milestones {
          grid-template-columns: repeat(2, 1fr);
      }

      .y4-paths {
          grid-template-columns: 1fr;
      }
  }

  @media (max-width: 640px) {
      .yb-head {
          grid-template-columns: 72px 1fr;
          gap: 1rem;
      }

      .yb-tile {
          width: 72px;
          height: 72px;
          border-radius: 16px;
      }

      .yb-tile .num {
          font-size: 1.6rem;
      }

      .yb-tile .lab {
          font-size: .52rem;
      }

      .yb-subjects, .yb-milestones {
          grid-template-columns: 1fr;
      }

      .yb-build-head {
          gap: .65rem;
      }

      .yb-build-legend {
          display: none;
      }

      .ioc-anchors a {
          padding: .5rem .75rem;
          font-size: .8rem;
      }

      .ioc-anchors a .n {
          width: 20px;
          height: 20px;
          font-size: .66rem;
      }
  }


  /* ============ YOU BUILD. YOU DON'T JUST LEARN. ============ */
  .builder {
      padding: clamp(4rem, 8vw, 7rem) 0;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background: linear-gradient(180deg, var(--c-bg) 0%, #FFF6EF 100%);
  }

  .builder::before {
      content: "BUILD";
      position: absolute;
      z-index: -1;
      top: 5%;
      left: -3%;
      font-size: clamp(6rem, 13vw, 15rem);
      font-weight: 800;
      letter-spacing: -0.06em;
      color: rgba(232, 106, 44, 0.045);
      line-height: .85;
      pointer-events: none;
  }

  .builder-wrap {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: clamp(2rem, 4vw, 3.5rem);
      align-items: center;
  }

  .builder-copy .tag-row {
      display: flex;
      gap: .5rem;
      flex-wrap: wrap;
      margin-bottom: 1.25rem;
  }

  .builder-copy .tag-row .tag {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .35rem .7rem;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      color: var(--c-text-2);
  }

  .builder-copy .tag-row .tag.on {
      background: var(--o-50);
      border-color: var(--o-200);
      color: var(--o-700);
  }

  .builder-copy .tag-row .tag.off {
      text-decoration: line-through;
      color: var(--c-muted-2);
  }

  .builder-copy h2 {
      font-size: clamp(2rem, 3.4vw, 2.8rem);
      letter-spacing: -0.025em;
      line-height: 1.08;
      margin: 0 0 1.15rem;
  }

  .builder-copy h2 .hl {
      background: linear-gradient(120deg, var(--o-700), var(--o-400));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  .builder-copy h2 .strike {
      position: relative;
      color: var(--c-muted-2);
      white-space: nowrap;
  }

  .builder-copy h2 .strike::after {
      content: "";
      position: absolute;
      left: -2%;
      right: -2%;
      top: 52%;
      height: 3px;
      background: var(--o-500);
      border-radius: 2px;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 900ms cubic-bezier(.7, .1, .2, 1) 300ms;
  }

  .builder.in .builder-copy h2 .strike::after {
      transform: scaleX(1);
  }

  .builder-copy p.lead {
      font-size: 1.05rem;
      color: var(--c-text-2);
      margin: 0 0 1.5rem;
      max-width: 48ch;
      line-height: 1.6;
  }

  .builder-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-bottom: 1.5rem;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: var(--radius-lg);
      overflow: hidden;
  }

  .builder-stat {
      padding: 1.1rem 1.2rem;
      position: relative;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  }

  .builder.in .builder-stat {
      opacity: 1;
      transform: none;
  }

  .builder.in .builder-stat:nth-child(1) {
      transition-delay: 300ms;
  }

  .builder.in .builder-stat:nth-child(2) {
      transition-delay: 420ms;
  }

  .builder.in .builder-stat:nth-child(3) {
      transition-delay: 540ms;
  }

  .builder-stat+.builder-stat::before {
      content: "";
      position: absolute;
      left: 0;
      top: 22%;
      bottom: 22%;
      width: 1px;
      background: var(--c-line);
  }

  .builder-stat .k {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1;
      background: linear-gradient(135deg, var(--o-700), var(--o-400));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      display: flex;
      align-items: baseline;
      gap: 2px;
      font-variant-numeric: tabular-nums;
  }

  .builder-stat .k .u {
      color: var(--o-500);
      font-size: .8rem;
      font-weight: 700;
      -webkit-text-fill-color: var(--o-500);
  }

  .builder-stat .v {
      font-size: .78rem;
      color: var(--c-muted);
      margin-top: .4rem;
  }

  .builder-checks {
      display: grid;
      gap: .55rem;
  }

  .builder-checks li {
      display: flex;
      gap: .65rem;
      align-items: flex-start;
      font-size: .94rem;
      color: var(--c-text-2);
      line-height: 1.5;
  }

  .builder-checks li svg {
      color: var(--o-500);
      flex-shrink: 0;
      margin-top: 3px;
  }

  .builder-checks li strong {
      color: var(--c-text);
      font-weight: 700;
  }

  /* Right side: live "activity" card */
  .activity-card {
      position: relative;
      background: #1D1B18;
      color: #FFE8D6;
      border-radius: var(--radius-xl);
      padding: 1.25rem;
      overflow: hidden;
      isolation: isolate;
      box-shadow: 0 30px 60px -30px rgba(60, 30, 10, 0.4);
  }

  .activity-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
          radial-gradient(400px 260px at 20% 20%, rgba(244, 138, 79, 0.18), transparent 60%),
          radial-gradient(400px 260px at 80% 80%, rgba(232, 106, 44, 0.12), transparent 60%);
      pointer-events: none;
  }

  .ac-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      margin-bottom: 1rem;
  }

  .ac-head-left {
      display: flex;
      align-items: center;
      gap: .65rem;
  }

  .ac-head-ico {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: linear-gradient(135deg, var(--o-400), var(--o-600));
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
  }

  .ac-head-ico svg {
      width: 16px;
      height: 16px;
  }

  .ac-head h4 {
      color: #fff;
      margin: 0;
      font-size: .95rem;
      letter-spacing: -0.01em;
      font-weight: 700;
  }

  .ac-head .subt {
      font-size: .72rem;
      color: rgba(255, 255, 255, 0.5);
      margin-top: 2px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  .ac-live {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .3rem .6rem;
      border-radius: 999px;
      background: rgba(232, 106, 44, 0.14);
      border: 1px solid rgba(244, 138, 79, 0.3);
      color: #FFD1AD;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
  }

  .ac-live .ld {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #F5A623;
      box-shadow: 0 0 6px #F5A623;
      animation: acPulse 1.6s ease-in-out infinite;
  }

  @keyframes acPulse {
      0%, 100% {
          opacity: .4;
      }

      50% {
          opacity: 1;
      }
  }

  .ac-commits {
      position: relative;
      z-index: 1;
      display: grid;
      gap: .5rem;
  }

  .ac-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: .75rem;
      align-items: center;
      padding: .7rem .85rem;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 10px;
      opacity: 0;
      transform: translateX(-12px);
      transition: opacity 500ms var(--ease), transform 500ms var(--ease), background var(--t) var(--ease);
  }

  .builder.in .ac-row {
      opacity: 1;
      transform: none;
  }

  .builder.in .ac-row:nth-child(1) {
      transition-delay: 450ms;
  }

  .builder.in .ac-row:nth-child(2) {
      transition-delay: 580ms;
  }

  .builder.in .ac-row:nth-child(3) {
      transition-delay: 710ms;
  }

  .builder.in .ac-row:nth-child(4) {
      transition-delay: 840ms;
  }

  .builder.in .ac-row:nth-child(5) {
      transition-delay: 970ms;
  }

  .ac-row:hover {
      background: rgba(255, 255, 255, 0.07);
  }

  .ac-row .ac-av {
      width: 26px;
      height: 26px;
      border-radius: 7px;
      background: linear-gradient(135deg, var(--o-400), var(--o-700));
      color: #fff;
      font-size: .72rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .ac-row .ac-msg {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: .84rem;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .ac-row .ac-msg .sha {
      color: #F48A4F;
      margin-right: .5rem;
  }

  .ac-row .ac-tag {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: .2rem .45rem;
      border-radius: 6px;
      white-space: nowrap;
  }

  .ac-row .ac-tag.add {
      background: rgba(126, 208, 168, 0.14);
      color: #7ED0A8;
  }

  .ac-row .ac-tag.rev {
      background: rgba(244, 192, 106, 0.14);
      color: #F5C06A;
  }

  .ac-row .ac-tag.mrg {
      background: rgba(207, 137, 207, 0.14);
      color: #CF89CF;
  }

  .ac-row .ac-tag.dep {
      background: rgba(244, 138, 79, 0.16);
      color: #F48A4F;
  }

  .ac-foot {
      position: relative;
      z-index: 1;
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px dashed rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: .78rem;
      color: rgba(255, 255, 255, 0.6);
      font-variant-numeric: tabular-nums;
  }

  .ac-foot .ac-stats {
      display: flex;
      gap: 1rem;
  }

  .ac-foot .ac-stats span strong {
      color: #fff;
      font-weight: 700;
  }

  /* ============ PROJECTS YOU'LL SHIP ============ */
  .projects {
      padding: clamp(4rem, 8vw, 7rem) 0;
      position: relative;
      overflow: hidden;
  }

  .projects-head {
      text-align: center;
      max-width: 780px;
      margin: 0 auto 3rem;
  }

  .projects-head h2 {
      font-size: clamp(2rem, 3.4vw, 2.8rem);
      letter-spacing: -0.025em;
      line-height: 1.08;
      margin-top: .75rem;
  }

  .projects-head h2 .hl {
      background: linear-gradient(120deg, var(--o-700), var(--o-400));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  .projects-head p {
      color: var(--c-text-2);
      max-width: 58ch;
      margin: .75rem auto 0;
  }

  .projects-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
  }

  .project-card {
      position: relative;
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: var(--radius-lg);
      overflow: hidden;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 650ms var(--ease), transform 650ms var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  }

  .projects-grid.in .project-card {
      opacity: 1;
      transform: none;
  }

  .projects-grid.in .project-card:nth-child(1) {
      transition-delay: 100ms;
  }

  .projects-grid.in .project-card:nth-child(2) {
      transition-delay: 220ms;
  }

  .projects-grid.in .project-card:nth-child(3) {
      transition-delay: 340ms;
  }

  .projects-grid.in .project-card:nth-child(4) {
      transition-delay: 460ms;
  }

  .projects-grid.in .project-card:nth-child(5) {
      transition-delay: 580ms;
  }

  .projects-grid.in .project-card:nth-child(6) {
      transition-delay: 700ms;
  }

  .project-card:hover {
      border-color: var(--o-200);
      box-shadow: var(--shadow-lg);
      transform: translateY(-4px);
  }

  .project-art {
      position: relative;
      aspect-ratio: 16 / 9;
      background: #1D1B18;
      overflow: hidden;
  }

  .project-art::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
          radial-gradient(400px 200px at 25% 25%, rgba(244, 138, 79, 0.22), transparent 60%),
          linear-gradient(155deg, #2a1e14 0%, #1D1B18 100%);
  }

  .project-art::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
      -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
  }

  .project-art .glyph {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #FFD1AD;
      opacity: .85;
      z-index: 1;
  }

  .project-art .glyph svg {
      width: 54px;
      height: 54px;
  }

  .project-art .badge {
      position: absolute;
      top: 1rem;
      left: 1rem;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .3rem .6rem;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(6px);
      color: #FFE8D6;
      border: 1px solid rgba(255, 255, 255, 0.12);
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
  }

  .project-art .badge .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #F5A623;
      box-shadow: 0 0 6px #F5A623;
  }

  .project-card .project-body {
      padding: 1.25rem 1.35rem 1.35rem;
      display: flex;
      flex-direction: column;
      flex: 1;
  }

  .project-card h3 {
      font-size: 1.1rem;
      letter-spacing: -0.015em;
      margin: 0 0 .4rem;
  }

  .project-card p {
      font-size: .9rem;
      color: var(--c-text-2);
      margin: 0 0 1rem;
      line-height: 1.5;
  }

  .project-card .pstack {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
      margin-top: auto;
      padding-top: .85rem;
      border-top: 1px dashed var(--c-line);
  }

  .project-card .pstack span {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .02em;
      padding: .25rem .55rem;
      border-radius: 999px;
      background: var(--c-bg);
      border: 1px solid var(--c-line);
      color: var(--c-text-2);
  }

  /* ============ DEVELOPER TOOLCHAIN ============ */
  .tools {
      padding: clamp(3.5rem, 6vw, 5rem) 0;
      background: var(--c-surface);
      border-top: 1px solid var(--c-line);
      border-bottom: 1px solid var(--c-line);
  }

  .tools-head {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 2rem;
  }

  .tools-head h3 {
      font-size: clamp(1.3rem, 2vw, 1.7rem);
      letter-spacing: -0.02em;
      margin: .5rem 0 .5rem;
  }

  .tools-head p {
      color: var(--c-muted);
      margin: 0;
      font-size: .95rem;
  }

  .tools-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: .7rem;
  }

  .tool {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: 1rem .75rem;
      background: var(--c-bg);
      border: 1px solid var(--c-line);
      border-radius: 12px;
      text-align: center;
      transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }

  .tool:hover {
      border-color: var(--o-200);
      background: var(--c-surface);
      transform: translateY(-2px);
  }

  .tool .ti {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--o-50), #FFE8D6);
      border: 1px solid var(--o-100);
      color: var(--o-600);
      display: inline-flex;
      align-items: center;
      justify-content: center;
  }

  .tool .ti svg {
      width: 18px;
      height: 18px;
  }

  .tool .tn {
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--c-text);
  }

  .tool .tt {
      font-size: .68rem;
      color: var(--c-muted);
      font-weight: 500;
      letter-spacing: .02em;
  }

  /* ============ MENTOR REVIEW MOMENT ============ */
  .mentor-moment {
      padding: clamp(4rem, 7vw, 6rem) 0;
      background: linear-gradient(180deg, #FFF6EF 0%, #FFE8D6 100%);
      position: relative;
      overflow: hidden;
  }

  .mm-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: center;
  }

  .mm-copy h2 {
      font-size: clamp(1.9rem, 3.2vw, 2.6rem);
      letter-spacing: -0.025em;
      line-height: 1.08;
      margin: .5rem 0 1rem;
      max-width: 20ch;
  }

  .mm-copy h2 .hl {
      background: linear-gradient(120deg, var(--o-700), var(--o-400));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  .mm-copy p {
      font-size: 1rem;
      color: var(--c-text-2);
      margin: 0 0 1.25rem;
      max-width: 52ch;
      line-height: 1.6;
  }

  .mm-list {
      display: grid;
      gap: .55rem;
  }

  .mm-list li {
      display: flex;
      gap: .65rem;
      align-items: flex-start;
      font-size: .95rem;
      color: var(--c-text-2);
  }

  .mm-list li svg {
      color: var(--o-600);
      flex-shrink: 0;
      margin-top: 3px;
  }

  .mm-list li strong {
      color: var(--c-text);
      font-weight: 700;
  }

  /* Right: review card mockup */
  .review-card {
      background: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: var(--radius-xl);
      padding: 1.5rem;
      box-shadow: 0 24px 56px -26px rgba(60, 30, 10, 0.28);
  }

  .rc-head {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--c-line);
      margin-bottom: 1rem;
  }

  .rc-av {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--o-400), var(--o-700));
      color: #fff;
      font-weight: 700;
      font-size: .9rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
  }

  .rc-title {
      font-weight: 700;
      letter-spacing: -0.01em;
      font-size: .95rem;
      line-height: 1.2;
  }

  .rc-subtitle {
      font-size: .77rem;
      color: var(--c-muted);
      margin-top: 2px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  .rc-status {
      margin-left: auto;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #2F8F5F;
      background: rgba(47, 143, 95, 0.1);
      border: 1px solid rgba(47, 143, 95, 0.2);
      padding: .3rem .6rem;
      border-radius: 999px;
  }

  .rc-code {
      background: #1D1B18;
      color: #E7DFD2;
      border-radius: 10px;
      padding: .85rem 1rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: .78rem;
      line-height: 1.55;
      margin-bottom: 1rem;
      overflow: hidden;
      white-space: pre;
      position: relative;
  }

  .rc-code .kw {
      color: #F48A4F;
  }

  .rc-code .st {
      color: #7ED0A8;
  }

  .rc-code .co {
      color: #6B645A;
      font-style: italic;
  }

  .rc-code .pu {
      color: #A69D8D;
  }

  .rc-code .add-line {
      background: rgba(126, 208, 168, 0.12);
      display: block;
      margin: 0 -1rem;
      padding: 0 1rem;
  }

  .rc-code .add-line::before {
      content: "+ ";
      color: #7ED0A8;
  }

  .rc-code .rem-line {
      background: rgba(255, 95, 87, 0.1);
      text-decoration: line-through;
      opacity: .65;
      display: block;
      margin: 0 -1rem;
      padding: 0 1rem;
  }

  .rc-code .rem-line::before {
      content: "- ";
      color: #FF8A73;
      text-decoration: none;
  }

  .rc-comment {
      display: flex;
      gap: .65rem;
      padding: .85rem 1rem;
      background: var(--o-50);
      border: 1px solid var(--o-100);
      border-radius: 10px;
  }

  .rc-comment .rc-mentor-av {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: linear-gradient(135deg, #7ED0A8, #2F8F5F);
      color: #fff;
      font-weight: 700;
      font-size: .75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .rc-comment .rc-comment-body {
      font-size: .85rem;
      color: var(--c-text);
      line-height: 1.5;
  }

  .rc-comment .rc-comment-body strong {
      color: var(--c-text);
      font-weight: 700;
  }

  .rc-comment .rc-comment-body .who {
      font-size: .72rem;
      color: var(--c-muted);
      margin-top: 4px;
      font-weight: 500;
  }

  /* ============ BROCHURE DOWNLOAD — premium CTA ============ */
  .brochure-cta {
      padding: clamp(4rem, 8vw, 6.5rem) 0;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background: linear-gradient(135deg, #1D1B18 0%, #2a1e14 50%, #1D1B18 100%);
      color: #FFFBF7;
  }

  .brochure-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
          radial-gradient(500px 300px at 20% 30%, rgba(244, 138, 79, 0.25), transparent 60%),
          radial-gradient(600px 350px at 80% 70%, rgba(232, 106, 44, 0.18), transparent 60%);
      pointer-events: none;
  }

  .brochure-cta::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
          linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
      pointer-events: none;
  }

  .brochure-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 3rem;
      align-items: center;
  }

  .brochure-copy .eyebrow {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.14);
      color: #FFD1AD;
  }

  .brochure-copy h2 {
      color: #fff;
      font-size: clamp(2rem, 3.6vw, 3rem);
      letter-spacing: -0.025em;
      line-height: 1.05;
      margin: .85rem 0 .85rem;
      max-width: 18ch;
  }

  .brochure-copy h2 .hl {
      background: linear-gradient(120deg, #F5A623, #F48A4F);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  .brochure-copy p {
      color: rgba(255, 255, 255, 0.72);
      margin: 0 0 1.5rem;
      max-width: 52ch;
      font-size: 1rem;
      line-height: 1.55;
  }

  .brochure-checks {
      display: grid;
      gap: .55rem;
      margin-bottom: 1.75rem;
  }

  .brochure-checks li {
      display: flex;
      gap: .55rem;
      align-items: flex-start;
      font-size: .9rem;
      color: rgba(255, 255, 255, 0.82);
      line-height: 1.45;
  }

  .brochure-checks li svg {
      color: #F5A623;
      flex-shrink: 0;
      margin-top: 3px;
  }

  .brochure-form {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem;
      padding: .4rem;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 999px;
      max-width: 520px;
  }

  .brochure-form input {
      flex: 1;
      min-width: 200px;
      appearance: none;
      border: 0;
      outline: 0;
      background: transparent;
      padding: .75rem 1rem;
      font: inherit;
      color: #fff;
  }

  .brochure-form input::placeholder {
      color: rgba(255, 255, 255, 0.45);
  }

  .brochure-form button {
      background: linear-gradient(135deg, var(--o-400), var(--o-600));
      color: #fff;
      font-weight: 700;
      font-size: .95rem;
      padding: .75rem 1.35rem;
      border: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      cursor: pointer;
      transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
      box-shadow: 0 12px 28px -12px rgba(232, 106, 44, 0.6);
      white-space: nowrap;
  }

  .brochure-form button:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 34px -14px rgba(232, 106, 44, 0.75);
  }

  .brochure-alt {
      margin-top: .85rem;
      font-size: .82rem;
      color: rgba(255, 255, 255, 0.58);
  }

  .brochure-alt a {
      color: #FFD1AD;
      font-weight: 700;
      text-decoration: underline;
      text-decoration-color: rgba(255, 209, 173, 0.4);
      text-underline-offset: 3px;
  }

  .brochure-alt a:hover {
      color: #fff;
      text-decoration-color: #FFD1AD;
  }

  /* PDF card mockup */
  .pdf-mock {
      position: relative;
      perspective: 1400px;
  }

  .pdf-card {
      position: relative;
      aspect-ratio: 3 / 4;
      background: linear-gradient(160deg, #FFFBF7 0%, #FFE8D6 100%);
      border-radius: 18px;
      padding: 1.5rem;
      box-shadow:
          0 40px 80px -30px rgba(0, 0, 0, 0.55),
          0 16px 30px -18px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.6);
      transform: rotate(-4deg) rotateX(3deg);
      transform-origin: center;
      transform-style: preserve-3d;
      transition: transform 600ms var(--ease);
  }

  .pdf-mock:hover .pdf-card {
      transform: rotate(-2deg) rotateX(1deg) translateY(-6px);
  }

  .pdf-card::before {
      /* shine */
      content: "";
      position: absolute;
      left: -40%;
      top: -30%;
      width: 60%;
      height: 140%;
      background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.3) 50%, transparent 60%);
      transform: rotate(15deg);
      pointer-events: none;
  }

  .pdf-card::after {
      /* backer card */
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, #FFE8D6, #F48A4F);
      border-radius: 18px;
      transform: rotate(6deg) translate(12px, 10px);
      z-index: -1;
      opacity: .85;
      box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.5);
  }

  .pdf-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      padding-bottom: .85rem;
      border-bottom: 1px dashed rgba(207, 90, 34, 0.25);
      margin-bottom: 1.15rem;
  }

  .pdf-brand {
      display: flex;
      align-items: center;
      gap: .45rem;
      font-weight: 700;
      font-size: .85rem;
      letter-spacing: -0.01em;
  }

  .pdf-brand .pb-mk {
      width: 24px;
      height: 24px;
      border-radius: 7px;
      background: linear-gradient(135deg, var(--o-400), var(--o-600));
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
  }

  .pdf-brand .pb-mk svg {
      width: 14px;
      height: 14px;
  }

  .pdf-tag {
      font-size: .6rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--o-700);
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(207, 90, 34, 0.15);
      padding: .2rem .45rem;
      border-radius: 999px;
  }

  .pdf-title {
      font-family: var(--font-display);
      font-size: 1.35rem;
      font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1.1;
      margin: 0 0 .5rem;
      color: var(--c-text);
  }

  .pdf-title .hl {
      color: var(--o-700);
  }

  .pdf-meta {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--c-muted);
      margin-bottom: 1.1rem;
  }

  .pdf-lines {
      display: grid;
      gap: 6px;
      margin-bottom: 1.1rem;
  }

  .pdf-line {
      height: 7px;
      border-radius: 3px;
      background: rgba(207, 90, 34, 0.14);
  }

  .pdf-line.w1 {
      width: 90%;
  }

  .pdf-line.w2 {
      width: 75%;
  }

  .pdf-line.w3 {
      width: 60%;
      background: rgba(207, 90, 34, 0.22);
  }

  .pdf-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .5rem;
      margin-bottom: 1.1rem;
  }

  .pdf-stat {
      background: rgba(255, 255, 255, 0.75);
      border: 1px solid rgba(207, 90, 34, 0.12);
      border-radius: 8px;
      padding: .55rem .7rem;
  }

  .pdf-stat .k {
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--o-700);
      line-height: 1;
  }

  .pdf-stat .v {
      font-size: .65rem;
      color: var(--c-muted);
      margin-top: 3px;
      letter-spacing: .02em;
  }

  .pdf-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: .7rem;
      color: var(--c-muted);
      font-weight: 600;
  }

  .pdf-foot .pages {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
  }

  .pdf-foot svg {
      width: 12px;
      height: 12px;
  }

  /* DOWNLOAD CTA in hero (small button tweak) */
  .hero-actions-row {
      display: flex;
      gap: .6rem;
      flex-wrap: wrap;
      margin-top: 1.25rem;
  }

  @media (max-width: 1000px) {
      .builder-wrap {
          grid-template-columns: 1fr;
          gap: 2.5rem;
      }

      .activity-card {
          max-width: 620px;
          margin: 0 auto;
          width: 100%;
      }

      .projects-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .tools-grid {
          grid-template-columns: repeat(4, 1fr);
      }

      .mm-wrap {
          grid-template-columns: 1fr;
          gap: 2rem;
      }

      .brochure-inner {
          grid-template-columns: 1fr;
          gap: 2.5rem;
      }

      .pdf-mock {
          max-width: 340px;
          margin: 0 auto;
      }
  }

  @media (max-width: 640px) {
      .projects-grid {
          grid-template-columns: 1fr;
      }

      .tools-grid {
          grid-template-columns: repeat(3, 1fr);
      }

      .builder-stats {
          grid-template-columns: 1fr;
      }

      .builder-stat+.builder-stat::before {
          display: none;
      }
  }

  @media (prefers-reduced-motion: reduce) {

      .snap-cell, .snap-row, .year-card, .year-chips .chip, .track, .grad-cell, .adaptive-cell,
      .builder-stat, .ac-row, .project-card, .ioc-panel, .proj-card, .hack {
          opacity: 1 !important;
          transform: none !important;
      }

      .cur-hero::before, .adaptive-ticker .tape-track, .adaptive-ticker .live-dot, .ac-live .ld {
          animation: none !important;
      }

      .builder-copy h2 .strike::after {
          transition: none !important;
          transform: scaleX(1) !important;
      }
  }