/* =====================================================================
   ClimbUp Career — Corporate Training / Motivational / Keynote layer
   Pillars, stats, programs, speaker, videos, testimonials, enquiry.
   ===================================================================== */

:root{
  --cu-ink:#061a23;
  --cu-ink-2:#0b2a36;
  --cu-teal:#0ea2bd;
  --cu-glow:#16cde8;
  --cu-gold:#ffd34d;
}

/* ---------- Shared ---------- */
.eyebrow{ display:inline-block; font-family:var(--nav-font); font-size:.78rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-color); margin-bottom:10px; }
.dark-ink .eyebrow{ color:var(--cu-glow); }
.sec-pad{ padding:90px 0; }
.sec-head{ text-align:center; max-width:760px; margin:0 auto 50px; }
.sec-head h2{ font-size:2.4rem; font-weight:700; color:var(--heading-color); margin-bottom:12px; }
.sec-head p{ color:color-mix(in srgb,var(--default-color),transparent 25%); font-size:1.06rem; margin:0; }
.dark-ink{ background:var(--cu-ink); color:#fff; --heading-color:#fff; --default-color:#fff; position:relative; overflow:hidden; }
.dark-ink .sec-head p{ color:rgba(255,255,255,.7); }
.btn-cu{ display:inline-flex; align-items:center; gap:8px; padding:13px 30px; border-radius:50px; font-weight:600;
  font-family:var(--nav-font); background:var(--accent-color); color:#fff; transition:.3s; border:2px solid var(--accent-color); }
.btn-cu:hover{ background:color-mix(in srgb,var(--accent-color),#000 15%); border-color:color-mix(in srgb,var(--accent-color),#000 15%); color:#fff; transform:translateY(-2px); }
.btn-cu-ghost{ display:inline-flex; align-items:center; gap:8px; padding:13px 30px; border-radius:50px; font-weight:600;
  font-family:var(--nav-font); border:2px solid rgba(255,255,255,.35); color:#fff; transition:.3s; }
.btn-cu-ghost:hover{ border-color:var(--cu-glow); color:var(--cu-glow); }
.btn-cu-outline{ display:inline-flex; align-items:center; gap:8px; padding:11px 26px; border-radius:50px; font-weight:600;
  font-family:var(--nav-font); border:2px solid var(--accent-color); color:var(--accent-color); transition:.3s; }
.btn-cu-outline:hover{ background:var(--accent-color); color:#fff; }

/* ---------- What We Do (pillars) ---------- */
.wwd{ background:linear-gradient(180deg,#f5fafb 0%,#fff 100%); }
.pillar{ --v:#0ea2bd; position:relative; display:flex; flex-direction:column; height:100%; background:#fff; border-radius:20px;
  padding:34px 28px 28px; box-shadow:0 10px 34px rgba(6,26,35,.07); border:1px solid rgba(6,26,35,.05);
  transition:transform .4s var(--cu-ease,ease), box-shadow .4s; overflow:hidden; color:var(--default-color); }
.pillar::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--v); transform:scaleX(.25);
  transform-origin:left; transition:transform .5s var(--cu-ease,ease); }
.pillar:hover{ transform:translateY(-8px); box-shadow:0 22px 50px rgba(6,26,35,.14); color:var(--default-color); }
.pillar:hover::before{ transform:scaleX(1); }
.pillar .p-icon{ width:62px; height:62px; border-radius:16px; display:grid; place-items:center; font-size:1.7rem; color:var(--v);
  background:color-mix(in srgb,var(--v),transparent 88%); margin-bottom:22px; transition:.4s; }
.pillar:hover .p-icon{ background:var(--v); color:#fff; transform:rotate(-6deg) scale(1.05); }
.pillar h3{ font-size:1.35rem; font-weight:700; margin-bottom:6px; color:var(--heading-color); }
.pillar .p-tag{ font-size:.86rem; font-weight:600; color:var(--v); margin-bottom:12px; }
.pillar p{ font-size:.95rem; line-height:1.7; flex:1; margin-bottom:18px; }
.pillar .p-link{ font-weight:600; color:var(--v); display:inline-flex; align-items:center; gap:6px; font-family:var(--nav-font); font-size:.92rem; }
.pillar:hover .p-link i{ transform:translateX(4px); }
.pillar .p-link i{ transition:.3s; }
.pillar .p-num{ position:absolute; right:20px; top:14px; font-family:var(--nav-font); font-weight:800; font-size:3.2rem;
  color:color-mix(in srgb,var(--v),transparent 90%); line-height:1; }

/* ---------- Stats strip ---------- */
.stats-strip{ background:linear-gradient(120deg,var(--cu-ink) 0%,var(--cu-ink-2) 60%,#0b4f5e 100%); color:#fff; padding:60px 0; position:relative; overflow:hidden; }
.stats-strip::after{ content:""; position:absolute; width:520px; height:520px; right:-160px; top:-260px; border-radius:50%;
  background:radial-gradient(circle,rgba(22,205,232,.25),transparent 65%); pointer-events:none; }
.stat-box{ text-align:center; padding:10px; position:relative; z-index:1; }
.stat-box .n{ font-family:var(--nav-font); font-size:2.8rem; font-weight:700; line-height:1; color:#fff; }
.stat-box .n span{ color:var(--cu-glow); }
.stat-box .l{ margin-top:10px; color:rgba(255,255,255,.72); font-size:.95rem; }
@media (min-width:768px){ .stat-box + .stat-box{ border-left:1px solid rgba(255,255,255,.1); } .col-md-3:first-child .stat-box{border-left:0;} }

/* ---------- Program cards ---------- */
.prog-filter{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:36px; }
.prog-filter button, .prog-filter a{ border:1px solid rgba(6,26,35,.12); background:#fff; color:var(--heading-color); border-radius:50px;
  padding:8px 20px; font-size:.9rem; font-weight:600; font-family:var(--nav-font); transition:.25s; }
.prog-filter .active, .prog-filter button:hover, .prog-filter a:hover{ background:var(--accent-color); color:#fff; border-color:var(--accent-color); }
.prog-card{ --v:#0ea2bd; display:flex; flex-direction:column; height:100%; background:#fff; border-radius:18px; padding:28px 26px;
  border:1px solid rgba(6,26,35,.07); box-shadow:0 6px 24px rgba(6,26,35,.05); transition:.35s; color:var(--default-color); position:relative; }
.prog-card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(6,26,35,.12); border-color:color-mix(in srgb,var(--v),transparent 60%); color:var(--default-color); }
.prog-card .pc-top{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.prog-card .pc-icon{ width:50px; height:50px; flex:0 0 50px; border-radius:14px; display:grid; place-items:center; font-size:1.35rem;
  color:var(--v); background:color-mix(in srgb,var(--v),transparent 88%); }
.prog-card .pc-cat{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--v); }
.prog-card h3{ font-size:1.14rem; font-weight:700; color:var(--heading-color); margin:2px 0 0; line-height:1.35; }
.prog-card p{ font-size:.93rem; line-height:1.65; flex:1; margin-bottom:16px; color:color-mix(in srgb,var(--default-color),transparent 15%); }
.prog-card .pc-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.prog-card .pc-meta span{ font-size:.78rem; background:#f2f6f8; border-radius:50px; padding:5px 12px; color:#4b5a66; }
.prog-card .pc-meta i{ color:var(--v); margin-right:4px; }
.prog-card .pc-link{ font-weight:600; color:var(--v); font-size:.9rem; display:inline-flex; gap:6px; align-items:center; font-family:var(--nav-font); }
.prog-card .pc-feat{ position:absolute; top:16px; right:16px; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--cu-gold); color:#3b2f00; padding:3px 10px; border-radius:50px; }
.prog-group-title{ font-family:var(--nav-font); font-size:1.15rem; font-weight:700; color:var(--heading-color); margin:10px 0 20px;
  display:flex; align-items:center; gap:12px; }
.prog-group-title::after{ content:""; flex:1; height:1px; background:rgba(6,26,35,.1); }

/* ---------- Speaker block ---------- */
.speaker-sec .sp-photo{ position:relative; max-width:440px; margin:0 auto; }
.speaker-sec .sp-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:24px; position:relative; z-index:1;
  box-shadow:0 30px 60px rgba(0,0,0,.35); }
.speaker-sec .sp-photo::before{ content:""; position:absolute; inset:24px -18px -18px 24px; border:2px solid var(--cu-glow); border-radius:24px; opacity:.6; }
.speaker-sec .sp-photo .sp-badge{ position:absolute; z-index:2; left:-14px; bottom:30px; background:#fff; color:var(--cu-ink); border-radius:14px;
  padding:12px 18px; font-family:var(--nav-font); font-weight:600; font-size:.85rem; box-shadow:0 12px 30px rgba(0,0,0,.25); display:flex; gap:10px; align-items:center; }
.speaker-sec .sp-photo .sp-badge i{ color:var(--cu-teal); font-size:1.3rem; }
.speaker-sec .sp-ph{ aspect-ratio:4/5; border-radius:24px; background:linear-gradient(160deg,#0b4f5e,#061a23); display:grid; place-items:center;
  font-size:6rem; color:rgba(255,255,255,.18); position:relative; z-index:1; }
.speaker-sec h2{ font-size:2.4rem; font-weight:700; margin-bottom:6px; }
.speaker-sec .sp-title{ color:var(--cu-glow); font-weight:600; margin-bottom:20px; font-size:1rem; }
.speaker-sec .sp-bio{ color:rgba(255,255,255,.8); line-height:1.85; }
.speaker-sec .sp-bio p{ margin-bottom:12px; }
.sp-creds{ list-style:none; padding:0; margin:22px 0 26px; display:grid; gap:10px; }
.sp-creds li{ display:flex; gap:10px; align-items:flex-start; color:#fff; }
.sp-creds li i{ color:var(--cu-glow); margin-top:3px; }
.topic-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 28px; }
.topic-chips a{ border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:50px; padding:7px 16px; font-size:.86rem; transition:.25s; }
.topic-chips a:hover{ background:var(--cu-glow); border-color:var(--cu-glow); color:var(--cu-ink); }
.light-chips .topic-chips a, .topic-chips.light a{ border-color:rgba(6,26,35,.15); color:var(--heading-color); }
.topic-chips.light a:hover{ color:#fff; background:var(--accent-color); border-color:var(--accent-color); }

/* ---------- Videos (click-to-load, fast) ---------- */
.yt-lite{ position:relative; display:block; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#000; cursor:pointer;
  box-shadow:0 12px 34px rgba(0,0,0,.18); }
.yt-lite img{ width:100%; height:100%; object-fit:cover; opacity:.85; transition:.4s; }
.yt-lite:hover img{ opacity:1; transform:scale(1.04); }
.yt-lite .play{ position:absolute; inset:0; display:grid; place-items:center; }
.yt-lite .play span{ width:70px; height:70px; border-radius:50%; background:rgba(14,162,189,.92); display:grid; place-items:center; color:#fff;
  font-size:2rem; box-shadow:0 0 0 10px rgba(22,205,232,.25); transition:.3s; }
.yt-lite:hover .play span{ transform:scale(1.1); }
.yt-lite iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-title{ font-family:var(--nav-font); font-weight:600; font-size:.98rem; margin-top:12px; color:var(--heading-color); }

/* ---------- Testimonials (corporate) ---------- */
.tst-card{ background:#fff; border-radius:18px; padding:30px 28px; height:100%; box-shadow:0 8px 30px rgba(6,26,35,.07); position:relative;
  display:flex; flex-direction:column; }
.tst-card .q{ position:absolute; right:22px; top:10px; font-size:4rem; line-height:1; color:color-mix(in srgb,var(--accent-color),transparent 85%); font-family:Georgia,serif; }
.tst-card .stars{ color:#f5b301; margin-bottom:12px; font-size:.9rem; }
.tst-card p{ font-style:italic; line-height:1.75; flex:1; color:#3f4b55; }
.tst-card .who{ display:flex; align-items:center; gap:14px; margin-top:18px; }
.tst-card .who img, .tst-card .who .ini{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:0 0 52px; }
.tst-card .who .ini{ display:grid; place-items:center; background:var(--accent-color); color:#fff; font-weight:700; font-family:var(--nav-font); }
.tst-card .who h4{ font-size:1rem; margin:0; font-weight:700; color:var(--heading-color); }
.tst-card .who small{ color:#7b8792; }

/* ---------- Trusted by (clients) ---------- */
.trusted{ padding:50px 0; background:#f7fafb; }
.trusted h6{ text-align:center; font-family:var(--nav-font); letter-spacing:.2em; text-transform:uppercase; font-size:.78rem; color:#7b8792; margin-bottom:26px; }
.trusted .client-logo img{ filter:grayscale(100%); opacity:.6; transition:.3s; max-height:60px; object-fit:contain; }
.trusted .client-logo img:hover{ filter:none; opacity:1; }

/* ---------- Career counselling divider on homepage ---------- */
.cc-divider{ padding:80px 0 20px; text-align:center; background:linear-gradient(180deg,#fff,#f5fafb); }
.cc-divider h2{ font-size:2.4rem; font-weight:700; color:var(--heading-color); }
.cc-divider p{ max-width:720px; margin:10px auto 0; color:#5b6873; }

/* ---------- CTA band ---------- */
.cta-band{ background:linear-gradient(120deg,var(--cu-teal),#0b7c91); color:#fff; padding:60px 0; position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; left:-120px; bottom:-200px; width:420px; height:420px; border-radius:50%; background:rgba(255,255,255,.08); }
.cta-band h3{ font-size:2rem; font-weight:700; color:#fff; margin:0 0 6px; }
.cta-band p{ margin:0; color:rgba(255,255,255,.85); }
.cta-band .btn-white{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:#0b7c91; padding:14px 32px; border-radius:50px; font-weight:700; font-family:var(--nav-font); transition:.3s; }
.cta-band .btn-white:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.2); color:var(--cu-ink); }

/* ---------- Service page hero ---------- */
.svc-hero{ --v:#0ea2bd; position:relative; padding:120px 0 90px; color:#fff; background:var(--cu-ink); overflow:hidden; }
.svc-hero .bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.22; }
.svc-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,var(--cu-ink) 30%,color-mix(in srgb,var(--v),transparent 60%) 100%); z-index:1; }
.svc-hero .container{ position:relative; z-index:2; }
.svc-hero .crumb{ font-size:.88rem; color:rgba(255,255,255,.7); margin-bottom:18px; }
.svc-hero .crumb a{ color:#fff; }
.svc-hero .sv-icon{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center; font-size:1.8rem; background:var(--v); color:#fff; margin-bottom:20px; box-shadow:0 12px 30px color-mix(in srgb,var(--v),transparent 50%); }
.svc-hero h1{ font-size:3rem; font-weight:700; color:#fff; margin-bottom:10px; }
.svc-hero .tag{ font-size:1.25rem; color:var(--cu-glow); font-weight:600; margin-bottom:14px; }
.svc-hero p.lead{ max-width:640px; color:rgba(255,255,255,.8); font-size:1.08rem; margin-bottom:28px; }
.svc-hero .btns{ display:flex; gap:12px; flex-wrap:wrap; }

.svc-intro .content{ font-size:1.05rem; line-height:1.85; color:#3f4b55; }
.hl-list{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.hl-list li{ display:flex; gap:14px; align-items:flex-start; background:#fff; border-radius:14px; padding:16px 18px; box-shadow:0 6px 20px rgba(6,26,35,.06); font-weight:500; }
.hl-list li i{ color:var(--v,var(--accent-color)); font-size:1.2rem; }
.format-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.format-grid .f{ background:#fff; border:1px solid rgba(6,26,35,.08); border-radius:14px; padding:20px; display:flex; gap:12px; align-items:center; font-weight:600; color:var(--heading-color); }
.format-grid .f i{ font-size:1.4rem; color:var(--v,var(--accent-color)); }

/* ---------- Program detail ---------- */
.prog-detail .content{ font-size:1.04rem; line-height:1.85; color:#3f4b55; }
.prog-detail .content h4{ font-size:1.2rem; font-weight:700; margin:26px 0 12px; color:var(--heading-color); }
.prog-detail .content ul{ padding-left:0; list-style:none; }
.prog-detail .content ul li{ position:relative; padding-left:28px; margin-bottom:8px; }
.prog-detail .content ul li::before{ content:"\F26A"; font-family:bootstrap-icons; position:absolute; left:0; top:1px; color:var(--accent-color); }
.facts{ background:#fff; border-radius:18px; box-shadow:0 10px 34px rgba(6,26,35,.08); padding:26px; }
.facts .fact{ display:flex; gap:14px; padding:12px 0; border-bottom:1px dashed rgba(6,26,35,.1); }
.facts .fact:last-of-type{ border-bottom:0; }
.facts .fact i{ font-size:1.3rem; color:var(--accent-color); }
.facts .fact small{ display:block; color:#7b8792; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }
.facts .fact strong{ color:var(--heading-color); }
.outcomes{ background:linear-gradient(135deg,#f0fbfd,#fff); border:1px solid rgba(14,162,189,.15); border-radius:18px; padding:26px; margin-top:30px; }
.outcomes h4{ font-size:1.15rem; font-weight:700; margin-bottom:14px; }
.outcomes ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.outcomes li{ display:flex; gap:10px; }
.outcomes li i{ color:#16a34a; }

/* ---------- Enquiry form ---------- */
.enquiry-card{ background:#fff; border-radius:22px; padding:34px; box-shadow:0 20px 50px rgba(6,26,35,.12); color:var(--default-color); }
.dark-ink .enquiry-card{ --default-color:#1a1f24; --heading-color:#1a1f24; }
.enquiry-card h3{ font-size:1.5rem; font-weight:700; margin-bottom:4px; color:#1a1f24; }
.enquiry-card .enq-sub{ color:#6b7780; font-size:.94rem; margin-bottom:20px; }
.enquiry-card .form-control, .enquiry-card .form-select{ border-radius:10px; padding:12px 14px; font-size:.95rem; border-color:#dde4e8; color:#1a1f24; background-color:#fff; }
.enquiry-card .form-control:focus, .enquiry-card .form-select:focus{ border-color:var(--cu-teal); box-shadow:0 0 0 .2rem rgba(14,162,189,.15); }
.enquiry-card .btn-enquire{ background:var(--cu-teal); color:#fff; border:0; padding:13px 34px; border-radius:50px; font-weight:600; font-family:var(--nav-font); transition:.3s; }
.enquiry-card .btn-enquire:hover{ background:#0b7c91; }
.enquiry-card .loading, .enquiry-card .error-message, .enquiry-card .sent-message{ display:none; border-radius:10px; padding:12px 14px; font-size:.92rem; }
.enquiry-card .loading.d-block, .enquiry-card .error-message.d-block, .enquiry-card .sent-message.d-block{ display:block; }
.enquiry-card .error-message{ background:#fdecec; color:#b42318; }
.enquiry-card .sent-message{ background:#e7f7ee; color:#067647; }
.enquiry-card .loading{ background:#f1f5f9; color:#475569; }
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.enq-side h2{ font-size:2.3rem; font-weight:700; }
.enq-side .ci{ display:flex; gap:14px; align-items:center; margin-top:18px; }
.enq-side .ci i{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(22,205,232,.14); color:var(--cu-glow); font-size:1.2rem; }
.enq-side .ci a, .enq-side .ci span{ color:#fff; }
.enq-side .ci small{ display:block; color:rgba(255,255,255,.6); }

/* ---------- WhatsApp float ---------- */
.wa-float{ position:fixed; left:18px; bottom:18px; z-index:996; width:52px; height:52px; border-radius:50%; background:#25d366; color:#fff;
  display:grid; place-items:center; font-size:1.6rem; box-shadow:0 10px 24px rgba(37,211,102,.4); transition:.3s; }
.wa-float:hover{ color:#fff; transform:scale(1.08); }

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .sec-pad{ padding:65px 0; }
  .sec-head h2, .speaker-sec h2, .cc-divider h2, .enq-side h2{ font-size:1.9rem; }
  .svc-hero{ padding:90px 0 60px; }
  .svc-hero h1{ font-size:2.2rem; }
  .speaker-sec .sp-photo{ max-width:340px; margin-bottom:30px; }
  .stat-box{ margin-bottom:14px; }
}
@media (max-width:575.98px){
  .sec-pad{ padding:52px 0; }
  .sec-head{ margin-bottom:32px; }
  .sec-head h2, .speaker-sec h2, .cc-divider h2, .enq-side h2{ font-size:1.6rem; }
  .svc-hero h1{ font-size:1.8rem; }
  .svc-hero .tag{ font-size:1.05rem; }
  .stat-box .n{ font-size:2.1rem; }
  .enquiry-card{ padding:22px 18px; border-radius:18px; }
  .cta-band h3{ font-size:1.5rem; }
  .pillar{ padding:28px 22px 22px; }
  .speaker-sec .sp-photo .sp-badge{ left:8px; }
}
/* keep the "Popular" badge clear of the category label */
.prog-card:has(.pc-feat) .pc-top{ padding-right:62px; }
@media (max-width:991.98px){ .facts{ position:static !important; } }

/* Homepage hero: first slide title is the page H1 — style it exactly like the H2 slides */
.hero-slider h1.hero-title{ font-size:2rem; font-weight:700; color:var(--heading-color); margin-bottom:.4rem; }
.hero-slider h1.hero-title span{ color:var(--accent-color); }
@media (max-width:991.98px){ .hero-slider h1.hero-title{ font-size:2.3rem; } }
@media (max-width:575.98px){ .hero-slider h1.hero-title{ font-size:1.85rem; line-height:1.25; } }
@media (max-width:360px){ .hero-slider h1.hero-title{ font-size:1.65rem; } }