/* ══════════════════════════════════════════
   PROGRAMME PAGE
══════════════════════════════════════════ */


    /* ══════════════════════════════════════════
       SECTION 2: AT A GLANCE — detail/info grid
    ══════════════════════════════════════════ */
    .glance-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      background: rgba(45,106,45,.10);
      border-radius: 20px;
      overflow: hidden;
      border: 1.5px solid rgba(45,106,45,.18);
      box-shadow: 0 6px 28px rgba(45,106,45,.10);
    }
    .glance-row {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      background: rgba(255,252,240,.72);
      backdrop-filter: blur(14px);
      transition: background .2s;
    }
    .glance-row:hover { background: rgba(255,252,240,.92); }
    .glance-row.full { grid-column: 1 / -1; display: block; }

    /* Full Day header — sits outside grid, always 100% wide */
    .glance-fullday-header {
      background: rgba(45,106,45,.07);
      border-radius: 16px 16px 0 0;
      border: 1.5px solid rgba(45,106,45,.18);
      border-bottom: none;
      padding: 20px 28px;
      text-align: center;
    }
    .glance-fullday-eyebrow {
      font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
      color: var(--green); font-weight: 700; margin-bottom: 6px;
    }
    .glance-fullday-time {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.5vw, 1.9rem);
      font-weight: 600; color: var(--green-dark); line-height: 1.1;
    }
    /* Make the grid connect visually to the header above */
    .glance-fullday-header + .glance-grid {
      border-radius: 0 0 20px 20px;
    }
    /* .glance-row.full always spans full width on all screen sizes */
    .glance-label {
      padding: 16px 20px;
      background: rgba(45,106,45,.07);
      border-right: 1px solid rgba(45,106,45,.10);
      font-size: .72rem; letter-spacing: .09em;
      text-transform: uppercase; color: var(--green-dark);
      font-weight: 700; display: flex; align-items: center;
      gap: 8px;
    }
    .glance-label .gl-icon { flex-shrink: 0; display:flex; align-items:center; }
    .glance-label .gl-icon svg { display:block; }
    .gd-icon { display:inline-flex; align-items:center; margin-right:6px; vertical-align:middle; }
    .gd-icon svg { display:block; }
    .glance-value {
      padding: 16px 20px;
      font-size: .9rem; color: var(--muted);
      line-height: 1.55; display: flex; align-items: center;
    }
    .glance-value strong { color: var(--green-dark); font-weight: 600; }
    .glance-highlight .glance-value {
      color: var(--green-dark);
    }
    .glance-highlight .glance-label { background: rgba(45,106,45,.12); }

    /* ── Pricing standout card ── */
    .glance-price-row {
      grid-column: span 2;
      background: var(--green-dark);
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 24px;
      padding: 24px 28px;
      position: relative;
      overflow: hidden;
    }
    .glance-price-row::before {
      content: ''; position: absolute;
      inset: 0;
      background: radial-gradient(circle at 80% 50%, rgba(200,146,10,.18), transparent 60%);
      pointer-events: none;
    }
    .glance-price-left { position: relative; z-index: 1; }
    .glance-price-eyebrow {
      font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
      color: var(--gold); font-weight: 700; font-family: var(--font-body);
      margin-bottom: 6px;
    }
    .glance-price-amount {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 2.8rem);
      font-weight: 600; color: #fff;
      line-height: 1; letter-spacing: -.02em;
    }
    .glance-price-amount span {
      font-size: 1rem; font-weight: 300;
      color: rgba(255,255,255,.70);
      font-family: var(--font-body); letter-spacing: 0;
      margin-left: 4px;
    }
    .glance-price-includes {
      margin-top: 10px;
      display: flex; flex-wrap: wrap; gap: 6px 14px;
    }
    .glance-price-chip {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: .78rem; color: rgba(255,255,255,.82);
      font-family: var(--font-body);
    }
    .glance-price-chip::before {
      content: '✓';
      color: #f5d675; font-weight: 700; font-size: .8rem;
    }
    .glance-price-cta {
      position: relative; z-index: 1; flex-shrink: 0;
    }
    .glance-price-cta a {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; color: var(--green-dark);
      padding: 13px 24px; border-radius: 100px;
      font-family: var(--font-body); font-weight: 700; font-size: .88rem;
      text-decoration: none;
      box-shadow: 0 4px 16px rgba(0,0,0,.20);
      transition: transform .2s, box-shadow .3s;
    }
    .glance-price-cta a:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.30); }
    @media(hover:none)and(pointer:coarse){ .glance-price-cta a { cursor: pointer; } }
    @media(max-width:700px){
      .glance-price-row { grid-template-columns: 1fr; gap: 16px; padding: 20px 20px; }
      .glance-price-cta { width: 100%; }
      .glance-price-cta a { width: 100%; justify-content: center; }
    }
    @media(max-width:500px){
      .glance-price-amount { font-size: 2rem; }
    }

    /* ══════════════════════════════════════════
       SECTION 3: VISUAL TIMELINE
    ══════════════════════════════════════════ */
    .timeline-wrap {
      position: relative;
      padding-left: 28px;
    }
    /* Dotted vertical line — background track */
    .timeline-wrap::before {
      content: '';
      position: absolute;
      left: 1px; top: 12px; bottom: 12px;
      width: 2px;
      background: repeating-linear-gradient(
        to bottom,
        rgba(45,106,45,.25) 0px,
        rgba(45,106,45,.25) 6px,
        transparent 6px,
        transparent 12px
      );
    }
    /* Solid fill line — grows on scroll */
    .tl-progress-line {
      position: absolute;
      left: 1px; top: 12px;
      width: 2px;
      height: 0;
      background: var(--green);
      transition: height .4s ease;
      z-index: 1;
      border-radius: 2px;
    }
    .tl-entry {
      display: grid;
      grid-template-columns: 90px 1fr;
      gap: 0;
      position: relative;
      margin-bottom: 4px;
    }
    /* Timeline dot */
    .tl-entry::before {
      content: '';
      position: absolute;
      left: -34px; top: 20px;
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--green);
      border: 3px solid white;
      box-shadow: 0 0 0 2px var(--green);
      z-index: 1;
    }
    /* Dotted horizontal connector from dot to card */
    .tl-entry::after {
      content: '';
      position: absolute;
      left: -18px; top: 26px;
      width: 18px; height: 2px;
      background: repeating-linear-gradient(
        to right,
        var(--green) 0px,
        var(--green) 4px,
        transparent 4px,
        transparent 8px
      );
    }
    .tl-entry.break-entry::before { background: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
    .tl-entry.break-entry::after  { background: repeating-linear-gradient(to right, var(--gold) 0px, var(--gold) 4px, transparent 4px, transparent 8px); }
    .tl-entry.cert-entry::before  { background: var(--gold); box-shadow: 0 0 0 2px var(--gold); width:17px; height:17px; left:-35px; top:19px; }
    .tl-entry.cert-entry::after   { background: repeating-linear-gradient(to right, var(--gold) 0px, var(--gold) 4px, transparent 4px, transparent 8px); top: 27px; }

    .tl-time {
      padding: 18px 16px 18px 0;
      font-size: .78rem; font-weight: 700;
      color: var(--green); letter-spacing: .02em;
      line-height: 1.3; white-space: nowrap;
      display: flex; align-items: flex-start; padding-top: 20px;
    }
    .tl-entry.break-entry .tl-time { color: var(--gold); }

    .tl-card {
      margin: 4px 0;
      padding: 16px 20px;
      border-radius: 14px;
      background: rgba(255,252,240,.65);
      border: 1.5px solid #2D6A2D;
      backdrop-filter: blur(12px);
      transition: border-color .25s, box-shadow .25s, transform .2s;
    }
    .tl-card:hover {
      border-color: var(--green-dark);
      box-shadow: 0 6px 20px rgba(45,106,45,.18);
      transform: translateX(4px);
    }
    .tl-entry.break-entry .tl-card {
      background: rgba(200,146,10,.07);
      border-color: rgba(200,146,10,.22);
    }
    .tl-entry.break-entry .tl-card:hover { border-color: var(--gold); }
    /* Active card on click */
    .tl-entry.tl-active .tl-card,
    .tl-entry.tl-active .tl-card-break {
      border-color: var(--green-dark) !important;
      box-shadow: 0 0 0 3px rgba(45,106,45,.18), 0 6px 20px rgba(45,106,45,.15);
      transform: translateX(6px);
    }
    .tl-entry.tl-active .tl-cert-card {
      box-shadow: 0 0 0 3px rgba(200,146,10,.30), 0 8px 32px rgba(200,146,10,.30);
      transform: translateX(6px);
    }
    .tl-entry.tl-active::before {
      box-shadow: 0 0 0 4px rgba(45,106,45,.22), 0 0 0 2px var(--green);
      transform: scale(1.25);
      transition: transform .3s ease, box-shadow .3s ease;
    }

    .tl-card-break {
      border: 2px dashed rgba(200,146,10,.55) !important;
      background: rgba(200,146,10,.06) !important;
    }
    .tl-card-break:hover {
      border-color: var(--gold) !important;
      background: rgba(200,146,10,.11) !important;
    }
    .tl-entry.cert-entry .tl-card {
      background: linear-gradient(135deg, rgba(45,106,45,.10), rgba(200,146,10,.08));
      border-color: rgba(45,106,45,.28);
    }

    .tl-activity-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
    .tl-icon { font-size: 1.3rem; flex-shrink: 0; }
    .tl-activity {
      font-family: var(--font-display);
      font-size: 1rem; font-weight: 400;
      color: var(--green-dark); line-height: 1.2;
    }
    .tl-entry.break-entry .tl-activity { color: #9a6a00; }
    .tl-learn {
      font-size: .82rem; color: var(--muted);
      line-height: 1.58; margin-left: 36px;
    }

    /* ── Subject tag pills ── */
    .tl-tag {
      display: inline-block;
      font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
      font-weight: 700; font-family: var(--font-body);
      padding: 3px 10px; border-radius: 100px;
      margin-left: 36px; margin-top: 8px;
    }
    .tl-tag-science   { background: rgba(59,109,17,.12); color: #2d5e0a; border: 1px solid rgba(59,109,17,.28); }
    .tl-tag-env       { background: rgba(45,106,45,.12); color: var(--green-dark); border: 1px solid rgba(45,106,45,.25); }
    .tl-tag-agri      { background: rgba(200,146,10,.12); color: #7a5500; border: 1px solid rgba(200,146,10,.30); }
    .tl-tag-skills    { background: rgba(30,100,200,.10); color: #1a4a8a; border: 1px solid rgba(30,100,200,.22); }
    .tl-tag-nutrition { background: rgba(200,70,30,.10); color: #8a3015; border: 1px solid rgba(200,70,30,.22); }

    /* ══════════════════════════════════════════
       SECTION 4: LEARNING OUTCOMES — 4 pillars
    ══════════════════════════════════════════ */
    .outcomes-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .outcome-card {
      padding: 32px 24px;
      border-radius: 20px;
      background: rgba(255,252,240,.65);
      border: 1.5px solid rgba(255,255,255,.85);
      box-shadow: 0 4px 18px rgba(45,106,45,.07);
      text-align: center;
      transition: transform .28s, box-shadow .28s, border-color .28s;
    }
    .outcome-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 40px rgba(45,106,45,.15);
      border-color: var(--green);
    }
    .outcome-icon { font-size: 2.4rem; display: block; margin-bottom: 16px; }
    .outcome-title {
      font-family: var(--font-display);
      font-size: 1rem; font-weight: 600;
      color: var(--green-dark); margin-bottom: 10px;
    }
    .outcome-text { font-size: .85rem; color: var(--muted); line-height: 1.65; }

    /* ══════════════════════════════════════════
       SECTION 5: CURRICULUM TABLE
    ══════════════════════════════════════════ */
    .curriculum-table {
      width: 100%; border-collapse: collapse;
      border-radius: 18px; overflow: hidden;
      box-shadow: 0 4px 20px rgba(45,106,45,.10);
    }
    .curriculum-table thead tr {
      background: var(--green);
    }
    .curriculum-table th {
      padding: 14px 22px; text-align: left;
      color: #fff; font-size: .72rem;
      letter-spacing: .1em; text-transform: uppercase;
      font-weight: 700;
    }
    .curriculum-table th:first-child { width: 30%; }
    .curriculum-table tbody tr {
      background: rgba(255,252,240,.68);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255,255,255,.65);
      transition: background .2s;
    }
    .curriculum-table tbody tr:last-child { border-bottom: none; }
    .curriculum-table tbody tr:hover { background: rgba(255,252,240,.92); }
    .curriculum-table td {
      padding: 15px 22px; font-size: .9rem;
      color: var(--muted); line-height: 1.58; vertical-align: top;
    }
    .curriculum-table td:first-child {
      color: var(--green-dark); font-weight: 700;
      font-size: .88rem;
    }
    .subject-icon { margin-right: 8px; }

    /* ══════════════════════════════════════════
       SECTION 6: CERTIFICATE
    ══════════════════════════════════════════ */
    .cert-section {
      background: var(--green-dark);
      padding: 80px 52px;
      position: relative; overflow: hidden;
    }
    .cert-section::before {
      content: '';
      position: absolute; top: -100px; right: -100px;
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(200,146,10,.22), transparent 60%);
      border-radius: 50%; pointer-events: none;
    }
    .cert-inner {
      max-width: 1200px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 60px; align-items: center;
      position: relative; z-index: 1;
    }
    .cert-text-col h2 {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      font-weight: 200; color: #fff;
      letter-spacing: -.02em; line-height: 1.1;
      margin-bottom: 20px;
    }
    .cert-text-col h2 em { font-style: italic; color: #f5d675; }
    .cert-text-col p {
      color: rgba(255,255,255,.68);
      font-size: .95rem; line-height: 1.75;
      margin-bottom: 14px;
    }
    .cert-text-col p strong { color: #fff; font-weight: 600; }
    .cert-visual-col {
      display: flex; justify-content: center;
    }
    .cert-sample {
      background: linear-gradient(145deg, #f5efe0, #fff8ee);
      border: 3px solid rgba(200,146,10,.55);
      border-radius: 20px;
      padding: 40px 36px;
      text-align: center;
      box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(200,146,10,.20);
      max-width: 340px; width: 100%;
      position: relative;
    }
    /* Stamp-style outer border */
    .cert-sample::before {
      content: '';
      position: absolute; inset: 8px;
      border: 1.5px dashed rgba(200,146,10,.35);
      border-radius: 14px; pointer-events: none;
    }
    .cert-sample-emblem { font-size: 3rem; margin-bottom: 12px; display: block; }
    .cert-sample-org {
      font-size: .65rem; letter-spacing: .12em;
      text-transform: uppercase; color: #7a6020;
      font-weight: 700; margin-bottom: 6px;
    }
    .cert-sample-title {
      font-family: var(--font-display);
      font-size: 1.4rem; font-weight: 600;
      color: #3a2a00; line-height: 1.2;
      margin-bottom: 8px;
    }
    .cert-sample-name {
      font-family: var(--font-display);
      font-size: 1.1rem; font-style: italic;
      color: #5a4010; border-bottom: 1.5px solid rgba(200,146,10,.40);
      padding-bottom: 8px; margin-bottom: 10px;
    }
    .cert-sample-desc {
      font-size: .74rem; color: #7a6020;
      line-height: 1.55; margin-bottom: 16px;
    }
    .cert-sample-footer {
      display: flex; justify-content: space-between;
      align-items: flex-end; margin-top: 16px;
      padding-top: 14px; border-top: 1px solid rgba(200,146,10,.25);
    }
    .cert-seal {
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--green); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      box-shadow: 0 3px 12px rgba(45,106,45,.35);
    }
    .cert-sign { font-family: var(--font-display); font-style: italic; font-size: .85rem; color: #5a4010; }
    .cert-sign-label { font-size: .62rem; color: #9a8040; letter-spacing: .04em; }
    .cert-badge-row {
      display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
      background: rgba(200,146,10,.12); border: 1px solid rgba(200,146,10,.35);
      padding: 6px 14px; border-radius: 100px;
      font-size: .7rem; color: #7a6020; font-weight: 700; letter-spacing: .06em;
    }

    /* ══ RESPONSIVE ══ */
    @media (max-width:900px) {
      .outcomes-row { grid-template-columns: repeat(2, 1fr) !important; }
      .cert-inner { grid-template-columns: 1fr !important; text-align: center; }
      .glance-grid { grid-template-columns: 1fr !important; }
      .glance-row.full { grid-column: 1 / -1 !important; display: block !important; }
      /* full row stays full width */
      .outcomes-row { grid-template-columns: repeat(2, 1fr); }
      .cert-inner { grid-template-columns: 1fr; }
      .cert-visual-col { justify-content: flex-start; }
      .cert-section { padding: 56px 24px; }
      .timeline-wrap { padding-left: 22px; }
      .tl-entry { grid-template-columns: 70px 1fr; }
      .tl-entry::before { left:-28px; }
    }
    @media(max-width:600px) {
      .outcomes-row { grid-template-columns: 1fr 1fr; gap: 12px; }
      .outcome-card { padding: 22px 16px; }
      .cert-section { padding: 44px 18px; }
      .cert-sample { padding: 28px 22px; }
      .curriculum-table { font-size: .82rem; }
      .curriculum-table th,.curriculum-table td { padding: 11px 14px; }
      .tl-entry { grid-template-columns: 1fr; }
      .tl-entry::before {
        left: -28px; top: 20px;
        width: 11px; height: 11px;
        border-width: 2px;
      }
      .tl-entry.cert-entry::before {
        left: -29px; top: 19px;
        width: 13px; height: 13px;
      }
      .tl-time { font-size: .72rem; padding: 14px 0 4px; }
      .tl-learn { margin-left: 0; margin-top: 6px; }
      .tl-tag { margin-left: 0; }

    }
    @media(max-width:400px) {
      .outcomes-row { grid-template-columns: 1fr; }
      .glance-row { grid-template-columns: 1fr; }
      .glance-label { border-right: none; border-bottom: 1px solid rgba(45,106,45,.10); }
    }

    /* ── Certificate ceremony — golden standout card ── */
    .tl-cert-card {
      margin: 4px 0;
      padding: 22px 24px;
      border-radius: 18px;
      background: linear-gradient(135deg, #fffae8 0%, #fff3c0 50%, #fdf0d0 100%);
      border: 2px solid rgba(200,146,10,.65);
      box-shadow: 0 8px 32px rgba(200,146,10,.28), 0 2px 8px rgba(200,146,10,.18);
      position: relative; overflow: hidden;
    }
    /* Shimmer strip across top */
    .tl-cert-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--gold), #f5d675, var(--gold), transparent);
    }
    /* Faint watermark */
    .tl-cert-card::after {
      content: '★';
      position: absolute; right: 16px; bottom: 10px;
      font-size: 5rem; color: rgba(200,146,10,.08);
      pointer-events: none; line-height: 1;
    }
    .tl-cert-inner { position: relative; z-index: 1; }
    .tl-cert-top {
      display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
    }
    .tl-cert-gkvk {
      width: 44px; height: 44px; flex-shrink: 0;
      border-radius: 50%;
      border: 2px solid rgba(200,146,10,.55);
      padding: 2px; object-fit: contain;
      background: #fff;
      box-shadow: 0 2px 8px rgba(200,146,10,.25);
    }
    .tl-cert-title {
      font-family: var(--font-display);
      font-size: 1.05rem; font-weight: 600;
      color: #5a3c00; line-height: 1.2;
    }
    .tl-cert-sub {
      font-size: .74rem; color: var(--gold); font-weight: 700;
      letter-spacing: .05em; text-transform: uppercase; margin-top: 2px;
    }
    .tl-cert-desc {
      font-size: .83rem; color: #7a5800; line-height: 1.6;
      margin-top: 6px;
    }
    .tl-cert-badge {
      display: inline-flex; align-items: center; gap: 5px;
      margin-top: 12px;
      background: rgba(200,146,10,.15);
      border: 1.5px solid rgba(200,146,10,.45);
      border-radius: 100px; padding: 5px 14px;
      font-size: .70rem; font-weight: 700;
      color: #7a5500; letter-spacing: .07em; text-transform: uppercase;
    }