/* ==========================================================================
   Public website — header, hero, sections, footer
   ========================================================================== */

.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 9999;
    background: var(--navy);
    color: #fff;
    padding: 12px 22px;
    border-radius: 0 0 8px 0;
    font-weight: 700;
}

.skip-link:focus {
    inset-inline-start: 0;
    color: #fff;
}

/* ==========================================================================
   Header — three stacked rows
     1. contact strip (phone, email, social, language)
     2. brand row     (logo + sign-in / apply buttons)
     3. navigation row
   The whole stack is fixed and all three rows stay visible while scrolling,
   so the contact details, the logo and the navigation are reachable from
   anywhere on the page.
   ========================================================================== */

.site-header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 1000;
    background: #fff;
    transition: box-shadow .3s;
}

/* ── Row 1: contact strip ────────────────────────────────────── */
.topbar {
    background: var(--navy-darker);
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    height: var(--topbar-h);
    overflow: hidden;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    height: 100%;
}

.topbar-contact {
    display: flex;
    align-items: center;
    gap: 22px;
}

.topbar-contact a {
    color: rgba(255, 255, 255, .8);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.topbar-contact a:hover {
    color: var(--gold-light);
}

.topbar-contact i {
    color: var(--gold);
    font-size: 15px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-social {
    display: flex;
    gap: 9px;
}

.topbar-social a {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .85);
    display: grid;
    place-items: center;
    font-size: 13px;
}

.topbar-social a:hover {
    background: var(--gold);
    color: #fff;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
}

.lang-switch:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}

/* ── Row 2: brand + actions ─────────────────────────────────── */
.brand-bar {
    background: #fff;
    height: var(--brandbar-h);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.brand-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    height: 100%;
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
}

.brand-logo {
    height: 56px;
    width: auto;
    object-fit: contain;
}

.brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: var(--gold);
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: -.5px;
}

.brand-text .brand-name {
    font-size: 19px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.2;
}

.brand-text .brand-tag {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .09em;
    text-transform: uppercase;
}

html[dir="rtl"] .brand-text .brand-tag {
    letter-spacing: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

/* ── Row 3: navigation ─────────────────────────────────────── */
.nav-bar {
    background: var(--navy);
    height: var(--navbar-h);
}

.nav-bar-inner {
    display: flex;
    align-items: center;
    height: 100%;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 100%;
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 15px;
    height: 100%;
    font-size: 14.4px;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    white-space: nowrap;
    transition: background .2s, color .2s;
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.nav-link.active {
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--gold);
}

.nav-link .chev {
    font-size: 15px;
    transition: transform .25s;
}

.nav-item {
    position: relative;
    height: 100%;
}

.nav-item:hover .nav-link .chev {
    transform: rotate(180deg);
}

.dropdown {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 258px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 9px;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(9px);
    transition: all .22s;
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--body);
}

.dropdown a:hover {
    background: var(--navy-50);
    color: var(--navy);
}

.dropdown a i {
    color: var(--gold-dark);
    font-size: 17px;
}

.dropdown-divider {
    height: 1px;
    background: var(--line);
    margin: 7px 0;
}

/* ── Scrolled state ──────────────────────────────────────────── */
/* All three rows stay pinned while scrolling — the contact strip, the brand
   row and the navigation. Scrolling only lifts the shadow, so the header
   reads as raised above the content. */
.site-header.scrolled {
    box-shadow: var(--shadow-lg);
}

/* ── Mobile trigger ───────────────────────────────────────── */
.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--navy-50);
    border: none;
    color: var(--navy);
    font-size: 23px;
    cursor: pointer;
    place-items: center;
}

/* ── Mobile drawer ───────────────────────────────────────── */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 16, 27, .55);
    z-index: 1098;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    backdrop-filter: blur(2px);
}

.nav-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.mobile-nav {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    width: min(340px, 88vw);
    height: 100dvh;
    background: #fff;
    z-index: 1099;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .34s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
}

html[dir="rtl"] .mobile-nav {
    transform: translateX(-100%);
}

.mobile-nav.open {
    transform: translateX(0);
}

.mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.mobile-nav-close {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: none;
    background: var(--navy-50);
    color: var(--navy);
    font-size: 21px;
    cursor: pointer;
}

.mobile-nav-body {
    padding: 14px;
    flex: 1;
}

.mobile-nav-body>a,
.mobile-accordion-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    text-align: start;
}

.mobile-nav-body>a:hover,
.mobile-accordion-btn:hover {
    background: var(--navy-50);
    color: var(--navy);
}

.mobile-accordion-btn i {
    transition: transform .25s;
    color: var(--muted);
}

.mobile-accordion-btn.open i {
    transform: rotate(180deg);
}

.mobile-accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.mobile-accordion-panel a {
    display: block;
    padding: 10px 15px;
    margin-inline-start: 15px;
    font-size: 14px;
    color: var(--body);
    border-inline-start: 2px solid var(--line);
}

.mobile-accordion-panel a:hover {
    color: var(--navy);
    border-color: var(--gold);
}

