/* ═══════════════════════════════════════
   PAGE-SPECIFIC: Story
   ═══════════════════════════════════════ */

/* ── Hero ── */
.page-hero {
  position: relative; height: 420px; overflow: hidden;
  display: flex; align-items: flex-end; background: var(--black);
}
.page-hero-bg {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1600&q=80') center 30%/cover no-repeat;
  filter: grayscale(35%) brightness(0.32); transform: scale(1.03);
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--black) 0%, rgba(8,8,8,0.55) 50%, rgba(8,8,8,0.15) 100%);
}
.page-hero::before {
  content:''; position:absolute; inset:0; z-index:1;
  background-image: linear-gradient(rgba(201,168,76,0.04) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(201,168,76,0.04) 1px,transparent 1px);
  background-size:64px 64px;
}
.page-hero-content { position:relative; z-index:10; padding:0 64px 60px; width:100%; }
.breadcrumb-kbc { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.breadcrumb-kbc a { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gray); text-decoration:none; transition:color .2s; }
.breadcrumb-kbc a:hover { color:var(--gold); }
.breadcrumb-kbc span { font-size:10px; color:var(--gold); letter-spacing:2px; text-transform:uppercase; }
.breadcrumb-sep { color:rgba(201,168,76,0.4); font-size:10px; }
.page-hero-title { font-family:var(--font-alt); font-size:clamp(64px,10vw,128px); color:var(--white); letter-spacing:4px; line-height:.88; }
.page-hero-title .accent { color:var(--gold); }
.hero-sub { font-size:13px; color:var(--gray-light); margin-top:16px; font-weight:300; max-width:500px; line-height:1.8; }
.hero-entry { opacity:0; transform:translateY(20px); animation:heroIn .8s var(--ease-expo) forwards; }
@keyframes heroIn { to { opacity:1; transform:translateY(0); } }

/* ── Program intro strip ── */
.intro-strip {
  background: var(--dark-2); padding: 56px 0;
  border-bottom: 1px solid rgba(201,168,76,0.08);
}
.intro-inner { max-width: 700px; margin: 0 auto; text-align: center; padding: 0 24px; }
.intro-tag {
  font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px;
}
.intro-tag::before, .intro-tag::after { content:''; width:28px; height:1px; background:var(--gold); opacity:.5; }
.intro-heading { font-family:var(--font-display); font-size:clamp(24px,3vw,38px); font-weight:700; color:var(--white); margin-bottom:14px; }
.intro-heading span { color:var(--gold); }
.intro-desc { font-size:14px; color:var(--gray-light); line-height:1.9; font-weight:300; }

/* ── Program quick nav ── */
.program-nav {
  background: var(--black); padding: 0 64px;
  border-bottom: 1px solid rgba(201,168,76,0.08);
  display: flex; gap: 0; overflow-x: auto; scrollbar-width:none;
  position: sticky; top:0; z-index:100;
}
.program-nav::-webkit-scrollbar { display:none; }
.prog-nav-btn {
  padding: 16px 22px; background:transparent; border:none;
  border-bottom: 2px solid transparent; margin-bottom:-1px;
  font-family:var(--font-body); font-size:10px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase; color:var(--gray);
  cursor:pointer; transition:all .2s; white-space:nowrap; flex-shrink:0;
}
.prog-nav-btn:hover { color:var(--gold-light); }
.prog-nav-btn.active { color:var(--gold); border-bottom-color:var(--gold); }

/* ── Story section wrapper ── */
.story-section { background: var(--dark); padding: 0; }

/* ── Individual program block ── */
.program-block {
  padding: 88px 0;
  border-bottom: 1px solid rgba(201,168,76,0.06);
  scroll-margin-top: 100px;
}
.program-block:last-child { border-bottom: none; }
.program-block:nth-child(even) .prog-img-col { order: 2; }
.program-block:nth-child(even) .prog-content-col { order: 1; }

/* image */
.prog-img-wrap {
  position: relative; border-radius: var(--r); overflow: hidden;
  height: 440px;
}
.prog-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(15%) brightness(0.82);
  transition: transform .6s var(--ease-silk), filter .4s;
}
.prog-img-wrap:hover img { transform:scale(1.05); filter:grayscale(0%) brightness(0.88); }
.prog-img-wrap::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,8,8,0.5) 0%, transparent 50%);
}
.prog-badge {
  position:absolute; bottom:20px; left:20px; z-index:2;
  background:var(--gold); color:var(--black);
  font-family:var(--font-alt); font-size:12px; letter-spacing:2px;
  padding:6px 16px; border-radius:var(--r-sm);
}

/* content */
.prog-content-col { display:flex; flex-direction:column; justify-content:center; }
.prog-content-inner { padding: 0 48px; }

.prog-tag {
  font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.prog-tag::before { content:''; width:24px; height:1px; background:var(--gold); }

.prog-title {
  font-family:var(--font-display); font-size:clamp(26px,3vw,42px);
  font-weight:700; color:var(--white); line-height:1.15; margin-bottom:20px;
}

.prog-desc { font-size:14px; color:var(--gray-light); line-height:1.95; font-weight:300; margin-bottom:14px; }

/* audience tag */
.prog-audience {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(201,168,76,0.07); border:1px solid rgba(201,168,76,0.15);
  border-radius:40px; padding:8px 16px; margin-bottom:28px;
  font-size:10px; color:var(--gray-light); letter-spacing:1px;
}
.prog-audience i { color:var(--gold); font-size:12px; }

/* join button */
.btn-join {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--gold); color:var(--black); border:none;
  padding:13px 28px; font-size:11px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  border-radius:var(--r-sm); text-decoration:none;
  transition:all .25s; cursor:pointer;
}
.btn-join:hover { background:var(--gold-light); transform:translateY(-3px); box-shadow:0 10px 28px rgba(201,168,76,0.25); color:var(--black); }

.btn-join-ghost {
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; color:var(--gold);
  border:1px solid rgba(201,168,76,0.35);
  padding:12px 24px; font-size:11px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  border-radius:var(--r-sm); text-decoration:none;
  transition:all .25s;
}
.btn-join-ghost:hover { background:var(--gold); color:var(--black); border-color:var(--gold); }

/* highlight points */
.prog-points { list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:10px; }
.prog-points li { display:flex; gap:12px; font-size:13px; color:var(--gray-light); align-items:flex-start; line-height:1.65; }
.prog-points li::before { content:'✦'; color:var(--gold); font-size:10px; flex-shrink:0; margin-top:3px; }

/* ── CTA bottom ── */
.story-cta {
  background: var(--dark-2); padding: 80px 0;
  border-top: 1px solid rgba(201,168,76,0.08);
  text-align:center;
}
.cta-heading { font-family:var(--font-display); font-size:clamp(26px,3.5vw,42px); font-weight:700; color:var(--white); margin-bottom:10px; }
.cta-heading span { color:var(--gold); }
.cta-sub { font-size:13px; color:var(--gray); margin-bottom:28px; }

/* responsive */
@media (max-width:991.98px) {
  .page-hero-content { padding:0 32px 48px; }
  .program-nav { padding:0 24px; }
  .prog-content-inner { padding:32px 0 0; }
  .prog-img-wrap { height:300px; }
  .program-block:nth-child(even) .prog-img-col { order:0; }
  .program-block:nth-child(even) .prog-content-col { order:0; }
}
@media (max-width:575.98px) {
  .page-hero-content { padding:0 20px 36px; }
  .prog-img-wrap { height:240px; }
}