/* ==========================================================================
   Corporate theme — landing page
   ==========================================================================
   Scoped under .cl- (corporate landing) so it cannot collide with the theme
   layout's .th- classes or with Bootstrap.

   Structure — these numbers match the section banners in the body below.
   (The list previously omitted Buttons and ran one behind the banners from
   Statistics onward, so "section 7" meant two different things depending on
   which end of the file you were reading.)

     1. Design tokens
     2. Hero shell + decorative layers
     3. Navigation
     4. Buttons
     5. Hero content
     6. Hero media
     7. Statistics card
     8. Feature strip
     9. Motion / reduced-motion
    10. Responsive
    11. Why Choose Us
    12. Programs
    13. Colleges
    14. How to Apply   (.cl-steps / .cl-step are shared with 15)
    15. Admissions
    16. CTA banner
    17. E-portals
    18. Info cards
    19. Campus life / gallery
    20. Recent news
    21. Contact

   Sections 11 onward are landing SECTIONS, each paired with a per-family
   partial in resources/themes/_families/corporate/partials/. Their responsive
   and reduced-motion rules live with the section rather than in 10, so a
   section can be read, changed or removed as one block.
   ========================================================================== */

/* 1. DESIGN TOKENS ========================================================= */

.cl-landing {
    --cl-purple: #20115A;
    --cl-purple-dark: #14083F;
    --cl-purple-light: #4A36C8;
    --cl-gold: #F6B93B;
    --cl-gold-hover: #F4A000;
    --cl-white: #FFFFFF;
    --cl-text-light: rgba(255, 255, 255, .85);

    /* Stat accent colours */
    --cl-stat-1: #4B39C8;
    --cl-stat-2: #1D4ED8;
    --cl-stat-3: #15803D;
    --cl-stat-4: #E8A317;

    --cl-radius-sm: 12px;
    --cl-radius-lg: 26px;
    --cl-shadow-card: 0 30px 70px rgba(15, 8, 60, .18);
    --cl-shadow-btn: 0 14px 30px rgba(246, 185, 59, .35);
    --cl-transition: .35s ease;

    font-family: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
}

/* 2. HERO SHELL ============================================================ */

.cl-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #14083F 0%, #221266 55%, #4B39C8 100%);
    color: var(--cl-white);
    overflow: hidden;
    /* Top: clears the transparent nav overlaid on top of this section.
       Bottom: room for the stats card, which overlaps the hero's lower edge. */
    padding-top: 120px;
    padding-bottom: 190px;
    isolation: isolate;
}

/* Radial glows. Pseudo-elements keep the markup semantic — these are
   decoration and should never appear in the accessibility tree. */
.cl-hero::before,
.cl-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.cl-hero::before {
    width: 780px;
    height: 780px;
    top: -300px;
    right: -180px;
    background: radial-gradient(circle, rgba(107, 84, 226, .55) 0%, transparent 68%);
    filter: blur(30px);
}

.cl-hero::after {
    width: 620px;
    height: 620px;
    bottom: -220px;
    left: -220px;
    background: radial-gradient(circle, rgba(74, 54, 200, .45) 0%, transparent 70%);
    filter: blur(40px);
}

/* Decorative accents: dotted grid + gold arc. Absolutely positioned, hidden
   from assistive tech via aria-hidden on the container. */
.cl-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.cl-decor__dots {
    position: absolute;
    top: 150px;
    right: 44%;
    width: 130px;
    height: 90px;
    background-image: radial-gradient(rgba(255, 255, 255, .30) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    opacity: .8;
}

.cl-decor__arc {
    position: absolute;
    left: -8%;
    bottom: 8%;
    width: 55%;
    height: 320px;
    border-top: 2px solid rgba(246, 185, 59, .35);
    border-radius: 50%;
    transform: rotate(-8deg);
}

.cl-decor__circle {
    position: absolute;
    top: 22%;
    left: 6%;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 50%;
}

/* 3. NAVIGATION ============================================================
   The nav is a standalone, theme-agnostic element — NOT part of the hero. It
   appears on About, Admissions, News and every other public page, none of
   which have a hero, so it cannot be coupled to one.

   Two variants:
     --transparent  overlays the section beneath it (dark hero)
     --solid        opaque bar for interior pages with nothing behind it
   ========================================================================== */

.cl-nav {
    /* ---------------------------------------------------------------------
       Design tokens live on .cl-nav ITSELF, for BOTH variants.
       ---------------------------------------------------------------------
       They used to be declared on .cl-landing and duplicated onto
       .cl-nav--solid, on the reasoning that "a transparent nav sits over a
       dark hero and needs no tokens of its own".

       That held only while the nav was rendered inside the landing wrapper.
       It is now emitted by the layout as site-wide chrome — deliberately, so
       About / Admissions / News get the same bar — which places it BEFORE
       @yield('content') and therefore OUTSIDE .cl-landing.

       So on the home page the transparent nav inherited none of these. Every
       `color: var(--cl-white)` and `background: var(--cl-gold)` resolved to
       an invalid value, the declaration was dropped, and the affected
       elements fell back to the inherited dark body colour: the menu links,
       the brand name and its sub-line all rendered near-black on a dark
       purple hero, and the "Apply Now" pill lost its gold fill entirely.

       Declaring them here fixes every variant at once and removes the
       dependency on where the nav happens to sit in the document.
       --------------------------------------------------------------------- */
    --cl-white: #FFFFFF;
    --cl-gold: #F6B93B;
    --cl-gold-hover: #F4A000;
    --cl-text-light: rgba(255, 255, 255, .85);
    --cl-purple-dark: #14083F;
    --cl-radius-sm: 12px;
    --cl-transition: .35s ease;
    --cl-shadow-btn: 0 14px 30px rgba(246, 185, 59, .35);

    font-family: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;

    z-index: 30;
    padding: 22px 0;
    width: 100%;
}

/* Overlays whatever follows. Absolute rather than fixed so it scrolls away
   naturally; add .cl-nav--sticky when it should persist. */
.cl-nav--transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
}

/* Interior pages: opaque, in normal flow. Same markup, same classes on the
   links — only the surface changes. */
.cl-nav--solid {
    position: relative;
    background: var(--cl-purple-dark, #14083F);
    box-shadow: 0 6px 24px rgba(15, 8, 60, .18);
}

.cl-nav--sticky {
    position: sticky;
    top: 0;
}

/* (The second .cl-nav--solid rule that used to sit here only re-declared the
   design tokens. Those moved to .cl-nav so the transparent variant gets them
   too — see the note there.) */

.cl-nav__inner {
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: 24px;
}

/* Brand ------------------------------------------------------------------ */
.cl-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--cl-white);
}

.cl-brand__mark {
    width: 54px;
    height: 54px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Shown when a branch has uploaded no logo. Sized identically so the header
   does not reflow between a branded and an unbranded tenant. */
.cl-brand__mark--fallback {
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 1.6rem;
    color: var(--cl-gold);
}

.cl-brand__name {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .5px;
}

.cl-brand__sub {
    display: block;
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--cl-text-light);
    margin-top: 4px;
}

/* Links ------------------------------------------------------------------ */
.cl-nav__links {
    gap: 34px;
}

.cl-nav__link {
    position: relative;
    color: var(--cl-white);
    font-weight: 500;
    font-size: .98rem;
    text-decoration: none;
    padding: 6px 0;
    transition: color var(--cl-transition);
}

.cl-nav__link:hover,
.cl-nav__link:focus-visible {
    color: var(--cl-gold);
}

/* Underline grows from the centre on hover; the active item keeps it. */
.cl-nav__link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--cl-gold);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width var(--cl-transition);
}

.cl-nav__link:hover::after,
.cl-nav__link:focus-visible::after {
    width: 100%;
}

.cl-nav__link.is-active {
    color: var(--cl-gold);
}

.cl-nav__link.is-active::after {
    width: 26px;
}

/* Dropdown --------------------------------------------------------------- */
.cl-nav .dropdown-menu {
    background: #1B0E4E;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--cl-radius-sm);
    padding: 8px;
    box-shadow: 0 20px 50px rgba(10, 5, 40, .45);
}

.cl-nav .dropdown-item {
    color: var(--cl-text-light);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: .92rem;
    transition: background var(--cl-transition), color var(--cl-transition);
}

.cl-nav .dropdown-item:hover,
.cl-nav .dropdown-item:focus {
    background: rgba(255, 255, 255, .08);
    color: var(--cl-gold);
}

/* Toggler ---------------------------------------------------------------- */
.cl-nav__toggler {
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    padding: 7px 11px;
    color: var(--cl-white);
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
}

.cl-nav__toggler:focus-visible {
    outline: 2px solid var(--cl-gold);
    outline-offset: 2px;
}

/* 4. BUTTONS =============================================================== */

.cl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--cl-radius-sm);
    border: 2px solid transparent;
    transition: transform var(--cl-transition), box-shadow var(--cl-transition),
        background-color var(--cl-transition), color var(--cl-transition);
}

.cl-btn:hover,
.cl-btn:focus-visible {
    transform: translateY(-3px);
}

.cl-btn:focus-visible {
    outline: 3px solid rgba(246, 185, 59, .6);
    outline-offset: 3px;
}

/* Nav CTA */
.cl-btn--nav {
    height: 58px;
    padding-inline: 30px;
    background: var(--cl-gold);
    color: var(--cl-purple-dark);
    font-size: 1rem;
    box-shadow: var(--cl-shadow-btn);
}