.mobile-nav-foot {
    padding: 18px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    margin-top: var(--header-h);
    min-height: 620px;
    display: flex;
    align-items: center;
    background: linear-gradient(120deg, var(--navy-darker) 0%, var(--navy) 52%, var(--navy-light) 100%);
    color: #fff;
    overflow: hidden;
    padding: 76px 0;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-image, none) center/cover no-repeat;
    opacity: .22;
}

.hero::after {
    content: '';
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    inset-inline-end: -180px;
    top: -220px;
    background: radial-gradient(circle, rgba(216, 36, 42, .3) 0%, transparent 68%);
}

.hero .container {
    position: relative;
    z-index: 3;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 54px;
    align-items: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 17px;
    border-radius: 100px;
    margin-bottom: 22px;
    background: rgba(216, 36, 42, .18);
    border: 1px solid rgba(216, 36, 42, .45);
    color: var(--gold-light);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

html[dir="rtl"] .hero-eyebrow {
    letter-spacing: 0;
}

.hero h1 {
    color: #fff;
    font-size: clamp(33px, 5vw, 55px);
    line-height: 1.14;
    margin-bottom: 20px;
}

.hero h1 .accent {
    color: var(--gold-light);
}

.hero-lead {
    font-size: 17.5px;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 32px;
    max-width: 580px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-bottom: 40px;
}

.hero-pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
}

.hero-pillar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(8px);
}

.hero-pillar i {
    font-size: 22px;
    color: var(--gold-light);
    flex-shrink: 0;
}

.hero-pillar span {
    font-size: 13.6px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}

.hero-card {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-lg);
    padding: 32px;
    backdrop-filter: blur(14px);
}

.hero-card h3 {
    color: #fff;
    font-size: 21px;
    margin-bottom: 8px;
}

.hero-card p {
    color: rgba(255, 255, 255, .78);
    font-size: 14.5px;
    margin-bottom: 22px;
}

.hero-card .field-label {
    color: rgba(255, 255, 255, .9);
}

.hero-card .input {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

.hero-card .input::placeholder {
    color: rgba(255, 255, 255, .58);
}

.hero-card .input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(216, 36, 42, .22);
}

/* ── Stats strip ────────────────────────────────────────────────────────── */
.stats-strip {
    background: var(--navy);
    padding: 46px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 26px;
}

.stat-item {
    text-align: center;
    color: #fff;
}

.stat-item i {
    font-size: 30px;
    color: var(--gold);
    margin-bottom: 10px;
    display: block;
}

.stat-value {
    font-size: 39px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 7px;
    color: #fff;
}

.stat-label {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .72);
    letter-spacing: .05em;
    text-transform: uppercase;
}

html[dir="rtl"] .stat-label {
    letter-spacing: 0;
}

/* ── Feature / faculty / course cards ───────────────────────────────────── */
.feature-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 26px;
    text-align: center;
    transition: all .3s;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--gold);
}

.feature-card .icon-tile {
    margin: 0 auto 17px;
}

.feature-card h3 {
    font-size: 17.5px;
    margin-bottom: 9px;
}

.feature-card p {
    font-size: 14.2px;
    color: var(--body);
}

.faculty-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.faculty-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.faculty-card h3 {
    font-size: 19px;
    margin-bottom: 11px;
}

.faculty-card p {
    font-size: 14.2px;
    margin-bottom: 19px;
    flex: 1;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    margin-top: auto;
}

.card-link i {
    transition: transform .25s;
}

.card-link:hover i {
    transform: translateX(4px);
}

html[dir="rtl"] .card-link i {
    transform: scaleX(-1);
}

html[dir="rtl"] .card-link:hover i {
    transform: scaleX(-1) translateX(4px);
}

.course-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.course-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--navy);
}

.course-price small {
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 500;
}

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--line);
}

/* ── President's message ────────────────────────────────────────────────── */
.president-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 48px;
    align-items: start;
}

.president-photo {
    position: relative;
}

.president-photo img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.president-photo-fallback {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, var(--navy), var(--navy-light));
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .3);
    font-size: 74px;
}

.president-badge {
    position: absolute;
    inset-inline-start: 50%;
    bottom: -22px;
    transform: translateX(-50%);
    background: var(--gold);
    color: #fff;
    padding: 9px 22px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--shadow-gold);
}

html[dir="rtl"] .president-badge {
    transform: translateX(50%);
}

.president-quote {
    font-size: 16.5px;
    line-height: 1.9;
    color: var(--body);
    position: relative;
    padding-inline-start: 30px;
}

.president-quote::before {
    content: '\eb6b';
    font-family: 'remixicon';
    position: absolute;
    inset-inline-start: 0;
    top: -6px;
    font-size: 30px;
    color: var(--gold);
    opacity: .5;
}

