:root {
        --navy: #062b5c;
        --royal-blue: #123b78;
        --green: #08783f;
        --dark-green: #075a32;
        --gold: #d6a62a;
        --gold-soft: #f7d87a;
        --cream: #f8f6ef;
        --cream-strong: #fffaf0;
        --lavender: #eef0fa;
        --white: #ffffff;
        --text: #172033;
        --muted: #667085;
        --border: rgba(6, 43, 92, 0.12);
        --shadow: 0 20px 45px rgba(8, 29, 58, 0.12);
        --shadow-soft: 0 12px 30px rgba(8, 29, 58, 0.08);
        --radius: 24px;
        --radius-sm: 16px;
        --container: 1180px;
        --hero-gradient: linear-gradient(135deg, rgba(248,246,239,1) 0%, rgba(239,240,250,1) 32%, rgba(255,255,255,1) 100%);
        --premium-gradient: linear-gradient(135deg, rgba(6,43,92,1) 0%, rgba(18,59,120,1) 42%, rgba(8,120,63,1) 100%);
        --accent-gradient: linear-gradient(135deg, rgba(214,166,42,1) 0%, rgba(247,216,122,1) 100%);
      }

      * { box-sizing: border-box; }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        font-family: "Manrope", sans-serif;
        background:
          radial-gradient(circle at top left, rgba(214,166,42,0.2), transparent 18%),
          radial-gradient(circle at bottom right, rgba(8,120,63,0.18), transparent 20%),
          linear-gradient(180deg, #f9f7f1 0%, #ffffff 24%, #f8f7f5 100%);
        color: var(--text);
        line-height: 1.7;
      }

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

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

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

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

      .section {
        padding: 110px 0;
      }

      .section-header {
        margin-bottom: 42px;
        max-width: 740px;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(19, 59, 120, 0.08);
        color: var(--navy);
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .eyebrow::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--gold);
      }

      h1, h2, h3, h4, h5 {
        font-family: "Cormorant Garamond", serif;
        font-weight: 600;
        line-height: 1.05;
        margin: 0 0 18px;
        color: var(--navy);
      }

      h1 {
        font-size: clamp(3rem, 5vw, 5.2rem);
        letter-spacing: -0.04em;
        text-shadow: 0 6px 18px rgba(6, 43, 92, 0.04);
      }

      h2 {
        font-size: clamp(2.3rem, 4vw, 3.5rem);
        letter-spacing: -0.03em;
      }

      h3 {
        font-size: clamp(2rem, 2vw, 2.6rem);
        letter-spacing: -0.02em;
      }

      p {
        margin: 0 0 18px;
        color: var(--muted);
        font-size: 1.03rem;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px 26px;
        border-radius: 14px;
        border: 1px solid transparent;
        font-weight: 800;
        letter-spacing: 0.02em;
        transition: 0.25s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(255,255,255,0.15), transparent 45%, rgba(255,255,255,0.08));
        transform: translateX(-120%);
        transition: transform 0.5s ease;
      }

      .btn:hover::before {
        transform: translateX(120%);
      }

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

      .btn-primary {
        background: linear-gradient(135deg, var(--navy) 0%, var(--royal-blue) 100%);
        color: var(--white);
        box-shadow: 0 14px 28px rgba(6, 43, 92, 0.18);
      }

      .btn-primary:hover {
        background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
        color: var(--navy);
      }

      .btn-secondary {
        background: linear-gradient(135deg, var(--green) 0%, var(--dark-green) 100%);
        color: var(--white);
        box-shadow: 0 14px 26px rgba(8, 120, 63, 0.18);
      }

      .btn-secondary:hover {
        background: linear-gradient(135deg, var(--dark-green) 0%, var(--green) 100%);
      }

      .btn-outline {
        background: transparent;
        border-color: rgba(6, 43, 92, 0.25);
        color: var(--navy);
      }

      .btn-outline:hover {
        background: rgba(8, 120, 63, 0.06);
        border-color: var(--green);
      }

      .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(6, 43, 92, 0.05);
        transition: 0.25s ease;
      }

      .site-header.scrolled {
        box-shadow: 0 10px 30px rgba(6, 43, 92, 0.1);
      }

      .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 86px;
        gap: 20px;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        min-width: 180px;
      }

      .brand-mark {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--navy), var(--royal-blue));
        color: var(--white);
        font-weight: 800;
        box-shadow: var(--shadow-soft);
      }

      .brand-text {
        line-height: 1.1;
      }

      .brand-text strong {
        display: block;
        font-size: 1.04rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--navy);
      }

      .brand-text span {
        display: block;
        font-size: 0.65rem;
        color: var(--green);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 24px;
        font-size: 0.96rem;
        color: var(--navy);
        font-weight: 700;
      }

      .nav-links a {
        position: relative;
        padding: 8px 0;
      }

      .nav-links a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 2px;
        background: var(--gold);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.25s ease;
      }

      .nav-links a:hover::after,
      .nav-links a.active::after {
        transform: scaleX(1);
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .mobile-menu-toggle {
        display: none;
        width: 46px;
        height: 46px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--white);
        font-size: 1.2rem;
        color: var(--navy);
      }

      .hero {
        background: linear-gradient(135deg, #f8f6ef 0%, #edf1fb 38%, #ffffff 100%);
        position: relative;
        overflow: hidden;
      }

      .hero::before,
      .hero::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(10px);
      }

      .hero::before {
        width: 252px;
        height: 252px;
        background: rgba(214, 166, 42, 0.12);
        right: -20px;
        top: 40px;
      }

      .hero::after {
        width: 230px;
        height: 230px;
        background: rgba(8, 120, 63, 0.08);
        left: -30px;
        bottom: 80px;
      }

      .hero-inner {
        display: grid;
        grid-template-columns: 1.08fr 0.92fr;
        align-items: center;
        gap: 48px;
        padding: 46px 0 84px;
      }

      .hero-copy {
        position: relative;
        z-index: 1;
      }

      .hero-copy p {
        font-size: 1.12rem;
        max-width: 650px;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 28px;
      }

      .hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        margin-top: 34px;
      }

      .meta-pill {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(238,240,250,0.9));
        border: 1px solid rgba(6, 43, 92, 0.08);
        color: var(--navy);
        padding: 12px 18px;
        border-radius: 14px;
        font-size: 0.88rem;
        font-weight: 700;
        box-shadow: 0 8px 25px rgba(6, 43, 92, 0.06);
      }

      .meta-pill .mini-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, rgba(214,166,42,0.18), rgba(8,120,63,0.12));
        color: var(--navy);
        font-size: 1rem;
      }

      .meta-pill span {
        display: block;
        color: var(--green);
        font-size: 0.72rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .hero-visual {
        position: relative;
        z-index: 1;
      }

      .hero-collage {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 0.95fr;
        gap: 18px;
        padding: 18px;
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(10, 36, 71, 0.08);
        border-radius: 30px;
        box-shadow: var(--shadow);
      }

      .hero-collage .stack {
        display: grid;
        gap: 18px;
      }

      .hero-collage img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 24px;
        animation: floatCard 7s ease-in-out infinite alternate;
        transform-origin: center;
      }

      .hero-collage .stack:first-child .hero-sq:nth-child(1) {
        animation-delay: 0.2s;
      }

      .hero-collage .stack:first-child .hero-sq:nth-child(2) {
        animation-delay: 0.8s;
      }

      .hero-collage .stack:last-child .hero-tall {
        animation-delay: 1.2s;
      }

      .hero-tall {
        height: 610px;
      }

      .hero-sq {
        height: 290px;
      }

      .badge-card {
        position: absolute;
        left: -12px;
        bottom: 24px;
        background: var(--navy);
        color: var(--white);
        padding: 18px 20px;
        border-radius: 18px;
        box-shadow: var(--shadow);
      }

      .badge-card strong {
        display: block;
        font-size: 1.8rem;
        line-height: 1;
        color: var(--gold);
      }

      .badge-card span {
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .impact-strip {
        background: linear-gradient(135deg, var(--navy) 0%, var(--royal-blue) 48%, var(--green) 100%);
        color: var(--white);
        padding: 24px 0;
        position: relative;
      }

      .impact-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
      }

      .impact-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
        padding: 18px 14px;
        border-radius: 18px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
      }

      .impact-item i {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: rgba(255,255,255,0.09);
        color: var(--gold-soft);
        font-size: 1.1rem;
      }

      .impact-item strong {
        display: block;
        font-size: clamp(1.1rem, 2vw, 1.6rem);
        color: var(--gold);
      }

      .impact-item span {
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .about {
        background: linear-gradient(180deg, var(--white), rgba(238,240,250,0.6));
      }

      .about-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 52px;
        align-items: center;
      }

      .about-visual {
        position: relative;
        border-radius: 30px;
        overflow: hidden;
        box-shadow: var(--shadow);
      }

      .about-visual img {
        width: 100%;
        height: 620px;
        object-fit: cover;
      }

      .principles {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        margin-top: 32px;
      }

      .principle-card {
        background: var(--white);
        border: 1px solid rgba(6, 43, 92, 0.08);
        box-shadow: var(--shadow-soft);
        border-radius: 22px;
        padding: 24px 20px;
      }

      .principle-card .icon {
        width: 54px;
        height: 54px;
        display: grid;
        place-items: center;
        border-radius: 16px;
        margin-bottom: 16px;
        background: linear-gradient(135deg, rgba(8,120,63,0.14), rgba(214,166,42,0.2));
        color: var(--navy);
        font-size: 1.3rem;
        box-shadow: inset 0 0 0 1px rgba(6, 43, 92, 0.04);
      }

      .principle-card h4 {
        font-family: "Manrope", sans-serif;
        font-size: 1.2rem;
        margin: 0 0 8px;
      }

      .services {
        background: var(--cream);
      }

      .card-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
      }

      .service-card {
        position: relative;
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,246,239,0.9));
        border: 1px solid rgba(6, 43, 92, 0.08);
        border-radius: 24px;
        padding: 26px 22px;
        box-shadow: var(--shadow-soft);
        transition: 0.25s ease;
        overflow: hidden;
      }

      .service-card::before {
        content: "";
        position: absolute;
        inset: 0 auto auto 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, var(--gold), var(--green));
      }

      .service-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 38px rgba(10, 35, 68, 0.12);
        border-color: rgba(18,59,120,0.18);
      }

      .service-icon {
        width: 60px;
        height: 60px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        margin-bottom: 18px;
        background: linear-gradient(135deg, rgba(6,43,92,1), rgba(18,59,120,1), rgba(8,120,63,1));
        color: var(--white);
        font-size: 1.6rem;
        box-shadow: 0 12px 22px rgba(6,43,92,0.2);
      }

      .service-card h4 {
        font-family: "Manrope", sans-serif;
        font-size: 1.15rem;
        margin-bottom: 10px;
      }

      .teacher-section {
        background: var(--white);
      }

      .teacher-layout {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 46px;
        align-items: center;
      }

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

      .teacher-item {
        background: var(--lavender);
        border: 1px solid rgba(18,59,120,0.08);
        border-radius: 18px;
        padding: 18px 16px;
        font-weight: 700;
        color: var(--navy);
      }

      .teacher-item i {
        color: var(--gold);
        margin-right: 10px;
      }

      .teacher-visual {
        position: relative;
      }

      .teacher-visual img {
        width: 100%;
        min-height: 480px;
        object-fit: cover;
        border-radius: 30px;
        box-shadow: var(--shadow);
      }

      .teacher-panel {
        position: absolute;
        right: 20px;
        bottom: 18px;
        background: rgba(255,255,255,0.95);
        border: 1px solid rgba(6,43,92,0.08);
        border-radius: 18px;
        padding: 18px 18px 12px;
        width: 240px;
        box-shadow: var(--shadow-soft);
      }

      .teacher-panel strong {
        display: block;
        font-size: 1.7rem;
        color: var(--navy);
        line-height: 1;
      }

      .teacher-panel span {
        font-size: 0.75rem;
        color: var(--green);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 800;
      }

      .children-section {
        background: linear-gradient(135deg, rgba(8,120,63,0.05), rgba(214,166,42,0.04));
      }

      .children-layout {
        display: grid;
        grid-template-columns: 0.95fr 1.05fr;
        gap: 46px;
        align-items: center;
      }

      .children-visual {
        position: relative;
      }

      .children-visual img {
        width: 100%;
        height: 510px;
        object-fit: cover;
        border-radius: 30px;
        box-shadow: var(--shadow);
      }

      .check-list {
        list-style: none;
        padding: 0;
        margin: 26px 0;
        display: grid;
        gap: 12px;
      }

      .check-list li {
        display: flex;
        align-items: start;
        gap: 12px;
        color: var(--text);
        font-weight: 700;
      }

      .check-list li i {
        color: var(--green);
        margin-top: 4px;
      }

      .events {
        background: var(--cream);
      }

      .section-intro {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 30px;
      }

      .filters {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .filter-btn {
        border: 1px solid rgba(6,43,92,0.12);
        background: rgba(255,255,255,0.75);
        color: var(--navy);
        border-radius: 999px;
        padding: 10px 16px;
        font-weight: 800;
        cursor: pointer;
        transition: 0.25s ease;
      }

      .filter-btn.active,
      .filter-btn:hover {
        background: linear-gradient(135deg, var(--navy) 0%, var(--royal-blue) 100%);
        color: var(--white);
        border-color: var(--navy);
        box-shadow: 0 12px 20px rgba(6, 43, 92, 0.14);
      }

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

      .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 24px;
        background: var(--white);
        box-shadow: var(--shadow-soft);
        border: 1px solid rgba(6,43,92,0.08);
        cursor: pointer;
        transition: 0.25s ease;
      }

      .gallery-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 34px rgba(12, 38, 70, 0.12);
      }

      .gallery-item img {
        width: 100%;
        height: 330px;
        object-fit: cover;
        transition: transform 0.45s ease, filter 0.45s ease;
        animation: galleryReveal 0.8s ease both;
        transform-origin: center;
      }

      .gallery-item:nth-child(2n) img {
        animation-delay: 0.15s;
      }

      .gallery-item:nth-child(3n) img {
        animation-delay: 0.3s;
      }

      .gallery-item:hover img {
        transform: scale(1.08) rotate(-1deg);
        filter: saturate(1.08);
      }

      .gallery-item .caption {
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 18px;
        background: rgba(6,43,92,0.74);
        backdrop-filter: blur(4px);
        color: var(--white);
        padding: 16px 18px;
        border-radius: 18px;
      }

      .gallery-item .tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 8px;
      }

      .gallery-item .tag::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--gold);
      }

      .gallery-item h4 {
        margin: 0 0 6px;
        font-size: 1.4rem;
        line-height: 1.1;
        color: var(--white);
        font-family: "Manrope", sans-serif;
      }

      .gallery-item p {
        margin: 0;
        color: rgba(255,255,255,0.8);
        font-size: 0.9rem;
      }

      .featured-event {
        background: var(--white);
      }

      .featured-box {
        display: grid;
        grid-template-columns: 1.08fr 0.92fr;
        gap: 30px;
        align-items: center;
        background: linear-gradient(135deg, #ffffff, rgba(238,240,250,0.6));
        border: 1px solid rgba(6,43,92,0.08);
        border-radius: 30px;
        overflow: hidden;
        box-shadow: var(--shadow);
      }

      .featured-box img {
        width: 100%;
        height: 100%;
        min-height: 480px;
        object-fit: cover;
      }

      .featured-content {
        padding: 44px 40px;
      }

      .featured-content .label {
        display: inline-flex;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(8,120,63,0.1);
        color: var(--green);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

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

      .feature-card {
        background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,249,255,0.9));
        border: 1px solid rgba(6,43,92,0.08);
        border-radius: 22px;
        padding: 24px 20px;
        box-shadow: var(--shadow-soft);
        backdrop-filter: blur(4px);
      }

      .feature-card .icon {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, rgba(214,166,42,0.18), rgba(8,120,63,0.12));
        color: var(--navy);
        margin-bottom: 16px;
        box-shadow: inset 0 0 0 1px rgba(6, 43, 92, 0.04);
      }

      .feature-card h4 {
        font-family: "Manrope", sans-serif;
        font-size: 1.1rem;
        margin-bottom: 6px;
      }

      .school-section {
        background: linear-gradient(180deg, var(--white), rgba(238,240,250,0.5));
      }

      .partnership-cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
      }

      .partnership-card {
        background: var(--white);
        border: 1px solid rgba(6,43,92,0.08);
        border-radius: 24px;
        padding: 28px 22px;
        box-shadow: var(--shadow-soft);
      }

      .partnership-card .icon {
        width: 56px;
        height: 56px;
        display: grid;
        place-items: center;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(6,43,92,0.95), rgba(8,120,63,0.9));
        color: var(--white);
        margin-bottom: 18px;
        font-size: 1.4rem;
        box-shadow: 0 12px 22px rgba(6,43,92,0.16);
      }

      .partnership-card h4 {
        font-family: "Manrope", sans-serif;
        font-size: 1.25rem;
        margin-bottom: 10px;
      }

      .approach {
        background: var(--navy);
        color: var(--white);
      }

      .approach h2,
      .approach h3,
      .approach h4,
      .approach p {
        color: var(--white);
      }

      .approach-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
      }

      .approach-item {
        position: relative;
        padding: 26px 20px;
        border-radius: 24px;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.09);
      }

      .approach-item::before {
        content: "";
        position: absolute;
        right: -12px;
        top: 50%;
        width: 24px;
        height: 2px;
        background: rgba(214,166,42,0.8);
      }

      .approach-item:last-child::before { display: none; }

      .approach-item .step {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(214,166,42,0.2), rgba(255,255,255,0.08));
        color: var(--gold-soft);
        font-weight: 800;
        margin-bottom: 16px;
        border: 1px solid rgba(214,166,42,0.25);
      }

      .testimonials {
        background: var(--cream);
      }

      .testimonial-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
      }

      .testimonial-card {
        background: var(--white);
        border: 1px solid rgba(6,43,92,0.08);
        border-radius: 22px;
        padding: 28px 22px;
        box-shadow: var(--shadow-soft);
      }

      .stars {
        color: var(--gold);
        letter-spacing: 0.15em;
        margin-bottom: 16px;
      }

      .testimonial-card blockquote {
        margin: 0 0 18px;
        color: var(--text);
        font-size: 1.02rem;
        line-height: 1.8;
      }

      .testimonial-card strong {
        display: block;
        color: var(--navy);
      }

      .faq {
        background: var(--white);
      }

      .faq-wrap {
        max-width: 900px;
        margin: 0 auto;
      }

      .faq-item {
        border: 1px solid rgba(6,43,92,0.08);
        border-radius: 20px;
        background: var(--white);
        box-shadow: var(--shadow-soft);
        overflow: hidden;
        margin-bottom: 16px;
      }

      .faq-question {
        width: 100%;
        background: transparent;
        border: 0;
        text-align: left;
        padding: 22px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--navy);
        font-weight: 800;
        cursor: pointer;
      }

      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.28s ease;
      }

      .faq-answer-inner {
        padding: 0 24px 22px;
      }

      .faq-item.active .faq-answer {
        max-height: 220px;
      }

      .faq-item .toggle-icon {
        color: var(--gold);
        font-size: 1.2rem;
      }

      .cta-band {
        background: linear-gradient(135deg, var(--navy) 0%, var(--royal-blue) 45%, var(--green) 100%);
        position: relative;
        overflow: hidden;
      }

      .cta-band::before,
      .cta-band::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: rgba(214,166,42,0.12);
      }

      .cta-band::before {
        width: 260px;
        height: 260px;
        right: -80px;
        top: -60px;
      }

      .cta-band::after {
        width: 180px;
        height: 180px;
        left: -60px;
        bottom: -30px;
      }

      .cta-content {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        padding: 60px 0;
      }

      .cta-content h2,
      .cta-content p {
        color: var(--white);
      }

      .cta-actions {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
      }

      .cta-actions .btn-outline {
        border-color: rgba(255,255,255,0.3);
        color: var(--white);
      }

      .contact {
        background: var(--cream);
      }

      .contact-grid {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 28px;
      }

      .contact-panel,
      .contact-form {
        background: var(--white);
        border-radius: 28px;
        border: 1px solid rgba(6,43,92,0.08);
        box-shadow: var(--shadow-soft);
      }

      .contact-panel {
        padding: 34px 28px;
      }

      .contact-item {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: 16px 0;
        border-bottom: 1px solid rgba(6,43,92,0.08);
      }

      .contact-item:last-child {
        border-bottom: 0;
      }

      .contact-item .icon {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, rgba(214,166,42,0.18), rgba(8,120,63,0.12));
        border-radius: 12px;
        color: var(--navy);
        box-shadow: inset 0 0 0 1px rgba(6,43,92,0.04);
      }

      .contact-item strong {
        display: block;
        color: var(--navy);
        margin-bottom: 4px;
      }

      .quick-links {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 18px;
      }

      .quick-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 16px;
        border-radius: 12px;
        background: var(--navy);
        color: var(--white);
        font-weight: 700;
      }

      .contact-form {
        padding: 34px 28px;
      }

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

      .field {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
      }

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

      label {
        color: var(--navy);
        font-weight: 800;
        font-size: 0.92rem;
      }

      input, textarea, select {
        width: 100%;
        border: 1px solid rgba(6,43,92,0.12);
        border-radius: 14px;
        background: rgba(248,246,239,0.75);
        padding: 14px 16px;
        color: var(--text);
      }

      textarea {
        min-height: 140px;
        resize: vertical;
      }

      .site-footer {
        background: linear-gradient(180deg, #050d2a 0%, #091a40 100%);
        color: rgba(255,255,255,0.9);
        padding: 54px 0 26px;
        border-top: 1px solid rgba(255,255,255,0.06);
      }

      .footer-shell {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
        gap: 46px;
        align-items: start;
      }

      .footer-column {
        min-width: 0;
      }

      .footer-logo {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 26px;
      }

      .footer-mark {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, #3d5ffb 0%, #3d82ff 100%);
        color: var(--white);
        font-weight: 800;
        font-size: 1.8rem;
        box-shadow: 0 14px 28px rgba(61, 95, 251, 0.35);
      }

      .footer-brand-text {
        line-height: 1.1;
      }

      .footer-brand-text strong {
        display: block;
        font-size: clamp(1.9rem, 2vw, 2.4rem);
        font-weight: 800;
        color: var(--white);
        letter-spacing: -0.04em;
      }

      .footer-brand-text small {
        display: block;
        font-size: 0.68rem;
        color: rgba(255,255,255,0.8);
        letter-spacing: 0.18em;
        text-transform: uppercase;
        margin-top: 4px;
      }

      .footer-brand-block p,
      .footer-social-column p {
        margin: 0;
        max-width: 360px;
        color: rgba(255,255,255,0.8);
        font-size: 1.04rem;
        line-height: 1.8;
      }

      .footer-contact-lines {
        display: grid;
        gap: 8px;
        margin-top: 28px;
        color: rgba(255,255,255,0.9);
        font-size: 1.04rem;
      }

      .footer-column-title {
        margin: 0 0 22px;
        font-family: "Manrope", sans-serif;
        font-size: clamp(1.8rem, 2vw, 2.1rem);
        font-weight: 800;
        letter-spacing: -0.04em;
        color: var(--white);
      }

      .footer-links {
        display: grid;
        gap: 16px;
      }

      .footer-links a {
        color: rgba(255,255,255,0.8);
        font-size: 1.08rem;
        transition: color 0.18s ease;
      }

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

      .highlight-link {
        color: var(--gold) !important;
        font-weight: 800;
      }

      .footer-socials {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 22px;
      }

      .footer-socials a {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(255,255,255,0.08);
        color: var(--white);
        border: 1px solid rgba(255,255,255,0.1);
        transition: transform 0.2s ease, background 0.2s ease;
      }

      .footer-socials a:hover {
        transform: translateY(-2px);
        background: rgba(255,255,255,0.12);
      }

      .footer-apps {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 30px;
      }

      .store-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 12px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.12);
        min-width: 170px;
      }

      .store-btn span {
        color: rgba(255,255,255,0.9);
        font-size: 0.64rem;
        line-height: 1.2;
      }

      .store-btn strong {
        display: block;
        font-size: 0.92rem;
        color: var(--white);
        line-height: 1.2;
      }

      .store-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: rgba(255,255,255,0.1);
        font-size: 1rem;
      }

      .benpro-section-heading {
        max-width: 720px;
      }

      .benpro-blog-area,
      .benpro-courses-area {
        background: linear-gradient(180deg, var(--white), var(--cream-strong));
      }

      .benpro-blog-grid,
      .benpro-course-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
      }

      .benpro-blog-card,
      .benpro-course-card {
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--white);
        box-shadow: var(--shadow-soft);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
      }

      .benpro-blog-card:hover,
      .benpro-course-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow);
      }

      .benpro-blog-image,
      .benpro-course-image {
        display: block;
        aspect-ratio: 1.6;
        overflow: hidden;
        background: var(--lavender);
      }

      .benpro-blog-image img,
      .benpro-course-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
      }

      .benpro-blog-card:hover .benpro-blog-image img,
      .benpro-course-card:hover .benpro-course-image img {
        transform: scale(1.04);
      }

      .benpro-blog-content,
      .benpro-course-content {
        padding: 22px;
      }

      .benpro-blog-meta,
      .benpro-course-details,
      .benpro-course-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 700;
      }

      .benpro-blog-meta a,
      .benpro-course-category {
        color: var(--green);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .benpro-blog-card h3,
      .benpro-course-card h3 {
        margin: 14px 0 20px;
        font-family: "Manrope", sans-serif;
        font-size: 1.15rem;
        line-height: 1.45;
      }

      .benpro-blog-card h3 a,
      .benpro-course-card h3 a {
        color: var(--navy);
      }

      .benpro-blog-card h3 a:hover,
      .benpro-course-card h3 a:hover {
        color: var(--green);
      }

      .benpro-blog-meta time {
        white-space: nowrap;
      }

      .benpro-read-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--navy);
        font-weight: 800;
      }

      .benpro-course-details {
        justify-content: flex-start;
        padding: 12px 0 16px;
        border-bottom: 1px solid var(--border);
      }

      .benpro-course-details i {
        color: var(--gold);
      }

      .benpro-course-footer {
        padding-top: 16px;
      }

      .benpro-course-footer strong {
        color: var(--navy);
        font-size: 1.05rem;
      }

      .benpro-course-footer a {
        color: var(--green);
        font-weight: 800;
      }

      .benpro-section-action {
        display: flex;
        justify-content: center;
        margin-top: 34px;
      }

      .benpro-newsletter-area {
        background: var(--cream);
      }

      .benpro-newsletter-panel,
      .benpro-join-panel {
        display: grid;
        grid-template-columns: 1fr 0.9fr;
        gap: 36px;
        align-items: center;
        padding: 42px;
        border-radius: var(--radius);
        background: var(--premium-gradient);
        box-shadow: var(--shadow);
      }

      .benpro-newsletter-panel h2,
      .benpro-newsletter-panel p,
      .benpro-newsletter-panel .eyebrow,
      .benpro-join-panel h2,
      .benpro-join-panel p,
      .benpro-join-panel .eyebrow {
        color: var(--white);
      }

      .benpro-newsletter-panel .eyebrow,
      .benpro-join-panel .eyebrow {
        background: rgba(255,255,255,0.12);
      }

      .benpro-newsletter-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
      }

      .benpro-newsletter-form input {
        min-width: 0;
        width: 100%;
        min-height: 50px;
        padding: 12px 16px;
        border: 1px solid rgba(6,43,92,0.12);
        border-radius: 10px;
        background: var(--white);
      }

      .benpro-newsletter-error {
        grid-column: 1 / -1;
        color: var(--gold-soft);
        font-weight: 700;
      }

      .benpro-join-panel {
        grid-template-columns: 1fr auto;
        background: linear-gradient(135deg, var(--navy), var(--royal-blue) 58%, var(--green));
      }

      .benpro-join-panel .btn {
        white-space: nowrap;
      }

      @media (max-width: 980px) {
        .benpro-blog-grid,
        .benpro-course-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .benpro-newsletter-panel,
        .benpro-join-panel {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 640px) {
        .benpro-blog-grid,
        .benpro-course-grid {
          grid-template-columns: 1fr;
        }

        .benpro-newsletter-panel,
        .benpro-join-panel {
          padding: 28px 20px;
        }

        .benpro-newsletter-form {
          grid-template-columns: 1fr;
        }

        .benpro-newsletter-form .btn,
        .benpro-join-panel .btn {
          width: 100%;
          white-space: normal;
        }
      }

      .lightbox {
        position: fixed;
        inset: 0;
        display: none;
        place-items: center;
        background: rgba(2,11,26,0.85);
        z-index: 1500;
        padding: 30px;
      }

      .lightbox.active {
        display: grid;
      }

      .lightbox-inner {
        position: relative;
        width: min(1000px, 92vw);
      }

      .lightbox-inner img {
        width: 100%;
        max-height: 80vh;
        object-fit: cover;
        border-radius: 24px;
        border: 4px solid rgba(255,255,255,0.2);
      }

      .lightbox-close {
        position: absolute;
        right: 14px;
        top: 14px;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 50%;
        background: rgba(255,255,255,0.9);
        font-size: 1.4rem;
        cursor: pointer;
        color: var(--navy);
      }

      @keyframes floatCard {
        0% {
          transform: translateY(0px) scale(1);
        }
        50% {
          transform: translateY(-10px) scale(1.02);
        }
        100% {
          transform: translateY(6px) scale(1.01);
        }
      }

      @keyframes galleryReveal {
        0% {
          opacity: 0;
          transform: translateY(24px) scale(0.96);
        }
        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      @media (max-width: 980px) {
        .hero-inner,
        .about-grid,
        .teacher-layout,
        .children-layout,
        .featured-box,
        .contact-grid,
        .footer-grid {
          grid-template-columns: 1fr;
        }

        .card-grid,
        .features-grid,
        .partnership-cards,
        .gallery,
        .testimonial-grid,
        .approach-grid,
        .impact-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .nav-links {
          display: none;
        }

        .mobile-menu-toggle {
          display: grid;
          place-items: center;
        }

        .nav-links.mobile-open {
          position: absolute;
          left: 16px;
          right: 16px;
          top: 80px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          background: var(--white);
          padding: 18px 16px;
          border: 1px solid rgba(6,43,92,0.08);
          border-radius: 18px;
          box-shadow: var(--shadow-soft);
        }

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

      @media (max-width: 640px) {
        .section {
          padding: 80px 0;
        }

        .hero-inner {
          padding-top: 18px;
        }

        .hero-actions,
        .cta-actions,
        .form-grid,
        .teacher-list,
        .card-grid,
        .features-grid,
        .partnership-cards,
        .gallery,
        .testimonial-grid,
        .approach-grid,
        .impact-grid,
        .principles {
          grid-template-columns: 1fr;
        }

        .hero-actions {
          display: grid;
        }

        .hero-actions .btn,
        .cta-actions .btn {
          width: 100%;
        }

        .section-intro {
          flex-direction: column;
          align-items: flex-start;
        }

        .featured-content {
          padding: 28px 20px;
        }

        .contact-panel,
        .contact-form {
          padding: 22px 18px;
        }
      }