/* ============================================================
   PROGRAM-DETAIL.CSS  — v3 "Notebook & Ribbon" system
   ------------------------------------------------------------
   Change log from v2:
   - Removed the 7-colour rainbow cycling from every generic list
     (Program Highlights, Subjects, Structure, Facilities, Why
     Choose Us, quotes). The site is back to a single navy/gold
     brand palette everywhere EXCEPT one deliberate exception:
     Academic Features, which now uses the client-supplied 7-step
     "vertical zig-zag timeline" spec with its own flat colour
     per step (that is the one place colour is doing structural,
     wayfinding work — every other list is not a numbered
     sequence, so it stays quiet).
   - Removed decorative "01/02/03" numerals from every section
     except Academic Features (where the brief explicitly asks
     for numbered 01-07 blocks — there the numbering carries real
     information: step order).
   - Program Highlights cards redesigned as a signature "study
     card" (index-card / notebook motif: ruled paper texture,
     torn top edge, gold tab) instead of a generic bento tile.
   - New: auto-sliding Gallery strip, video testimonial cards.
   ============================================================ */
/* ============================================================
   PROGRAM PAGE UNIFICATION & PROMISE REDESIGN
   ============================================================ */

/* --- Center all section headings and their descriptions --- */
/* ============================================================
   FIX: CTA HEADING SIZE ON PROGRAM PAGES
   ============================================================ */

/* Force CTA heading to be large */
.cta .section-title-block h2 {
    font-size: 48px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.cta .section-title-block h2 span {
    color: #ffffff !important;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .cta .section-title-block h2 {
        font-size: 32px !important;
        line-height: 1.3 !important;
    }
}

@media screen and (max-width: 480px) {
    .cta .section-title-block h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
}
.pc-section .pc-wrap > .pc-reveal.mb-8,
.pc-section .pc-wrap > .pc-reveal.mb-10,
.pc-section .pc-wrap > .pc-reveal.mb-12 {
    text-align: center !important;
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.pc-section .pc-wrap > .pc-reveal.mb-8.md\:justify-between,
.pc-section .pc-wrap > .pc-reveal.mb-10.md\:justify-between,
.pc-section .pc-wrap > .pc-reveal.mb-12.md\:justify-between {
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
}

.pc-section .pc-wrap > .pc-reveal.mb-8 .pc-eyebrow,
.pc-section .pc-wrap > .pc-reveal.mb-10 .pc-eyebrow,
.pc-section .pc-wrap > .pc-reveal.mb-12 .pc-eyebrow {
    justify-content: center !important;
}

/* --- Ensure consistent heading font and size --- */
.pc-section .pc-h2-dark,
.pc-section .pc-h2-light,
.pc-curriculum .pc-h2-dark {
    font-family: Interdisplay, Arial, sans-serif !important;
    margin-bottom: 14px !important;
}

/* --- Add margin-bottom to section paragraphs for spacing --- */
.pc-section .pc-wrap > .pc-reveal.mb-8 > p,
.pc-section .pc-wrap > .pc-reveal.mb-10 > p,
.pc-section .pc-wrap > .pc-reveal.mb-12 > p,
.pc-section .pc-wrap > .pc-reveal.mb-8 > div > p,
.pc-section .pc-wrap > .pc-reveal.mb-10 > div > p,
.pc-section .pc-wrap > .pc-reveal.mb-12 > div > p {
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 30px !important; /* Adds the requested spacing */
}

/* --- Content Section Background (soft blue gradient) --- */
.pc-section.bg-blue-light {
    background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 40%, #eaf1ff 100%) !important;
}

/* --- Program Highlights Icon Fix --- */
.ph-icon {
    border-color: #ffffff;
}
.ph-icon svg {
    stroke: #ffffff;
}/* ============================================================
   UNIQUE "OUR PROMISE" SECTION — PREMIUM EDITORIAL STYLE
   = =========================================================== */
.promise-unique {
    position: relative;
    background: #faf8f4; /* warm off-white / cream */
    padding: 80px 0;
    overflow: hidden;
    border-top: 1px solid rgba(201, 162, 39, 0.15);
    border-bottom: 1px solid rgba(201, 162, 39, 0.15);
}

/* Subtle geometric pattern overlay */
.promise-unique::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(201, 162, 39, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(201, 162, 39, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Decorative gold line accents */
.promise-unique::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #c9a227, transparent);
    border-radius: 2px;
}

.promise-unique-content {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}

/* Gold-accented badge */
.promise-unique-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #c9a227;
}

.promise-unique-badge-line {
    display: inline-block;
    width: 32px;
    height: 2px;
    background: #c9a227;
    border-radius: 2px;
}

/* Main heading — dark, refined */
.promise-unique-title {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.promise-unique-title span {
    color: #c9a227;
}

/* Description — warm dark grey */
.promise-unique-text {
    font-size: 18px;
    line-height: 1.8;
    color: #4a4a5a;
    max-width: 700px;
    margin: 0 auto 20px;
}

/* Decorative divider — gold */
.promise-unique-divider {
    width: 50px;
    height: 2px;
    background: #c9a227;
    margin: 20px auto 0;
    border-radius: 2px;
}

/* Optional: small gold corner accents */
.promise-unique-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(201, 162, 39, 0.15);
    border-radius: 2px;
    pointer-events: none;
}

.promise-unique-corner--tl {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
}

.promise-unique-corner--br {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .promise-unique {
        padding: 60px 0;
    }
    .promise-unique-title {
        font-size: 28px;
    }
    .promise-unique-text {
        font-size: 16px;
    }
    .promise-unique-corner {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .promise-unique {
        padding: 48px 0;
    }
    .promise-unique-title {
        font-size: 22px;
    }
    .promise-unique-text {
        font-size: 14px;
    }
}
:root{
    --navy:#021268;
    --navy-deep:#000524;
    --gold:#c9a227;
    --gold-light:#d4af37;
    --ink:#141b3c;
    --paper:#fbf9f3;
}

/* ------------------------------------------------------------
   0. HERO — geometric backdrop + scroll cue (unchanged)
------------------------------------------------------------- */
.hero-geometric-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.abstract-shape{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; }
.abstract-shape.shape-1{ width:420px; height:420px; top:-140px; right:-80px; background:radial-gradient(circle at 30% 30%, rgba(212,175,55,.28), transparent 70%); animation:pdFloat1 16s ease-in-out infinite alternate; }
.abstract-shape.shape-2{ width:360px; height:360px; bottom:-160px; left:-100px; background:radial-gradient(circle at 60% 40%, rgba(79,110,247,.30), transparent 70%); animation:pdFloat2 20s ease-in-out infinite alternate; }
@keyframes pdFloat1{ 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(-24px,30px) scale(1.08);} }
@keyframes pdFloat2{ 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(28px,-24px) scale(1.06);} }
.geometric-lines{ position:absolute; inset:0; background-image:
    linear-gradient(115deg, transparent 48%, rgba(212,175,55,.12) 49.3%, rgba(212,175,55,.12) 50%, transparent 50.7%),
    linear-gradient(115deg, transparent 62%, hsla(0,0%,100%,.06) 63%, hsla(0,0%,100%,.06) 63.6%, transparent 64.3%);
    background-repeat:no-repeat; }