.president-sign {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.president-sign .name {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
}

.president-sign .role {
    font-size: 14px;
    color: var(--muted);
}

/* ── Verify certificate ─────────────────────────────────────────────────── */
.verify-box {
    background: linear-gradient(135deg, var(--navy-darker), var(--navy));
    border-radius: var(--radius-lg);
    padding: 52px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.verify-box::after {
    content: '\eb7c';
    font-family: 'remixicon';
    position: absolute;
    inset-inline-end: -30px;
    bottom: -46px;
    font-size: 200px;
    color: rgba(255, 255, 255, .05);
}

.verify-box h2 {
    color: #fff;
    font-size: clamp(25px, 3.2vw, 35px);
    margin-bottom: 12px;
}

.verify-box p {
    color: rgba(255, 255, 255, .8);
    max-width: 560px;
    margin: 0 auto 30px;
}

.verify-form {
    display: flex;
    gap: 11px;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.verify-form .input {
    background: #fff;
    border-color: transparent;
}

.verify-result {
    max-width: 700px;
    margin: 30px auto 0;
    text-align: start;
    background: #fff;
    border-radius: var(--radius);
    padding: 28px;
    color: var(--body);
    position: relative;
    z-index: 2;
}

.verify-result-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.verify-result-head i {
    font-size: 42px;
}

.verify-result.valid .verify-result-head i {
    color: var(--success);
}

.verify-result.invalid .verify-result-head i {
    color: var(--danger);
}

.verify-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

.verify-detail {
    padding: 13px 16px;
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
}

.verify-detail dt {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}

.verify-detail dd {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
}

/* ── Testimonials ───────────────────────────────────────────────────────── */
.testimonial-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.testimonial-stars {
    color: var(--gold);
    font-size: 16px;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

/* The quote takes the remaining height so cards in a row stay equal. */
.testimonial-card p {
    font-size: 14.8px;
    line-height: 1.85;
    margin: 0;
    flex: 1;
    font-style: italic;
}

/* The author leads the card, separated from the quote by a rule. */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.testimonial-avatar {
    width: 47px;
    height: 47px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--navy-50);
    color: var(--navy);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 15px;
}

.testimonial-author>div {
    min-width: 0;
}

.testimonial-author .name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.testimonial-author .role {
    font-size: 12.8px;
    color: var(--muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.5em);
}

/* ── Partners / accreditations ──────────────────────────────────────────── */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 18px;
}

.partner-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    display: grid;
    place-items: center;
    min-height: 128px;
    transition: all .3s;
}

.partner-item:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow);
}

/* Official seals carry fine linework and meaningful colour (the Apostille
   badge, the state seals), so they are shown at full colour and a size where
   they stay legible rather than desaturated into mush. */
.partner-item img {
    max-height: 78px;
    width: auto;
    object-fit: contain;
    transition: transform .3s;
}

.partner-item:hover img {
    transform: scale(1.06);
}

.partner-item .partner-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy);
    text-align: center;
}

/* ── CTA band ───────────────────────────────────────────────────────────── */
.cta-band {
    background: linear-gradient(120deg, var(--navy) 0%, var(--navy-light) 100%);
    padding: 66px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.cta-band::after {
    content: '';
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216, 36, 42, .28), transparent 70%);
    inset-inline-start: -140px;
    bottom: -230px;
}

.cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.cta-inner h2 {
    color: #fff;
    font-size: clamp(24px, 3vw, 33px);
    margin-bottom: 9px;
}

.cta-inner p {
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
}

/* ── Global presence ────────────────────────────────────────────────────── */
.presence-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: all .3s;
}

.presence-card:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow);
}

.presence-flag {
    font-size: 34px;
    line-height: 1;
}

.presence-card h4 {
    font-size: 16.5px;
    margin-bottom: 5px;
}

.presence-card .reg-no {
    font-size: 13.5px;
    color: var(--muted);
}

.presence-card .reg-no strong {
    color: var(--gold-dark);
    font-family: ui-monospace, monospace;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--navy-darker);
    color: #a9bcd0;
    padding-top: 66px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.15fr 1.25fr;
    gap: 38px;
    padding-bottom: 46px;
}

.footer-academy h4 {
    position: relative;
}

.footer-academy-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    margin-bottom: 15px;
    background: rgba(216, 36, 42, .1);
    border: 1px solid rgba(216, 36, 42, .26);
    border-radius: 12px;
}

