/* ============================================================
   About page styles. Loads alongside landing.css on the
   About template only. Selectors that don't conflict with
   landing.css are kept as-is; conflicting ones use the
   .eduk8u-about body scope so they only fire on this page.
   ============================================================ */

/* Announce bar */
.eduk8u-about .announce { background: var(--brand-navy); color: #fff; font-size: 13px; letter-spacing: .01em }
.eduk8u-about .announce__inner { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 20px; text-align: center; flex-wrap: wrap }
.eduk8u-about .announce strong { color: #FFD7A8; font-weight: 600 }
.eduk8u-about .announce a { text-decoration: underline; text-underline-offset: 3px; color: rgba(255,255,255,.8); text-decoration-color: rgba(255,255,255,.35) }
.eduk8u-about .announce a:hover { color: #fff }

/* Section variants */
.eduk8u-about .section-warm { background: var(--warm, #F4EFE6) }
.eduk8u-about .section-paper { background: var(--paper, #FAF7F2) }
.eduk8u-about .section-white { background: #fff }
.eduk8u-about .section-navy { background: var(--brand-navy, #052A65); color: #fff }

/* Section heading scaffold — undo landing.css flex layout for .section-head so
   alignment is purely controlled by text-align (left by default, override per
   section with inline text-align:center or .section-head--center). */
.eduk8u-about .section-head { display: block; text-align: left; margin-bottom: 40px }
.eduk8u-about .section-head > * { max-width: none }
.eduk8u-about .section-head--center,
.eduk8u-about .section-head[style*="center"] { text-align: center }
.eduk8u-about .section-head--center .section-sub,
.eduk8u-about .section-head[style*="center"] .section-sub { margin-left: auto; margin-right: auto }
.eduk8u-about .section-sub { font-size: 16px; color: var(--ink-700, #2C3656); max-width: 56ch; margin-top: 10px; line-height: 1.65 }
.eduk8u-about .section-navy .section-sub { color: rgba(255,255,255,.75) }
.eduk8u-about .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-orange, #DD5426); margin-bottom: 14px }
.eduk8u-about .eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-orange, #DD5426); flex-shrink: 0 }
.eduk8u-about h2.display { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.02em; color: var(--brand-navy, #052A65); margin: 0 }
.eduk8u-about h2.display em { font-style: italic; color: var(--brand-orange, #DD5426) }
.eduk8u-about .section-navy h2.display { color: #fff }
.eduk8u-about .section-navy h2.display em { color: #FFB48A }

/* Buttons (about-specific variants) */
.eduk8u-about .btn-navy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 15px; background: var(--brand-navy, #052A65); color: #fff; transition: background .15s }
.eduk8u-about .btn-navy:hover { background: var(--brand-navy-700, #1F345F) }

/* Breadcrumb on dark hero */
.eduk8u-about .breadcrumb { font-size: 13px; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 8px; margin-bottom: 20px }
.eduk8u-about .breadcrumb a { color: rgba(255,255,255,.7) }
.eduk8u-about .breadcrumb a:hover { color: #fff }
.eduk8u-about .breadcrumb span { color: rgba(255,255,255,.4) }

/* Hero (about-specific) */
.eduk8u-about .hero-about { background: linear-gradient(160deg, var(--brand-navy-900, #0A1428) 0%, var(--brand-navy, #052A65) 45%, var(--brand-navy-700, #1F345F) 100%); overflow: hidden; position: relative; padding: 64px 0 72px }
.eduk8u-about .hero-about::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 500px at 80% -10%, rgba(221,84,38,.28), transparent 55%), radial-gradient(600px 400px at 0% 110%, rgba(255,255,255,.04), transparent 50%); pointer-events: none }
.eduk8u-about .hero-about-grid { display: grid; gap: 48px; align-items: center; position: relative; z-index: 1 }
@media (min-width:1024px) { .eduk8u-about .hero-about-grid { grid-template-columns: 1.1fr .9fr } }

.eduk8u-about .hero-about-copy .eyebrow { color: #FFB48A }
.eduk8u-about .hero-about-copy .eyebrow::before { background: #FFB48A }
.eduk8u-about .hero-about-copy h1 { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: clamp(36px, 5vw, 58px); line-height: 1.05; letter-spacing: -.025em; color: #fff; margin: 0 0 20px }
.eduk8u-about .hero-about-copy h1 em { font-style: italic; color: #FFB48A; font-weight: 600 }
.eduk8u-about .hero-about-copy p { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.82); margin: 0 0 28px; max-width: 52ch }
.eduk8u-about .hero-about-cta { display: flex; flex-wrap: wrap; gap: 12px }
.eduk8u-about .hero-about-trust { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 28px; font-size: 13px; color: rgba(255,255,255,.6) }
.eduk8u-about .hero-about-trust span { display: inline-flex; align-items: center; gap: 6px; font-weight: 500 }
.eduk8u-about .hero-about-trust span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #FFB48A; flex-shrink: 0 }

/* Hero stat cells */
.eduk8u-about .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.eduk8u-about .stat-cell { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 22px 20px; backdrop-filter: blur(8px) }
.eduk8u-about .stat-cell .num { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: 32px; color: #fff; line-height: 1; letter-spacing: -.02em; margin-bottom: 6px }
.eduk8u-about .stat-cell .num em { font-style: italic; color: #FFB48A; font-size: 26px }
.eduk8u-about .stat-cell .lbl { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.45 }

/* Mission section */
.eduk8u-about .mission-grid { display: grid; gap: 48px }
@media (min-width:1024px) { .eduk8u-about .mission-grid { grid-template-columns: .9fr 1.1fr; align-items: start; gap: 64px } }
.eduk8u-about .mission-quote { font-family: var(--font-display, Georgia, serif); font-style: italic; font-size: clamp(20px, 2.4vw, 26px); color: var(--brand-navy, #052A65); line-height: 1.5; border-left: 4px solid var(--brand-orange, #DD5426); padding-left: 24px; margin: 0 }
.eduk8u-about .mission-body p { font-size: 16px; color: var(--ink-700, #2C3656); line-height: 1.7; margin: 0 0 16px }
.eduk8u-about .mission-body p:last-child { margin: 0 }
.eduk8u-about .mission-body strong { color: var(--ink-900, #0B1730); font-weight: 600 }

/* Group companies */
.eduk8u-about .group-grid { display: grid; grid-template-columns: 1fr; gap: 18px }
@media (min-width:640px)  { .eduk8u-about .group-grid { grid-template-columns: 1fr 1fr } }
@media (min-width:1024px) { .eduk8u-about .group-grid { grid-template-columns: repeat(4, 1fr) } }
.eduk8u-about .group-card { background: #fff; border: 1px solid var(--line, #E7E2D6); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 14px; transition: transform .2s, box-shadow .2s, border-color .2s }
.eduk8u-about .group-card:hover { transform: translateY(-3px); box-shadow: 0 4px 14px rgba(11,23,48,.08), 0 12px 32px rgba(11,23,48,.06); border-color: transparent }
.eduk8u-about .group-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-orange-50, #FDF1EB); display: grid; place-items: center; font-size: 22px; flex-shrink: 0 }
.eduk8u-about .group-card h3 { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: 17px; color: var(--brand-navy, #052A65); line-height: 1.25; letter-spacing: -.01em; margin: 0 }
.eduk8u-about .group-card .reg { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-orange, #DD5426); background: var(--brand-orange-50, #FDF1EB); padding: 4px 8px; border-radius: 999px; align-self: flex-start }
.eduk8u-about .group-card p { font-size: 13.5px; color: var(--ink-700, #2C3656); line-height: 1.6; margin: 0 }
.eduk8u-about .group-card .location { font-size: 12px; color: var(--ink-500, #5A6587); display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line, #E7E2D6) }

/* Programme cluster links */
.eduk8u-about .clusters-grid { display: grid; grid-template-columns: 1fr; gap: 14px }
@media (min-width:640px)  { .eduk8u-about .clusters-grid { grid-template-columns: 1fr 1fr } }
@media (min-width:1024px) { .eduk8u-about .clusters-grid { grid-template-columns: repeat(4, 1fr) } }
.eduk8u-about .cluster-link { background: #fff; border: 1px solid var(--line, #E7E2D6); border-radius: 18px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: all .18s; text-decoration: none }
.eduk8u-about .cluster-link:hover { border-color: var(--brand-navy, #052A65); background: var(--brand-navy, #052A65) }
.eduk8u-about .cluster-link:hover .clink-title { color: #fff }
.eduk8u-about .cluster-link:hover .clink-meta { color: rgba(255,255,255,.65) }
.eduk8u-about .cluster-link:hover .clink-arrow { color: #FFB48A; transform: translateX(3px) }
.eduk8u-about .clink-body { flex: 1; min-width: 0 }
.eduk8u-about .clink-qual { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-orange, #DD5426); margin-bottom: 5px }
.eduk8u-about .clink-title { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: 15px; color: var(--brand-navy, #052A65); line-height: 1.3; letter-spacing: -.01em; transition: color .18s }
.eduk8u-about .clink-meta { font-size: 12px; color: var(--ink-500, #5A6587); margin-top: 4px; transition: color .18s }
.eduk8u-about .clink-arrow { color: var(--brand-orange, #DD5426); flex-shrink: 0; transition: color .18s, transform .18s }

/* Markets grid */
.eduk8u-about .markets-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px }
@media (min-width:640px)  { .eduk8u-about .markets-grid { grid-template-columns: repeat(3, 1fr) } }
@media (min-width:1024px) { .eduk8u-about .markets-grid { grid-template-columns: repeat(6, 1fr) } }
.eduk8u-about .market-card { background: #fff; border: 1px solid var(--line, #E7E2D6); border-radius: 18px; padding: 18px 16px; text-align: center; transition: all .15s; text-decoration: none }
.eduk8u-about .market-card:hover { border-color: var(--brand-navy, #052A65); transform: translateY(-2px); box-shadow: 0 1px 3px rgba(11,23,48,.06), 0 2px 8px rgba(11,23,48,.04) }
.eduk8u-about .market-flag { font-size: 30px; margin-bottom: 8px }
.eduk8u-about .market-name { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: 16px; color: var(--brand-navy, #052A65); letter-spacing: -.01em; margin-bottom: 2px }
.eduk8u-about .market-detail { font-size: 12px; color: var(--ink-500, #5A6587) }

/* Accreditations (on navy bg) */
.eduk8u-about .accred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
@media (min-width:640px)  { .eduk8u-about .accred-grid { grid-template-columns: repeat(3, 1fr) } }
@media (min-width:1024px) { .eduk8u-about .accred-grid { grid-template-columns: repeat(4, 1fr) } }
.eduk8u-about .accred-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 20px 18px }
.eduk8u-about .accred-card .aname { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: 18px; color: #fff; letter-spacing: -.01em; margin-bottom: 5px }
.eduk8u-about .accred-card .arole { font-size: 12px; color: rgba(255,255,255,.6); font-weight: 500 }
.eduk8u-about .accred-card .aqual { font-size: 11px; font-weight: 600; color: #FFB48A; letter-spacing: .05em; margin-top: 8px; font-style: italic }

/* Leadership */
.eduk8u-about .leadership-grid { display: grid; gap: 32px; align-items: center }
@media (min-width:1024px) { .eduk8u-about .leadership-grid { grid-template-columns: 1fr 1.5fr; gap: 64px } }
.eduk8u-about .leader-visual { background: linear-gradient(135deg, var(--brand-navy, #052A65) 0%, var(--brand-navy-600, #18315A) 60%, var(--brand-orange, #DD5426) 130%); border-radius: 18px; aspect-ratio: 4/3; display: grid; place-items: center; position: relative; overflow: hidden; box-shadow: 0 4px 14px rgba(11,23,48,.08), 0 12px 32px rgba(11,23,48,.06) }
.eduk8u-about .leader-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 80% -10%, rgba(255,180,100,.25), transparent 55%) }
.eduk8u-about .leader-initial { font-family: var(--font-display, Georgia, serif); font-weight: 800; font-size: 100px; color: rgba(255,255,255,.18); letter-spacing: -.04em; user-select: none; position: relative; z-index: 1 }
.eduk8u-about .leader-badge { position: absolute; bottom: 18px; left: 18px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 600; color: #fff; backdrop-filter: blur(8px) }
.eduk8u-about .leader-copy h3 { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: clamp(22px, 2.8vw, 30px); color: var(--brand-navy, #052A65); letter-spacing: -.015em; margin: 0 0 6px }
.eduk8u-about .leader-title { font-size: 14px; font-weight: 600; color: var(--brand-orange, #DD5426); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 20px }
.eduk8u-about .leader-copy p { font-size: 15.5px; color: var(--ink-700, #2C3656); line-height: 1.7; margin: 0 0 14px }
.eduk8u-about .leader-copy p:last-of-type { margin-bottom: 24px }
.eduk8u-about .leader-copy a.linkedin { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--brand-navy, #052A65); border: 1px solid var(--line, #E7E2D6); border-radius: 999px; padding: 8px 16px; transition: all .15s; background: #fff }
.eduk8u-about .leader-copy a.linkedin:hover { background: var(--brand-navy, #052A65); color: #fff; border-color: var(--brand-navy, #052A65) }

/* Testimonials (compact grid, CPT-driven) */
.eduk8u-about .tgrid { display: grid; grid-template-columns: 1fr; gap: 18px }
@media (min-width:640px)  { .eduk8u-about .tgrid { grid-template-columns: 1fr 1fr } }
@media (min-width:1024px) { .eduk8u-about .tgrid { grid-template-columns: repeat(3, 1fr) } }
.eduk8u-about .tcard { background: #fff; border: 1px solid var(--line, #E7E2D6); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 14px }
.eduk8u-about .tcard-rating { color: #B8842C; font-size: 14px; letter-spacing: 2px }
.eduk8u-about .tcard-quote { font-family: var(--font-display, Georgia, serif); font-style: italic; font-size: 15.5px; line-height: 1.55; color: var(--ink-900, #0B1730); flex: 1; margin: 0 }
.eduk8u-about .tcard-who { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line, #E7E2D6) }
.eduk8u-about .tcard-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-navy, #052A65), var(--brand-orange, #DD5426)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0; overflow: hidden }
.eduk8u-about .tcard-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% }
.eduk8u-about .tcard-name { font-weight: 600; color: var(--brand-navy, #052A65); font-size: 14px; line-height: 1.2 }
.eduk8u-about .tcard-role { font-size: 12px; color: var(--ink-500, #5A6587); margin-top: 2px }

/* FAQ */
.eduk8u-about .faq-list { max-width: 820px; margin: 0 auto }
.eduk8u-about .faq-item { background: #fff; border: 1px solid var(--line, #E7E2D6); border-radius: 12px; padding: 0; margin-bottom: 10px; overflow: hidden }
.eduk8u-about .faq-item summary { cursor: pointer; list-style: none; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; color: var(--brand-navy, #052A65); font-size: 15px; line-height: 1.45 }
.eduk8u-about .faq-item summary::-webkit-details-marker { display: none }
.eduk8u-about .faq-item summary::after { content: "+"; font-size: 22px; color: var(--brand-orange, #DD5426); font-weight: 400; line-height: 1; flex-shrink: 0; transition: transform .2s }
.eduk8u-about .faq-item[open] summary::after { content: "−" }
.eduk8u-about .faq-item .answer { padding: 0 22px 20px; font-size: 15px; color: var(--ink-700, #2C3656); line-height: 1.65 }
.eduk8u-about .faq-item .answer a { color: var(--brand-orange, #DD5426); text-decoration: underline; text-underline-offset: 3px }

/* CTA final (about-specific gradient block — overrides landing.css .cta-final on this page) */
.eduk8u-about .cta-final { background: linear-gradient(135deg, var(--brand-navy-900, #0A1428) 0%, var(--brand-navy, #052A65) 50%, var(--brand-navy-700, #1F345F) 100%); border-radius: 18px; padding: 52px 40px; text-align: center; position: relative; overflow: hidden }
.eduk8u-about .cta-final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 350px at 80% -10%, rgba(221,84,38,.35), transparent 60%); pointer-events: none }
.eduk8u-about .cta-final h2 { font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: clamp(24px, 3vw, 34px); color: #fff; margin: 0 0 12px; position: relative }
.eduk8u-about .cta-final p { font-size: 16px; color: rgba(255,255,255,.78); max-width: 52ch; margin: 0 auto 28px; position: relative; line-height: 1.6 }
.eduk8u-about .cta-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; position: relative }
.eduk8u-about .btn-wa { background: #25D366; color: #fff; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; height: auto; padding: 12px 24px; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1.25; text-align: center; overflow-wrap: anywhere; max-width: 100%; min-width: 0; transition: filter .15s, transform .15s }
.eduk8u-about .btn-wa:hover { filter: brightness(1.07); transform: translateY(-1px) }
.eduk8u-about .cta-contacts { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 32px; position: relative }
@media (min-width:640px) { .eduk8u-about .cta-contacts { grid-template-columns: repeat(3, 1fr) } }
.eduk8u-about .contact-cell { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px 16px; text-align: center }
.eduk8u-about .contact-cell .label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 4px }
.eduk8u-about .contact-cell a { color: #fff; font-size: 15px; font-weight: 600 }
.eduk8u-about .contact-cell a:hover { color: #FFB48A }

@media (max-width:520px) {
  .eduk8u-about .cta-final { padding: 44px 18px; border-radius: 14px }
  .eduk8u-about .cta-btns { flex-direction: column; align-items: stretch; width: 100% }
  .eduk8u-about .btn-wa { width: 100%; padding-left: 16px; padding-right: 16px }
  .eduk8u-about .contact-cell { min-width: 0 }
  .eduk8u-about .contact-cell a { overflow-wrap: anywhere }
}