/* Visual identity drawn from the supplied Chamran school poster. */
:root {
  --navy: #100c40;
  --navy-2: #21195a;
  --blue: #22688b;
  --gold: #d7b64b;
  --green: #085d2d;
  --red: #da202b;
  --cyan: #cceff4;
  --ink: #17183b;
  --muted: #506879;
  --line: #d0e5eb;
  --paper: #f1fafc;
  --shadow: 0 24px 70px rgba(25, 85, 109, .12);
}
[hidden] { display: none !important; }
body { font-size: 16px; }
.site-header { border-bottom: 0; background: #f5fcfdf5; }
.site-header::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(to left, var(--green) 0 33.33%, #fff 33.33% 66.66%, var(--red) 66.66%);
}
.brand img { mix-blend-mode: multiply; }
.brand small { color: #476376; }
.site-header nav a::after { background: var(--red); }
.button { background: var(--green); box-shadow: 0 8px 22px #085d2d1a; border-radius: 9px; }
.button:hover { background: #074721; box-shadow: 0 10px 26px #085d2d24; }
.button-outline, .button-light { background: white; color: var(--navy); box-shadow: none; }
.button-outline:hover, .button-light:hover { background: #e5f5f8; color: var(--navy); }
.hero {
  background: var(--cyan);
  padding: 66px 0 62px;
  isolation: isolate;
}
.hero::before {
  background: radial-gradient(ellipse at 80% 18%, #ffffff80, transparent 58%),
    radial-gradient(ellipse at 4% 92%, #92cce95c, transparent 55%);
  opacity: 1;
  z-index: -1;
}
.hero-grid { grid-template-columns: 1.13fr 1fr; gap: 30px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { color: var(--navy); font-size: .9rem; }
.eyebrow span { background: var(--red); }
.hero h1 {
  font-size: clamp(2.7rem, 4.5vw, 4.35rem);
  line-height: 1.52;
  letter-spacing: -.045em;
  margin: 12px 0 10px;
  font-weight: 900;
}
.school-title, .school-name { display: block; }
.school-name { color: var(--green); }
.school-name > span { color: var(--red); }
.hero-motto {
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  font-weight: 700;
  margin: 0 0 24px;
  padding-right: 13px;
  border-right: 2px solid var(--red);
  color: var(--navy);
}
.lead { font-size: 1rem; line-height: 2.05; color: #345368; margin-bottom: 28px; }
.hero-actions { margin-bottom: 36px; gap: 22px; }
.text-link { border-color: #cf202a; }
.hero-facts { border-top: 1px solid #a9ceda; padding-top: 22px; }
.hero-facts li { border-color: #a9ceda; padding-inline: 19px; }
.hero-facts strong { font-size: 1.08rem; }
.hero-facts span { font-size: .875rem; }
.hero-visual { position: relative; width: 100%; align-self: center; justify-self: center; }
.chamran-portrait {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at center, #000 49%, transparent 74%);
  mask-image: radial-gradient(ellipse 70% 70% at center, #000 49%, transparent 74%);
}
.hero-note {
  position: relative; right: auto; bottom: auto;
  width: max-content; max-width: 100%; margin: -12px auto 0;
  padding: 15px 26px; background: #e4f8fbcc; color: var(--navy);
  border: 1px solid #aad8e5; border-right: 3px solid var(--red);
  border-radius: 8px; box-shadow: 0 10px 26px #34688210;
}
.hero-note span { color: #416579; font-size: .875rem; }
.hero-note strong { font-size: 1rem; margin-top: 3px; }
.section-kicker { color: #286886; font-size: .9rem; }
.intro-copy { border-color: #84c6da; }
.path-section { background: #e2f5fa; color: var(--navy); }
.path-section h2 { color: var(--navy); }
.path-section::after { border-color: #cceaf28a; }
.section-heading > p { color: #506879; }
.steps { border-color: #aad0de; }
.steps li { border-color: #c1dee7; }
.steps span { color: var(--red); font-size: .95rem; }
.steps p { color: #4c6479; font-size: .94rem; }
.steps h3 { color: var(--navy); }
.tag-cloud span { border-radius: 9px; background: #f4fbfd; color: #254d63; }
.tag-cloud span:hover { border-color: #488aa2; background: #e0f3f8; }
.faq-list details { border-radius: 10px; }
.faq-list summary::before { color: var(--green); }
.cta-card { background: #100c40; border-radius: 14px; border-top: 4px solid #a5dbeb; }
.section-kicker.light { color: #a5dceb; }
.cta-card p { color: #d0e5ed; }
.footer-wrap { border-top: 0; }
.brand .school-logo {
  width: 58px;
  height: 72px;
  object-fit: contain;
  border-radius: 0;
  mix-blend-mode: normal;
}
.footer-brand .school-logo { width: 48px; height: 60px; }
.partners-section { padding: 0 0 72px; background: var(--paper); }
.partners-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: 32px 38px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.partners-inner h2 { margin: 0; color: var(--navy); font-size: 1.55rem; }
.partner-logos { display: flex; align-items: center; gap: 28px; }
.partner-logos img {
  width: 108px;
  height: 108px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
}
.registration-page { background: #e9f7fa; }
.form-header { background: #f5fcfd; }
.form-aside { background: #100c40; border-radius: 16px; }
.form-panel { border-radius: 16px; }
.form-aside .eyebrow { color: #cceff4; }
.progress-top strong { color: #abdfeb; }
.progress-track span, .progress-steps li.active > span { background: #abe0ed; }
.progress-steps li.active > span { border-color: #abe0ed; }
.progress-steps li.done > span { background: #258655; border-color: #258655; }
.privacy-note > span { color: #9edbce; }
@media (max-width: 950px) {
  .hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .hero-visual { max-width: 480px; }
  .hero h1 { font-size: clamp(2.9rem, 7vw, 4.5rem); }
  .hero-motto { border: 0; padding: 0; }
  .hero-facts { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .brand .school-logo { width: 48px; height: 60px; }
  .partners-inner { align-items: flex-start; flex-direction: column; padding: 26px; }
  .partner-logos { width: 100%; justify-content: center; }
  .partner-logos img { width: 94px; height: 94px; }
  .hero { padding: 40px 0; }
  .hero h1 { font-size: clamp(2.1rem, 8vw, 3.2rem); line-height: 1.5; letter-spacing: -.03em; }
  .hero-actions { margin-bottom: 26px; }
  .hero-facts { display: flex; justify-content: space-around; gap: 12px; flex-wrap: wrap; }
  .hero-facts strong { font-size: 1rem; }
  .hero-facts span { font-size: .875rem; }
  .hero-note { margin-top: -8px; padding: 12px 20px; }
  .steps li { border-bottom-color: #c1dee7; }
}