.footer-academy-brand img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.footer-academy-brand span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.footer-academy-brand strong {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.footer-academy-brand small {
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 600;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.footer-brand .brand-mark {
    background: rgba(255, 255, 255, .1);
}

.footer-brand .brand-name {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.footer-brand .brand-tag {
    color: var(--gold);
    font-size: 10.5px;
}

.site-footer p {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 18px;
}

.site-footer h4 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 11px;
}

.site-footer h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 32px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
}

.footer-links li {
    margin-bottom: 11px;
}

.footer-links a {
    color: #a9bcd0;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-links a::before {
    content: '\ea6e';
    font-family: 'remixicon';
    font-size: 14px;
    color: var(--gold);
    opacity: .6;
}

html[dir="rtl"] .footer-links a::before {
    content: '\ea64';
}

.footer-links a:hover {
    color: var(--gold-light);
}

.footer-contact li {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.65;
}

.footer-contact i {
    color: var(--gold);
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 3px;
}

.footer-contact a {
    color: #a9bcd0;
}

.footer-contact a:hover {
    color: var(--gold-light);
}

.newsletter-form {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.newsletter-form .input {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 14px;
}

.newsletter-form .input::placeholder {
    color: #7f93a9;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .08);
    color: #c6d5e4;
    font-size: 18px;
}

.footer-social a:hover {
    background: var(--gold);
    color: #fff;
    transform: translateY(-3px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 13.2px;
}

.footer-bottom a {
    color: #a9bcd0;
}

.footer-bottom a:hover {
    color: var(--gold-light);
}

.footer-legal {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* ── Scroll to top ──────────────────────────────────────────────────────── */
.scroll-top {
    position: fixed;
    inset-inline-end: 24px;
    bottom: 24px;
    z-index: 900;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    background: var(--navy);
    color: #fff;
    font-size: 21px;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: all .3s;
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top:hover {
    background: var(--gold);
}

/* ── Reveal animation ───────────────────────────────────────────────────── */
/* Scoped to .js so that if the script never runs the content simply shows,
   rather than being hidden with no way to reveal it. */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .65s ease, transform .65s ease;
}

html.js [data-reveal].revealed {
    opacity: 1;
    transform: none;
}

/* ── Filter bar (training / news listings) ──────────────────────────────── */
.filter-bar {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 34px;
    box-shadow: var(--shadow-sm);
}

.filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 13px;
    align-items: end;
}

.filter-grid .field {
    margin-bottom: 0;
}

/* ── Tabs (faculty specialisations) ─────────────────────────────────────── */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 30px;
}

.tab-btn {
    padding: 11px 21px;
    border-radius: 100px;
    border: 1.5px solid var(--line);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--body);
    cursor: pointer;
    transition: all .25s;
}

.tab-btn:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.tab-btn.active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: fadeUp .4s ease;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Accordion (FAQ) ────────────────────────────────────────────────────── */
.accordion-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 13px;
    overflow: hidden;
    background: #fff;
}

.accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 23px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
    text-align: start;
}

.accordion-btn i {
    color: var(--gold-dark);
    font-size: 21px;
    transition: transform .28s;
    flex-shrink: 0;
}

.accordion-btn.open i {
    transform: rotate(45deg);
}

.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .32s ease;
}

.accordion-panel .inner {
    padding: 0 23px 21px;
    font-size: 14.5px;
    line-height: 1.85;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {

    /* Tighten the navigation row before it wraps. */
    .nav-link {
        padding: 0 11px;
        font-size: 13.6px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .president-grid {
        grid-template-columns: 260px 1fr;
        gap: 34px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px;
    }

    .footer-academy {
        grid-column: 1 / -1;
    }

    .footer-academy-brand {
        max-width: 320px;
    }

    .footer-academy .footer-links {
        columns: 2;
        column-gap: 34px;
    }

    .footer-academy .footer-links li {
        break-inside: avoid;
    }

    .filter-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {

    /* The navigation row is replaced by the drawer, so it no longer
       contributes to the header height. */
    :root {
        --navbar-h: 0px;
        --brandbar-h: 72px;
    }

    .nav-bar {
        display: none;
    }

    .nav-toggle {
        display: grid;
    }

    .topbar-contact a:not(:first-child) {
        display: none;
    }

    .brand-logo {
        height: 46px;
    }

    .brand-mark {
        width: 44px;
        height: 44px;
        font-size: 14px;
    }

    .brand-text .brand-name {
        font-size: 16px;
    }

    .header-actions .btn-outline {
        display: none;
    }
}

@media (max-width: 700px) {
    :root {
        --topbar-h: 0px;
    }

    .topbar {
        display: none;
    }

    .hero {
        min-height: auto;
        padding: 54px 0;
    }

    .header-actions .btn {
        display: none;
    }

    .hero-pillars {
        grid-template-columns: 1fr;
    }

    .president-grid {
        grid-template-columns: 1fr;
    }

    .president-photo {
        max-width: 260px;
        margin: 0 auto 32px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .verify-box {
        padding: 34px 22px;
    }

    .verify-form {
        flex-direction: column;
    }

    .cta-inner {
        flex-direction: column;
        text-align: center;
    }

    .filter-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .stat-value {
        font-size: 33px;
    }
}

/* ==========================================================================
   Horizontal slider
   Built on native overflow scrolling with scroll snapping, so touch swipe and
   keyboard scrolling work without any extra code; the arrows just nudge the
   same scroller. Logical properties keep it correct in RTL.
   ========================================================================== */

.slider {
    position: relative;
}

.slider-track {
    display: flex;
    gap: 26px;
    align-items: stretch;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 2px 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.slider-item {
    flex: 0 0 calc((100% - 52px) / 3);
    scroll-snap-align: start;
}

/* Dragging: show the grab cursor and stop text selection mid-drag. */
.slider-track {
    cursor: grab;
}

.slider.dragging .slider-track {
    cursor: grabbing;
    user-select: none;
}

.slider.dragging .slider-item {
    pointer-events: none;
}

/* Arrows sit just outside the track on wide screens and overlap it when the
   viewport is too narrow for the gutters. */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy);
    font-size: 24px;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow);
    transition: all .22s;
}

.slider-nav:hover:not(:disabled) {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.slider-nav:disabled {
    opacity: .35;
    cursor: default;
}

.slider-nav.prev {
    inset-inline-start: -23px;
}

.slider-nav.next {
    inset-inline-end: -23px;
}

html[dir="rtl"] .slider-nav i {
    transform: scaleX(-1);
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.slider-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--line);
    cursor: pointer;
    transition: all .25s;
}

.slider-dot:hover {
    background: var(--muted);
}

.slider-dot.active {
    background: var(--gold);
    width: 26px;
    border-radius: 5px;
}

@media (max-width: 1024px) {
    .slider-item {
        flex-basis: calc((100% - 26px) / 2);
    }

    .slider-nav.prev {
        inset-inline-start: 4px;
    }

    .slider-nav.next {
        inset-inline-end: 4px;
    }
}

@media (max-width: 700px) {
    .slider-item {
        flex-basis: 100%;
    }

    .slider-track {
        gap: 16px;
    }
}

/* ── Location maps ──────────────────────────────────────────────────────── */
.map-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--navy-50);
    overflow: hidden;
}