.hero-title-animation{ animation:pdRiseIn .8s cubic-bezier(.16,1,.3,1) both; }
.hero-description-animaiton{ animation:pdRiseIn .8s .12s cubic-bezier(.16,1,.3,1) both; }
@keyframes pdRiseIn{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
.pd-scroll-cue{ position:absolute; left:0; bottom:28px; display:flex; align-items:center; gap:10px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); font-family:"Geist",sans-serif; }
.pd-cue-line{ display:block; width:32px; height:1px; background:linear-gradient(to right,#d4af37,transparent); animation:pdCuePulse 2.4s ease-in-out infinite; }
@keyframes pdCuePulse{ 0%,100%{width:32px; opacity:.6;} 50%{width:48px; opacity:1;} }
@media screen and (max-width:767px){ .pd-scroll-cue{display:none;} .abstract-shape.shape-1{width:260px;height:260px;} .abstract-shape.shape-2{width:220px;height:220px;} }

/* ------------------------------------------------------------
   1. SECTION RHYTHM
------------------------------------------------------------- */
.pc-section{ padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(56px,8vw,104px); }

/* ------------------------------------------------------------
   2. PROGRAM HIGHLIGHTS — "Study Card" signature element
   A single flat navy/gold system, styled like an index card
   from a student's revision box: ruled lines in the background,
   a torn/perforated top edge, a small gold corner tab, and an
   icon medallion instead of a number.
------------------------------------------------------------- */
.pc-section .bg-slate-50.rounded-3xl{
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    display:grid;
    gap:22px;
}

.pc-bento{
    position:relative;
    border-radius:4px 4px 14px 14px !important;
    padding:30px 26px 26px !important;
    border:1px solid rgba(2,18,104,.08) !important;
    overflow:hidden;
    background:
        repeating-linear-gradient(to bottom, transparent, transparent 27px, rgba(2,18,104,.055) 28px),
        var(--paper) !important;
    box-shadow:0 10px 26px -16px rgba(2,18,104,.25);
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1);
}
/* torn-paper top edge */
.pc-bento::before{
    content:'';
    position:absolute; left:0; top:0; right:0; height:10px;
    background:
        radial-gradient(circle at 8px 0, transparent 6px, var(--paper) 6.5px) 0 -3px/16px 10px repeat-x;
}
/* gold corner tab */
.pc-bento::after{
    content:'';
    position:absolute; top:0; right:22px; width:26px; height:34px;
    background:var(--gold);
    clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
    box-shadow:0 6px 14px -6px rgba(201,162,39,.6);
}
.pc-bento:hover{
    transform:translateY(-6px) rotate(-.4deg) !important;
    box-shadow:0 26px 46px -20px rgba(2,18,104,.35) !important;
}
.pc-bento .pc-bento-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:50%;
    background:var(--navy) !important;
    border:2px solid var(--gold);
    color:var(--gold) !important; -webkit-text-fill-color:var(--gold);
    font-size:0 !important; line-height:1 !important;
}
.pc-bento .pc-bento-num::before{
    content:'';
    display:block; width:20px; height:20px;
    background-color:var(--gold);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l2.9 6.26L22 9.27l-5 4.87L18.2 21 12 17.77 5.8 21 7 14.14 2 9.27l7.1-1.01L12 2z'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l2.9 6.26L22 9.27l-5 4.87L18.2 21 12 17.77 5.8 21 7 14.14 2 9.27l7.1-1.01L12 2z'/></svg>") center/contain no-repeat;
}
.pc-bento p{ margin-top:16px; color:var(--ink) !important; }

/* ------------------------------------------------------------
   3. CHIPS — subject tags / class-board-mode tags
   Back to one flat brand colour; no rainbow cycling.
------------------------------------------------------------- */
.pc-chip{
    border:1px solid rgba(2,18,104,.14) !important;
    background:#fff !important;
    color:var(--navy) !important;
    font-weight:600 !important;
    box-shadow:0 8px 18px -12px rgba(2,18,104,.25) !important;
}
.pc-chip:hover{
    background:var(--navy) !important;
    color:#fff !important;
    border-color:var(--navy) !important;
    transform:translateY(-3px);
}
.pc-chip-dark{
    border:1px solid hsla(0,0%,100%,.18) !important;
    background:hsla(0,0%,100%,.06) !important;
    color:#fff !important;
    font-weight:600 !important;
    -webkit-backdrop-filter:blur(10px) !important;
    backdrop-filter:blur(10px) !important;
}
.pc-chip-dark:hover{
    background:var(--gold) !important;
    color:var(--navy) !important;
    border-color:var(--gold) !important;
    transform:translateY(-3px);
}