.cl-btn--nav:hover {
    background: var(--cl-gold-hover);
    color: var(--cl-purple-dark);
    box-shadow: 0 18px 38px rgba(246, 185, 59, .45);
}

/* Hero CTAs */
.cl-btn--primary {
    height: 64px;
    padding-inline: 34px;
    background: var(--cl-gold);
    color: var(--cl-purple-dark);
    font-size: 1.05rem;
    box-shadow: var(--cl-shadow-btn);
}

.cl-btn--primary:hover {
    background: var(--cl-gold-hover);
    color: var(--cl-purple-dark);
}

.cl-btn--ghost {
    height: 64px;
    padding-inline: 34px;
    background: transparent;
    color: var(--cl-white);
    border-color: rgba(255, 255, 255, .55);
    font-size: 1.05rem;
}

.cl-btn--ghost:hover {
    background: rgba(255, 255, 255, .10);
    border-color: var(--cl-white);
    color: var(--cl-white);
}

/* 5. HERO CONTENT ========================================================== */

.cl-hero__body {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: center;
}

.cl-hero__inner {
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: 24px;
    width: 100%;
}

.cl-hero__title {
    font-size: clamp(2.5rem, 5.2vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1px;
    margin-bottom: 0;
    color: var(--cl-white);
}

.cl-hero__title span {
    color: var(--cl-gold);
    display: block;
}

.cl-hero__rule {
    width: 80px;
    height: 5px;
    background: var(--cl-gold);
    border: 0;
    border-radius: 4px;
    opacity: 1;
    margin: 28px 0;
}

.cl-hero__lead {
    max-width: 620px;
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 38px;
}

.cl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* 6. HERO MEDIA ============================================================ */

.cl-hero__media {
    position: relative;
    border-radius: var(--cl-radius-lg);
    overflow: hidden;
}

.cl-hero__media img {
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
    display: block;
}

/* Feathers the image into the gradient on its left edge, so it reads as part
   of the hero rather than a pasted-on rectangle. */
.cl-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 8, 63, .85) 0%, rgba(20, 8, 63, .15) 35%, transparent 65%);
    pointer-events: none;
}

/* 7. STATISTICS CARD ======================================================= */

.cl-stats {
    position: relative;
    z-index: 15;
    width: 92%;
    max-width: 1360px;
    /* Pulls the card up over the hero's lower edge. */
    margin: -170px auto 0;
    background: var(--cl-white);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow-card);
    padding: 38px;
}

.cl-stat {
    display: flex;
    flex-direction: column;
    padding-inline: 12px;
}

/* Light dividers between columns. Uses :not(:last-child) so the trailing
   column never carries a stray rule. */
.cl-stats .col-stat:not(:last-child) .cl-stat {
    border-right: 1px solid #E9ECF3;
}

.cl-stat__head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
}

.cl-stat__icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.7rem;
    flex-shrink: 0;
    transition: transform var(--cl-transition);
}

.cl-stat:hover .cl-stat__icon {
    transform: scale(1.07);
}

.cl-stat__value {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--cl-purple);
}

.cl-stat__label {
    font-size: 1.05rem;
    font-weight: 600;
    color: #14083F;
    margin-bottom: 10px;
}

.cl-stat__rule {
    width: 42px;
    height: 4px;
    border: 0;
    border-radius: 3px;
    opacity: 1;
    margin: 0 0 14px;
}

.cl-stat__text {
    font-size: .9rem;
    line-height: 1.65;
    color: #5B6280;
    margin: 0;
}

/* Per-column accents */
.cl-stat--1 .cl-stat__icon { background: var(--cl-stat-1); }
.cl-stat--2 .cl-stat__icon { background: var(--cl-stat-2); }
.cl-stat--3 .cl-stat__icon { background: var(--cl-stat-3); }
.cl-stat--4 .cl-stat__icon { background: var(--cl-stat-4); }

.cl-stat--1 .cl-stat__rule { background: var(--cl-stat-1); }
.cl-stat--2 .cl-stat__rule { background: var(--cl-stat-2); }
.cl-stat--3 .cl-stat__rule { background: var(--cl-stat-3); }
.cl-stat--4 .cl-stat__rule { background: var(--cl-stat-4); }

.cl-stat--1 .cl-stat__value { color: var(--cl-stat-1); }
.cl-stat--2 .cl-stat__value { color: var(--cl-stat-2); }
.cl-stat--3 .cl-stat__value { color: var(--cl-stat-3); }
.cl-stat--4 .cl-stat__value { color: var(--cl-stat-4); }

/* 8. FEATURE STRIP ========================================================= */

.cl-features {
    margin-top: 34px;
    background: var(--cl-purple);
    border-radius: 16px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 10px;
    padding: 12px 24px;
}

.cl-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cl-white);
    font-size: .92rem;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
}

.cl-feature:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -50%;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, .18);
}

.cl-feature i {
    font-size: 1.15rem;
    opacity: .95;
}

/* 9. MOTION ================================================================ */

.cl-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s ease;
}

.cl-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Honour the OS setting. Vestibular disorders make parallax and large
   translations genuinely unpleasant, and this is a one-line accommodation. */
@media (prefers-reduced-motion: reduce) {

    .cl-reveal,
    .cl-btn,
    .cl-nav__link::after,
    .cl-stat__icon {
        transition: none !important;
    }

    .cl-reveal {
        opacity: 1;
        transform: none;
    }

    .cl-btn:hover {
        transform: none;
    }
}

/* 10. RESPONSIVE =========================================================== */

/* Tablet — nav collapses, stats become 2x2. */
@media (max-width: 991.98px) {
    .cl-hero {
        min-height: auto;
        padding-top: 110px;
        padding-bottom: 170px;
    }

    .cl-nav__inner {
        padding-inline: 18px;
    }

    /* Collapsed menu needs a solid surface; transparent links over the hero
       image are unreadable once stacked. */
    .cl-nav__collapse {
        background: rgba(20, 8, 63, .97);
        border-radius: var(--cl-radius-sm);
        margin-top: 16px;
        padding: 18px;
    }

    .cl-nav__links {
        gap: 6px;
    }

    .cl-nav__link {
        padding: 10px 4px;
    }

    .cl-nav__link::after,
    .cl-nav__link.is-active::after {
        display: none;
    }

    .cl-btn--nav {
        width: 100%;
        margin-top: 14px;
    }

    .cl-hero__media {
        margin-top: 44px;
    }

    .cl-hero__media img {
        min-height: 340px;
    }

    .cl-stats {
        margin-top: -150px;
        padding: 28px;
    }

    /* Rule sits between the 2x2 pairs, not after every cell. */
    .cl-stats .col-stat:not(:last-child) .cl-stat {
        border-right: 0;
    }

    .cl-stats .col-stat:nth-child(odd) .cl-stat {
        border-right: 1px solid #E9ECF3;
    }

    .cl-stats .col-stat:nth-child(-n+2) .cl-stat {
        border-bottom: 1px solid #E9ECF3;
        padding-bottom: 22px;
        margin-bottom: 22px;
    }

    .cl-decor__dots {
        display: none;
    }
}

/* Mobile — single column, stacked buttons, scrollable feature strip. */
@media (max-width: 767.98px) {
    .cl-hero {
        padding-top: 96px;
        padding-bottom: 140px;
    }

    .cl-hero__body {
        text-align: center;
        padding-top: 20px;
    }

    .cl-hero__rule {
        margin-inline: auto;
    }

    .cl-hero__lead {
        margin-inline: auto;
        font-size: 1.02rem;
    }

    .cl-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .cl-btn--primary,
    .cl-btn--ghost {
        width: 100%;
        height: 58px;
    }

    .cl-brand__name {
        font-size: 1.5rem;
    }

    .cl-brand__sub {
        font-size: .62rem;
        letter-spacing: 1.8px;
    }

    .cl-brand__mark {
        width: 42px;
        height: 42px;
    }

    /* One stat per row. */
    .cl-stats {
        width: 94%;
        margin-top: -120px;
        padding: 22px;
    }

    .cl-stats .col-stat .cl-stat {
        border-right: 0 !important;
        border-bottom: 1px solid #E9ECF3;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .cl-stats .col-stat:last-child .cl-stat {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .cl-stat__value {
        font-size: 2.1rem;
    }

    /* Horizontal scroll rather than wrapping to three cramped rows. */
    .cl-features {
        justify-content: flex-start;
        overflow-x: auto;
        gap: 26px;
        padding-inline: 18px;
        scrollbar-width: none;
    }

    .cl-features::-webkit-scrollbar {
        display: none;
    }

    .cl-feature:not(:last-child)::after {
        display: none;
    }

    .cl-decor__arc,
    .cl-decor__circle {
        display: none;
    }
}

/* 11. WHY CHOOSE US ========================================================
   Section partial: resources/themes/_families/corporate/partials/why-choose-us.blade.php

   Deliberately NOT reusing .cl-features / .cl-feature. Those are the purple
   pill strip in section 8 — a single flex bar, not a card grid. Pointing this
   section at them would have produced cards jammed into a purple bar and
   changed the strip everywhere it already renders.

   Colours are var(--th-*) first with the corporate palette as the fallback,
   so a branch that has set its own branding gets its branding and one that
   has not gets the theme default. The --cl-* tokens are only reachable
   inside .cl-landing, so they are never the sole source of a colour here —
   this section must survive being dropped onto an interior page.
   ========================================================================== */