.map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-frame> :not(iframe) {
    width: 100%;
    height: 100%;
}

@media (max-width: 700px) {
    .map-frame {
        aspect-ratio: 4 / 3;
    }
}

/* Footer brand mark: the real logo when one is uploaded. */
.footer-logo {
    height: 58px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* ==========================================================================
   Team cards — portrait-led
   ========================================================================== */

.team-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--navy-100);
}

.team-photo {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
}

/* The stored portraits are already cropped to head-and-shoulders, so they are
   centred rather than biased upward. */
.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s;
}

.team-card:hover .team-photo img {
    transform: scale(1.05);
}

.team-initials {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: clamp(38px, 5vw, 52px);
    font-weight: 800;
    color: rgba(255, 255, 255, .9);
    letter-spacing: .04em;
}

.team-flag {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    background: rgba(255, 255, 255, .94);
    color: var(--navy);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    padding: 5px 11px;
    border-radius: 100px;
    box-shadow: var(--shadow-sm);
}

.team-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    border-top: 3px solid var(--gold);
}

.team-name {
    font-size: 16.5px;
    margin-bottom: 5px;
    line-height: 1.35;
}

.team-role {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gold-dark);
    margin-bottom: 12px;
}

/* Pushed to the bottom so the links line up across a row of cards. */
.team-meta {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}

.team-meta span {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.8px;
    color: var(--muted);
    line-height: 1.5;
}

.team-meta i {
    color: var(--navy);
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}

.team-links {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.team-links a {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--navy-50);
    color: var(--navy);
    display: grid;
    place-items: center;
    font-size: 17px;
    transition: all .2s;
}

.team-links a:hover {
    background: var(--navy);
    color: #fff;
}

/* ==========================================================================
   Course / diploma detail page
   ========================================================================== */

.course-hero-image {
    width: 100%;
    aspect-ratio: 16/8;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.course-title-alt {
    font-size: 19px;
    font-weight: 700;
    color: var(--gold-dark);
}

.course-block {
    margin-bottom: 34px;
}

.course-block>h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--line);
}

.course-block>h3 i {
    color: var(--gold-dark);
    font-size: 21px;
}

/* Side-by-side English and Arabic. Each side keeps its own direction, so the
   two never fight over alignment. */
.bilingual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.bilingual-side {
    position: relative;
    padding: 18px 18px 18px 18px;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 14.6px;
    line-height: 1.85;
}

.bilingual-side> :last-child {
    margin-bottom: 0;
}

.lang-chip {
    position: absolute;
    inset-block-start: -10px;
    inset-inline-start: 14px;
    background: var(--navy);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 3px 9px;
    border-radius: 100px;
}

.lang-chip.ar {
    background: var(--gold-dark);
    letter-spacing: 0;
}

.sub-label {
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 14px 0 4px;
}

html[dir="rtl"] .sub-label {
    letter-spacing: 0;
}

.bilingual-side .sub-label:first-of-type {
    margin-top: 4px;
}

.tick-list {
    margin: 0;
}

.tick-list li {
    position: relative;
    padding-inline-start: 26px;
    margin-bottom: 8px;
}

.tick-list li::before {
    content: '\eb7b';
    font-family: 'remixicon';
    position: absolute;
    inset-inline-start: 0;
    color: var(--success);
    font-size: 16px;
    line-height: 1.7;
}

.step-list {
    counter-reset: step;
    margin: 0;
}

.step-list li {
    position: relative;
    padding-inline-start: 34px;
    margin-bottom: 10px;
    counter-increment: step;
}

.step-list li::before {
    content: counter(step);
    position: absolute;
    inset-inline-start: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--navy-50);
    color: var(--navy);
    font-size: 12px;
    font-weight: 800;
    display: grid;
    place-items: center;
}

.fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.fact {
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}

.fact dt {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}

html[dir="rtl"] .fact dt {
    letter-spacing: 0;
}