/* subject-block index markers: swap the "01" numeral for a plain
   gold rule — the subject groupings aren't a sequence, so no
   number is shown, just a wayfinding mark. */
.pc-section .text-xs.font-bold.text-navy\/50,
.pc-section .text-xs.font-bold.text-gold{
    display:inline-block;
    width:22px; height:3px; border-radius:2px;
    background:var(--gold) !important;
    font-size:0 !important;
    color:transparent !important;
}

/* ------------------------------------------------------------
   4. ACADEMIC FEATURES — 7-step vertical zig-zag timeline
   (client-supplied design spec — the one place a flat 7-colour
   palette is intentional, because the numbers here really are a
   sequence: assessment -> plan -> support -> report -> ...)
------------------------------------------------------------- */
:root{
    --af-1:#E8336D; /* pink */
    --af-2:#F5811F; /* orange */
    --af-3:#7CB342; /* light green */
    --af-4:#17A2A0; /* teal */
    --af-5:#1E3A8A; /* dark blue */
    --af-6:#D4A017; /* amber */
    --af-7:#1B5E3F; /* forest green */
}
.af-wrap{ position:relative; max-width:920px; margin:0 auto; }
.af-spine{
    position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
    background:linear-gradient(to bottom, var(--af-1),var(--af-2),var(--af-3),var(--af-4),var(--af-5),var(--af-6),var(--af-7));
    opacity:.35;
}
.af-row{
    position:relative;
    display:flex; align-items:center; gap:20px;
    margin-bottom:34px;
}
.af-row:last-child{ margin-bottom:0; }
.af-row .af-icon,
.af-row .af-text{ flex:1 1 0; min-width:0; }
.af-num{
    flex:0 0 auto;
    width:64px; height:64px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:1.35rem;
    font-family:Fraunces,Georgia,serif;
    box-shadow:0 14px 26px -12px var(--af-shadow, rgba(2,18,104,.4));
    position:relative; z-index:1;
}
.af-icon{
    display:flex; align-items:center; justify-content:center;
}
.af-icon-badge{
    width:64px; height:64px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--af-tint, rgba(2,18,104,.06));
    border:2px solid var(--af-border, rgba(2,18,104,.14));
}
.af-icon-badge svg{ width:28px; height:28px; stroke:var(--af-border, var(--navy)); }
.af-text{
    background:#fff;
    border-radius:14px;
    padding:18px 22px;
    box-shadow:0 8px 22px -16px rgba(2,18,104,.3);
    border-left:4px solid var(--af-border, var(--navy));
}
.af-text h4{ font-weight:700; color:var(--navy); font-size:1.05rem; margin-bottom:2px; }
.af-text p{ color:#475569; font-size:.95rem; line-height:1.5; margin:0; }

.af-row:nth-child(1) .af-num{ background:var(--af-1); } .af-row:nth-child(1) .af-text{ --af-border:var(--af-1); } .af-row:nth-child(1) .af-icon-badge{ --af-tint:rgba(232,51,109,.1); --af-border:var(--af-1); }
.af-row:nth-child(2) .af-num{ background:var(--af-2); } .af-row:nth-child(2) .af-text{ --af-border:var(--af-2); } .af-row:nth-child(2) .af-icon-badge{ --af-tint:rgba(245,129,31,.1); --af-border:var(--af-2); }
.af-row:nth-child(3) .af-num{ background:var(--af-3); } .af-row:nth-child(3) .af-text{ --af-border:var(--af-3); } .af-row:nth-child(3) .af-icon-badge{ --af-tint:rgba(124,179,66,.12); --af-border:var(--af-3); }
.af-row:nth-child(4) .af-num{ background:var(--af-4); } .af-row:nth-child(4) .af-text{ --af-border:var(--af-4); } .af-row:nth-child(4) .af-icon-badge{ --af-tint:rgba(23,162,160,.1); --af-border:var(--af-4); }
.af-row:nth-child(5) .af-num{ background:var(--af-5); } .af-row:nth-child(5) .af-text{ --af-border:var(--af-5); } .af-row:nth-child(5) .af-icon-badge{ --af-tint:rgba(30,58,138,.1); --af-border:var(--af-5); }
.af-row:nth-child(6) .af-num{ background:var(--af-6); } .af-row:nth-child(6) .af-text{ --af-border:var(--af-6); } .af-row:nth-child(6) .af-icon-badge{ --af-tint:rgba(212,160,23,.12); --af-border:var(--af-6); }
.af-row:nth-child(7) .af-num{ background:var(--af-7); } .af-row:nth-child(7) .af-text{ --af-border:var(--af-7); } .af-row:nth-child(7) .af-icon-badge{ --af-tint:rgba(27,94,63,.12); --af-border:var(--af-7); }

@media (min-width:768px){
    .af-row{ margin-bottom:20px; }
    .af-row.af-odd{ flex-direction:row; }
    .af-row.af-even{ flex-direction:row-reverse; }
    .af-row.af-even .af-text{ text-align:right; border-left:none; border-right:4px solid var(--af-border, var(--navy)); }
}
@media (max-width:767px){
    .af-wrap{ padding-left:36px; }
    .af-spine{ left:32px; }
    .af-row{ flex-direction:row; }
    .af-num{ width:52px; height:52px; font-size:1.1rem; }
    .af-icon{ display:none; }
}

/* ------------------------------------------------------------
   5. WHY-CHOOSE-US TIMELINE — single colour, checkmark instead
   of a numeral (order doesn't carry meaning here, it's a list
   of reasons, so a check mark reads more honestly than 1-9).
------------------------------------------------------------- */
.pc-tl-line{ background:linear-gradient(to bottom, rgba(2,18,104,.18), rgba(2,18,104,.02)) !important; }
.pc-tl-dot{
    background:var(--navy) !important;
    background-image:none !important;
    border:2px solid var(--gold);
    color:transparent !important;
    font-size:0 !important;
    box-shadow:0 10px 18px -8px rgba(2,18,104,.4) !important;
    position:relative;
}
.pc-tl-dot::before{
    content:'';
    position:absolute; inset:0; margin:auto; width:18px; height:18px;
    background-color:var(--gold);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

/* ------------------------------------------------------------
   6. FACILITIES TILES — single colour, icon medallion instead
   of a numeral (facilities are not an ordered sequence).
------------------------------------------------------------- */
.pc-tile{ border-top:none !important; background:#fff; border-radius:14px; box-shadow:0 8px 22px -14px rgba(2,18,104,.25); margin:2px; }
.pc-tile::before{
    content:'';
    position:absolute; left:0; top:0; width:44px; height:5px; border-radius:0 0 5px 0;
    background:var(--gold);
}
.pc-tile .text-xs.font-bold.text-navy\/40{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:9px;
    color:transparent !important; font-size:0 !important;
    background:rgba(2,18,104,.06);
    border:1.5px solid rgba(2,18,104,.16);
    position:relative;
}
.pc-tile .text-xs.font-bold.text-navy\/40::before{
    content:'';
    position:absolute; inset:0; margin:auto; width:16px; height:16px;
    background-color:var(--navy);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21V9l8-6 8 6v12'/><path d='M9 21v-6h6v6'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21V9l8-6 8 6v12'/><path d='M9 21v-6h6v6'/></svg>") center/contain no-repeat;
}
.pc-tile-line{ background:var(--gold) !important; }

/* ------------------------------------------------------------
   7. GALLERY — auto-sliding photo strip
------------------------------------------------------------- */
.pc-gallery-viewport{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.pc-gallery-track{
    display:flex; gap:20px; width:max-content;
    animation:pcGallerySlide 42s linear infinite;
}
.pc-gallery-viewport:hover .pc-gallery-track{ animation-play-state:paused; }
@keyframes pcGallerySlide{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}
.pc-gallery-item{
    position:relative; flex:0 0 auto;
    width:280px; height:340px; border-radius:18px; overflow:hidden;
    box-shadow:0 18px 40px -20px rgba(2,18,104,.4);
}
.pc-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.pc-gallery-item:hover img{ transform:scale(1.08); }
.pc-gallery-caption{
    position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
    background:linear-gradient(to top, rgba(0,5,36,.85), transparent);
    color:#fff; font-size:.85rem; font-weight:600; letter-spacing:.02em;
}
@media (max-width:767px){
    .pc-gallery-item{ width:210px; height:270px; }
}

/* ------------------------------------------------------------
   8. VIDEO TESTIMONIALS — infinite auto-sliding track
------------------------------------------------------------- */
.pc-vtest-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.pc-vtest-track {
    display: flex;
    gap: 28px;
    width: max-content;
    animation: pcVideoAutoSlide 35s linear infinite;
}
.pc-vtest-viewport:hover .pc-vtest-track {
    animation-play-state: paused;
}
@keyframes pcVideoAutoSlide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.pc-vtest-card {
    position: relative;
    flex: 0 0 auto;
    width: 300px;
    height: 420px;
    border-radius: 22px;
    overflow: hidden;
    background: var(--navy-deep);
    box-shadow: 0 24px 50px -20px rgba(0,0,0,.55);
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.pc-vtest-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 56px -18px rgba(0,0,0,.6);
}
.pc-vtest-card video,
.pc-vtest-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
}
.pc-vtest-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,5,36,.96) 0%, rgba(0,5,36,.55) 45%, rgba(0,5,36,.25) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    z-index: 1;
}
.pc-vtest-name{ color:var(--gold-light); font-weight:700; font-size:1.02rem; margin-bottom:2px; }
.pc-vtest-role{ color:hsla(0,0%,100%,.65); font-size:.8rem; }
.pc-vtest-play{
    position:absolute; top:16px; right:16px; z-index:2;
    width:44px; height:44px; border-radius:50%;
    background:hsla(0,0%,100%,.2); border:1px solid hsla(0,0%,100%,.4);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:transform .2s ease, background .2s ease;
}
.pc-vtest-play:hover{ transform:scale(1.1); background:hsla(0,0%,100%,.35); }
.pc-vtest-play svg{ width:18px; height:18px; fill:#fff; margin-left:2px; }

/* Fullscreen video lightbox */
.pc-vtest-lightbox{
    position:fixed; inset:0; z-index:9999;
    background:rgba(0,5,36,.92);
    display:none; align-items:center; justify-content:center;
    padding:24px;
}
.pc-vtest-lightbox.pc-vtest-lightbox-open{ display:flex; }
.pc-vtest-lightbox video{
    width:100%; max-width:900px; max-height:85vh;
    border-radius:12px; box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
    background:#000;
}
.pc-vtest-lightbox-close{
    position:absolute; top:24px; right:28px; z-index:2;
    width:44px; height:44px; border-radius:50%;
    background:hsla(0,0%,100%,.12); border:1px solid hsla(0,0%,100%,.3);
    color:#fff; font-size:28px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.pc-vtest-lightbox-close:hover{ background:hsla(0,0%,100%,.25); }

/* ------------------------------------------------------------
   9. Photo banners (Program intro / Facilities) — small utility
------------------------------------------------------------- */
.pc-photo-frame{
    position:relative; border-radius:20px; overflow:hidden;
    box-shadow:0 24px 50px -22px rgba(2,18,104,.5);
}
.pc-photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.pc-photo-frame::after{
    content:''; position:absolute; inset:0;
    border:1px solid hsla(0,0%,100%,.25); border-radius:20px; pointer-events:none;
}

/* ------------------------------------------------------------
   10. Eyebrow / accent line — brand gold everywhere
------------------------------------------------------------- */
.pc-section .text-gold{ color:#d4af37 !important; }
.pc-section .pc-eyebrow-dot{ background-color:#d4af37 !important; }
.pc-section .pc-accent-line{ background-image:linear-gradient(to right, #d4af37, #f1d789) !important; }

/* ------------------------------------------------------------
   11. COMMITMENT SECTION — subtle glow pulse
------------------------------------------------------------- */
.pc-commit-bg{ position:relative; }
.pc-commit-bg::after{
    content:'';
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background:radial-gradient(ellipse 700px 460px at 50% 40%, rgba(212,175,55,.16) 0%, transparent 65%);
    animation:pcGlowPulse 6s ease-in-out infinite;
}
@keyframes pcGlowPulse{
    0%,100%{ opacity:.55; }
    50%{ opacity:1; }
}

/* ------------------------------------------------------------
   12. Reduced motion
------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
    .abstract-shape, .pd-cue-line, .hero-title-animation, .hero-description-animaiton, .pc-commit-bg::after, .pc-gallery-track{ animation:none !important; }
}

/* ------------------------------------------------------------
   13. Mobile tightening
------------------------------------------------------------- */
@media screen and (max-width:767px){
    .pc-bento{ padding:24px 20px !important; }
    .pc-section > .pc-wrap > div > .flex.flex-col{ padding:16px 16px !important; gap:16px !important; }
}

/* ============================================================
   PROGRAM-DETAIL.CSS  — v4 "Split & Spectrum" additions
   ------------------------------------------------------------
   Redesign pass across: Program Highlights, Subjects Covered,
   Academic Features, Why Choose Us, Video Testimonials,
   Facilities. Same navy/gold brand shell, new layouts per the
   client's latest brief:
   - Program Highlights: left image / right content+points,
     image and content column heights locked equal via grid.
   - Subjects Covered: multicolour box-card grid (reuses the
     7-step palette from Academic Features so the multicolour
     moment stays consistent site-wide).
   - Academic Features: icons removed, each step is now a solid
     colour card with white type.
   - Why Choose Us: icon + heading + short copy, 2-col grid
     (matches client reference: icon medallion, bold title,
     small paragraph, bordered card).
   - Video Testimonials: every card guaranteed a working video
     surface (poster fallback so a card never looks "dead" if
     the clip is slow to load).
   - Facilities: grid, left image / right paragraph + points.
   ============================================================ */

/* ------------------------------------------------------------
   14. PROGRAM HIGHLIGHTS — split layout, equal-height columns
------------------------------------------------------------- */
.ph-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:44px;
    align-items:stretch;
}
.ph-image-col{
    position:relative;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 24px 50px -22px rgba(2,18,104,.45);
}
.ph-image-col img{
    width:100%;
    height:100%;
    min-height:460px;
    object-fit:cover;
    display:block;
}
.ph-image-col::after{
    content:'';
    position:absolute; inset:0;
    border:1px solid hsla(0,0%,100%,.25);
    border-radius:22px;
    pointer-events:none;
}
.ph-content-col{
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.ph-list{
    display:flex;
    flex-direction:column;
    gap:24px;
}
.ph-item{
    display:flex;
    gap:16px;
    align-items:flex-start;
}
.ph-icon{
    flex:0 0 auto;
    width:42px; height:42px;
    border-radius:50%;
    background:var(--navy);
    border:2px solid var(--gold);
    display:flex; align-items:center; justify-content:center;
}
.ph-icon svg{ width:18px; height:18px; stroke:var(--gold); fill:none; }
.ph-item-text h4{
    color:var(--navy); font-weight:700; font-size:1.05rem;
    margin:0 0 4px; font-family:Geist,sans-serif;
}
.ph-item-text p{ color:#475569; font-size:.92rem; line-height:1.55; margin:0; }

@media (max-width:900px){
    .ph-grid{ grid-template-columns:1fr; gap:28px; }
    .ph-image-col img{ min-height:0; height:260px; }
}

/* ------------------------------------------------------------
   15. SUBJECTS COVERED — multicolour box-card grid
   Reuses the --af-1..--af-7 palette so the site's one
   deliberate multicolour system stays consistent.
------------------------------------------------------------- */
.sc-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
    gap:24px;
}
.sc-card{
    position:relative;
    background:#fff;
    border-radius:16px;
    padding:26px 24px 24px;
    border:1px solid rgba(2,18,104,.08);
    border-top:4px solid var(--sc-color, var(--navy));
    box-shadow:0 10px 26px -18px rgba(2,18,104,.28);
    transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.sc-card:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 40px -20px rgba(2,18,104,.35);
}
.sc-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.sc-card-icon{
    flex:0 0 auto;
    width:40px; height:40px; border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    background:var(--sc-tint, rgba(2,18,104,.08));
}
.sc-card-icon svg{ width:20px; height:20px; stroke:var(--sc-color, var(--navy)); fill:none; }
.sc-card-head h3{ color:var(--navy); font-weight:700; font-size:1.08rem; margin:0; }
.sc-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sc-chip{
    display:inline-flex; align-items:center;
    border-radius:9999px;
    padding:.4rem .85rem;
    font-size:.8rem; font-weight:600;
    background:var(--sc-tint, rgba(2,18,104,.07));
    color:var(--sc-color, var(--navy));
    border:1px solid var(--sc-color, var(--navy));
    border-color:color-mix(in srgb, var(--sc-color, var(--navy)) 35%, transparent);
}

.sc-card-1{ --sc-color:var(--af-1); --sc-tint:rgba(232,51,109,.1); }
.sc-card-2{ --sc-color:var(--af-2); --sc-tint:rgba(245,129,31,.1); }
.sc-card-3{ --sc-color:var(--af-3); --sc-tint:rgba(124,179,66,.12); }
.sc-card-4{ --sc-color:var(--af-4); --sc-tint:rgba(23,162,160,.1); }
.sc-card-5{ --sc-color:var(--af-5); --sc-tint:rgba(30,58,138,.1); }
.sc-card-6{ --sc-color:var(--af-6); --sc-tint:rgba(212,160,23,.12); }
/* ============================================================
   ACADEMIC FEATURES — Zigzag Numbered Layout (Xylem Style)
   White cards with multicolour headings & enhanced shadows
   ============================================================ */

.af-zigzag-wrap {
    position: relative;
    max-width: 1100px;
    margin: 40px auto 0;
    padding: 30px 0;
}

/* Central spine line */
.af-zigzag-spine {
    position: absolute;
    left: 50%;
    top: 30px;
    bottom: 30px;
    width: 4px;
    background: linear-gradient(to bottom, 
        var(--gold-light) 0%,
        var(--gold) 30%,
        var(--gold) 70%,
        var(--gold-light) 100%
    );
    transform: translateX(-50%);
    border-radius: 4px;
    opacity: 0.5;
}

/* Row wrapper */
.af-zigzag-row {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
}

.af-zigzag-row:last-child {
    margin-bottom: 0;
}

/* Alternating directions */
.af-zigzag-row.af-left {
    flex-direction: row-reverse;
}

.af-zigzag-row.af-right {
    flex-direction: row;
}

/* Content card — LARGER with enhanced shadow */
.af-zigzag-card {
    width: 48%;
    padding: 32px 36px;
    background-color: #ffffff;
    border-radius: 16px;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(0, 0, 0, 0.04);
    
    /* Enhanced shadow with multiple layers */
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.02),
        0 4px 12px rgba(0, 0, 0, 0.04),
        0 12px 40px rgba(0, 0, 0, 0.06),
        0 24px 60px rgba(0, 0, 0, 0.04);
}

.af-zigzag-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.02),
        0 8px 20px rgba(0, 0, 0, 0.06),
        0 20px 60px rgba(0, 0, 0, 0.10),
        0 40px 100px rgba(0, 0, 0, 0.08);
}

.af-zigzag-row.af-left .af-zigzag-card {
    text-align: right;
}

.af-zigzag-row.af-right .af-zigzag-card {
    text-align: left;
}

/* Number badge — LARGER with enhanced presence */
.af-zigzag-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--_typography---font-family--primary-font);
    font-weight: 700;
    font-size: 1.4rem;
    color: #ffffff;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.15), 
        0 0 0 5px rgba(255, 255, 255, 0.8),
        0 8px 32px rgba(0, 0, 0, 0.08);
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Badge colours */
.af-zigzag-badge-1 { background-color: var(--af-1); }
.af-zigzag-badge-2 { background-color: var(--af-2); }
.af-zigzag-badge-3 { background-color: var(--af-3); }
.af-zigzag-badge-4 { background-color: var(--af-4); }
.af-zigzag-badge-5 { background-color: var(--af-5); }
.af-zigzag-badge-6 { background-color: var(--af-6); }
.af-zigzag-badge-7 { background-color: var(--af-7); }

.af-zigzag-row:hover .af-zigzag-badge {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.20), 
        0 0 0 6px rgba(255, 255, 255, 0.9),
        0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Typography inside cards */
.af-zigzag-card h4 {
    font-family: 'Geist', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.af-zigzag-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    color: #4a4a4a;
}

/* ============================================================
   MULTICOLOUR HEADINGS — Each card gets unique heading color
   ============================================================ */

/* Card 1 - Dark Red heading */
.af-zigzag-card-1 h4 { 
    color: #8B0000;
    background: linear-gradient(135deg, #8B0000, #B22222);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card 2 - Orange heading */
.af-zigzag-card-2 h4 { 
    color: var(--af-2);
    background: linear-gradient(135deg, var(--af-2), #f39c12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card 3 - Green heading */
.af-zigzag-card-3 h4 { 
    color: var(--af-3);
    background: linear-gradient(135deg, var(--af-3), #27ae60);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card 4 - Teal heading */
.af-zigzag-card-4 h4 { 
    color: var(--af-4);
    background: linear-gradient(135deg, var(--af-4), #1abc9c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card 5 - Dark Blue heading */
.af-zigzag-card-5 h4 { 
    color: var(--af-5);
    background: linear-gradient(135deg, var(--af-5), #2c3e7a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card 6 - Amber heading */
.af-zigzag-card-6 h4 { 
    color: var(--af-6);
    background: linear-gradient(135deg, var(--af-6), #e67e22);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card 7 - Forest Green heading */
.af-zigzag-card-7 h4 { 
    color: var(--af-7);
    background: linear-gradient(135deg, var(--af-7), #1a7a4a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* REMOVED UNDERLINE FOR ALL CARDS */
.af-zigzag-card h4::after {
    display: none !important;
}

/* Decorative subtle icon above title */
.af-zigzag-card .af-card-icon {
    display: inline-block;
    font-size: 0.8rem;
    opacity: 0.3;
    margin-bottom: 8px;
    letter-spacing: 0.15em;
    color: #888;
}

.af-zigzag-row.af-left .af-zigzag-card .af-card-icon {
    float: right;
    margin-left: 10px;
}

.af-zigzag-row.af-right .af-zigzag-card .af-card-icon {
    float: left;
    margin-right: 10px;
}

/* ============================================================
   RESPONSIVE — Mobile collapses to left-aligned list
============================================================ */
@media screen and (max-width: 768px) {
    .af-zigzag-spine {
        left: 32px;
        transform: none;
        width: 3px;
    }

    .af-zigzag-row,
    .af-zigzag-row.af-left,
    .af-zigzag-row.af-right {
        flex-direction: row !important;
        justify-content: flex-start;
        padding-left: 76px;
        margin-bottom: 28px;
    }

    .af-zigzag-card,
    .af-zigzag-row.af-left .af-zigzag-card,
    .af-zigzag-row.af-right .af-zigzag-card {
        width: 100% !important;
        text-align: left !important;
        padding: 24px 24px;
        border-radius: 14px;
    }

    .af-zigzag-card h4 {
        font-size: 1.1rem;
    }

    .af-zigzag-card p {
        font-size: 0.9rem;
    }

    .af-zigzag-badge {
        left: 32px;
        transform: translateY(-50%);
        width: 52px;
        height: 52px;
        font-size: 1rem;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 4px rgba(255, 255, 255, 0.8);
    }

    .af-zigzag-row:hover .af-zigzag-badge {
        transform: translateY(-50%) scale(1.08);
    }

    .af-zigzag-card .af-card-icon {
        display: none !important;
    }

    .af-zigzag-row.af-left .af-zigzag-card h4::after,
    .af-zigzag-row.af-right .af-zigzag-card h4::after {
        display: none !important;
    }
}

@media screen and (max-width: 480px) {
    .af-zigzag-row,
    .af-zigzag-row.af-left,
    .af-zigzag-row.af-right {
        padding-left: 60px;
    }

    .af-zigzag-spine {
        left: 26px;
        width: 2px;
    }

    .af-zigzag-badge {
        left: 26px;
        width: 44px;
        height: 44px;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .af-zigzag-card {
        padding: 18px 18px;
        border-radius: 12px;
    }

    .af-zigzag-card h4 {
        font-size: 1rem;
    }

    .af-zigzag-card p {
        font-size: 0.85rem;
    }
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
    .af-zigzag-card {
        transition: none;
    }
    .af-zigzag-badge {
        transition: none;
    }
    .af-zigzag-row:hover .af-zigzag-badge {
        transform: translate(-50%, -50%) scale(1);
    }
    .af-zigzag-card:hover {
        transform: none;
    }
}/* Curriculum Alternating Wave Timeline Styles */
.pc-section {
  position: relative;
  background-color: #f8fafc;
}

.pc-wrap {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Timeline specific grid / flex adjustments */
@media (min-width: 768px) {
  /* Alternating vertical offset effect to mimic the wave layout */
  .sc-card:nth-child(odd) {
    transform: translateY(-2rem);
  }
  .sc-card:nth-child(even) {
    transform: translateY(2rem);
  }
}

/* Base Card Styling */
.sc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 12rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* Circle Icon Container */
.sc-card-head {
  position: relative;
  width: 7rem;
  height: 7rem;
  border-radius: 9999px;
  background-color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 4px;
  border-style: solid;
}

/* Dashed inner circle overlay */
.sc-card-head::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 4px dashed #cbd5e1;
  pointer-events: none;
}

/* Unique color themes matching the wave nodes */
.sc-card-1 .sc-card-head { border-color: #f97316; color: #f97316; }
.sc-card-2 .sc-card-head { border-color: #84cc16; color: #65a30d; }
.sc-card-3 .sc-card-head { border-color: #14b8a6; color: #0d9488; }
.sc-card-4 .sc-card-head { border-color: #3b82f6; color: #3b82f6; }
.sc-card-5 .sc-card-head { border-color: #a855f7; color: #9333ea; }
.sc-card-6 .sc-card-head { border-color: #ec4899; color: #db2777; }

/* Icon styling */
.sc-card-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
}

/* Chips container positioning based on wave flow */
@media (min-width: 768px) {
  /* For odd items, text/chips are displayed below the circle */
  .sc-card:nth-child(odd) .sc-card-head {
    order: 1;
  }
  .sc-card:nth-child(odd) .sc-chips-container {
    order: 2;
    margin-top: 1rem;
  }

  /* For even items, text/chips are displayed above the circle */
  .sc-card:nth-child(even) .sc-card-head {
    order: 2;
  }
  .sc-card:nth-child(even) .sc-chips-container {
    order: 1;
    margin-bottom: 1rem;
  }
}

/* Chips UI */
.sc-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.5px;
}

.sc-chip {
  font-size: 0.75rem;
  line-height: 1rem;
  background-color: #f1f5f9;
  color: #334155;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 500;
}
/* ------------------------------------------------------------
   17. WHY CHOOSE US — icon + heading + short copy, 2-col grid
------------------------------------------------------------- */
.wcu-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}
.wcu-card{
    background:#fff;
    border:1px solid rgba(2,18,104,.1);
    border-radius:16px;
    padding:26px 24px;
    box-shadow:0 8px 20px -14px rgba(2,18,104,.22);
    transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.wcu-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 32px -16px rgba(2,18,104,.32);
}
.wcu-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:12px;
    background:rgba(2,18,104,.06);
    border:1.5px solid var(--gold);
    margin-bottom:16px;
}
.wcu-icon svg{ width:22px; height:22px; stroke:var(--navy); fill:none; }
.wcu-card h4{ color:var(--navy); font-weight:700; font-size:1.05rem; margin:0 0 6px; }
.wcu-card p{ color:#64748b; font-size:.9rem; line-height:1.55; margin:0; }
@media (max-width:640px){
    .wcu-grid{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   18. FACILITIES — grid, left image / right paragraph+points
------------------------------------------------------------- */
.fac-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:44px;
    align-items:stretch;
}
.fac-image{
    position:relative;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 24px 50px -22px rgba(2,18,104,.45);
}
.fac-image img{
    width:100%; height:100%; min-height:440px;
    object-fit:cover; display:block;
}
.fac-image::after{
    content:'';
    position:absolute; inset:0;
    border:1px solid hsla(0,0%,100%,.25);
    border-radius:22px;
    pointer-events:none;
}
.fac-content{ display:flex; flex-direction:column; justify-content:center; }
.fac-para{ color:#475569; font-size:1rem; line-height:1.65; margin:0 0 22px; }
.fac-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 22px;
}
.fac-points li{
    display:flex; align-items:flex-start; gap:10px;
    color:var(--navy); font-weight:600; font-size:.95rem; line-height:1.45;
}
.fac-dot{
    flex:0 0 auto;
    width:22px; height:22px; border-radius:50%;
    background:var(--navy);
    position:relative; margin-top:1px;
}
.fac-dot::before{
    content:'';
    position:absolute; inset:0; margin:auto; width:11px; height:11px;
    background-color:var(--gold);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
@media (max-width:900px){
    .fac-grid{ grid-template-columns:1fr; gap:28px; }
    .fac-image img{ min-height:0; height:260px; }
    .fac-points{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   19. VIDEO TESTIMONIALS — poster fallback so every card
   always reads as a live video surface, not just the first one.
------------------------------------------------------------- */
.pc-vtest-card video{ background-color:var(--navy-deep); }

/* ------------------------------------------------------------
   14. IMAGE GALLERY — button-controlled slider with lightbox
------------------------------------------------------------- */
.pc-gallery-viewport {
    position: relative;
    width: 100%;
    padding: 20px 0;
}
.pc-gallery-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 12px 4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.pc-gallery-track::-webkit-scrollbar { display: none; }
.pc-gallery-card {
    position: relative;
    flex: 0 0 auto;
    width: 280px;
    height: 340px;
    border-radius: 20px;
    overflow: hidden;
    background: #0b1550;
    box-shadow: 0 20px 42px -18px rgba(0,15,60,.28);
    scroll-snap-align: start;
    cursor: pointer;
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.pc-gallery-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 28px 56px -18px rgba(0,15,60,.38);
}
.pc-gallery-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.pc-gallery-card:hover img {
    transform: scale(1.08);
}
.pc-gallery-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,5,36,.92) 0%, rgba(0,5,36,.35) 45%, rgba(0,5,36,0) 75%);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    z-index: 1;
}
.pc-gallery-caption {
    color: #ffffff;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .01em;
    line-height: 1.35;
}
.pc-gallery-zoom {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: hsla(0,0%,100%,.2);
    border: 1px solid hsla(0,0%,100%,.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, background .2s ease;
}
.pc-gallery-card:hover .pc-gallery-zoom { background: hsla(0,0%,100%,.35); transform: scale(1.08); }
.pc-gallery-zoom svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; fill: none; }
.pc-gallery-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 8px 24px -8px rgba(0,15,60,.4);
    border: 1px solid rgba(0,15,60,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pc-gallery-btn:hover { background: #0b1550; transform: translateY(-50%) scale(1.06); }
.pc-gallery-btn svg { width: 20px; height: 20px; stroke: #0b1550; stroke-width: 2.4; fill: none; transition: stroke .2s ease; }
.pc-gallery-btn:hover svg { stroke: #ffffff; }
.pc-gallery-btn-prev { left: -22px; }
.pc-gallery-btn-next { right: -22px; }

/* Fullscreen image lightbox */
.pc-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,5,36,.92);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pc-gallery-lightbox.pc-gallery-lightbox-open { display: flex; }
.pc-gallery-lightbox img {
    width: 100%;
    max-width: 900px;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
    background: #000;
}
.pc-gallery-lightbox-caption {
    color: hsla(0,0%,100%,.85);
    font-size: .95rem;
    margin-top: 18px;
    text-align: center;
}
.pc-gallery-lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: hsla(0,0%,100%,.12);
    border: 1px solid hsla(0,0%,100%,.3);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pc-gallery-lightbox-close:hover { background: hsla(0,0%,100%,.25); }
@media (max-width: 768px) {
    .pc-gallery-card { width: 220px; height: 270px; }
    .pc-gallery-btn { width: 38px; height: 38px; }
    .pc-gallery-btn-prev { left: -6px; }
    .pc-gallery-btn-next { right: -6px; }
}

}

/* ------------------------------------------------------------
   19. UNIFIED SECTION HEADINGS
   Matches the centered eyebrow + heading + description style
   used on the Home and About pages. Applies to every standalone
   section intro across all program-detail pages — including the
   split "title left / action right" wrapper (e.g. Program
   Highlights), which is now centered like every other section
   intro instead of staying left-aligned.
------------------------------------------------------------- */
.pc-section .pc-wrap > .pc-reveal.mb-8,
.pc-section .pc-wrap > .pc-reveal.mb-10,
.pc-section .pc-wrap > .pc-reveal.mb-12 {
    text-align: center !important;
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.pc-section .pc-wrap > .pc-reveal.mb-8.md\:justify-between,
.pc-section .pc-wrap > .pc-reveal.mb-10.md\:justify-between,
.pc-section .pc-wrap > .pc-reveal.mb-12.md\:justify-between {
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
}
.pc-section .pc-wrap > .pc-reveal.mb-8 .pc-eyebrow,
.pc-section .pc-wrap > .pc-reveal.mb-10 .pc-eyebrow,
.pc-section .pc-wrap > .pc-reveal.mb-12 .pc-eyebrow {
    justify-content: center !important;
}
.pc-section .pc-h2-dark,
.pc-section .pc-h2-light,
.pc-curriculum .pc-h2-dark {
    font-family: Interdisplay, Arial, sans-serif !important;
    margin-bottom: 14px !important;
}
.pc-section .pc-wrap > .pc-reveal.mb-8 > p,
.pc-section .pc-wrap > .pc-reveal.mb-10 > p,
.pc-section .pc-wrap > .pc-reveal.mb-12 > p,
.pc-section .pc-wrap > .pc-reveal.mb-8 > div > p,
.pc-section .pc-wrap > .pc-reveal.mb-10 > div > p,
.pc-section .pc-wrap > .pc-reveal.mb-12 > div > p {
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ------------------------------------------------------------
   19b. CONTENT SECTION BACKGROUND — soft white → light-blue gradient
   Program Highlights, Key Benefits, and every equivalent
   section intro block use a gentle gradient (white easing into
   the brand light-blue) instead of a flat fill or plain white.
------------------------------------------------------------- */
.pc-section.bg-blue-light {
    background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 40%, #eaf1ff 100%) !important;
}

/* ------------------------------------------------------------
   20. PROGRAM HIGHLIGHTS ICON — swap gold border/tick for white
------------------------------------------------------------- */
.ph-icon{
    border-color: #ffffff;
}
.ph-icon svg{
    stroke: #ffffff;
}