.cl-why {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 110px 0 100px;
    background:
        radial-gradient(900px 460px at 88% -10%, rgba(75, 57, 200, .07), transparent 60%),
        linear-gradient(180deg, var(--th-surface, #F8FAFC) 0%, #fff 55%);
    font-family: var(--th-font-body, 'Poppins', 'Inter', system-ui, sans-serif);
}

/* ---- decorative layer ---- */

.cl-why__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.cl-why__dots {
    position: absolute;
    top: 56px;
    right: 4%;
    width: 260px;
    height: 220px;
    opacity: .4;
    background-image: radial-gradient(var(--th-primary, #4B39C8) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    /* Fades the grid toward the page instead of ending on a hard rectangle. */
    -webkit-mask-image: radial-gradient(70% 70% at 75% 25%, #000 0%, transparent 72%);
    mask-image: radial-gradient(70% 70% at 75% 25%, #000 0%, transparent 72%);
}

.cl-why__arc {
    position: absolute;
    left: -140px;
    bottom: -160px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    border: 44px solid var(--th-accent, #F6B93B);
    opacity: .09;
}

.cl-why__inner {
    position: relative;
    z-index: 1;
    width: 92%;
    max-width: 1360px;
    margin: 0 auto;
}

/* ---- header ---- */

.cl-why__head {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.cl-why__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 9999px;
    background: rgba(75, 57, 200, .09);
    color: var(--th-primary, #4B39C8);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cl-why__badge i {
    font-size: .95rem;
}

.cl-why__title {
    margin: 22px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--th-text, #14083F);
}

.cl-why__sub {
    margin: 16px auto 0;
    max-width: 620px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
}

.cl-why__rule {
    display: block;
    width: 68px;
    height: 4px;
    margin: 28px auto 0;
    border-radius: 3px;
    background: var(--th-accent, #F6B93B);
}

/* ---- cards ---- */

.cl-why__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 64px;
}

.cl-why__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 38px 32px 34px;
    background: #fff;
    border: 1px solid #E9ECF3;
    border-radius: var(--th-radius, 18px);
    box-shadow: 0 1px 2px rgba(15, 8, 60, .04), 0 14px 34px rgba(15, 8, 60, .06);
    transition: transform var(--cl-transition, .35s ease),
                box-shadow var(--cl-transition, .35s ease),
                border-color var(--cl-transition, .35s ease);
}

/* Staggers the scroll reveal across the row. --cl-why-i is set inline by the
   partial from the loop index; the fallback keeps the delay at zero if the
   custom property is ever missing. */
.cl-why__card.cl-reveal {
    transition-delay: calc(var(--cl-why-i, 0) * 90ms);
}

.cl-why__card::before {
    /* Accent bar that grows across the top edge on hover. */
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--th-primary, #4B39C8), var(--th-accent, #F6B93B));
    transition: transform var(--cl-transition, .35s ease);
}

.cl-why__card:hover {
    transform: translateY(-6px);
    border-color: rgba(75, 57, 200, .22);
    box-shadow: 0 2px 4px rgba(15, 8, 60, .05), 0 28px 58px rgba(15, 8, 60, .13);
}

.cl-why__card:hover::before {
    transform: scaleX(1);
}

.cl-why__num {
    position: absolute;
    top: 14px;
    right: 22px;
    z-index: -1;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--th-primary, #4B39C8);
    opacity: .07;
    user-select: none;
}

.cl-why__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(75, 57, 200, .1);
    color: var(--th-primary, #4B39C8);
    font-size: 1.55rem;
    transition: transform var(--cl-transition, .35s ease),
                background-color var(--cl-transition, .35s ease),
                color var(--cl-transition, .35s ease);
}

.cl-why__card:hover .cl-why__icon {
    transform: scale(1.07);
    background: var(--th-primary, #4B39C8);
    color: #fff;
}

.cl-why__card-title {
    margin: 24px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--th-text, #14083F);
}

.cl-why__card-text {
    margin-top: 12px;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--th-muted, #5B6280);
}

/* content_type 'html' is admin-authored rich text, so it can contain anything
   a WYSIWYG emits. Neutralise the margins that would otherwise push the card
   out of alignment with its neighbours in the grid. */
.cl-why__card-text > :first-child {
    margin-top: 0;
}

.cl-why__card-text > :last-child {
    margin-bottom: 0;
}

.cl-why__card-text p {
    margin: 0 0 .75em;
}

.cl-why__card-text ul,
.cl-why__card-text ol {
    margin: 0 0 .75em;
    padding-left: 1.25em;
}

.cl-why__card-text a {
    color: var(--th-primary, #4B39C8);
    text-decoration: underline;
}

.cl-why__card-text img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* ---- responsive ---- */

@media (max-width: 991.98px) {
    .cl-why {
        padding: 84px 0 76px;
    }

    .cl-why__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        margin-top: 48px;
    }
}

@media (max-width: 767.98px) {
    .cl-why {
        padding: 64px 0 58px;
    }

    .cl-why__grid {
        grid-template-columns: 1fr;
    }

    .cl-why__card {
        padding: 30px 26px;
    }

    /* The dot field and arc crowd a phone screen far more than they
       decorate it. */
    .cl-why__decor {
        display: none;
    }

    /* Cards are stacked single-file on a phone, so a staggered reveal reads as
       the page loading slowly rather than as motion design. */
    .cl-why__card.cl-reveal {
        transition-delay: 0ms;
    }
}

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

    .cl-why__card,
    .cl-why__card:hover,
    .cl-why__card:hover .cl-why__icon {
        transform: none;
    }

    .cl-why__card,
    .cl-why__icon,
    .cl-why__card::before {
        transition: none !important;
    }

    .cl-why__card.cl-reveal {
        transition-delay: 0ms;
    }
}

/* 12. PROGRAMS =============================================================
   Section partial: resources/themes/_families/corporate/partials/programs.blade.php

   Replaces the legacy .programs-section / .program-theme-card vocabulary,
   which this stylesheet never defined. The legacy partial also carried its
   card typography as inline style attributes; those are rules here instead,
   so branch branding and the reduced-motion block can reach them.
   ========================================================================== */

.cl-programs {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 0;
    background: var(--th-bg, #fff);
    font-family: var(--th-font-body, 'Poppins', 'Inter', system-ui, sans-serif);
}

.cl-programs__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.cl-programs__dots {
    position: absolute;
    left: 3%;
    bottom: 60px;
    width: 240px;
    height: 200px;
    opacity: .35;
    background-image: radial-gradient(var(--th-primary, #4B39C8) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(70% 70% at 25% 75%, #000 0%, transparent 72%);
    mask-image: radial-gradient(70% 70% at 25% 75%, #000 0%, transparent 72%);
}

.cl-programs__inner {
    position: relative;
    z-index: 1;
    width: 92%;
    max-width: 1360px;
    margin: 0 auto;
}

/* ---- header ---- */

.cl-programs__head {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.cl-programs__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 9999px;
    background: rgba(246, 185, 59, .16);
    color: #8A6100;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cl-programs__title {
    margin: 22px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--th-text, #14083F);
}

.cl-programs__sub {
    margin: 16px auto 0;
    max-width: 640px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
}

.cl-programs__rule {
    display: block;
    width: 68px;
    height: 4px;
    margin: 28px auto 0;
    border-radius: 3px;
    background: var(--th-accent, #F6B93B);
}

/* ---- cards ---- */

.cl-programs__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 64px;
}

.cl-program {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #E9ECF3;
    border-radius: var(--th-radius, 18px);
    box-shadow: 0 1px 2px rgba(15, 8, 60, .04), 0 14px 34px rgba(15, 8, 60, .06);
    transition: transform var(--cl-transition, .35s ease),
                box-shadow var(--cl-transition, .35s ease),
                border-color var(--cl-transition, .35s ease);
}

/* Staggered across a row of three; --cl-program-i is the loop index modulo 3,
   so row four starts its stagger over rather than waiting a full second. */
.cl-program.cl-reveal {
    transition-delay: calc(var(--cl-program-i, 0) * 90ms);
}

.cl-program:hover {
    transform: translateY(-6px);
    border-color: rgba(75, 57, 200, .22);
    box-shadow: 0 2px 4px rgba(15, 8, 60, .05), 0 28px 58px rgba(15, 8, 60, .13);
}

/* Rendered only when the programme has a real uploaded image, so the fixed
   height never reserves space for a picture that is not coming. */
.cl-program__media {
    margin: 0;
    height: 172px;
    overflow: hidden;
    background: var(--th-surface, #F8FAFC);
}

.cl-program__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--cl-transition, .35s ease);
}

.cl-program:hover .cl-program__media img {
    transform: scale(1.05);
}

.cl-program__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 32px 30px 30px;
}

.cl-program__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: rgba(75, 57, 200, .1);
    color: var(--th-primary, #4B39C8);
    font-size: 1.4rem;
    transition: transform var(--cl-transition, .35s ease),
                background-color var(--cl-transition, .35s ease),
                color var(--cl-transition, .35s ease);
}

.cl-program:hover .cl-program__icon {
    transform: scale(1.07);
    background: var(--th-primary, #4B39C8);
    color: #fff;
}

.cl-program__title {
    margin: 22px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--th-text, #14083F);
}

/* Clamped to three lines. Programme descriptions are free text and range from
   one sentence to several paragraphs; without this the grid rows tear. */
.cl-program__text {
    margin: 12px 0 0;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- meta tiles ---- */

.cl-program__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
}

.cl-program__meta-item {
    flex: 1 1 110px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--th-surface, #F8FAFC);
    border: 1px solid #EEF1F7;
    text-align: center;
}

.cl-program__meta-label {
    margin: 0;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--th-muted, #8A90A6);
}

.cl-program__meta-value {
    margin: 4px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--th-primary, #4B39C8);
}

.cl-program__college {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 18px 0 0;
    font-size: .82rem;
    color: var(--th-muted, #94A3B8);
}

/* ---- call to action ----
   margin-top:auto pins the button to the card's lower edge, so buttons line up
   across a row whose cards have different amounts of text. */

.cl-program__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    align-self: flex-start;
    margin-top: auto;
    padding: 12px 24px;
    border-radius: 9999px;
    background: var(--th-primary, #4B39C8);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--cl-transition, .35s ease),
                transform var(--cl-transition, .35s ease),
                box-shadow var(--cl-transition, .35s ease);
}

.cl-program__cta:hover,
.cl-program__cta:focus-visible {
    color: #fff;
    background: var(--th-accent, #F6B93B);
    transform: translateX(3px);
    box-shadow: var(--cl-shadow-btn, 0 14px 30px rgba(246, 185, 59, .35));
}

.cl-program__cta:focus-visible {
    outline: 3px solid rgba(75, 57, 200, .45);
    outline-offset: 3px;
}

/* margin-top:auto absorbs LEFTOVER space only, so in the tallest card of a row
   there is none left and the button ends up flush against the text above it.
   This puts a real gap on whichever element immediately precedes the button;
   :has() scopes it to cards that actually have one. Browsers without :has()
   lose the guaranteed gap in that one edge case and are otherwise unaffected.
   (margin-block-start here would NOT work: in horizontal writing mode it IS
   margin-top, so it would overwrite the auto and break the alignment.) */
.cl-program__body:has(.cl-program__cta) > *:nth-last-child(2) {
    margin-bottom: 24px;
}

.cl-program__cta i {
    font-size: .8rem;
    transition: transform var(--cl-transition, .35s ease);
}

.cl-program__cta:hover i {
    transform: translateX(3px);
}

/* Declared locally rather than relying on Bootstrap's .visually-hidden:
   nothing guarantees this family loads Bootstrap's CSS, and without it the
   per-link programme name renders as visible loose text inside the button. */
.cl-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- responsive ---- */

@media (max-width: 991.98px) {
    .cl-programs {
        padding: 80px 0;
    }

    .cl-programs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        margin-top: 48px;
    }
}

@media (max-width: 767.98px) {
    .cl-programs {
        padding: 62px 0;
    }

    .cl-programs__grid {
        grid-template-columns: 1fr;
    }

    .cl-program__body {
        padding: 26px 24px;
    }

    .cl-programs__decor {
        display: none;
    }

    .cl-program.cl-reveal {
        transition-delay: 0ms;
    }
}

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

    .cl-program,
    .cl-program:hover,
    .cl-program:hover .cl-program__icon,
    .cl-program:hover .cl-program__media img,
    .cl-program__cta:hover,
    .cl-program__cta:hover i {
        transform: none;
    }

    .cl-program,
    .cl-program__icon,
    .cl-program__media img,
    .cl-program__cta,
    .cl-program__cta i {
        transition: none !important;
    }

    .cl-program.cl-reveal {
        transition-delay: 0ms;
    }
}

/* 13. COLLEGES =============================================================
   Section partial: resources/themes/_families/corporate/partials/colleges.blade.php

   Replaces the legacy .colleges-section / .college-theme-card vocabulary.
   Tinted surface rather than white, so it separates from the Programs section
   directly above it without needing a divider.
   ========================================================================== */

.cl-colleges {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 0;
    background:
        radial-gradient(820px 420px at 12% -12%, rgba(75, 57, 200, .07), transparent 60%),
        var(--th-surface, #F8FAFC);
    font-family: var(--th-font-body, 'Poppins', 'Inter', system-ui, sans-serif);
}

.cl-colleges__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.cl-colleges__arc {
    position: absolute;
    right: -170px;
    top: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 52px solid var(--th-primary, #4B39C8);
    opacity: .07;
}

.cl-colleges__inner {
    position: relative;
    z-index: 1;
    width: 92%;
    max-width: 1360px;
    margin: 0 auto;
}

/* ---- header ---- */

.cl-colleges__head {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.cl-colleges__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 9999px;
    background: rgba(75, 57, 200, .1);
    color: var(--th-primary, #4B39C8);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cl-colleges__title {
    margin: 22px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--th-text, #14083F);
}

.cl-colleges__sub {
    margin: 16px auto 0;
    max-width: 640px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
}

.cl-colleges__rule {
    display: block;
    width: 68px;
    height: 4px;
    margin: 28px auto 0;
    border-radius: 3px;
    background: var(--th-accent, #F6B93B);
}

/* ---- cards ---- */

.cl-colleges__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 64px;
}

.cl-college {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 30px 30px;
    background: #fff;
    border: 1px solid #E9ECF3;
    border-radius: var(--th-radius, 18px);
    box-shadow: 0 1px 2px rgba(15, 8, 60, .04), 0 14px 34px rgba(15, 8, 60, .06);
    transition: transform var(--cl-transition, .35s ease),
                box-shadow var(--cl-transition, .35s ease),
                border-color var(--cl-transition, .35s ease);
}

.cl-college.cl-reveal {
    transition-delay: calc(var(--cl-college-i, 0) * 90ms);
}

.cl-college:hover {
    transform: translateY(-6px);
    border-color: rgba(75, 57, 200, .22);
    box-shadow: 0 2px 4px rgba(15, 8, 60, .05), 0 28px 58px rgba(15, 8, 60, .13);
}

.cl-college__head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cl-college__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(75, 57, 200, .1);
    color: var(--th-primary, #4B39C8);
    font-size: 1.35rem;
    transition: transform var(--cl-transition, .35s ease),
                background-color var(--cl-transition, .35s ease),
                color var(--cl-transition, .35s ease);
}

.cl-college:hover .cl-college__icon {
    transform: scale(1.07);
    background: var(--th-primary, #4B39C8);
    color: #fff;
}

.cl-college__title {
    margin: 0;
    min-width: 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--th-text, #14083F);
}

.cl-college__title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--cl-transition, .35s ease);
}

.cl-college__title a:hover,
.cl-college__title a:focus-visible {
    color: var(--th-primary, #4B39C8);
    text-decoration: underline;
}

/* Clamped: descriptions are free text of wildly varying length and would
   otherwise tear the grid rows apart. */
.cl-college__text {
    margin: 18px 0 0;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- stats ---- */

.cl-college__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
}

.cl-college__stat {
    flex: 1 1 110px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--th-surface, #F8FAFC);
    border: 1px solid #EEF1F7;
    text-align: center;
}

.cl-college__stat-label {
    margin: 0;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--th-muted, #8A90A6);
}

.cl-college__stat-value {
    margin: 4px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--th-primary, #4B39C8);
}

/* ---- call to action ----
   A text link rather than the filled pill used in Programs: "Apply Now" is the
   page's primary action and should not have to compete with one solid button
   per college directly below it. */

.cl-college__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    margin-top: auto;
    font-size: .88rem;
    font-weight: 600;
    color: var(--th-primary, #4B39C8);
    text-decoration: none;
    transition: color var(--cl-transition, .35s ease),
                transform var(--cl-transition, .35s ease);
}

/* Same reasoning as .cl-program__cta: margin-top:auto absorbs leftover space
   only, so the tallest card in a row has none left and the link would sit
   flush against the block above it. */
.cl-college:has(.cl-college__cta) > *:nth-last-child(2) {
    margin-bottom: 24px;
}

.cl-college__cta:hover,
.cl-college__cta:focus-visible {
    color: #8A6100;
    transform: translateX(3px);
}

.cl-college__cta:focus-visible {
    outline: 3px solid rgba(75, 57, 200, .45);
    outline-offset: 4px;
    border-radius: 4px;
}

.cl-college__cta i {
    font-size: .78rem;
    transition: transform var(--cl-transition, .35s ease);
}

.cl-college__cta:hover i {
    transform: translateX(3px);
}

/* ---- responsive ---- */

@media (max-width: 991.98px) {
    .cl-colleges {
        padding: 80px 0;
    }

    .cl-colleges__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        margin-top: 48px;
    }
}

@media (max-width: 767.98px) {
    .cl-colleges {
        padding: 62px 0;
    }

    .cl-colleges__grid {
        grid-template-columns: 1fr;
    }

    .cl-college {
        padding: 28px 24px;
    }

    .cl-colleges__decor {
        display: none;
    }

    .cl-college.cl-reveal {
        transition-delay: 0ms;
    }
}

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

    .cl-college,
    .cl-college:hover,
    .cl-college:hover .cl-college__icon,
    .cl-college__cta:hover,
    .cl-college__cta:hover i {
        transform: none;
    }

    .cl-college,
    .cl-college__icon,
    .cl-college__cta,
    .cl-college__cta i,
    .cl-college__title a {
        transition: none !important;
    }

    .cl-college.cl-reveal {
        transition-delay: 0ms;
    }
}

/* 14. HOW TO APPLY =========================================================
   Section partial: resources/themes/_families/corporate/partials/how-to-apply.blade.php

   Replaces the legacy .how-apply-section / .step-theme-card vocabulary.

   The markup is an <ol>, so the list's own numbering is reset away here and
   the visible numeral is a styled span the partial marks aria-hidden. The
   sequence stays in the markup for assistive tech; the styling is free to do
   whatever it likes with the glyph.
   ========================================================================== */

.cl-apply {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 0;
    background: var(--th-bg, #fff);
    font-family: var(--th-font-body, 'Poppins', 'Inter', system-ui, sans-serif);
}

.cl-apply__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.cl-apply__dots {
    position: absolute;
    right: 4%;
    top: 70px;
    width: 240px;
    height: 200px;
    opacity: .35;
    background-image: radial-gradient(var(--th-accent, #F6B93B) 1.6px, transparent 1.6px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(70% 70% at 75% 25%, #000 0%, transparent 72%);
    mask-image: radial-gradient(70% 70% at 75% 25%, #000 0%, transparent 72%);
}

.cl-apply__inner {
    position: relative;
    z-index: 1;
    width: 92%;
    max-width: 1360px;
    margin: 0 auto;
}

/* ---- header ---- */

.cl-apply__head {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.cl-apply__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 9999px;
    background: rgba(246, 185, 59, .16);
    color: #8A6100;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cl-apply__title {
    margin: 22px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--th-text, #14083F);
}

.cl-apply__sub {
    margin: 16px auto 0;
    max-width: 640px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
}

.cl-apply__rule {
    display: block;
    width: 68px;
    height: 4px;
    margin: 28px auto 0;
    border-radius: 3px;
    background: var(--th-accent, #F6B93B);
}

/* ---- steps ----
   list-style:none removes the browser's own numbering; the partial renders a
   styled numeral instead. The <ol> is kept for its semantics, not its
   decoration.

   .cl-steps / .cl-step are SHARED between How to Apply and Admissions (§15).
   Both are numbered procedures with identical card anatomy, and the two
   sections sit within a screen of each other, so giving them separate
   vocabularies would have meant maintaining two copies of the same 80 lines
   and watching them drift. Only the section header differs, and that is
   namespaced per section. */

.cl-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 64px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.cl-step {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 38px 30px 32px;
    background: #fff;
    border: 1px solid #E9ECF3;
    border-radius: var(--th-radius, 18px);
    box-shadow: 0 1px 2px rgba(15, 8, 60, .04), 0 14px 34px rgba(15, 8, 60, .06);
    transition: transform var(--cl-transition, .35s ease),
                box-shadow var(--cl-transition, .35s ease),
                border-color var(--cl-transition, .35s ease);
}

.cl-step.cl-reveal {
    transition-delay: calc(var(--cl-step-i, 0) * 90ms);
}

.cl-step:hover {
    transform: translateY(-6px);
    border-color: rgba(75, 57, 200, .22);
    box-shadow: 0 2px 4px rgba(15, 8, 60, .05), 0 28px 58px rgba(15, 8, 60, .13);
}

/* Connector between consecutive steps, drawn across the grid gap at the
   height of the numeral. :nth-child(3n) is excluded because the last card in
   a row would otherwise trail a line off into the margin — the connector has
   to know the column count, so it is restated at each breakpoint below. */
.cl-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 62px;
    right: -28px;
    width: 28px;
    height: 0;
    border-top: 2px dashed rgba(75, 57, 200, .3);
}

.cl-step:nth-child(3n)::after {
    display: none;
}

.cl-step__num {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--th-primary, #4B39C8);
    color: #fff;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    transition: transform var(--cl-transition, .35s ease),
                background-color var(--cl-transition, .35s ease);
}

.cl-step:hover .cl-step__num {
    transform: scale(1.07);
    background: var(--th-accent, #F6B93B);
}

.cl-step__title {
    margin: 24px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--th-text, #14083F);
}

.cl-step__text {
    margin-top: 12px;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--th-muted, #5B6280);
}

/* content_type 'html' is admin-authored rich text and can contain anything a
   WYSIWYG emits. Neutralise the outer margins so cards stay aligned. */
.cl-step__text > :first-child {
    margin-top: 0;
}

.cl-step__text > :last-child {
    margin-bottom: 0;
}

.cl-step__text p {
    margin: 0 0 .75em;
}

.cl-step__text ul,
.cl-step__text ol {
    margin: 0 0 .75em;
    padding-left: 1.25em;
}

.cl-step__text a {
    color: var(--th-primary, #4B39C8);
    text-decoration: underline;
}

/* ---- responsive ---- */

@media (max-width: 991.98px) {
    .cl-apply {
        padding: 80px 0;
    }

    .cl-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        margin-top: 48px;
    }

    /* Two columns now, so the row-end card is every 2nd, not every 3rd. Both
       rules have to be restated: the 3n rule above would otherwise keep
       hiding the wrong connectors. */
    .cl-step:nth-child(3n)::after {
        display: block;
    }

    .cl-step:nth-child(2n)::after {
        display: none;
    }

    .cl-step:not(:last-child)::after {
        right: -22px;
        width: 22px;
    }
}

@media (max-width: 767.98px) {
    .cl-apply {
        padding: 62px 0;
    }

    .cl-steps {
        grid-template-columns: 1fr;
    }

    .cl-step {
        padding: 30px 26px;
    }

    /* Single column: every card is a row end, so no horizontal connector can
       be drawn at all. */
    .cl-step::after,
    .cl-step:not(:last-child)::after,
    .cl-step:nth-child(3n)::after {
        display: none;
    }

    .cl-apply__decor {
        display: none;
    }

    .cl-step.cl-reveal {
        transition-delay: 0ms;
    }
}

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

    .cl-step,
    .cl-step:hover,
    .cl-step:hover .cl-step__num {
        transform: none;
    }

    .cl-step,
    .cl-step__num {
        transition: none !important;
    }

    .cl-step.cl-reveal {
        transition-delay: 0ms;
    }
}

/* 15. ADMISSIONS ===========================================================
   Section partial: resources/themes/_families/corporate/partials/admissions.blade.php

   Cards come from §14 (.cl-steps / .cl-step) — same numbered-procedure
   anatomy. Only the section shell and header live here. The surface is tinted
   so the two step sections do not read as one continuous white run.
   ========================================================================== */

.cl-admission {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 0;
    background: var(--th-surface, #F8FAFC);
    font-family: var(--th-font-body, 'Poppins', 'Inter', system-ui, sans-serif);
}

.cl-admission__inner {
    position: relative;
    z-index: 1;
    width: 92%;
    max-width: 1360px;
    margin: 0 auto;
}

.cl-admission__head {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.cl-admission__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 9999px;
    background: rgba(75, 57, 200, .1);
    color: var(--th-primary, #4B39C8);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cl-admission__title {
    margin: 22px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--th-text, #14083F);
}

.cl-admission__sub {
    margin: 16px auto 0;
    max-width: 640px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
}

.cl-admission__rule {
    display: block;
    width: 68px;
    height: 4px;
    margin: 28px auto 0;
    border-radius: 3px;
    background: var(--th-accent, #F6B93B);
}

@media (max-width: 991.98px) {
    .cl-admission {
        padding: 80px 0;
    }
}

@media (max-width: 767.98px) {
    .cl-admission {
        padding: 62px 0;
    }
}

/* 16. CTA BANNER ===========================================================
   Section partial: resources/themes/_families/corporate/partials/cta-banner.blade.php

   Replaces the legacy .cta-banner / .cta-btn vocabulary. The generic partial
   carried its typography as inline style attributes; as rules here they can
   read the theme variables, so a branch's own palette reaches the banner.
   ========================================================================== */

.cl-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 74px 0;
    background: linear-gradient(135deg, #14083F 0%, #221266 55%, var(--th-primary, #4B39C8) 100%);
    color: #fff;
    font-family: var(--th-font-body, 'Poppins', 'Inter', system-ui, sans-serif);
}

/* Radial glow, matching the hero's treatment. Pseudo-element so it never
   enters the accessibility tree. */
.cl-cta::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -220px;
    right: -140px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107, 84, 226, .5) 0%, transparent 68%);
    filter: blur(30px);
    pointer-events: none;
}

.cl-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 92%;
    max-width: 1360px;
    margin: 0 auto;
}

.cl-cta__copy {
    flex: 1 1 auto;
    min-width: 0;
}

.cl-cta__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}

.cl-cta__text {
    margin: 12px 0 0;
    max-width: 720px;
    font-size: 1.02rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .85);
}

.cl-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex: 0 0 auto;
}

.cl-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 9999px;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 2px solid transparent;
    transition: transform var(--cl-transition, .35s ease),
                background-color var(--cl-transition, .35s ease),
                color var(--cl-transition, .35s ease),
                box-shadow var(--cl-transition, .35s ease);
}

.cl-cta__btn--solid {
    background: #fff;
    color: #14083F;
}

.cl-cta__btn--solid:hover,
.cl-cta__btn--solid:focus-visible {
    background: var(--th-accent, #F6B93B);
    color: #14083F;
    transform: translateY(-2px);
    box-shadow: var(--cl-shadow-btn, 0 14px 30px rgba(246, 185, 59, .35));
}

.cl-cta__btn--ghost {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.cl-cta__btn--ghost:hover,
.cl-cta__btn--ghost:focus-visible {
    background: rgba(255, 255, 255, .2);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}

/* The banner is a dark surface, so the default focus ring has almost no
   contrast against it. */
.cl-cta__btn:focus-visible {
    outline: 3px solid var(--th-accent, #F6B93B);
    outline-offset: 3px;
}

@media (max-width: 991.98px) {
    .cl-cta {
        padding: 58px 0;
    }

    .cl-cta__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }
}

@media (max-width: 575.98px) {
    .cl-cta__actions {
        width: 100%;
    }

    /* Full-width stacked buttons: side by side they wrap mid-label on a
       narrow screen. */
    .cl-cta__btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

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

    .cl-cta__btn,
    .cl-cta__btn:hover,
    .cl-cta__btn:focus-visible {
        transform: none;
    }

    .cl-cta__btn {
        transition: none !important;
    }
}

/* 17. E-PORTALS ============================================================
   Section partial: resources/themes/_families/corporate/partials/portals.blade.php

   Replaces the legacy .portals-section / .portal-theme-card vocabulary. The
   per-portal accent is a custom property set by the modifier class, so the
   card rules are written once rather than once per portal type.
   ========================================================================== */

.cl-portals {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 0;
    background: var(--th-bg, #fff);
    font-family: var(--th-font-body, 'Poppins', 'Inter', system-ui, sans-serif);
}

.cl-portals__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.cl-portals__dots {
    position: absolute;
    left: 3%;
    top: 70px;
    width: 240px;
    height: 200px;
    opacity: .32;
    background-image: radial-gradient(var(--th-primary, #4B39C8) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(70% 70% at 25% 25%, #000 0%, transparent 72%);
    mask-image: radial-gradient(70% 70% at 25% 25%, #000 0%, transparent 72%);
}

.cl-portals__inner {
    position: relative;
    z-index: 1;
    width: 92%;
    max-width: 1360px;
    margin: 0 auto;
}

/* ---- header ---- */

.cl-portals__head {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.cl-portals__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 9999px;
    background: rgba(75, 57, 200, .1);
    color: var(--th-primary, #4B39C8);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cl-portals__title {
    margin: 22px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--th-text, #14083F);
}

.cl-portals__sub {
    margin: 16px auto 0;
    max-width: 660px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
}

.cl-portals__rule {
    display: block;
    width: 68px;
    height: 4px;
    margin: 28px auto 0;
    border-radius: 3px;
    background: var(--th-accent, #F6B93B);
}

/* ---- cards ----
   Three portals, so the grid is capped at three columns and centred rather
   than stretched: at 1360px a 3-up row of full-width cards reads as a banner
   rather than as three choices. */

.cl-portals__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 64px auto 0;
    max-width: 1120px;
}

.cl-portal {
    /* Per-type accent. Declared once here and overridden by the modifiers
       below, so every rule that needs the accent reads this one property
       instead of being written out three times. */
    --cl-portal-accent: var(--th-primary, #4B39C8);

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    padding: 40px 30px 34px;
    background: #fff;
    border: 1px solid #E9ECF3;
    border-radius: var(--th-radius, 18px);
    box-shadow: 0 1px 2px rgba(15, 8, 60, .04), 0 14px 34px rgba(15, 8, 60, .06);
    transition: transform var(--cl-transition, .35s ease),
                box-shadow var(--cl-transition, .35s ease),
                border-color var(--cl-transition, .35s ease);
}

.cl-portal--student {
    --cl-portal-accent: var(--cl-stat-1, #4B39C8);
}

.cl-portal--staff {
    --cl-portal-accent: var(--cl-stat-3, #15803D);
}

.cl-portal--admin {
    --cl-portal-accent: var(--cl-stat-2, #1D4ED8);
}

.cl-portal.cl-reveal {
    transition-delay: calc(var(--cl-portal-i, 0) * 100ms);
}

/* Accent bar across the card's top edge, revealed on hover. */
.cl-portal::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--cl-portal-accent);
    transition: transform var(--cl-transition, .35s ease);
}

.cl-portal:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--cl-portal-accent) 30%, transparent);
    box-shadow: 0 2px 4px rgba(15, 8, 60, .05), 0 28px 58px rgba(15, 8, 60, .13);
}

/* color-mix is unsupported below Safari 16.2 / Firefox 113, where the whole
   declaration is dropped and the border silently keeps its resting colour. */
@supports not (border-color: color-mix(in srgb, red 30%, transparent)) {
    .cl-portal:hover {
        border-color: #CBD5E1;
    }
}

.cl-portal:hover::before {
    transform: scaleX(1);
}

.cl-portal__icon {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: var(--cl-portal-accent);
    color: #fff;
    font-size: 1.9rem;
    transition: transform var(--cl-transition, .35s ease);
}

.cl-portal:hover .cl-portal__icon {
    transform: scale(1.07);
}

.cl-portal__title {
    margin: 24px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--th-text, #14083F);
}

.cl-portal__text {
    margin: 10px 0 0;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
}

.cl-portal__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 26px;
    padding: 13px 26px;
    border-radius: 9999px;
    background: var(--cl-portal-accent);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter var(--cl-transition, .35s ease),
                transform var(--cl-transition, .35s ease);
}

.cl-portal__btn:hover,
.cl-portal__btn:focus-visible {
    color: #fff;
    filter: brightness(1.12);
    transform: translateY(-2px);
}

.cl-portal__btn:focus-visible {
    outline: 3px solid var(--cl-portal-accent);
    outline-offset: 3px;
}

/* ---- responsive ---- */

@media (max-width: 991.98px) {
    .cl-portals {
        padding: 80px 0;
    }

    .cl-portals__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        margin-top: 48px;
    }
}

@media (max-width: 767.98px) {
    .cl-portals {
        padding: 62px 0;
    }

    .cl-portals__grid {
        grid-template-columns: 1fr;
    }

    .cl-portal {
        padding: 32px 26px;
    }

    .cl-portals__decor {
        display: none;
    }

    .cl-portal.cl-reveal {
        transition-delay: 0ms;
    }
}

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

    .cl-portal,
    .cl-portal:hover,
    .cl-portal:hover .cl-portal__icon,
    .cl-portal__btn:hover,
    .cl-portal__btn:focus-visible {
        transform: none;
    }

    .cl-portal,
    .cl-portal__icon,
    .cl-portal__btn,
    .cl-portal::before {
        transition: none !important;
    }

    .cl-portal.cl-reveal {
        transition-delay: 0ms;
    }
}

/* 18. INFO CARDS ===========================================================
   Section partial: resources/themes/_families/corporate/partials/info-cards-section.blade.php

   Replaces the legacy .info-section / .info-tile vocabulary. Four across,
   because these are short signposts rather than the three-up content cards
   used elsewhere on the page.
   ========================================================================== */

.cl-info {
    position: relative;
    isolation: isolate;
    padding: 96px 0;
    background: var(--th-surface, #F8FAFC);
    font-family: var(--th-font-body, 'Poppins', 'Inter', system-ui, sans-serif);
}

.cl-info__inner {
    width: 92%;
    max-width: 1360px;
    margin: 0 auto;
}

.cl-info__head {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.cl-info__title {
    margin: 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.02em;
    color: var(--th-text, #14083F);
}

.cl-info__sub {
    margin: 14px auto 0;
    max-width: 620px;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
}

.cl-info__rule {
    display: block;
    width: 68px;
    height: 4px;
    margin: 26px auto 0;
    border-radius: 3px;
    background: var(--th-accent, #F6B93B);
}

.cl-info__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px;
}

.cl-info__card {
    display: flex;
    flex-direction: column;
    padding: 32px 26px 28px;
    background: #fff;
    border: 1px solid #E9ECF3;
    border-radius: var(--th-radius, 18px);
    box-shadow: 0 1px 2px rgba(15, 8, 60, .04), 0 12px 28px rgba(15, 8, 60, .05);
    transition: transform var(--cl-transition, .35s ease),
                box-shadow var(--cl-transition, .35s ease),
                border-color var(--cl-transition, .35s ease);
}

.cl-info__card.cl-reveal {
    transition-delay: calc(var(--cl-info-i, 0) * 80ms);
}

.cl-info__card:hover {
    transform: translateY(-5px);
    border-color: rgba(75, 57, 200, .22);
    box-shadow: 0 2px 4px rgba(15, 8, 60, .05), 0 24px 50px rgba(15, 8, 60, .12);
}

.cl-info__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: rgba(75, 57, 200, .1);
    color: var(--th-primary, #4B39C8);
    font-size: 1.3rem;
    transition: transform var(--cl-transition, .35s ease),
                background-color var(--cl-transition, .35s ease),
                color var(--cl-transition, .35s ease);
}

.cl-info__card:hover .cl-info__icon {
    transform: scale(1.07);
    background: var(--th-primary, #4B39C8);
    color: #fff;
}

.cl-info__card-title {
    margin: 20px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--th-text, #14083F);
}

/* Clamped rather than truncated in PHP: a line clamp adapts to the card's
   real width, where the generic partial's fixed 100-character Str::limit cut
   mid-word on a narrow card and left a ragged short line on a wide one. The
   complete text stays in the markup for search engines either way. */
.cl-info__card-text {
    margin: 10px 0 0;
    font-size: .92rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cl-info__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: auto;
    font-size: .86rem;
    font-weight: 600;
    color: var(--th-primary, #4B39C8);
    text-decoration: none;
    transition: color var(--cl-transition, .35s ease),
                transform var(--cl-transition, .35s ease);
}

/* margin-top:auto absorbs leftover space only; in the tallest card of a row
   there is none, so the link would sit flush against the text above it. */
.cl-info__card:has(.cl-info__link) > *:nth-last-child(2) {
    margin-bottom: 20px;
}

.cl-info__link:hover,
.cl-info__link:focus-visible {
    color: #8A6100;
    transform: translateX(3px);
}

.cl-info__link:focus-visible {
    outline: 3px solid rgba(75, 57, 200, .45);
    outline-offset: 4px;
    border-radius: 4px;
}

.cl-info__link i {
    font-size: .76rem;
    transition: transform var(--cl-transition, .35s ease);
}

.cl-info__link:hover i {
    transform: translateX(3px);
}

/* ---- responsive ---- */

@media (max-width: 1199.98px) {
    .cl-info__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .cl-info {
        padding: 76px 0;
    }

    .cl-info__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-top: 44px;
    }
}

@media (max-width: 575.98px) {
    .cl-info {
        padding: 58px 0;
    }

    .cl-info__grid {
        grid-template-columns: 1fr;
    }

    .cl-info__card.cl-reveal {
        transition-delay: 0ms;
    }
}

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

    .cl-info__card,
    .cl-info__card:hover,
    .cl-info__card:hover .cl-info__icon,
    .cl-info__link:hover,
    .cl-info__link:hover i {
        transform: none;
    }

    .cl-info__card,
    .cl-info__icon,
    .cl-info__link,
    .cl-info__link i {
        transition: none !important;
    }

    .cl-info__card.cl-reveal {
        transition-delay: 0ms;
    }
}

/* 19. CAMPUS LIFE / GALLERY ================================================
   Section partial: resources/themes/_families/corporate/partials/gallery.blade.php
   ========================================================================== */

.cl-gallery {
    position: relative;
    isolation: isolate;
    padding: 100px 0;
    background: var(--th-bg, #fff);
    font-family: var(--th-font-body, 'Poppins', 'Inter', system-ui, sans-serif);
}

.cl-gallery__inner {
    width: 92%;
    max-width: 1360px;
    margin: 0 auto;
}

.cl-gallery__head {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.cl-gallery__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 9999px;
    background: rgba(75, 57, 200, .1);
    color: var(--th-primary, #4B39C8);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cl-gallery__title {
    margin: 22px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--th-text, #14083F);
}

.cl-gallery__sub {
    margin: 16px auto 0;
    max-width: 620px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
}

.cl-gallery__rule {
    display: block;
    width: 68px;
    height: 4px;
    margin: 28px auto 0;
    border-radius: 3px;
    background: var(--th-accent, #F6B93B);
}

.cl-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 60px;
}

.cl-gallery__card {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #E9ECF3;
    border-radius: var(--th-radius, 18px);
    box-shadow: 0 1px 2px rgba(15, 8, 60, .04), 0 14px 34px rgba(15, 8, 60, .06);
    transition: transform var(--cl-transition, .35s ease),
                box-shadow var(--cl-transition, .35s ease);
}

.cl-gallery__card.cl-reveal {
    transition-delay: calc(var(--cl-gallery-i, 0) * 90ms);
}

.cl-gallery__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(15, 8, 60, .05), 0 28px 58px rgba(15, 8, 60, .13);
}

/* Fixed aspect rather than a fixed height: campus photos arrive at every
   dimension an admin's phone produces, and a fixed height crops portraits to
   a letterbox strip. */
.cl-gallery__media {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--th-surface, #F8FAFC);
}

.cl-gallery__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.cl-gallery__card:hover .cl-gallery__media img {
    transform: scale(1.06);
}

.cl-gallery__body {
    padding: 26px 24px 24px;
}

.cl-gallery__card-title {
    margin: 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--th-text, #14083F);
}

.cl-gallery__card-text {
    margin: 10px 0 0;
    font-size: .93rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .cl-gallery { padding: 80px 0; }

    .cl-gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-top: 46px;
    }
}

@media (max-width: 767.98px) {
    .cl-gallery { padding: 62px 0; }

    .cl-gallery__grid { grid-template-columns: 1fr; }

    .cl-gallery__card.cl-reveal { transition-delay: 0ms; }
}

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

    .cl-gallery__card,
    .cl-gallery__card:hover,
    .cl-gallery__card:hover .cl-gallery__media img {
        transform: none;
    }

    .cl-gallery__card,
    .cl-gallery__media img {
        transition: none !important;
    }

    .cl-gallery__card.cl-reveal { transition-delay: 0ms; }
}

/* 20. RECENT NEWS ==========================================================
   Section partial: resources/themes/_families/corporate/partials/news-carousel.blade.php

   Named "carousel" for continuity with the partial it replaces; it is a grid.
   Nothing here scrolls horizontally, which is deliberate — a carousel hides
   most of its content behind an interaction most visitors never perform.
   ========================================================================== */

.cl-news {
    position: relative;
    isolation: isolate;
    padding: 100px 0;
    background: var(--th-surface, #F8FAFC);
    font-family: var(--th-font-body, 'Poppins', 'Inter', system-ui, sans-serif);
}

.cl-news__inner {
    width: 92%;
    max-width: 1360px;
    margin: 0 auto;
}

.cl-news__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.cl-news__heading {
    min-width: 0;
}

.cl-news__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 9999px;
    background: rgba(75, 57, 200, .1);
    color: var(--th-primary, #4B39C8);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cl-news__title {
    margin: 20px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--th-text, #14083F);
}

.cl-news__sub {
    margin: 12px 0 0;
    max-width: 560px;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
}

.cl-news__all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 12px 24px;
    border-radius: 9999px;
    border: 2px solid var(--th-primary, #4B39C8);
    color: var(--th-primary, #4B39C8);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--cl-transition, .35s ease),
                color var(--cl-transition, .35s ease);
}

.cl-news__all:hover,
.cl-news__all:focus-visible {
    background: var(--th-primary, #4B39C8);
    color: #fff;
}

.cl-news__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 52px;
}

.cl-news__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #E9ECF3;
    border-radius: var(--th-radius, 18px);
    box-shadow: 0 1px 2px rgba(15, 8, 60, .04), 0 14px 34px rgba(15, 8, 60, .06);
    transition: transform var(--cl-transition, .35s ease),
                box-shadow var(--cl-transition, .35s ease);
}

.cl-news__card.cl-reveal {
    transition-delay: calc(var(--cl-news-i, 0) * 90ms);
}

.cl-news__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(15, 8, 60, .05), 0 28px 58px rgba(15, 8, 60, .13);
}

.cl-news__media {
    height: 190px;
    background-color: var(--th-surface, #F8FAFC);
    background-size: cover;
    background-position: center;
    transition: transform .5s ease;
}

.cl-news__card:hover .cl-news__media {
    transform: scale(1.04);
}

.cl-news__media--empty {
    display: grid;
    place-items: center;
    color: var(--th-primary, #4B39C8);
    opacity: .3;
    font-size: 2.4rem;
}

.cl-news__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px 24px 22px;
}

.cl-news__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: .8rem;
    color: var(--th-muted, #8A90A6);
}

.cl-news__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cl-news__tag {
    padding: 4px 12px;
    border-radius: 9999px;
    background: rgba(75, 57, 200, .1);
    color: var(--th-primary, #4B39C8);
    font-weight: 600;
}

.cl-news__card-title {
    margin: 14px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--th-text, #14083F);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cl-news__excerpt {
    margin: 10px 0 0;
    font-size: .92rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cl-news__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: auto;
    font-size: .86rem;
    font-weight: 600;
    color: var(--th-primary, #4B39C8);
    text-decoration: none;
    transition: color var(--cl-transition, .35s ease),
                transform var(--cl-transition, .35s ease);
}

.cl-news__body:has(.cl-news__more) > *:nth-last-child(2) {
    margin-bottom: 18px;
}

.cl-news__more:hover,
.cl-news__more:focus-visible {
    color: #8A6100;
    transform: translateX(3px);
}

.cl-news__more:focus-visible,
.cl-news__all:focus-visible {
    outline: 3px solid rgba(75, 57, 200, .45);
    outline-offset: 4px;
}

.cl-news__more i {
    font-size: .76rem;
}

@media (max-width: 991.98px) {
    .cl-news { padding: 80px 0; }

    .cl-news__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .cl-news__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-top: 40px;
    }
}

@media (max-width: 767.98px) {
    .cl-news { padding: 62px 0; }

    .cl-news__grid { grid-template-columns: 1fr; }

    .cl-news__card.cl-reveal { transition-delay: 0ms; }
}

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

    .cl-news__card,
    .cl-news__card:hover,
    .cl-news__card:hover .cl-news__media,
    .cl-news__more:hover {
        transform: none;
    }

    .cl-news__card,
    .cl-news__media,
    .cl-news__more,
    .cl-news__all {
        transition: none !important;
    }

    .cl-news__card.cl-reveal { transition-delay: 0ms; }
}

/* 21. CONTACT ==============================================================
   Section partial: resources/themes/_families/corporate/partials/contact.blade.php

   The grid is auto-fit rather than a fixed four columns, because the partial
   renders only the details a branch actually recorded — one real value must
   produce one centred card, not one card and three empty tracks.
   ========================================================================== */

.cl-contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 96px 0;
    background: linear-gradient(135deg, #14083F 0%, #221266 60%, var(--th-primary, #4B39C8) 100%);
    color: #fff;
    font-family: var(--th-font-body, 'Poppins', 'Inter', system-ui, sans-serif);
}

.cl-contact__decor {
    position: absolute;
    z-index: -1;
    top: -180px;
    left: -120px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107, 84, 226, .45) 0%, transparent 68%);
    filter: blur(30px);
    pointer-events: none;
}

.cl-contact__inner {
    position: relative;
    z-index: 1;
    width: 92%;
    max-width: 1360px;
    margin: 0 auto;
}

.cl-contact__head {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.cl-contact__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .9);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cl-contact__title {
    margin: 20px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
}

.cl-contact__sub {
    margin: 14px auto 0;
    max-width: 520px;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
}

.cl-contact__rule {
    display: block;
    width: 68px;
    height: 4px;
    margin: 26px auto 0;
    border-radius: 3px;
    background: var(--th-accent, #F6B93B);
}

.cl-contact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    margin: 52px auto 0;
    max-width: 1180px;
}

.cl-contact__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    border-radius: var(--th-radius, 18px);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: transform var(--cl-transition, .35s ease),
                background-color var(--cl-transition, .35s ease),
                border-color var(--cl-transition, .35s ease);
}

.cl-contact__card.cl-reveal {
    transition-delay: calc(var(--cl-contact-i, 0) * 90ms);
}

.cl-contact__card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
}

.cl-contact__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--th-accent, #F6B93B);
    color: #14083F;
    font-size: 1.3rem;
}

.cl-contact__label {
    margin: 18px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.cl-contact__value {
    margin: 8px 0 0;
    font-size: .93rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .8);
    /* Long email addresses and street lines must wrap rather than widen the
       track and push the grid out of alignment. */
    overflow-wrap: anywhere;
}

.cl-contact__value--link {
    text-decoration: none;
    transition: color var(--cl-transition, .35s ease);
}

.cl-contact__value--link:hover,
.cl-contact__value--link:focus-visible {
    color: var(--th-accent, #F6B93B);
    text-decoration: underline;
}

.cl-contact__value--link:focus-visible {
    outline: 3px solid var(--th-accent, #F6B93B);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (max-width: 767.98px) {
    .cl-contact { padding: 66px 0; }

    .cl-contact__grid {
        grid-template-columns: 1fr;
        margin-top: 40px;
    }

    .cl-contact__card.cl-reveal { transition-delay: 0ms; }
}

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

    .cl-contact__card,
    .cl-contact__card:hover {
        transform: none;
    }

    .cl-contact__card,
    .cl-contact__value--link {
        transition: none !important;
    }

    .cl-contact__card.cl-reveal { transition-delay: 0ms; }
}

/* ==========================================================================
   ABOUT — Mission, Vision & Core Values
   ==========================================================================
   Backs partials/about.blade.php (Branding & Content -> University Profile).
   Follows the same token set as .cl-news: --th-primary / --th-surface /
   --th-text / --th-muted / --th-radius / --cl-transition, so a branch's theme
   colours flow through without further work.
   ========================================================================== */

.cl-about {
    position: relative;
    isolation: isolate;
    padding: 100px 0;
    background: #fff;
    font-family: var(--th-font-body, 'Poppins', 'Inter', system-ui, sans-serif);
}

.cl-about__inner {
    width: 92%;
    max-width: 1360px;
    margin: 0 auto;
}

.cl-about__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.cl-about__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 9999px;
    background: rgba(75, 57, 200, .1);
    color: var(--th-primary, #4B39C8);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cl-about__title {
    margin: 20px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--th-text, #14083F);
}

.cl-about__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    margin-top: 52px;
}

.cl-about__card {
    padding: 38px 34px;
    background: var(--th-surface, #F8FAFC);
    border: 1px solid #E9ECF3;
    border-radius: var(--th-radius, 18px);
    transition: transform var(--cl-transition, .35s ease),
                box-shadow var(--cl-transition, .35s ease);
}

.cl-about__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1px 2px rgba(15, 8, 60, .04), 0 14px 34px rgba(15, 8, 60, .06);
}

.cl-about__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--th-primary, #4B39C8);
    color: #fff;
    font-size: 1.25rem;
}

.cl-about__card-title {
    margin: 22px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--th-text, #14083F);
}

.cl-about__card-text {
    margin: 12px 0 0;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--th-muted, #5B6280);
}

.cl-about__values {
    margin-top: 64px;
    padding: 48px 40px;
    border-radius: var(--th-radius, 18px);
    background: var(--th-surface, #F8FAFC);
    border: 1px solid #E9ECF3;
}

.cl-about__values-title {
    margin: 0;
    text-align: center;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--th-text, #14083F);
}

.cl-about__values-sub {
    margin: 10px 0 0;
    text-align: center;
    font-size: .98rem;
    color: var(--th-muted, #5B6280);
}

.cl-about__values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 36px;
}

.cl-about__value {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
    background: #fff;
    border: 1px solid #E9ECF3;
    border-radius: calc(var(--th-radius, 18px) - 4px);
}

.cl-about__value-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(75, 57, 200, .1);
    color: var(--th-primary, #4B39C8);
    font-size: .75rem;
}

.cl-about__value-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--th-text, #14083F);
}

.cl-about__value-text {
    margin: 6px 0 0;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--th-muted, #5B6280);
}

@media (max-width: 900px) {
    .cl-about__grid,
    .cl-about__values-grid {
        grid-template-columns: 1fr;
    }

    .cl-about__values {
        padding: 34px 22px;
    }
}

/* ==========================================================================
   EVENTS & BLOGS
   ==========================================================================
   Back partials/events.blade.php and partials/blogs.blade.php (Content
   Management). Both mirror the .cl-news rhythm so the three publishing
   sections read as one family down the page.
   ========================================================================== */

.cl-events,
.cl-blogs {
    position: relative;
    isolation: isolate;
    padding: 100px 0;
    font-family: var(--th-font-body, 'Poppins', 'Inter', system-ui, sans-serif);
}

.cl-events { background: #fff; }
.cl-blogs  { background: var(--th-surface, #F8FAFC); }

.cl-events__inner,
.cl-blogs__inner {
    width: 92%;
    max-width: 1360px;
    margin: 0 auto;
}

.cl-events__head,
.cl-blogs__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.cl-events__heading,
.cl-blogs__heading { min-width: 0; }

.cl-events__badge,
.cl-blogs__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 9999px;
    background: rgba(75, 57, 200, .1);
    color: var(--th-primary, #4B39C8);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cl-events__title,
.cl-blogs__title {
    margin: 20px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--th-text, #14083F);
}

.cl-events__all,
.cl-blogs__all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 12px 24px;
    border-radius: 9999px;
    border: 2px solid var(--th-primary, #4B39C8);
    color: var(--th-primary, #4B39C8);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--cl-transition, .35s ease),
                color var(--cl-transition, .35s ease);
}

.cl-events__all:hover,
.cl-blogs__all:hover {
    background: var(--th-primary, #4B39C8);
    color: #fff;
}

/* ── Events ─────────────────────────────────────────────────────────────── */

.cl-events__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 52px;
}

.cl-events__card {
    display: flex;
    gap: 20px;
    padding: 26px;
    background: var(--th-surface, #F8FAFC);
    border: 1px solid #E9ECF3;
    border-radius: var(--th-radius, 18px);
    transition: transform var(--cl-transition, .35s ease),
                box-shadow var(--cl-transition, .35s ease);
}

.cl-events__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1px 2px rgba(15, 8, 60, .04), 0 14px 34px rgba(15, 8, 60, .06);
}

.cl-events__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 66px;
    height: 66px;
    border-radius: 16px;
    background: var(--th-primary, #4B39C8);
    color: #fff;
    line-height: 1;
}

.cl-events__day  { font-size: 1.5rem; font-weight: 700; }
.cl-events__mon  { margin-top: 4px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

.cl-events__body { min-width: 0; }

.cl-events__card-title {
    margin: 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--th-text, #14083F);
}

.cl-events__meta {
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .84rem;
    color: var(--th-muted, #5B6280);
}

.cl-events__text {
    margin: 10px 0 0;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
}

.cl-events__link,
.cl-blogs__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    color: var(--th-primary, #4B39C8);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
}

.cl-events__link:hover,
.cl-blogs__link:hover { text-decoration: underline; }

/* ── Blogs ──────────────────────────────────────────────────────────────── */

.cl-blogs__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 52px;
}

.cl-blogs__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #E9ECF3;
    border-radius: var(--th-radius, 18px);
    transition: transform var(--cl-transition, .35s ease),
                box-shadow var(--cl-transition, .35s ease);
}

.cl-blogs__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1px 2px rgba(15, 8, 60, .04), 0 14px 34px rgba(15, 8, 60, .06);
}

.cl-blogs__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--th-surface, #F8FAFC);
}

.cl-blogs__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cl-blogs__body { padding: 26px; }

.cl-blogs__meta {
    margin: 0;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--th-muted, #5B6280);
}

.cl-blogs__card-title {
    margin: 10px 0 0;
    font-family: var(--th-font-head, 'Poppins', system-ui, sans-serif);
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--th-text, #14083F);
}

.cl-blogs__text {
    margin: 10px 0 0;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--th-muted, #5B6280);
}

@media (max-width: 1100px) {
    .cl-events__grid,
    .cl-blogs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .cl-events__head,
    .cl-blogs__head { flex-direction: column; align-items: flex-start; }

    .cl-events__grid,
    .cl-blogs__grid { grid-template-columns: 1fr; }
}