.fact dd {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

/* ── Certificate & CPD ──────────────────────────────────────────────────── */
.cert-card {
    display: flex;
    gap: 18px;
    padding: 22px;
    background: var(--gold-50);
    border: 1px solid rgba(216, 36, 42, .3);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.cert-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    flex-shrink: 0;
    background: var(--gold);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 27px;
}

.cert-card h4 {
    font-size: 16.5px;
}

.cert-points {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.cert-points li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
}

.cert-points i {
    color: var(--gold-dark);
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 1px;
}

.cpd-status {
    padding: 18px 20px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
}

.cpd-status.is-accredited {
    border-color: rgba(15, 157, 88, .35);
    background: #f2fbf6;
}

.cpd-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cpd-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--success);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    padding: 6px 13px;
    border-radius: 100px;
}

.cpd-status p {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 8px;
}

.cpd-provider {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--muted);
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px dashed var(--line);
}

.cpd-provider i {
    color: var(--navy);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.cert-note {
    font-size: 12.8px;
    color: var(--muted);
    line-height: 1.75;
    margin-top: 12px;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.course-aside {
    position: sticky;
    top: calc(var(--header-h) + 20px);
}

.course-price-lead {
    font-size: 30px;
    font-weight: 800;
    color: var(--navy);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.course-price-lead small {
    display: block;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 2px;
}

.aside-facts {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.aside-facts span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.aside-facts i {
    color: var(--gold-dark);
    font-size: 18px;
}

/* Bilingual button label: English on top, Arabic beneath. */
.cta-bi {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
}

.cta-bi span:last-child {
    font-size: 12px;
    opacity: .82;
    font-weight: 600;
}

@media (max-width: 1000px) {
    .bilingual {
        grid-template-columns: 1fr;
    }

    .course-aside {
        position: static;
    }
}

/* ==========================================================================
   CPD register entry — mirrors the layout of the public register card
   ========================================================================== */

.cpd-register-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    box-shadow: var(--shadow);
}

.cpd-register-seal {
    flex-shrink: 0;
}

.cpd-register-seal img {
    width: 132px;
    height: 132px;
    object-fit: contain;
}

.cpd-register-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.cpd-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 15px;
    border-radius: 100px;
}

.cpd-tag.provider {
    background: var(--success);
    color: #fff;
}

.cpd-tag.link {
    background: var(--navy-50);
    color: var(--navy);
}

.cpd-tag.link:hover {
    background: var(--navy-100);
    color: var(--navy);
}

.cpd-register-name {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: clamp(22px, 3vw, 32px);
    margin-bottom: 14px;
    letter-spacing: -.01em;
}

.cpd-register-name i {
    color: var(--success);
    font-size: 26px;
}

.cpd-register-facts {
    display: grid;
    gap: 8px;
}

.cpd-register-facts li {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 15px;
    color: var(--body);
}

.cpd-register-facts i {
    color: var(--success);
    font-size: 18px;
}

.cpd-register-facts strong {
    color: var(--success);
    font-weight: 700;
}

.cpd-register-action {
    flex-shrink: 0;
}

.cpd-register-note {
    max-width: 860px;
    margin: 22px auto 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
}

@media (max-width: 900px) {
    .cpd-register-card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 22px;
        padding: 28px 22px;
    }

    .cpd-register-seal {
        margin-inline: auto;
    }

    .cpd-register-seal img {
        width: 108px;
        height: 108px;
    }

    .cpd-register-tags,
    .cpd-register-name {
        justify-content: center;
    }

    .cpd-register-facts li {
        justify-content: center;
    }

    .cpd-register-action .btn {
        width: 100%;
    }
}

/* CPD provider link in the contact strip */
.cpd-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 100px;
    background: rgba(15, 157, 88, .18);
    border: 1px solid rgba(15, 157, 88, .45);
    color: #7ce0aa;
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
}

.cpd-topbar-link:hover {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.cpd-topbar-link i {
    font-size: 14px;
}

@media (max-width: 1150px) {
    .cpd-topbar-link span {
        display: none;
    }
}

/* ── Future Makers Academy entry point ──────────────────────────────────── */
.btn-academy {
    background: linear-gradient(120deg, var(--gold) 0%, #f0534f 55%, #f5a524 100%);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 9px 20px;
    gap: 10px;
    box-shadow: 0 8px 22px rgba(216, 36, 42, .34);
    position: relative;
    overflow: hidden;
}

.btn-academy:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(216, 36, 42, .45);
}

/* A slow sheen so the entry reads as the special one without shouting. */
.btn-academy::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    animation: academy-sheen 4.5s ease-in-out infinite;
}

@keyframes academy-sheen {

    0%,
    62% {
        inset-inline-start: -60%;
    }

    100% {
        inset-inline-start: 130%;
    }
}

.btn-academy i {
    font-size: 19px;
    position: relative;
    z-index: 2;
}

.academy-btn-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    position: relative;
    z-index: 2;
    text-align: start;
}

.academy-btn-text small {
    font-size: 10.5px;
    opacity: .9;
    font-weight: 600;
}

