/*!
 * مدارس النبلاء الأهلية — Production CSS
 * Generated from: /style.css + /assets/css/nobala-theme.css
 * Do not edit this generated file directly. Run: php deploy/build-css.php
 */

/* ===== Base layout & components ===== */

:root {
    --brand-navy: #0b2d5c;
    --brand-blue: #1988d8;
    --brand-cyan: #42d9f4;
    --brand-green: #38d67a;
    --brand-orange: #ff8a00;
    --brand-purple: #0d1932;
    --brand-light: #f5f9ff;
    --brand-slate: #5f6b7a;
    --brand-ink: #0f172a;
    --white: #ffffff;
    --bg-soft: #f8fbff;
    --bg-muted: #eef5ff;
    --border-soft: #e5edf7;
    --shadow-soft: 0 20px 60px rgba(11, 45, 92, 0.12);
    --shadow-card: 0 14px 30px rgba(15, 23, 42, 0.08);
    --shadow-glow: 0 18px 48px rgba(25, 136, 216, 0.18);
    --radius-sm: 1rem;
    --radius-md: 1.5rem;
    --radius-lg: 2rem;
    --radius-xl: 2.4rem;
    --container: 1240px;
    --transition: 0.32s ease;
    --brand-cursor-default: url('../images/brand-cursor-40.png') 20 20, auto;
    --brand-cursor-pointer: url('../images/brand-cursor-40.png') 20 20, pointer;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Cairo', sans-serif;
    background: var(--bg-soft);
    color: var(--brand-ink);
    overflow-x: hidden;
    line-height: 1.75;
    font-size: 16px;
}

body.menu-open { overflow: hidden; }

body.is-loading {
    overflow: hidden;
}

.site-loader {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(7, 24, 51, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.site-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-loader__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(201, 169, 78, 0.15), transparent 24%),
        radial-gradient(circle at 82% 14%, rgba(255, 138, 0, 0.16), transparent 24%),
        radial-gradient(circle at 76% 76%, rgba(56, 214, 122, 0.12), transparent 22%),
        linear-gradient(135deg, rgba(8, 31, 68, 0.92), rgba(11, 45, 92, 0.86), rgba(25, 136, 216, 0.74));
}

.site-loader__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 360px);
    padding: 2rem 1.5rem 1.65rem;
    border-radius: 2rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 20px 60px rgba(6, 24, 48, 0.25);
}

.site-loader__logo-wrap {
    position: relative;
    width: 108px;
    height: 108px;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
}

.site-loader__logo {
    position: relative;
    z-index: 1;
    width: 78px;
    height: 78px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(9, 34, 66, 0.2));
    animation: loaderFloat 2.8s ease-in-out infinite;
}

.site-loader__ring,
.site-loader__logo-wrap::before,
.site-loader__logo-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.site-loader__logo-wrap::before {
    background: radial-gradient(circle, rgba(255,255,255,0.26), rgba(255,255,255,0.04) 58%, transparent 70%);
    filter: blur(8px);
}

.site-loader__logo-wrap::after {
    inset: 7px;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.site-loader__ring {
    inset: -10px;
    border: 1px dashed rgba(255,255,255,0.4);
    animation: spinSlow 8s linear infinite;
}

.site-loader__title {
    display: block;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
}

.site-loader__text {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.site-loader__line {
    display: block;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    overflow: hidden;
    position: relative;
}

.site-loader__line::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan), var(--brand-green), var(--brand-orange), var(--brand-purple));
    animation: loaderSweep 1.25s ease-in-out infinite;
}



@media (pointer: fine) {
    body {
        cursor: var(--brand-cursor-default);
    }

    a,
    button,
    .btn,
    input,
    select,
    textarea,
    label,
    summary,
    [role="button"],
    [data-tab-target],
    .card,
    .facility-card,
    .news-card,
    .store-card,
    .gallery-card,
    .social-link {
        cursor: var(--brand-cursor-pointer);
    }
}



img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

input,
select,
textarea,
button {
    border: 0;
    outline: 0;
}

.container {
    width: min(var(--container), calc(100% - 28px));
    margin-inline: auto;
}

.section {
    position: relative;
    padding: 92px 0;
}

.section-white { background: var(--white); }
.section-soft { background: var(--bg-soft); }
.section-muted { background: #f3f7fd; }

.section-grid {
    background-image:
        linear-gradient(rgba(25, 136, 216, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 136, 216, 0.05) 1px, transparent 1px);
    background-size: 26px 26px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.badge-light {
    background: var(--brand-light);
    color: var(--brand-blue);
}

.badge-white {
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
}

.title {
    color: var(--brand-navy);
    font-size: clamp(1.95rem, 2.9vw, 3.15rem);
    line-height: 1.2;
    font-weight: 900;
    margin: 1rem 0;
}

.lead,
.section-text {
    color: var(--brand-slate);
    font-size: clamp(1rem, 1.2vw, 1.08rem);
    line-height: 1.95;
}

.text-center { text-align: center; }
.centered { margin-inline: auto; }

.btn-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.95rem;
}

.btn-row.centered {
    justify-content: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 54px;
    padding: 0.88rem 1.45rem;
    border-radius: 1.1rem;
    font-weight: 800;
    font-size: 0.98rem;
    transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    inset-inline-end: -12px;
    top: 50%;
    transform: translateY(-50%) rotate(-18deg) scale(0.65);
    opacity: 0;
    background: center / contain no-repeat url('../images/brand-logo.png');
    transition: transform 0.32s ease, opacity 0.32s ease, inset-inline-end 0.32s ease;
    filter: drop-shadow(0 4px 10px rgba(11,45,92,0.18));
    z-index: -1;
}

.btn:hover::before,
.btn:focus-visible::before {
    inset-inline-end: 10px;
    opacity: 0.16;
    transform: translateY(-50%) rotate(0deg) scale(1);
}

.btn:hover { transform: translateY(-2px); }

.btn-dark {
    background: var(--brand-navy);
    color: var(--white);
    box-shadow: var(--shadow-card);
}

.btn-dark:hover { background: #08264d; }

.btn-light {
    background: var(--white);
    color: var(--brand-navy);
    box-shadow: var(--shadow-card);
}

.btn-outline {
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
}

.btn-outline:hover { background: rgba(255, 255, 255, 0.14); }

.btn-soft {
    background: #edf5ff;
    color: var(--brand-navy);
}

.btn-soft:hover { background: #dcecff; }

.btn-neon {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    color: var(--white);
    box-shadow: 0 0 0 rgba(25, 136, 216, 0), 0 16px 34px rgba(25, 136, 216, 0.2);
}

.btn-neon:hover {
    box-shadow: 0 0 24px rgba(66, 217, 244, 0.45), 0 0 40px rgba(201, 169, 78, 0.26), 0 16px 34px rgba(25, 136, 216, 0.24);
}

.logo-gradient,
.text-gradient {
    background: linear-gradient(130deg, var(--brand-blue) 0%, var(--brand-cyan) 22%, var(--brand-green) 46%, var(--brand-orange) 70%, var(--brand-purple) 100%);
    background-size: 220% 220%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradientMove 8s ease infinite;
    position: relative;
}

.logo-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.75) 48%, transparent 70%);
    transform: translateX(-160%);
    animation: textShine 5.6s ease-in-out infinite;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    pointer-events: none;
}

.glass {
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.topbar {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 1000;
    padding-top: 14px;
}

.nav-wrap {
    width: min(var(--container), calc(100% - 28px));
    margin-inline: auto;
    padding: 0.95rem 1rem;
    border-radius: 1.85rem;
    transition: var(--transition);
}

.nav-wrap.scrolled {
    box-shadow: 0 14px 45px rgba(11, 45, 92, 0.14);
    background: rgba(255, 255, 255, 0.86);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.brand img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: rgba(255,255,255,0.94);
    border-radius: 1.15rem;
    padding: 0.35rem;
    box-shadow: var(--shadow-card);
    flex-shrink: 0;
}

.brand-text { min-width: 0; }

.brand-text .brand-title {
    font-size: 1rem;
    line-height: 1.25;
    color: var(--brand-navy);
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-text p {
    font-size: 0.78rem;
    color: var(--brand-slate);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.65rem;
}

.nav-links a {
    color: var(--brand-navy);
    font-weight: 800;
    font-size: 0.98rem;
    position: relative;
    transition: color var(--transition);
}

.nav-links a::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: -8px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-green), var(--brand-orange), var(--brand-purple));
    transition: width var(--transition);
}

.nav-links a:hover,
.nav-links a.active,
.nav-links a.current-page {
    color: var(--brand-blue);
}

.nav-links a:hover::after,
.nav-links a.active::after,
.nav-links a.current-page::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.nav-cart-link {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-navy);
    color: var(--white);
    box-shadow: 0 12px 28px rgba(11,45,92,0.2);
    transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.nav-cart-link:hover {
    transform: translateY(-2px);
    background: var(--brand-blue);
    box-shadow: 0 18px 34px rgba(25,136,216,0.22);
}

.nav-cart-link span {
    position: absolute;
    top: -0.35rem;
    inset-inline-end: -0.35rem;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-orange);
    color: var(--white);
    border: 2px solid var(--white);
    font-size: 0.72rem;
    font-weight: 900;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
}

.lang-btn {
    width: 40px;
    min-width: 40px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(11, 45, 92, 0.14);
    background: rgba(255, 255, 255, 0.82);
    color: var(--brand-navy);
    font-weight: 900;
    transition: var(--transition);
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    position: relative;
}

.lang-btn.active,
.lang-btn:hover {
    background: rgba(25, 136, 216, 0.08);
    border-color: rgba(25, 136, 216, 0.24);
    color: var(--brand-navy);
}

.lang-toggle-flag {
    box-shadow: 0 8px 20px rgba(11, 45, 92, 0.08);
}

.lang-code {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    color: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1), color var(--transition);
}

.lang-code-ar {
    display: none;
    font-family: 'Cairo', 'Tajawal', Arial, sans-serif;
    font-size: 1rem;
}

html[lang="en"] .lang-code-en {
    display: none;
}

html[lang="en"] .lang-code-ar {
    display: grid;
}

.lang-toggle-flag:hover .lang-code,
.lang-toggle-flag:focus-visible .lang-code {
    transform: translateY(-1px) scale(1.04);
    color: var(--brand-blue);
}

.menu-toggle {
    display: none;
    width: 52px;
    height: 52px;
    border-radius: 1rem;
    background: var(--brand-navy);
    color: var(--white);
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-card);
}

.menu-toggle svg {
    width: 24px;
    height: 24px;
}

.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
}

.mobile-menu.open { max-height: 520px; }

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 1rem;
}

.mobile-menu a {
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    color: var(--brand-navy);
    font-weight: 800;
    background: rgba(255,255,255,0.52);
    transition: var(--transition);
}

.mobile-menu a:hover,
.mobile-menu a.active {
    background: #edf5ff;
    color: var(--brand-blue);
}

.mobile-cta {
    margin-top: 0.4rem;
    background: var(--brand-navy) !important;
    color: var(--white) !important;
}

.hero {
    position: relative;
    min-height: 100vh;
    padding: 156px 0 70px;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 18%, rgba(201, 169, 78, 0.16), transparent 18%),
        radial-gradient(circle at 82% 12%, rgba(255, 138, 0, 0.15), transparent 20%),
        radial-gradient(circle at 85% 70%, rgba(56, 214, 122, 0.18), transparent 20%),
        radial-gradient(circle at 14% 80%, rgba(66, 217, 244, 0.14), transparent 20%),
        linear-gradient(135deg, #081f44 0%, #0b2d5c 32%, #1676cc 100%);
}

.hero-glow,
.hero-glow-two,
.hero-ring,

.hero::after {
    content: '';
    position: absolute;
    width: clamp(220px, 30vw, 440px);
    height: clamp(220px, 30vw, 440px);
    inset-inline-end: clamp(1rem, 6vw, 4rem);
    bottom: clamp(1rem, 6vw, 2.5rem);
    background: center / contain no-repeat url('../images/brand-logo.png');
    opacity: 0.07;
    filter: drop-shadow(0 22px 44px rgba(7, 24, 51, 0.18));
    pointer-events: none;
    z-index: 0;
}

.hero-ring::after {
    content: '';
    position: absolute;
    inset: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    background: center / contain no-repeat url('../images/brand-logo.png');
    opacity: 0.12;
    filter: drop-shadow(0 8px 20px rgba(255,255,255,0.18));
}

.hero-particles {
    position: absolute;
    pointer-events: none;
}

.hero-glow {
    top: -180px;
    inset-inline-end: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    filter: blur(58px);
    animation: pulseSoft 4s ease-in-out infinite;
}

.hero-glow-two {
    bottom: -120px;
    inset-inline-start: -140px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(66, 217, 244, 0.16);
    filter: blur(58px);
    animation: floatSlow 10s ease-in-out infinite;
}

.hero-ring {
    top: 92px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.82) 0deg 2deg, transparent 2deg 8deg);
    -webkit-mask: radial-gradient(circle, transparent 0 32%, #000 32% 58%, transparent 58% 100%);
    mask: radial-gradient(circle, transparent 0 32%, #000 32% 58%, transparent 58% 100%);
    opacity: 0.28;
}

.hero-particles {
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0 2px, transparent 2px),
        radial-gradient(circle at 75% 25%, rgba(255,255,255,0.08) 0 2px, transparent 2px),
        radial-gradient(circle at 30% 75%, rgba(255,255,255,0.08) 0 2px, transparent 2px),
        radial-gradient(circle at 85% 65%, rgba(255,255,255,0.1) 0 2px, transparent 2px);
    opacity: 0.5;
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 2.6rem;
    align-items: center;
}

.hero-content { color: var(--white); }

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 999px;
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.11);
    border: 1px solid rgba(255,255,255,0.15);
    font-weight: 800;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    backdrop-filter: blur(10px);
}

.hero-tag .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-green);
    box-shadow: 0 0 0 8px rgba(56, 214, 122, 0.12);
}

.hero-school-name {
    display: inline-block;
    font-size: 0.98rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: clamp(2.35rem, 5.2vw, 4.6rem);
    line-height: 1.12;
    font-weight: 900;
    margin-bottom: 1.2rem;
}

.hero-title .hero-line {
    display: block;
    color: var(--white);
}

.hero-title .highlight {
    display: block;
    color: #ffd36a;
}

.hero-text {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.9;
    color: rgba(255,255,255,0.85);
    max-width: 720px;
    margin-bottom: 1.65rem;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 0.95rem;
    margin-top: 1.8rem;
}

.hero-stat {
    border-radius: 1.4rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    text-align: center;
    padding: 1.15rem 0.85rem;
    transition: var(--transition);
}

.hero-stat:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.14);
}

.hero-stat strong {
    display: block;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.1;
}

.hero-stat span {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.74);
}

.hero-card {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.1);
    padding: 1rem;
    box-shadow: var(--shadow-glow);
}

.hero-card::before {
    content: '';
    position: absolute;
    inset: -18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
    filter: blur(28px);
    z-index: -1;
}

.hero-card-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 1rem;
}

.hero-main-image {
    min-height: 480px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.hero-main-image:hover img { transform: scale(1.04); }
.hero-side { display: flex; flex-direction: column; gap: 1rem; }

.logo-panel,
.mini-panel,
.mini-stat,
.metric-card,
.feature-card,
.stage-card,
.info-card,
.social-card,
.testimonial,
.form-panel,
.policy-card,
.simple-card,
.map-card,
.contact-card {
    box-shadow: var(--shadow-card);
}

.logo-panel {
    position: relative;
    background: rgba(255,255,255,0.95);
    padding: 1.35rem;
    text-align: center;
    border-radius: var(--radius-lg);
}

.logo-panel::before {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 70%);
    z-index: -1;
    filter: blur(12px);
}

.logo-panel img {
    width: 102px;
    height: 102px;
    object-fit: contain;
    margin-inline: auto;
    animation: float 6s ease-in-out infinite;
}

.logo-panel h3 {
    color: var(--brand-navy);
    font-size: 1.35rem;
    font-weight: 900;
    margin: 0.9rem 0 0.4rem;
}

.logo-panel p {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--brand-slate);
}

.mini-panel {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
    color: var(--white);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
}

.mini-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.mini-panel-head strong { font-size: 1rem; }

.mini-panel-head span {
    font-size: 0.72rem;
    background: rgba(255,255,255,0.18);
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
}

.mini-panel p {
    font-size: 0.88rem;
    line-height: 1.85;
    color: rgba(255,255,255,0.9);
}

.mini-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1rem;
}

.mini-stat {
    background: rgba(255,255,255,0.96);
    padding: 1rem;
    text-align: center;
    border-radius: 1.35rem;
    transition: var(--transition);
}

.mini-stat:hover { transform: translateY(-4px); }

.mini-line {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    margin: 0 auto 0.8rem;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan), var(--brand-green), var(--brand-orange), var(--brand-purple));
}

.mini-stat strong {
    display: block;
    color: var(--brand-navy);
    font-size: 1.4rem;
    font-weight: 900;
}

.mini-stat span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--brand-slate);
}

.mini-stats .mini-stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.marquee {
    background: rgba(255,255,255,0.96);
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
    overflow: hidden;
    padding: 1rem 0;
}

.marquee-track {
    display: inline-flex;
    gap: 1.35rem;
    white-space: nowrap;
    min-width: max-content;
    animation-name: marquee-left;
    animation-duration: var(--marquee-duration, 24s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    color: var(--brand-slate);
    font-weight: 900;
    font-size: 0.92rem;
}

html[data-marquee-dir="right"] .marquee-track {
    animation-name: marquee-right;
}

html[data-marquee-dir="left"] .marquee-track {
    animation-name: marquee-left;
}

.dot-sep { color: var(--brand-blue); }

.section-heading {
    max-width: 820px;
    margin-inline: auto;
    margin-bottom: 3.4rem;
    text-align: center;
}

.section-heading .lead { max-width: 760px; margin-inline: auto; }

.grid-3,
.grid-4,
.feature-grid,
.stage-grid,
.stats-grid,
.policy-grid,
.info-grid,
.social-grid {
    display: grid;
    gap: 1.35rem;
}

.grid-3,
.feature-grid,
.social-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4,
.stage-grid,
.stats-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.policy-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.info-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }

.feature-card,
.stage-card,
.metric-card,
.info-card,
.simple-card,
.policy-card,
.contact-card,
.map-card,
.form-panel,
.social-card,
.testimonial {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 1.55rem;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    overflow: hidden;
}

.feature-card::after,
.contact-card::after,
.policy-card::after,
.simple-card::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(25,136,216,0.18), rgba(66,217,244,0.1), rgba(56,214,122,0.14), rgba(255,138,0,0.09), rgba(201,169,78,0.12));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.feature-card:hover,
.stage-card:hover,
.metric-card:hover,
.info-card:hover,
.simple-card:hover,
.policy-card:hover,
.contact-card:hover,
.map-card:hover,
.social-card:hover,
.testimonial:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft);
}

.icon-box,
.card-icon,
.contact-icon {
    width: 60px;
    height: 60px;
    border-radius: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    box-shadow: var(--shadow-card);
    margin-bottom: 1rem;
}

.icon-box i,
.card-icon i,
.contact-icon i { font-size: 1.4rem; }

.icon-blue { background: var(--brand-blue); }
.icon-green { background: var(--brand-green); }
.icon-orange { background: var(--brand-orange); }
.icon-purple { background: var(--brand-purple); }
.icon-cyan { background: var(--brand-cyan); color: var(--brand-navy); }
.icon-navy { background: var(--brand-navy); }

.feature-card h3,
.simple-card h3,
.contact-card h3,
.policy-card h3 {
    color: var(--brand-navy);
    font-size: 1.35rem;
    font-weight: 900;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.feature-card p,
.simple-card p,
.contact-card p,
.policy-card p,
.metric-card p,
.social-card p,
.testimonial p,
.form-copy p,
.map-card p {
    color: var(--brand-slate);
    line-height: 1.9;
    font-size: 0.96rem;
}

.stage-card {
    border-bottom: 4px solid var(--brand-blue);
    padding-top: 2.15rem;
}

.stage-card.orange { border-color: var(--brand-orange); }
.stage-card.green { border-color: var(--brand-green); }
.stage-card.purple { border-color: var(--brand-purple); }

.stage-number {
    position: absolute;
    top: -18px;
    inset-inline-start: 1.35rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 900;
    box-shadow: var(--shadow-card);
    background: var(--brand-blue);
}

.stage-card.orange .stage-number { background: var(--brand-orange); }
.stage-card.green .stage-number { background: var(--brand-green); }
.stage-card.purple .stage-number { background: var(--brand-purple); }

.stage-card h3 {
    color: var(--brand-navy);
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 0.7rem;
}

.stats-grid .metric-card { text-align: center; }

.metric-card strong {
    display: block;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 0.4rem;
    color: var(--brand-blue);
}

.metric-card.orange strong { color: var(--brand-orange); }
.metric-card.green strong { color: var(--brand-green); }
.metric-card.purple strong { color: var(--brand-purple); }

.testimonial-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 2rem;
    align-items: start;
}

.testimonial-side {
    position: sticky;
    top: calc(var(--header-offset) + 8px);
}

.testimonial-stack { display: grid; gap: 1.2rem; }

.testimonial { background: #eff7ff; }
.testimonial.warm { background: #fff8ea; }

.quote-mark {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    font-size: 2rem;
    color: rgba(25, 136, 216, 0.15);
}

.testimonial-footer {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.2rem;
}

.avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(25,136,216,0.18);
    flex-shrink: 0;
}

.avatar.orange { background: rgba(255,138,0,0.18); }

.testimonial-footer h3 {
    color: var(--brand-navy);
    font-size: 1rem;
    font-weight: 900;
}

.testimonial-footer span {
    display: block;
    font-size: 0.84rem;
    margin-top: 0.15rem;
    color: var(--brand-blue);
}

.full-cta {
    border-radius: var(--radius-xl);
    background: var(--brand-navy);
    color: var(--white);
    text-align: center;
    padding: 3rem 2rem;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.full-cta::before,
.full-cta::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(36px);
    opacity: 0.45;
}

.full-cta::before {
    top: -110px;
    inset-inline-end: -110px;
    width: 260px;
    height: 260px;
    background: rgba(25,136,216,0.35);
}

.full-cta::after {
    bottom: -120px;
    inset-inline-start: -120px;
    width: 260px;
    height: 260px;
    background: rgba(201,169,78,0.28);
}

.full-cta > * { position: relative; z-index: 1; }

.full-cta h2 {
    font-size: clamp(1.95rem, 3vw, 3rem);
    line-height: 1.22;
    font-weight: 900;
    margin-bottom: 1rem;
}

.full-cta p {
    max-width: 820px;
    margin: 0 auto 1.5rem;
    font-size: 1.02rem;
    line-height: 1.95;
    color: rgba(255,255,255,0.82);
}

.split-panel {
    display: grid;
    grid-template-columns: 1.06fr 0.94fr;
    gap: 1.6rem;
    align-items: stretch;
}

.analytics-panel {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-navy), var(--brand-purple));
    border-radius: var(--radius-xl);
    padding: 2rem;
    color: var(--white);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-soft);
}

.analytics-panel::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    top: -120px;
    inset-inline-start: -90px;
    filter: blur(35px);
}

.analytics-panel .lead { color: rgba(255,255,255,0.8); }

.kpi-shell {
    background: var(--white);
    color: var(--brand-navy);
    border-radius: var(--radius-lg);
    padding: 1.35rem;
    box-shadow: var(--shadow-soft);
}

.kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    border-bottom: 1px solid #edf2f7;
    padding-bottom: 0.9rem;
    margin-bottom: 1rem;
}

.kpi-dots { display: flex; gap: 0.35rem; }

.kpi-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.kpi-dots span:nth-child(1) { background: var(--brand-orange); }
.kpi-dots span:nth-child(2) { background: var(--brand-blue); }
.kpi-dots span:nth-child(3) { background: var(--brand-green); }

.progress-list { display: grid; gap: 1rem; }

.progress-item .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    font-weight: 800;
    margin-bottom: 0.45rem;
}

.progress-track {
    height: 10px;
    background: #edf2f7;
    border-radius: 999px;
    overflow: hidden;
}

.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.future-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 1.5rem;
    align-items: center;
}

.timeline-card {
    background: linear-gradient(180deg, #ffffff, #f6fbff);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-soft);
    padding: 1.75rem;
    box-shadow: var(--shadow-soft);
}

.timeline-list {
    display: grid;
    gap: 1rem;
    position: relative;
}

.timeline-list::before {
    content: '';
    position: absolute;
    inset-inline-start: 16px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--brand-blue), var(--brand-cyan), var(--brand-green), var(--brand-orange), var(--brand-purple));
    opacity: 0.3;
}

.timeline-item {
    position: relative;
    padding-inline-start: 3rem;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 1.4rem;
    padding-block: 1rem;
    padding-inline-end: 1rem;
}

.timeline-dot {
    position: absolute;
    inset-inline-start: 0.35rem;
    top: 1rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 900;
}

.timeline-dot.blue { background: var(--brand-blue); }
.timeline-dot.cyan { background: var(--brand-cyan); color: var(--brand-navy); }
.timeline-dot.green { background: var(--brand-green); }
.timeline-dot.orange { background: var(--brand-orange); }
.timeline-dot.purple { background: var(--brand-purple); }

.timeline-item h3 {
    color: var(--brand-navy);
    font-size: 1rem;
    font-weight: 900;
    margin-bottom: 0.3rem;
}

.timeline-item p {
    font-size: 0.9rem;
    color: var(--brand-slate);
    line-height: 1.8;
}

.facilities-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1.2rem;
}

.facility-card {
    position: relative;
    min-height: 400px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.facility-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.facility-card:hover img { transform: scale(1.08); }

.facility-card .overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(11,45,92,0.04) 20%, rgba(11,45,92,0.84) 100%);
}

.facility-card h3 {
    color: var(--white);
    font-size: 1.35rem;
    font-weight: 900;
    margin-bottom: 0.45rem;
}

.facility-card p {
    color: rgba(255,255,255,0.82);
    font-size: 0.92rem;
    line-height: 1.8;
}


.page-hero::after,
.callback-hero::after,
.news-hero::after,
.store-hero::after {
    content: '';
    position: absolute;
    inset-inline-end: clamp(1rem, 5vw, 3rem);
    bottom: clamp(1rem, 4vw, 2rem);
    width: clamp(120px, 16vw, 220px);
    height: clamp(120px, 16vw, 220px);
    background: center / contain no-repeat url('../images/brand-logo.png');
    opacity: 0.045;
    pointer-events: none;
}

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 160px 0 72px;
    background:
        radial-gradient(circle at 12% 18%, rgba(201,169,78,0.12), transparent 18%),
        radial-gradient(circle at 86% 14%, rgba(255,138,0,0.16), transparent 18%),
        linear-gradient(135deg, #081f44 0%, #0b2d5c 34%, #1676cc 100%);
    color: var(--white);
}

.page-hero-grid {
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    gap: 1.7rem;
    align-items: center;
}

.page-title { color: var(--white); }
.page-text { color: rgba(255,255,255,0.84); }

.contact-kpis { display: grid; gap: 1rem; }

.kpi-card {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    backdrop-filter: blur(10px);
}

.kpi-card strong {
    display: block;
    font-size: 1.7rem;
    font-weight: 900;
    margin-bottom: 0.35rem;
}

.kpi-card span {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.78);
}

.contact-layout,
.legal-layout {
    display: grid;
    gap: 1.4rem;
}

.contact-layout {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
}

.glass-card {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.info-grid .contact-card { min-height: 100%; }

.contact-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.contact-card-head p { font-size: 0.84rem; }

.contact-list {
    display: grid;
    gap: 0.8rem;
    margin-bottom: 1rem;
    color: var(--brand-slate);
    font-size: 0.94rem;
}

.contact-list li {
    list-style: none;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
}

.contact-list i {
    color: var(--brand-blue);
    margin-top: 0.2rem;
}

.contact-actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.interactive-email {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 62px;
    padding: 1rem 1.05rem;
    border-radius: 1rem;
    background: #edf5ff;
    color: var(--brand-navy);
    font-weight: 800;
    transition: var(--transition);
}

.interactive-email:hover {
    background: var(--brand-navy);
    color: var(--white);
}

.form-shell {
    background: var(--white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    padding: 1.55rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1rem;
}

.form-group,
.form-grid .full {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-grid .full { grid-column: 1 / -1; }

.field-label {
    color: var(--brand-navy);
    font-size: 0.88rem;
    font-weight: 800;
}

.form-control {
    width: 100%;
    min-height: 58px;
    border-radius: 1.05rem;
    border: 1px solid #d8e5f3;
    background: #f8fbff;
    padding: 0.95rem 1rem;
    color: var(--brand-ink);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition);
}

.form-control:hover {
    background: #ffffff;
    border-color: #bfd8ef;
}

.form-control:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(25, 136, 216, 0.12);
    background: #ffffff;
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

select.form-control {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--brand-blue) 50%), linear-gradient(135deg, var(--brand-blue) 50%, transparent 50%);
    background-position: calc(1rem) calc(50% - 3px), calc(1.4rem) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-inline-end: 2.6rem;
}

html[dir="ltr"] select.form-control {
    background-position: calc(100% - 1rem) calc(50% - 3px), calc(100% - 1.4rem) calc(50% - 3px);
    padding-inline-end: 1rem;
    padding-inline-start: 2.6rem;
}

.verify-box {
    border: 1px dashed #c5d9ef;
    border-radius: 1.1rem;
    padding: 1rem;
    display: grid;
    gap: 1rem;
    background: #f8fbff;
}

.verify-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.verify-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--brand-blue);
}

.verify-inline {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.captcha-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    min-height: 52px;
    padding: 0.8rem 1rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #edf5ff, #ffffff);
    color: var(--brand-navy);
    font-weight: 900;
    border: 1px solid #d7e6f3;
}

.form-status {
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    font-size: 0.92rem;
    font-weight: 700;
    display: none;
}

.form-status.success,
.form-status.error { display: block; }

.form-status.success {
    background: rgba(56, 214, 122, 0.12);
    color: #0e8a43;
}

.form-status.error {
    background: rgba(255, 138, 0, 0.12);
    color: #b35b00;
}

.map-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1.2rem;
}

.map-frame {
    border-radius: 1.3rem;
    overflow: hidden;
    min-height: 320px;
    border: 1px solid var(--border-soft);
    background: #dfefff;
}

.map-frame iframe {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
}

.social-grid .social-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 34px;
    gap: 0.85rem;
    align-items: center;
    min-height: 116px;
    padding: 1.05rem;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,251,255,0.9)),
        radial-gradient(circle at 8% 0%, rgba(25,136,216,0.12), transparent 34%);
    border-color: rgba(203, 222, 244, 0.9);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.contact-layout .social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 640px) {
    .contact-layout .social-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .social-grid .social-card {
        grid-template-columns: 44px minmax(0, 1fr) 28px;
        min-height: 72px;
        padding: 0.85rem;
    }

    .social-icon {
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
    }

    .social-card h4 {
        font-size: 0.95rem;
    }

    .social-card-arrow {
        font-size: 0.85rem;
    }
}

.social-icon {
    width: 52px;
    height: 52px;
    border-radius: 1rem;
    background: #edf5ff;
    color: var(--brand-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}

.social-card-body {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.social-card h4 {
    color: var(--brand-navy);
    font-size: 1rem;
    font-weight: 900;
    margin: 0;
}

.social-card p {
    margin: 0;
    direction: ltr;
    text-align: start;
    unicode-bidi: plaintext;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #5c6f8d;
    font-family: Arial, 'Cairo', sans-serif;
    letter-spacing: 0;
}

.social-card-arrow {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    justify-self: end;
    border-radius: 50%;
    background: #eef6ff;
    color: #7c8ba1;
    font-size: 0.82rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: var(--transition);
}

.social-card:hover {
    border-color: rgba(25,136,216,0.26);
}

.social-card:hover .social-icon {
    transform: scale(1.05);
}

.social-card:hover .social-card-arrow {
    opacity: 1;
    transform: translateX(0);
    background: var(--brand-navy);
    color: var(--white);
}

.social-card[data-social="tiktok"] .social-icon {
    background: linear-gradient(135deg, #071833, #111827);
    color: #fff;
    box-shadow: 0 12px 26px rgba(17, 24, 39, 0.16);
}

.social-card[data-social="snapchat"] .social-icon {
    background: #fff8d5;
    color: #eab308;
    box-shadow: 0 12px 26px rgba(234, 179, 8, 0.16);
}

.social-card[data-social="x"] .social-icon {
    background: #eef2f7;
    color: #071833;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}

.social-card[data-social="instagram"] .social-icon {
    background: linear-gradient(135deg, #f58529, #C9A94E 46%, #132449 72%, #515bd4);
    color: #fff;
    box-shadow: 0 12px 26px rgba(221, 42, 123, 0.2);
}

.social-card[data-social="whatsapp"] .social-icon {
    background: #e9fbf0;
    color: #16a34a;
    box-shadow: 0 12px 26px rgba(22, 163, 74, 0.16);
}

.social-card[data-social="facebook"] .social-icon,
.social-card[data-social="facebook-com"] .social-icon {
    background: #eaf2ff;
    color: #1877f2;
}

.social-card[data-social="youtube"] .social-icon {
    background: #fff1f2;
    color: #dc2626;
}

.social-card[data-social="share"] .social-icon {
    background: linear-gradient(135deg, #edf5ff, #e8fff7);
    color: #0b2d5c;
    box-shadow: 0 12px 26px rgba(25, 136, 216, 0.14);
}

.social-card[data-social="linkedin"] .social-icon,
.social-card[data-social="linkedin-com"] .social-icon {
    background: #e8f4ff;
    color: #0a66c2;
}

.page-main,
.page-shell {
    padding-top: calc(var(--header-offset) + 8px);
}

.legal-hero {
    background:
        radial-gradient(circle at 10% 18%, rgba(66,217,244,0.12), transparent 18%),
        radial-gradient(circle at 85% 14%, rgba(255,138,0,0.14), transparent 18%),
        linear-gradient(135deg, #0a254c 0%, #0b2d5c 34%, #1a7bc7 100%);
}

.legal-layout {
    grid-template-columns: 0.92fr 1.08fr;
    align-items: start;
}

.legal-summary {
    position: sticky;
    top: calc(var(--header-offset) + 8px);
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    padding: 1.4rem;
    box-shadow: var(--shadow-card);
}

.legal-summary ul {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.95rem;
    color: var(--brand-slate);
    font-size: 0.94rem;
}

.legal-summary li {
    list-style: none;
    padding: 0.85rem 0.95rem;
    background: #f8fbff;
    border: 1px solid #e6eef9;
    border-radius: 1rem;
}

.policy-card h4,
.simple-card h4 {
    color: var(--brand-navy);
    font-size: 1.05rem;
    font-weight: 900;
    margin-bottom: 0.45rem;
}

.footer {
    position: relative;
    overflow: hidden;
    background: var(--brand-navy);
    color: var(--white);
    padding: 4.8rem 0 calc(2rem + env(safe-area-inset-bottom, 0px));
}

.footer::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan), var(--brand-green), var(--brand-orange), var(--brand-purple));
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.8fr 0.85fr 0.9fr;
    gap: 1.4rem;
    padding-bottom: 1.7rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.footer-brand img {
    width: 58px;
    height: 58px;
    border-radius: 1.15rem;
    background: rgba(255,255,255,0.94);
    padding: 0.35rem;
    object-fit: contain;
}

.footer-brand h3 {
    font-size: 1.2rem;
    font-weight: 900;
}

.footer-brand small {
    display: block;
    color: rgba(255,255,255,0.68);
    margin-top: 0.2rem;
    font-size: 0.82rem;
}

.footer > .container > p,
.footer-grid p {
    color: rgba(255,255,255,0.76);
    font-size: 0.95rem;
    line-height: 1.95;
}

.footer-col h4 {
    font-size: 1rem;
    font-weight: 900;
    margin-bottom: 0.9rem;
}

.footer-col ul {
    display: grid;
    gap: 0.7rem;
    color: rgba(255,255,255,0.76);
    font-size: 0.92rem;
}

.footer-col li { list-style: none; }

.footer-col a { transition: color var(--transition); }

.footer-col a:hover { color: var(--brand-cyan); }

.social-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

.social-links a {
    width: 44px;
    height: 44px;
    border-radius: 0.95rem;
    background: rgba(255,255,255,0.09);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.social-links a:hover {
    background: rgba(255,255,255,0.18);
    transform: translateY(-2px);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.15rem;
    font-size: 0.86rem;
    color: rgba(255,255,255,0.66);
}

.footer-meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.footer-meta a {
    color: rgba(255,255,255,0.74);
    font-weight: 700;
}

.footer-meta a:hover { color: var(--brand-cyan); }

.mobile-dock {
    position: fixed;
    inset-inline: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 999;
    display: none;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 0.35rem;
    padding: 0.5rem;
    border-radius: 1.4rem;
    background: rgba(255,255,255,0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 18px 44px rgba(11,45,92,0.18);
}

.dock-link {
    min-height: 64px;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--brand-slate);
    font-size: 0.7rem;
    font-weight: 800;
    transition: var(--transition);
    text-align: center;
}

.mobile-dock-icon {
    width: 34px;
    height: 34px;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef5ff;
    color: var(--brand-blue);
    font-size: 1rem;
}

.dock-link.active,
.dock-link:hover {
    color: var(--brand-navy);
    background: #f5f9ff;
}

.dock-link.active .mobile-dock-icon,
.dock-link:hover .mobile-dock-icon {
    background: var(--brand-navy);
    color: var(--white);
}

.dock-link-accent {
    color: var(--brand-green);
}

.dock-link-accent .mobile-dock-icon {
    background: rgba(56, 214, 122, 0.14);
    color: #0d8a3b;
}

/* Reveal is progressive enhancement: content remains readable without JavaScript. */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-zoom {
    opacity: 1;
    transform: none;
}

.js .reveal-up,
.js .reveal-left,
.js .reveal-right,
.js .reveal-zoom {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: var(--delay, 0s);
}

.js .reveal-left { transform: translateX(-28px); }
.js .reveal-right { transform: translateX(28px); }
.js .reveal-zoom { transform: scale(0.96); }

.js .reveal-up.is-visible,
.js .reveal-left.is-visible,
.js .reveal-right.is-visible,
.js .reveal-zoom.is-visible {
    opacity: 1;
    transform: translate(0,0) scale(1);
}

/* Avoid pre-reveal horizontal overflow on tablet and smaller screens. */
@media (max-width: 1180px) {
    .js .reveal-left,
    .js .reveal-right {
        transform: translateY(18px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal-up,
    .js .reveal-left,
    .js .reveal-right,
    .js .reveal-zoom {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.honeypot {
    position: absolute;
    inset-inline-start: -9999px;
    opacity: 0;
    pointer-events: none;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes textShine {
    0%, 12% { transform: translateX(-160%); opacity: 0; }
    22% { opacity: 1; }
    36%, 100% { transform: translateX(170%); opacity: 0; }
}

@keyframes marquee-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}

@keyframes pulseSoft {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 0.88; transform: scale(1.05); }
}

html[dir="ltr"] .stage-number,
html[dir="ltr"] .timeline-list::before,
html[dir="ltr"] .timeline-dot {
    inset-inline-start: auto;
    inset-inline-end: 0.35rem;
}

html[dir="ltr"] .timeline-item {
    padding-inline-start: 1rem;
    padding-inline-end: 3rem;
}

html[dir="ltr"] .page-hero,
html[dir="ltr"] .hero,
html[dir="ltr"] body {
    text-align: left;
}

@media (max-width: 1200px) {
    .hero-grid,
    .page-hero-grid,
    .split-panel,
    .future-grid,
    .contact-layout,
    .legal-layout,
    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-side,
    .legal-summary { position: static; }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 991px) {
    .nav-links,
    .nav-actions > .btn {
        display: none;
    }

    .nav-cart-link {
        width: 40px;
        height: 40px;
    }

    .menu-toggle { display: inline-flex; }

    .nav-actions { gap: 0.5rem; }

    .hero {
        padding-top: 138px;
        min-height: auto;
    }

    .hero-card-grid { grid-template-columns: 1fr; }
    .hero-main-image { min-height: 320px; }

    .hero-stats,
    .grid-4,
    .stage-grid,
    .stats-grid,
    .feature-grid,
    .grid-3,
    .info-grid,
    .social-grid,
    .facilities-grid,
    .map-grid,
    .policy-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .mobile-dock { display: grid; }

    .footer {
        padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 767px) {
    body {
        font-size: 15px;
        background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    }

    .container { width: min(var(--container), calc(100% - 20px)); }

    .section { padding: 74px 0; }

    .nav-wrap {
        border-radius: 1.4rem;
        padding: 0.78rem 0.8rem;
    }

    .brand img {
        width: 48px;
        height: 48px;
        border-radius: 1rem;
    }

    .brand-text .brand-title { font-size: 0.95rem; }
    .brand-text p { font-size: 0.74rem; }

    .lang-switch { padding: 0; }

    .lang-btn {
        min-width: 32px;
        width: 38px;
        height: 32px;
        font-size: 0.82rem;
    }

    .product-footer {
        align-items: stretch;
    }

    .store-buy-controls {
        justify-items: stretch;
    }

    .store-qty-control {
        width: 100%;
        grid-template-columns: 44px minmax(0,1fr) 44px;
    }

    .store-coupon-row {
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: clamp(2rem, 9vw, 3rem);
        margin-bottom: 1rem;
    }

    .title {
        font-size: clamp(1.65rem, 6vw, 2.2rem);
    }

    .hero-text,
    .section-text,
    .lead,
    .full-cta p {
        font-size: 0.96rem;
    }

    .hero-stats,
    .grid-4,
    .stage-grid,
    .stats-grid,
    .feature-grid,
    .grid-3,
    .info-grid,
    .social-grid,
    .facilities-grid,
    .map-grid,
    .policy-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .hero-stat,
    .feature-card,
    .stage-card,
    .metric-card,
    .social-card,
    .contact-card,
    .map-card,
    .form-shell,
    .policy-card,
    .simple-card,
    .testimonial,
    .analytics-panel,
    .timeline-card {
        border-radius: 1.5rem;
    }

    .btn {
        min-height: 52px;
        width: 100%;
    }

    .btn-row {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-ring {
        width: 340px;
        height: 340px;
        top: 120px;
    }

    .hero-main-image { min-height: 260px; }
    .facility-card { min-height: 320px; }

    .page-hero {
        padding-top: 136px;
        padding-bottom: 56px;
    }

    .footer-grid,
    .footer-bottom {
        grid-template-columns: 1fr;
        display: grid;
        gap: 1rem;
    }

    .footer-bottom { text-align: center; }

    .mobile-dock {
        inset-inline: 8px;
        padding: 0.45rem;
        gap: 0.28rem;
    }

    .dock-link {
        min-height: 60px;
        font-size: 0.64rem;
    }

    .mobile-dock-icon {
        width: 32px;
        height: 32px;
        font-size: 0.92rem;
    }
}

@media (max-width: 480px) {
    .topbar { padding-top: 10px; }
    .nav-wrap { width: calc(100% - 14px); }
    .hero { padding-top: 126px; }
    .hero-tag { font-size: 0.78rem; }
    .hero-school-name { font-size: 0.9rem; }
    .hero-stat strong { font-size: 1.34rem; }
    .hero-stat span { font-size: 0.76rem; }
    .title { font-size: clamp(1.55rem, 7.5vw, 1.95rem); }

    .feature-card h3,
    .stage-card h3,
    .contact-card h3,
    .policy-card h3 { font-size: 1.18rem; }

    .full-cta { padding: 2.3rem 1.15rem; }
    .footer { padding-top: 3.8rem; }
}


/* ===== Page & navigation refinements ===== */
.nav-links {
    gap: 1.05rem;
    flex-wrap: nowrap;
}

.nav-links a {
    font-size: 0.92rem;
}

.page-academic .page-hero,
.page-admissions .page-hero {
    background:
        radial-gradient(circle at 8% 18%, rgba(201, 169, 78, 0.12), transparent 18%),
        radial-gradient(circle at 82% 12%, rgba(255, 138, 0, 0.12), transparent 20%),
        linear-gradient(135deg, #0b2d5c 0%, #145ca9 55%, #2aa7d8 100%);
    color: var(--white);
}

.page-academic .page-title,
.page-academic .page-text,
.page-admissions .page-title,
.page-admissions .page-text {
    color: var(--white);
}

.page-academic .page-text,
.page-admissions .page-text {
    color: rgba(255,255,255,0.86);
}

.page-academic .kpi-card,
.page-admissions .kpi-card {
    background: rgba(255,255,255,0.11);
    border: 1px solid rgba(255,255,255,0.16);
}

.page-academic .kpi-card strong,
.page-admissions .kpi-card strong,
.page-academic .kpi-card span,
.page-admissions .kpi-card span {
    color: var(--white);
}

/* ===== Tabs ===== */
.tabs-shell {
    display: grid;
    gap: 1.4rem;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: stretch;
}

.tab-button {
    appearance: none;
    border: 1px solid rgba(25, 136, 216, 0.16);
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    color: var(--brand-navy);
    border-radius: 1.3rem;
    padding: 1rem 1.15rem;
    min-width: 180px;
    text-align: start;
    transition: var(--transition);
    box-shadow: var(--shadow-card);
}

.tab-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.tab-button.active {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-blue));
    color: var(--white);
    border-color: transparent;
}

.tab-button .tab-title {
    display: block;
    font-weight: 900;
    font-size: 1.02rem;
    margin-bottom: 0.3rem;
}

.tab-button small {
    display: block;
    opacity: 0.82;
    font-size: 0.82rem;
    font-weight: 700;
}

.tab-panel {
    display: none;
    background: rgba(255,255,255,0.88);
    border: 1px solid var(--border-soft);
    border-radius: 2rem;
    padding: 1.4rem;
    box-shadow: var(--shadow-soft);
}

.tab-panel.active {
    display: block;
    animation: fadeInUp 0.35s ease;
}

.calendar-headline {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1rem;
}

.calendar-year-title {
    color: var(--brand-navy);
    font-size: clamp(1.4rem, 2vw, 2rem);
    line-height: 1.2;
    font-weight: 900;
    margin-top: 0.75rem;
}

.calendar-note {
    max-width: 430px;
    color: var(--brand-slate);
    font-size: 0.95rem;
    line-height: 1.85;
}

.calendar-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.calendar-mini-card {
    padding: 1rem 1rem 0.95rem;
    border-radius: 1.2rem;
    background: linear-gradient(180deg, #f9fcff, #edf5ff);
    border: 1px solid #e5eef8;
}

.calendar-mini-card span {
    display: block;
    color: var(--brand-slate);
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 0.4rem;
}

.calendar-mini-card strong {
    display: block;
    color: var(--brand-navy);
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 900;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1rem;
    margin-bottom: 0.4rem;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.85rem;
    border-radius: 999px;
    background: #f6faff;
    border: 1px solid #e6eff8;
    color: var(--brand-navy);
    font-size: 0.84rem;
    font-weight: 800;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}
.dot-open { background: #4b88c4; }
.dot-national { background: #14b46c; }
.dot-extra { background: #2ab7b4; }
.dot-mid { background: #c9bd8f; }

.calendar-table-shell {
    overflow: auto;
    border-radius: 1.6rem;
    border: 1px solid #e6edf5;
    background: var(--white);
}

.calendar-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.42rem;
    min-width: 760px;
    background: #f5f8fb;
    padding: 0.35rem;
}

.calendar-table thead th {
    background: #174d67;
    color: var(--white);
    font-size: 0.96rem;
    padding: 1rem;
    text-align: center;
    font-weight: 900;
    white-space: nowrap;
}

.calendar-table thead th:first-child {
    border-top-right-radius: 1.2rem;
}
.calendar-table thead th:last-child {
    border-top-left-radius: 1.2rem;
}

.calendar-table tbody td {
    background: #f0f2f4;
    padding: 0.95rem 1rem;
    color: var(--brand-ink);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    line-height: 1.8;
}

.calendar-table tbody td:first-child {
    text-align: start;
    font-weight: 800;
}

.calendar-table tbody tr.tone-open td {
    background: #4b88c4;
    color: var(--white);
}

.calendar-table tbody tr.tone-term td {
    background: #0f5062;
    color: var(--white);
}

.calendar-table tbody tr.tone-national td {
    background: #12b669;
    color: var(--white);
}

.calendar-table tbody tr.tone-extra td {
    background: #2ab7b4;
    color: var(--white);
}

.calendar-table tbody tr.tone-mid td {
    background: #c8bd8e;
    color: var(--white);
}

.calendar-table tbody tr.tone-foundation td {
    background: #735143;
    color: var(--white);
}

.calendar-table tbody tr.tone-neutral td {
    background: #e8ecef;
    color: var(--brand-ink);
}

/* ===== Admissions ===== */
.admission-time-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}

.admission-level-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1.2rem;
}

.admission-level-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 1.8rem;
    padding: 1.45rem;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.admission-level-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 45%);
}

.admission-level-card h3 {
    color: var(--brand-navy);
    font-size: 1.3rem;
    font-weight: 900;
    margin-bottom: 0.55rem;
}

.admission-level-card strong {
    display: block;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 0.55rem;
}

.admission-level-card p {
    color: var(--brand-slate);
    font-size: 0.92rem;
    line-height: 1.8;
}

.level-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 38px;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    margin-bottom: 0.95rem;
    font-weight: 900;
    font-size: 0.84rem;
}

.admission-level-card.tone-blue .level-pill {
    background: rgba(25,136,216,0.12);
    color: var(--brand-blue);
}
.admission-level-card.tone-green .level-pill {
    background: rgba(56,214,122,0.14);
    color: #0d8d4b;
}
.admission-level-card.tone-orange .level-pill {
    background: rgba(255,138,0,0.14);
    color: #d67200;
}

.notice-card {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    margin-top: 1.1rem;
    padding: 1rem 1.1rem;
    border-radius: 1.2rem;
    background: #fff6ea;
    border: 1px solid #fde2b8;
    color: #905300;
}

.notice-card i {
    margin-top: 0.15rem;
    font-size: 1rem;
}

.notice-card p {
    font-size: 0.95rem;
    line-height: 1.8;
}

.admissions-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 1.5rem;
    align-items: start;
}

.admissions-side {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: calc(var(--header-offset) + 8px);
}

.title.small {
    font-size: clamp(1.55rem, 2vw, 2.25rem);
    margin-bottom: 0.7rem;
}

.admissions-callout {
    background: linear-gradient(180deg, #f9fcff, #edf5ff);
    border: 1px solid #e0ecf7;
    border-radius: 1.55rem;
    padding: 1.2rem 1.15rem;
}

.admissions-callout.muted {
    background: linear-gradient(180deg, #fdfefe, #f6fbff);
}

.admissions-callout h3 {
    color: var(--brand-navy);
    font-size: 1.05rem;
    font-weight: 900;
    margin-bottom: 0.55rem;
}

.admissions-callout p {
    color: var(--brand-slate);
    font-size: 0.94rem;
    line-height: 1.85;
}

.simple-card.compact {
    padding: 1.25rem;
}

.check-list,
.doc-list {
    display: grid;
    gap: 0.8rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.check-list li,
.doc-list li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    color: var(--brand-slate);
    font-size: 0.94rem;
    line-height: 1.85;
}

.check-list i,
.doc-list i {
    color: var(--brand-green);
    margin-top: 0.25rem;
}

.requirement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.requirement-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 1.5rem;
    padding: 1.2rem 1.15rem 1.15rem;
    box-shadow: var(--shadow-card);
}

.requirement-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 34px;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(11,45,92,0.08);
    color: var(--brand-navy);
    font-weight: 900;
    font-size: 0.82rem;
    margin-bottom: 0.8rem;
}

.requirement-card p {
    color: var(--brand-slate);
    font-size: 0.95rem;
    line-height: 1.85;
}

.documents-card {
    background: linear-gradient(180deg, #ffffff, #f9fcff);
    border: 1px solid var(--border-soft);
    border-radius: 1.9rem;
    padding: 1.35rem;
    box-shadow: var(--shadow-soft);
}

.admission-heading-inline {
    margin-inline: 0;
    margin-bottom: 1.2rem;
}

/* ===== Responsive calendar / admissions ===== */
@media (max-width: 1200px) {
    .nav-links {
        gap: 0.85rem;
    }

    .nav-links a {
        font-size: 0.88rem;
    }
}

@media (max-width: 991px) {
    .calendar-headline,
    .admissions-layout {
        grid-template-columns: 1fr;
        display: grid;
    }

    .admissions-side {
        position: static;
    }

    .calendar-mini-grid,
    .admission-level-grid,
    .admission-time-grid,
    .requirement-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tab-button {
        min-width: 0;
        padding: 0.95rem 1rem;
    }

    .calendar-headline {
        display: grid;
        gap: 0.75rem;
    }

    .calendar-mini-grid,
    .admission-level-grid,
    .admission-time-grid,
    .requirement-grid {
        grid-template-columns: 1fr;
    }

    .calendar-table {
        min-width: 100%;
        border-spacing: 0;
        background: transparent;
        padding: 0;
    }

    .calendar-table thead {
        display: none;
    }

    .calendar-table tbody,
    .calendar-table tr,
    .calendar-table td {
        display: block;
        width: 100%;
    }

    .calendar-table tbody tr {
        margin-bottom: 0.9rem;
        border-radius: 1.2rem;
        overflow: hidden;
        border: 1px solid #dde7f0;
        box-shadow: var(--shadow-card);
    }

    .calendar-table tbody td {
        text-align: start !important;
        padding: 0.78rem 0.9rem;
        border-bottom: 1px solid rgba(255,255,255,0.18);
        position: relative;
        font-size: 0.92rem;
    }

    .calendar-table tbody td::before {
        content: attr(data-label-ar);
        display: block;
        font-size: 0.72rem;
        font-weight: 800;
        margin-bottom: 0.22rem;
        opacity: 0.82;
    }

    html[lang="en"] .calendar-table tbody td::before {
        content: attr(data-label-en);
    }

    .calendar-table tbody td:last-child {
        border-bottom: none;
    }

    .calendar-year-title {
        font-size: 1.35rem;
    }

    .calendar-note,
    .notice-card p,
    .requirement-card p,
    .admissions-callout p,
    .admission-level-card p {
        font-size: 0.9rem;
    }

    .tab-panel,
    .documents-card {
        border-radius: 1.5rem;
        padding: 1rem;
    }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Tuition Fees Page ===== */
.page-fees .page-hero {
    background:
        radial-gradient(circle at 12% 16%, rgba(56,214,122,0.14), transparent 18%),
        radial-gradient(circle at 82% 14%, rgba(255,138,0,0.15), transparent 18%),
        linear-gradient(135deg, #0a254c 0%, #0b2d5c 36%, #1a7bc7 100%);
    color: var(--white);
}

.page-fees .page-title,
.page-fees .page-text,
.page-fees .kpi-card strong,
.page-fees .kpi-card span {
    color: var(--white);
}

.page-fees .kpi-card {
    background: rgba(255,255,255,0.11);
    border: 1px solid rgba(255,255,255,0.16);
}

.fees-kpis {
    grid-template-columns: repeat(3, minmax(0,1fr));
}

.fees-overview,
.fees-secondary-grid,
.discount-grid {
    display: grid;
    gap: 1.2rem;
}

.fees-overview {
    grid-template-columns: repeat(3, minmax(0,1fr));
    margin-bottom: 1.2rem;
}

.fees-secondary-grid {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: start;
}

.transport-card,
.discount-panel {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 1.9rem;
    padding: 1.35rem;
    box-shadow: var(--shadow-soft);
}

.transport-heading-inline {
    margin-inline: 0;
    margin-bottom: 1rem;
}

.fees-table-shell,
.transport-table-shell {
    overflow: auto;
    border-radius: 1.6rem;
    border: 1px solid #e5edf6;
    background: var(--white);
}

.fees-table,
.transport-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.42rem;
    min-width: 920px;
    background: #f5f8fb;
    padding: 0.35rem;
}

.transport-table { min-width: 680px; }

.fees-table thead th,
.transport-table thead th {
    color: var(--white);
    font-size: 0.94rem;
    font-weight: 900;
    text-align: center;
    padding: 1rem 0.9rem;
    white-space: nowrap;
}

.fees-table thead th.stage,
.transport-table thead th:first-child {
    background: #174d67;
    border-top-right-radius: 1.2rem;
}

.fees-table thead th.before { background: #0f5062; }
.fees-table thead th.term1 { background: #1988d8; }
.fees-table thead th.term2 { background: #338fd7; }
.fees-table thead th.term3 { background: #2aa7d8; }
.fees-table thead th.after { background: #12b669; }
.fees-table thead th.discount-rate {
    background: #0f8a4b;
    border-top-left-radius: 1.2rem;
}

.transport-table thead th:nth-child(2) { background: #1988d8; }
.transport-table thead th:last-child {
    background: #12b669;
    border-top-left-radius: 1.2rem;
}

.fees-table tbody td,
.transport-table tbody td {
    background: #edf2f6;
    padding: 1rem 0.85rem;
    text-align: center;
    color: var(--brand-ink);
    font-size: 0.94rem;
    font-weight: 700;
    vertical-align: middle;
}

.fees-table tbody tr:nth-child(even) td,
.transport-table tbody tr:nth-child(even) td {
    background: #e7edf3;
}

.fees-stage-cell {
    text-align: start !important;
    min-width: 200px;
    color: var(--brand-navy) !important;
    font-weight: 900 !important;
}

.money-stack {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    flex-wrap: wrap;
}

.amount {
    color: var(--brand-navy);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.amount-strong {
    color: #0f8a4b;
}

.amount-empty,
.discount-rate-empty {
    color: var(--brand-slate);
    font-weight: 900;
}

.currency,
.transport-note {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--brand-slate);
}

.transport-note {
    display: block;
    margin-top: 0.35rem;
}

.discount-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 24px;
    padding: 0.2rem 0.48rem;
    border-radius: 999px;
    background: rgba(18,182,105,0.14);
    color: #0c8b45;
    font-size: 0.72rem;
    font-weight: 900;
}

.discount-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
}

.discount-box {
    min-height: 108px;
    padding: 1rem 1rem 0.95rem;
    border-radius: 1.4rem;
    color: var(--white);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.discount-box::after {
    content: '';
    position: absolute;
    inset-inline-end: -20px;
    inset-block-start: -20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    pointer-events: none;
}

.discount-box strong {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 900;
}

.discount-icon {
    width: 44px;
    height: 44px;
    border-radius: 1rem;
    background: rgba(255,255,255,0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.discount-box.tone-green { background: linear-gradient(135deg, #16a962, #2fc58f); }
.discount-box.tone-cyan { background: linear-gradient(135deg, #1f91bf, #2bb8c2); }
.discount-box.tone-blue { background: linear-gradient(135deg, #1558a6, #2b8be1); }
.discount-box.tone-orange { background: linear-gradient(135deg, #d67200, #ff9b2f); }
.discount-box.tone-purple { background: linear-gradient(135deg, #8244d8, #0d1932); }

.fee-note {
    margin-top: 1rem;
}

.fees-cta {
    background:
        radial-gradient(circle at 16% 25%, rgba(66,217,244,0.14), transparent 18%),
        radial-gradient(circle at 80% 18%, rgba(255,138,0,0.14), transparent 18%),
        linear-gradient(135deg, #0b2d5c 0%, #156ab7 100%);
}

@media (max-width: 1200px) {
    .fees-overview,
    .fees-secondary-grid,
    .fees-kpis {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .fees-table,
    .transport-table {
        min-width: 100%;
        border-spacing: 0;
        background: transparent;
        padding: 0;
    }

    .fees-table thead,
    .transport-table thead {
        display: none;
    }

    .fees-table tbody,
    .fees-table tr,
    .fees-table td,
    .transport-table tbody,
    .transport-table tr,
    .transport-table td {
        display: block;
        width: 100%;
    }

    .fees-table tbody tr,
    .transport-table tbody tr {
        margin-bottom: 0.9rem;
        border-radius: 1.2rem;
        overflow: hidden;
        border: 1px solid #dde7f0;
        box-shadow: var(--shadow-card);
    }

    .fees-table tbody td,
    .transport-table tbody td {
        text-align: start !important;
        padding: 0.78rem 0.9rem;
        border-bottom: 1px solid rgba(255,255,255,0.18);
        position: relative;
        font-size: 0.92rem;
        background: #edf2f6 !important;
    }

    .fees-table tbody td::before,
    .transport-table tbody td::before {
        content: attr(data-label-ar);
        display: block;
        font-size: 0.72rem;
        font-weight: 800;
        margin-bottom: 0.22rem;
        opacity: 0.82;
    }

    html[lang="en"] .fees-table tbody td::before,
    html[lang="en"] .transport-table tbody td::before {
        content: attr(data-label-en);
    }

    .fees-table tbody td:last-child,
    .transport-table tbody td:last-child {
        border-bottom: none;
    }

    .money-stack {
        justify-content: flex-start;
    }

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

    .discount-box strong {
        font-size: 0.94rem;
    }
}

/* ===== Navigation fit adjustment ===== */
.nav-links {
    gap: 0.9rem;
}

.nav-links a {
    font-size: 0.88rem;
}

@media (max-width: 1200px) {
    .nav-links {
        gap: 0.72rem;
    }

    .nav-links a {
        font-size: 0.81rem;
    }
}


.nav-utility-link {
    min-height: 42px;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: rgba(10, 45, 92, 0.08);
    color: var(--brand-navy);
    font-size: 0.9rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    white-space: nowrap;
}

.nav-utility-link:hover {
    background: var(--brand-navy);
    color: var(--white);
}

.about-story-grid {
    align-items: stretch;
}

/* About page hero panel */
.about-hero-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-logo-hero {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.about-logo-hero img {
    width: 100%;
    max-width: 240px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 18px rgba(0,0,0,0.18));
}

/* About story image panel */
.about-img-panel {
    height: 100%;
}

.about-img-frame {
    border-radius: var(--radius-xl);
    overflow: hidden;
    height: 100%;
    min-height: 360px;
    box-shadow: var(--shadow-soft);
}

.about-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.about-img-frame:hover img {
    transform: scale(1.04);
}

/* About page fact pills */
.about-fact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.4rem;
}

.about-fact-pill {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-soft);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}

.about-fact-pill i {
    color: var(--brand-blue);
    font-size: 1rem;
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 680px) {
    .about-logo-hero img { max-width: 180px; }
    .about-img-frame { min-height: 260px; }
    .about-fact-grid { grid-template-columns: 1fr; }
}

.about-story-card,
.about-side-panel,
.empowerment-side-card,
.manager-summary-card,
.director-portrait-card {
    height: 100%;
}

.about-mini-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1.2rem;
}

.about-progress-list {
    margin-top: 1.15rem;
}

.leadership-grid,
.mission-card-grid {
    align-items: stretch;
}

.student-empowerment-grid {
    align-items: start;
}

.value-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.2rem;
}

.value-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: #eef6ff;
    border: 1px solid #d8e7f5;
    color: var(--brand-navy);
    font-size: 0.9rem;
    font-weight: 800;
}

.compact-values .value-pill {
    min-height: 40px;
    padding-inline: 0.95rem;
}

.manager-hero-grid {
    align-items: center;
}

.director-portrait-card {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--radius-xl);
    padding: 1.35rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-soft);
}

.director-portrait-frame {
    padding: 0.95rem;
    border-radius: calc(var(--radius-xl) - 8px);
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.16);
}

.director-portrait {
    min-height: 360px;
    border-radius: calc(var(--radius-xl) - 16px);
    background:
        radial-gradient(circle at 30% 25%, rgba(66,217,244,0.28), transparent 24%),
        radial-gradient(circle at 78% 22%, rgba(255,138,0,0.2), transparent 22%),
        linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.director-portrait::before {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    filter: blur(28px);
}

.director-portrait-mark {
    position: relative;
    z-index: 1;
    width: 108px;
    height: 108px;
    border-radius: 2rem;
    background: rgba(255,255,255,0.9);
    color: var(--brand-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.7rem;
    box-shadow: var(--shadow-soft);
}

.director-caption {
    padding-top: 1rem;
}

.director-caption h3 {
    color: var(--white);
    font-size: 1.35rem;
    font-weight: 900;
    margin-bottom: 0.35rem;
}

.director-caption p {
    color: rgba(255,255,255,0.84);
    font-size: 0.95rem;
    font-weight: 700;
}

.director-caption small {
    display: block;
    margin-top: 0.65rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.8;
}

.manager-layout {
    align-items: start;
}

.manager-message-grid {
    grid-template-columns: 1fr;
}

.manager-signoff {
    padding-block: 3.4rem;
}

/* Manager letter layout */
.manager-letter-wrap {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 2rem;
    align-items: start;
}

.manager-letter-aside {
    position: sticky;
    top: calc(var(--header-offset) + 8px);
    text-align: center;
}

.manager-letter-aside .director-photo-thumb {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--brand-blue);
    margin: 0 auto 1rem;
    display: block;
    box-shadow: var(--shadow-soft);
}

.manager-letter-aside h3 {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--brand-navy);
    margin-bottom: 0.25rem;
}

.manager-letter-aside .manager-role {
    font-size: 0.9rem;
    color: var(--brand-blue);
    font-weight: 700;
    margin-bottom: 1rem;
}

.manager-letter-aside ul {
    text-align: start;
    margin-top: 1rem;
    display: grid;
    gap: 0.55rem;
}

.manager-letter-aside li {
    list-style: none;
    padding: 0.65rem 0.9rem;
    background: #f8fbff;
    border: 1px solid #e6eef9;
    border-radius: 0.85rem;
    font-size: 0.88rem;
    color: var(--brand-slate);
}

.manager-letter-content {
    display: grid;
    gap: 0;
}

.manager-letter-opening {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-navy);
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--brand-blue);
    display: inline-block;
}

.manager-letter-para {
    font-size: 1rem;
    line-height: 2;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.manager-letter-quote {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    border-inline-start: 4px solid var(--brand-blue);
    background: linear-gradient(135deg, rgba(25,136,216,0.06), rgba(25,136,216,0.02));
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-navy);
    font-style: normal;
    line-height: 1.85;
}

.manager-letter-sign {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--border-soft);
}

.manager-letter-sign strong {
    font-size: 1rem;
    font-weight: 900;
    color: var(--brand-navy);
}

.manager-letter-sign span {
    font-size: 0.9rem;
    color: var(--brand-blue);
    font-weight: 700;
}

@media (max-width: 900px) {
    .manager-letter-wrap {
        grid-template-columns: 1fr;
    }
    .manager-letter-aside {
        position: static;
        display: flex;
        gap: 1rem;
        align-items: center;
        text-align: start;
    }
    .manager-letter-aside .director-photo-thumb {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
        margin: 0;
    }
    .manager-letter-quote {
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
    }
}

.manager-signature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.4rem;
    padding: 0.8rem 1.3rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.14);
    font-weight: 900;
}

@media (max-width: 1200px) {
    .nav-links {
        gap: 1.05rem;
    }

    .nav-links a {
        font-size: 0.92rem;
    }

    .nav-utility-link {
        padding-inline: 0.8rem;
        font-size: 0.84rem;
    }
}

@media (max-width: 991px) {
    .nav-utility-link {
        display: none;
    }

    .about-mini-facts {
        grid-template-columns: 1fr 1fr;
    }

    .director-portrait {
        min-height: 300px;
    }
}

@media (max-width: 767px) {
    .about-mini-facts,
    .mission-card-grid {
        grid-template-columns: 1fr;
    }

    .director-portrait {
        min-height: 260px;
    }

    .director-caption h3 {
        font-size: 1.15rem;
    }

    .manager-signature,
    .value-pill {
        width: 100%;
    }
}

/* === V8: Facilities Gallery, Manager Portrait, Callback Landing === */
.section-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
}

.facilities-grid-extended {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.director-photo-frame {
    overflow: hidden;
    background: linear-gradient(180deg, #f4f7fb, #e9eff7);
}

.director-photo {
    display: block;
    width: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: center top;
}

.facilities-hero-grid,
.callback-hero-grid {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 1.6rem;
    align-items: center;
}

.facilities-side-panel h3,
.callback-panel h2 {
    color: var(--brand-navy);
    font-size: 1.55rem;
    line-height: 1.35;
    font-weight: 900;
    margin: 0.9rem 0;
}

.facility-upload-points,
.callback-points {
    display: grid;
    gap: 0.8rem;
    margin-top: 1.2rem;
}

.facility-upload-points div,
.callback-points div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-radius: 1.1rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--white);
    font-weight: 700;
}

.facility-upload-points i,
.callback-points i {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.gallery-card,
.virtual-tour-card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition);
}

.gallery-card:hover,
.virtual-tour-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft);
}

.gallery-media {
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: #eef4fb;
}

.gallery-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.gallery-card:hover .gallery-media img {
    transform: scale(1.05);
}

.gallery-card-body {
    padding: 1.2rem;
}

.gallery-card-body h3,
.virtual-tour-footer strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--brand-navy);
    margin-bottom: 0.5rem;
}

.gallery-card-body p {
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--brand-slate);
    margin-bottom: 0.9rem;
}

.facility-open-btn {
    min-width: 150px;
}

.virtual-tour-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}

.virtual-tour-media {
    min-height: 360px;
    background: linear-gradient(135deg, #edf5ff, #f7fbff);
    border-bottom: 1px solid var(--border-soft);
}

.virtual-tour-media iframe {
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: 0;
}

.virtual-tour-placeholder {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    background:
        radial-gradient(circle at top right, rgba(25,136,216,0.16), transparent 30%),
        radial-gradient(circle at bottom left, rgba(201,169,78,0.10), transparent 28%),
        linear-gradient(180deg, #f6f9ff 0%, #edf5ff 100%);
}

.virtual-tour-icon {
    width: 82px;
    height: 82px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    color: var(--white);
    font-size: 2rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-soft);
}

.virtual-tour-placeholder h3 {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--brand-navy);
    margin-bottom: 0.75rem;
}

.virtual-tour-placeholder p {
    max-width: 28rem;
    color: var(--brand-slate);
    line-height: 1.9;
}

.virtual-tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1rem 1.2rem 1.2rem;
}

.facility-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(8, 18, 36, 0.86);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 2500;
}

.facility-lightbox.open {
    opacity: 1;
    visibility: visible;
}

.facility-lightbox-dialog {
    position: relative;
    width: min(100%, 1100px);
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    border-radius: 1.8rem;
    background: #0d1830;
    box-shadow: 0 24px 80px rgba(0,0,0,0.38);
}

.facility-lightbox-dialog img {
    display: block;
    width: 100%;
    max-height: calc(100vh - 8rem);
    object-fit: contain;
    background: #0d1830;
}

.facility-lightbox-caption {
    padding: 1rem 1.2rem 1.2rem;
    color: rgba(255,255,255,0.9);
    font-weight: 800;
}

.facility-lightbox-close {
    position: absolute;
    top: 1.25rem;
    inset-inline-end: 1.25rem;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    color: var(--white);
    font-size: 1.2rem;
    z-index: 2;
}

.callback-hero {
    position: relative;
    min-height: calc(100vh - 2rem);
    padding: clamp(8rem, 10vw, 10rem) 0 4.5rem;
    background:
        radial-gradient(circle at 10% 15%, rgba(201,169,78,0.18), transparent 18%),
        radial-gradient(circle at 85% 18%, rgba(255,138,0,0.18), transparent 18%),
        radial-gradient(circle at 82% 78%, rgba(66,217,244,0.16), transparent 18%),
        linear-gradient(135deg, #081f44 0%, #0b2d5c 38%, #1988d8 100%);
    overflow: hidden;
}

.callback-copy {
    color: var(--white);
}

.callback-copy .page-title,
.callback-copy .page-text {
    color: var(--white);
}

.callback-panel {
    background: rgba(255,255,255,0.94);
    border-radius: 2rem;
    box-shadow: var(--shadow-soft);
}

.callback-form .btn-neon,
.btn-neon {
    width: 100%;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    color: var(--white);
    box-shadow: 0 0 0 rgba(25,136,216,0.0), 0 0 24px rgba(25,136,216,0.26);
}

.callback-form .btn-neon:hover,
.btn-neon:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 6px rgba(25,136,216,0.10), 0 0 32px rgba(25,136,216,0.34);
}

.verify-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    align-items: center;
}

.checkbox-line {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 800;
    color: var(--brand-navy);
}

.math-inline {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 1rem;
    background: var(--brand-light);
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
}

.math-inline span {
    font-weight: 900;
    color: var(--brand-navy);
    white-space: nowrap;
}

.math-inline input {
    min-width: 0;
}

.hidden-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 1200px) {
    .facilities-grid-extended,
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .facilities-hero-grid,
    .callback-hero-grid,
    .virtual-tour-grid { grid-template-columns: 1fr; }

    .director-photo { min-height: 320px; }
}

@media (max-width: 767px) {
    .facilities-grid-extended,
    .gallery-grid,
    .virtual-tour-grid,
    .verify-row { grid-template-columns: 1fr; }

    .virtual-tour-media,
    .virtual-tour-media iframe,
    .virtual-tour-placeholder,
    .director-photo { min-height: 280px; }

    .gallery-card-body,
    .virtual-tour-footer { padding: 1rem; }

    .virtual-tour-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .callback-hero {
        padding-top: 7.5rem;
        padding-bottom: 6rem;
    }

    .math-inline {
        padding: 0.75rem 0.9rem;
    }
}


/* === News, Store, and Editorial Additions === */

.news-hero,
.store-hero {
    background:
        radial-gradient(circle at 8% 18%, rgba(201, 169, 78, 0.12), transparent 20%),
        radial-gradient(circle at 82% 16%, rgba(255, 138, 0, 0.12), transparent 20%),
        linear-gradient(135deg, #0b2d5c 0%, #114c89 45%, #1b88d8 100%);
}

.news-hero-grid .page-text,
.store-hero .page-text {
    max-width: 52rem;
}

.featured-article {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 1.5rem;
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-soft);
}

.featured-article-media {
    min-height: 24rem;
    overflow: hidden;
    border-radius: calc(var(--radius-xl) - 0.55rem);
}

.featured-article-media img,
.news-card-image img,
.news-preview-card img,
.article-hero-image img,
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image img {
    transition: transform 0.55s cubic-bezier(.2,.8,.2,1), filter 0.3s ease;
}

.store-product-grid .product-card:hover .product-image img {
    transform: scale(1.045);
    filter: saturate(1.04) contrast(1.02);
}

.featured-article-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 0.25rem;
}

.article-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    color: var(--brand-slate);
    font-size: 0.94rem;
    font-weight: 700;
}

.article-meta-line i {
    color: var(--brand-blue);
    margin-inline-end: 0.35rem;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.news-card,
.news-preview-card {
    background: var(--white);
    border-radius: 1.8rem;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-soft);
    transition: transform var(--transition), box-shadow var(--transition);
}

.news-card:hover,
.news-preview-card:hover,
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft);
}

.news-card-image {
    display: block;
    height: 15rem;
    overflow: hidden;
}

.news-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.2rem;
}

.news-card-top,
.news-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.news-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    font-size: 0.77rem;
    font-weight: 800;
    background: #edf5ff;
    color: var(--brand-blue);
}

.news-date,
.news-time {
    color: var(--brand-slate);
    font-size: 0.85rem;
    font-weight: 700;
}

.news-card h3,
.news-preview-card h3,
.product-card h3 {
    color: var(--brand-navy);
    font-size: 1.28rem;
    line-height: 1.45;
    font-weight: 900;
}

.news-card p,
.news-preview-card p,
.product-card p {
    color: var(--brand-slate);
    font-size: 0.95rem;
    line-height: 1.9;
}

.news-readmore {
    font-weight: 900;
    color: var(--brand-navy);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.news-readmore::after {
    content: '←';
    transition: transform var(--transition);
}

html[dir="ltr"] .news-readmore::after {
    content: '→';
}

.news-readmore:hover::after {
    transform: translateX(-4px);
}

html[dir="ltr"] .news-readmore:hover::after {
    transform: translateX(4px);
}

.article-hero {
    position: relative;
    min-height: 28rem;
    display: flex;
    align-items: end;
    color: var(--white);
}

.article-hero-image,
.article-hero-overlay {
    position: absolute;
    inset: 0;
}

.article-hero-overlay {
    background: linear-gradient(180deg, rgba(11,45,92,0.08), rgba(11,45,92,0.82));
}

.article-hero-content {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--header-offset) + 5rem);
    padding-bottom: 3.2rem;
}

.article-hero-content h1 {
    font-size: clamp(2rem, 3vw, 3.35rem);
    line-height: 1.2;
    font-weight: 900;
    margin: 1rem 0 0.9rem;
}

.article-hero-content p {
    max-width: 52rem;
    font-size: 1.05rem;
    line-height: 1.95;
    color: rgba(255,255,255,0.9);
}

.article-meta-light {
    color: rgba(255,255,255,0.85);
}

.article-meta-light i {
    color: var(--brand-cyan);
}

.article-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

html[dir="rtl"] .article-layout {
    flex-direction: row-reverse;
}

html[dir="ltr"] .article-layout {
    flex-direction: row;
}

.article-main {
    flex: 1 1 auto;
    min-width: 0;
}

.article-sidebar {
    width: 19.5rem;
    flex: 0 0 19.5rem;
}

.article-content-card,
.article-sidebar-card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.article-content-card {
    padding: 1.6rem;
}

.article-sidebar-card {
    padding: 1.2rem;
}

.article-sidebar-card + .article-sidebar-card {
    margin-top: 1rem;
}

.article-summary-box {
    background: linear-gradient(180deg, #f4f8ff, #ffffff);
    border: 1px solid var(--border-soft);
    border-radius: 1.25rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.article-summary-box strong,
.article-highlights h2,
.article-media-block h2 {
    display: block;
    color: var(--brand-navy);
    font-size: 1.15rem;
    font-weight: 900;
    margin-bottom: 0.65rem;
}

.article-summary-box p {
    color: var(--brand-slate);
}

.article-paragraph {
    color: var(--brand-ink);
    font-size: 1.03rem;
    line-height: 2.05;
    margin-bottom: 1rem;
}

.article-highlights {
    margin: 1.5rem 0;
    padding: 1.1rem;
    border-radius: 1.35rem;
    background: #f6faff;
    border: 1px solid var(--border-soft);
}

.article-highlights ul {
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.article-highlights li {
    position: relative;
    padding-inline-start: 1.5rem;
    color: var(--brand-navy);
    font-weight: 700;
}

.article-highlights li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.7rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
}

.article-media-block {
    margin-top: 1.5rem;
}

.article-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.gallery-item {
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    min-height: 12rem;
    box-shadow: var(--shadow-card);
}

.article-video-frame {
    position: relative;
    border-radius: 1.2rem;
    overflow: hidden;
    padding-top: 56.25%;
    box-shadow: var(--shadow-card);
}

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

.article-related-list {
    display: grid;
    gap: 0.85rem;
}

.article-related-item {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem;
    border-radius: 1rem;
    transition: background var(--transition), transform var(--transition);
}

.article-related-item:hover {
    background: #f6faff;
    transform: translateY(-2px);
}

.article-related-item img {
    width: 100%;
    height: 4.7rem;
    object-fit: cover;
    border-radius: 0.9rem;
}

.article-related-item strong {
    display: block;
    color: var(--brand-navy);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 0.25rem;
}

.article-related-item span {
    color: var(--brand-slate);
    font-size: 0.8rem;
    font-weight: 700;
}

.topic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.topic-tags span {
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    background: var(--brand-light);
    color: var(--brand-blue);
    font-size: 0.82rem;
    font-weight: 800;
}

.article-cta-box {
    margin-top: 1.75rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #0b2d5c, #1988d8);
    padding: 1.4rem;
    color: var(--white);
}

.article-cta-box h3 {
    font-size: 1.35rem;
    font-weight: 900;
    margin-bottom: 0.6rem;
}

.article-cta-box p {
    color: rgba(255,255,255,0.88);
    margin-bottom: 1rem;
}

.store-filter-bar {
    position: sticky;
    top: calc(var(--header-offset) + 0.75rem);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin: 0 auto 1.4rem;
    padding: 0.7rem;
    max-width: 960px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(214,226,240,0.9);
    border-radius: 0.5rem;
    box-shadow: 0 18px 45px rgba(11,45,92,0.08);
    backdrop-filter: blur(12px);
}

.store-filter-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--brand-navy);
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.store-filter-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(25,136,216,0.25);
    background: rgba(25,136,216,0.08);
}

.store-filter-btn.active {
    background: var(--brand-navy);
    color: var(--white);
    box-shadow: 0 12px 28px rgba(11,45,92,0.18);
}

.store-filter-btn i {
    font-size: 0.95rem;
}

.store-filter-count {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(233,241,249,0.9);
    color: var(--brand-slate);
    font-size: 0.84rem;
    font-weight: 800;
}

.store-tabs .tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.product-grid,
.product-preview-grid,
.news-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.product-card,
.product-preview-card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 14px 42px rgba(11,45,92,0.08);
}

.store-product-grid .product-card {
    position: relative;
    opacity: 0;
    animation: storeCardIn 0.58s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(min(var(--store-index, 0), 8) * 55ms);
    transform-origin: center bottom;
    transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.store-product-grid .product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(25,136,216,0.28);
    box-shadow: 0 22px 58px rgba(11,45,92,0.14);
}

.store-product-grid .product-card.store-product-leaving {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    pointer-events: none;
}

.store-product-grid .product-card.store-product-entering {
    animation: storeCardIn 0.42s cubic-bezier(.2,.8,.2,1) forwards;
}

.product-image {
    position: relative;
    height: 17rem;
    overflow: hidden;
}

.product-badge {
    position: absolute;
    top: 0.9rem;
    inset-inline-start: 0.9rem;
    padding: 0.42rem 0.65rem;
    border-radius: 0.5rem;
    background: rgba(11,45,92,0.88);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(11,45,92,0.18);
    backdrop-filter: blur(8px);
}

.product-body {
    display: flex;
    flex-direction: column;
    min-height: 12.5rem;
    padding: 1.15rem;
}

.product-body h3 {
    color: var(--brand-navy);
    font-size: 1.16rem;
    line-height: 1.45;
    margin-bottom: 0.45rem;
}

.product-body p {
    color: var(--brand-slate);
    line-height: 1.75;
    margin: 0;
}

.product-footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.1rem;
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
    color: var(--brand-slate);
    font-size: 0.82rem;
    font-weight: 700;
}

.product-price strong {
    color: var(--brand-navy);
    font-size: 1.35rem;
    font-weight: 900;
}

.product-btn {
    min-height: 48px;
    padding-inline: 1.1rem;
}

.store-buy-controls {
    display: grid;
    gap: 0.55rem;
    justify-items: end;
}

.store-qty-control {
    display: inline-grid;
    grid-template-columns: 38px 48px 38px;
    align-items: center;
    min-height: 38px;
    border: 1px solid rgba(203,213,225,0.9);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f8fafc;
}

.store-qty-control button,
.store-qty-control input {
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--brand-navy);
    font-weight: 900;
    text-align: center;
}

.store-qty-control button {
    cursor: pointer;
    font-size: 1.05rem;
}

.store-qty-control button:hover {
    background: rgba(25,136,216,0.1);
}

.store-qty-control input {
    width: 48px;
    padding: 0;
    border-inline: 1px solid rgba(203,213,225,0.9);
}

.store-cart-panel {
    position: fixed;
    inset: 0;
    z-index: 96;
}

.store-cart-panel[aria-hidden="true"] {
    display: none;
    pointer-events: none;
}

.store-cart-panel[aria-hidden="false"] {
    display: block;
}

body.has-store-cart {
    overflow: hidden;
}

.store-cart-panel[aria-hidden="true"] .store-cart-backdrop {
    opacity: 0;
}

.store-cart-panel[aria-hidden="true"] .store-cart-drawer {
    transform: translateX(calc(-100% - 24px));
}

html[dir="ltr"] .store-cart-panel[aria-hidden="true"] .store-cart-drawer,
html[lang="en"] .store-cart-panel[aria-hidden="true"] .store-cart-drawer {
    transform: translateX(calc(100% + 24px));
}

.store-cart-backdrop {
    position: fixed;
    inset: 0;
    z-index: 96;
    background: rgba(7,24,51,0.46);
    backdrop-filter: blur(5px);
    opacity: 1;
    transition: opacity 0.26s ease;
}

.store-cart-drawer {
    position: fixed;
    z-index: 97;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    inset-inline-start: auto;
    inset-inline-end: auto;
    width: min(480px, 94vw);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.98)),
        var(--white);
    box-shadow: 22px 0 70px rgba(7,24,51,0.18);
    overflow: auto;
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
}

html[dir="ltr"] .store-cart-drawer,
html[lang="en"] .store-cart-drawer {
    left: auto;
    right: 0;
    inset-inline-start: auto;
    inset-inline-end: auto;
    box-shadow: -22px 0 70px rgba(7,24,51,0.18);
}

.store-cart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(214,226,240,0.9);
}

.store-cart-head h2 {
    margin: 0.45rem 0 0;
    color: var(--brand-navy);
    font-size: 1.55rem;
}

.store-cart-close {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    color: var(--brand-navy);
    background: #eef6ff;
    border: 1px solid rgba(191,219,254,0.9);
}

.store-cart-items {
    display: grid;
    gap: 0.75rem;
}

.store-cart-line {
    display: grid;
    grid-template-columns: 72px minmax(0,1fr);
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(226,232,240,0.95);
    border-radius: 0.6rem;
    background: var(--white);
    box-shadow: 0 10px 26px rgba(11,45,92,0.06);
}

.store-cart-line img {
    width: 72px;
    height: 72px;
    border-radius: 0.45rem;
    object-fit: cover;
    background: #edf5ff;
}

.store-cart-line h3 {
    margin: 0;
    color: var(--brand-navy);
    font-size: 0.98rem;
    line-height: 1.5;
}

.store-cart-line-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.55rem;
}

.store-cart-line .store-qty-control {
    grid-template-columns: 32px 42px 32px;
}

.store-cart-line .store-qty-control button,
.store-cart-line .store-qty-control input {
    height: 34px;
}

.store-cart-remove {
    color: #b91c1c;
    background: transparent;
    border: 0;
    font-weight: 900;
    cursor: pointer;
}

.store-cart-empty {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    padding: 1.4rem;
    border: 1px dashed rgba(25,136,216,0.35);
    border-radius: 0.6rem;
    background: #f8fbff;
    text-align: center;
    color: var(--brand-slate);
}

.store-cart-empty[hidden] {
    display: none;
}

.store-cart-empty i {
    color: var(--brand-blue);
    font-size: 2rem;
}

.store-cart-empty strong {
    color: var(--brand-navy);
}

.store-coupon-box,
.store-checkout-form {
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
    border-radius: 0.6rem;
    background: #f8fbff;
    border: 1px solid rgba(226,232,240,0.95);
}

.store-coupon-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 0.5rem;
}

.store-coupon-row input,
.store-checkout-form input,
.store-checkout-form textarea {
    min-height: 46px;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.75rem 0.9rem;
}

.store-checkout-form textarea {
    min-height: 84px;
    resize: vertical;
}

.store-coupon-box small {
    color: var(--brand-slate);
    min-height: 1.2rem;
}

.store-coupon-box small.success {
    color: #0d8a3b;
}

.store-coupon-box small.error {
    color: #b91c1c;
}

.store-cart-summary {
    display: grid;
    gap: 0.5rem;
    padding: 0.95rem;
    border-radius: 0.6rem;
    background: var(--brand-navy);
    color: var(--white);
}

.store-cart-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.store-cart-summary span {
    color: rgba(255,255,255,0.76);
    font-weight: 800;
}

.store-cart-summary strong {
    font-size: 1.05rem;
    font-weight: 900;
}

.store-cart-total {
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255,255,255,0.18);
}

.store-cart-total strong {
    font-size: 1.35rem;
}

.store-checkout-status {
    margin: 0;
    color: var(--brand-slate);
    line-height: 1.7;
}

.store-checkout-status.success {
    color: #0d8a3b;
}

.store-checkout-status.error {
    color: #b91c1c;
}

@media (max-width: 767px) {
    .store-cart-drawer {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        inset-inline-start: auto;
        inset-inline-end: auto;
        width: 100%;
        max-height: 92vh;
        border-radius: 1.35rem 1.35rem 0 0;
        padding: 1rem;
        transform: translateY(0);
        box-shadow: 0 -22px 70px rgba(7,24,51,0.18);
    }

    html[dir="ltr"] .store-cart-drawer,
    html[lang="en"] .store-cart-drawer {
        left: 0;
        right: 0;
        inset-inline-start: auto;
        inset-inline-end: auto;
        box-shadow: 0 -22px 70px rgba(7,24,51,0.18);
    }

    .store-cart-panel[aria-hidden="true"] .store-cart-drawer,
    html[dir="ltr"] .store-cart-panel[aria-hidden="true"] .store-cart-drawer,
    html[lang="en"] .store-cart-panel[aria-hidden="true"] .store-cart-drawer {
        transform: translateY(calc(100% + 24px));
    }

    .product-footer {
        align-items: stretch;
    }

    .store-buy-controls {
        justify-items: stretch;
    }

    .store-qty-control {
        width: 100%;
        grid-template-columns: 44px minmax(0,1fr) 44px;
    }

    .store-coupon-row {
        grid-template-columns: 1fr;
    }
}

.store-empty-state {
    margin: 1.4rem auto 0;
    max-width: 520px;
    padding: 1.4rem;
    border: 1px dashed rgba(25,136,216,0.35);
    border-radius: 0.5rem;
    background: rgba(255,255,255,0.85);
    color: var(--brand-slate);
    text-align: center;
}

.store-empty-state i {
    display: block;
    color: var(--brand-blue);
    font-size: 1.8rem;
    margin-bottom: 0.7rem;
}

.store-empty-state strong,
.store-empty-state span {
    display: block;
}

.store-empty-state strong {
    color: var(--brand-navy);
    font-weight: 900;
    margin-bottom: 0.3rem;
}

@keyframes storeCardIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.product-preview-card {
    padding: 1.4rem;
}

.product-preview-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.35rem;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    box-shadow: var(--shadow-card);
    margin-bottom: 1rem;
}

.news-preview-card img {
    height: 14rem;
    width: 100%;
    object-fit: cover;
}

.news-preview-body {
    padding: 1.15rem;
}

@media (max-width: 1080px) {
    .news-grid,
    .product-grid,
    .product-preview-grid,
    .news-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .featured-article {
        grid-template-columns: 1fr;
    }

    .article-layout {
        flex-direction: column !important;
    }

    .article-sidebar {
        width: 100%;
        flex-basis: auto;
    }
}

@media (max-width: 760px) {
    .store-filter-bar {
        position: relative;
        top: auto;
        justify-content: center;
        flex-wrap: wrap;
        overflow-x: visible;
        padding: 0.55rem;
        scroll-snap-type: none;
    }

    .store-filter-btn,
    .store-filter-count {
        flex: 1 1 calc(50% - 0.45rem);
        min-width: 0;
        justify-content: center;
        scroll-snap-align: none;
        text-align: center;
        white-space: normal;
        line-height: 1.45;
    }

    .store-filter-count {
        display: none;
    }

    .news-grid,
    .product-preview-grid,
    .news-preview-grid,
    .article-gallery {
        grid-template-columns: 1fr;
    }

    .store-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .store-product-grid .product-card {
        border-radius: 0.45rem;
    }

    .news-card-image,
    .featured-article-media,
    .news-preview-card img {
        height: 13rem;
        min-height: 13rem;
    }

    .store-product-grid .product-image {
        height: 9.4rem;
        min-height: 9.4rem;
    }

    .store-product-grid .product-badge {
        top: 0.55rem;
        inset-inline-start: 0.55rem;
        max-width: calc(100% - 1.1rem);
        padding: 0.32rem 0.5rem;
        font-size: 0.68rem;
        line-height: 1.35;
    }

    .store-product-grid .product-body {
        min-height: 13rem;
        padding: 0.75rem;
    }

    .store-product-grid .product-body h3 {
        font-size: 0.92rem;
        line-height: 1.45;
        margin-bottom: 0.25rem;
    }

    .store-product-grid .product-body p {
        font-size: 0.78rem;
        line-height: 1.55;
    }

    .store-product-grid .product-footer {
        gap: 0.55rem;
        padding-top: 0.65rem;
    }

    .store-product-grid .product-price {
        font-size: 0.72rem;
    }

    .store-product-grid .product-price strong {
        font-size: 1rem;
    }

    .store-product-grid .store-qty-control {
        min-height: 34px;
        grid-template-columns: 34px minmax(0, 1fr) 34px;
    }

    .store-product-grid .store-qty-control button,
    .store-product-grid .store-qty-control input {
        height: 34px;
    }

    .store-product-grid .product-btn {
        min-height: 42px;
        width: 100%;
        padding-inline: 0.55rem;
        font-size: 0.82rem;
        border-radius: 0.65rem;
    }

    .article-content-card,
    .article-sidebar-card {
        padding: 1rem;
    }

    .article-hero {
        min-height: 22rem;
    }

    .article-hero-content {
        padding-top: calc(var(--header-offset) + 3.25rem);
        padding-bottom: 2rem;
    }

    .product-footer,
    .news-card-top,
    .news-card-actions,
    .article-meta-line {
        flex-direction: column;
        align-items: flex-start;
    }
}


@keyframes loaderFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.03); }
}

@keyframes loaderSweep {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(280%); }
}

@keyframes spinSlow {
    to { transform: rotate(360deg); }
}



@media (max-width: 991px), (pointer: coarse) {
    .site-loader__panel {
        width: min(100%, 320px);
        padding: 1.55rem 1.15rem 1.3rem;
        border-radius: 1.5rem;
    }

    .site-loader__logo-wrap {
        width: 88px;
        height: 88px;
    }

    .site-loader__logo {
        width: 62px;
        height: 62px;
    }

    .hero::after,
    .page-hero::after,
    .callback-hero::after,
    .news-hero::after,
    .store-hero::after,
    .hero-ring::after,
    .brand::after {
        opacity: 0.04;
    }
}


.home-sections-stack{display:flex;flex-direction:column}.home-sections-stack>section{width:100%}
.nav-dropdown{position:relative}.nav-dropdown-toggle{display:inline-flex;align-items:center;gap:.45rem;border:0;background:transparent;color:inherit;font:inherit;padding:0;cursor:pointer}.nav-dropdown-toggle i{font-size:.72rem;opacity:.72;transition:transform .2s ease}.nav-dropdown:hover .nav-dropdown-toggle i,.nav-dropdown:focus-within .nav-dropdown-toggle i{transform:rotate(180deg)}.nav-submenu{position:absolute;top:calc(100% + 14px);inset-inline-start:0;min-width:220px;background:rgba(255,255,255,.97);border:1px solid rgba(15,23,42,.08);box-shadow:0 18px 50px rgba(15,23,42,.16);border-radius:18px;padding:.6rem;display:grid;gap:.3rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s ease;z-index:25}.nav-dropdown:hover .nav-submenu,.nav-dropdown:focus-within .nav-submenu{opacity:1;visibility:visible;transform:translateY(0)}.nav-submenu-link{display:block;padding:.85rem 1rem;border-radius:12px;color:#0f172a}.nav-submenu-link:hover,.nav-submenu-link.active{background:#f8fafc}.mobile-submenu{border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:.1rem .75rem;background:rgba(255,255,255,.03)}.mobile-submenu summary{list-style:none;cursor:pointer;padding:1rem 0;font-weight:700;display:flex;align-items:center;justify-content:space-between}.mobile-submenu summary::-webkit-details-marker{display:none}.mobile-submenu summary::after{content:'+';font-size:1.1rem;opacity:.8}.mobile-submenu[open] summary::after{content:'−'}.mobile-submenu-links{display:grid;gap:.2rem;padding:0 0 .75rem}.mobile-submenu-links a{padding:.82rem .9rem!important;border-top:1px solid rgba(255,255,255,.06)}.mobile-submenu-parent-link{font-weight:700}
.custom-home-section .container{max-width:min(1080px,calc(100% - 2rem))}.custom-home-section .section-heading{max-width:860px;margin:0 auto;text-align:center}.custom-home-section .section-actions{justify-content:center}
@media (max-width:991px){.nav-dropdown{display:none}.nav-dropdown-toggle{display:none}}
.nav-dropdown-toggle.active,.nav-dropdown.is-current .nav-dropdown-toggle{color:var(--brand-blue)}

.managed-page-shell .managed-page-block{position:relative}.managed-richtext-card{max-width:min(900px,100%);margin-inline:auto}.managed-page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}.managed-page-card p{margin-bottom:0}.managed-faq-list{display:grid;gap:1rem;max-width:min(940px,100%);margin:0 auto}.managed-faq-item{background:rgba(255,255,255,.9);border:1px solid rgba(15,23,42,.08);border-radius:20px;padding:1rem 1.15rem;box-shadow:var(--shadow-card)}.managed-faq-item summary{list-style:none;cursor:pointer;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:1rem}.managed-faq-item summary::-webkit-details-marker{display:none}.managed-faq-item summary::after{content:'+';font-size:1.25rem;line-height:1;opacity:.75}.managed-faq-item[open] summary::after{content:'−'}.managed-faq-answer{padding-top:.85rem;color:var(--muted)}.managed-table-card{overflow:hidden}.managed-table-wrap{overflow:auto}.managed-table{width:100%;border-collapse:collapse;min-width:640px}.managed-table th,.managed-table td{padding:1rem 1.1rem;border-bottom:1px solid rgba(15,23,42,.08);text-align:start;vertical-align:top}.managed-table th{background:#f8fafc;font-size:.95rem}.managed-panel-section .simple-card{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.94))}
@media (max-width: 900px){.managed-page-grid{grid-template-columns:1fr 1fr}}@media (max-width: 760px){.managed-page-grid{grid-template-columns:1fr}.managed-table{min-width:0}.managed-table th,.managed-table td{padding:.85rem}.managed-faq-item{border-radius:16px}}


.managed-kpi-inline{margin-top:1.25rem}
.managed-hero-media,.managed-media-card,.managed-gallery-item{background:rgba(255,255,255,.96);border:1px solid rgba(15,23,42,.08);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-card)}
.managed-hero-media{min-height:320px}
.managed-hero-image,.managed-media-image,.managed-gallery-image{width:100%;height:100%;object-fit:cover;display:block}
.managed-media-caption,.managed-gallery-caption{display:block;padding:.9rem 1rem;color:var(--muted);font-size:.92rem}
.managed-inline-image-card{max-width:min(980px,100%);margin:0 auto}
.managed-inline-image{min-height:380px}
.managed-split-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;align-items:center}
.managed-split-media{min-height:360px}
.managed-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.managed-gallery-item img{height:240px}
@media (max-width: 980px){.managed-split-grid,.managed-gallery-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 760px){.managed-split-grid,.managed-gallery-grid{grid-template-columns:1fr}.managed-inline-image,.managed-split-media,.managed-hero-media{min-height:260px}}

/* ===== Home stages tabs ===== */
.stage-tabs-shell {
    gap: 1rem;
}

.stage-tabs {
    justify-content: center;
}

.stage-tab-button {
    min-width: 220px;
    flex: 1 1 220px;
}

.stage-tab-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,255,0.94));
}

.stage-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.stage-panel-title {
    margin: 0 0 0.45rem;
    color: var(--brand-navy);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.stage-panel-lead {
    margin: 0;
    color: var(--brand-slate);
    line-height: 1.9;
    max-width: 780px;
}

.stage-panel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    background: rgba(25, 136, 216, 0.1);
    color: var(--brand-blue);
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 820px) {
    .stage-panel-head {
        flex-direction: column;
    }

    .stage-tab-button {
        min-width: 0;
        width: 100%;
    }
}



.contact-stage-smart-shell{
    padding:1rem 1.1rem;
    border:1px solid rgba(15,23,42,.08);
    border-radius:1.4rem;
    background:rgba(255,255,255,.78);
    box-shadow:var(--shadow-card)
}
.contact-stage-smart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.field-help{margin:.35rem 0 0;color:var(--brand-slate);font-size:.95rem;line-height:1.8}
.stage-optin-line{white-space:nowrap}
.contact-stage-smart-fields{padding-top:.2rem}
@media (max-width: 820px){.contact-stage-smart-head{flex-direction:column}.stage-optin-line{white-space:normal}}

/* ===== Callback stage tabs ===== */
.callback-stage-tabs-shell {
    gap: 0.75rem;
}

.callback-stage-tabs {
    width: 100%;
}

.callback-stage-tab-button {
    min-width: 180px;
    flex: 1 1 220px;
}

.callback-stage-panel {
    padding: 1rem 1.15rem;
    border-radius: 1.4rem;
}

.callback-stage-panel-text {
    margin: 0;
    color: var(--brand-slate);
    line-height: 1.85;
}

.form-field-wide {
    grid-column: 1 / -1;
}

@media (max-width: 820px) {
    .callback-stage-tab-button {
        width: 100%;
        min-width: 0;
    }
}

/* =====================
   Facilities story experience
   Inspired by calm vertical journey layout
   ===================== */
.facilities-story-page {
    --facility-blue: var(--brand-blue);
    --facility-green: var(--brand-green);
    --facility-purple: var(--brand-purple);
    --facility-orange: var(--brand-orange);
    --facility-cyan: var(--brand-cyan);
}

.facilities-story-main {
    background:
        linear-gradient(180deg, #f7fbff 0%, #edf4fb 34%, #f8fbff 100%),
        linear-gradient(90deg, rgba(25, 136, 216, 0.04), rgba(56, 214, 122, 0.04));
}

.facilities-story-hero {
    padding-top: 10.5rem;
    padding-bottom: 4.25rem;
    min-height: auto;
    background:
        linear-gradient(135deg, rgba(10, 43, 87, 0.94) 0%, rgba(12, 56, 108, 0.95) 42%, rgba(26, 127, 212, 0.94) 100%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 100%);
    overflow: hidden;
}

.facilities-story-hero::before,
.facilities-story-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(18px);
    opacity: 0.24;
}

.facilities-story-hero::before {
    display: none;
}

.facilities-story-hero::after {
    display: none;
}

.facilities-story-hero .title,
.facilities-story-hero .section-text,
.facilities-story-hero .page-text,
.facilities-story-hero .lead,
.facilities-story-hero .facilities-summary-card h3,
.facilities-story-hero .facilities-summary-card p,
.facilities-story-hero .facilities-mini-stat span,
.facilities-story-hero .facilities-mini-stat strong {
    color: #fff;
}

.facilities-story-hero .section-text,
.facilities-story-hero .page-text,
.facilities-story-hero .lead,
.facilities-story-hero .facilities-summary-card p,
.facilities-story-hero .facilities-mini-stat span {
    color: rgba(255, 255, 255, 0.82);
}

.facilities-story-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
}

.facilities-story-copy .title {
    max-width: 50rem;
    margin-bottom: 1.25rem;
}

.facilities-story-copy .section-text {
    max-width: 46rem;
}

.facilities-story-summary {
    display: grid;
    gap: 1rem;
}

.facilities-summary-card {
    border-radius: 2rem;
    padding: 1.6rem;
    backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 20px 55px rgba(6, 25, 56, 0.2);
}

.facilities-summary-card h3 {
    font-size: clamp(1.45rem, 2vw, 2.1rem);
    line-height: 1.45;
    margin: 1rem 0 0.75rem;
}

.facilities-summary-card p {
    margin: 0;
    line-height: 1.95;
}

.facilities-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.95rem;
}

.facilities-hero-mosaic-card {
    padding: 1rem 1rem 1.35rem;
}

.facilities-hero-mosaic {
    display: grid;
    grid-template-columns: 1.15fr repeat(2, 0.75fr);
    grid-template-rows: repeat(2, minmax(7rem, 1fr));
    gap: 0.65rem;
    min-height: 18rem;
    margin-bottom: 1.15rem;
}

.facilities-hero-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 1.2rem;
}

.facilities-hero-mosaic img:first-child {
    grid-row: span 2;
}

.facilities-mini-stat {
    text-align: center;
    border-radius: 1.6rem;
    padding: 1.15rem 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.facilities-mini-stat strong {
    display: block;
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 900;
    line-height: 1;
}

.facilities-mini-stat span {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.85rem;
    line-height: 1.7;
}

.facilities-story-section {
    padding-block: 5.5rem 6.5rem;
}

.facilities-story-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.75rem);
    align-items: start;
}

.facilities-story-intro {
    position: sticky;
    top: 8.75rem;
    align-self: start;
    border-radius: 2.15rem;
    padding: 2rem 1.5rem;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(11, 45, 92, 0.08);
    box-shadow: 0 18px 45px rgba(11, 45, 92, 0.08);
}

.facilities-story-intro .title {
    font-size: clamp(2rem, 3vw, 3rem);
    margin-bottom: 1rem;
}

.facilities-story-intro .lead {
    color: var(--brand-slate);
    line-height: 1.95;
    margin: 0 0 1.25rem;
}

.facilities-story-notes {
    display: grid;
    gap: 0.8rem;
    margin-bottom: 1.35rem;
}

.facilities-story-notes div {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-weight: 700;
    color: var(--brand-navy);
}

.facilities-story-notes i {
    width: 1.7rem;
    height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(25, 136, 216, 0.12);
    color: var(--brand-blue);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.facilities-story-rail {
    position: relative;
    display: grid;
    gap: 1.75rem;
    padding: 1.5rem 0 1rem;
}

.facilities-story-path {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 4.2rem;
    width: 8rem;
    height: 100%;
    pointer-events: none;
    opacity: 0.18;
    z-index: 0;
}

.facilities-story-path path {
    fill: none;
    stroke: var(--brand-blue);
    stroke-width: 1.5;
    stroke-dasharray: 8 14;
    stroke-linecap: round;
    animation: facilitiesPathMove 18s linear infinite;
}

@keyframes facilitiesPathMove {
    to { stroke-dashoffset: -220; }
}

.facilities-story-card {
    position: relative;
    z-index: 1;
    min-height: clamp(25rem, 78vh, 42rem);
    display: flex;
    align-items: center;
    opacity: var(--story-opacity, 1);
    transform: translateX(var(--story-shift, 0px)) scale(var(--story-scale, 1));
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
    will-change: transform, opacity;
}

.glass-soft-card {
    width: min(100%, 49rem);
    margin-inline-start: auto;
    display: grid;
    grid-template-columns: minmax(15.5rem, 0.95fr) minmax(0, 1.1fr);
    gap: 1rem;
    padding: 1rem;
    border-radius: 2.4rem;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 24px 65px rgba(11, 45, 92, 0.12);
    backdrop-filter: blur(20px);
}

.facilities-story-card--reverse .glass-soft-card {
    margin-inline-start: 0;
    margin-inline-end: auto;
}

.facilities-story-media {
    position: relative;
    min-height: 21rem;
    border-radius: 1.85rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(11, 45, 92, 0.12), rgba(25, 136, 216, 0.1));
}

.facilities-story-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.9s ease, transform 1.25s ease;
}

.facilities-story-media img.active {
    opacity: 1;
    transform: scale(1);
}

.facilities-story-dots {
    position: absolute;
    inset-inline-end: 1rem;
    bottom: 1rem;
    display: flex;
    gap: 0.45rem;
    z-index: 2;
}

.facilities-story-dots span,
.facilities-story-dots button {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.48);
    transition: transform 0.25s ease, background 0.25s ease;
}

.facilities-story-dots button {
    border: 0;
    padding: 0;
    cursor: pointer;
    display: block;
    appearance: none;
    font-size: 0;
}

.facilities-story-dots span.active,
.facilities-story-dots button.active {
    background: #fff;
    transform: scale(1.18);
}

.facilities-story-dots button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.facilities-story-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.25rem 0.45rem 0.25rem 0;
}

.facilities-story-kicker {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.facilities-story-number {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
    box-shadow: 0 12px 28px rgba(11, 45, 92, 0.16);
}

.facilities-story-kicker small {
    display: inline-block;
    color: var(--brand-slate);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0;
}

.facilities-story-kicker small i {
    margin-inline-end: 0.35rem;
}

.facilities-story-card h3 {
    font-size: clamp(1.55rem, 2.4vw, 2.2rem);
    line-height: 1.45;
    margin-bottom: 0.8rem;
    color: var(--brand-navy);
}

.facilities-story-card p {
    margin: 0;
    color: var(--brand-slate);
    line-height: 1.95;
}

.facilities-story-points {
    list-style: none;
    padding: 0;
    margin: 1.05rem 0 1.2rem;
    display: grid;
    gap: 0.7rem;
}

.facilities-story-points li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--brand-navy);
    font-weight: 700;
}

.facilities-story-points i {
    flex-shrink: 0;
}

.facilities-story-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
}

.facilities-story-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.85rem 1.15rem;
    border-radius: 1rem;
    border: 1px solid rgba(11, 45, 92, 0.08);
    background: rgba(255, 255, 255, 0.72);
    font-weight: 800;
    color: var(--brand-navy);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.facilities-story-link:hover {
    transform: translateY(-2px);
    background: #fff;
    border-color: rgba(11, 45, 92, 0.16);
}

.facilities-story-card--blue .facilities-story-number,
.facilities-story-card--blue .facilities-story-points i {
    color: var(--brand-blue);
}
.facilities-story-card--blue .facilities-story-number { background: var(--brand-blue); color: #fff; }

.facilities-story-card--green .facilities-story-number,
.facilities-story-card--green .facilities-story-points i {
    color: var(--brand-green);
}
.facilities-story-card--green .facilities-story-number { background: var(--brand-green); color: #fff; }

.facilities-story-card--purple .facilities-story-number,
.facilities-story-card--purple .facilities-story-points i {
    color: var(--brand-purple);
}
.facilities-story-card--purple .facilities-story-number { background: var(--brand-purple); color: #fff; }

.facilities-story-card--orange .facilities-story-number,
.facilities-story-card--orange .facilities-story-points i {
    color: var(--brand-orange);
}
.facilities-story-card--orange .facilities-story-number { background: var(--brand-orange); color: #fff; }

.facilities-story-card--cyan .facilities-story-number,
.facilities-story-card--cyan .facilities-story-points i {
    color: var(--brand-cyan);
}
.facilities-story-card--cyan .facilities-story-number { background: var(--brand-cyan); color: var(--brand-navy); }

.facilities-story-card--blue .glass-soft-card { box-shadow: 0 24px 65px rgba(25, 136, 216, 0.14); }
.facilities-story-card--green .glass-soft-card { box-shadow: 0 24px 65px rgba(56, 214, 122, 0.14); }
.facilities-story-card--purple .glass-soft-card { box-shadow: 0 24px 65px rgba(201, 169, 78, 0.14); }
.facilities-story-card--orange .glass-soft-card { box-shadow: 0 24px 65px rgba(255, 138, 0, 0.14); }
.facilities-story-card--cyan .glass-soft-card { box-shadow: 0 24px 65px rgba(66, 217, 244, 0.14); }

.facilities-tour-section .lead {
    max-width: 56rem;
}

.facilities-tour-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
}

.facilities-tour-card {
    border-radius: 2rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid rgba(11, 45, 92, 0.08);
    box-shadow: 0 18px 42px rgba(11, 45, 92, 0.08);
}

.facilities-tour-media {
    min-height: 22rem;
    border-radius: 1.6rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(11, 45, 92, 0.06), rgba(25, 136, 216, 0.08));
}

.facilities-tour-media iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.facilities-tour-placeholder {
    min-height: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.facilities-tour-placeholder--link {
    color: inherit;
    text-decoration: none;
    transition: transform 0.25s ease, background 0.25s ease;
}

.facilities-tour-placeholder--link:hover {
    transform: translateY(-2px);
    background: rgba(25, 136, 216, 0.04);
}

.facilities-tour-icon {
    width: 4.35rem;
    height: 4.35rem;
    border-radius: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(25, 136, 216, 0.12), rgba(66, 217, 244, 0.2));
    color: var(--brand-blue);
    font-size: 1.55rem;
}

.facilities-tour-placeholder h3 {
    margin: 0 0 0.75rem;
    color: var(--brand-navy);
    font-size: 1.45rem;
}

.facilities-tour-placeholder p {
    margin: 0;
    max-width: 24rem;
    color: var(--brand-slate);
    line-height: 1.95;
}

.facilities-tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0.35rem 0.2rem;
}

.facilities-tour-footer strong {
    color: var(--brand-navy);
    font-size: 1.1rem;
    line-height: 1.6;
}

.facilities-story-cta-section {
    padding-top: 1rem;
    padding-bottom: 6rem;
}

.facilities-story-cta-box {
    background: linear-gradient(135deg, #0b2d5c 0%, #165ca8 60%, #1b84d8 100%);
}

@media (max-width: 1200px) {
    .facilities-story-path {
        right: 2.7rem;
    }

    .glass-soft-card {
        width: min(100%, 46rem);
    }
}

@media (max-width: 1024px) {
    .facilities-story-hero-grid,
    .facilities-story-layout,
    .facilities-tour-grid {
        grid-template-columns: 1fr;
    }

    .facilities-story-intro {
        position: relative;
        top: auto;
    }

    .facilities-story-path {
        right: 50%;
        transform: translateX(50%);
        opacity: 0.12;
    }

    .facilities-story-card {
        min-height: auto;
    }

    .glass-soft-card {
        width: 100%;
        margin-inline: auto;
    }
}

@media (max-width: 820px) {
    .facilities-story-hero {
        padding-top: 8.75rem;
    }

    .facilities-summary-grid {
        grid-template-columns: 1fr;
    }

    .facilities-hero-mosaic {
        min-height: 14rem;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, minmax(5.5rem, 1fr));
    }

    .facilities-hero-mosaic img:first-child {
        grid-column: span 2;
        grid-row: auto;
    }

    .glass-soft-card {
        grid-template-columns: 1fr;
    }

    .facilities-story-media,
    .facilities-tour-media {
        min-height: 17rem;
    }

    .facilities-tour-footer,
    .facilities-story-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .facilities-story-link,
    .facilities-story-actions .btn,
    .facilities-tour-footer .btn {
        width: 100%;
    }

    .facilities-story-card {
        transform: none !important;
        opacity: 1 !important;
    }

    .facilities-story-path {
        display: none;
    }
}

/* ===== Consolidated public layout refinements ===== */
:root {
    --content-fluid-width: calc(100vw - 28px);
    --content-max-width: 1380px;
    --nav-fluid-width: calc(100vw - 28px);
    --nav-max-width: 1500px;
    --hero-fluid-width: calc(100vw - 28px);
    --hero-max-width: 1560px;
    --footer-fluid-width: calc(100vw - 28px);
    --footer-max-width: 1500px;
}

@media (min-width: 1600px) {
    :root {
        --content-fluid-width: 84vw;
        --content-max-width: 1560px;
        --nav-fluid-width: 90vw;
        --nav-max-width: 1720px;
        --hero-fluid-width: 90vw;
        --hero-max-width: 1740px;
        --footer-fluid-width: 90vw;
        --footer-max-width: 1720px;
    }
}

@media (min-width: 1920px) {
    :root {
        --content-fluid-width: 80vw;
        --nav-fluid-width: 86vw;
        --hero-fluid-width: 88vw;
        --footer-fluid-width: 86vw;
    }
}

@media (min-width: 2400px) {
    :root {
        --content-fluid-width: 76vw;
        --nav-fluid-width: 82vw;
        --hero-fluid-width: 84vw;
        --footer-fluid-width: 82vw;
    }
}

html,
body {
    max-width: 100%;
}

.container {
    width: min(var(--content-max-width), var(--content-fluid-width));
}

.hero > .container {
    width: min(var(--hero-max-width), var(--hero-fluid-width));
}

.footer > .container {
    width: min(var(--footer-max-width), var(--footer-fluid-width));
}

.container,
.nav-wrap,
.hero > .container,
.footer > .container,
.nav,
.brand,
.brand-text,
.footer-grid,
.footer-col,
.footer-brand,
.footer-col ul,
.footer-grid p,
.footer-bottom,
.footer-meta,
.btn-row,
.page-hero-grid,
.split-panel,
.future-grid,
.contact-layout,
.legal-layout,
.testimonial-grid,
.future-reference-layout,
.future-reference-text,
.future-reference-collage,
.results-reference-layout,
.results-reference-copy,
.results-reference-grid,
.facilities-story-hero-grid {
    min-width: 0;
}

.section,
.page-hero,
.hero,
.footer,
.home-sections-stack > section {
    max-width: 100%;
}

.nav-wrap {
    width: min(var(--nav-max-width), var(--nav-fluid-width));
    padding: 1rem 1.2rem;
    border-radius: 2rem;
}

.nav {
    gap: 1.15rem;
}

.nav-links {
    gap: 1.2rem;
}

.nav-links a {
    font-size: 0.95rem;
}

.footer-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

.footer-col ul {
    gap: 0.82rem;
}

.footer-bottom {
    padding-top: 1.35rem;
}

.footer-col a,
.footer-col li,
.footer-grid p,
.footer-brand small,
.footer-bottom,
.footer-meta a,
.contact-list a,
.contact-list span,
.social-card span,
.map-card p {
    overflow-wrap: anywhere;
}

.calendar-table-shell,
.fees-table-shell,
.transport-table-shell,
.managed-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.calendar-table,
.fees-table,
.transport-table,
.managed-table {
    max-width: none;
}

.facilities-story-hero::before {
    right: max(-5rem, -10vw);
}

.facilities-story-hero::after {
    left: max(-2rem, -6vw);
}

@media (min-width: 992px) {
    .hero {
        min-height: 90vh;
    }
}

.feature-grid-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-reference-grid {
    gap: 1.5rem;
}

.about-reference-card {
    min-height: 265px;
    padding: 5.3rem 1.7rem 1.7rem;
    border-radius: 2rem;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.about-reference-card .icon-box {
    position: absolute;
    top: 1.45rem;
    inset-inline-end: 1.45rem;
    inset-inline-start: auto;
    width: 58px;
    height: 58px;
    border-radius: 1.15rem;
    margin: 0;
}

.about-reference-card h3 {
    font-size: clamp(1.55rem, 2vw, 1.95rem);
    margin-bottom: 0.75rem;
}

.about-reference-card p {
    font-size: 0.98rem;
    line-height: 1.9;
}

.icon-soft {
    background: linear-gradient(135deg, #f1f5fb, #ffffff);
    color: #aab7cb;
    border: 1px solid #edf2f8;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.future-reference-layout,
.results-reference-layout {
    display: grid;
    align-items: center;
    gap: 2rem;
}

.future-reference-layout {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
}

.results-reference-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

.future-reference-collage,
.results-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.future-reference-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.future-reference-stack-offset {
    padding-top: 2.1rem;
}

.future-reference-image,
.future-reference-box,
.future-reference-score {
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.future-reference-image {
    min-height: 320px;
    background: #eef5ff;
}

.future-reference-image-tall {
    min-height: 345px;
}

.future-reference-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.future-reference-image:hover img {
    transform: scale(1.05);
}

.future-reference-box {
    padding: 1.6rem;
}

.future-reference-box strong {
    display: block;
    font-size: clamp(2.1rem, 3vw, 2.5rem);
    line-height: 1.05;
    font-weight: 900;
    margin-bottom: 0.45rem;
}

.future-reference-box p {
    font-size: 0.92rem;
    line-height: 1.85;
    margin: 0;
}

.future-reference-box-gold {
    background: #ffd36a;
    color: var(--brand-navy);
}

.future-reference-score {
    background: var(--brand-blue);
    color: var(--white);
    padding: 1.85rem 1.5rem;
    text-align: center;
}

.future-reference-score strong {
    display: block;
    font-size: clamp(2.5rem, 4vw, 3.35rem);
    line-height: 1;
    font-weight: 900;
    margin-bottom: 0.55rem;
}

.future-reference-score p {
    font-size: 0.96rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.9);
    margin: 0;
}

.future-reference-title {
    max-width: 640px;
}

.future-reference-title span {
    display: inline;
}

.future-reference-lead {
    font-size: 1.08rem;
    line-height: 1.95;
    margin-bottom: 1.35rem;
}

.future-reference-list {
    gap: 0.9rem;
    margin-bottom: 1.8rem;
}

.future-reference-list li {
    color: var(--brand-navy);
    font-weight: 800;
    line-height: 1.95;
}

.results-reference-copy .lead {
    max-width: 100%;
    margin-bottom: 1.4rem;
}

.results-stat-card {
    min-height: 176px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
    border-radius: 2rem;
    padding: 2rem 1.4rem;
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.results-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft);
}

.results-stat-card strong {
    display: block;
    font-size: clamp(2.5rem, 4vw, 3.35rem);
    line-height: 1.05;
    font-weight: 900;
    margin-bottom: 0.6rem;
}

.results-stat-card p {
    color: var(--brand-slate);
    font-weight: 800;
    margin: 0;
}

.results-stat-card .blue { color: var(--brand-blue); }
.results-stat-card .green { color: var(--brand-green); }
.results-stat-card .orange { color: var(--brand-orange); }
.results-stat-card .purple { color: var(--brand-purple); }

@media (min-width: 992px) and (max-width: 1280px) {
    .future-reference-layout,
    .results-reference-layout {
        gap: 1.5rem;
    }

    .future-reference-image { min-height: 235px; }
    .future-reference-image-tall { min-height: 285px; }
    .future-reference-box strong { font-size: clamp(1.8rem, 2.4vw, 2.2rem); }
    .future-reference-score strong { font-size: clamp(2rem, 3vw, 2.8rem); }
    .results-stat-card { min-height: 160px; padding: 1.6rem 1rem; }
}

@media (max-width: 991px) {
    .topbar {
        position: fixed;
        inset-inline: 0;
        top: 0;
        padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .nav-wrap {
        position: relative;
        transition: background 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease;
        transform: translateZ(0);
    }

    .mobile-menu {
        position: absolute;
        inset-inline: 0;
        top: calc(100% + 8px);
        max-height: 0;
        overflow: hidden;
        border-radius: 1.35rem;
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 18px 40px rgba(11,45,92,0.16);
        z-index: 20;
    }

    .mobile-menu.open {
        max-height: min(72vh, 580px);
        overflow-y: auto;
    }

    .mobile-menu-inner {
        padding: 0.9rem;
    }

    body.menu-open {
        overflow: hidden;
    }

    .footer {
        padding-bottom: calc(7.8rem + env(safe-area-inset-bottom, 0px));
    }

    .footer-grid,
    .future-reference-layout,
    .results-reference-layout {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        gap: 1.2rem;
    }

    .feature-grid-six,
    .results-reference-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .future-reference-collage {
        order: 2;
    }

    .future-reference-text {
        order: 1;
    }

    .footer-col ul {
        gap: 0.55rem;
    }

    .footer-col a,
    .footer-col li,
    .footer-grid p,
    .footer-brand small,
    .footer-bottom,
    .footer-meta a {
        font-size: 0.88rem;
        line-height: 1.85;
    }

    .footer-bottom {
        display: grid;
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.7rem;
    }
}

@media (max-width: 767px) {
    :root {
        --content-fluid-width: calc(100vw - 20px);
        --nav-fluid-width: calc(100vw - 14px);
        --hero-fluid-width: calc(100vw - 20px);
        --footer-fluid-width: calc(100vw - 20px);
    }

    .topbar {
        padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
    }

    .nav-wrap {
        border-radius: 1.2rem;
        padding: 0.72rem;
    }

    .nav {
        gap: 0.55rem;
    }

    .brand {
        gap: 0.55rem;
        flex: 1 1 auto;
        max-width: calc(100% - 104px);
    }

    .brand img {
        width: 44px;
        height: 44px;
        border-radius: 0.9rem;
    }

    .brand-text .brand-title {
        font-size: 0.88rem;
    }

    .brand-text p {
        font-size: 0.68rem;
    }

    .menu-toggle {
        width: 46px;
        height: 46px;
        border-radius: 0.9rem;
        flex-shrink: 0;
    }

    .lang-switch {
        flex-shrink: 0;
    }

    .lang-btn {
        min-width: 38px;
        width: 38px;
        height: 34px;
        border-radius: 999px;
    }

    .mobile-menu {
        top: calc(100% + 6px);
        border-radius: 1.15rem;
    }

    .mobile-menu a {
        padding: 0.85rem 0.9rem;
        font-size: 0.92rem;
    }

    .footer {
        padding-top: 3.4rem;
    }

    .footer-grid {
        gap: 1rem;
        padding-bottom: 1.2rem;
    }

    .footer-col,
    .footer-brand {
        text-align: center;
    }

    .footer-brand,
    .social-links {
        justify-content: center;
    }

    .feature-grid-six,
    .future-reference-collage,
    .results-reference-grid {
        grid-template-columns: 1fr;
    }

    .about-reference-card {
        min-height: auto;
        padding-top: 5rem;
    }

    .future-reference-stack-offset {
        padding-top: 0;
    }

    .future-reference-image,
    .future-reference-image-tall {
        min-height: 260px;
    }

    .results-stat-card {
        min-height: 140px;
    }
}

/* ===== Mobile overflow and two-column action fixes ===== */
html {
    overflow-x: hidden;
}

.hero-content,
.hero-title,
.hero-title .hero-line,
.hero-title .highlight,
.hero-text {
    max-width: 100%;
}

.hero-title,
.hero-title .hero-line,
.hero-title .highlight,
.hero-text {
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .hero {
        overflow-x: clip;
    }

    .hero-grid,
    .hero-content {
        width: 100%;
        overflow-x: clip;
    }

    .hero-tag {
        max-width: 100%;
        white-space: normal;
    }

    .hero-title {
        font-size: clamp(1.9rem, 8vw, 2.55rem);
        line-height: 1.18;
    }

    .home-sections-stack .btn-row,
    .hero .btn-row,
    .section .btn-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 0.7rem;
    }

    .home-sections-stack .btn-row > .btn,
    .home-sections-stack .btn-row > a,
    .hero .btn-row > .btn,
    .hero .btn-row > a,
    .section .btn-row > .btn,
    .section .btn-row > a {
        width: 100%;
        min-width: 0;
        min-height: 54px;
        padding-inline: 0.75rem;
        text-align: center;
        white-space: normal;
    }

    .home-sections-stack .btn-row > :only-child,
    .hero .btn-row > :only-child,
    .section .btn-row > :only-child {
        grid-column: 1 / -1;
    }

    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .hero-stat {
        min-width: 0;
        padding: 1rem 0.65rem;
    }
}

@media (max-width: 390px) {
    .home-sections-stack .btn-row,
    .hero .btn-row,
    .section .btn-row {
        gap: 0.55rem;
    }

    .home-sections-stack .btn-row > .btn,
    .home-sections-stack .btn-row > a,
    .hero .btn-row > .btn,
    .hero .btn-row > a,
    .section .btn-row > .btn,
    .section .btn-row > a {
        font-size: 0.9rem;
        padding-inline: 0.55rem;
    }
}

/* ===== Mobile stage tabs and stage numbers ===== */
.stage-card {
    isolation: isolate;
}

.stage-number {
    z-index: 2;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .stage-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .stage-tab-button {
        width: 100%;
        min-width: 0;
        padding: 0.95rem 0.8rem;
    }

    .stage-tab-button .tab-title,
    .stage-tab-button small {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .stage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .stage-card {
        padding: 3rem 0.9rem 1.15rem;
        overflow: visible;
    }

    .stage-number {
        top: 0.8rem;
        inset-inline-start: 0.9rem;
        width: 42px;
        height: 42px;
        font-size: 0.95rem;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
    }

    .stage-card h3 {
        font-size: 1rem;
        line-height: 1.45;
    }

    .stage-card p {
        font-size: 0.88rem;
        line-height: 1.75;
    }
}

@media (max-width: 380px) {
    .stage-grid,
    .stage-tabs {
        gap: 0.65rem;
    }

    .stage-card {
        padding-inline: 0.75rem;
    }

    .stage-card h3 {
        font-size: 0.94rem;
    }
}

/* ===== Academic calendar mobile visibility ===== */
.page-academic .tab-panel.active {
    display: block;
}

@media (max-width: 767px) {
    .page-academic .tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .page-academic .tab-button {
        width: 100%;
        min-width: 0;
        padding: 0.85rem 0.75rem;
    }

    .page-academic .tab-button .tab-title,
    .page-academic .tab-button small {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-academic .tab-panel.active {
        display: block;
        overflow: visible;
    }

    .page-academic .calendar-table-shell {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .page-academic .calendar-table,
    .page-academic .calendar-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .page-academic .calendar-table tbody tr {
        display: block;
        width: 100%;
    }
}

/* ===== Final stage and metric layout lock ===== */
#contact-home .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
}

.contact-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
}

#contact-home .metric-card,
.contact-metrics-grid .metric-card {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stage-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stage-tab-button {
    width: 100%;
    min-width: 0;
}

/* ألوان التابات — بنين */
.stage-tab-button.stage-tab-boys.active {
    background: linear-gradient(135deg, #1e3a5f, #1988d8);
}
/* ألوان التابات — بنات */
.stage-tab-button.stage-tab-girls {
    border-color: rgba(16, 163, 127, 0.2);
}
.stage-tab-button.stage-tab-girls:hover {
    border-color: rgba(16, 163, 127, 0.4);
}
.stage-tab-button.stage-tab-girls.active {
    background: linear-gradient(135deg, #0a7a5e, #10a37f);
    border-color: transparent;
}
/* ألوان التابات — البرنامج ثنائي اللغة */
.stage-tab-button.stage-tab-bilingual {
    border-color: rgba(234, 88, 12, 0.2);
}
.stage-tab-button.stage-tab-bilingual:hover {
    border-color: rgba(234, 88, 12, 0.4);
}
.stage-tab-button.stage-tab-bilingual.active {
    background: linear-gradient(135deg, #c2410c, #ea580c);
    border-color: transparent;
}

.stage-card {
    overflow: visible !important;
    padding-top: 4rem;
}

.stage-number {
    top: 1rem !important;
    inset-inline-start: 1rem !important;
    width: 46px;
    height: 46px;
    transform: none !important;
}

@media (max-width: 767px) {
    #contact-home .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.85rem;
    }

    .contact-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.85rem;
    }

    #contact-home .metric-card,
    .contact-metrics-grid .metric-card {
        min-height: 132px;
        padding: 1rem 0.65rem;
    }

    #contact-home .metric-card strong,
    .contact-metrics-grid .metric-card strong {
        font-size: clamp(1.85rem, 8vw, 2.35rem);
    }

    #contact-home .metric-card p,
    .contact-metrics-grid .metric-card p {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    .stage-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .stage-tab-button {
        min-width: 0 !important;
        width: 100% !important;
    }

    .stage-card {
        padding-top: 4rem !important;
    }

    .stage-number {
        top: 0.9rem !important;
        inset-inline-start: 0.9rem !important;
        width: 42px;
        height: 42px;
    }
}

/* ===== Callback request cleanup and form redesign ===== */
.page-callback .form-field-wide {
    display: none !important;
}

.page-callback .callback-hero {
    min-height: auto;
    padding-bottom: 4rem;
}

.page-callback .callback-form-panel {
    align-self: start;
}

.page-callback .callback-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(1.2rem, 2vw, 1.8rem);
    border: 1px solid rgba(255, 255, 255, 0.72);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,250,255,0.94)),
        radial-gradient(circle at 12% 4%, rgba(66, 217, 244, 0.18), transparent 28%),
        radial-gradient(circle at 90% 18%, rgba(201, 169, 78, 0.12), transparent 30%);
    box-shadow: 0 24px 70px rgba(7, 24, 51, 0.22);
}

.page-callback .callback-panel::before {
    content: '';
    position: absolute;
    inset-inline-start: 1.3rem;
    inset-inline-end: 1.3rem;
    top: 0;
    height: 5px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan), var(--brand-green), var(--brand-orange), var(--brand-purple));
}

.page-callback .callback-panel::after {
    content: '';
    position: absolute;
    width: 10rem;
    height: 10rem;
    inset-inline-end: -4rem;
    bottom: -4rem;
    border-radius: 50%;
    background: rgba(25, 136, 216, 0.08);
    pointer-events: none;
}

.page-callback .callback-panel > * {
    position: relative;
    z-index: 1;
}

.page-callback .callback-panel > p {
    display: none;
}

.page-callback .callback-panel h2 {
    margin-bottom: 1rem;
}

.page-callback .callback-form .form-grid {
    gap: 0.95rem;
}

.page-callback .callback-form .form-field {
    display: grid;
    gap: 0.45rem;
}

.page-callback .callback-form label {
    color: var(--brand-navy);
    font-size: 0.86rem;
    font-weight: 900;
}

.page-callback .callback-form input:not([type="checkbox"]),
.page-callback .callback-form select,
.page-callback .callback-form textarea {
    width: 100%;
    min-height: 54px;
    border: 1px solid #dbe9f6;
    border-radius: 1.05rem;
    background: rgba(255,255,255,0.92);
    color: var(--brand-ink);
    padding: 0.9rem 1rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 24px rgba(15, 23, 42, 0.04);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.page-callback .callback-form select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--brand-blue) 50%),
        linear-gradient(135deg, var(--brand-blue) 50%, transparent 50%);
    background-position: 1rem calc(50% - 3px), 1.35rem calc(50% - 3px);
    background-size: 7px 7px, 7px 7px;
    background-repeat: no-repeat;
    padding-inline-start: 2.4rem;
}

.page-callback .callback-form textarea {
    min-height: 118px;
    resize: vertical;
}

.page-callback .callback-form input:not([type="checkbox"]):focus,
.page-callback .callback-form select:focus,
.page-callback .callback-form textarea:focus {
    border-color: var(--brand-blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(25, 136, 216, 0.12), 0 14px 28px rgba(15, 23, 42, 0.06);
}

.page-callback .verify-row {
    margin-top: 1rem;
    padding: 0.8rem;
    border: 1px solid #dbe9f6;
    border-radius: 1.2rem;
    background: linear-gradient(180deg, #f7fbff, #ffffff);
}

.page-callback .math-inline {
    background: #eef7ff;
}

.page-callback .callback-submit {
    margin-top: 1rem;
    min-height: 58px;
    border-radius: 1.15rem;
}

@media (min-width: 992px) {
    .page-callback .footer {
        padding-top: 3rem;
        padding-bottom: 1.6rem;
    }

    .page-callback .footer-grid {
        gap: 1rem;
        padding-bottom: 1.15rem;
    }

    .page-callback .footer-bottom {
        padding-top: 0.85rem;
    }
}

@media (max-width: 767px) {
    .page-callback .callback-panel {
        border-radius: 1.5rem;
    }

    .page-callback .callback-form .form-grid {
        grid-template-columns: 1fr;
    }

    .page-callback .verify-row {
        grid-template-columns: 1fr;
    }
}

/* ===== Homepage video hero ===== */
.video-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    width: 100%;
    max-width: 100%;
    padding: clamp(8.5rem, 15vh, 12.5rem) 0 clamp(3rem, 8vh, 5.25rem);
    overflow: hidden;
    isolation: isolate;
    color: var(--white);
    background: #071f44;
}

.video-hero-media-wrap,
.video-hero-poster,
.video-hero-media,
.video-hero-slider,
.video-hero-slide,
.video-hero-shade,
.video-hero-lines,
.video-hero-aura {
    position: absolute;
    pointer-events: none;
}

.video-hero-media-wrap {
    inset: 0;
    z-index: -5;
    overflow: hidden;
    background: #071f44;
}

.video-hero-poster,
.video-hero-media,
.video-hero-slider,
.video-hero-slide {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-hero-poster {
    z-index: 0;
    filter: saturate(1.08) contrast(1.03);
}

.video-hero-media {
    z-index: 1;
    transform: scale(1.02);
    filter: saturate(1.08) contrast(1.05);
}

.video-hero-slider {
    z-index: 1;
    overflow: hidden;
}

.video-hero-slide {
    opacity: 0;
    transform: scale(1.04);
    filter: saturate(1.08) contrast(1.05);
    transition: opacity 1.05s ease, transform 6s ease;
}

.video-hero-slide.is-active {
    opacity: 1;
    transform: scale(1.015);
}

.video-hero-shade {
    inset: 0;
    z-index: -4;
    background:
        linear-gradient(90deg, rgba(5, 23, 51, 0.94) 0%, rgba(5, 23, 51, 0.72) 42%, rgba(5, 23, 51, 0.35) 100%),
        linear-gradient(180deg, rgba(5, 23, 51, 0.62) 0%, rgba(5, 23, 51, 0.16) 48%, rgba(5, 23, 51, 0.9) 100%);
}

html[dir="rtl"] .video-hero-shade {
    background:
        linear-gradient(270deg, rgba(5, 23, 51, 0.94) 0%, rgba(5, 23, 51, 0.72) 42%, rgba(5, 23, 51, 0.35) 100%),
        linear-gradient(180deg, rgba(5, 23, 51, 0.62) 0%, rgba(5, 23, 51, 0.16) 48%, rgba(5, 23, 51, 0.9) 100%);
}

.video-hero-lines {
    inset: 0;
    z-index: -3;
    opacity: 0.36;
    background-image:
        linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 96px 96px;
    -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 0 34%, transparent 72%);
    mask-image: radial-gradient(circle at 50% 38%, #000 0 34%, transparent 72%);
}

.video-hero-aura {
    z-index: -2;
    width: clamp(220px, 26vw, 430px);
    height: clamp(220px, 26vw, 430px);
    border-radius: 999px;
    filter: blur(54px);
    opacity: 0.72;
}

.video-hero-aura-one {
    inset-inline-start: -7rem;
    bottom: 12%;
    background: rgba(33, 158, 224, 0.55);
    animation: floatSlow 10s ease-in-out infinite;
}

.video-hero-aura-two {
    inset-inline-end: -6rem;
    top: 18%;
    background: rgba(56, 214, 122, 0.36);
    animation: pulseSoft 5s ease-in-out infinite;
}

.video-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(280px, 0.42fr);
    align-items: end;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.video-hero-copy {
    max-width: 860px;
}

.video-hero-kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    max-width: 100%;
}

.video-hero-kicker-school {
    display: inline-block;
    flex: 0 1 auto;
    max-width: min(100%, 21rem);
    font-weight: 900;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.video-hero-kicker-pill {
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 0.65rem;
    max-width: 100%;
    padding: 0.82rem 1.08rem;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    background: rgba(255,255,255,0.13);
    box-shadow: 0 18px 44px rgba(3, 14, 32, 0.22);
    color: #eaf8ff;
    font-weight: 900;
    line-height: 1.5;
    white-space: normal;
    backdrop-filter: blur(16px);
}

.video-hero-kicker-dot {
    width: 0.78rem;
    height: 0.78rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--brand-green);
    box-shadow: 0 0 0 0.55rem rgba(56, 214, 122, 0.14);
}

.video-hero-title {
    max-width: 980px;
    margin: 1.2rem 0 1rem;
    font-size: clamp(2.6rem, 6.4vw, 6.6rem);
    line-height: 1.03;
    font-weight: 900;
    color: var(--white);
    overflow-wrap: anywhere;
}

.video-hero-title::first-line {
    color: #ffd36a;
}

.video-hero-lead {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,0.84);
    font-size: clamp(1.02rem, 1.35vw, 1.25rem);
    line-height: 1.95;
    overflow-wrap: anywhere;
}

.video-hero-actions {
    margin-top: 1.6rem;
}

.video-hero-actions .btn {
    min-width: 170px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.22);
}

.video-hero-panel {
    display: grid;
    gap: 0.82rem;
    padding: 0.95rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 26px;
    background: rgba(7, 31, 68, 0.44);
    box-shadow: 0 24px 70px rgba(3, 14, 32, 0.34);
    backdrop-filter: blur(16px);
}

.video-hero-stat {
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
}

.video-hero-stat strong {
    display: block;
    color: var(--white);
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1;
    font-weight: 900;
}

.video-hero-stat span {
    display: block;
    margin-top: 0.55rem;
    color: rgba(255,255,255,0.74);
    font-size: 0.9rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

@media (max-width: 991px) {
    .video-hero {
        padding-top: clamp(8.25rem, 18vh, 10.5rem);
    }

    .video-hero-inner {
        grid-template-columns: 1fr;
        align-items: center;
    }

    .video-hero-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
}

@media (max-width: 767px) {
    .video-hero {
        min-height: 100svh;
        padding: 8rem 0 2.2rem;
        align-items: end;
    }

    .video-hero-media,
    .video-hero-slide {
        transform: scale(1.08);
    }

    .video-hero-slide.is-active {
        transform: scale(1.04);
    }

    .video-hero-shade,
    html[dir="rtl"] .video-hero-shade {
        background:
            linear-gradient(180deg, rgba(5, 23, 51, 0.5) 0%, rgba(5, 23, 51, 0.48) 34%, rgba(5, 23, 51, 0.94) 100%),
            linear-gradient(90deg, rgba(5, 23, 51, 0.52) 0%, rgba(5, 23, 51, 0.2) 100%);
    }

    .video-hero-title {
        font-size: clamp(2.05rem, 9vw, 3rem);
        line-height: 1.12;
    }

    .video-hero-lead {
        font-size: 0.98rem;
        line-height: 1.85;
    }

    .video-hero-kicker {
        gap: 0.55rem;
    }

    .video-hero-kicker-school {
        font-size: 0.88rem;
    }

    .video-hero-kicker-pill {
        padding: 0.72rem 0.9rem;
        font-size: 0.88rem;
    }

    .video-hero-panel {
        gap: 0.58rem;
        padding: 0.58rem;
        border-radius: 20px;
    }

    .video-hero-stat {
        padding: 0.82rem 0.55rem;
        border-radius: 16px;
        text-align: center;
    }

    .video-hero-stat strong {
        font-size: 1.22rem;
    }

    .video-hero-stat span {
        font-size: 0.72rem;
        line-height: 1.5;
    }
}

@media (max-width: 430px) {
    .video-hero-inner {
        gap: 1rem;
    }

    .video-hero-actions {
        margin-top: 1.15rem;
    }

    .video-hero-actions .btn {
        min-width: 0;
        min-height: 54px;
    }
}

/* ===== Stages standalone page ===== */
.page-stages .stages-page-hero {
    background:
        radial-gradient(circle at 14% 18%, rgba(56, 214, 122, 0.18), transparent 20%),
        radial-gradient(circle at 82% 20%, rgba(255, 138, 0, 0.16), transparent 22%),
        linear-gradient(135deg, #0b2d5c 0%, #145c98 52%, #1988d8 100%);
    color: var(--white);
}

.page-stages .page-title,
.page-stages .page-text {
    color: var(--white);
}

.stages-page-hero-grid {
    align-items: center;
}

.stages-hero-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.9rem;
    padding: 1.25rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 2rem;
    background: rgba(255,255,255,0.1);
    box-shadow: 0 28px 80px rgba(6, 26, 57, 0.28);
    backdrop-filter: blur(18px);
}

.stages-hero-card::before {
    content: '';
    position: absolute;
    width: 210px;
    height: 210px;
    inset-inline-end: -72px;
    inset-block-start: -82px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 68%);
    pointer-events: none;
}

.stages-hero-total,
.stages-hero-row {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 1.35rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.07));
}

.stages-hero-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
}

.stages-hero-total strong {
    color: var(--white);
    font-size: clamp(2.1rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1;
}

.stages-hero-total span,
.stages-hero-row p {
    color: rgba(255,255,255,0.76);
    font-weight: 800;
}

.stages-hero-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
}

.stage-route-dot {
    width: 42px;
    height: 42px;
    border-radius: 1rem;
    background: var(--brand-blue);
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

.stage-route-dot.girls {
    background: linear-gradient(135deg, var(--brand-purple), #d946ef);
}

.stage-route-dot.boys {
    background: linear-gradient(135deg, var(--brand-green), var(--brand-blue));
}

.stages-hero-row h3 {
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 900;
    margin-bottom: 0.22rem;
}

.stages-hero-row p {
    margin: 0;
    font-size: 0.92rem;
}

.page-stages #stages,
.page-stages #contact-home {
    scroll-margin-top: 130px;
}

.director-photo {
    object-fit: contain;
    object-position: center bottom;
    background: #edf2f4;
}

.fees-table-shell,
.transport-table-shell {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    .stages-hero-card {
        padding: 0.9rem;
        border-radius: 1.45rem;
    }

    .stages-hero-total,
    .stages-hero-row {
        border-radius: 1.05rem;
    }

    .stages-hero-total {
        padding: 1rem;
    }

    .stages-hero-row {
        padding: 0.9rem;
    }

    .stage-route-dot {
        width: 36px;
        height: 36px;
        border-radius: 0.85rem;
    }
}

/* ===== Noor AI Assistant ===== */
html[data-noor-theme="sports"] {
    --brand-blue: #18a86b;
    --brand-cyan: #50e1a0;
    --brand-purple: #1988d8;
    --shadow-glow: 0 18px 48px rgba(24, 168, 107, 0.18);
}

html[data-noor-theme="programming"] {
    --brand-blue: #1677d2;
    --brand-cyan: #42d9f4;
    --brand-purple: #7c3aed;
    --shadow-glow: 0 18px 48px rgba(66, 217, 244, 0.2);
}

html[data-noor-theme="arts"] {
    --brand-blue: #132449;
    --brand-cyan: #C9A94E;
    --brand-purple: #0d1932;
    --shadow-glow: 0 18px 48px rgba(201, 169, 78, 0.2);
}

html[data-noor-theme="fees"] {
    --brand-blue: #e47b00;
    --brand-cyan: #ffbf3d;
    --brand-purple: #0b2d5c;
    --shadow-glow: 0 18px 48px rgba(255, 138, 0, 0.2);
}

body.noor-open {
    overflow: hidden;
}

.noor-widget {
    --noor-primary: var(--brand-blue);
    --noor-secondary: var(--brand-cyan);
    --noor-accent: var(--brand-green);
    --noor-glass: rgba(255, 255, 255, 0.13);
    --noor-glass-strong: rgba(255, 255, 255, 0.2);
    --noor-border: rgba(255, 255, 255, 0.22);
    --noor-dark: rgba(7, 24, 51, 0.88);
    font-family: 'Cairo', sans-serif;
}

.noor-fab {
    position: fixed;
    inset-inline-start: 1.45rem;
    inset-block-end: 3rem;
    z-index: 1750;
    width: 180px;
    height: 180px;
    border: 0;
    border-radius: 0;
    color: var(--white);
    background: transparent;
    cursor: pointer;
    isolation: isolate;
    display: grid;
    place-items: center;
    pointer-events: auto;
}

.noor-fab-aura,
.noor-fab-core,
.noor-fab-spark {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.noor-fab-aura {
    display: none;
}

.noor-fab-core {
    inset: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    overflow: visible;
}

.noor-fab-face {
    --ishraqa-talk-scale: 1;
    position: absolute;
    inset: 0;
    border-radius: 0;
    background-image: var(--ishraqa-avatar);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    transform: none;
    overflow: visible;
}

.noor-fab-face::before,
.noor-character-face::before {
    content: "";
    position: absolute;
    left: 56%;
    top: 59.5%;
    z-index: 2;
    width: 18%;
    height: 4.8%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(121, 42, 35, 0.72), rgba(70, 18, 22, 0.82));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 0 0 1px rgba(245, 132, 119, 0.2);
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0.35);
    transform-origin: center;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.noor-fab-spark {
    width: 26px;
    height: 26px;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 35% 35%, #fff, transparent 26%),
        linear-gradient(135deg, var(--noor-secondary), var(--noor-primary));
    box-shadow: 0 0 24px color-mix(in srgb, var(--noor-primary) 60%, transparent);
}

@property --noor-fab-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes noor-fab-border-spin {
    to { --noor-fab-angle: 360deg; }
}

.noor-fab-text {
    position: absolute;
    bottom: -0.05rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 112px;
    padding: 0.18rem 0.52rem 0.22rem;
    border-radius: 999px;
    color: var(--white);
    font-size: 0.64rem;
    font-weight: 900;
    line-height: 1.25;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid transparent;
    background:
        linear-gradient(rgba(11, 45, 92, 0.72), rgba(11, 45, 92, 0.72)) padding-box,
        conic-gradient(
            from var(--noor-fab-angle),
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.96) 16%,
            rgba(174, 183, 196, 0.95) 31%,
            rgba(235, 240, 247, 0.98) 48%,
            rgba(141, 151, 166, 0.86) 62%,
            rgba(255, 255, 255, 0.94) 78%,
            rgba(255, 255, 255, 0.14) 100%
        ) border-box;
    box-shadow:
        0 8px 20px rgba(3, 16, 38, 0.22),
        0 0 16px rgba(226, 232, 240, 0.34);
    animation: noor-fab-border-spin 4s linear infinite;
}

.noor-fab:hover {
    transform: translateY(-3px) scale(1.04);
}

.noor-portal {
    position: fixed;
    inset: 0;
    z-index: 1900;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 2rem);
    color: var(--white);
}

.noor-portal.is-open {
    display: grid;
}

.noor-portal[hidden] {
    display: none;
}

.noor-portal-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--noor-primary) 20%, transparent), transparent 28%),
        radial-gradient(circle at 80% 18%, rgba(255,255,255,0.14), transparent 24%),
        linear-gradient(135deg, rgba(7,24,51,0.96), rgba(11,45,92,0.93), color-mix(in srgb, var(--noor-primary) 45%, #0b2d5c));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.noor-close {
    position: absolute;
    inset-block-start: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 3;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: var(--white);
    cursor: pointer;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.noor-portal-shell {
    position: relative;
    z-index: 2;
    width: min(100%, 1120px);
    min-height: min(720px, calc(100svh - 2rem));
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 2.1rem;
    background: rgba(255,255,255,0.1);
    box-shadow: 0 36px 110px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
}

.noor-presence,
.noor-panel {
    min-width: 0;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 1.55rem;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.noor-presence {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06)),
        radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--noor-primary) 26%, transparent), transparent 42%);
}

.noor-core {
    width: clamp(118px, 17vw, 174px);
    height: clamp(118px, 17vw, 174px);
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,0.18), transparent 58%),
        linear-gradient(135deg, color-mix(in srgb, var(--noor-primary) 52%, transparent), rgba(255,255,255,0.08));
    box-shadow:
        0 0 0 14px rgba(255,255,255,0.06),
        0 28px 70px color-mix(in srgb, var(--noor-primary) 32%, transparent);
    position: relative;
    transition: transform 0.16s linear, box-shadow 0.28s ease;
}

.noor-core.is-thinking {
    animation: noorCoreThink 1s ease-in-out infinite;
}

.noor-core span {
    position: absolute;
    width: 7px;
    height: 42%;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--white), var(--noor-secondary));
    transform-origin: center bottom;
    opacity: 0.8;
    animation: noorWave 1.2s ease-in-out infinite;
}

.noor-core span:nth-child(1) { transform: translateX(-24px) scaleY(0.55); animation-delay: 0s; }
.noor-core span:nth-child(2) { transform: translateX(-8px) scaleY(0.82); animation-delay: 0.12s; }
.noor-core span:nth-child(3) { transform: translateX(8px) scaleY(0.68); animation-delay: 0.24s; }
.noor-core span:nth-child(4) { transform: translateX(24px) scaleY(0.95); animation-delay: 0.36s; }

.noor-presence-copy {
    margin-top: 2rem;
}

.noor-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.58rem 0.95rem;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.86);
    font-size: 0.88rem;
    font-weight: 900;
}

.noor-presence h2 {
    margin-top: 1rem;
    color: var(--white);
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.12;
    font-weight: 900;
}

.noor-presence p {
    margin: 1rem auto 0;
    max-width: 520px;
    color: rgba(255,255,255,0.78);
    line-height: 1.95;
}

.noor-panel {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 0.9rem;
    padding: 1rem;
}

.noor-thread {
    min-height: 320px;
    max-height: min(54svh, 520px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding-inline-end: 0.15rem;
}

.noor-message {
    max-width: 88%;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 1.15rem;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    animation: noorMessageIn 0.28s ease both;
}

.noor-message strong {
    display: block;
    margin-bottom: 0.28rem;
    color: var(--white);
    font-size: 0.9rem;
}

.noor-message p {
    margin: 0;
    line-height: 1.85;
}

.noor-message-user {
    align-self: flex-end;
    background: linear-gradient(135deg, color-mix(in srgb, var(--noor-primary) 72%, rgba(255,255,255,0.18)), rgba(255,255,255,0.12));
}

.noor-message-bot {
    align-self: flex-start;
}

.noor-message-rich {
    width: min(96%, 470px);
    max-width: 96%;
    padding: 1rem;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)),
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--noor-primary) 22%, transparent), transparent 46%);
    box-shadow: 0 18px 44px rgba(0,0,0,0.18);
}

.noor-insights {
    margin-top: 0.9rem;
    padding: 0.78rem;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 0.95rem;
    background: rgba(7, 24, 51, 0.16);
}

.noor-insights-label,
.noor-actions-label {
    display: block;
    margin-bottom: 0.55rem;
    color: rgba(255,255,255,0.72);
    font-size: 0.78rem;
    font-weight: 800;
}

.noor-insights ul {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.noor-insights li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 0.45rem;
    align-items: start;
    color: rgba(255,255,255,0.9);
    line-height: 1.65;
    font-size: 0.86rem;
}

.noor-insights i {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--white);
    background: color-mix(in srgb, var(--noor-primary) 70%, rgba(255,255,255,0.16));
    font-size: 0.68rem;
    margin-top: 0.15rem;
}

.noor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.noor-actions a,
.noor-chips button {
    min-height: 42px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    padding: 0.56rem 0.9rem;
    background: rgba(255,255,255,0.13);
    color: var(--white);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.noor-actions a:hover,
.noor-chips button:hover {
    background: color-mix(in srgb, var(--noor-primary) 34%, rgba(255,255,255,0.14));
}

.noor-link-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    margin-top: 0.85rem;
}

.noor-link-cards .noor-actions-label {
    margin: 0 0 0.05rem;
}

.noor-link-cards a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    min-height: 64px;
    width: 100%;
    border-radius: 1rem;
    padding: 0.7rem;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.09)),
        color-mix(in srgb, var(--noor-primary) 12%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.noor-link-cards a:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--noor-secondary) 62%, rgba(255,255,255,0.3));
    background: linear-gradient(135deg, color-mix(in srgb, var(--noor-primary) 34%, rgba(255,255,255,0.12)), rgba(255,255,255,0.1));
}

.noor-link-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--noor-primary) 72%, #ffffff);
    color: #062a53;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--noor-primary) 26%, transparent);
}

.noor-link-content {
    min-width: 0;
    display: grid;
    gap: 0.16rem;
}

.noor-link-content strong {
    margin: 0;
    color: var(--white);
    font-size: 0.9rem;
}

.noor-link-content small {
    color: rgba(255,255,255,0.68);
    font-size: 0.75rem;
    line-height: 1.45;
}

.noor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.noor-form {
    display: grid;
    gap: 0.7rem;
}

.noor-lead-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.noor-lead-fields[hidden] {
    display: none;
}

.noor-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
}

.noor-form input {
    min-width: 0;
    min-height: 54px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    padding: 0.85rem 1rem;
    background: rgba(255,255,255,0.12);
    color: var(--white);
    outline: none;
    font: inherit;
    font-weight: 700;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.noor-form input::placeholder {
    color: rgba(255,255,255,0.62);
}

.noor-form input:focus {
    border-color: color-mix(in srgb, var(--noor-secondary) 76%, white);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--noor-primary) 24%, transparent);
}

.noor-input-row button {
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--noor-primary), var(--noor-secondary));
    color: var(--white);
    cursor: pointer;
    box-shadow: 0 16px 38px color-mix(in srgb, var(--noor-primary) 28%, transparent);
}

.noor-status {
    min-height: 1.4rem;
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: 0.86rem;
}

@keyframes noorBreath {
    0%, 100% { transform: scale(0.92); opacity: 0.65; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes noorCoreThink {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes ishraqaAttentive {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: saturate(1);
    }
    50% {
        transform: translateY(-2px) scale(1.025);
        filter: saturate(1.12);
    }
}

@keyframes ishraqaTalk {
    0%, 100% { transform: translateY(0) scale(var(--ishraqa-talk-scale, 1)); }
    50% { transform: translateY(-1px) scale(calc(var(--ishraqa-talk-scale, 1) + 0.015)); }
}

@keyframes ishraqaLipSync {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scaleY(0.35);
    }
    42% {
        opacity: 0.82;
        transform: translate(-50%, -50%) scaleY(1.75);
    }
    70% {
        opacity: 0.52;
        transform: translate(-50%, -50%) scaleY(0.75);
    }
}

@keyframes noorWave {
    0%, 100% { height: 30%; opacity: 0.55; }
    50% { height: 56%; opacity: 1; }
}

@keyframes noorMessageIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 991px) {
    .noor-portal-shell {
        grid-template-columns: 1fr;
        min-height: calc(100svh - 1rem);
        max-height: calc(100svh - 1rem);
        overflow-y: auto;
    }

    .noor-presence {
        min-height: 280px;
        padding: 1.35rem;
    }

    .noor-thread {
        max-height: 42svh;
    }
}

@media (max-width: 767px) {
    .noor-fab {
        width: 66px;
        height: 66px;
        inset-inline-start: 1rem;
        inset-block-end: 6.7rem;
    }

    .noor-fab-text {
        display: inline-flex;
        min-width: 104px;
        font-size: 0.6rem;
        padding-inline: 0.44rem;
    }

    .noor-portal {
        padding: 0.55rem;
    }

    .noor-portal-shell {
        border-radius: 1.35rem;
        padding: 0.55rem;
    }

    .noor-presence,
    .noor-panel {
        border-radius: 1rem;
    }

    .noor-presence h2 {
        font-size: 2rem;
    }

    .noor-core {
        width: 112px;
        height: 112px;
    }

    .noor-message {
        max-width: 96%;
    }

    .noor-lead-fields {
        grid-template-columns: 1fr;
    }

    .noor-form input {
        min-height: 50px;
    }

    .noor-input-row button {
        width: 50px;
        height: 50px;
    }
}

/* Ishraqa compact service widget */
.noor-portal {
    place-items: end start;
    padding: 1rem 1.25rem 6.35rem;
    color: #0f172a;
    pointer-events: none;
}

.noor-portal.is-open {
    display: grid;
}

.noor-portal-backdrop {
    background: rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: auto;
}

.noor-portal-shell {
    width: min(390px, calc(100vw - 2rem));
    min-height: auto;
    height: min(640px, calc(100svh - 8rem));
    display: block;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 22px 70px rgba(15, 23, 42, 0.24);
    overflow: hidden;
    pointer-events: auto;
}

.noor-app {
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    background: #fff;
}

.noor-screen {
    min-height: 0;
    display: none;
    overflow-y: auto;
    background: #fff;
}

.noor-screen.is-active {
    display: grid;
}

.noor-home-hero {
    min-height: 310px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.45rem;
    padding: 1.25rem;
    background:
        radial-gradient(circle at 12% 10%, rgba(56, 214, 122, 0.2), transparent 34%),
        linear-gradient(155deg, #0b2d5c 0%, #0a3f7b 58%, #1988d8 100%);
    color: #fff;
    position: relative;
}

.noor-brand-mark {
    position: absolute;
    inset-block-start: 1.1rem;
    inset-inline-end: 1.1rem;
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    padding: 0.35rem;
}

.noor-home-hero .noor-kicker {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.88);
    padding: 0.42rem 0.72rem;
    font-size: 0.78rem;
}

.noor-home-hero h2 {
    margin: 0;
    color: #fff;
    font-size: 2.08rem;
    line-height: 1.1;
    font-weight: 900;
}

.noor-home-hero p {
    margin: 0;
    color: rgba(255,255,255,0.88);
    font-weight: 800;
}

.noor-home-card {
    width: calc(100% - 2rem);
    min-height: 78px;
    margin: -2.35rem auto 1.25rem;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 0.7rem;
    border: 0;
    border-radius: 0.9rem;
    padding: 0.85rem;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 14px 34px rgba(15,23,42,0.16);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    text-align: start;
}

.noor-home-card-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #0b2d5c;
}

.noor-home-links {
    display: grid;
    gap: 0.65rem;
    padding: 0 1.25rem 1.35rem;
}

.noor-home-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 0.75rem 0.9rem;
    color: #0f172a;
    background: #f8fafc;
    font-weight: 800;
}

.noor-home-links a::before {
    content: "\f053";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #94a3b8;
}

.noor-screen-head {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: #0b2d5c;
    color: #fff;
}

.noor-screen-head h3 {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
}

.noor-screen-head span {
    color: rgba(255,255,255,0.74);
    font-size: 0.78rem;
    font-weight: 700;
}

[data-noor-panel="chat"].noor-screen {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.noor-thread {
    min-height: 0;
    max-height: none;
    padding: 1rem;
    background: #f8fafc;
}

.noor-message {
    max-width: 88%;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
    color: #334155;
    box-shadow: 0 8px 22px rgba(15,23,42,0.06);
}

.noor-message strong,
.noor-link-content strong {
    color: #0f172a;
}

.noor-message-user {
    background: #0b2d5c;
    color: #fff;
    border-color: #0b2d5c;
}

.noor-message-user strong {
    color: #fff;
}

.noor-message-rich {
    width: min(96%, 470px);
    max-width: 96%;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15,23,42,0.08);
}

.noor-insights {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.noor-insights-label,
.noor-actions-label {
    color: #64748b;
}

.noor-insights li {
    color: #334155;
}

.noor-link-cards a {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #0f172a;
    box-shadow: none;
}

.noor-link-cards a:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.noor-link-icon {
    background: #eaf2ff;
    color: #0b2d5c;
    box-shadow: none;
}

.noor-link-content small {
    color: #64748b;
}

.noor-form {
    gap: 0.55rem;
    padding: 0.85rem;
    background: #fff;
    border-top: 1px solid #e2e8f0;
}

.noor-form input {
    min-height: 48px;
    border: 1px solid #dbe3ef;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 700;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.noor-form input::placeholder {
    color: #94a3b8;
}

.noor-form input:focus {
    border-color: #1988d8;
    box-shadow: 0 0 0 4px rgba(25,136,216,0.13);
}

.noor-input-row button {
    width: 48px;
    height: 48px;
    background: #0b2d5c;
    box-shadow: none;
}

.noor-form.is-busy .noor-input-row button {
    opacity: 0.65;
    cursor: wait;
}

.noor-status {
    min-height: 1.1rem;
    color: #64748b;
    padding-inline: 0.25rem;
}

[data-noor-panel="faq"].noor-screen {
    grid-template-rows: auto minmax(0, 1fr);
}

.noor-faq-list {
    display: grid;
    gap: 0.65rem;
    align-content: start;
    padding: 1rem;
    background: #f8fafc;
}

.noor-faq-item {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    padding: 0.85rem 1rem;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    text-align: start;
}

.noor-faq-item i {
    color: #64748b;
    transition: transform 0.2s ease;
}

.noor-faq-item.is-open {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.noor-faq-item.is-open i {
    transform: rotate(180deg);
}

.noor-faq-answer {
    margin-top: -0.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    padding: 0.9rem 1rem;
    background: #fff;
    color: #475569;
    line-height: 1.8;
}

.noor-tabbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.noor-tabbar button {
    min-width: 0;
    min-height: 70px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.28rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
}

.noor-tabbar i {
    font-size: 1.05rem;
}

.noor-tabbar button.is-active {
    color: #0b2d5c;
    border-bottom-color: #0b2d5c;
}

.noor-close {
    inset-block-start: auto;
    inset-inline-end: auto;
    inset-inline-start: 1.45rem;
    inset-block-end: 1.55rem;
    width: 64px;
    height: 64px;
    border: 0;
    background: #0b2d5c;
    color: #fff;
    box-shadow: 0 16px 38px rgba(11,45,92,0.28);
    pointer-events: auto;
}

@media (min-width: 768px) {
    .noor-portal {
        padding-inline-start: 1.25rem;
        padding-inline-end: 1.25rem;
    }
}

@media (max-width: 767px) {
    .noor-portal {
        padding: 0.65rem 0.65rem 6.1rem;
    }

    .noor-portal-shell {
        width: min(100%, 390px);
        height: min(620px, calc(100svh - 7.2rem));
        border-radius: 1.05rem;
    }

    .noor-home-hero {
        min-height: 270px;
    }

    .noor-home-hero h2 {
        font-size: 1.7rem;
    }

    .noor-message {
        max-width: 94%;
    }

    .noor-lead-fields {
        grid-template-columns: 1fr;
    }

    .noor-close {
        inset-inline-start: 1rem;
        inset-block-end: 1.25rem;
        width: 58px;
        height: 58px;
    }
}

/* Ishraqa refined identity */
.noor-portal-shell {
    border-color: rgba(25, 136, 216, 0.18);
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(145deg, rgba(25,136,216,0.55), rgba(66,217,244,0.38), rgba(56,214,122,0.32)) border-box;
}

.noor-app {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.noor-home-hero {
    min-height: 246px;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    padding-top: 5.25rem;
    padding-bottom: 2.35rem;
    background:
        radial-gradient(circle at 16% 12%, rgba(66,217,244,0.34), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(56,214,122,0.24), transparent 30%),
        linear-gradient(150deg, #071833 0%, #0b2d5c 48%, #1988d8 100%);
}

.noor-home-hero::after {
    content: "";
    position: absolute;
    inset-inline: 1.2rem;
    bottom: -48px;
    height: 100px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    filter: blur(20px);
}

.noor-home-hero h2,
.noor-home-hero p,
.noor-home-hero .noor-kicker {
    position: relative;
    z-index: 2;
}

.noor-home-hero h2 {
    font-size: clamp(1.22rem, 4.2vw, 1.68rem);
    letter-spacing: 0;
    line-height: 1.08;
    max-width: 100%;
    white-space: nowrap;
}

.noor-home-hero .noor-kicker {
    max-width: 100%;
}

.noor-home-hero p {
    max-width: 290px;
    line-height: 1.75;
    font-weight: 700;
}

.noor-brand-mark {
    display: block;
    inset-inline-start: auto;
    inset-inline-end: auto;
    right: 1.1rem;
    left: auto;
    background: rgba(255,255,255,0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

.noor-character-face {
    --ishraqa-talk-scale: 1;
    position: absolute;
    left: 1.95rem;
    right: auto;
    top: 5.9rem;
    z-index: 4;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.72);
    background-image: var(--ishraqa-avatar);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow:
        0 22px 44px rgba(3, 16, 38, 0.3),
        0 0 0 8px rgba(255,255,255,0.08);
}

.noor-character-face::after {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: 3;
    border-radius: inherit;
    border: 1px solid rgba(66,217,244,0.28);
    pointer-events: none;
}

html[dir="ltr"] .noor-brand-mark {
    left: 1.1rem;
    right: auto;
}

html[dir="ltr"] .noor-character-face {
    right: 1.95rem;
    left: auto;
}

.noor-widget.is-thinking .noor-fab-core,
.noor-widget.is-thinking .noor-character-face {
    animation: ishraqaAttentive 1.35s ease-in-out infinite;
}

.noor-widget.is-speaking .noor-fab-face,
.noor-widget.is-speaking .noor-character-face {
    animation: ishraqaTalk 0.9s ease-in-out infinite;
}

.noor-widget.is-speaking .noor-fab-face::before,
.noor-widget.is-speaking .noor-character-face::before {
    animation: ishraqaLipSync 0.42s steps(2, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .noor-widget.is-thinking .noor-fab-core,
    .noor-widget.is-thinking .noor-character-face,
    .noor-widget.is-speaking .noor-fab-face,
    .noor-widget.is-speaking .noor-character-face,
    .noor-widget.is-speaking .noor-fab-face::before,
    .noor-widget.is-speaking .noor-character-face::before {
        animation: none;
    }
}

.noor-orbit {
    position: absolute;
    inset-block-start: 5.2rem;
    inset-inline-end: 1.25rem;
    width: 112px;
    height: 112px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 50%;
    opacity: 0.95;
}

.noor-orbit span {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #42d9f4;
    box-shadow: 0 0 22px rgba(66,217,244,0.8);
}

.noor-orbit span:nth-child(1) { inset-block-start: 8px; inset-inline-start: 50%; }
.noor-orbit span:nth-child(2) { inset-block-end: 22px; inset-inline-start: 12px; background: #38d67a; }
.noor-orbit span:nth-child(3) { inset-block-end: 18px; inset-inline-end: 10px; background: #ff8a00; }

.noor-home-card {
    min-height: 66px;
    margin-top: 0.95rem;
    border: 1px solid rgba(25,136,216,0.18);
    box-shadow: 0 18px 45px rgba(11,45,92,0.16);
}

.noor-home-card strong {
    display: block;
}

.noor-home-card strong {
    color: #071833;
    font-size: 1rem;
}

.noor-home-card-icon {
    background: linear-gradient(135deg, rgba(25,136,216,0.14), rgba(66,217,244,0.18));
    color: #0b2d5c;
}

.noor-home-persona {
    display: grid;
    gap: 0.72rem;
    padding: 0 1.25rem 1.35rem;
}

.noor-home-persona div {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr);
    column-gap: 0.7rem;
    row-gap: 0;
    align-items: center;
    min-height: 58px;
    padding: 0.7rem 0.8rem;
    border: 1px solid #dbeafe;
    border-radius: 1rem;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
}

.noor-home-persona i {
    grid-row: auto;
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    color: #0b2d5c;
    background: #eaf2ff;
}

.noor-home-persona strong {
    color: #071833;
    font-weight: 900;
}

.noor-screen-head {
    background:
        radial-gradient(circle at 12% 0%, rgba(66,217,244,0.18), transparent 34%),
        linear-gradient(135deg, #071833, #0b2d5c 58%, #146fb7);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.12);
}

.noor-chat-head {
    min-height: 76px;
}

.noor-chat-identity {
    display: flex;
    align-items: center;
    gap: 0.68rem;
    min-width: 0;
}

.noor-chat-avatar,
.noor-message-avatar {
    flex: 0 0 auto;
    display: inline-block;
    border-radius: 50%;
    background-image: var(--ishraqa-avatar);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.noor-chat-avatar {
    width: 44px;
    height: 44px;
    border: 2px solid rgba(255,255,255,0.82);
    box-shadow: 0 0 0 5px rgba(66,217,244,0.12), 0 10px 22px rgba(0,0,0,0.18);
}

.noor-chat-identity span:last-child {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.noor-chat-identity strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
}

.noor-chat-identity em {
    color: rgba(255,255,255,0.74);
    font-style: normal;
    font-size: 0.76rem;
    font-weight: 800;
}

.noor-chat-school {
    max-width: 45%;
    text-align: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noor-thread {
    background:
        radial-gradient(circle at 8% 10%, rgba(66,217,244,0.09), transparent 26%),
        linear-gradient(180deg, #f8fbff, #f4f8fd);
}

.noor-message {
    line-height: 1.85;
    border-color: rgba(25,136,216,0.14);
}

.noor-message p {
    line-height: 1.9;
}

.noor-welcome-message p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.noor-inline-link {
    color: #0b63ce;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.noor-inline-link:hover {
    color: #1988d8;
}

.noor-message-bot {
    border-inline-start: 4px solid #1988d8;
}

.noor-message-author {
    display: flex;
    align-items: center;
    gap: 0.58rem;
    margin-bottom: 0.58rem;
}

.noor-message-avatar {
    width: 34px;
    height: 34px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(25,136,216,0.12);
}

.noor-message-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.noor-message-name {
    display: grid;
    gap: 0.02rem;
}

.noor-message-name strong {
    margin: 0;
    color: #071833;
    line-height: 1.25;
}

.noor-message-name small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.25;
}

.noor-message-bot strong::before {
    content: "";
    display: inline-block;
    width: 0.52rem;
    height: 0.52rem;
    margin-inline-end: 0.35rem;
    border-radius: 50%;
    background: #38d67a;
    box-shadow: 0 0 0 4px rgba(56,214,122,0.14);
}

.noor-message-bot .noor-message-author strong::before {
    content: none;
    display: none;
}

.noor-message-user {
    background: linear-gradient(135deg, #0b2d5c, #1988d8);
    border-color: transparent;
}

.noor-form {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.noor-form input {
    border-color: rgba(25,136,216,0.22);
    background: #ffffff;
}

.noor-input-row button {
    background: linear-gradient(135deg, #0b2d5c, #1988d8);
    box-shadow: 0 12px 26px rgba(25,136,216,0.22);
}

.noor-tabbar button.is-active {
    color: #0b2d5c;
    border-bottom-color: #1988d8;
}

.noor-tabbar button.is-active i {
    color: #1988d8;
}

@media (max-width: 767px) {
    .noor-home-hero {
        min-height: 238px;
        padding-top: 5.15rem;
        padding-bottom: 2.2rem;
    }

    .noor-home-hero h2 {
        font-size: 1.08rem;
    }

    .noor-character-face {
        width: 72px;
        height: 72px;
        top: 5.5rem;
        left: 1.75rem;
        right: auto;
    }

    html[dir="ltr"] .noor-character-face {
        right: 1.75rem;
        left: auto;
    }

    .noor-orbit {
        width: 88px;
        height: 88px;
        inset-block-start: 5rem;
    }
}

/* Header menu typography normalization */
.nav-links > a,
.nav-links .nav-dropdown-toggle {
    color: var(--brand-navy);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
}

.nav-links > a:hover,
.nav-links > a.active,
.nav-links > a.current-page,
.nav-links .nav-dropdown-toggle:hover,
.nav-links .nav-dropdown-toggle.active,
.nav-links .nav-dropdown.is-current .nav-dropdown-toggle {
    color: var(--brand-blue);
    font-weight: 800;
}

.nav-submenu-link,
.mobile-submenu-parent-link {
    font-weight: 800;
}

/* English UI compact typography */
html[lang="en"] body {
    line-height: 1.62;
}

html[lang="en"] .nav-wrap {
    padding-inline: clamp(0.75rem, 1.2vw, 1rem);
}

html[lang="en"] .brand {
    gap: 0.62rem;
    max-width: 250px;
}

html[lang="en"] .brand img {
    width: 52px;
    height: 52px;
}

html[lang="en"] .brand-text .brand-title {
    font-size: 0.88rem;
    line-height: 1.16;
    max-width: 170px;
}

html[lang="en"] .brand-text p {
    font-size: 0.68rem;
    line-height: 1.25;
    max-width: 180px;
}

html[lang="en"] .nav-links {
    gap: clamp(0.72rem, 1vw, 1rem);
}

html[lang="en"] .nav-links > a,
html[lang="en"] .nav-links .nav-dropdown-toggle {
    font-size: 0.82rem;
    line-height: 1.16;
    letter-spacing: 0;
    text-align: center;
    max-width: 84px;
}

html[lang="en"] .nav-actions {
    gap: 0.55rem;
}

html[lang="en"] .nav-utility-link {
    font-size: 0.82rem;
    padding-inline: 0.8rem;
}

html[lang="en"] .nav-actions .btn {
    font-size: 0.88rem;
    line-height: 1.25;
    padding: 0.78rem 1rem;
    min-width: 104px;
}

html[lang="en"] .title {
    font-size: clamp(1.75rem, 2.35vw, 2.75rem);
    line-height: 1.14;
}

html[lang="en"] .page-title {
    font-size: clamp(2rem, 3.25vw, 3.35rem);
    line-height: 1.16;
    max-width: 820px;
}

html[lang="en"] .hero-title,
html[lang="en"] .video-hero-title {
    font-size: clamp(2rem, 4.05vw, 4.15rem);
    line-height: 1.1;
}

html[lang="en"] .video-hero-title {
    max-width: min(1120px, 100%);
    margin-block: 1rem 0.85rem;
}

html[lang="en"] .video-hero-kicker,
html[lang="en"] .hero-badge {
    font-size: 0.88rem;
    line-height: 1.28;
}

html[lang="en"] .video-hero-subtitle,
html[lang="en"] .hero-text {
    font-size: clamp(0.95rem, 1.12vw, 1.05rem);
    line-height: 1.62;
}

html[lang="en"] .lead,
html[lang="en"] .section-text,
html[lang="en"] .page-text {
    font-size: clamp(0.92rem, 1vw, 1rem);
    line-height: 1.72;
}

html[lang="en"] .badge {
    font-size: 0.78rem;
    line-height: 1.2;
}

html[lang="en"] .btn {
    font-size: 0.92rem;
    line-height: 1.24;
}

html[lang="en"] .feature-card h3,
html[lang="en"] .simple-card h3,
html[lang="en"] .policy-card h3,
html[lang="en"] .stage-card h3,
html[lang="en"] .contact-card h3,
html[lang="en"] .map-card h3 {
    font-size: clamp(1.05rem, 1.25vw, 1.22rem);
    line-height: 1.28;
}

html[lang="en"] .feature-card p,
html[lang="en"] .simple-card p,
html[lang="en"] .policy-card p,
html[lang="en"] .contact-card p,
html[lang="en"] .map-card p {
    font-size: 0.9rem;
    line-height: 1.65;
}

html[lang="en"] .page-callback .callback-panel h2 {
    font-size: clamp(1.35rem, 1.7vw, 1.65rem);
    line-height: 1.2;
}

html[lang="en"] .page-callback .callback-form label,
html[lang="en"] .field-label {
    font-size: 0.78rem;
    line-height: 1.22;
}

html[lang="en"] .page-callback .callback-form input:not([type="checkbox"]),
html[lang="en"] .page-callback .callback-form select,
html[lang="en"] .page-callback .callback-form textarea,
html[lang="en"] .form-control {
    font-size: 0.9rem;
}

@media (min-width: 992px) and (max-width: 1320px) {
    html[lang="en"] .nav-links {
        gap: 0.58rem;
    }

    html[lang="en"] .nav-links > a,
    html[lang="en"] .nav-links .nav-dropdown-toggle {
        font-size: 0.76rem;
        max-width: 72px;
    }

    html[lang="en"] .brand {
        max-width: 220px;
    }

    html[lang="en"] .brand-text .brand-title {
        max-width: 145px;
    }

    html[lang="en"] .nav-actions .btn {
        min-width: 92px;
        padding-inline: 0.8rem;
    }
}

@media (max-width: 767px) {
    html[lang="en"] .title,
    html[lang="en"] .page-title {
        font-size: clamp(1.75rem, 8vw, 2.45rem);
        line-height: 1.13;
    }

    html[lang="en"] .hero-title,
    html[lang="en"] .video-hero-title {
        font-size: clamp(1.85rem, 8.4vw, 2.65rem);
        line-height: 1.12;
    }

    html[lang="en"] .lead,
    html[lang="en"] .section-text,
    html[lang="en"] .page-text {
        font-size: 0.92rem;
        line-height: 1.62;
    }
}

/* Header no-wrap fit */
@media (min-width: 992px) {
    .nav {
        display: grid;
        grid-template-columns: minmax(190px, 250px) minmax(0, 1fr) max-content;
        align-items: center;
        gap: clamp(0.75rem, 1vw, 1.15rem);
    }

    .brand {
        max-width: 100%;
    }

    .nav-links {
        min-width: 0;
        justify-content: center;
        gap: clamp(0.7rem, 1vw, 1rem);
        white-space: nowrap;
    }

    .nav-links > a,
    .nav-links .nav-dropdown,
    .nav-links .nav-dropdown-toggle,
    .nav-dropdown-toggle span {
        max-width: none;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .nav-actions {
        flex-shrink: 0;
        justify-content: flex-end;
    }

    .nav-actions .btn,
    .nav-utility-link {
        white-space: nowrap;
    }

    html[lang="en"] .nav-wrap {
        width: min(calc(100vw - 16px), var(--nav-max-width));
        padding-inline: clamp(0.55rem, 0.9vw, 0.9rem);
    }

    html[lang="en"] .brand {
        max-width: none;
        gap: 0.55rem;
    }

    html[lang="en"] .brand-text .brand-title,
    html[lang="en"] .brand-text p {
        max-width: 170px;
    }

    html[lang="en"] .nav-links {
        gap: clamp(0.58rem, 0.86vw, 0.92rem);
    }

    html[lang="en"] .nav-links > a,
    html[lang="en"] .nav-links .nav-dropdown-toggle {
        max-width: none;
        white-space: nowrap;
        font-size: clamp(0.76rem, 0.74vw, 0.86rem);
        line-height: 1;
        text-align: center;
    }

    html[lang="en"] .nav-actions {
        gap: 0.45rem;
    }

    html[lang="en"] .nav-utility-link {
        white-space: nowrap;
        padding-inline: 0.65rem;
    }

    html[lang="en"] .nav-actions .btn {
        min-width: 96px;
        white-space: nowrap;
        padding-inline: 0.8rem;
    }
}

@media (min-width: 992px) and (max-width: 1160px) {
    html[lang="en"] .nav {
        grid-template-columns: minmax(168px, 210px) minmax(0, 1fr) max-content;
        gap: 0.55rem;
    }

    html[lang="en"] .brand img {
        width: 46px;
        height: 46px;
    }

    html[lang="en"] .brand-text .brand-title,
    html[lang="en"] .brand-text p {
        max-width: 135px;
    }

    html[lang="en"] .nav-links {
        gap: 0.46rem;
    }

    html[lang="en"] .nav-actions .btn {
        min-width: auto;
        padding-inline: 0.68rem;
    }
}

/* Store cart overlay fix: keep the cart above the fixed header and assistant widgets */
.store-cart-panel {
    z-index: 3200 !important;
}

.store-cart-backdrop {
    z-index: 3200 !important;
}

.store-cart-drawer {
    z-index: 3201 !important;
    max-height: 100dvh;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.store-cart-head {
    position: sticky;
    top: -1.2rem;
    z-index: 3;
    margin: -1.2rem -1.2rem 0.15rem;
    padding: 1.2rem 1.2rem 0.85rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,251,255,0.97));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.has-store-cart .topbar {
    pointer-events: none;
}

.store-coupon-box {
    padding: 0;
    overflow: hidden;
    background: var(--white);
    border-color: rgba(191,219,254,0.85);
    box-shadow: 0 12px 28px rgba(11,45,92,0.06);
}

.store-coupon-toggle {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    border: 0;
    background: linear-gradient(135deg, #f8fbff, #eef6ff);
    color: var(--brand-navy);
    font-weight: 900;
    cursor: pointer;
}

.store-coupon-toggle > span {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.store-coupon-toggle i {
    color: var(--brand-blue);
}

.store-coupon-toggle .fa-chevron-down {
    transition: transform 0.2s ease;
}

.store-coupon-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

.store-coupon-body {
    display: grid;
    gap: 0.65rem;
    padding: 0.95rem;
    border-top: 1px solid rgba(226,232,240,0.9);
}

.store-coupon-body[hidden] {
    display: none;
}

.store-checkout-form {
    gap: 0.8rem;
    padding: 1rem;
    background: linear-gradient(180deg, #f8fbff, #ffffff);
    border-color: rgba(191,219,254,0.9);
    box-shadow: 0 14px 32px rgba(11,45,92,0.07);
}

.store-checkout-title {
    display: grid;
    gap: 0.2rem;
    padding: 0.2rem 0.15rem 0.35rem;
}

.store-checkout-title strong {
    color: var(--brand-navy);
    font-size: 1.02rem;
    font-weight: 900;
}

.store-checkout-title span {
    color: var(--brand-slate);
    font-size: 0.86rem;
    line-height: 1.7;
}

.store-field {
    position: relative;
    display: grid;
    gap: 0.38rem;
}

.store-field label {
    color: var(--brand-navy);
    font-size: 0.9rem;
    font-weight: 900;
    padding-inline-start: 2.7rem;
}

.store-field-icon {
    position: absolute;
    top: 2.35rem;
    inset-inline-start: 0.85rem;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: var(--brand-blue);
    background: #eef6ff;
    border: 1px solid rgba(191,219,254,0.85);
}

.store-checkout-form input,
.store-checkout-form textarea {
    width: 100%;
    background: var(--white);
    border-color: rgba(148,163,184,0.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 18px rgba(11,45,92,0.04);
    padding-inline-start: 3rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.store-checkout-form input:focus,
.store-checkout-form textarea:focus,
.store-coupon-row input:focus {
    outline: none;
    border-color: var(--brand-blue);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(25,136,216,0.12);
}

.store-checkout-form textarea {
    line-height: 1.75;
}

.store-checkout-form .btn.full {
    min-height: 52px;
    border-radius: 999px;
    background: var(--brand-navy);
    color: var(--white);
    box-shadow: 0 14px 30px rgba(11,45,92,0.18);
}

.store-checkout-form .btn.full:hover {
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    .store-cart-drawer {
        max-height: min(92dvh, calc(100dvh - max(18px, env(safe-area-inset-top, 0px))));
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    .store-cart-head {
        top: -1rem;
        margin: -1rem -1rem 0.1rem;
        padding: 1rem 1rem 0.8rem;
        border-radius: 1.25rem 1.25rem 0 0;
    }
}

/* Fees mobile cards */
@media (max-width: 767px) {
    .page-fees .section-white.section-grid {
        padding-bottom: calc(6.8rem + env(safe-area-inset-bottom, 0px));
    }

    .page-fees .fees-table-shell,
    .page-fees .transport-table-shell {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .page-fees .fees-table,
    .page-fees .transport-table {
        display: block;
        width: 100%;
        min-width: 0;
        border-spacing: 0;
        padding: 0;
        background: transparent;
    }

    .page-fees .fees-table tbody,
    .page-fees .transport-table tbody {
        display: grid;
        gap: 0.85rem;
    }

    .page-fees .fees-table tbody tr,
    .page-fees .transport-table tbody tr {
        display: grid;
        gap: 0;
        margin: 0;
        padding: 0.55rem;
        border: 1px solid #d9e6f2;
        border-radius: 1.25rem;
        overflow: hidden;
        background: linear-gradient(180deg, #ffffff 0%, #f3f8fc 100%);
        box-shadow: 0 12px 28px rgba(11, 45, 92, 0.08);
    }

    .page-fees .fees-table tbody td,
    .page-fees .transport-table tbody td {
        display: grid;
        grid-template-columns: minmax(95px, 0.9fr) minmax(0, 1.1fr);
        align-items: center;
        gap: 0.7rem;
        min-height: 48px;
        padding: 0.62rem 0.7rem;
        border-bottom: 1px solid rgba(176, 196, 219, 0.34);
        background: transparent !important;
        text-align: start !important;
        font-size: 0.92rem;
    }

    .page-fees .fees-table tbody td::before,
    .page-fees .transport-table tbody td::before {
        display: block;
        margin: 0;
        color: #49657f;
        font-size: 0.74rem;
        font-weight: 900;
        line-height: 1.35;
        opacity: 1;
    }

    .page-fees .fees-stage-cell {
        display: flex !important;
        align-items: center;
        justify-content: center;
        grid-template-columns: 1fr;
        min-width: 0;
        min-height: 48px;
        margin-bottom: 0.25rem;
        padding: 0.78rem 0.9rem !important;
        border: 0 !important;
        border-radius: 0.95rem;
        background: linear-gradient(135deg, #0b2d5c, #176eaf) !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 8px 18px rgba(11,45,92,0.16);
        color: #ffffff !important;
        text-align: center !important;
        user-select: none;
    }

    .page-fees .fees-stage-cell::before {
        content: none !important;
    }

    .page-fees .fees-stage-cell span {
        display: block;
        width: 100%;
        color: #ffffff !important;
        font-size: 1rem;
        font-weight: 900;
        line-height: 1.45;
        text-shadow: 0 1px 2px rgba(0,0,0,0.18);
    }

    .page-fees .fees-stage-cell span::selection {
        background: rgba(255,255,255,0.28);
        color: #ffffff;
    }

    .page-fees .amount,
    .page-fees .discount-pill,
    .page-fees .discount-rate-empty {
        justify-self: end;
        text-align: end;
    }

    .page-fees .amount {
        font-size: 1.02rem;
        line-height: 1.2;
    }

    .page-fees .discount-pill {
        max-width: 100%;
        min-height: 30px;
        padding: 0.25rem 0.62rem;
        white-space: normal;
        line-height: 1.45;
    }

    .page-fees .fees-table tbody td:last-child,
    .page-fees .transport-table tbody td:last-child {
        border-bottom: 0;
    }

    .page-fees .fees-table tbody td:last-child {
        margin-top: 0.15rem;
        border-radius: 0.9rem;
        background: rgba(18, 182, 105, 0.08) !important;
    }

    .page-fees .fees-table tbody td:last-child::before {
        color: #0f8a4b;
    }

    .page-fees .fees-table tbody td:last-child .amount {
        font-size: 1.1rem;
    }

    .page-fees .discount-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .page-fees .discount-box {
        min-height: auto;
        border-radius: 1.15rem;
    }

    .page-fees .noor-fab {
        width: 56px;
        height: 56px;
        inset-inline-start: 0.75rem;
        inset-block-end: calc(4.65rem + env(safe-area-inset-bottom, 0px));
    }

    .page-fees .noor-fab-text {
        min-width: 82px;
        max-width: 92px;
        font-size: 0.56rem;
        line-height: 1.2;
    }
}

@media (max-width: 991px) {
    .nav-actions .nav-utility-link {
        display: none !important;
    }

    .mobile-menu a.mobile-careers-link {
        display: block;
        margin-top: 0;
        background: rgba(255,255,255,0.52) !important;
        color: var(--brand-navy) !important;
        border: 0;
        box-shadow: none;
    }

    .mobile-menu a.mobile-careers-link:hover,
    .mobile-menu a.mobile-careers-link.active {
        background: #edf5ff !important;
        color: var(--brand-blue) !important;
    }
}

/* ===== NUBL SMART ASSISTANT — 2026 identity ===== */
.nubl-assistant {
    --nubl-navy: #0b203e;
    --nubl-navy-soft: #17365f;
    --nubl-burgundy: #132449;
    --nubl-burgundy-dark: #0d1932;
    --nubl-gold: #d0b85f;
    --nubl-gold-light: #f1dc86;
    --nubl-ivory: #fbf8f1;
    --nubl-ink: #132541;
    --nubl-muted: #66758b;
    --nubl-success: #39b978;
    font-family: 'Cairo', sans-serif;
}

.nubl-assistant .noor-fab {
    position: fixed;
    inset-inline-start: 1.25rem;
    inset-block-end: 1.45rem;
    z-index: 1750;
    width: auto;
    height: 78px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .65rem;
    padding: .35rem .4rem .35rem .85rem;
    border: 1px solid rgba(208, 184, 95, .48);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(11,32,62,.98), rgba(23,54,95,.96));
    box-shadow: 0 18px 50px rgba(11,32,62,.28), 0 0 0 1px rgba(255,255,255,.06) inset;
    isolation: isolate;
    overflow: visible;
    transition: transform .25s ease, box-shadow .25s ease;
}

.nubl-assistant .noor-fab:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 58px rgba(11,32,62,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
}

.nubl-assistant .noor-fab-aura {
    display: block;
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 1px solid rgba(208,184,95,.22);
    opacity: .85;
    animation: nublAura 3.4s ease-in-out infinite;
}

.nubl-assistant .noor-fab-core {
    position: relative;
    inset: auto;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 36%, rgba(241,220,134,.28), transparent 58%),
        linear-gradient(145deg, #152f53, #08192f);
    border: 2px solid rgba(255,255,255,.9);
    box-shadow: 0 0 0 4px rgba(208,184,95,.24), 0 11px 24px rgba(0,0,0,.23);
}

.nubl-assistant .noor-fab-face {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--nubl-avatar);
    background-repeat: no-repeat;
    background-size: 108%;
    background-position: center 15%;
    transform: translateY(2px);
}

.nubl-assistant .noor-fab-status {
    position: absolute;
    inset-inline-end: 1px;
    inset-block-end: 3px;
    z-index: 5;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--nubl-success);
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px rgba(57,185,120,.16);
}

.nubl-assistant .noor-fab-text {
    position: static;
    transform: none;
    min-width: 105px;
    display: grid;
    gap: .05rem;
    padding: 0 .25rem;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    animation: none;
    color: #fff;
    text-align: start;
}

.nubl-assistant .noor-fab-text strong {
    font-size: 1rem;
    line-height: 1.2;
    color: #fff;
    font-weight: 900;
}

.nubl-assistant .noor-fab-text small {
    color: rgba(255,255,255,.68);
    font-size: .69rem;
    line-height: 1.25;
    font-weight: 700;
}

.nubl-invite {
    position: fixed;
    inset-inline-start: 1.3rem;
    inset-block-end: 6.75rem;
    z-index: 1745;
    width: min(350px, calc(100vw - 2rem));
    min-height: 142px;
    display: grid;
    grid-template-columns: 105px minmax(0,1fr);
    align-items: end;
    gap: .4rem;
    padding: .85rem .9rem .85rem .25rem;
    border: 1px solid rgba(208,184,95,.34);
    border-radius: 1.45rem;
    background:
        radial-gradient(circle at 6% 10%, rgba(208,184,95,.22), transparent 35%),
        linear-gradient(145deg, rgba(11,32,62,.98), rgba(23,54,95,.98));
    box-shadow: 0 24px 70px rgba(11,32,62,.34);
    color: #fff;
    opacity: 0;
    transform: translateY(14px) scale(.98);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
    overflow: hidden;
}

.nubl-invite[hidden] { display: none; }
.nubl-invite.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.nubl-invite::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(208,184,95,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(208,184,95,.08) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, #000, transparent 70%);
    pointer-events: none;
}

.nubl-invite-character {
    position: relative;
    z-index: 2;
    align-self: end;
    width: 116px;
    height: 155px;
    margin-block-end: -.85rem;
    margin-inline-start: -.2rem;
    background-image: var(--nubl-teaser);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    filter: drop-shadow(0 13px 18px rgba(0,0,0,.25));
}

.nubl-invite-copy { position: relative; z-index: 2; padding-block: .15rem; }
.nubl-invite-copy strong { display: block; margin: 0; color: var(--nubl-gold-light); font-size: 1rem; font-weight: 900; }
.nubl-invite-copy p { margin: .25rem 0 .65rem; color: rgba(255,255,255,.82); font-size: .78rem; line-height: 1.65; }
.nubl-invite-actions { display: flex; flex-wrap: wrap; gap: .38rem; }
.nubl-invite-actions button {
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    padding: .42rem .7rem;
    background: var(--nubl-gold-light);
    color: var(--nubl-burgundy-dark);
    font: inherit;
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
}
.nubl-invite-actions button.is-muted { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); }

.nubl-assistant .noor-portal {
    position: fixed;
    inset: 0;
    z-index: 1900;
    display: grid;
    place-items: end start;
    padding: 1rem;
    color: var(--nubl-ink);
    pointer-events: none;
}
.nubl-assistant .noor-portal[hidden] { display: none; }
.nubl-assistant .noor-portal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7,20,40,.22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: auto;
}
.nubl-assistant .noor-portal-shell {
    position: relative;
    z-index: 2;
    width: min(430px, calc(100vw - 2rem));
    height: min(720px, calc(100svh - 2rem));
    min-height: 520px;
    display: block;
    padding: 0;
    border: 1px solid rgba(208,184,95,.32);
    border-radius: 1.7rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 100px rgba(7,20,40,.38);
    pointer-events: auto;
}
.nubl-assistant .noor-close {
    position: absolute;
    inset-block-start: .72rem;
    inset-inline-start: .72rem;
    inset-inline-end: auto;
    inset-block-end: auto;
    z-index: 15;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    background: rgba(11,32,62,.42);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(12px);
    cursor: pointer;
}
.nubl-assistant .noor-app {
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0,1fr) auto;
    background: linear-gradient(180deg, #fff, #fbfaf7);
}
.nubl-assistant .noor-screen { min-height: 0; display: none; overflow-y: auto; background: #fff; }
.nubl-assistant .noor-screen.is-active { display: grid; }

.nubl-assistant .noor-home-hero {
    position: relative;
    min-height: 322px;
    display: grid;
    grid-template-columns: minmax(0,1.12fr) minmax(145px,.88fr);
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 18%, rgba(208,184,95,.22), transparent 32%),
        radial-gradient(circle at 10% 78%, rgba(19,36,73,.28), transparent 34%),
        linear-gradient(145deg, #081a33 0%, #102b50 58%, #203f70 100%);
}
.nubl-assistant .noor-home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(208,184,95,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(208,184,95,.07) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(110deg, transparent 10%, #000 72%, transparent 100%);
}
.nubl-assistant .noor-home-hero::after {
    content: "";
    position: absolute;
    inset-inline: auto -90px;
    inset-block: -85px auto;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(208,184,95,.22);
    border-radius: 50%;
    background: transparent;
    filter: none;
}
.nubl-home-copy {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .55rem;
    min-width: 0;
    padding: 4.15rem 1.25rem 2.15rem 1rem;
    color: #fff;
}
.nubl-assistant .noor-brand-mark {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    width: 48px;
    height: 48px;
    object-fit: contain;
    padding: .3rem;
    border-radius: 13px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 30px rgba(0,0,0,.17);
}
.nubl-assistant .noor-home-hero .noor-kicker {
    position: static;
    max-width: 100%;
    padding: .38rem .65rem;
    border: 1px solid rgba(208,184,95,.35);
    border-radius: 999px;
    background: rgba(208,184,95,.12);
    color: var(--nubl-gold-light);
    font-size: .7rem;
    font-weight: 900;
}
.nubl-assistant .noor-home-hero h2 {
    position: static;
    max-width: 100%;
    margin: 0;
    color: #fff;
    font-size: clamp(1.65rem, 5vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    white-space: normal;
    font-weight: 900;
}
.nubl-assistant .noor-home-hero p {
    position: static;
    max-width: 245px;
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: .83rem;
    line-height: 1.75;
    font-weight: 700;
}
.nubl-availability { display: inline-flex; align-items: center; gap: .42rem; color: rgba(255,255,255,.82); font-size: .72rem; font-weight: 800; }
.nubl-availability i { width: 8px; height: 8px; border-radius: 50%; background: var(--nubl-success); box-shadow: 0 0 0 5px rgba(57,185,120,.12); }
.nubl-home-visual { position: relative; z-index: 3; min-width: 0; }
.nubl-home-halo {
    position: absolute;
    width: 235px;
    height: 235px;
    inset-inline-start: 50%;
    inset-block-start: 55%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241,220,134,.3), rgba(19,36,73,.18) 40%, transparent 70%);
    border: 1px solid rgba(241,220,134,.2);
}
.nubl-home-character {
    position: absolute;
    inset: 1rem -1.4rem 0 -1rem;
    background-image: var(--nubl-bust);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    filter: drop-shadow(0 18px 22px rgba(0,0,0,.3));
}
.nubl-orbit {
    position: absolute;
    z-index: 5;
    min-width: 48px;
    padding: .3rem .5rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(11,32,62,.6);
    color: var(--nubl-gold-light);
    font-size: .62rem;
    font-weight: 900;
    text-align: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 9px 20px rgba(0,0,0,.16);
}
.nubl-orbit-one { inset-block-start: 3.7rem; inset-inline-start: -.1rem; }
.nubl-orbit-two { inset-block-start: 8.1rem; inset-inline-end: .2rem; }
.nubl-orbit-three { inset-block-end: 2rem; inset-inline-start: .2rem; }

.nubl-assistant .noor-home-card {
    width: calc(100% - 2rem);
    min-height: 76px;
    margin: -1.1rem auto .8rem;
    position: relative;
    z-index: 7;
    grid-template-columns: 45px minmax(0,1fr) 18px;
    gap: .7rem;
    padding: .8rem;
    border: 1px solid rgba(19,36,73,.12);
    border-radius: 1.1rem;
    background: rgba(255,255,255,.98);
    box-shadow: 0 17px 38px rgba(11,32,62,.14);
    text-align: start;
}
.nubl-assistant .noor-home-card-icon { width: 45px; height: 45px; border-radius: 15px; background: linear-gradient(145deg, rgba(19,36,73,.12), rgba(208,184,95,.2)); color: var(--nubl-burgundy); }
.nubl-assistant .noor-home-card strong { color: var(--nubl-ink); font-size: .94rem; font-weight: 900; }
.nubl-assistant .noor-home-card small { display: block; margin-top: .13rem; color: var(--nubl-muted); font-size: .68rem; font-weight: 700; }
.nubl-assistant .noor-home-card > i { color: var(--nubl-burgundy); }

.nubl-quick-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .58rem;
    padding: 0 1rem .7rem;
}
.nubl-quick-grid button,
.nubl-quick-grid a {
    min-width: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr);
    align-items: center;
    gap: .55rem;
    padding: .65rem;
    border: 1px solid #e8e2d6;
    border-radius: 1rem;
    background: linear-gradient(145deg,#fff,#fbf8f1);
    color: var(--nubl-ink);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nubl-quick-grid button:hover,
.nubl-quick-grid a:hover { transform: translateY(-2px); border-color: rgba(19,36,73,.25); box-shadow: 0 11px 24px rgba(11,32,62,.08); }
.nubl-quick-grid i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: rgba(19,36,73,.09); color: var(--nubl-burgundy); }
.nubl-quick-grid strong { color: var(--nubl-ink); font-size: .74rem; line-height: 1.45; font-weight: 900; }
.nubl-home-disclosure { margin: 0; padding: 0 1rem 1rem; color: #7a8494; font-size: .63rem; line-height: 1.6; text-align: center; }

.nubl-assistant .noor-screen-head {
    min-height: 78px;
    padding: .85rem 1rem;
    background:
        radial-gradient(circle at 10% 0%, rgba(208,184,95,.15), transparent 32%),
        linear-gradient(135deg, #081a33, #102d52 66%, #71303a);
    color: #fff;
}
.nubl-assistant .noor-chat-identity { gap: .62rem; }
.nubl-assistant .noor-chat-avatar,
.nubl-assistant .noor-message-avatar { background-image: var(--nubl-avatar); background-size: 112%; background-position: center 12%; background-color: var(--nubl-navy); }
.nubl-assistant .noor-chat-avatar { width: 48px; height: 48px; border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(208,184,95,.23); }
.nubl-assistant .noor-chat-identity strong { color: #fff; font-size: 1rem; font-weight: 900; }
.nubl-assistant .noor-chat-identity em { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.7); font-size: .67rem; font-style: normal; font-weight: 700; }
.nubl-assistant .noor-chat-identity em i { width: 7px; height: 7px; border-radius: 50%; background: var(--nubl-success); }
.nubl-chat-tools { display: flex; align-items: center; gap: .3rem; }
.nubl-chat-tools button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }

.nubl-assistant .noor-thread {
    padding: 1rem;
    background:
        radial-gradient(circle at 8% 8%, rgba(208,184,95,.09), transparent 26%),
        linear-gradient(180deg,#faf9f6,#f5f7fa);
}
.nubl-assistant .noor-message { max-width: 92%; border: 1px solid #e5e8ed; border-radius: 1.05rem; background: #fff; color: #34445b; box-shadow: 0 8px 22px rgba(11,32,62,.05); line-height: 1.8; }
.nubl-assistant .noor-message-bot { border-inline-start: 4px solid var(--nubl-burgundy); }
.nubl-assistant .noor-message-user { background: linear-gradient(135deg,var(--nubl-burgundy-dark),var(--nubl-burgundy)); border-color: transparent; color: #fff; }
.nubl-assistant .noor-message-avatar { width: 38px; height: 38px; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(208,184,95,.18); }
.nubl-assistant .noor-message-name strong { color: var(--nubl-ink); }
.nubl-assistant .noor-message-name small { color: var(--nubl-muted); }
.nubl-assistant .noor-welcome-message p { display: block; overflow: visible; -webkit-line-clamp: unset; }
.nubl-message-quick-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.nubl-message-quick-actions button { min-height: 32px; border: 1px solid rgba(19,36,73,.18); border-radius: 999px; padding: .35rem .6rem; background: rgba(19,36,73,.06); color: var(--nubl-burgundy-dark); font: inherit; font-size: .68rem; font-weight: 900; cursor: pointer; }
.nubl-message-quick-actions button:hover { background: var(--nubl-burgundy); color: #fff; }

.nubl-assistant .noor-form { padding: .75rem .9rem .65rem; border-top: 1px solid #ece7dc; background: #fff; }
.nubl-assistant .noor-input-row { border-color: #ddd7ca; border-radius: 1rem; background: #fbfaf7; box-shadow: none; }
.nubl-assistant .noor-input-row:focus-within { border-color: rgba(19,36,73,.44); box-shadow: 0 0 0 4px rgba(19,36,73,.08); }
.nubl-assistant .noor-input-row input { color: var(--nubl-ink); }
.nubl-assistant .noor-input-row button { background: linear-gradient(135deg,var(--nubl-burgundy-dark),var(--nubl-burgundy)); color: #fff; }
.nubl-privacy-note { display: flex; align-items: flex-start; gap: .35rem; margin: .48rem .1rem 0; color: #7b8492; font-size: .57rem; line-height: 1.5; }
.nubl-privacy-note i { color: var(--nubl-gold); margin-top: .1rem; }

.nubl-assistant .noor-faq-list { background: #fbfaf7; }
.nubl-assistant .noor-faq-item { border-color: #e7e1d5; border-radius: 1rem; color: var(--nubl-ink); }
.nubl-assistant .noor-faq-item.is-open { border-color: rgba(19,36,73,.24); background: rgba(19,36,73,.05); }
.nubl-assistant .noor-faq-answer { border-color: #e7e1d5; color: #536176; }
.nubl-assistant .noor-tabbar { border-top-color: #ece7dc; background: #fff; }
.nubl-assistant .noor-tabbar button { min-height: 64px; color: #7c8796; }
.nubl-assistant .noor-tabbar button.is-active { color: var(--nubl-burgundy); border-bottom-color: var(--nubl-burgundy); }

.nubl-assistant .noor-fab-face::before,
.nubl-assistant .noor-character-face::before { display: none !important; }
.nubl-assistant.is-thinking .noor-fab-core { animation: nublThinking 1.25s ease-in-out infinite; }
.nubl-assistant.is-speaking .noor-fab-core { box-shadow: 0 0 0 7px rgba(208,184,95,.2), 0 13px 28px rgba(0,0,0,.22); }

@keyframes nublAura { 0%,100%{opacity:.45;transform:scale(.97)} 50%{opacity:1;transform:scale(1.03)} }
@keyframes nublThinking { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

@media (max-width: 767px) {
    .nubl-assistant .noor-fab { inset-inline-start: .8rem; inset-block-end: 5.6rem; width: 68px; height: 68px; padding: 0; border-radius: 50%; }
    .nubl-assistant .noor-fab-core { flex-basis: 62px; width: 62px; height: 62px; margin: 3px; }
    .nubl-assistant .noor-fab-text { display: none; }
    .nubl-invite { inset-inline-start: .7rem; inset-block-end: 10rem; width: min(330px,calc(100vw - 1.4rem)); }
    .nubl-assistant .noor-portal { padding: .45rem .45rem 5.25rem; place-items: end center; }
    .nubl-assistant .noor-portal-shell { width: 100%; height: min(720px,calc(100svh - 5.7rem)); min-height: 500px; border-radius: 1.35rem; }
    .nubl-assistant .noor-home-hero { min-height: 300px; grid-template-columns: minmax(0,1.08fr) minmax(128px,.92fr); }
    .nubl-home-copy { padding: 4rem .9rem 1.8rem .65rem; }
    .nubl-assistant .noor-home-hero h2 { font-size: clamp(1.5rem,7vw,1.95rem); }
    .nubl-assistant .noor-home-hero p { font-size: .76rem; max-width: 205px; }
    .nubl-home-character { inset: 1.5rem -2.6rem 0 -1.4rem; }
    .nubl-orbit { display: none; }
    .nubl-assistant .noor-close { inset-block-start: .6rem; inset-inline-start: .6rem; }
}

@media (max-width: 430px) {
    .nubl-invite { grid-template-columns: 88px minmax(0,1fr); min-height: 128px; padding: .75rem .75rem .75rem .1rem; }
    .nubl-invite-character { width: 98px; height: 135px; }
    .nubl-assistant .noor-home-hero { grid-template-columns: minmax(0,1.2fr) minmax(108px,.8fr); }
    .nubl-home-copy { padding-inline-start: .55rem; padding-inline-end: .75rem; }
    .nubl-assistant .noor-home-hero .noor-kicker { font-size: .61rem; }
    .nubl-assistant .noor-home-hero h2 { font-size: 1.55rem; }
    .nubl-assistant .noor-home-hero p { font-size: .7rem; line-height: 1.65; }
    .nubl-home-character { inset-inline-start: -2.2rem; inset-inline-end: -3.4rem; }
    .nubl-quick-grid { gap: .45rem; padding-inline: .75rem; }
    .nubl-quick-grid button, .nubl-quick-grid a { min-height: 66px; grid-template-columns: 32px minmax(0,1fr); padding: .55rem; }
    .nubl-quick-grid i { width: 32px; height: 32px; }
    .nubl-quick-grid strong { font-size: .67rem; }
}

@media (prefers-reduced-motion: reduce) {
    .nubl-assistant .noor-fab-aura,
    .nubl-assistant.is-thinking .noor-fab-core { animation: none !important; }
    .nubl-invite { transition: none; }
}

/* =========================================================
   NOBALA SMART ENTRY GATEWAY — NUBL DIGITAL GUIDE
   ========================================================= */
body.entry-gateway-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.nobala-entry-gateway[hidden] {
    display: none !important;
}

.nobala-entry-gateway {
    --entry-navy: #132449;
    --entry-navy-soft: #1d3566;
    --entry-blue: #294a78;
    --entry-burgundy: #132449;
    --entry-burgundy-deep: #0d1932;
    --entry-gold: #C9A94E;
    --entry-gold-light: #e5d38f;
    --entry-white: #ffffff;
    position: fixed;
    inset: 0;
    z-index: 1800;
    min-height: 100dvh;
    overflow: auto;
    color: var(--entry-white);
    background: var(--entry-navy);
    opacity: 0;
    visibility: hidden;
    isolation: isolate;
    transition: opacity .48s ease, visibility .48s ease;
}

.nobala-entry-gateway.is-ready {
    opacity: 1;
    visibility: visible;
}

.nobala-entry-gateway.is-closing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.nobala-entry-gateway__backdrop {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 22%, rgba(210,190,106,.055), transparent 24rem),
        radial-gradient(circle at 88% 76%, rgba(19,36,73,.045), transparent 28rem),
        linear-gradient(90deg, rgba(7,24,47,.98), rgba(15,36,70,.94) 48%, rgba(31,46,88,.92));
}

.nobala-entry-gateway__backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 52% 18%, rgba(255,255,255,.025), transparent 32rem);
    opacity: .7;
}

.nobala-entry-gateway__backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4,15,34,.10), rgba(4,15,34,.48));
    pointer-events: none;
}

.nobala-entry-gateway__glow {
    position: absolute;
    width: min(48vw, 720px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(30px);
    opacity: .54;
}

.nobala-entry-gateway__glow--gold {
    inset-inline-start: -15vw;
    top: -28%;
    background: radial-gradient(circle, rgba(213,189,104,.42), rgba(213,189,104,.08) 44%, transparent 72%);
}

.nobala-entry-gateway__glow--burgundy {
    inset-inline-end: -17vw;
    bottom: -42%;
    background: radial-gradient(circle, rgba(19,36,73,.46), rgba(19,36,73,.10) 48%, transparent 72%);
}

.nobala-entry-gateway__line {
    position: absolute;
    height: 1px;
    width: 46vw;
    background: linear-gradient(90deg, transparent, rgba(213,189,104,.58), transparent);
    transform-origin: center;
    opacity: .58;
}

.nobala-entry-gateway__line--one {
    top: 24%;
    left: -10%;
    transform: rotate(-17deg);
}

.nobala-entry-gateway__line--two {
    right: -12%;
    bottom: 22%;
    transform: rotate(13deg);
}

.nobala-entry-gateway__skip {
    position: fixed;
    z-index: 5;
    inset-block-start: max(22px, env(safe-area-inset-top));
    inset-inline-end: max(26px, env(safe-area-inset-right));
    display: inline-flex;
    align-items: center;
    gap: .68rem;
    min-height: 46px;
    padding: .66rem 1rem;
    color: rgba(255,255,255,.82);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(8,24,49,.42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 36px rgba(0,0,0,.16);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}

.nobala-entry-gateway__skip:hover,
.nobala-entry-gateway__skip:focus-visible {
    color: #fff;
    border-color: rgba(213,189,104,.72);
    background: rgba(19,36,73,.36);
    transform: translateY(-2px);
}

.nobala-entry-gateway__shell {
    position: relative;
    z-index: 2;
    width: min(1440px, calc(100% - 72px));
    min-height: 100dvh;
    box-sizing: border-box;
    margin-inline: auto;
    padding: 62px 0 66px;
    display: grid;
    grid-template-columns: minmax(390px, .88fr) minmax(520px, 1.12fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 6.2rem);
}

.nobala-entry-gateway__visual {
    position: relative;
    min-height: min(70vh, 700px);
    align-self: end;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transform: translate3d(-42px, 12px, 0);
    transition: opacity .72s .18s ease, transform .82s .18s cubic-bezier(.2,.72,.2,1);
}

html[dir='ltr'] .nobala-entry-gateway__visual {
    transform: translate3d(42px, 12px, 0);
}

.nobala-entry-gateway.is-ready .nobala-entry-gateway__visual {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.nobala-entry-gateway__character-frame {
    position: relative;
    z-index: 2;
    width: min(100%, 580px);
    height: min(68vh, 680px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.nobala-entry-gateway__character-frame::before {
    content: '';
    position: absolute;
    inset-inline-start: 8%;
    bottom: 4%;
    width: 82%;
    height: 84%;
    border-radius: 47% 47% 22% 22% / 35% 35% 18% 18%;
    background:
        linear-gradient(145deg, rgba(213,189,104,.12), rgba(19,36,73,.34)),
        rgba(255,255,255,.035);
    border: 1px solid rgba(213,189,104,.20);
    box-shadow: inset 0 0 90px rgba(255,255,255,.03), 0 42px 90px rgba(0,0,0,.25);
    transform: rotate(-3deg);
}

.nobala-entry-gateway__character-halo {
    position: absolute;
    z-index: 0;
    width: 78%;
    aspect-ratio: 1;
    bottom: 13%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(213,189,104,.33), rgba(213,189,104,.06) 48%, transparent 70%);
    filter: blur(4px);
}

.nobala-entry-gateway__character {
    position: relative;
    z-index: 3;
    display: block;
    width: min(96%, 550px);
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 34px 42px rgba(0,0,0,.30));
    transform-origin: 50% 100%;
    animation: nobalaEntryCharacterBreath 4.6s ease-in-out infinite;
}

.nobala-entry-gateway__orbit {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
}

.nobala-entry-gateway__orbit--outer {
    width: min(38vw, 590px);
    aspect-ratio: 1;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(213,189,104,.30);
    animation: nobalaEntryOrbit 24s linear infinite;
}

.nobala-entry-gateway__orbit--inner {
    width: min(29vw, 450px);
    aspect-ratio: 1;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: 0 0 0 32px rgba(255,255,255,.018), 0 0 0 64px rgba(255,255,255,.012);
}

.nobala-entry-gateway__signal {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    min-width: 70px;
    min-height: 38px;
    padding: .45rem .8rem;
    border: 1px solid rgba(213,189,104,.30);
    border-radius: 999px;
    color: #fff;
    background: rgba(11,31,61,.68);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 15px 38px rgba(0,0,0,.20);
    font-size: .78rem;
    font-weight: 800;
}

.nobala-entry-gateway__signal--knowledge {
    top: 17%;
    inset-inline-start: 3%;
}

.nobala-entry-gateway__signal--skill {
    top: 33%;
    inset-inline-end: -2%;
}

.nobala-entry-gateway__signal--value {
    bottom: 20%;
    inset-inline-start: -1%;
}

.nobala-entry-gateway__identity {
    position: absolute;
    z-index: 5;
    inset-inline-end: 3%;
    bottom: 6%;
    min-width: 190px;
    padding: .9rem 1rem;
    border: 1px solid rgba(213,189,104,.28);
    border-radius: 18px;
    background: rgba(8,24,49,.70);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 48px rgba(0,0,0,.24);
}

.nobala-entry-gateway__identity strong,
.nobala-entry-gateway__identity span {
    display: block;
}

.nobala-entry-gateway__identity strong {
    color: var(--entry-gold-light);
    font-size: 1.05rem;
    font-weight: 900;
}

.nobala-entry-gateway__identity span {
    color: rgba(255,255,255,.66);
    font-size: .74rem;
}

.nobala-entry-gateway__content {
    position: relative;
    z-index: 3;
    max-width: 720px;
    opacity: 0;
    transform: translate3d(38px, 0, 0);
    transition: opacity .72s .08s ease, transform .82s .08s cubic-bezier(.2,.72,.2,1);
}

html[dir='ltr'] .nobala-entry-gateway__content {
    transform: translate3d(-38px, 0, 0);
}

.nobala-entry-gateway.is-ready .nobala-entry-gateway__content {
    opacity: 1;
    transform: translate3d(0,0,0);
}

.nobala-entry-gateway__brand {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.15rem;
}

.nobala-entry-gateway__brand img {
    width: 56px;
    height: 56px;
    padding: 8px;
    object-fit: contain;
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

.nobala-entry-gateway__brand strong,
.nobala-entry-gateway__brand span {
    display: block;
}

.nobala-entry-gateway__brand strong {
    color: #fff;
    font-size: .94rem;
    font-weight: 850;
}

.nobala-entry-gateway__brand span {
    max-width: 340px;
    color: rgba(255,255,255,.62);
    font-size: .72rem;
    line-height: 1.55;
}

.nobala-entry-gateway__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: .42rem .82rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(213,189,104,.28);
    border-radius: 999px;
    color: var(--entry-gold-light);
    background: rgba(213,189,104,.10);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.nobala-entry-gateway #nobalaEntryTitle {
    max-width: 760px;
    margin: 0 0 1rem;
    color: #fff;
    font-size: clamp(2.65rem, 5.2vw, 5.8rem);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.nobala-entry-gateway #nobalaEntryTitle::first-line {
    color: #fff;
}

.nobala-entry-gateway__lead {
    max-width: 650px;
    margin: 0 0 .7rem;
    color: rgba(255,255,255,.78);
    font-size: clamp(1.02rem, 1.55vw, 1.28rem);
    line-height: 1.85;
}

.nobala-entry-gateway__question {
    display: block;
    margin-bottom: 1.18rem;
    color: var(--entry-gold-light);
    font-size: clamp(1rem, 1.5vw, 1.22rem);
    font-weight: 900;
}

.nobala-entry-gateway__choices {
    display: grid;
    gap: .72rem;
    max-width: 680px;
}

.nobala-entry-choice {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: .9rem;
    width: 100%;
    min-height: 76px;
    padding: .72rem .9rem;
    overflow: hidden;
    text-align: start;
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 19px;
    background: rgba(255,255,255,.065);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 42px rgba(0,0,0,.12);
    font-family: inherit;
    cursor: pointer;
    transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.nobala-entry-choice::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(213,189,104,.15), transparent 44%);
    opacity: 0;
    transition: opacity .28s ease;
}

.nobala-entry-choice:hover,
.nobala-entry-choice:focus-visible {
    color: #fff;
    transform: translateX(-7px);
    border-color: rgba(213,189,104,.56);
    background: rgba(255,255,255,.105);
    box-shadow: 0 22px 54px rgba(0,0,0,.20);
}

html[dir='ltr'] .nobala-entry-choice:hover,
html[dir='ltr'] .nobala-entry-choice:focus-visible {
    transform: translateX(7px);
}

.nobala-entry-choice:hover::before,
.nobala-entry-choice:focus-visible::before {
    opacity: 1;
}

.nobala-entry-choice--primary {
    border-color: rgba(213,189,104,.50);
    background: linear-gradient(110deg, rgba(19,36,73,.94), rgba(13,25,50,.82));
    box-shadow: 0 20px 46px rgba(13,25,50,.28);
}

.nobala-entry-choice__icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--entry-gold-light);
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.10);
    font-size: 1.05rem;
}

.nobala-entry-choice__copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.nobala-entry-choice__copy strong,
.nobala-entry-choice__copy small {
    display: block;
}

.nobala-entry-choice__copy strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.45;
}

.nobala-entry-choice__copy small {
    color: rgba(255,255,255,.63);
    font-size: .75rem;
    line-height: 1.55;
}

.nobala-entry-choice--primary .nobala-entry-choice__copy small {
    color: rgba(255,255,255,.78);
}

.nobala-entry-choice__arrow {
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,.58);
    transition: transform .25s ease, color .25s ease;
}

.nobala-entry-choice:hover .nobala-entry-choice__arrow,
.nobala-entry-choice:focus-visible .nobala-entry-choice__arrow {
    color: var(--entry-gold-light);
    transform: translateX(-3px);
}

html[dir='ltr'] .nobala-entry-choice:hover .nobala-entry-choice__arrow,
html[dir='ltr'] .nobala-entry-choice:focus-visible .nobala-entry-choice__arrow {
    transform: translateX(3px);
}

.nobala-entry-gateway__ask {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: .95rem;
    padding: .2rem 0;
    color: rgba(255,255,255,.72);
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 750;
    cursor: pointer;
    transition: color .22s ease;
}

.nobala-entry-gateway__ask:hover,
.nobala-entry-gateway__ask:focus-visible {
    color: var(--entry-gold-light);
}

.nobala-entry-gateway__footer {
    position: fixed;
    z-index: 4;
    inset-inline: max(28px, env(safe-area-inset-left)) max(28px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: rgba(255,255,255,.48);
    font-size: .72rem;
    pointer-events: none;
}

.nobala-entry-gateway__status {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    color: rgba(255,255,255,.64);
}

.nobala-entry-gateway__status > i {
    color: #51d18d;
    font-size: .48rem;
    box-shadow: 0 0 0 5px rgba(81,209,141,.08);
    border-radius: 50%;
}

@keyframes nobalaEntryCharacterBreath {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.004); }
}

@keyframes nobalaEntryOrbit {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 1180px) {
    .nobala-entry-gateway__shell {
        width: min(1180px, calc(100% - 42px));
        grid-template-columns: minmax(320px, .86fr) minmax(460px, 1.14fr);
        gap: 2.2rem;
    }

    .nobala-entry-gateway__visual {
        min-height: 680px;
    }

    .nobala-entry-gateway__character-frame {
        height: 650px;
    }

    .nobala-entry-gateway #nobalaEntryTitle {
        font-size: clamp(2.6rem, 5vw, 4.75rem);
    }
}

@media (max-width: 900px) {
    .nobala-entry-gateway {
        min-height: 100svh;
    }

    .nobala-entry-gateway__shell {
        width: min(760px, calc(100% - 34px));
        min-height: auto;
        padding: 92px 0 120px;
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .nobala-entry-gateway__content {
        order: 1;
        max-width: 100%;
    }

    .nobala-entry-gateway__visual {
        order: 2;
        min-height: 380px;
        max-height: 42vh;
        align-self: auto;
    }

    .nobala-entry-gateway__character-frame {
        height: min(44vh, 430px);
        width: min(100%, 440px);
    }

    .nobala-entry-gateway__character-frame::before {
        height: 72%;
        bottom: 0;
    }

    .nobala-entry-gateway__orbit--outer {
        width: min(68vw, 430px);
    }

    .nobala-entry-gateway__orbit--inner {
        width: min(54vw, 340px);
    }

    .nobala-entry-gateway__identity {
        inset-inline-end: calc(50% - 210px);
        bottom: 2%;
    }

    .nobala-entry-gateway__signal--knowledge { top: 11%; inset-inline-start: 12%; }
    .nobala-entry-gateway__signal--skill { top: 29%; inset-inline-end: 9%; }
    .nobala-entry-gateway__signal--value { bottom: 13%; inset-inline-start: 8%; }

    .nobala-entry-gateway #nobalaEntryTitle {
        max-width: 680px;
        font-size: clamp(2.45rem, 8vw, 4rem);
    }

    .nobala-entry-gateway__choices {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: none;
    }

    .nobala-entry-choice {
        grid-template-columns: 44px 1fr;
        min-height: 132px;
        align-content: start;
        padding: .9rem;
    }

    .nobala-entry-choice__arrow { display: none; }
    .nobala-entry-choice__copy small { margin-top: .3rem; }
}

@media (max-width: 660px) {
    .nobala-entry-gateway__skip {
        inset-block-start: max(14px, env(safe-area-inset-top));
        inset-inline-end: max(14px, env(safe-area-inset-right));
        min-height: 40px;
        padding: .5rem .72rem;
        font-size: .74rem;
    }

    .nobala-entry-gateway__shell {
        width: min(100% - 24px, 560px);
        padding-top: 74px;
        padding-bottom: 84px;
        gap: .7rem;
    }

    .nobala-entry-gateway__brand {
        margin-bottom: .72rem;
    }

    .nobala-entry-gateway__brand img {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .nobala-entry-gateway__brand span {
        display: none;
    }

    .nobala-entry-gateway__eyebrow {
        min-height: 30px;
        margin-bottom: .68rem;
        font-size: .69rem;
    }

    .nobala-entry-gateway #nobalaEntryTitle {
        margin-bottom: .68rem;
        font-size: clamp(2.12rem, 10.7vw, 3.25rem);
        line-height: 1.06;
    }

    .nobala-entry-gateway__lead {
        margin-bottom: .42rem;
        font-size: .92rem;
        line-height: 1.75;
    }

    .nobala-entry-gateway__question {
        margin-bottom: .7rem;
        font-size: .91rem;
    }

    .nobala-entry-gateway__choices {
        grid-template-columns: 1fr;
        gap: .52rem;
    }

    .nobala-entry-choice {
        grid-template-columns: 42px 1fr auto;
        min-height: 66px;
        padding: .55rem .68rem;
        border-radius: 16px;
    }

    .nobala-entry-choice__icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .nobala-entry-choice__copy strong { font-size: .89rem; }
    .nobala-entry-choice__copy small { font-size: .67rem; margin-top: 0; }
    .nobala-entry-choice__arrow { display: block; }

    .nobala-entry-gateway__ask {
        margin-top: .58rem;
        font-size: .76rem;
    }

    .nobala-entry-gateway__visual {
        min-height: 280px;
        max-height: 33vh;
    }

    .nobala-entry-gateway__character-frame {
        height: min(34vh, 320px);
        width: min(92vw, 340px);
    }

    .nobala-entry-gateway__identity {
        min-width: 150px;
        padding: .62rem .72rem;
        inset-inline-end: 6%;
        bottom: 1%;
    }

    .nobala-entry-gateway__identity strong { font-size: .9rem; }
    .nobala-entry-gateway__identity span { font-size: .63rem; }

    .nobala-entry-gateway__signal {
        min-width: 56px;
        min-height: 30px;
        padding: .3rem .55rem;
        font-size: .65rem;
    }

    .nobala-entry-gateway__signal--knowledge { top: 8%; inset-inline-start: 7%; }
    .nobala-entry-gateway__signal--skill { top: 31%; inset-inline-end: 4%; }
    .nobala-entry-gateway__signal--value { bottom: 9%; inset-inline-start: 2%; }

    .nobala-entry-gateway__footer {
        inset-inline: 14px;
        bottom: max(9px, env(safe-area-inset-bottom));
        justify-content: center;
        text-align: center;
    }

    .nobala-entry-gateway__footer > span:first-child {
        display: none;
    }
}


/* Desktop/Laptop viewport-fit: keep the complete smart-entry journey visible
   down to the current guide availability status without vertical scrolling. */
@media (min-width: 901px) and (min-height: 560px) and (max-height: 820px) {
    .nobala-entry-gateway {
        overflow: hidden;
    }

    .nobala-entry-gateway__shell {
        height: 100dvh;
        min-height: 0;
        box-sizing: border-box;
        padding-top: clamp(42px, 6.2vh, 54px);
        padding-bottom: clamp(34px, 5.2vh, 46px);
        gap: clamp(1.6rem, 3.4vw, 3.7rem);
        align-items: center;
    }

    .nobala-entry-gateway__visual {
        min-height: 0;
        height: min(66dvh, 535px);
        align-self: center;
    }

    .nobala-entry-gateway__character-frame {
        min-height: 0;
        height: 100%;
        width: min(100%, 540px);
    }

    .nobala-entry-gateway__character {
        width: min(92%, 510px);
    }

    .nobala-entry-gateway__orbit--outer {
        width: min(34vw, 500px);
    }

    .nobala-entry-gateway__orbit--inner {
        width: min(26vw, 390px);
    }

    .nobala-entry-gateway__identity {
        min-width: 170px;
        padding: .72rem .82rem;
        bottom: 3%;
    }

    .nobala-entry-gateway__identity strong {
        font-size: .96rem;
    }

    .nobala-entry-gateway__identity span {
        font-size: .68rem;
    }

    .nobala-entry-gateway__brand {
        gap: .68rem;
        margin-bottom: .62rem;
    }

    .nobala-entry-gateway__brand img {
        width: 46px;
        height: 46px;
        padding: 7px;
        border-radius: 14px;
    }

    .nobala-entry-gateway__brand strong {
        font-size: .88rem;
    }

    .nobala-entry-gateway__brand span {
        font-size: .67rem;
        line-height: 1.4;
    }

    .nobala-entry-gateway__eyebrow {
        min-height: 30px;
        padding: .34rem .72rem;
        margin-bottom: .58rem;
        font-size: .72rem;
    }

    .nobala-entry-gateway #nobalaEntryTitle {
        margin-bottom: .56rem;
        font-size: clamp(2.35rem, 4.25vw, 4.25rem);
        line-height: .99;
    }

    .nobala-entry-gateway__lead {
        margin-bottom: .32rem;
        font-size: clamp(.92rem, 1.18vw, 1.06rem);
        line-height: 1.55;
    }

    .nobala-entry-gateway__question {
        margin-bottom: .62rem;
        font-size: clamp(.92rem, 1.12vw, 1rem);
    }

    .nobala-entry-gateway__choices {
        gap: .48rem;
    }

    .nobala-entry-choice {
        min-height: 62px;
        padding: .5rem .76rem;
        gap: .72rem;
        border-radius: 17px;
    }

    .nobala-entry-choice__icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: .96rem;
    }

    .nobala-entry-choice__copy strong {
        font-size: .93rem;
        line-height: 1.35;
    }

    .nobala-entry-choice__copy small {
        font-size: .69rem;
        line-height: 1.4;
    }

    .nobala-entry-gateway__ask {
        margin-top: .5rem;
        font-size: .78rem;
    }

    .nobala-entry-gateway__footer {
        bottom: max(9px, env(safe-area-inset-bottom));
        font-size: .68rem;
    }
}

@media (min-width: 901px) and (min-height: 560px) and (max-height: 680px) {
    .nobala-entry-gateway__skip {
        inset-block-start: max(14px, env(safe-area-inset-top));
        min-height: 40px;
        padding: .48rem .78rem;
        font-size: .78rem;
    }

    .nobala-entry-gateway__shell {
        padding-top: 36px;
        padding-bottom: 30px;
        gap: clamp(1.35rem, 2.8vw, 2.7rem);
    }

    .nobala-entry-gateway__visual {
        height: min(63dvh, 430px);
    }

    .nobala-entry-gateway__character-frame {
        width: min(100%, 500px);
    }

    .nobala-entry-gateway__character {
        width: min(90%, 470px);
    }

    .nobala-entry-gateway__signal {
        min-width: 60px;
        min-height: 32px;
        padding: .32rem .6rem;
        font-size: .68rem;
    }

    .nobala-entry-gateway__identity {
        min-width: 158px;
        padding: .6rem .72rem;
    }

    .nobala-entry-gateway__brand {
        margin-bottom: .38rem;
    }

    .nobala-entry-gateway__brand img {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .nobala-entry-gateway__brand span {
        font-size: .62rem;
    }

    .nobala-entry-gateway__eyebrow {
        min-height: 27px;
        margin-bottom: .42rem;
        padding: .28rem .66rem;
        font-size: .68rem;
    }

    .nobala-entry-gateway #nobalaEntryTitle {
        margin-bottom: .4rem;
        font-size: clamp(2.15rem, 4vw, 3.6rem);
        line-height: .96;
    }

    .nobala-entry-gateway__lead {
        margin-bottom: .22rem;
        font-size: .9rem;
        line-height: 1.42;
    }

    .nobala-entry-gateway__question {
        margin-bottom: .46rem;
        font-size: .9rem;
    }

    .nobala-entry-gateway__choices {
        gap: .38rem;
    }

    .nobala-entry-choice {
        min-height: 56px;
        padding: .4rem .68rem;
        grid-template-columns: 38px 1fr auto;
        gap: .62rem;
        border-radius: 15px;
    }

    .nobala-entry-choice__icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: .88rem;
    }

    .nobala-entry-choice__copy strong {
        font-size: .88rem;
    }

    .nobala-entry-choice__copy small {
        font-size: .65rem;
        line-height: 1.3;
    }

    .nobala-entry-gateway__ask {
        margin-top: .34rem;
        font-size: .72rem;
    }

    .nobala-entry-gateway__footer {
        bottom: max(6px, env(safe-area-inset-bottom));
        font-size: .64rem;
    }
}

@media (max-height: 559px) and (min-width: 901px) {
    .nobala-entry-gateway {
        overflow: auto;
    }

    .nobala-entry-gateway__shell {
        min-height: 560px;
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .nobala-entry-gateway__visual,
    .nobala-entry-gateway__character-frame {
        min-height: 0;
        height: 390px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nobala-entry-gateway,
    .nobala-entry-gateway *,
    .nobala-entry-gateway *::before,
    .nobala-entry-gateway *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .nobala-entry-gateway__visual,
    .nobala-entry-gateway__content {
        opacity: 1;
        transform: none;
    }
}

.nobala-entry-gateway #nobalaEntryTitle > span,
.nobala-entry-gateway #nobalaEntryTitle > em {
    display: block;
}

.nobala-entry-gateway #nobalaEntryTitle > em {
    margin-top: .12em;
    color: var(--entry-gold-light);
    font-style: normal;
    font-weight: 900;
    text-shadow: 0 12px 34px rgba(213,189,104,.12);
}

/* ===== Academic calendar: official HTML calendar + compact filters ===== */
.page-academic .calendar-hero-card {
    display: grid;
    align-content: start;
    gap: 0.7rem;
    min-height: 100%;
}

.page-academic .calendar-hero-card .title,
.page-academic .calendar-hero-card p {
    margin: 0;
}

.page-academic .calendar-year-chip {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(210, 190, 106, 0.18);
    color: #725c17;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.page-academic .official-calendar-section {
    padding-top: clamp(3rem, 6vw, 5.5rem);
}

.page-academic .calendar-section-heading {
    max-width: 880px;
    margin-bottom: 1.6rem;
}

.page-academic .calendar-section-heading .lead {
    max-width: 760px;
    color: var(--brand-slate);
}

.page-academic .official-calendar-stack {
    display: grid;
    gap: 2rem;
}

.page-academic .official-calendar-term {
    display: grid;
    gap: 0.8rem;
}

.page-academic .calendar-term-heading {
    display: flex;
    align-items: center;
    min-height: 62px;
    padding: 0.85rem 1.25rem;
    border: 1px solid rgba(210, 190, 106, 0.42);
    border-radius: 1.2rem;
    background: linear-gradient(135deg, rgba(241, 232, 188, 0.94), rgba(255, 248, 215, 0.96));
}

.page-academic .calendar-term-heading h3 {
    margin: 0;
    color: var(--brand-navy);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 900;
}

.page-academic .calendar-table-shell {
    overflow: hidden;
    border-radius: 1.3rem;
    border-color: #e4e9ef;
    box-shadow: 0 18px 44px rgba(23, 41, 77, 0.06);
}

.page-academic .official-calendar-table {
    min-width: 720px;
    border-spacing: 0;
    padding: 0;
    background: #ffffff;
}

.page-academic .official-calendar-table thead th {
    padding: 0.9rem 1rem;
    border-inline-end: 1px solid rgba(23, 41, 77, 0.08);
    background: #f7edb4;
    color: var(--brand-navy);
    font-size: 0.96rem;
}

.page-academic .official-calendar-table thead th:first-child,
.page-academic .official-calendar-table thead th:last-child {
    border-radius: 0;
}

.page-academic .official-calendar-table tbody td {
    padding: 0.9rem 1rem;
    border-top: 1px solid #edf0f4;
    border-inline-end: 1px solid #edf0f4;
    background: #fbfbfc;
    color: var(--brand-ink);
    font-weight: 700;
}

.page-academic .official-calendar-table tbody td:first-child {
    width: 43%;
    font-weight: 900;
}

.page-academic .official-calendar-table tbody tr.tone-neutral td {
    background: #fbfbfc;
    color: var(--brand-ink);
}

.page-academic .official-calendar-table tbody tr.tone-national td {
    background: #e4f6e7;
    color: #173c2b;
}

.page-academic .official-calendar-table tbody tr.tone-open td {
    background: #e1f1fb;
    color: #153b56;
}

.page-academic .official-calendar-table time,
.page-academic .official-calendar-table td[dir="ltr"] {
    unicode-bidi: isolate;
    white-space: nowrap;
}

.page-academic .calendar-official-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.15rem;
    padding: 0.9rem 1rem;
    border: 1px solid #e5eaf1;
    border-radius: 1rem;
    background: #f8fafc;
    color: var(--brand-slate);
}

.page-academic .calendar-official-note i {
    margin-top: 0.32rem;
    color: var(--brand-navy);
}

.page-academic .calendar-official-note p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.8;
}

.page-academic .calendar-updates-section {
    background: linear-gradient(180deg, #f8fbff, #ffffff);
    border-top: 1px solid #edf2f8;
}

.page-academic .calendar-updates-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.25rem;
}

.page-academic .calendar-updates-heading p {
    max-width: 760px;
    margin-top: 0.4rem;
    color: var(--brand-slate);
}

.page-academic .calendar-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 1rem;
    align-items: end;
    padding: 1.15rem;
    border: 1px solid #e2e9f1;
    border-radius: 1.35rem;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(23, 41, 77, 0.06);
}

.page-academic .calendar-filter-field {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.page-academic .calendar-filter-field label {
    color: var(--brand-navy);
    font-size: 0.86rem;
    font-weight: 900;
}

.page-academic .calendar-select-wrap {
    position: relative;
}

.page-academic .calendar-select-wrap > i {
    position: absolute;
    inset-inline-start: 0.95rem;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: #7c8799;
    pointer-events: none;
}

.page-academic .calendar-select-wrap select {
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 2.65rem 0.65rem 0.9rem;
    border: 1px solid #dce4ee;
    border-radius: 0.9rem;
    background: #fbfdff;
    color: var(--brand-ink);
    font: inherit;
    font-weight: 700;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

html[dir="ltr"] .page-academic .calendar-select-wrap select {
    padding: 0.65rem 0.9rem 0.65rem 2.65rem;
}

.page-academic .calendar-select-wrap select:focus {
    border-color: rgba(25, 136, 216, 0.7);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(25, 136, 216, 0.1);
}

.page-academic .calendar-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
}

.page-academic .calendar-filter-actions .btn {
    min-height: 48px;
    white-space: nowrap;
}

.page-academic .calendar-filter-reset {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--brand-slate);
    font-size: 0.87rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.page-academic .calendar-filter-reset:hover,
.page-academic .calendar-filter-reset:focus-visible {
    color: var(--brand-navy);
    text-decoration: underline;
}

.page-academic .calendar-filter-results,
.page-academic .calendar-empty-state {
    margin-top: 1.5rem;
}

.page-academic .calendar-empty-state {
    display: grid;
    justify-items: center;
    text-align: center;
}

.page-academic .calendar-empty-state .icon-box {
    margin-bottom: 0.75rem;
}

.page-academic .calendar-empty-state p {
    max-width: 680px;
    color: var(--brand-slate);
}

@media (max-width: 991px) {
    .page-academic .calendar-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-academic .calendar-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .page-academic .calendar-section-heading {
        margin-bottom: 1.15rem;
    }

    .page-academic .calendar-term-heading {
        min-height: 54px;
        padding: 0.75rem 0.9rem;
        border-radius: 1rem;
    }

    .page-academic .calendar-table-shell {
        overflow: visible;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .page-academic .official-calendar-table {
        min-width: 0;
        width: 100%;
        background: transparent;
    }

    .page-academic .official-calendar-table tbody tr {
        margin-bottom: 0.8rem;
        border: 1px solid #e1e7ee;
        border-radius: 1rem;
        background: #ffffff;
        box-shadow: 0 10px 28px rgba(23, 41, 77, 0.06);
    }

    .page-academic .official-calendar-table tbody td,
    .page-academic .official-calendar-table tbody td:first-child {
        width: 100%;
        padding: 0.68rem 0.8rem;
        border-inline-end: 0;
        border-bottom: 1px solid rgba(23, 41, 77, 0.07);
        font-size: 0.9rem;
    }

    .page-academic .official-calendar-table tbody td::before {
        color: inherit;
        opacity: 0.68;
    }

    .page-academic .official-calendar-table tbody td:last-child {
        border-bottom: 0;
    }

    .page-academic .calendar-filter {
        grid-template-columns: 1fr;
        padding: 0.9rem;
        gap: 0.85rem;
    }

    .page-academic .calendar-filter-actions {
        grid-column: auto;
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .page-academic .calendar-filter-actions .btn,
    .page-academic .calendar-filter-reset {
        width: 100%;
        justify-content: center;
    }

    .page-academic .calendar-official-note {
        padding: 0.8rem 0.85rem;
    }
}

@media (max-width: 430px) {
    .page-academic .calendar-year-chip {
        font-size: 0.86rem;
    }

    .page-academic .official-calendar-stack {
        gap: 1.4rem;
    }

    .page-academic .calendar-term-heading h3 {
        font-size: 1.08rem;
    }
}

/* =========================================================
   STUDENT GUIDE SYSTEM — WEEKLY REAL STUDENT IDENTITY
   Public portraits use the original approved school photo and
   crop it responsively around the stored focal point.
   ========================================================= */
.nobala-entry-gateway__visual--student {
    min-height: min(72vh, 720px);
    align-self: center;
}

.nobala-entry-gateway__character-frame--student {
    width: min(100%, 540px);
    height: min(66vh, 650px);
    min-height: 500px;
    overflow: hidden;
    border-radius: 38px;
    border: 1px solid rgba(241,220,134,.28);
    background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(11,32,62,.30));
    box-shadow: 0 38px 90px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.04);
}

.nobala-entry-gateway__character-frame--student::before {
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
    border-radius: inherit;
    transform: none;
    background: linear-gradient(180deg, transparent 45%, rgba(6,20,43,.12) 68%, rgba(6,20,43,.72) 100%);
    box-shadow: none;
    z-index: 4;
    pointer-events: none;
}

.nobala-entry-gateway__character-frame--student .nobala-entry-gateway__character-halo {
    width: 80%;
    bottom: -12%;
    opacity: .55;
}

.nobala-entry-gateway__character--student {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--guide-focal-x,50%) var(--guide-focal-y,30%);
    filter: none;
    animation: none;
    transform: none;
}

.nobala-entry-gateway__identity--student {
    inset-inline: 1rem;
    bottom: 1rem;
    min-width: 0;
    z-index: 7;
    display: grid;
    gap: .18rem;
    padding: .85rem 1rem;
    border-color: rgba(241,220,134,.34);
    background: linear-gradient(135deg, rgba(7,24,47,.90), rgba(23,44,82,.78));
}

.nobala-entry-gateway__identity--student small {
    color: var(--entry-gold-light);
    font-size: .68rem;
    font-weight: 800;
}

.nobala-entry-gateway__identity--student strong {
    color: #fff;
    font-size: clamp(1rem,1.4vw,1.25rem);
}

.nobala-entry-gateway__identity--student span {
    color: rgba(255,255,255,.72);
}

.student-guide-assistant .noor-fab-face,
.student-guide-assistant .noor-chat-avatar,
.student-guide-assistant .noor-message-avatar,
.student-guide-assistant .nubl-invite-character,
.student-guide-assistant .nubl-home-character {
    background-image: var(--nubl-avatar);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(--guide-focal-x,50%) var(--guide-focal-y,30%);
}

.student-guide-assistant .noor-fab-face {
    transform: none;
}

.student-guide-assistant .noor-fab-face::before,
.student-guide-assistant .noor-fab-face::after {
    display: none !important;
}

.student-guide-assistant .nubl-invite-character {
    width: 96px;
    height: 124px;
    margin: 0 0 -.85rem -.1rem;
    border-radius: 24px 24px 0 0;
    border: 1px solid rgba(255,255,255,.14);
    background-color: rgba(255,255,255,.06);
    filter: drop-shadow(0 13px 18px rgba(0,0,0,.22));
}

.student-guide-assistant .nubl-home-character {
    inset: 1rem .65rem .8rem .65rem;
    border-radius: 26px;
    border: 1px solid rgba(241,220,134,.23);
    box-shadow: 0 18px 35px rgba(0,0,0,.24);
    filter: none;
}

.student-guide-assistant .nubl-home-halo {
    width: 210px;
    height: 210px;
    opacity: .58;
}

.student-guide-assistant .noor-chat-avatar,
.student-guide-assistant .noor-message-avatar {
    background-size: cover;
    background-position: var(--guide-focal-x,50%) var(--guide-focal-y,30%);
}

.student-guide-assistant .noor-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--guide-focal-x,50%) var(--guide-focal-y,30%);
}

.student-guide-assistant .noor-fab-text {
    max-width: 190px;
}

.student-guide-assistant .noor-fab-text small {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-guide-assistant .nubl-home-disclosure {
    border-inline-start: 3px solid rgba(208,184,95,.65);
    padding-inline-start: .65rem;
}

@media (max-width: 991px) {
    .nobala-entry-gateway__character-frame--student {
        width: min(100%, 430px);
        height: min(52vh, 500px);
        min-height: 380px;
        border-radius: 30px;
    }
}

@media (max-width: 767px) {
    .nobala-entry-gateway__visual--student {
        min-height: 255px;
    }
    .nobala-entry-gateway__character-frame--student {
        width: min(86vw, 360px);
        height: 255px;
        min-height: 255px;
        border-radius: 26px;
    }
    .nobala-entry-gateway__identity--student {
        inset-inline: .7rem;
        bottom: .7rem;
        padding: .6rem .75rem;
    }
    .nobala-entry-gateway__identity--student strong {
        font-size: .95rem;
    }
    .student-guide-assistant .nubl-invite-character {
        width: 84px;
        height: 108px;
    }
}

@media (max-width: 430px) {
    .nobala-entry-gateway__character-frame--student {
        width: min(88vw, 330px);
        height: 220px;
        min-height: 220px;
    }
}

/* =========================================================
   Facilities virtual tour — 360° responsive experience
   ========================================================= */
.virtual-tour-section {
    position: relative;
    overflow: clip;
    background:
        radial-gradient(circle at 12% 8%, rgba(210, 178, 88, .12), transparent 28rem),
        linear-gradient(180deg, #f8fafc 0%, #eef4f9 100%);
}

.vt-shell {
    margin-top: 2rem;
    overflow: hidden;
    border: 1px solid rgba(23, 41, 77, .1);
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0 26px 70px rgba(11, 32, 62, .12);
}

.vt-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    padding: 1.6rem 1.8rem;
}

.vt-header h3 {
    margin: .35rem 0 .45rem;
    color: var(--brand-blue, #17294d);
    font-size: clamp(1.35rem, 2vw, 2rem);
}

.vt-header p {
    max-width: 60rem;
    margin: 0;
    color: var(--text-muted, #637087);
    line-height: 1.9;
}

.vt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #8a6721;
    font-size: .82rem;
    font-weight: 800;
}

.vt-scene-count {
    display: grid;
    min-width: 7rem;
    place-items: center;
    padding: .85rem 1.1rem;
    border: 1px solid rgba(210, 178, 88, .35);
    border-radius: 1.15rem;
    background: #fffaf0;
    color: var(--brand-blue, #17294d);
}

.vt-scene-count strong {
    font-size: 1.5rem;
    line-height: 1;
}

.vt-scene-count span {
    margin-top: .35rem;
    color: #78633a;
    font-size: .76rem;
    font-weight: 700;
}

.vt-viewer-frame {
    position: relative;
    min-height: clamp(30rem, 58vw, 43rem);
    margin-inline: 1.15rem;
    overflow: hidden;
    border-radius: 1.55rem;
    background: #081a35;
    isolation: isolate;
}

.vt-stage,
.vt-stage .pnlm-container,
.vt-stage .pnlm-render-container,
.vt-stage canvas {
    width: 100% !important;
    height: 100% !important;
}

.vt-stage {
    position: absolute;
    inset: 0;
    min-height: inherit;
    background: #081a35;
}

.vt-stage .pnlm-container {
    position: absolute;
    inset: 0;
    font-family: 'Cairo', sans-serif;
}

.vt-stage .pnlm-hotspot-base {
    font-family: 'Cairo', sans-serif;
}

.vt-cover {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 2rem;
    background-image: var(--vt-cover);
    background-position: center;
    background-size: cover;
    transition: opacity .35s ease, visibility .35s ease;
}

.vt-cover-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 26, 52, .9), rgba(7, 26, 52, .55) 52%, rgba(7, 26, 52, .26));
}

html[dir="ltr"] .vt-cover-shade {
    background: linear-gradient(270deg, rgba(7, 26, 52, .9), rgba(7, 26, 52, .55) 52%, rgba(7, 26, 52, .26));
}

.vt-cover-content {
    position: relative;
    z-index: 1;
    width: min(100%, 36rem);
    margin-inline-end: auto;
    color: #fff;
}

.vt-cover-content h4 {
    margin: .55rem 0 .65rem;
    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1.35;
}

.vt-cover-content p {
    max-width: 34rem;
    margin: 0 0 1.3rem;
    color: rgba(255, 255, 255, .86);
    line-height: 1.9;
}

.vt-360-mark {
    display: inline-grid;
    min-width: 5rem;
    min-height: 3rem;
    place-items: center;
    padding: .35rem .8rem;
    border: 1px solid rgba(255, 226, 145, .62);
    border-radius: 999px;
    background: rgba(9, 31, 61, .62);
    color: #ffe291;
    font-size: 1.15rem;
    font-weight: 900;
    backdrop-filter: blur(10px);
}

.vt-start {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 3.25rem;
}

.vt-shell.is-started .vt-cover {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.vt-topbar {
    position: absolute;
    z-index: 5;
    top: .85rem;
    inset-inline: .85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: #fff;
    pointer-events: none;
    transition: opacity .25s ease;
}

.vt-topbar > div {
    min-width: 0;
    max-width: min(70%, 32rem);
    padding: .62rem .85rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .9rem;
    background: rgba(4, 20, 42, .72);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
    backdrop-filter: blur(12px);
}

.vt-topbar-label {
    display: block;
    margin-bottom: .08rem;
    color: rgba(255, 255, 255, .68);
    font-size: .68rem;
}

.vt-topbar strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
}

.vt-scenes-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.8rem;
    padding: .55rem .8rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .9rem;
    background: rgba(4, 20, 42, .72);
    color: #fff;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(12px);
}

.vt-controls {
    position: absolute;
    z-index: 5;
    top: 50%;
    inset-inline-end: .85rem;
    display: grid;
    gap: .45rem;
    transform: translateY(-50%);
    transition: opacity .25s ease;
}

.vt-controls button {
    display: grid;
    width: 2.85rem;
    height: 2.85rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .85rem;
    background: rgba(4, 20, 42, .76);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: transform .2s ease, background-color .2s ease;
}

.vt-controls button:hover,
.vt-controls button:focus-visible,
.vt-scenes-toggle:hover,
.vt-scenes-toggle:focus-visible {
    background: rgba(162, 113, 25, .9);
    transform: translateY(-1px);
}

.vt-status {
    position: absolute;
    z-index: 5;
    bottom: .8rem;
    inset-inline-start: 50%;
    max-width: calc(100% - 2rem);
    padding: .48rem .8rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(4, 20, 42, .72);
    color: rgba(255, 255, 255, .88);
    font-size: .72rem;
    white-space: nowrap;
    transform: translateX(50%);
    backdrop-filter: blur(10px);
    transition: opacity .25s ease;
}

html[dir="ltr"] .vt-status {
    transform: translateX(-50%);
}

.vt-shell:not(.is-started) .vt-topbar,
.vt-shell:not(.is-started) .vt-controls {
    opacity: 0;
    pointer-events: none;
}

.vt-scenes {
    padding: 1.15rem 1.15rem 1.35rem;
}

.vt-scenes-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.vt-scenes-head strong {
    color: var(--brand-blue, #17294d);
}

.vt-scenes-head span {
    color: var(--text-muted, #637087);
    font-size: .78rem;
}

.vt-scenes-track {
    display: grid;
    grid-auto-columns: minmax(10.5rem, 13rem);
    grid-auto-flow: column;
    gap: .75rem;
    overflow-x: auto;
    padding: .12rem .12rem .65rem;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
}

.vt-scene-item {
    min-width: 0;
    scroll-snap-align: start;
}

.vt-scene-card {
    position: relative;
    display: grid;
    width: 100%;
    overflow: hidden;
    padding: 0;
    border: 1px solid #dfe6ee;
    border-radius: 1rem;
    background: #fff;
    color: var(--brand-blue, #17294d);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.vt-scene-card:hover,
.vt-scene-card:focus-visible {
    border-color: rgba(162, 113, 25, .55);
    box-shadow: 0 10px 25px rgba(23, 41, 77, .1);
    transform: translateY(-2px);
}

.vt-scene-card.is-active {
    border-color: #b4872e;
    box-shadow: 0 0 0 2px rgba(180, 135, 46, .14);
}

.vt-scene-thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e8eef5;
}

.vt-scene-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.vt-scene-card:hover .vt-scene-thumb img {
    transform: scale(1.035);
}

.vt-scene-name {
    display: block;
    min-height: 3.1rem;
    padding: .72rem 2.4rem .72rem .75rem;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.65;
}

html[dir="ltr"] .vt-scene-name {
    padding: .72rem .75rem .72rem 2.4rem;
}

.vt-scene-icon {
    position: absolute;
    bottom: .78rem;
    inset-inline-end: .72rem;
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 50%;
    background: #f7efd9;
    color: #8a6721;
    font-size: .68rem;
}

.vt-fallback-link {
    display: inline-block;
    margin-top: .35rem;
    color: #76591f;
    font-size: .72rem;
    font-weight: 700;
}

.vt-shell.is-error .vt-cover-content {
    max-width: 40rem;
}

.vt-noscript {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background: #fff3cd;
    color: #684d0e;
}

@media (max-width: 900px) {
    .vt-header {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.3rem;
    }
    .vt-scene-count {
        grid-auto-flow: column;
        justify-content: start;
        min-width: 0;
        width: fit-content;
        gap: .5rem;
    }
    .vt-scene-count span { margin-top: 0; }
    .vt-viewer-frame {
        min-height: clamp(27rem, 72vw, 38rem);
        margin-inline: .8rem;
    }
}

@media (max-width: 680px) {
    .vt-shell {
        margin-top: 1.3rem;
        border-radius: 1.35rem;
    }
    .vt-header {
        padding: 1.1rem;
    }
    .vt-viewer-frame {
        min-height: min(72svh, 34rem);
        margin-inline: 0;
        border-radius: 0;
    }
    .vt-cover {
        align-items: end;
        padding: 1.25rem 1rem 1.6rem;
        background-position: center;
    }
    .vt-cover-shade {
        background: linear-gradient(180deg, rgba(7, 26, 52, .22), rgba(7, 26, 52, .92));
    }
    html[dir="ltr"] .vt-cover-shade {
        background: linear-gradient(180deg, rgba(7, 26, 52, .22), rgba(7, 26, 52, .92));
    }
    .vt-cover-content {
        width: 100%;
        margin: 0;
    }
    .vt-cover-content h4 {
        font-size: 1.75rem;
    }
    .vt-cover-content p {
        margin-bottom: 1rem;
        font-size: .84rem;
    }
    .vt-start {
        width: 100%;
        justify-content: center;
    }
    .vt-topbar {
        top: .55rem;
        inset-inline: .55rem;
    }
    .vt-topbar > div {
        max-width: calc(100% - 7.4rem);
        padding: .5rem .65rem;
    }
    .vt-scenes-toggle {
        min-height: 2.55rem;
        padding: .45rem .65rem;
    }
    .vt-controls {
        top: auto;
        right: auto;
        bottom: 3.25rem;
        inset-inline-end: .55rem;
        grid-auto-flow: column;
        transform: none;
    }
    .vt-controls button {
        width: 2.55rem;
        height: 2.55rem;
    }
    .vt-status {
        bottom: .55rem;
        max-width: calc(100% - 1rem);
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .64rem;
    }
    .vt-scenes {
        padding: .9rem .75rem 1rem;
    }
    .vt-scenes-head {
        align-items: start;
        flex-direction: column;
        gap: .15rem;
    }
    .vt-scenes-track {
        grid-auto-columns: minmax(9.4rem, 10.8rem);
        gap: .6rem;
        margin-inline: -.1rem;
    }
    .vt-shell.is-started:not(.scenes-open) .vt-scenes {
        display: none;
    }
}

/* =========================================================
   PHASE 4 — SMART ENTRY GATEWAY UX ALIGNMENT (2026-09-12)
   Keeps the gateway as a purposeful site-entry layer, not a
   duplicate homepage. Identity: navy #132449 / gold #C9A94E.
   ========================================================= */
.nobala-entry-gateway__backdrop {
    background:
        radial-gradient(circle at 14% 18%, rgba(201,169,78,.12), transparent 25rem),
        radial-gradient(circle at 86% 78%, rgba(201,169,78,.055), transparent 29rem),
        linear-gradient(110deg, #0d1932 0%, #132449 54%, #1b315c 100%);
}

.nobala-entry-gateway__glow--gold {
    background: radial-gradient(circle, rgba(201,169,78,.36), rgba(201,169,78,.075) 44%, transparent 72%);
}

.nobala-entry-gateway__glow--burgundy {
    background: radial-gradient(circle, rgba(19,36,73,.52), rgba(19,36,73,.10) 48%, transparent 72%);
}

/* The school mark is anchored to the visual right in Arabic (inline-start),
   exactly opposite the skip action. */
.nobala-entry-gateway > .nobala-entry-gateway__brand {
    position: fixed;
    z-index: 7;
    inset-block-start: max(20px, env(safe-area-inset-top));
    inset-inline-start: max(26px, env(safe-area-inset-left));
    display: inline-flex;
    align-items: center;
    gap: .72rem;
    max-width: min(390px, 42vw);
    margin: 0;
    padding: .36rem .48rem .36rem .72rem;
    color: #fff;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: rgba(7,24,47,.30);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 14px 38px rgba(0,0,0,.14);
}

.nobala-entry-gateway > .nobala-entry-gateway__brand:hover,
.nobala-entry-gateway > .nobala-entry-gateway__brand:focus-visible {
    color: #fff;
    border-color: rgba(201,169,78,.58);
    background: rgba(19,36,73,.58);
}

.nobala-entry-gateway > .nobala-entry-gateway__brand img {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 6px;
    object-fit: contain;
    border-radius: 13px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 28px rgba(0,0,0,.16);
}

.nobala-entry-gateway > .nobala-entry-gateway__brand div {
    min-width: 0;
}

.nobala-entry-gateway > .nobala-entry-gateway__brand strong,
.nobala-entry-gateway > .nobala-entry-gateway__brand span {
    display: block;
}

.nobala-entry-gateway > .nobala-entry-gateway__brand strong {
    color: #fff;
    font-size: .84rem;
    font-weight: 900;
    line-height: 1.35;
}

.nobala-entry-gateway > .nobala-entry-gateway__brand span {
    max-width: 280px;
    overflow: hidden;
    color: rgba(255,255,255,.61);
    font-size: .66rem;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nobala-entry-gateway__skip {
    inset-inline-end: max(26px, env(safe-area-inset-right));
    inset-inline-start: auto;
}

.nobala-entry-gateway__shell {
    padding-top: 92px;
    padding-bottom: 74px;
    gap: clamp(2.4rem, 5.4vw, 6.5rem);
}

.nobala-entry-gateway__content {
    padding-block: clamp(.4rem, 2vh, 1.25rem);
}

.nobala-entry-gateway #nobalaEntryTitle {
    margin-bottom: .86rem;
    font-size: clamp(2.55rem, 5vw, 5.45rem);
    line-height: 1.02;
}

.nobala-entry-gateway__lead {
    max-width: 610px;
    margin-bottom: .42rem;
    font-size: clamp(.98rem, 1.35vw, 1.16rem);
    line-height: 1.75;
}

.nobala-entry-gateway__question {
    margin-bottom: 1rem;
}

.nobala-entry-gateway__choices {
    gap: .64rem;
}

.nobala-entry-choice {
    min-height: 72px;
}

/* The report asks for the student's self-introduction directly beneath the
   portrait. Keep it outside the photo rather than repeating it in the copy. */
.nobala-entry-gateway__visual--student {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .78rem;
}

.nobala-entry-gateway__identity--student {
    position: relative;
    inset: auto;
    bottom: auto;
    width: min(100%, 540px);
    box-sizing: border-box;
    margin: 0;
    padding: .78rem 1rem;
    text-align: start;
    border-color: rgba(201,169,78,.34);
    background: linear-gradient(135deg, rgba(7,24,47,.88), rgba(23,44,82,.72));
}

.nobala-entry-gateway__identity--student strong {
    color: #fff;
}

.nobala-entry-gateway__identity--student span {
    color: rgba(255,255,255,.70);
}

.nobala-entry-gateway__status > i {
    color: var(--entry-gold-light);
    box-shadow: 0 0 0 5px rgba(201,169,78,.09);
}

@media (max-width: 991px) {
    .nobala-entry-gateway__shell {
        padding-top: 86px;
        gap: 1.35rem;
    }

    .nobala-entry-gateway__visual--student {
        min-height: 0;
    }

    .nobala-entry-gateway__identity--student {
        width: min(100%, 430px);
    }
}

@media (max-width: 767px) {
    .nobala-entry-gateway > .nobala-entry-gateway__brand {
        inset-block-start: max(12px, env(safe-area-inset-top));
        inset-inline-start: max(12px, env(safe-area-inset-left));
        max-width: calc(100vw - 174px);
        padding: .28rem .38rem .28rem .52rem;
        border-radius: 14px;
    }

    .nobala-entry-gateway > .nobala-entry-gateway__brand img {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        padding: 5px;
        border-radius: 11px;
    }

    .nobala-entry-gateway > .nobala-entry-gateway__brand strong {
        font-size: .72rem;
    }

    .nobala-entry-gateway > .nobala-entry-gateway__brand span {
        display: none;
    }

    .nobala-entry-gateway__skip {
        inset-block-start: max(12px, env(safe-area-inset-top));
        inset-inline-end: max(12px, env(safe-area-inset-right));
    }

    .nobala-entry-gateway__shell {
        padding-top: 76px;
        padding-bottom: 76px;
    }

    .nobala-entry-gateway__visual--student {
        min-height: 0;
        max-height: none;
        gap: .58rem;
    }

    .nobala-entry-gateway__identity--student {
        width: min(86vw, 360px);
        padding: .58rem .72rem;
    }
}

@media (max-width: 430px) {
    .nobala-entry-gateway > .nobala-entry-gateway__brand {
        max-width: 54px;
        padding: .24rem;
        border-radius: 13px;
    }

    .nobala-entry-gateway > .nobala-entry-gateway__brand div {
        display: none;
    }

    .nobala-entry-gateway > .nobala-entry-gateway__brand img {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .nobala-entry-gateway__skip {
        min-height: 40px;
        max-width: calc(100vw - 92px);
        padding: .48rem .66rem;
        font-size: .7rem;
    }

    .nobala-entry-gateway__shell {
        width: min(100% - 20px, 410px);
        padding-top: 70px;
    }

    .nobala-entry-gateway #nobalaEntryTitle {
        font-size: clamp(1.95rem, 10vw, 2.7rem);
    }

    .nobala-entry-gateway__lead {
        font-size: .86rem;
        line-height: 1.65;
    }

    .nobala-entry-gateway__identity--student {
        width: min(88vw, 330px);
    }
}

/* ===== Nobala identity & production overrides ===== */
/* مدارس النبلاء الأهلية — نظام الهوية العامة | المرحلة الثانية */
:root {
    --nobala-burgundy: #132449;
    --nobala-burgundy-deep: #0d1932;
    --nobala-burgundy-soft: #31456c;
    --nobala-gold: #C9A94E;
    --nobala-gold-deep: #9a7d32;
    --nobala-gold-soft: #f3e7b8;
    --nobala-blue: #31456c;
    --nobala-navy: #132449;
    --nobala-navy-deep: #0d1932;
    --nobala-ivory: #fbfaf6;
    --nobala-paper: #ffffff;
    --nobala-ink: #1b2435;
    --nobala-muted: #687185;
    --nobala-line: #e8e1ce;
    --nobala-shadow: 0 20px 55px rgba(23, 41, 77, .11);
    --nobala-shadow-soft: 0 12px 34px rgba(23, 41, 77, .08);

    /* Compatibility mapping for the inherited component system. */
    --brand-navy: var(--nobala-navy);
    --brand-blue: var(--nobala-blue);
    --brand-cyan: var(--nobala-gold);
    --brand-green: var(--nobala-burgundy);
    --brand-orange: var(--nobala-gold-deep);
    --brand-purple: var(--nobala-burgundy-deep);
    --brand-light: var(--nobala-ivory);
    --brand-slate: var(--nobala-muted);
    --brand-ink: var(--nobala-ink);
    --bg-soft: var(--nobala-ivory);
    --bg-muted: #f5f1e7;
    --border-soft: var(--nobala-line);
    --shadow-soft: var(--nobala-shadow);
    --shadow-card: var(--nobala-shadow-soft);
    --shadow-glow: 0 18px 48px rgba(19, 36, 73, .16);
    --header-shell-max: 1720px;
    --header-shell-gutter: clamp(18px, 2.4vw, 42px);
    --header-offset: 134px;
}

html { background: var(--nobala-ivory); }
body {
    background:
        radial-gradient(circle at 6% 4%, rgba(210, 190, 106, .10), transparent 24rem),
        radial-gradient(circle at 92% 8%, rgba(65, 83, 154, .08), transparent 28rem),
        var(--nobala-ivory);
    color: var(--nobala-ink);
}

::selection { background: rgba(19, 36, 73, .18); color: var(--nobala-navy-deep); }
:focus-visible { outline: 3px solid rgba(210, 190, 106, .7); outline-offset: 3px; }

/* Shared typography */
h1, h2, h3, h4, h5, h6, .title, .page-title, .hero-title, .video-hero-title {
    color: var(--nobala-navy);
    letter-spacing: -.02em;
}
.text-gradient,
.logo-gradient {
    background: linear-gradient(118deg, var(--nobala-burgundy-deep), var(--nobala-burgundy) 42%, var(--nobala-gold-deep) 82%);
    background-size: 100% 100%;
    animation: none;
}
.logo-gradient::after { display: none; }
.section-muted { background: #f5f1e8; }
.section-soft { background: var(--nobala-ivory); }

/* Buttons */
.btn {
    border-radius: 999px;
    min-height: 48px;
    padding-inline: 1.35rem;
    font-weight: 850;
    letter-spacing: 0;
}
.btn::before { background-image: url('../images/nobala/logo-mark.png'); }
.btn-dark,
.btn-primary,
.btn-neon {
    background: linear-gradient(135deg, var(--nobala-burgundy-deep), var(--nobala-burgundy));
    color: #fff;
    box-shadow: 0 13px 30px rgba(13, 25, 50, .22);
}
.btn-dark:hover,
.btn-primary:hover,
.btn-neon:hover {
    background: linear-gradient(135deg, #0a1429, #24385f);
    box-shadow: 0 17px 34px rgba(13, 25, 50, .27);
}
.btn-soft {
    background: rgba(210, 190, 106, .18);
    border: 1px solid rgba(168, 135, 51, .22);
    color: var(--nobala-burgundy-deep);
}
.btn-light { color: var(--nobala-burgundy-deep); }
.btn-outline { border-color: rgba(255,255,255,.72); }

/* Loader */
.site-loader { background: rgba(13, 25, 50, .22); }
.site-loader__backdrop {
    background:
        radial-gradient(circle at 18% 18%, rgba(210,190,106,.08), transparent 26rem),
        radial-gradient(circle at 82% 78%, rgba(19,36,73,.055), transparent 30rem),
        linear-gradient(145deg, var(--nobala-navy-deep), var(--nobala-navy) 62%, #22375f);
}
.site-loader__panel {
    border-color: rgba(210,190,106,.35);
    background: rgba(255,255,255,.10);
}
.site-loader__logo-wrap { width: 118px; height: 118px; }
.site-loader__logo { width: 92px; height: 92px; }
.site-loader__ring { border-color: rgba(210,190,106,.65); }
.site-loader__line::after {
    background: linear-gradient(90deg, var(--nobala-burgundy), var(--nobala-gold), var(--nobala-blue));
}

/* Global header */
.topbar { padding-top: 0; }
.nobala-utility-bar {
    color: #fff;
    background: linear-gradient(90deg, var(--nobala-navy-deep), var(--nobala-navy) 58%, #243a6b);
    border-bottom: 1px solid rgba(201,169,78,.28);
}
.nobala-utility-inner {
    width: min(var(--header-shell-max), calc(100% - (var(--header-shell-gutter) * 2)));
    min-height: 36px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .78rem;
    font-weight: 700;
}
.nobala-utility-group { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.nobala-utility-group a,
.nobala-utility-group span { display: inline-flex; align-items: center; gap: .42rem; color: rgba(255,255,255,.84); }
.nobala-utility-group a:hover { color: var(--nobala-gold); }
.nobala-utility-promise { color: var(--nobala-gold-soft) !important; font-weight: 850; }

.nav-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: .6rem 0;
    border: 0;
    border-radius: 0;
    background: rgba(255,255,255,.97);
    box-shadow: 0 9px 28px rgba(23,41,77,.07);
}
.nav-wrap.glass { border: 0; }
.nav-wrap.scrolled {
    background: rgba(255,255,255,.99);
    box-shadow: 0 15px 40px rgba(23,41,77,.13);
}
.nav {
    width: min(var(--header-shell-max), calc(100% - (var(--header-shell-gutter) * 2)));
    min-height: 72px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) 42px;
    align-items: center;
    gap: clamp(.7rem, 1vw, 1.15rem);
}
.brand { gap: .65rem; flex: 0 0 auto; min-width: 0; max-width: 100%; }
.brand img {
    width: 56px;
    height: 58px;
    padding: .2rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(23,41,77,.09);
}
.brand-text { min-width: 0; }
.brand-text .brand-title {
    display: block;
    max-width: 205px;
    overflow: hidden;
    color: var(--nobala-navy-deep);
    font-size: .94rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brand-text p {
    max-width: 205px;
    overflow: hidden;
    color: var(--nobala-gold-deep);
    font-size: .68rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-links {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.52rem, .72vw, .82rem);
    white-space: nowrap;
}
.nav-links > a,
.nav-links .nav-dropdown-toggle {
    max-width: none;
    flex-shrink: 0;
    color: var(--nobala-navy);
    font-size: clamp(.8rem, .76vw, .88rem);
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
}
.nav-links a::after,
.nav-links .nav-dropdown-toggle::after {
    height: 2px;
    bottom: -9px;
    background: linear-gradient(90deg, var(--nobala-navy), var(--nobala-gold));
}
.nav-links a:hover,
.nav-links a.active,
.nav-links a.current-page,
.nav-links .nav-dropdown-toggle:hover,
.nav-links .nav-dropdown-toggle.active,
.nav-links .nav-dropdown.is-current .nav-dropdown-toggle { color: var(--nobala-navy-deep); }
.nav-actions {
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.nav-utility-link {
    color: var(--nobala-navy);
    border: 1px solid var(--nobala-line);
    border-radius: 999px;
    padding: .55rem .85rem;
    font-size: .84rem;
    font-weight: 850;
}
.nav-phone-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: rgba(201,169,78,.17);
    color: var(--nobala-navy-deep);
    border: 1px solid rgba(168,135,51,.18);
}
.lang-btn {
    border-color: rgba(19,36,73,.17);
    color: var(--nobala-navy-deep);
    box-shadow: none;
}
.lang-btn:hover { background: rgba(19,36,73,.07); border-color: rgba(19,36,73,.32); }
.menu-toggle {
    background: var(--nobala-navy);
    border-radius: 13px;
}
.mobile-menu { background: #fff; }
.mobile-menu-inner { padding: .75rem 0 .35rem; }
.mobile-menu a { background: #fbfaf6; color: var(--nobala-navy); border: 1px solid transparent; }
.mobile-menu a:hover,
.mobile-menu a.active { background: rgba(201,169,78,.13); border-color: rgba(201,169,78,.34); color: var(--nobala-navy-deep); }
.mobile-cta { background: var(--nobala-navy) !important; }

/* English navigation uses concise labels and slightly tighter metrics without
   shrinking below a comfortable desktop reading size. */
html[lang="en"] .brand-text .brand-title { font-size: .88rem; max-width: 215px; }
html[lang="en"] .brand-text p { font-size: .64rem; max-width: 215px; }
html[lang="en"] .nav-links { gap: clamp(.48rem, .68vw, .78rem); }
html[lang="en"] .nav-links > a,
html[lang="en"] .nav-links .nav-dropdown-toggle {
    max-width: none;
    font-size: clamp(.78rem, .72vw, .84rem);
    line-height: 1.18;
    text-align: center;
    white-space: nowrap;
}

/* Compact header: use it only when the desktop labels genuinely stop fitting.
   The utility strip is removed at this width to preserve vertical economy. */
@media (max-width: 1239px) {
    :root { --header-offset: 94px; }
    .nobala-utility-bar { display: none; }
    .nav-wrap { padding: .48rem 0; position: relative; }
    .mobile-menu {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        width: min(1120px, calc(100% - 28px));
        margin-inline: auto;
        max-height: 0;
        overflow: hidden;
        border-radius: 0 0 18px 18px;
        box-shadow: 0 18px 40px rgba(13,25,50,.14);
        z-index: 20;
    }
    .nav {
        width: min(100% - 28px, 1120px);
        min-height: 70px;
        grid-template-columns: minmax(0, 1fr) 40px 44px;
        gap: .55rem;
    }
    html[lang="en"] .nav {
        grid-template-columns: minmax(0, 1fr) 40px 44px;
        gap: .55rem;
    }
    html[lang="en"] .brand { max-width: none; }
    html[lang="en"] .brand-text .brand-title { max-width: min(340px, 42vw); }
    html[lang="en"] .nav-actions { min-width: 40px; }
    .brand { overflow: hidden; }
    .brand-text { display: block; min-width: 0; }
    .brand-text .brand-title {
        max-width: min(340px, 42vw);
        font-size: .9rem;
    }
    .brand-text p { display: none; }
    .nav-links { display: none; }
    .nav-actions { grid-column: 2; min-width: 40px; }
    .menu-toggle {
        grid-column: 3;
        display: inline-flex;
        position: relative;
        z-index: 5;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        margin: 0;
        padding: 0;
        border: 0;
        opacity: 1;
        visibility: visible;
    }
    .mobile-menu.open { max-height: min(74vh, 680px); overflow-y: auto; }
}

@media (max-width: 767px) {
    :root { --header-offset: 78px; }
    .nav-wrap { padding: .42rem 0; }
    .nav {
        width: calc(100% - 18px);
        min-height: 64px;
        grid-template-columns: minmax(0, 1fr) 38px 42px;
        gap: .45rem;
    }
    .brand { gap: .5rem; }
    .brand img { width: 48px; height: 50px; border-radius: 12px; }
    .brand-text .brand-title { max-width: min(245px, 52vw); font-size: .82rem; }
    .lang-btn { min-width: 36px; width: 36px; height: 32px; }
    .menu-toggle { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; }
    .mobile-menu { width: calc(100% - 18px); border-radius: 0 0 16px 16px; }
    .mobile-menu-inner { padding: .7rem .55rem .35rem; }
}

/* Shared surfaces and page heroes */
.card,
.simple-card,
.policy-card,
.facility-card,
.news-card,
.store-card,
.gallery-card,
.testimonial-card {
    border-color: var(--nobala-line);
    box-shadow: var(--nobala-shadow-soft);
}
.card:hover,
.facility-card:hover,
.news-card:hover,
.store-card:hover { border-color: rgba(19,36,73,.25); }
.hero,
.page-hero,
.inner-hero,
.video-hero {
    background:
        radial-gradient(circle at 14% 18%, rgba(210,190,106,.045), transparent 28rem),
        radial-gradient(circle at 88% 76%, rgba(19,36,73,.035), transparent 30rem),
        linear-gradient(135deg, var(--nobala-navy-deep), var(--nobala-navy) 58%, #243a66);
}
.hero::after,
.hero-ring::after { background-image: url('../images/nobala/logo-mark-white.png'); }
.section-badge,
.badge,
.eyebrow {
    background: rgba(210,190,106,.16);
    color: var(--nobala-burgundy-deep);
    border-color: rgba(168,135,51,.24);
}

/* Footer */
.footer {
    background:
        radial-gradient(circle at 12% 12%, rgba(210,190,106,.04), transparent 24rem),
        radial-gradient(circle at 88% 82%, rgba(19,36,73,.025), transparent 28rem),
        linear-gradient(145deg, var(--nobala-navy-deep), var(--nobala-navy) 62%, #22375f);
    padding-top: 4.3rem;
}
.footer::before { height: 5px; background: linear-gradient(90deg, var(--nobala-burgundy), var(--nobala-gold), var(--nobala-blue)); }
.footer-intro-bar {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) repeat(2,minmax(190px,.65fr));
    gap: 1rem;
    margin-bottom: 2.2rem;
    padding: 1rem;
    border: 1px solid rgba(210,190,106,.22);
    border-radius: 22px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
}
.footer-intro-message { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.footer-intro-message i {
    width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
    background: rgba(210,190,106,.18); color: var(--nobala-gold);
}
.footer-intro-message strong,
.footer-contact-card strong { display: block; color: #fff; }
.footer-intro-message span,
.footer-contact-card span { display: block; color: rgba(255,255,255,.67); font-size: .82rem; }
.footer-contact-card {
    display: flex; align-items: center; gap: .7rem; padding: .75rem .9rem; border-radius: 16px;
    background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.08);
}
.footer-contact-card i { color: var(--nobala-gold); }
.footer-grid { grid-template-columns: 1.35fr repeat(3,minmax(0,.75fr)); gap: 2rem; }
.footer-brand img {
    width: 150px; height: 104px; padding: .5rem; border-radius: 18px; background: rgba(255,255,255,.96);
}
.footer-brand h3 { color: #fff; background: none; -webkit-text-fill-color: initial; }
.footer-col h4 { color: var(--nobala-gold-soft); }
.footer-col a:hover,
.footer-meta a:hover { color: var(--nobala-gold); }
.footer-branch-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .95rem; }
.footer-branch-chips span {
    padding: .38rem .7rem; border: 1px solid rgba(210,190,106,.25); border-radius: 999px;
    color: rgba(255,255,255,.82); background: rgba(210,190,106,.08); font-size: .78rem; font-weight: 750;
}
.social-links a { border: 1px solid rgba(210,190,106,.18); }
.social-links a:hover { background: var(--nobala-burgundy); border-color: var(--nobala-burgundy); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.05); }

/* Mobile dock */
.mobile-dock { border-color: rgba(210,190,106,.34); box-shadow: 0 18px 44px rgba(23,41,77,.20); }
.mobile-dock-icon { background: rgba(210,190,106,.15); color: var(--nobala-burgundy); }
.dock-link.active .mobile-dock-icon,
.dock-link:hover .mobile-dock-icon { background: var(--nobala-burgundy); }
.dock-link-accent { color: var(--nobala-burgundy); }
.dock-link-accent .mobile-dock-icon { background: rgba(19,36,73,.12); color: var(--nobala-burgundy); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

@media (max-width: 991px) {
    :root { --header-offset: 86px; }
    .mobile-menu.open { max-height: min(76vh, 720px); }
    .footer-intro-bar { grid-template-columns: 1fr 1fr; }
    .footer-intro-message { grid-column: 1/-1; }
    .footer-grid { grid-template-columns: 1.25fr 1fr 1fr; }
    .footer-grid > :first-child { grid-column: 1/-1; }
}

@media (max-width: 680px) {
    .brand img { width: 52px; height: 56px; }
    .brand-text .brand-title { font-size: .83rem; max-width: 180px; }
    .brand-text p { font-size: .63rem; max-width: 180px; }
    .footer-intro-bar,
    .footer-grid { grid-template-columns: 1fr; }
    .footer-intro-message { grid-column: auto; }
    .footer-grid > :first-child { grid-column: auto; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
}


/* Phase 3: Alnobalaa homepage content system */
.page-home .video-hero-title {
    max-width: 980px;
    text-wrap: balance;
}
.page-home .video-hero-lead {
    max-width: 780px;
}
.page-home .video-hero-slide {
    object-fit: cover;
    object-position: center;
}
.page-home .hero-main-image img,
.page-home .future-reference-image img,
.page-home .facility-card img,
.page-home .news-preview-card img {
    object-fit: cover;
}
.page-home .hero-stat strong,
.page-home .results-stat-card strong,
.page-home .metric-card strong {
    overflow-wrap: anywhere;
    line-height: 1.15;
}
.page-home .results-stat-card strong {
    font-size: clamp(1.55rem, 3.2vw, 2.75rem);
}
.page-home .future-reference-score strong {
    font-size: clamp(1.55rem, 3vw, 2.5rem);
}
.partnership-section {
    position: relative;
    overflow: hidden;
}
.partnership-section::before {
    content: "";
    position: absolute;
    inset: auto -12% -45% auto;
    width: 420px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210,190,106,.18), transparent 68%);
    pointer-events: none;
}
.partnership-stack {
    align-content: stretch;
}
.partnership-card {
    position: relative;
    min-height: 230px;
    padding: 1.6rem;
    border: 1px solid rgba(23,41,77,.09);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,249,253,.96));
    box-shadow: 0 18px 45px rgba(23,41,77,.08);
    overflow: hidden;
}
.partnership-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -55px;
    bottom: -65px;
    width: 160px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(53,73,143,.07);
}
.partnership-card.warm::after {
    background: rgba(19,36,73,.08);
}
.partnership-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, var(--nobala-blue), var(--nobala-navy));
    box-shadow: 0 12px 26px rgba(23,41,77,.18);
}
.partnership-card.warm .partnership-icon {
    background: linear-gradient(145deg, var(--nobala-burgundy), var(--nobala-burgundy-deep));
}
.partnership-card h3 {
    margin: 0 0 .55rem;
    color: var(--nobala-navy);
    font-size: 1.2rem;
}
.partnership-card p {
    margin: 0 0 1rem;
    color: #53627a;
    line-height: 1.85;
}
.partnership-note {
    display: inline-flex;
    position: relative;
    z-index: 1;
    padding: .38rem .72rem;
    border-radius: 999px;
    color: var(--nobala-burgundy-deep);
    background: rgba(210,190,106,.17);
    font-size: .78rem;
    font-weight: 800;
}
@media (max-width: 680px) {
    .page-home .video-hero-slide {
        object-position: 56% center;
    }
    .partnership-card {
        min-height: 0;
    }
}

/* Phase 4: verified internal-page components */
.branch-grid,
.facility-card-grid,
.stage-quote-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.branch-map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.branch-map-status {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: .65rem .85rem;
    border-radius: 12px;
    background: rgba(205, 183, 98, .14);
    color: var(--nobala-navy, #132449);
    font-size: .85rem;
    font-weight: 700;
}
.branch-map-placeholder {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .7rem;
    padding: 2rem;
    text-align: center;
    border: 1px dashed rgba(23, 41, 77, .28);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(23, 41, 77, .045), rgba(205, 183, 98, .09));
}
.branch-map-placeholder i { font-size: 2.4rem; color: var(--nobala-gold, #cdb762); }
.branch-map-placeholder strong { color: var(--nobala-navy, #132449); }
.branch-map-placeholder span { color: #64748b; line-height: 1.8; }

.fees-status-panel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: 2rem;
    border: 1px solid rgba(205, 183, 98, .35);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(205,183,98,.11));
    box-shadow: 0 18px 45px rgba(23, 41, 77, .08);
}
.fees-status-panel p { margin: .6rem 0 0; line-height: 1.9; color: #526079; }
.stage-quote-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stage-quote-grid .simple-card { height: 100%; }
.branch-program { color: var(--nobala-burgundy, #132449); font-weight: 800; }

.facility-hero-media {
    min-height: 420px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 55px rgba(8, 27, 55, .25);
}
.facility-hero-media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.facility-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facility-media-card {
    overflow: hidden;
    border: 1px solid rgba(23, 41, 77, .1);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(23, 41, 77, .08);
}
.facility-media { aspect-ratio: 16 / 10; overflow: hidden; }
.facility-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.facility-media-card:hover .facility-media img { transform: scale(1.045); }
.facility-card-body { position: relative; padding: 1.35rem; }
.facility-card-body h3 { margin: .25rem 0 .6rem; color: var(--nobala-navy, #132449); }
.facility-card-body p { margin: 0; color: #657089; line-height: 1.85; }
.facility-icon {
    position: absolute;
    inset-inline-end: 1.25rem;
    top: -1.4rem;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--nobala-burgundy, #132449), var(--nobala-navy, #132449));
    box-shadow: 0 10px 22px rgba(23, 41, 77, .2);
}

@media (max-width: 1050px) {
    .branch-grid, .branch-map-grid, .facility-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stage-quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .branch-grid, .branch-map-grid, .facility-card-grid, .stage-quote-grid { grid-template-columns: 1fr; }
    .fees-status-panel { grid-template-columns: 1fr; align-items: start; }
    .facility-hero-media, .facility-hero-media img { min-height: 300px; }
}


/* Phase 5 operational components */
.nobala-cookie-consent{position:fixed;z-index:99999;left:18px;right:18px;bottom:18px;max-width:1080px;margin:auto;background:rgba(255,255,255,.98);border:1px solid rgba(23,41,77,.14);box-shadow:0 20px 55px rgba(12,27,51,.22);border-radius:18px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#132449}.nobala-cookie-consent[hidden]{display:none}.nobala-cookie-consent strong{font-size:1.05rem}.nobala-cookie-consent p{margin:.35rem 0 0;max-width:720px}.nobala-cookie-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.nobala-cookie-actions a{font-weight:700;color:#132449}.branch-operating-list{display:grid;gap:12px;margin:18px 0}.branch-operating-item{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid rgba(23,41,77,.1);border-radius:14px;background:#fff}.calendar-event-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.calendar-event-card{position:relative;padding:22px;border-radius:20px;background:#fff;border:1px solid rgba(23,41,77,.1);box-shadow:0 12px 30px rgba(23,41,77,.07)}.calendar-event-card time{display:block;font-weight:800;color:#132449;margin-bottom:10px}.calendar-event-card.is-featured{border-color:#cdb65f;background:linear-gradient(145deg,#fff,#fffaf0)}@media(max-width:820px){.nobala-cookie-consent{flex-direction:column;align-items:stretch}.calendar-event-grid{grid-template-columns:1fr}}

/* Phase 6: accessibility and production-readiness refinements */
.skip-link {
    position: fixed;
    inset-inline-start: 1rem;
    top: .75rem;
    z-index: 100000;
    transform: translateY(-180%);
    padding: .8rem 1.1rem;
    border-radius: .75rem;
    background: #132449;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
    transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #d0b65f;
    outline-offset: 3px;
}
#main-content:focus { outline: none; }
img { height: auto; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .site-loader, .reveal, .reveal-left, .reveal-right { transition: none !important; animation: none !important; }
}

/* ===== Focused header and homepage hero corrections ===== */
/* Keep the large Arabic headline readable against photographic backgrounds. */
.page-home .video-hero-copy {
    max-width: min(100%, 780px);
}

.page-home .video-hero-title {
    max-width: 15ch;
    margin-block: 1.1rem 1rem;
    color: #ffffff;
    font-size: clamp(2.65rem, 4.8vw, 5.25rem);
    line-height: 1.14;
    letter-spacing: -0.035em;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    text-shadow: 0 8px 30px rgba(3, 14, 32, 0.52);
}

.page-home .video-hero-title::first-line {
    color: #f2cf68;
}

.page-home .video-hero-lead {
    max-width: 690px;
    color: rgba(255, 255, 255, 0.94);
    font-weight: 500;
    text-shadow: 0 3px 18px rgba(3, 14, 32, 0.48);
}

/* Give the desktop header breathing room after simplifying its navigation. */
@media (min-width: 992px) {
    .nav {
        min-height: 78px;
        gap: clamp(1rem, 1.6vw, 1.6rem);
    }

    .nav-links {
        flex: 1 1 auto;
        gap: clamp(0.75rem, 1.15vw, 1.2rem);
    }

    .nav-actions {
        flex: 0 0 auto;
        gap: 0.65rem;
    }

}

@media (min-width: 992px) and (max-width: 1450px) {
    .brand-text p {
        display: none;
    }

    .brand-text .brand-title {
        max-width: 155px;
        white-space: normal;
        line-height: 1.45;
    }

    .nav-actions .nav-utility-link {
        display: none;
    }
}

/* Keep the mobile menu control fully visible and reserve it its own grid cell. */
@media (max-width: 991px) {
    .nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 0.55rem;
        width: 100%;
    }

    .brand {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .nav-actions {
        grid-column: 2;
        display: flex;
        min-width: 0;
    }

    .nav-actions .nav-phone-link,
    .nav-actions .nav-utility-link {
        display: none;
    }

    .menu-toggle {
        grid-column: 3;
        display: inline-flex !important;
        position: relative;
        z-index: 5;
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        margin: 0;
        padding: 0;
        border: 0;
        opacity: 1;
        visibility: visible;
        overflow: visible;
        color: #ffffff;
    }

    .menu-toggle svg {
        width: 24px;
        height: 24px;
        stroke: currentColor;
    }
}

@media (max-width: 680px) {
    .brand-text p {
        display: none;
    }

    .brand-text .brand-title {
        max-width: 145px;
        white-space: normal;
        line-height: 1.4;
    }

    .page-home .video-hero-title {
        max-width: 100%;
        font-size: clamp(2rem, 8.3vw, 2.75rem);
        line-height: 1.28;
        letter-spacing: -0.025em;
    }

    .page-home .video-hero-lead {
        font-size: 0.98rem;
        line-height: 1.9;
    }
}


/* ===== Contrast, facilities cards, and CTA corrections ===== */
/* Dark page heroes: keep headings, supporting copy, labels, and actions legible. */
.page-hero .page-title,
.news-hero .page-title,
.page-manager .page-hero .page-title,
.page-about-school .page-hero .page-title,
.page-facilities .page-hero .page-title {
    color: #ffffff !important;
    text-shadow: 0 8px 28px rgba(3, 14, 32, 0.42);
}

.page-hero .page-text,
.news-hero .page-text,
.page-manager .page-hero .page-text,
.page-about-school .page-hero .page-text,
.page-facilities .page-hero .page-text {
    color: rgba(255, 255, 255, 0.91) !important;
    text-shadow: 0 3px 16px rgba(3, 14, 32, 0.32);
}

.page-hero .badge-white,
.news-hero .badge-white,
.article-hero-content .badge-white {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.page-hero .btn-outline {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.04);
}

.page-hero .btn-outline:hover {
    color: var(--nobala-navy-deep);
    background: #ffffff;
    border-color: #ffffff;
}

/* Improve KPI cards displayed over dark patterned hero backgrounds. */
.page-hero .contact-kpis {
    gap: 0.9rem;
}

.page-hero .contact-kpis .kpi-card {
    min-height: 0;
    padding: 1.3rem 1.4rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.075));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 16px 38px rgba(4, 15, 35, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.page-hero .contact-kpis .kpi-card strong {
    color: #ffffff !important;
    text-shadow: 0 3px 14px rgba(3, 14, 32, 0.35);
}

.page-hero .contact-kpis .kpi-card span {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* Article hero title was inheriting the global navy heading color. */
.page-article .article-hero-content h1 {
    color: #ffffff !important;
    max-width: 22ch;
    text-shadow: 0 7px 28px rgba(3, 14, 32, 0.5);
}

.page-article .article-hero-content p,
.page-article .article-meta-light,
.page-article .article-meta-light span {
    color: rgba(255, 255, 255, 0.93) !important;
}

.page-article .article-hero-overlay {
    background:
        linear-gradient(90deg, rgba(13, 25, 50, 0.9) 0%, rgba(23, 41, 77, 0.72) 48%, rgba(23, 41, 77, 0.42) 100%),
        linear-gradient(180deg, rgba(11, 45, 92, 0.04), rgba(11, 45, 92, 0.5));
}

html[dir="ltr"] .page-article .article-hero-overlay {
    background:
        linear-gradient(270deg, rgba(13, 25, 50, 0.9) 0%, rgba(23, 41, 77, 0.72) 48%, rgba(23, 41, 77, 0.42) 100%),
        linear-gradient(180deg, rgba(11, 45, 92, 0.04), rgba(11, 45, 92, 0.5));
}

/* Facilities quality cards: use a compact, balanced grid rather than full-width rows. */
.page-facilities .quality-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.page-facilities .quality-grid .simple-card {
    min-height: 235px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1.55rem;
    text-align: start;
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
}

.page-facilities .quality-grid .simple-card:nth-child(1) {
    border-top: 4px solid var(--nobala-blue);
}

.page-facilities .quality-grid .simple-card:nth-child(2) {
    border-top: 4px solid var(--nobala-gold-deep);
}

.page-facilities .quality-grid .simple-card:nth-child(3) {
    border-top: 4px solid var(--nobala-burgundy);
}

.page-facilities .quality-grid .simple-card h3 {
    color: var(--nobala-navy) !important;
    margin-bottom: 0.65rem;
}

.page-facilities .quality-grid .simple-card p {
    margin: 0;
    color: var(--nobala-muted) !important;
    line-height: 1.9;
}

.page-facilities .quality-grid .icon-box {
    flex: 0 0 auto;
    margin-bottom: 1rem;
}

.icon-gold {
    color: var(--nobala-navy-deep) !important;
    background: linear-gradient(135deg, var(--nobala-gold), var(--nobala-gold-deep));
}

/* Full-width CTA: ensure the heading and the “see the environment” label are visible. */
.full-cta {
    border: 1px solid rgba(210, 190, 106, 0.18);
    background:
        radial-gradient(circle at 86% 16%, rgba(210, 190, 106, 0.055), transparent 26rem),
        linear-gradient(135deg, var(--nobala-navy-deep), var(--nobala-navy) 62%, #22375f);
}

.full-cta .badge-white {
    color: var(--nobala-navy-deep) !important;
    background: linear-gradient(135deg, var(--nobala-gold-soft), var(--nobala-gold)) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 9px 24px rgba(3, 14, 32, 0.2);
}

.full-cta h2 {
    color: #ffffff !important;
    text-shadow: 0 6px 24px rgba(3, 14, 32, 0.36);
}

.full-cta p {
    color: rgba(255, 255, 255, 0.86) !important;
}

.full-cta .btn-light {
    color: var(--nobala-burgundy-deep);
    background: #ffffff;
    border-color: #ffffff;
}

.full-cta .btn-outline {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.04);
}

.full-cta .btn-outline:hover {
    color: var(--nobala-navy-deep);
    background: var(--nobala-gold-soft);
    border-color: var(--nobala-gold-soft);
}

@media (max-width: 980px) {
    .page-facilities .quality-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-facilities .quality-grid .simple-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .page-facilities .quality-grid {
        grid-template-columns: 1fr;
    }

    .page-facilities .quality-grid .simple-card,
    .page-facilities .quality-grid .simple-card:last-child {
        min-height: 0;
        grid-column: auto;
    }

    .page-article .article-hero-content h1 {
        max-width: 100%;
        font-size: clamp(1.85rem, 8vw, 2.45rem);
        line-height: 1.35;
    }
}

/* ======================================================================
   NOBALA STORY HERO — editorial, cinematic, and skills-led homepage hero
   ====================================================================== */
.nobala-story-hero {
    --story-accent: #efd36f;
    --story-accent-rgb: 239, 211, 111;
    position: relative;
    isolation: isolate;
    min-height: clamp(720px, 84vh, 900px);
    overflow: hidden;
    padding: clamp(3.75rem, 7vw, 6.5rem) 0 clamp(2.1rem, 4vw, 3.6rem);
    color: #fff;
    background:
        radial-gradient(circle at 12% 18%, rgba(160, 62, 72, .24), transparent 27%),
        radial-gradient(circle at 83% 24%, rgba(229, 205, 117, .16), transparent 23%),
        radial-gradient(circle at 56% 108%, rgba(53, 73, 143, .42), transparent 45%),
        linear-gradient(132deg, #06172f 0%, #0d2549 46%, #1d3566 76%, #352f62 100%);
}

.nobala-story-hero::before,
.nobala-story-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.nobala-story-hero::before {
    inset: 0;
    z-index: -5;
    opacity: .65;
    background: radial-gradient(circle at 18% 18%, rgba(210,190,106,.04), transparent 30rem);
}

.nobala-story-hero::after {
    display: none;
    content: none;
}

.nobala-story-hero-pattern {
    display: none;
}

.nobala-story-hero-glow {
    position: absolute;
    z-index: -2;
    width: clamp(260px, 32vw, 540px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(78px);
    pointer-events: none;
    opacity: .48;
}

.nobala-story-hero-glow-one {
    inset-inline-start: -14%;
    top: 17%;
    background: rgba(153, 56, 67, .72);
}

.nobala-story-hero-glow-two {
    inset-inline-end: -10%;
    bottom: -18%;
    background: rgba(73, 91, 170, .62);
}

.nobala-story-hero-symbol {
    position: absolute;
    inset-inline-start: clamp(-2rem, 3vw, 2.5rem);
    top: 50%;
    z-index: -1;
    transform: translateY(-53%);
    color: rgba(255, 255, 255, .022);
    font-size: clamp(24rem, 46vw, 50rem);
    font-weight: 900;
    line-height: .75;
    user-select: none;
    pointer-events: none;
}

.nobala-story-shell {
    position: relative;
    z-index: 2;
}

.nobala-story-brandline {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: clamp(1.8rem, 3vw, 3.1rem);
    color: rgba(255, 255, 255, .72);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .02em;
}

.nobala-story-school {
    color: #fff;
    font-weight: 900;
}

.nobala-story-brandline-rule {
    width: clamp(42px, 7vw, 100px);
    height: 1px;
    background: linear-gradient(90deg, rgba(239, 211, 111, 0), rgba(239, 211, 111, .9));
}

html[dir="rtl"] .nobala-story-brandline-rule {
    background: linear-gradient(270deg, rgba(239, 211, 111, 0), rgba(239, 211, 111, .9));
}

.nobala-story-brandline-caption {
    color: #efd36f;
}

.nobala-story-slides {
    display: grid;
}

.nobala-story-slide {
    --story-accent: #efd36f;
    --story-accent-rgb: 239, 211, 111;
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(390px, .94fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 6.5rem);
    min-height: 530px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px);
    transition: opacity .62s ease, transform .62s ease, visibility 0s linear .62s;
}

.nobala-story-slide-burgundy {
    --story-accent: #c9a94e;
    --story-accent-rgb: 201, 169, 78;
}

.nobala-story-slide-blue {
    --story-accent: #8ba8ff;
    --story-accent-rgb: 139, 168, 255;
}

.nobala-story-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: .08s, .08s, 0s;
}

.nobala-story-copy {
    position: relative;
    z-index: 3;
    max-width: 760px;
}

.nobala-story-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-height: 42px;
    padding: .42rem .85rem .42rem .48rem;
    border: 1px solid rgba(var(--story-accent-rgb), .34);
    border-radius: 999px;
    background: rgba(255, 255, 255, .065);
    box-shadow: 0 18px 60px rgba(2, 11, 26, .18);
    backdrop-filter: blur(14px);
}

.nobala-story-number {
    display: grid;
    place-items: center;
    min-width: 31px;
    height: 31px;
    padding-inline: .35rem;
    border-radius: 999px;
    background: var(--story-accent);
    color: #081a35;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
}

.nobala-story-eyebrow-text {
    color: rgba(255, 255, 255, .86);
    font-size: .82rem;
    font-weight: 850;
}

.nobala-story-title {
    max-width: 13.5ch;
    margin: clamp(1.2rem, 2.2vw, 2rem) 0 1.15rem;
    color: #fff;
    font-size: clamp(3.25rem, 5.45vw, 6.25rem);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -.045em;
    text-wrap: balance;
    text-shadow: 0 16px 48px rgba(2, 10, 25, .34);
}

.nobala-story-title > span {
    display: block;
}

.nobala-story-title-highlight {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin-block: .05em;
    color: var(--story-accent);
    -webkit-text-fill-color: currentColor;
}

.nobala-story-title-highlight::after {
    content: "";
    position: absolute;
    inset-inline: .04em .1em;
    bottom: .02em;
    z-index: -1;
    height: .18em;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--story-accent-rgb), .08), rgba(var(--story-accent-rgb), .32), rgba(var(--story-accent-rgb), .04));
}

.nobala-story-title-line-last {
    font-size: .84em;
    color: rgba(255, 255, 255, .94);
}

.nobala-story-lead {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(1rem, 1.22vw, 1.16rem);
    font-weight: 500;
    line-height: 1.95;
    text-wrap: pretty;
}

.nobala-story-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 1.65rem;
}

.nobala-story-actions .btn {
    min-height: 56px;
    padding: .9rem 1.45rem;
    border-radius: 18px;
    font-size: .93rem;
    font-weight: 900;
    transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.nobala-story-actions .btn:hover {
    transform: translateY(-3px);
}

.nobala-story-btn-primary {
    border: 1px solid rgba(var(--story-accent-rgb), .9) !important;
    background: var(--story-accent) !important;
    color: #081a35 !important;
    box-shadow: 0 18px 44px rgba(var(--story-accent-rgb), .18);
}

.nobala-story-btn-primary:hover {
    box-shadow: 0 24px 58px rgba(var(--story-accent-rgb), .28);
}

.nobala-story-btn-secondary {
    border: 1px solid rgba(255, 255, 255, .25) !important;
    background: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
    backdrop-filter: blur(12px);
}

.nobala-story-btn-secondary:hover {
    border-color: rgba(var(--story-accent-rgb), .68) !important;
    background: rgba(var(--story-accent-rgb), .12) !important;
}

.nobala-story-pillars {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.45rem;
}

.nobala-story-pillars > span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .48rem .72rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    color: rgba(255, 255, 255, .72);
    font-size: .72rem;
}

.nobala-story-pillars i {
    color: var(--story-accent);
}

.nobala-story-pillars b {
    font-weight: 800;
}

.nobala-story-visual {
    position: relative;
    min-height: 535px;
    display: grid;
    place-items: center;
}

.nobala-story-image-frame {
    position: relative;
    z-index: 3;
    width: min(100%, 470px);
    height: 520px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 42px 138px 42px 138px;
    background: rgba(255, 255, 255, .08);
    box-shadow:
        0 42px 100px rgba(2, 10, 25, .42),
        inset 0 0 0 8px rgba(255, 255, 255, .035);
    transform: rotate(-1.6deg);
    transition: transform .72s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}

html[dir="ltr"] .nobala-story-image-frame {
    border-radius: 138px 42px 138px 42px;
    transform: rotate(1.6deg);
}

.nobala-story-slide.is-active .nobala-story-image-frame {
    transform: rotate(0) translateY(0);
}

.nobala-story-image-frame::before,
.nobala-story-image-frame::after {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.nobala-story-image-frame::before {
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 23, 47, .04), transparent 48%, rgba(6, 23, 47, .38)),
        linear-gradient(90deg, rgba(6, 23, 47, .18), transparent 38%);
}

html[dir="rtl"] .nobala-story-image-frame::before {
    background:
        linear-gradient(180deg, rgba(6, 23, 47, .04), transparent 48%, rgba(6, 23, 47, .38)),
        linear-gradient(270deg, rgba(6, 23, 47, .18), transparent 38%);
}

.nobala-story-image-frame::after {
    inset: 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: inherit;
}

.nobala-story-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.02) contrast(1.02);
    transform: scale(1.035);
    transition: transform 7.6s ease;
}

.nobala-story-slide.is-active .nobala-story-image-frame img {
    transform: scale(1.095);
}

.nobala-story-orbit {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(var(--story-accent-rgb), .25);
    border-radius: 50%;
    pointer-events: none;
}

.nobala-story-orbit-large {
    width: 530px;
    aspect-ratio: 1;
    animation: nobalaStorySpin 28s linear infinite;
}

.nobala-story-orbit-small {
    width: 410px;
    aspect-ratio: 1;
    border-style: dashed;
    opacity: .65;
    animation: nobalaStorySpin 18s linear infinite reverse;
}

.nobala-story-orbit-dot {
    position: absolute;
    z-index: 4;
    width: 15px;
    aspect-ratio: 1;
    border: 4px solid rgba(7, 24, 50, .92);
    border-radius: 50%;
    background: var(--story-accent);
    box-shadow: 0 0 0 9px rgba(var(--story-accent-rgb), .12);
}

.nobala-story-orbit-dot-one {
    top: 8%;
    inset-inline-start: 15%;
}

.nobala-story-orbit-dot-two {
    bottom: 9%;
    inset-inline-end: 11%;
}

.nobala-story-visual-card {
    position: absolute;
    z-index: 6;
    inset-inline-start: -7%;
    bottom: 13%;
    display: flex;
    align-items: center;
    gap: .75rem;
    width: min(290px, 72%);
    padding: .85rem .95rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 20px;
    background: rgba(6, 23, 47, .72);
    box-shadow: 0 24px 70px rgba(2, 10, 25, .35);
    backdrop-filter: blur(18px);
}

.nobala-story-visual-icon {
    display: grid;
    place-items: center;
    width: 46px;
    aspect-ratio: 1;
    flex: 0 0 auto;
    border-radius: 14px;
    background: rgba(var(--story-accent-rgb), .16);
    color: var(--story-accent);
    font-size: 1.1rem;
}

.nobala-story-visual-copy {
    min-width: 0;
}

.nobala-story-visual-copy small,
.nobala-story-visual-copy strong {
    display: block;
}

.nobala-story-visual-copy small {
    color: rgba(255, 255, 255, .62);
    font-size: .69rem;
}

.nobala-story-visual-copy strong {
    margin-top: .2rem;
    color: #fff;
    font-size: .85rem;
    font-weight: 900;
    line-height: 1.45;
}

.nobala-story-impact-seal {
    position: absolute;
    z-index: 6;
    inset-inline-end: -2%;
    top: 15%;
    display: grid;
    place-items: center;
    width: 112px;
    aspect-ratio: 1;
    padding: .8rem;
    border: 1px solid rgba(var(--story-accent-rgb), .35);
    border-radius: 50%;
    background: rgba(6, 23, 47, .64);
    box-shadow: 0 18px 55px rgba(2, 10, 25, .3);
    text-align: center;
    backdrop-filter: blur(16px);
}

.nobala-story-impact-seal::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px dashed rgba(var(--story-accent-rgb), .42);
    border-radius: inherit;
}

.nobala-story-impact-seal > span {
    color: var(--story-accent);
    font-size: 1.2rem;
    font-weight: 900;
}

.nobala-story-impact-seal small {
    color: rgba(255, 255, 255, .76);
    font-size: .58rem;
    font-weight: 800;
    line-height: 1.5;
}

.nobala-story-commandbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: clamp(1.65rem, 3vw, 2.8rem);
    padding-top: 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.nobala-story-tabs {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.nobala-story-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 42px;
    padding: .48rem .72rem;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: rgba(255, 255, 255, .48);
    cursor: pointer;
    font-family: inherit;
    transition: color .25s ease, background .25s ease, transform .25s ease;
}

.nobala-story-tab:hover,
.nobala-story-tab.is-active {
    color: #fff;
    background: rgba(255, 255, 255, .065);
}

.nobala-story-tab.is-active {
    transform: translateY(-2px);
}

.nobala-story-tab-number {
    color: var(--nobala-gold, #c9a94e);
    font-size: .68rem;
    font-weight: 900;
}

.nobala-story-tab-label {
    font-size: .74rem;
    font-weight: 850;
    white-space: nowrap;
}

.nobala-story-controls {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.nobala-story-control {
    display: grid;
    place-items: center;
    width: 39px;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .055);
    color: rgba(255, 255, 255, .76);
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}

.nobala-story-control:hover {
    color: #081a35;
    border-color: #efd36f;
    background: #efd36f;
    transform: translateY(-2px);
}

.nobala-story-control-play {
    border-radius: 50%;
}

.nobala-story-count {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    margin-inline-start: .35rem;
    color: rgba(255, 255, 255, .46);
    font-size: .7rem;
}

.nobala-story-count b {
    color: #fff;
    font-size: .98rem;
}

.nobala-story-count i {
    font-style: normal;
    color: #efd36f;
}

.nobala-story-progress {
    grid-column: 1 / -1;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.nobala-story-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #132449, #efd36f, #31456c);
    box-shadow: 0 0 18px rgba(239, 211, 111, .45);
}

.nobala-story-stats {
    display: flex;
    align-items: stretch;
    gap: 1.15rem;
    margin-top: clamp(1.25rem, 2.4vw, 2.1rem);
    padding: .82rem 1rem;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 20px;
    background: rgba(255, 255, 255, .045);
    box-shadow: 0 18px 55px rgba(2, 10, 25, .16);
    backdrop-filter: blur(12px);
}

.nobala-story-stat {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex: 1 1 0;
    min-width: 0;
}

.nobala-story-stat strong {
    flex: 0 0 auto;
    color: #efd36f;
    font-size: clamp(1.25rem, 1.7vw, 1.65rem);
    font-weight: 900;
    line-height: 1;
}

.nobala-story-stat span {
    color: rgba(255, 255, 255, .64);
    font-size: .72rem;
    line-height: 1.55;
}

.nobala-story-stat-divider {
    width: 1px;
    background: linear-gradient(transparent, rgba(239, 211, 111, .36), transparent);
}

@keyframes nobalaStorySpin {
    to { transform: rotate(360deg); }
}

html[lang="en"] .nobala-story-title {
    max-width: 15ch;
    font-size: clamp(3rem, 4.8vw, 5.6rem);
    letter-spacing: -.055em;
    line-height: 1.02;
}

html[lang="en"] .nobala-story-title-line-last {
    font-size: .8em;
}

@media (max-width: 1199px) {
    .nobala-story-slide {
        grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr);
        gap: 2.4rem;
    }

    .nobala-story-title {
        font-size: clamp(3rem, 5.7vw, 5rem);
    }

    .nobala-story-image-frame {
        width: min(100%, 420px);
        height: 490px;
    }

    .nobala-story-orbit-large { width: 470px; }
    .nobala-story-orbit-small { width: 360px; }
    .nobala-story-tab-label { display: none; }
}

@media (max-width: 991px) {
    .nobala-story-hero {
        min-height: auto;
        padding: 3.2rem 0 2.5rem;
    }

    .nobala-story-slide {
        grid-template-columns: 1fr;
        gap: 2.2rem;
        min-height: 0;
    }

    .nobala-story-copy {
        max-width: 760px;
    }

    .nobala-story-title {
        max-width: 14ch;
        font-size: clamp(3rem, 8vw, 5rem);
    }

    .nobala-story-visual {
        min-height: 470px;
    }

    .nobala-story-image-frame {
        width: min(78vw, 500px);
        height: 450px;
    }

    .nobala-story-orbit-large { width: min(82vw, 510px); }
    .nobala-story-orbit-small { width: min(65vw, 390px); }
    .nobala-story-visual-card { inset-inline-start: 8%; }
    .nobala-story-impact-seal { inset-inline-end: 8%; }
}

@media (max-width: 767px) {
    .nobala-story-hero {
        padding: 2.2rem 0 2rem;
    }

    .nobala-story-brandline {
        margin-bottom: 1.45rem;
        font-size: .68rem;
    }

    .nobala-story-brandline-caption {
        display: none;
    }

    .nobala-story-title {
        max-width: 100%;
        margin-top: 1rem;
        font-size: clamp(2.55rem, 11.6vw, 4rem);
        line-height: 1.1;
        letter-spacing: -.035em;
    }

    .nobala-story-title-line-last {
        font-size: .88em;
    }

    .nobala-story-lead {
        font-size: .96rem;
        line-height: 1.82;
    }

    .nobala-story-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: .65rem;
        margin-top: 1.25rem;
    }

    .nobala-story-actions .btn {
        width: 100%;
        min-height: 53px;
    }

    .nobala-story-pillars {
        margin-top: 1rem;
    }

    .nobala-story-pillars > span {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        padding-inline: .45rem;
    }

    .nobala-story-visual {
        min-height: 380px;
    }

    .nobala-story-image-frame {
        width: min(84vw, 390px);
        height: 370px;
        border-radius: 28px 86px 28px 86px;
    }

    html[dir="ltr"] .nobala-story-image-frame {
        border-radius: 86px 28px 86px 28px;
    }

    .nobala-story-orbit-large { width: min(94vw, 420px); }
    .nobala-story-orbit-small { width: min(74vw, 320px); }
    .nobala-story-orbit-dot { width: 13px; }

    .nobala-story-visual-card {
        inset-inline-start: 0;
        bottom: 7%;
        width: min(245px, 72%);
        padding: .7rem .75rem;
    }

    .nobala-story-impact-seal {
        inset-inline-end: 0;
        top: 10%;
        width: 90px;
    }

    .nobala-story-commandbar {
        grid-template-columns: 1fr auto;
        gap: .7rem;
        margin-top: 1.35rem;
    }

    .nobala-story-tabs {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .nobala-story-tabs::-webkit-scrollbar { display: none; }

    .nobala-story-tab {
        flex: 0 0 auto;
        min-width: 44px;
        justify-content: center;
        padding-inline: .58rem;
    }

    .nobala-story-tab-label { display: none; }

    .nobala-story-control {
        width: 36px;
    }

    .nobala-story-count {
        display: none;
    }

    .nobala-story-stats {
        gap: .55rem;
        padding: .7rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nobala-story-stats::-webkit-scrollbar { display: none; }

    .nobala-story-stat {
        flex: 0 0 min(68vw, 230px);
        padding: .25rem .35rem;
    }

    .nobala-story-stat-divider {
        flex: 0 0 1px;
    }
}

@media (max-width: 430px) {
    .nobala-story-eyebrow {
        max-width: 100%;
    }

    .nobala-story-eyebrow-text {
        font-size: .75rem;
    }

    .nobala-story-title {
        font-size: clamp(2.25rem, 11.4vw, 3.15rem);
    }

    .nobala-story-visual {
        min-height: 335px;
    }

    .nobala-story-image-frame {
        width: min(84vw, 330px);
        height: 325px;
    }

    .nobala-story-visual-card {
        width: min(225px, 76%);
    }

    .nobala-story-impact-seal {
        width: 78px;
        padding: .55rem;
    }

    .nobala-story-impact-seal small {
        font-size: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nobala-story-slide,
    .nobala-story-image-frame,
    .nobala-story-image-frame img,
    .nobala-story-tab,
    .nobala-story-control {
        transition: none !important;
    }

    .nobala-story-orbit {
        animation: none !important;
    }
}

/* ============================================================
   About Alnobalaa — editorial architecture v1
   Scope: about-schools.php + vision-philosophy.php + leadership.php
          + nobala-numbers.php
   ============================================================ */
.about-v2-page {
    --about-navy: #102a50;
    --about-navy-deep: #081a33;
    --about-blue: #30477f;
    --about-burgundy: #132449;
    --about-burgundy-deep: #0d1932;
    --about-gold: #C9A94E;
    --about-gold-soft: #f3e7b8;
    --about-ivory: #f8f5ee;
    --about-ink: #142747;
    --about-muted: #66758f;
    --about-border: rgba(16,42,80,.11);
    background: #fff;
    color: var(--about-ink);
}

.about-v2-page .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.about-v2-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(82px, 8vw, 126px) 0 34px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 18%, rgba(210,188,104,.20), transparent 30%),
        radial-gradient(circle at 84% 72%, rgba(19,36,73,.24), transparent 34%),
        linear-gradient(135deg, var(--about-navy-deep) 0%, var(--about-navy) 56%, #2f447d 100%);
}
.about-v2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .22;
    background-image:
        linear-gradient(120deg, transparent 0 46%, rgba(210,188,104,.15) 46% 46.35%, transparent 46.35% 100%),
        linear-gradient(60deg, transparent 0 68%, rgba(255,255,255,.07) 68% 68.2%, transparent 68.2% 100%);
    background-size: 280px 280px, 340px 340px;
}
.about-v2-hero::after {
    content: "";
    position: absolute;
    inset-inline-start: -10vw;
    bottom: -22vw;
    width: 48vw;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210,188,104,.16), transparent 68%);
    z-index: -1;
}
.about-v2-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    align-items: center;
    gap: clamp(44px, 6vw, 84px);
}
.about-v2-hero-grid--compact { min-height: 470px; }
.about-v2-hero-copy { max-width: 720px; }
.about-v2-eyebrow,
.about-v2-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
}
.about-v2-eyebrow {
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: var(--about-gold-soft);
    backdrop-filter: blur(10px);
}
.about-v2-kicker { color: var(--about-burgundy); margin-bottom: 12px; }
.about-v2-heading--inverse .about-v2-kicker { color: var(--about-gold-soft); }
.about-v2-hero h1 {
    margin: 24px 0 20px;
    max-width: 830px;
    color: #fff;
    font-size: clamp(46px, 5.3vw, 82px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 900;
}
.about-v2-hero h1 em { color: #f2d46f; font-style: normal; }
.about-v2-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.83);
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.95;
}
.about-v2-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.about-v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 24px;
    border-radius: 17px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease;
}
.about-v2-btn:hover { transform: translateY(-2px); }
.about-v2-btn--gold { background: linear-gradient(135deg, #f0d879, #cfb55e); color: #52252b; box-shadow: 0 15px 34px rgba(0,0,0,.17); }
.about-v2-btn--ghost { border: 1px solid rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.06); }
.about-v2-btn--ghost:hover { background: rgba(255,255,255,.12); }

.about-v2-hero-visual { position: relative; min-height: 470px; }
.about-v2-image-frame {
    position: absolute;
    inset: 0 0 0 3%;
    border-radius: 42% 18% 36% 16% / 24% 28% 20% 34%;
    overflow: visible;
    background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 32px 80px rgba(3,15,33,.34), inset 0 0 0 1px rgba(210,188,104,.10);
}
.about-v2-image-frame::before {
    content: "";
    position: absolute;
    inset: 7% 10% 5% 7%;
    z-index: 0;
    border-radius: 38% 16% 34% 14% / 22% 30% 18% 32%;
    background: linear-gradient(160deg, rgba(210,188,104,.24), rgba(19,36,73,.20));
}
.about-v2-image-frame img {
    position: absolute;
    z-index: 1;
    inset: 4% 4% 3%;
    width: 92%;
    height: 93%;
    object-fit: cover;
    object-position: center;
    border-radius: 38% 16% 34% 14% / 22% 30% 18% 32%;
    filter: saturate(.92) contrast(1.03);
}
.about-v2-image-frame::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 4% 4% 3%;
    border-radius: 38% 16% 34% 14% / 22% 30% 18% 32%;
    background: linear-gradient(90deg, rgba(8,26,51,.28), transparent 56%);
    pointer-events: none;
}
.about-v2-image-tag {
    position: absolute;
    z-index: 4;
    min-width: 88px;
    padding: 11px 16px;
    border-radius: 999px;
    text-align: center;
    font-weight: 800;
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(8,26,51,.72);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    backdrop-filter: blur(12px);
}
.about-v2-image-tag::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-inline-end: 7px;
    border-radius: 50%;
    background: var(--about-gold);
}
.about-v2-image-tag--top { inset-block-start: 11%; inset-inline-start: -7%; }
.about-v2-image-tag--middle { inset-block-start: 46%; inset-inline-end: -7%; }
.about-v2-image-tag--bottom { inset-block-end: 8%; inset-inline-start: 2%; }
.about-v2-orbit { position: absolute; border: 1px solid rgba(210,188,104,.13); border-radius: 50%; pointer-events: none; }
.about-v2-orbit--one { width: 420px; height: 420px; inset-inline-start: -210px; top: 8%; }
.about-v2-orbit--two { width: 620px; height: 620px; inset-inline-end: -410px; bottom: -390px; }

.about-v2-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 38px;
    border-top: 1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
    border-radius: 22px;
    overflow: hidden;
}
.about-v2-stat-strip > div { position: relative; display: flex; align-items: baseline; gap: 13px; padding: 18px 24px; }
.about-v2-stat-strip > div + div::before { content: ""; position: absolute; inset-inline-start: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(255,255,255,.14); }
.about-v2-stat-strip strong { color: var(--about-gold-soft); font-size: 27px; line-height: 1; }
.about-v2-stat-strip span { color: rgba(255,255,255,.76); font-size: 13px; }

.about-v2-nav { position: sticky; top: var(--header-offset, 116px); z-index: 16; border-bottom: 1px solid var(--about-border); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.about-v2-nav-inner { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 11px; }
.about-v2-nav-inner::-webkit-scrollbar { display: none; }
.about-v2-nav a { flex: 0 0 auto; padding: 10px 15px; border-radius: 13px; color: #586880; text-decoration: none; font-size: 13px; font-weight: 800; transition: .2s ease; }
.about-v2-nav a:hover { background: #f5f1e8; color: var(--about-burgundy); }
.about-v2-nav a.is-active { background: var(--about-navy); color: #fff; box-shadow: 0 8px 22px rgba(16,42,80,.15); }

.about-v2-section { position: relative; padding: clamp(72px, 8vw, 118px) 0; }
.about-v2-section--light { background: #fff; }
.about-v2-section--ivory { background: var(--about-ivory); }
.about-v2-section--navy { overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--about-navy-deep), #182f59 56%, #2d4177); }
.about-v2-section--navy::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(120deg, transparent 46%, rgba(210,188,104,.17) 46% 46.3%, transparent 46.3%); background-size: 250px 250px; pointer-events: none; }
.about-v2-heading { max-width: 760px; margin-bottom: 38px; position: relative; z-index: 1; }
.about-v2-heading.text-center { margin-inline: auto; text-align: center; }
.about-v2-heading h2,
.about-v2-section-copy h2 { margin: 0 0 16px; color: var(--about-ink); font-size: clamp(34px, 4vw, 56px); line-height: 1.17; letter-spacing: -.025em; font-weight: 900; }
.about-v2-heading p,
.about-v2-section-copy p { color: var(--about-muted); font-size: 17px; line-height: 1.95; }
.about-v2-heading--inverse h2 { color: #fff; }
.about-v2-heading--inverse p { color: rgba(255,255,255,.74); }
.about-v2-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(38px, 6vw, 80px); align-items: center; }
.about-v2-section-copy p + p { margin-top: 14px; }
.about-v2-story-card {
    position: relative;
    min-height: 355px;
    padding: 38px;
    overflow: hidden;
    border: 1px solid rgba(19,36,73,.12);
    border-radius: 34px;
    background: linear-gradient(145deg, #fff, #f6f0e7);
    box-shadow: 0 24px 70px rgba(19,39,70,.10);
}
.about-v2-story-card::after { content: ""; position: absolute; width: 250px; height: 250px; border-radius: 50%; inset-inline-end: -120px; bottom: -120px; background: radial-gradient(circle, rgba(19,36,73,.20), transparent 65%); }
.about-v2-story-year { display: block; color: var(--about-burgundy); font-size: clamp(54px, 7vw, 92px); font-weight: 900; line-height: .9; letter-spacing: -.05em; }
.about-v2-story-card h3 { margin: 22px 0 10px; color: var(--about-ink); font-size: 28px; }
.about-v2-story-card p { color: var(--about-muted); line-height: 1.8; }
.about-v2-story-line { display: flex; align-items: center; margin: 30px 0 18px; }
.about-v2-story-line span { height: 1px; flex: 1; background: #d8ccaf; }
.about-v2-story-line i { width: 13px; height: 13px; margin: 0 8px; border-radius: 50%; background: var(--about-gold); box-shadow: 0 0 0 8px rgba(210,188,104,.16); }
.about-v2-story-card small { color: #7d6d55; font-weight: 700; }

.about-v2-feature-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.about-v2-feature-card { min-height: 300px; padding: 28px; border-radius: 28px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); backdrop-filter: blur(8px); }
.about-v2-feature-card > span { display: block; color: rgba(255,255,255,.32); font-size: 13px; font-weight: 900; letter-spacing: .13em; }
.about-v2-feature-card > i { display: grid; place-items: center; width: 58px; height: 58px; margin: 34px 0 24px; border-radius: 18px; color: #573239; background: linear-gradient(145deg, #f0da82, #cab059); box-shadow: 0 14px 32px rgba(0,0,0,.18); }
.about-v2-feature-card h3 { margin: 0 0 12px; color: #fff; font-size: 25px; }
.about-v2-feature-card p { margin: 0; color: rgba(255,255,255,.72); line-height: 1.8; }

.about-v2-vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.about-v2-statement { position: relative; overflow: hidden; min-height: 330px; padding: 34px; border-radius: 32px; border: 1px solid var(--about-border); background: #fff; box-shadow: 0 18px 55px rgba(19,39,70,.07); }
.about-v2-statement::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--about-gold); }
.about-v2-statement--mission::before { background: var(--about-burgundy); }
.about-v2-statement > span { color: var(--about-burgundy); font-weight: 900; }
.about-v2-statement h2 { max-width: 520px; margin: 40px 0 18px; color: var(--about-ink); font-size: clamp(34px, 4vw, 52px); line-height: 1.2; }
.about-v2-statement p { color: var(--about-muted); line-height: 1.85; }
.about-v2-next { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin-top: 22px; padding: 26px 30px; border-radius: 24px; background: var(--about-navy); color: #fff; }
.about-v2-next span { color: var(--about-gold-soft); font-size: 12px; font-weight: 800; }
.about-v2-next h3 { margin: 5px 0 0; color: #fff; font-size: 20px; }
.about-v2-next a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 13px 17px; border-radius: 14px; background: #fff; color: var(--about-burgundy); font-weight: 900; text-decoration: none; }

/* Philosophy */
.about-v2-philosophy-mark { position: relative; display: grid; place-items: center; min-height: 390px; }
.about-v2-philosophy-mark::before,
.about-v2-philosophy-mark::after { content: ""; position: absolute; border: 1px solid rgba(210,188,104,.25); border-radius: 50%; }
.about-v2-philosophy-mark::before { width: 340px; height: 340px; }
.about-v2-philosophy-mark::after { width: 245px; height: 245px; }
.about-v2-philosophy-mark > div { position: absolute; z-index: 2; width: 128px; min-height: 92px; padding: 16px; border: 1px solid rgba(255,255,255,.17); border-radius: 22px; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); text-align: center; }
.about-v2-philosophy-mark > div:nth-child(1) { top: 13%; inset-inline-start: 4%; }
.about-v2-philosophy-mark > div:nth-child(2) { top: 39%; inset-inline-end: 0; }
.about-v2-philosophy-mark > div:nth-child(3) { bottom: 9%; inset-inline-start: 21%; }
.about-v2-philosophy-mark span { display: block; color: var(--about-gold-soft); font-size: 12px; font-weight: 900; }
.about-v2-philosophy-mark b { display: block; margin-top: 6px; color: #fff; font-size: 20px; }
.about-v2-agility-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.about-v2-agility-card { position: relative; min-height: 330px; padding: 30px; overflow: hidden; border-radius: 28px; border: 1px solid var(--about-border); background: linear-gradient(160deg, #fff 0%, #f8f5ee 100%); }
.about-v2-agility-card::after { content: ""; position: absolute; inset-inline-end: -50px; bottom: -60px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(210,188,104,.18), transparent 70%); }
.about-v2-agility-num { color: #c6b98e; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.about-v2-agility-card > i { display: grid; place-items: center; width: 58px; height: 58px; margin: 38px 0 22px; border-radius: 17px; background: var(--about-navy); color: var(--about-gold-soft); }
.about-v2-agility-card h3 { margin: 0 0 11px; color: var(--about-ink); font-size: 25px; }
.about-v2-agility-card p { margin: 0; color: var(--about-muted); line-height: 1.85; }
.about-v2-principles-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start; }
.about-v2-principle-list { display: grid; gap: 12px; }
.about-v2-principle-list > div { display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: start; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); }
.about-v2-principle-list i { width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--about-gold); box-shadow: 0 0 0 6px rgba(210,188,104,.10); }
.about-v2-principle-list span { color: rgba(255,255,255,.84); line-height: 1.7; }
.about-v2-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.about-v2-process-step { position: relative; min-height: 245px; padding: 24px 20px; border-radius: 24px; background: #fff; border: 1px solid var(--about-border); box-shadow: 0 12px 38px rgba(19,39,70,.05); }
.about-v2-process-step:not(:last-child)::after { content: ""; position: absolute; top: 39px; inset-inline-end: -14px; width: 16px; height: 1px; background: var(--about-gold); }
.about-v2-process-step > span { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #f4edd6; color: var(--about-burgundy); font-size: 12px; font-weight: 900; }
.about-v2-process-step h3 { margin: 28px 0 10px; color: var(--about-ink); font-size: 20px; }
.about-v2-process-step p { margin: 0; color: var(--about-muted); font-size: 14px; line-height: 1.75; }

/* Leadership */
.about-v2-leadership-symbol { display: grid; place-items: center; min-height: 330px; border-radius: 40px 16px 40px 16px; border: 1px solid rgba(255,255,255,.16); background: radial-gradient(circle at center, rgba(210,188,104,.18), rgba(255,255,255,.04) 58%); }
.about-v2-leadership-symbol i { display: grid; place-items: center; width: 126px; height: 126px; border-radius: 38px; color: var(--about-gold-soft); background: rgba(255,255,255,.08); font-size: 52px; box-shadow: 0 22px 50px rgba(0,0,0,.18); }
.about-v2-leadership-symbol span { margin-top: -44px; color: rgba(255,255,255,.78); font-weight: 800; }
.about-v2-ceo-card { display: grid; grid-template-columns: 240px 1fr; gap: 38px; align-items: center; margin-bottom: 22px; padding: 34px; border-radius: 32px; background: linear-gradient(135deg, var(--about-navy), #243d70); color: #fff; box-shadow: 0 25px 65px rgba(16,42,80,.17); }
.about-v2-person-avatar { display: grid; place-items: center; width: 88px; height: 88px; flex: 0 0 auto; border-radius: 28px; overflow: hidden; background: linear-gradient(145deg, #fffdf7, #f4edda); border: 1px solid rgba(210,188,104,.48); color: #0d1932; font-size: 24px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 12px 30px rgba(19,39,70,.12); }
.about-v2-person-avatar img { display: block; width: 64%; height: 64%; object-fit: contain; filter: drop-shadow(0 5px 9px rgba(103,50,58,.13)); }
.about-v2-person-avatar--ceo { width: 210px; height: 230px; border-radius: 32px 32px 70px 32px; font-size: 54px; background: radial-gradient(circle at 50% 34%, rgba(255,255,255,.98), rgba(246,239,220,.94) 62%, rgba(220,200,128,.28)); }
.about-v2-person-avatar--ceo img { width: 58%; height: 58%; }
.about-v2-ceo-copy > span,
.about-v2-person-card > span { color: var(--about-gold-soft); font-size: 12px; font-weight: 900; }
.about-v2-ceo-copy h2 { margin: 8px 0 14px; color: #fff; font-size: clamp(34px, 4vw, 52px); }
.about-v2-ceo-copy p { max-width: 720px; margin: 0 0 18px; color: rgba(255,255,255,.76); line-height: 1.85; }
.about-v2-text-link { color: #fff; font-weight: 800; text-decoration: none; }
.about-v2-text-link i { margin-inline-start: 7px; color: var(--about-gold-soft); }
.about-v2-people-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.about-v2-person-card { min-height: 300px; padding: 28px; border-radius: 28px; background: #fff; border: 1px solid var(--about-border); box-shadow: 0 14px 44px rgba(19,39,70,.05); }
.about-v2-person-card h3 { margin: 18px 0 10px; color: var(--about-ink); font-size: 24px; }
.about-v2-person-card p { margin: 0; color: var(--about-muted); line-height: 1.8; }
.about-v2-leadership-values { position: relative; z-index: 1; }
.about-v2-leadership-value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.about-v2-leadership-value-grid > div { padding: 24px; border-radius: 24px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); }
.about-v2-leadership-value-grid i { color: var(--about-gold-soft); font-size: 22px; }
.about-v2-leadership-value-grid h3 { margin: 20px 0 7px; color: #fff; font-size: 19px; }
.about-v2-leadership-value-grid p { margin: 0; color: rgba(255,255,255,.66); font-size: 14px; }

/* Numbers */
.about-v2-data-orbit { justify-self: end; display: grid; place-items: center; align-content: center; width: min(390px, 100%); aspect-ratio: 1; padding: 48px; border-radius: 50%; text-align: center; background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,.035) 55%, transparent 56%); border: 1px solid rgba(210,188,104,.28); box-shadow: inset 0 0 0 28px rgba(255,255,255,.02); }
.about-v2-data-orbit strong { color: var(--about-gold-soft); font-size: clamp(72px, 9vw, 118px); line-height: .9; letter-spacing: -.06em; }
.about-v2-data-orbit span { max-width: 230px; margin-top: 18px; color: rgba(255,255,255,.78); line-height: 1.6; }
.about-v2-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.about-v2-metric { position: relative; min-height: 270px; padding: 28px; overflow: hidden; border-radius: 28px; border: 1px solid var(--about-border); background: linear-gradient(150deg, #fff, #f9f6ef); }
.about-v2-metric::after { content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%; inset-inline-end: -70px; bottom: -70px; background: rgba(210,188,104,.13); }
.about-v2-metric--primary { background: linear-gradient(145deg, var(--about-navy), #294174); color: #fff; }
.about-v2-metric strong { display: block; color: var(--about-burgundy); font-size: clamp(48px, 5vw, 68px); line-height: 1; letter-spacing: -.04em; }
.about-v2-metric--primary strong { color: var(--about-gold-soft); }
.about-v2-metric h3 { margin: 24px 0 9px; color: var(--about-ink); font-size: 19px; }
.about-v2-metric p { margin: 0; color: var(--about-muted); font-size: 13px; line-height: 1.75; }
.about-v2-metric--primary h3 { color: #fff; }
.about-v2-metric--primary p { color: rgba(255,255,255,.7); }
.about-v2-measurement-callout { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 36px; border: 1px solid rgba(255,255,255,.12); border-radius: 30px; background: rgba(255,255,255,.06); }
.about-v2-measurement-callout h2 { margin: 8px 0 13px; color: #fff; font-size: clamp(38px, 5vw, 62px); }
.about-v2-measurement-callout p { max-width: 760px; margin: 0; color: rgba(255,255,255,.74); line-height: 1.85; }
.about-v2-measurement-callout > i { flex: 0 0 auto; display: grid; place-items: center; width: 110px; height: 110px; border-radius: 30px; color: var(--about-gold-soft); background: rgba(255,255,255,.08); font-size: 42px; }
.about-v2-data-note { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; max-width: 930px; padding: 28px; border-radius: 26px; background: #fff; border: 1px solid var(--about-border); }
.about-v2-data-note > i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; background: #f3ead0; color: var(--about-burgundy); }
.about-v2-data-note h3 { margin: 0 0 8px; color: var(--about-ink); }
.about-v2-data-note p { margin: 0; color: var(--about-muted); line-height: 1.8; }

@media (max-width: 1080px) {
    .about-v2-hero-grid { grid-template-columns: 1fr .82fr; gap: 34px; }
    .about-v2-process { grid-template-columns: repeat(3, 1fr); }
    .about-v2-process-step:not(:last-child)::after { display: none; }
    .about-v2-metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .about-v2-leadership-value-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    .about-v2-page .container { width: min(100% - 28px, 1180px); }
    .about-v2-hero { padding-top: 64px; }
    .about-v2-hero-grid,
    .about-v2-split,
    .about-v2-principles-layout { grid-template-columns: 1fr; }
    .about-v2-hero-grid { gap: 34px; }
    .about-v2-hero h1 { font-size: clamp(40px, 10vw, 62px); }
    .about-v2-hero-visual { min-height: 390px; order: 2; }
    .about-v2-image-frame { inset-inline: 6%; }
    .about-v2-stat-strip { grid-template-columns: 1fr; }
    .about-v2-stat-strip > div + div::before { top: 0; bottom: auto; inset-inline: 20px; width: auto; height: 1px; }
    .about-v2-feature-grid,
    .about-v2-agility-grid,
    .about-v2-vision-grid,
    .about-v2-people-grid { grid-template-columns: 1fr; }
    .about-v2-process { grid-template-columns: repeat(2, 1fr); }
    .about-v2-ceo-card { grid-template-columns: 150px 1fr; gap: 24px; }
    .about-v2-person-avatar--ceo { width: 145px; height: 170px; font-size: 38px; }
    .about-v2-data-orbit { justify-self: start; width: 300px; }
}

@media (max-width: 560px) {
    .about-v2-hero { padding-top: 48px; }
    .about-v2-hero h1 { margin-top: 18px; font-size: clamp(36px, 12vw, 49px); }
    .about-v2-hero p { font-size: 16px; line-height: 1.8; }
    .about-v2-actions { display: grid; }
    .about-v2-btn { width: 100%; }
    .about-v2-hero-visual { min-height: 315px; }
    .about-v2-image-tag { min-width: 72px; padding: 8px 11px; font-size: 11px; }
    .about-v2-stat-strip > div { padding: 14px 17px; }
    .about-v2-section { padding: 62px 0; }
    .about-v2-heading h2,
    .about-v2-section-copy h2 { font-size: 34px; }
    .about-v2-story-card { padding: 27px; }
    .about-v2-next { align-items: stretch; flex-direction: column; }
    .about-v2-next a { justify-content: center; }
    .about-v2-philosophy-mark { min-height: 310px; }
    .about-v2-philosophy-mark::before { width: 270px; height: 270px; }
    .about-v2-philosophy-mark::after { width: 190px; height: 190px; }
    .about-v2-philosophy-mark > div { width: 105px; min-height: 80px; padding: 12px; }
    .about-v2-process,
    .about-v2-metrics-grid,
    .about-v2-leadership-value-grid { grid-template-columns: 1fr; }
    .about-v2-ceo-card { grid-template-columns: 1fr; }
    .about-v2-person-avatar--ceo { width: 100%; height: 190px; border-radius: 28px; }
    .about-v2-measurement-callout { align-items: flex-start; flex-direction: column; padding: 28px; }
    .about-v2-measurement-callout > i { width: 76px; height: 76px; border-radius: 22px; font-size: 30px; }
    .about-v2-data-note { grid-template-columns: 1fr; }
    .about-v2-nav-inner { padding-inline: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .about-v2-page *, .about-v2-page *::before, .about-v2-page *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}


/* ============================================================
   About Alnobalaa — architecture batch 2
   educational-model.php + strategy-impact.php + nobala-community.php
   ============================================================ */
.about-v2-hero--model { background: radial-gradient(circle at 15% 18%, rgba(210,188,104,.20), transparent 28%), radial-gradient(circle at 88% 80%, rgba(19,36,73,.30), transparent 30%), linear-gradient(135deg,#07182f,#102a50 52%,#263d75); }
.about-model-radar { position:relative; justify-self:end; width:min(430px,100%); aspect-ratio:1; border-radius:50%; border:1px solid rgba(234,219,156,.28); background:radial-gradient(circle,rgba(255,255,255,.09),rgba(255,255,255,.025) 54%,transparent 55%); box-shadow:inset 0 0 0 42px rgba(255,255,255,.018); }
.about-model-radar::before,.about-model-radar::after { content:""; position:absolute; inset:16%; border:1px dashed rgba(234,219,156,.25); border-radius:50%; }
.about-model-radar::after { inset:31%; border-style:solid; border-color:rgba(255,255,255,.10); }
.about-model-radar__center { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); z-index:2; display:grid; place-items:center; width:132px; aspect-ratio:1; border-radius:34px; color:#fff; background:linear-gradient(145deg,#132449,#0d1932); box-shadow:0 22px 50px rgba(0,0,0,.28); }
.about-model-radar__center i{color:#f1d87a;font-size:30px;margin-bottom:7px}.about-model-radar__center strong{font-size:19px}.about-model-radar__center span{font-size:11px;color:rgba(255,255,255,.7)}
.about-model-radar__node { position:absolute; z-index:3; display:grid; place-items:center; min-width:86px; min-height:46px; padding:8px 14px; border-radius:16px; color:#fff; font-weight:900; font-size:13px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); backdrop-filter:blur(10px); }
.about-model-radar__node--1{top:8%;left:50%;transform:translateX(-50%)}.about-model-radar__node--2{top:48%;right:-2%;transform:translateY(-50%)}.about-model-radar__node--3{bottom:6%;left:50%;transform:translateX(-50%)}.about-model-radar__node--4{top:48%;left:-2%;transform:translateY(-50%)}
.about-model-engine-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.about-model-engine { position:relative; min-height:310px; padding:26px 22px; border:1px solid var(--about-border); border-radius:28px; background:linear-gradient(155deg,#fff,#faf7f0); box-shadow:0 16px 44px rgba(20,39,71,.055); overflow:hidden; }
.about-model-engine::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;inset-inline-end:-68px;bottom:-68px;background:rgba(210,188,104,.13)}
.about-model-engine>span{font-size:12px;font-weight:900;color:var(--about-burgundy)}.about-model-engine>i{display:grid;place-items:center;width:58px;height:58px;margin:26px 0 22px;border-radius:18px;background:#f2ead3;color:var(--about-burgundy);font-size:23px}.about-model-engine h3{font-size:19px;color:var(--about-ink);margin:0 0 10px}.about-model-engine p{color:var(--about-muted);font-size:13px;line-height:1.8;margin:0}
.about-model-lens-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.about-model-lens-grid>div { min-height:220px; padding:28px; border-radius:28px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); }
.about-model-lens-grid i{color:var(--about-gold-soft);font-size:28px}.about-model-lens-grid strong{display:block;margin:28px 0 6px;color:#fff;font-size:22px}.about-model-lens-grid span{color:rgba(255,255,255,.68);font-size:13px}
.about-model-concepts { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.about-model-concepts article{padding:30px;border-radius:28px;border:1px solid var(--about-border);background:#fff}.about-model-concepts article>span{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--about-navy);color:var(--about-gold-soft);font-size:12px;font-weight:900}.about-model-concepts h3{margin:22px 0 9px;color:var(--about-ink);font-size:22px}.about-model-concepts p{margin:0;color:var(--about-muted);line-height:1.8}
.about-model-cycle { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:34px; }
.about-model-cycle>div{position:relative;min-height:205px;padding:24px;border-radius:26px;background:#fff;border:1px solid var(--about-border)}.about-model-cycle>div:not(:last-child)::after{content:"";position:absolute;top:42px;inset-inline-end:-13px;width:14px;height:2px;background:var(--about-gold)}.about-model-cycle b{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#f4ecd6;color:var(--about-burgundy)}.about-model-cycle h3{margin:25px 0 7px;color:var(--about-ink)}.about-model-cycle p{margin:0;color:var(--about-muted);font-size:13px}

.about-v2-hero--strategy { background:radial-gradient(circle at 17% 15%,rgba(210,188,104,.20),transparent 27%),radial-gradient(circle at 82% 76%,rgba(19,36,73,.29),transparent 32%),linear-gradient(135deg,#081a33,#142d55 56%,#313f77); }
.about-strategy-compass { justify-self:end; position:relative; display:grid; place-items:center; width:min(390px,100%); aspect-ratio:1; border-radius:50%; border:1px solid rgba(234,219,156,.28); background:conic-gradient(from 45deg,rgba(210,188,104,.12),rgba(255,255,255,.025),rgba(19,36,73,.17),rgba(255,255,255,.025),rgba(210,188,104,.12)); box-shadow:inset 0 0 0 34px rgba(255,255,255,.018); }
.about-strategy-compass::before,.about-strategy-compass::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.10)}.about-strategy-compass::before{inset:19%}.about-strategy-compass::after{inset:36%}
.about-strategy-compass>div{position:relative;z-index:2;text-align:center}.about-strategy-compass strong{display:block;color:var(--about-gold-soft);font-size:90px;line-height:.9}.about-strategy-compass span{display:block;margin-top:11px;color:rgba(255,255,255,.75);font-weight:800}.about-strategy-compass>i{position:absolute;inset:50%;width:1px;height:44%;background:linear-gradient(var(--about-gold),transparent);transform-origin:top;transform:rotate(42deg)}.about-strategy-compass>b{position:absolute;top:9%;right:16%;display:grid;place-items:center;width:62px;height:62px;border-radius:19px;background:var(--about-burgundy);color:#fff;font-size:24px}.about-strategy-compass>small{position:absolute;top:26%;right:9%;color:rgba(255,255,255,.65);font-weight:800}
.about-strategy-pillars { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.about-strategy-pillar { position:relative; min-height:330px; padding:32px; border-radius:32px; border:1px solid var(--about-border); background:linear-gradient(150deg,#fff,#f9f6ee); overflow:hidden; }
.about-strategy-pillar--edu{background:linear-gradient(145deg,var(--about-navy),#284174);color:#fff}.about-strategy-pillar>span{position:absolute;inset-block-start:26px;inset-inline-end:26px;color:rgba(20,39,71,.32);font-size:12px;font-weight:900}.about-strategy-pillar--edu>span{color:rgba(255,255,255,.42)}.about-strategy-pillar>i{display:grid;place-items:center;width:64px;height:64px;border-radius:19px;background:#f2ead3;color:var(--about-burgundy);font-size:25px}.about-strategy-pillar--edu>i{background:rgba(255,255,255,.09);color:var(--about-gold-soft)}.about-strategy-pillar h3{margin:30px 0 12px;color:var(--about-ink);font-size:25px}.about-strategy-pillar--edu h3{color:#fff}.about-strategy-pillar strong{color:var(--about-burgundy);font-size:13px}.about-strategy-pillar--edu strong{color:var(--about-gold-soft)}.about-strategy-pillar p{margin:14px 0 0;color:var(--about-muted);line-height:1.8}.about-strategy-pillar--edu p{color:rgba(255,255,255,.72)}
.about-strategy-domain-cloud { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:11px; }
.about-strategy-domain-cloud span{padding:14px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);color:#fff;font-size:13px;font-weight:800}.about-strategy-domain-cloud span:nth-child(3n+1){color:var(--about-gold-soft)}
.about-strategy-initiatives { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.about-strategy-initiatives article{min-height:275px;padding:26px;border-radius:26px;background:#fff;border:1px solid var(--about-border)}.about-strategy-initiatives i{color:var(--about-burgundy);font-size:25px}.about-strategy-initiatives h3{margin:24px 0 9px;color:var(--about-ink);font-size:18px}.about-strategy-initiatives p{margin:0;color:var(--about-muted);font-size:13px;line-height:1.78}.about-strategy-principle{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:36px;border-radius:32px;background:linear-gradient(145deg,#fff,#f7f2e7);border:1px solid var(--about-border)}.about-strategy-principle h2{margin:8px 0 10px;color:var(--about-ink);font-size:clamp(32px,4vw,50px)}.about-strategy-principle p{max-width:760px;margin:0;color:var(--about-muted);line-height:1.85}

.about-v2-hero--community { background:radial-gradient(circle at 15% 18%,rgba(210,188,104,.18),transparent 28%),radial-gradient(circle at 85% 74%,rgba(19,36,73,.28),transparent 33%),linear-gradient(135deg,#07182f,#122b52 54%,#2a4178); }
.about-community-network { justify-self:end;position:relative;width:min(420px,100%);aspect-ratio:1;border-radius:42%;background:radial-gradient(circle at center,rgba(210,188,104,.12),rgba(255,255,255,.025) 58%,transparent 59%);border:1px solid rgba(255,255,255,.10)}
.about-community-network::before,.about-community-network::after{content:"";position:absolute;inset:15%;border:1px dashed rgba(234,219,156,.25);border-radius:50%}.about-community-network::after{inset:32%;border-style:solid;border-color:rgba(255,255,255,.11)}.about-community-network__center{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:2;display:grid;place-items:center;width:128px;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#132449,#0d1932);color:#fff}.about-community-network__center i{color:var(--about-gold-soft);font-size:28px;margin-bottom:7px}.about-community-network span:not(.about-community-network__center span){position:absolute;z-index:3;padding:9px 13px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:12px;font-weight:900;backdrop-filter:blur(10px)}.about-community-network .n1{top:5%;left:44%}.about-community-network .n2{top:25%;right:-3%}.about-community-network .n3{bottom:23%;right:-2%}.about-community-network .n4{bottom:4%;left:42%}.about-community-network .n5{bottom:23%;left:-3%}.about-community-network .n6{top:25%;left:-3%}
.about-community-roles { display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.about-community-roles article{min-height:250px;padding:28px;border-radius:28px;border:1px solid var(--about-border);background:linear-gradient(150deg,#fff,#faf7f0)}.about-community-roles i{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#f3ead0;color:var(--about-burgundy);font-size:23px}.about-community-roles h3{margin:24px 0 9px;color:var(--about-ink);font-size:21px}.about-community-roles p{margin:0;color:var(--about-muted);line-height:1.8}
.about-community-streams{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.about-community-streams article{min-height:250px;padding:27px;border-radius:28px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}.about-community-streams i{color:var(--about-gold-soft);font-size:24px}.about-community-streams>article>span{display:block;color:var(--about-gold-soft);font-size:52px;font-weight:900;line-height:1}.about-community-streams h3{margin:22px 0 9px;color:#fff;font-size:19px}.about-community-streams p{margin:0;color:rgba(255,255,255,.68);font-size:13px;line-height:1.8}
.about-community-family{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}.about-community-family__copy h2{margin:0 0 16px;color:var(--about-ink);font-size:clamp(34px,4vw,55px);line-height:1.15}.about-community-family__copy p{margin:0 0 24px;color:var(--about-muted);line-height:1.9}.about-community-family__visual{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.about-community-family__visual>div{display:grid;place-items:center;min-height:170px;padding:20px;border-radius:26px;background:#fff;border:1px solid var(--about-border)}.about-community-family__visual i{color:var(--about-burgundy);font-size:30px}.about-community-family__visual span{margin-top:14px;color:var(--about-ink);font-weight:900}

@media (max-width:1080px){.about-model-engine-grid{grid-template-columns:repeat(3,1fr)}.about-strategy-initiatives{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.about-model-radar,.about-strategy-compass,.about-community-network{justify-self:center;width:min(360px,90vw)}.about-model-engine-grid,.about-model-lens-grid,.about-community-roles,.about-community-streams{grid-template-columns:repeat(2,1fr)}.about-model-cycle{grid-template-columns:repeat(2,1fr)}.about-model-cycle>div:not(:last-child)::after{display:none}.about-strategy-pillars{grid-template-columns:1fr}.about-community-family{grid-template-columns:1fr}.about-strategy-principle{align-items:flex-start;flex-direction:column}}
@media (max-width:560px){.about-model-engine-grid,.about-model-lens-grid,.about-model-concepts,.about-model-cycle,.about-strategy-initiatives,.about-community-roles,.about-community-streams,.about-community-family__visual{grid-template-columns:1fr}.about-model-radar,.about-strategy-compass,.about-community-network{width:min(310px,88vw)}.about-model-radar__node{min-width:72px;font-size:11px}.about-strategy-compass strong{font-size:72px}.about-strategy-pillar{padding:26px}.about-strategy-principle{padding:28px}}


/* =========================================================
   About architecture · Batch 3
   Alumni, participatory councils, public/internal knowledge
   ========================================================= */
.about-b3-hero{position:relative;overflow:hidden}.about-b3-hero::after{content:"";position:absolute;inset:auto -12% -45% auto;width:520px;aspect-ratio:1;border:1px solid rgba(255,255,255,.08);border-radius:48%;transform:rotate(18deg);pointer-events:none}.about-b3-hero--alumni{background:radial-gradient(circle at 12% 20%,rgba(213,190,101,.18),transparent 28%),linear-gradient(135deg,#07182f,#132d56 58%,#0d1932)}.about-b3-hero--councils{background:radial-gradient(circle at 18% 68%,rgba(19,36,73,.34),transparent 34%),linear-gradient(135deg,#07182f,#112949 55%,#263d70)}.about-b3-hero--knowledge{background:radial-gradient(circle at 12% 18%,rgba(213,190,101,.20),transparent 30%),radial-gradient(circle at 88% 82%,rgba(19,36,73,.25),transparent 34%),linear-gradient(135deg,#06162d,#10274a 55%,#243d70)}
.about-b3-status{display:flex;align-items:flex-start;gap:10px;margin-top:20px;max-width:680px;padding:13px 15px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.73);font-size:12px;line-height:1.7}.about-b3-status i{color:var(--about-gold-soft);margin-top:3px}
.about-b3-alumni-orbit,.about-b3-council-wheel{justify-self:end;position:relative;width:min(410px,100%);aspect-ratio:1;border-radius:50%;border:1px dashed rgba(234,219,156,.24);background:radial-gradient(circle at center,rgba(255,255,255,.06),transparent 62%)}.about-b3-alumni-orbit::before,.about-b3-council-wheel::before{content:"";position:absolute;inset:16%;border:1px solid rgba(255,255,255,.11);border-radius:50%}.about-b3-alumni-core,.about-b3-council-wheel>div{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:150px;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#132449,#0d1932);box-shadow:0 24px 60px rgba(0,0,0,.25);color:#fff;text-align:center}.about-b3-alumni-core i,.about-b3-council-wheel>div i{font-size:30px;color:var(--about-gold-soft);margin-bottom:4px}.about-b3-alumni-core strong,.about-b3-council-wheel>div strong{font-size:18px}.about-b3-alumni-core small,.about-b3-council-wheel>div small{font-size:10px;color:rgba(255,255,255,.65)}.about-b3-alumni-orbit>span,.about-b3-council-wheel>span{position:absolute;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(9px);color:#fff;font-size:12px;font-weight:900}.about-b3-alumni-orbit .a1,.about-b3-council-wheel .c1{top:8%;left:42%}.about-b3-alumni-orbit .a2,.about-b3-council-wheel .c2{top:43%;right:-4%}.about-b3-alumni-orbit .a3,.about-b3-council-wheel .c3{bottom:7%;left:40%}.about-b3-alumni-orbit .a4,.about-b3-council-wheel .c4{top:43%;left:-5%}
.about-b3-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.about-b3-pillars article{padding:30px;border:1px solid var(--about-border);border-radius:28px;background:linear-gradient(145deg,#fff,#faf7f0);min-height:240px}.about-b3-pillars i{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#f1e8cc;color:var(--about-burgundy);font-size:23px}.about-b3-pillars h3{margin:24px 0 10px;color:var(--about-ink);font-size:21px}.about-b3-pillars p{margin:0;color:var(--about-muted);line-height:1.8}
.about-b3-programs{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.about-b3-programs article{padding:26px;border:1px solid rgba(255,255,255,.12);border-radius:26px;background:rgba(255,255,255,.06);min-height:255px}.about-b3-programs article>span{color:var(--about-gold-soft);font-size:13px;font-weight:900}.about-b3-programs h3{margin:38px 0 10px;color:#fff;font-size:19px}.about-b3-programs p{margin:0;color:rgba(255,255,255,.66);line-height:1.8;font-size:13px}.about-b3-programs em{display:inline-block;margin-top:20px;padding:6px 9px;border-radius:999px;background:rgba(213,190,101,.12);color:var(--about-gold-soft);font-style:normal;font-size:10px;font-weight:900}
.about-b3-bridge{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:36px;border-radius:32px;background:linear-gradient(145deg,#fff,#f7f1e4);border:1px solid var(--about-border)}.about-b3-bridge h2{margin:8px 0 12px;color:var(--about-ink);font-size:clamp(30px,4vw,48px)}.about-b3-bridge p{max-width:760px;margin:0;color:var(--about-muted);line-height:1.85}
.about-b3-council-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.about-b3-council-grid article{position:relative;overflow:hidden;padding:30px;border:1px solid var(--about-border);border-radius:30px;background:#fff;min-height:280px}.about-b3-council-grid article::after{content:"";position:absolute;width:140px;aspect-ratio:1;left:-60px;bottom:-70px;border-radius:50%;background:rgba(19,36,73,.05)}.about-b3-council-grid i{font-size:26px;color:var(--about-burgundy)}.about-b3-council-grid article>span{position:absolute;top:26px;left:28px;color:#d4bf72;font-weight:900}.about-b3-council-grid h3{margin:28px 0 10px;color:var(--about-ink);font-size:22px}.about-b3-council-grid p{margin:0;color:var(--about-muted);line-height:1.85}.about-b3-council-grid small{display:block;margin-top:18px;color:#967b55;font-weight:700}.about-b3-values{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}.about-b3-values h2{margin:8px 0 14px;color:#fff;font-size:clamp(34px,4vw,54px)}.about-b3-values p{margin:0;color:rgba(255,255,255,.68);line-height:1.9}.about-b3-values-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.about-b3-values-list span{display:flex;align-items:center;gap:10px;padding:18px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);color:#fff;font-weight:800}.about-b3-values-list i{color:var(--about-gold-soft)}
.about-b3-knowledge-stack{justify-self:end;position:relative;width:min(420px,100%);aspect-ratio:1}.about-b3-knowledge-stack>div{position:absolute;inset:24%;display:grid;place-items:center;text-align:center;border-radius:30px;background:linear-gradient(145deg,#132449,#0d1932);color:#fff;box-shadow:0 25px 70px rgba(0,0,0,.28);transform:rotate(-5deg)}.about-b3-knowledge-stack>div i{font-size:30px;color:var(--about-gold-soft)}.about-b3-knowledge-stack>div strong{font-size:18px}.about-b3-knowledge-stack>div small{font-size:10px;color:rgba(255,255,255,.65)}.about-b3-knowledge-stack>span{position:absolute;width:170px;padding:17px 18px;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);color:#fff;font-weight:900}.about-b3-knowledge-stack>span i{margin-left:8px;color:var(--about-gold-soft)}.about-b3-knowledge-stack .k1{top:4%;right:6%;transform:rotate(5deg)}.about-b3-knowledge-stack .k2{top:31%;left:-3%;transform:rotate(-6deg)}.about-b3-knowledge-stack .k3{bottom:8%;right:2%;transform:rotate(4deg)}.about-b3-knowledge-stack .k4{bottom:24%;left:1%;transform:rotate(-3deg)}
.about-b3-knowledge-goals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.about-b3-knowledge-goals article{padding:26px;border:1px solid var(--about-border);border-radius:25px;background:#fff;min-height:230px}.about-b3-knowledge-goals i{color:var(--about-burgundy);font-size:25px}.about-b3-knowledge-goals h3{margin:22px 0 8px;color:var(--about-ink);font-size:19px}.about-b3-knowledge-goals p{margin:0;color:var(--about-muted);font-size:13px;line-height:1.8}.about-b3-knowledge-categories{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.about-b3-knowledge-categories article{padding:27px;border-radius:26px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.06);min-height:230px}.about-b3-knowledge-categories i{color:var(--about-gold-soft);font-size:24px}.about-b3-knowledge-categories h3{margin:24px 0 8px;color:#fff;font-size:19px}.about-b3-knowledge-categories p{margin:0;color:rgba(255,255,255,.66);font-size:13px;line-height:1.8}.about-b3-access-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.about-b3-access-levels article{padding:29px;border-radius:28px;border:1px solid var(--about-border);background:#fff}.about-b3-access-levels article.is-public{background:linear-gradient(145deg,#fff8df,#fff);border-color:rgba(213,190,101,.5)}.about-b3-access-levels span{color:var(--about-burgundy);font-size:12px;font-weight:900}.about-b3-access-levels h3{margin:28px 0 10px;color:var(--about-ink);font-size:24px}.about-b3-access-levels p{margin:0;color:var(--about-muted);line-height:1.8}.about-b3-public-resources{padding-bottom:0}.about-b3-resource-listing{padding-top:24px}.about-b3-empty{display:flex;align-items:center;gap:20px;padding:26px;border-radius:26px;border:1px dashed rgba(151,122,83,.35);background:#faf7ef}.about-b3-empty>i{display:grid;place-items:center;flex:0 0 64px;height:64px;border-radius:20px;background:#f0e7ca;color:var(--about-burgundy);font-size:24px}.about-b3-empty h3{margin:0 0 5px;color:var(--about-ink)}.about-b3-empty p{margin:0;color:var(--about-muted);line-height:1.7}.about-b3-empty>a{margin-inline-start:auto;color:var(--about-burgundy);font-weight:900;white-space:nowrap}.about-b3-resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.about-b3-resource-card{padding:26px;border-radius:26px;background:#fff;border:1px solid var(--about-border)}.about-b3-resource-meta,.about-b3-resource-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}.about-b3-resource-meta span{font-size:11px;font-weight:900;color:var(--about-burgundy);background:#f7ebd7;padding:6px 9px;border-radius:999px}.about-b3-resource-meta small{color:#a38a63}.about-b3-resource-card h3{margin:24px 0 9px;color:var(--about-ink)}.about-b3-resource-card p{color:var(--about-muted);line-height:1.8}.about-b3-resource-foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--about-border)}.about-b3-resource-foot a{color:var(--about-burgundy);font-weight:900;font-size:12px}.about-b3-community-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.about-b3-community-paths a{display:flex;align-items:center;gap:14px;padding:22px;border-radius:24px;background:#fff;border:1px solid var(--about-border);text-decoration:none}.about-b3-community-paths i{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#f3ead0;color:var(--about-burgundy);font-size:20px}.about-b3-community-paths strong{display:block;color:var(--about-ink)}.about-b3-community-paths small{display:block;margin-top:4px;color:var(--about-muted)}
@media(max-width:1080px){.about-b3-programs,.about-b3-knowledge-goals{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.about-b3-alumni-orbit,.about-b3-council-wheel,.about-b3-knowledge-stack{justify-self:center;width:min(350px,90vw)}.about-b3-pillars,.about-b3-knowledge-categories,.about-b3-access-levels,.about-b3-resource-grid,.about-b3-community-paths{grid-template-columns:repeat(2,1fr)}.about-b3-values{grid-template-columns:1fr}.about-b3-bridge{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.about-b3-pillars,.about-b3-programs,.about-b3-council-grid,.about-b3-knowledge-goals,.about-b3-knowledge-categories,.about-b3-access-levels,.about-b3-resource-grid,.about-b3-community-paths{grid-template-columns:1fr}.about-b3-values-list{grid-template-columns:1fr}.about-b3-empty{align-items:flex-start;flex-wrap:wrap}.about-b3-empty>a{margin-inline-start:84px}.about-b3-knowledge-stack>span{width:145px;font-size:11px}.about-b3-bridge{padding:28px}}


/* ======================================================================
   Visual refinement — tablet header, mobile hero hierarchy, mobile dock
   2026-08 production pass. Keeps the approved visual identity intact.
   ====================================================================== */
.brand-text .brand-title {
    display: block;
    font-weight: 900;
    line-height: 1.25;
}

/* Mobile hero: preserve the cinematic composition while tightening the
   first viewport and giving the enrollment CTA the clearest hierarchy. */
@media (max-width: 767px) {
    .nobala-story-hero {
        padding: 1.8rem 0 1.75rem;
    }

    .nobala-story-brandline {
        margin-bottom: 1.1rem;
    }

    .nobala-story-title {
        margin: .85rem 0 .8rem;
        font-size: clamp(2.3rem, 10.7vw, 3.6rem);
        line-height: 1.14;
    }

    .nobala-story-lead {
        font-size: .94rem;
        line-height: 1.74;
    }

    .nobala-story-actions {
        gap: .52rem;
        margin-top: 1rem;
    }

    .nobala-story-actions .btn {
        min-height: 50px;
    }

    .nobala-story-btn-primary {
        box-shadow: 0 14px 30px rgba(var(--story-accent-rgb), .2) !important;
    }

    .nobala-story-btn-secondary {
        min-height: 46px !important;
        border-color: rgba(255, 255, 255, .18) !important;
        background: rgba(255, 255, 255, .045) !important;
        font-size: .9rem;
    }

    .nobala-story-pillars {
        gap: .4rem;
        margin-top: .78rem;
    }

    .nobala-story-pillars > span {
        min-height: 38px;
        padding: .38rem .4rem;
        font-size: .68rem;
    }

    .nobala-story-visual {
        min-height: 350px;
    }

    .nobala-story-image-frame {
        height: 342px;
    }

    .nobala-story-commandbar {
        margin-top: 1.05rem;
        padding-top: .9rem;
    }

    .nobala-story-stats {
        margin-top: 1rem;
    }
}

@media (max-width: 430px) {
    .nobala-story-title {
        font-size: clamp(2.15rem, 10.8vw, 3rem);
    }

    .nobala-story-visual {
        min-height: 318px;
    }

    .nobala-story-image-frame {
        height: 308px;
    }
}

/* The dock remains persistent but occupies less of the mobile viewport. */
@media (max-width: 991px) {
    .mobile-dock {
        inset-inline: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        gap: .22rem;
        padding: .36rem .4rem;
        border-radius: 1.18rem;
        background: rgba(255, 255, 255, .94);
        border-color: rgba(23, 41, 77, .12);
        box-shadow: 0 14px 36px rgba(23, 41, 77, .17);
    }

    .dock-link {
        min-height: 54px;
        gap: .16rem;
        border-radius: .82rem;
        font-size: .64rem;
        line-height: 1.2;
    }

    .mobile-dock-icon {
        width: 30px;
        height: 30px;
        border-radius: .72rem;
        font-size: .88rem;
    }

    .dock-link.active {
        color: var(--nobala-burgundy-deep);
        background: rgba(19, 36, 73, .075);
    }

    .dock-link.active .mobile-dock-icon {
        box-shadow: 0 6px 14px rgba(13, 25, 50, .18);
    }
}

@media (max-width: 430px) {
    .mobile-dock {
        inset-inline: 6px;
        padding-inline: .3rem;
    }

    .dock-link {
        min-height: 52px;
        font-size: .6rem;
    }

    .mobile-dock-icon {
        width: 29px;
        height: 29px;
    }
}


/* Shared content rhythm: typography and spacing only; component-specific
   editorial layouts retain their own spacing and radius systems. */
.page-hero .page-title,
.section-heading .title {
    text-wrap: balance;
}

.page-hero .page-text,
.section-heading .lead,
.section-heading .section-text {
    text-wrap: pretty;
}

.page-hero .page-text {
    max-width: 760px;
}

.section-heading {
    margin-bottom: clamp(2.5rem, 4vw, 3.25rem);
}

.section-heading .title {
    margin-block: .85rem .72rem;
}

@media (max-width: 767px) {
    .section {
        padding-block: 68px;
    }

    .section-heading {
        margin-bottom: 2.25rem;
    }

    .section-heading .title {
        margin-block: .7rem .6rem;
        font-size: clamp(1.72rem, 7.7vw, 2.2rem);
        line-height: 1.25;
    }

    .section-heading .lead,
    .section-heading .section-text {
        font-size: .96rem;
        line-height: 1.82;
    }
}

/* ========================================================================== */
/* Campaign hero slider — approved 2026 enrollment/editorial creatives        */
/* ========================================================================== */
.nobala-campaign-hero {
    position: relative;
    overflow: clip;
    padding: clamp(1rem, 2vw, 1.6rem) 0 clamp(1.35rem, 2.6vw, 2.2rem);
    background:
        radial-gradient(circle at 18% 12%, rgba(232, 214, 137, .09), transparent 30%),
        linear-gradient(180deg, #0f2547 0%, #132b50 100%);
}

.nobala-campaign-shell {
    display: grid;
    gap: 1rem;
}

.nobala-campaign-stage {
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: clamp(1rem, 2vw, 1.65rem);
    background: #0a1f3f;
    box-shadow: 0 24px 68px rgba(3, 17, 37, .28);
    isolation: isolate;
}

.nobala-campaign-slide {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .55s ease, visibility .55s ease;
}

.nobala-campaign-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.nobala-campaign-media {
    display: block;
    width: 100%;
    height: 100%;
    background: #0a1f3f;
}

.nobala-campaign-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    aspect-ratio: 2 / 1;
    background: #0a1f3f;
}

.nobala-campaign-media:focus-visible {
    outline: 3px solid var(--nobala-gold, #eadb91);
    outline-offset: -5px;
}

.nobala-campaign-toolbar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem 1rem;
    min-height: 50px;
    padding: .55rem .65rem .72rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .055);
    backdrop-filter: blur(14px);
}

.nobala-campaign-dots {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.nobala-campaign-dot {
    width: 42px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: .75rem;
    background: transparent;
    cursor: pointer;
}

.nobala-campaign-dot span {
    display: block;
    width: 100%;
    max-width: 28px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .32);
    transition: width .25s ease, background-color .25s ease, transform .25s ease;
}

.nobala-campaign-dot:hover span,
.nobala-campaign-dot:focus-visible span {
    background: rgba(255, 255, 255, .68);
}

.nobala-campaign-dot.is-active span {
    width: 28px;
    background: var(--nobala-gold, #eadb91);
    transform: scaleX(1.08);
}

.nobala-campaign-controls {
    display: flex;
    align-items: center;
    gap: .38rem;
}

.nobala-campaign-control {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .82rem;
    color: #fff;
    background: rgba(255, 255, 255, .075);
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.nobala-campaign-control:hover,
.nobala-campaign-control:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(234, 219, 145, .55);
    background: rgba(234, 219, 145, .14);
}

.nobala-campaign-count {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 58px;
    justify-content: center;
    color: rgba(255, 255, 255, .64);
    font-size: .78rem;
}

.nobala-campaign-count b {
    color: #fff;
    font-size: .9rem;
}

.nobala-campaign-count i {
    font-style: normal;
    color: rgba(255, 255, 255, .3);
}

.nobala-campaign-progress {
    position: absolute;
    inset-inline: .7rem;
    bottom: .34rem;
    height: 2px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, .1);
}

.nobala-campaign-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--nobala-gold, #eadb91), #fff3b0);
}

.nobala-campaign-quickbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: clamp(.9rem, 2vw, 1.25rem) clamp(1rem, 2.4vw, 1.5rem);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, .045);
}

.nobala-campaign-quickcopy {
    display: grid;
    gap: .2rem;
    color: #fff;
}

.nobala-campaign-quickcopy > span {
    color: var(--nobala-gold, #eadb91);
    font-size: .78rem;
    font-weight: 800;
}

.nobala-campaign-quickcopy strong {
    max-width: 720px;
    font-size: clamp(.98rem, 1.6vw, 1.22rem);
    line-height: 1.6;
    text-wrap: balance;
}

.nobala-campaign-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

.nobala-campaign-actions .btn {
    min-height: 46px;
    border-radius: .85rem;
    padding-inline: 1.15rem;
    font-weight: 800;
}

.nobala-campaign-btn-primary {
    color: #132449 !important;
    background: var(--nobala-gold, #eadb91) !important;
    border-color: var(--nobala-gold, #eadb91) !important;
}

.nobala-campaign-btn-secondary {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .2) !important;
    background: rgba(255, 255, 255, .06) !important;
}

.nobala-campaign-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.nobala-campaign-stats > div {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    min-width: 0;
    padding: .55rem .8rem;
    border-inline-start: 2px solid rgba(234, 219, 145, .45);
    color: rgba(255, 255, 255, .72);
}

.nobala-campaign-stats strong {
    flex: 0 0 auto;
    color: #fff;
    font-size: 1rem;
}

.nobala-campaign-stats span {
    min-width: 0;
    font-size: .78rem;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .nobala-campaign-hero {
        padding-top: .75rem;
    }

    .nobala-campaign-shell {
        gap: .72rem;
    }

    .nobala-campaign-stage {
        border-radius: 1rem;
    }

    .nobala-campaign-toolbar,
    .nobala-campaign-quickbar {
        grid-template-columns: 1fr;
    }

    .nobala-campaign-controls {
        justify-content: space-between;
    }

    .nobala-campaign-dots {
        justify-content: center;
    }

    .nobala-campaign-quickcopy {
        text-align: center;
        justify-items: center;
    }

    .nobala-campaign-actions {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .nobala-campaign-hero {
        padding-inline: 0;
        padding-bottom: 1rem;
    }

    .nobala-campaign-shell {
        width: min(100% - 16px, var(--container, 1180px));
    }

    .nobala-campaign-stage {
        aspect-ratio: 2 / 1;
        border-radius: .85rem;
        box-shadow: 0 12px 34px rgba(3, 17, 37, .24);
    }

    .nobala-campaign-toolbar {
        gap: .45rem;
        padding: .42rem .5rem .65rem;
        border-radius: .85rem;
    }

    .nobala-campaign-dot {
        width: 38px;
        height: 34px;
    }

    .nobala-campaign-control {
        width: 42px;
        height: 42px;
    }

    .nobala-campaign-quickbar {
        gap: .72rem;
        padding: .8rem;
        border-radius: .9rem;
    }

    .nobala-campaign-quickcopy strong {
        font-size: .94rem;
        line-height: 1.55;
    }

    .nobala-campaign-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .nobala-campaign-actions .btn {
        min-height: 44px;
        padding-inline: .7rem;
        font-size: .78rem;
        text-align: center;
    }

    .nobala-campaign-stats {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .nobala-campaign-stats > div {
        padding-block: .35rem;
    }
}

@media (max-width: 430px) {
    .nobala-campaign-shell {
        width: calc(100% - 12px);
    }

    .nobala-campaign-actions {
        grid-template-columns: 1fr;
    }

    .nobala-campaign-stats {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nobala-campaign-slide,
    .nobala-campaign-dot span,
    .nobala-campaign-control {
        transition: none !important;
    }
}

/* Educational model — staged growth, measurement journey, value chain. */
.about-model-growth-path {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.about-model-growth-path article {
    position: relative;
    min-height: 210px;
    padding: 1.45rem;
    overflow: hidden;
    border: 1px solid rgba(23, 41, 77, .1);
    border-radius: 1.35rem;
    background: #fff;
    box-shadow: 0 18px 42px rgba(23, 41, 77, .07);
}

.about-model-growth-path article > b {
    position: absolute;
    inset-inline-end: 1.1rem;
    top: .9rem;
    color: rgba(23, 41, 77, .12);
    font-size: 2.3rem;
    font-weight: 900;
}

.about-model-growth-path article > i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: 1rem;
    color: var(--nobala-burgundy-deep, #0d1932);
    background: rgba(234, 219, 145, .32);
}

.about-model-growth-path h3 {
    margin: 0 0 .55rem;
    color: var(--nobala-navy, #132449);
    font-size: 1.25rem;
}

.about-model-growth-path p {
    margin: 0;
    color: #5e687b;
    line-height: 1.8;
}

.about-model-measure-heading {
    margin-top: clamp(3rem, 6vw, 5rem);
}

.about-model-measurement-flow {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    padding: 0;
    margin: 2rem 0 0;
    counter-reset: none;
}

.about-model-measurement-flow li {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .8rem;
    min-height: 170px;
    padding: 1.15rem;
    border: 1px solid rgba(23, 41, 77, .1);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, .86);
}

.about-model-measurement-flow li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 30px;
    inset-inline-end: -.62rem;
    width: .4rem;
    height: 2px;
    background: rgba(13, 25, 50, .35);
}

.about-model-measurement-flow li > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--nobala-burgundy-deep, #0d1932);
    font-size: .72rem;
    font-weight: 900;
}

.about-model-measurement-flow h3 {
    margin: .12rem 0 .45rem;
    color: var(--nobala-navy, #132449);
    font-size: 1rem;
}

.about-model-measurement-flow p {
    margin: 0;
    color: #657084;
    font-size: .9rem;
    line-height: 1.7;
}

.about-model-value-chain {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 2rem;
}

.about-model-value-chain > div {
    min-height: 105px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1rem;
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.about-model-value-chain b {
    color: var(--nobala-gold, #eadb91);
    font-size: .72rem;
}

.about-model-value-chain span {
    font-weight: 800;
    line-height: 1.5;
}

.about-model-measure-principles {
    margin-top: 2rem;
    padding: clamp(1.2rem, 3vw, 1.7rem);
    border: 1px solid rgba(234, 219, 145, .2);
    border-radius: 1.2rem;
    background: rgba(7, 27, 55, .36);
}

.about-model-measure-principles > h3 {
    margin: 0 0 1rem;
    color: var(--nobala-gold, #eadb91);
    font-size: 1.15rem;
}

.about-model-measure-principles > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.about-model-measure-principles span {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .65rem;
    align-items: center;
    padding: .85rem;
    border-radius: .9rem;
    background: rgba(255, 255, 255, .055);
}

.about-model-measure-principles i {
    grid-row: 1 / span 2;
    color: var(--nobala-gold, #eadb91);
}

.about-model-measure-principles strong {
    color: #fff;
    font-size: .92rem;
}

.about-model-measure-principles small {
    color: rgba(255, 255, 255, .68);
    line-height: 1.55;
}

@media (max-width: 991px) {
    .about-model-measurement-flow,
    .about-model-value-chain {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-model-measurement-flow li:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 767px) {
    .about-model-growth-path,
    .about-model-measurement-flow,
    .about-model-value-chain,
    .about-model-measure-principles > div {
        grid-template-columns: 1fr;
    }

    .about-model-growth-path article,
    .about-model-measurement-flow li {
        min-height: auto;
    }
}

/* ===== Campus terminology & hero visual cleanup — Aug 2026 ===== */
.page-home .hero {
    background: linear-gradient(135deg, var(--nobala-navy-deep) 0%, var(--nobala-navy) 56%, var(--nobala-blue) 100%);
}
.page-home .hero::after,
.page-home .hero-glow,
.page-home .hero-glow-two,
.page-home .hero-ring,
.page-home .hero-particles {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Replace gradient-filled text with solid brand text to avoid rectangular color artifacts. */
.text-gradient,
.logo-gradient {
    background: none !important;
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    animation: none !important;
}
.text-gradient { color: var(--nobala-burgundy-deep) !important; }
.logo-gradient { color: var(--nobala-gold-soft) !important; }
.logo-gradient::after { display: none !important; content: none !important; }

.branch-pathways-section .section-heading { max-width: 920px; margin-inline: auto; }
.branch-pathways-grid { align-items: stretch; }
.branch-pathway-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.45rem;
    border-color: rgba(23, 41, 77, .11);
    background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(249,247,241,.96));
}
.branch-pathway-card .contact-card-head {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(23, 41, 77, .09);
}
.branch-program-list {
    display: grid;
    gap: .78rem;
    margin-bottom: 1.15rem;
}
.branch-program-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .8rem;
    align-items: start;
    padding: .95rem 1rem;
    border: 1px solid rgba(23, 41, 77, .08);
    border-radius: 18px;
    background: rgba(247, 245, 239, .82);
}
.branch-program-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(210, 190, 106, .16);
    color: var(--nobala-gold-deep);
}
.branch-program-item strong {
    display: block;
    color: var(--nobala-navy);
    font-size: 1rem;
    line-height: 1.45;
}
.branch-program-item small {
    display: block;
    margin-top: .28rem;
    color: var(--nobala-muted);
    font-size: .78rem;
    line-height: 1.65;
}
.branch-pathway-actions { margin-top: auto; padding-top: .25rem; }
.branch-detail-program-list { display: grid; gap: .7rem; margin: 1rem 0; }
.branch-detail-program-list span {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem .85rem;
    border-radius: 14px;
    background: var(--nobala-ivory);
    color: var(--nobala-navy);
}
.branch-detail-program-list i { color: var(--nobala-gold-deep); }

@media (max-width: 760px) {
    .branch-pathway-card { padding: 1.05rem; }
    .branch-program-item { grid-template-columns: 38px minmax(0,1fr); padding: .82rem; }
    .branch-program-icon { width: 38px; height: 38px; border-radius: 12px; }
}

/* ===== Hero color system & header brand consistency — Aug 2026 =====
   Approved UI refinement: one institutional navy hero language, no hero watermarks,
   and a single-line Arabic school name on desktop / wide tablet. */
:root {
    --nobala-hero-navy-start: #0d1932;
    --nobala-hero-navy-mid: #132449;
    --nobala-hero-navy-end: #243a66;
}

/* Keep all standard content heroes in the same institutional navy family. */
.hero,
.page-hero,
.inner-hero,
.news-hero,
.store-hero,
.callback-hero,
.page-stages .stages-page-hero,
.page-fees .page-hero,
.page-academic .page-hero,
.page-admissions .page-hero {
    background-image: linear-gradient(
        135deg,
        var(--nobala-hero-navy-start) 0%,
        var(--nobala-hero-navy-mid) 58%,
        var(--nobala-hero-navy-end) 100%
    ) !important;
    background-color: var(--nobala-hero-navy-mid) !important;
}

/* Remove decorative logo watermarks from hero surfaces; the header already carries the identity. */
.hero::after,
.page-hero::after,
.inner-hero::after,
.news-hero::after,
.store-hero::after,
.callback-hero::after,
.page-stages .stages-page-hero::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Use a restrained gold label on dark heroes instead of mixed blue/grey/burgundy pills. */
.page-hero .badge,
.page-hero .badge-white,
.page-hero .section-badge,
.page-hero .eyebrow,
.news-hero .badge,
.news-hero .badge-white,
.store-hero .badge,
.callback-hero .badge {
    color: var(--nobala-gold-soft) !important;
    background: rgba(210, 190, 106, .10) !important;
    border-color: rgba(210, 190, 106, .34) !important;
    box-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Arabic brand must read as one institutional name, not two stacked fragments. */
html[dir="rtl"] .brand-text .brand-title {
    display: block;
    min-width: max-content;
    max-width: none;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
}

@media (min-width: 1381px) {
    html[dir="rtl"] .brand {
        min-width: 214px;
    }
    html[dir="rtl"] .brand-text .brand-title {
        font-size: .94rem;
    }
}

/* ===== Pattern-free dark surfaces & official careers footer — Aug 2026 ===== */
.footer,
.full-cta,
.hero,
.page-hero,
.inner-hero,
.video-hero,
.nobala-story-hero {
    background-repeat: no-repeat !important;
}

.footer::after,
.full-cta .nobala-story-hero-pattern {
    background-image: none !important;
}

/* ===== Approved raw-media presentation — 2026-08-11 ===== */
.page-home .future-reference-layout {
    align-items: center;
}
.page-home .future-reference-media {
    min-width: 0;
}
.page-home .future-reference-photo {
    margin: 0;
    overflow: hidden;
    border-radius: 26px;
    background: #f3f5f8;
    border: 1px solid rgba(23, 41, 77, .08);
    box-shadow: 0 18px 42px rgba(23, 41, 77, .09);
    aspect-ratio: 4 / 3;
}
.page-home .future-reference-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-home .facilities-grid-extended {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1040px;
    margin-inline: auto;
}
.page-home .facility-card-clean {
    min-height: 0;
    position: static;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(23, 41, 77, .09);
    border-radius: 24px;
    box-shadow: 0 16px 38px rgba(23, 41, 77, .08);
}
.page-home .facility-card-clean:hover {
    transform: translateY(-4px);
}
.page-home .facility-card-clean .facility-card-photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eef1f5;
}
.page-home .facility-card-clean .facility-card-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.page-home .facility-card-clean:hover .facility-card-photo img {
    transform: scale(1.025);
}
.page-home .facility-card-clean .facility-card-copy {
    padding: 1.25rem 1.35rem 1.4rem;
}
.page-home .facility-card-clean .facility-card-copy h3 {
    margin: 0 0 .45rem;
    color: var(--nobala-navy, #132449);
    font-size: 1.18rem;
}
.page-home .facility-card-clean .facility-card-copy p {
    margin: 0;
    color: #667187;
    font-size: .94rem;
    line-height: 1.85;
}

.page-home .news-preview-card-text {
    overflow: visible;
    min-height: 100%;
}
.page-home .news-preview-card-text .news-preview-body {
    padding: 1.45rem;
}

@media (max-width: 760px) {
    .page-home .facilities-grid-extended {
        grid-template-columns: 1fr;
    }
    .page-home .future-reference-photo,
    .page-home .facility-card-clean .facility-card-photo {
        border-radius: 20px;
    }
}

/* ===== UX remediation release — navigation, stages and contact | 2026-08-17 ===== */
.contact-info-hero,
.stages-pathways-hero {
    background:
        radial-gradient(circle at 12% 18%, rgba(201, 169, 78, .18), transparent 24rem),
        linear-gradient(135deg, var(--nobala-navy-deep), var(--nobala-navy));
}

.contact-direct-panel {
    display: grid;
    gap: 12px;
    width: min(100%, 470px);
    justify-self: end;
}
.contact-direct-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas: "icon label" "icon value";
    align-items: center;
    gap: 2px 14px;
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 18px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.contact-direct-card:hover,
.contact-direct-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(201, 169, 78, .55);
    background: rgba(255, 255, 255, .12);
}
.contact-direct-card > i {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    color: var(--nobala-navy-deep);
    background: var(--nobala-gold);
    font-size: 1.08rem;
}
.contact-direct-card span { grid-area: label; color: rgba(255,255,255,.7); font-size: .78rem; font-weight: 800; }
.contact-direct-card strong { grid-area: value; color: #fff; overflow-wrap: anywhere; font-size: .96rem; }
.contact-social-grid { margin-top: 1.5rem; }
.contact-campus-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.contact-campus-card__head { display: flex; align-items: center; gap: 12px; }
.contact-campus-card__head > i {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: var(--nobala-navy);
    background: rgba(201,169,78,.2);
}
.contact-campus-card__head h3 { margin: 0 0 2px; }
.contact-campus-card__head span { color: var(--nobala-muted); font-size: .82rem; font-weight: 750; }
.contact-campus-card .map-frame { margin-top: auto; min-height: 240px; }
.contact-campus-card .map-frame iframe { width: 100%; height: 100%; min-height: 240px; border: 0; }
.branch-map-placeholder {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 240px;
    padding: 24px;
    border: 1px dashed rgba(19,36,73,.22);
    border-radius: 18px;
    background: rgba(19,36,73,.035);
    text-align: center;
}
.branch-map-placeholder > i { color: var(--nobala-gold-deep); font-size: 1.7rem; }
.branch-map-placeholder span { color: var(--nobala-muted); font-size: .84rem; line-height: 1.7; }
.contact-careers-section .full-cta { margin-block: 0; }

.stages-pathways-hero-card {
    display: grid;
    gap: 10px;
    width: min(100%, 470px);
    justify-self: end;
}
.stages-pathways-hero-step {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
}
.stages-pathways-hero-step strong {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--nobala-gold);
    color: var(--nobala-navy-deep);
    font-size: 1.05rem;
}
.stages-pathways-hero-step span { color: #fff; font-weight: 850; }
.stages-pathways-jump { flex-wrap: wrap; }
.stages-journey-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 1.6rem;
}
.stages-journey-card {
    position: relative;
    min-width: 0;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(19,36,73,.1);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--nobala-shadow-soft);
}
.stages-journey-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--nobala-gold), var(--nobala-navy));
}
.stages-journey-card__index {
    display: inline-grid;
    place-items: center;
    min-width: 50px;
    min-height: 40px;
    margin-bottom: 14px;
    border-radius: 12px;
    color: var(--nobala-navy-deep);
    background: rgba(201,169,78,.18);
    font-weight: 900;
}
.stages-journey-card h3 { margin: 0 0 12px; color: var(--nobala-navy); }
.stages-journey-card dl { display: grid; gap: 12px; margin: 0; }
.stages-journey-card dl > div { padding-top: 11px; border-top: 1px solid rgba(19,36,73,.08); }
.stages-journey-card dt { margin-bottom: 4px; color: var(--nobala-gold-deep); font-size: .76rem; font-weight: 900; }
.stages-journey-card dd { margin: 0; color: var(--nobala-muted); line-height: 1.75; }
.stages-pathway-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 1.6rem;
}
.stages-pathway-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid rgba(19,36,73,.11);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--nobala-shadow-soft);
}
.stages-pathway-card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.stages-pathway-card__head > i {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: var(--nobala-navy);
    background: rgba(201,169,78,.19);
}
.stages-pathway-card__head h3 { margin: 0 0 3px; }
.stages-pathway-card__head span { color: var(--nobala-muted); font-size: .82rem; font-weight: 750; }
.stages-pathway-card ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.stages-pathway-card li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.65; }
.stages-pathway-card li i { margin-top: .35em; color: var(--nobala-gold-deep); font-size: .75rem; }
.stages-pathways-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 2rem;
    padding: 24px;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--nobala-navy-deep), var(--nobala-navy));
}
.stages-pathways-cta h3 { margin: 0 0 5px; color: #fff; }
.stages-pathways-cta p { margin: 0; color: rgba(255,255,255,.72); }
.article-source-actions { margin-top: 1rem; }
.article-source-link { display: inline-flex; align-items: center; gap: 8px; }

/* Four focused About destinations should not feel like a scrolling tab strip. */
.about-v2-nav-inner { justify-content: center; gap: 10px; }
.about-v2-nav a { padding-inline: 18px; }
.about-v2-hero-copy > p { line-height: 1.95; }
.about-v2-person-card,
.about-v2-ceo-card { line-height: 1.8; }

@media (max-width: 991px) {
    .contact-direct-panel,
    .stages-pathways-hero-card { width: 100%; justify-self: stretch; }
    .stages-journey-grid,
    .stages-pathway-grid { grid-template-columns: 1fr; }
    .stages-pathways-cta { align-items: flex-start; flex-direction: column; }
    .about-v2-nav-inner { justify-content: flex-start; }
}

@media (max-width: 640px) {
    .contact-direct-card { padding: 14px; grid-template-columns: 42px minmax(0, 1fr); }
    .contact-direct-card > i { width: 42px; height: 42px; }
    .stages-journey-card,
    .stages-pathway-card { padding: 19px; border-radius: 18px; }
    .stages-pathways-hero-step { grid-template-columns: 50px minmax(0, 1fr); padding: 14px; }
    .stages-pathways-hero-step strong { width: 46px; height: 46px; }
    .stages-pathways-cta { padding: 20px; }
}

/* ===== 2026-09-12 Phase 2: About / Leadership / Contact / Facilities / News ===== */
.about-values-contact { border-top: 1px solid rgba(19,36,73,.07); }
.about-values-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 14px;
    margin-top: 1.5rem;
}
.about-values-grid > span {
    display: grid;
    place-items: center;
    min-height: 132px;
    padding: 18px 12px;
    text-align: center;
    border: 1px solid rgba(19,36,73,.09);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--nobala-shadow-soft);
}
.about-values-grid i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    border-radius: 15px;
    color: var(--nobala-navy);
    background: rgba(201,169,78,.18);
}
.about-values-grid b { color: var(--nobala-navy); font-size: .93rem; }
.about-values-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 1.5rem;
}
.about-values-contact .about-v2-btn--ghost {
    color: var(--nobala-navy);
    border-color: rgba(19,36,73,.24);
    background: #fff;
}

.page-about-leadership .about-v2-hero-copy > p,
.page-about-leadership .about-v2-heading > p,
.page-about-leadership .about-v2-ceo-copy > p,
.page-about-leadership .about-v2-person-card > p { line-height: 1.95; }
.page-about-leadership .about-v2-ceo-card { padding: clamp(22px,3vw,34px); gap: clamp(18px,2.6vw,30px); }
.page-about-leadership .about-v2-people-grid { gap: 20px; }
.page-about-leadership .about-v2-person-card { padding: 24px; }
.page-about-leadership .about-v2-leadership-symbol i { color: var(--nobala-gold); }

.page-contact .contact-info-hero .page-text { max-width: 760px; line-height: 1.95; }
.page-contact .contact-campus-card > p { line-height: 1.85; }
.page-contact .contact-social-grid { margin-top: 1.35rem; }

.page-facilities .facility-card-body p,
.page-facilities .vt-header p { line-height: 1.85; }
.page-facilities .facility-media-card { border-color: rgba(19,36,73,.09); }

.page-news .news-card h3 { line-height: 1.55; }
.page-news .news-card p { line-height: 1.8; }
.page-news .featured-article-body .section-text { line-height: 1.9; }
.article-source-link i { color: currentColor; }

@media (max-width: 991px) {
    .about-values-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
    .about-values-grid { grid-template-columns: 1fr; }
    .about-values-grid > span { min-height: 104px; }
}
.news-card-actions { flex-wrap: wrap; }
.news-source-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nobala-navy);
    font-size: .78rem;
    font-weight: 800;
}
.news-source-link:hover { color: var(--nobala-gold-deep); }

/* ===== Phase 3 homepage UX/content alignment — 2026-09-12 ===== */
.page-home .home-stage-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1080px;
    margin-inline: auto;
}
.page-home .home-stage-preview-card {
    min-height: 245px;
    border-bottom-color: var(--nobala-gold);
    background: linear-gradient(180deg, #fff 0%, var(--nobala-ivory) 100%);
}
.page-home .home-stage-preview-card .stage-number {
    background: linear-gradient(135deg, var(--nobala-navy), var(--nobala-navy-deep));
    border: 2px solid rgba(201, 169, 78, .7);
}
.page-home .home-stage-preview-actions {
    margin-top: 1.75rem;
}
.page-home .home-admissions-whatsapp {
    gap: .5rem;
}
.page-home .home-admissions-whatsapp i {
    font-size: 1.12rem;
}
.page-home .news-preview-card-media {
    overflow: hidden;
    min-height: 100%;
}
.page-home .news-preview-link {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}
.page-home .news-preview-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eef1f5;
}
.page-home .news-preview-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .45s ease;
}
.page-home .news-preview-card-media:hover .news-preview-media img {
    transform: scale(1.035);
}
.page-home .news-preview-card-media .news-preview-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .72rem;
    padding: 1.35rem 1.4rem 1.45rem;
}
.page-home .news-preview-readmore {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    color: var(--nobala-navy);
    font-weight: 850;
}
html[dir="ltr"] .page-home .news-preview-readmore i {
    transform: rotate(180deg);
}
@media (max-width: 820px) {
    .page-home .home-stage-preview-grid {
        grid-template-columns: 1fr;
    }
    .page-home .home-stage-preview-card {
        min-height: 0;
    }
}