.mobile-academy {
    background: linear-gradient(120deg, var(--gold), #f5a524);
    color: #fff !important;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.mobile-academy small {
    opacity: .9;
    font-size: 11.5px;
}

@media (max-width: 1150px) {
    .academy-btn-text small {
        display: none;
    }
}

@media (max-width: 900px) {
    .btn-academy .academy-btn-text {
        display: none;
    }

    .btn-academy {
        padding: 9px 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-academy::after {
        animation: none;
        display: none;
    }
}

/* ==========================================================================
   Motion
   Entrances are staggered by position rather than fired all at once, so a
   section resolves as a sequence instead of a jolt. Everything here is
   decoration and is removed wholesale under prefers-reduced-motion.
   ========================================================================== */

html.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}

html.js [data-reveal].revealed {
    opacity: 1;
    transform: none;
}

/* Cards inside a grid follow each other in rather than arriving together. */
html.js .grid>[data-reveal]:nth-child(2) {
    transition-delay: .06s;
}

html.js .grid>[data-reveal]:nth-child(3) {
    transition-delay: .12s;
}

html.js .grid>[data-reveal]:nth-child(4) {
    transition-delay: .18s;
}

html.js .grid>[data-reveal]:nth-child(5) {
    transition-delay: .24s;
}

html.js .grid>[data-reveal]:nth-child(6) {
    transition-delay: .30s;
}

html.js .grid>[data-reveal]:nth-child(7) {
    transition-delay: .36s;
}

html.js .grid>[data-reveal]:nth-child(8) {
    transition-delay: .42s;
}

/* Interactive lift, shared by the card families. */
.card-hover,
.feature-card,
.partner-item,
.panel-tile,
.track-card,
.team-card,
.age-card,
.prog-card {
    will-change: transform;
}

/* Buttons settle rather than snap. */
.btn {
    transition: background .25s, color .25s, border-color .25s, transform .2s cubic-bezier(.2, .8, .3, 1.3), box-shadow .25s;
}

.btn:active {
    transform: translateY(1px) scale(.99);
}

/* Links in body copy grow their underline from the start edge. */
.prose a,
.footer-links a,
.card-link {
    position: relative;
}

/* Section headings rise slightly ahead of their content. */
html.js .section-head[data-reveal] {
    transition-duration: .8s;
}

/* The stat counters pulse once when they arrive. */
html.js .stat-item[data-reveal].revealed .stat-value {
    animation: stat-pop .6s cubic-bezier(.2, .9, .3, 1.4) both;
}

@keyframes stat-pop {
    from {
        transform: scale(.82);
        opacity: .4;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.js [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    html.js .grid>[data-reveal] {
        transition-delay: 0s !important;
    }

    html.js .stat-item[data-reveal].revealed .stat-value {
        animation: none !important;
    }

    .btn:active {
        transform: none;
    }
}

/* ── Trust groups, notice and payments ──────────────────────────────────── */
/* Registrations are grouped under headings that name the relationship, so a
   logo is never shown alone as though it accredited the College. */
.trust-group {
    margin-bottom: 40px;
}

.trust-group:last-of-type {
    margin-bottom: 26px;
}

.trust-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 6px;
}

.trust-group-title i {
    color: var(--gold);
    font-size: 20px;
}

.trust-group-note {
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 16px;
    max-width: 780px;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.trust-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    transition: border-color .25s, box-shadow .25s;
}

.trust-item:hover {
    border-color: var(--gold);
    box-shadow: 0 10px 26px rgba(12, 31, 51, .07);
}

.trust-item-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 9px;
}

.trust-item-head img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.trust-item-head i {
    font-size: 22px;
    color: var(--navy-light);
    flex-shrink: 0;
}

.trust-item-head strong {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.4;
}

.trust-item p {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--body);
    margin: 0;
}

.trust-item-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gold-dark);
}

.trust-item-link:hover {
    text-decoration: underline;
}

.pay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.pay-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    text-align: center;
}

.pay-item i {
    font-size: 30px;
    color: var(--gold);
    display: block;
    margin-bottom: 10px;
}

.pay-item strong {
    display: block;
    font-size: 15.5px;
    color: var(--navy);
    margin-bottom: 5px;
}

.pay-item p {
    font-size: 13px;
    color: var(--body);
    margin: 0;
}

.pay-cta {
    text-align: center;
    margin-top: 28px;
}

.pay-powered {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--muted);
}

@media (max-width: 640px) {

    .trust-grid,
    .pay-grid {
        grid-template-columns: 1fr;
    }
}

/* Item 14: registration facts must not be read as accreditation. */
.presence-note {
    max-width: 780px;
    margin: 22px auto 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.75;
    color: var(--muted);
}

/* ── Legalisation page ──────────────────────────────────────────────────── */
.legal-intro {
    max-width: 860px;
    margin: 0 auto 44px;
}

.legal-intro p {
    font-size: 16px;
    line-height: 1.95;
    color: var(--body);
}

.legal-steps {
    list-style: none;
    counter-reset: none;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
}

.legal-step {
    display: flex;
    gap: 18px;
    padding-bottom: 26px;
    position: relative;
}

/* Connector between consecutive steps; each certifies the one before it. */
.legal-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 46px;
    bottom: 4px;
    inset-inline-start: 21px;
    width: 2px;
    background: var(--line);
}

.legal-step-no {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 16px;
    position: relative;
    z-index: 1;
}

.legal-step-body {
    padding-top: 3px;
}

.legal-step-body h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 16.5px;
    color: var(--navy);
    margin-bottom: 7px;
}

.legal-step-body h3 i {
    color: var(--gold);
    font-size: 19px;
}

.legal-step-en {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}

.legal-step-body p {
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--body);
    margin: 0;
}

.legal-warning {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    max-width: 900px;
    margin: 34px auto 0;
    padding: 20px 22px;
    background: var(--gold-50);
    border: 1px solid rgba(216, 36, 42, .22);
    border-inline-start: 4px solid var(--gold);
    border-radius: var(--radius);
}

.legal-warning.subtle {
    background: var(--navy-50);
    border-color: var(--navy-100);
    border-inline-start-color: var(--navy-light);
}

.legal-warning>i {
    font-size: 21px;
    color: var(--gold-dark);
    flex-shrink: 0;
    margin-top: 1px;
}

.legal-warning.subtle>i {
    color: var(--navy-light);
}

.legal-warning p {
    font-size: 13.8px;
    line-height: 1.85;
    color: var(--body);
    margin: 0;
}

.sample-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sample-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 100px;
    margin-bottom: 14px;
    background: var(--navy-50);
    color: var(--navy);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sample-card h3 {
    font-size: 16px;
    color: var(--navy);
    margin-bottom: 9px;
}

.sample-card p {
    font-size: 13.8px;
    line-height: 1.8;
    color: var(--body);
    flex: 1;
    margin-bottom: 14px;
}

.sample-pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
}

@media (max-width: 640px) {
    .legal-step {
        gap: 13px;
    }

    .legal-step-no {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .legal-step:not(:last-child)::before {
        inset-inline-start: 18px;
    }
}

/* Fee payment page */
.pay-page {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.pay-page h2 {
    font-size: 26px;
    color: var(--navy);
    margin-bottom: 12px;
}

.pay-page>p {
    font-size: 15.5px;
    line-height: 1.9;
    color: var(--body);
    margin-bottom: 26px;
}

.pay-steps {
    text-align: start;
    max-width: 520px;
    margin: 0 auto 30px;
    padding-inline-start: 22px;
    color: var(--body);
}

.pay-steps li {
    font-size: 14.5px;
    line-height: 1.9;
    margin-bottom: 7px;
}

.pay-page .legal-warning {
    margin-top: 34px;
    text-align: start;
}

/* Registrations list (About page) */
.reg-list {
    list-style: none;
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
}

.reg-row {
    display: flex;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.reg-row:last-child {
    border-bottom: 0;
}

.reg-row>i {
    font-size: 21px;
    color: var(--gold);
    flex-shrink: 0;
    margin-top: 3px;
}

.reg-row p {
    font-size: 14.8px;
    line-height: 1.85;
    color: var(--body);
    margin: 0 0 7px;
}

.reg-ref {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 8px;
    background: var(--navy-50);
    color: var(--navy);
    font-size: 12.5px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, monospace;
}

.reg-verify {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gold-dark);
}

.reg-verify:hover {
    text-decoration: underline;
}

/* ── Academy join application ───────────────────────────────────────────── */
.apply-wrap {
    max-width: 860px;
    margin: 0 auto;
}

.apply-intro {
    margin-bottom: 26px;
}

.apply-intro h2 {
    font-size: 22px;
    color: var(--navy);
    margin-bottom: 12px;
}

.apply-steps {
    padding-inline-start: 22px;
    color: var(--body);
}

.apply-steps li {
    font-size: 14.5px;
    line-height: 1.9;
    margin-bottom: 5px;
}

.apply-legend {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    color: var(--navy);
    margin: 0 0 6px;
}

.apply-legend i {
    color: var(--gold);
    font-size: 19px;
}

.apply-note {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 14px;
}

.consent-row {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    cursor: pointer;
    padding: 13px 15px;
    margin-bottom: 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 13.8px;
    line-height: 1.7;
    color: var(--body);
}

.consent-row input {
    margin-top: 3px;
    flex-shrink: 0;
}

.consent-row:has(input:checked) {
    border-color: var(--gold);
    background: var(--gold-50);
}

.consent-row.is-invalid {
    border-color: var(--gold-dark);
}
/* ── The partnership band on the home page ───────────────────────────────
   Two crests joined, so the arrangement reads at a glance rather than
   having to be spelled out. */
.partner-band {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 34px 28px; text-align: center;
    box-shadow: 0 6px 24px rgba(12, 31, 51, .05);
}
.partner-band-crests {
    display: flex; align-items: center; justify-content: center;
    gap: 26px; flex-wrap: wrap;
}
.partner-band-crests img { height: 92px; width: auto; object-fit: contain; }

.partner-band-join {
    display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--navy-50); color: var(--gold-dark); font-size: 22px;
    flex-shrink: 0;
}

.partner-band-names {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap; margin-top: 20px;
    font-size: 15px; color: var(--navy);
}
.partner-band-names span { color: var(--muted); font-size: 13.5px; }

@media (max-width: 600px) {
    .partner-band-crests img { height: 68px; }
    .partner-band-crests { gap: 16px; }
}