/* class-11-arts.css */
/* Aarsh Institute — Class 11 Arts, Session 2026–27
   Design tokens: Ink Black #050505 / Deep Maroon #7a0c0f / Signal Gold #fdbe00 / Paper White #ffffff
   Type: "Playfair Display" (editorial display) + "Inter" (body) + "JetBrains Mono" (utility/stat)
   All selectors are namespaced with c11a- to avoid collision with global site styles. */

.c11a-root,
.c11a-sticky-bar {
  --c11a-black: #050505;
  --c11a-black-soft: #0d0d0d;
  --c11a-maroon: #7a0c0f;
  --c11a-maroon-deep: #4c0709;
  --c11a-gold: #fdbe00;
  --c11a-gold-dim: #c99500;
  --c11a-white: #ffffff;
  --c11a-white-60: rgba(255, 255, 255, 0.6);
  --c11a-white-30: rgba(255, 255, 255, 0.3);
  --c11a-white-12: rgba(255, 255, 255, 0.12);
  --c11a-white-08: rgba(255, 255, 255, 0.08);
  --c11a-glass-bg: rgba(255, 255, 255, 0.05);
  --c11a-glass-border: rgba(253, 190, 0, 0.18);

  --c11a-font-display: 'Playfair Display', 'Georgia', serif;
  --c11a-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --c11a-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --c11a-max: 1240px;
  --c11a-gutter: clamp(20px, 5vw, 96px);
  --c11a-section-pad: clamp(64px, 10vw, 160px);
  --c11a-radius: 18px;
  --c11a-ease: cubic-bezier(0.16, 1, 0.3, 1);

  background: var(--c11a-black);
  color: var(--c11a-white);
  font-family: var(--c11a-font-body);
  overflow-x: hidden;
}

.c11a-root * {
  box-sizing: border-box;
}

.c11a-root img,
.c11a-root svg {
  max-width: 100%;
  display: block;
}

.c11a-root a {
  color: inherit;
  text-decoration: none;
}

.c11a-root button {
  font-family: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

.c11a-root ol,
.c11a-root ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------------------------
   TYPE SCALE / SHARED TEXT ELEMENTS
---------------------------------------------------------------- */
.c11a-eyebrow {
  font-family: var(--c11a-font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c11a-gold);
  margin: 0 0 18px;
}

.c11a-heading-xl {
  font-family: var(--c11a-font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 20ch;
}

.c11a-section {
  position: relative;
  max-width: var(--c11a-max);
  margin: 0 auto;
  padding: var(--c11a-section-pad) var(--c11a-gutter);
  border-top: 1px solid var(--c11a-white-08);
}

.c11a-section__head {
  margin-bottom: clamp(36px, 6vw, 72px);
  max-width: 760px;
}

.c11a-quote {
  font-family: var(--c11a-font-display);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.4;
  color: var(--c11a-white);
  border-left: 2px solid var(--c11a-gold);
  padding-left: clamp(20px, 3vw, 40px);
  max-width: 820px;
  margin: 0 0 clamp(40px, 6vw, 72px);
}

/* ----------------------------------------------------------------
   BUTTONS
---------------------------------------------------------------- */
.c11a-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 999px;
  font-family: var(--c11a-font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.4s var(--c11a-ease), box-shadow 0.4s var(--c11a-ease);
}

.c11a-btn--gold {
  background: var(--c11a-gold);
  color: var(--c11a-black);
  box-shadow: 0 0 0 rgba(253, 190, 0, 0);
}

.c11a-btn--gold:hover {
  box-shadow: 0 8px 30px rgba(253, 190, 0, 0.35);
}

.c11a-btn--ghost {
  border: 1px solid var(--c11a-white-30);
  color: var(--c11a-white);
}

.c11a-btn--ghost:hover {
  border-color: var(--c11a-gold);
  color: var(--c11a-gold);
}

.c11a-btn--large {
  padding: 20px 44px;
  font-size: 14px;
}

.c11a-btn--small {
  padding: 12px 22px;
  font-size: 12px;
}

/* ----------------------------------------------------------------
   GLASS CARD (shared)
---------------------------------------------------------------- */
.c11a-glass-card {
  background: var(--c11a-glass-bg);
  border: 1px solid var(--c11a-glass-border);
  border-radius: var(--c11a-radius);
  padding: clamp(24px, 3vw, 34px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.5s var(--c11a-ease), border-color 0.5s var(--c11a-ease);
}

.c11a-glass-card:hover {
  transform: translateY(-6px);
  border-color: var(--c11a-gold);
}

.c11a-glass-card h3 {
  font-family: var(--c11a-font-display);
  font-size: 20px;
  margin: 0 0 10px;
}

.c11a-glass-card p {
  color: var(--c11a-white-60);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.c11a-glass-card .c11a-counter {
  font-family: var(--c11a-font-display);
  font-size: 44px;
  color: var(--c11a-gold);
}

.c11a-glass-card__suffix {
  font-family: var(--c11a-font-display);
  font-size: 44px;
  color: var(--c11a-gold);
}

/* ----------------------------------------------------------------
   SCROLL REVEAL
---------------------------------------------------------------- */
.c11a-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--c11a-ease), transform 0.9s var(--c11a-ease);
}

.c11a-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .c11a-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ----------------------------------------------------------------
   1. HERO
---------------------------------------------------------------- */
.c11a-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(100px, 14vh, 160px) var(--c11a-gutter) 80px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(122, 12, 15, 0.5), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(122, 12, 15, 0.35), transparent 55%),
    var(--c11a-black);
  overflow: hidden;
}

.c11a-hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.c11a-hero__constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.c11a-star-line-group line {
  stroke: var(--c11a-gold-dim);
  stroke-width: 0.6;
  opacity: 0.35;
}

.c11a-star-group circle {
  fill: var(--c11a-gold);
}

.c11a-hero__glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 190, 0, 0.12), transparent 70%);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 0.3s ease-out, top 0.3s ease-out;
}

.c11a-hero__content {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.c11a-hero__headline {
  font-family: var(--c11a-font-display);
  font-weight: 700;
  font-size: clamp(38px, 6.4vw, 84px);
  line-height: 1.03;
  letter-spacing: -0.015em;
  margin: 0 0 28px;
}

.c11a-hero__accent {
  color: var(--c11a-gold);
}

.c11a-hero__subhead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--c11a-white-60);
  max-width: 640px;
  margin: 0 0 40px;
}

.c11a-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 64px;
}

.c11a-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
  margin: 0;
  padding-top: 32px;
  border-top: 1px solid var(--c11a-white-12);
}

.c11a-hero__stat dt {
  font-family: var(--c11a-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c11a-white-60);
  margin-bottom: 6px;
}

.c11a-hero__stat dd {
  font-family: var(--c11a-font-display);
  font-size: 34px;
  color: var(--c11a-gold);
  margin: 0;
}

.c11a-hero__scrollcue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1;
}

.c11a-hero__scrollcue span {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--c11a-gold), transparent);
  animation: c11a-scrollcue 2s ease-in-out infinite;
}

.c11a-hero__scrollcue p {
  font-family: var(--c11a-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c11a-white-60);
  margin: 0;
}

@keyframes c11a-scrollcue {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ----------------------------------------------------------------
   2. WHY ARTS
---------------------------------------------------------------- */
.c11a-why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.c11a-why__grid .c11a-glass-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ----------------------------------------------------------------
   3. CAREER TIMELINE
---------------------------------------------------------------- */
.c11a-timeline__rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
}

.c11a-timeline__rail::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--c11a-gold), var(--c11a-maroon));
  opacity: 0.5;
}

.c11a-timeline__stop {
  position: relative;
  padding-top: 40px;
}

.c11a-timeline__marker {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--c11a-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c11a-black);
  background: var(--c11a-gold);
  padding: 4px 10px;
  border-radius: 999px;
}

.c11a-timeline__stop h3 {
  font-family: var(--c11a-font-display);
  font-size: 19px;
  margin: 0 0 8px;
}

.c11a-timeline__stop p {
  font-size: 14px;
  color: var(--c11a-white-60);
  line-height: 1.55;
  margin: 0;
}

/* ----------------------------------------------------------------
   4. CAREER PATHS
---------------------------------------------------------------- */
.c11a-paths__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--c11a-white-08);
  border: 1px solid var(--c11a-white-08);
}

.c11a-path-card {
  background: var(--c11a-black-soft);
  padding: 30px 26px;
  transition: background 0.4s var(--c11a-ease);
}

.c11a-path-card:hover,
.c11a-path-card:focus-visible {
  background: linear-gradient(160deg, var(--c11a-maroon-deep), var(--c11a-black-soft));
  outline: none;
}

.c11a-path-card__num {
  display: block;
  font-family: var(--c11a-font-mono);
  font-size: 12px;
  color: var(--c11a-gold);
  margin-bottom: 18px;
}

.c11a-path-card__title {
  font-family: var(--c11a-font-display);
  font-size: 22px;
  margin: 0 0 10px;
}

.c11a-path-card__desc {
  font-size: 14px;
  color: var(--c11a-white-60);
  line-height: 1.55;
  margin: 0;
}

/* ----------------------------------------------------------------
   5–12. DEPARTMENTS
---------------------------------------------------------------- */
.c11a-departments__list {
  display: flex;
  flex-direction: column;
}

.c11a-dept-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--c11a-white-08);
}

.c11a-dept-card:first-child {
  border-top: none;
}

.c11a-dept-card__tag {
  display: block;
  font-family: var(--c11a-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c11a-gold);
  margin-bottom: 8px;
}

.c11a-dept-card__meta h3 {
  font-family: var(--c11a-font-display);
  font-size: 26px;
  margin: 0 0 8px;
}

.c11a-dept-card__focus {
  font-size: 12px;
  color: var(--c11a-white-60);
  font-family: var(--c11a-font-mono);
}

.c11a-dept-card p {
  color: var(--c11a-white-60);
  font-size: 15px;
  line-height: 1.65;
  align-self: center;
  margin: 0;
  max-width: 60ch;
}

/* ----------------------------------------------------------------
   13/23/26. GENERIC GLASS GRIDS (classroom, material, scholarship)
---------------------------------------------------------------- */
.c11a-classroom__grid,
.c11a-material__grid,
.c11a-scholarship__grid,
.c11a-clat-cuet__grid,
.c11a-upsc__grid,
.c11a-parent-dash__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

/* ----------------------------------------------------------------
   14. DEBATE LAB
---------------------------------------------------------------- */
.c11a-debate__lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--c11a-white-60);
  max-width: 760px;
  margin: 0 0 40px;
}

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

.c11a-debate__item {
  border-left: 2px solid var(--c11a-gold);
  padding-left: 18px;
}

.c11a-debate__item h4 {
  font-family: var(--c11a-font-display);
  font-size: 18px;
  margin: 0 0 6px;
}

.c11a-debate__item p {
  color: var(--c11a-white-60);
  font-size: 14px;
  margin: 0;
}

/* ----------------------------------------------------------------
   15. DAILY BLUEPRINT
---------------------------------------------------------------- */
.c11a-blueprint__list li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--c11a-white-08);
}

.c11a-blueprint__list li:first-child {
  border-top: none;
}

.c11a-blueprint__list span {
  font-family: var(--c11a-font-mono);
  font-size: 13px;
  color: var(--c11a-gold);
}

.c11a-blueprint__list p {
  margin: 0;
  color: var(--c11a-white-60);
}

/* ----------------------------------------------------------------
   16. WEEKLY PLANNER
---------------------------------------------------------------- */
.c11a-planner__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.c11a-planner__day {
  background: var(--c11a-glass-bg);
  border: 1px solid var(--c11a-white-08);
  border-radius: 12px;
  padding: 20px;
}

.c11a-planner__day-tag {
  display: block;
  font-family: var(--c11a-font-mono);
  color: var(--c11a-gold);
  font-size: 12px;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.c11a-planner__day p {
  margin: 0;
  font-size: 14px;
  color: var(--c11a-white-60);
}

/* ----------------------------------------------------------------
   17/18. UPSC / CLAT / CUET
---------------------------------------------------------------- */
.c11a-upsc__lead,
.c11a-personality__lead,
.c11a-guidance__lead,
.c11a-parent-dash__lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--c11a-white-60);
  max-width: 760px;
  margin: 0 0 40px;
}

/* ----------------------------------------------------------------
   19. AI DASHBOARD MOCK
---------------------------------------------------------------- */
.c11a-dash-mock {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  background: var(--c11a-glass-bg);
  border: 1px solid var(--c11a-glass-border);
  border-radius: var(--c11a-radius);
  padding: clamp(24px, 3vw, 40px);
}

.c11a-dash-mock__label {
  font-family: var(--c11a-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c11a-white-60);
  margin: 0 0 16px;
}

.c11a-dash-mock__bar {
  background: var(--c11a-white-08);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  height: 30px;
  display: flex;
  align-items: center;
}

.c11a-dash-mock__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--c11a-maroon), var(--c11a-gold));
  font-family: var(--c11a-font-mono);
  font-size: 11px;
  color: var(--c11a-black);
  display: flex;
  align-items: center;
  padding-left: 10px;
  white-space: nowrap;
}

.c11a-dash-mock__sparkline {
  width: 100%;
  height: 80px;
}

.c11a-dash-mock__sparkline polyline {
  fill: none;
  stroke: var(--c11a-gold);
  stroke-width: 2;
}

.c11a-ai-dash__note {
  margin-top: 24px;
  color: var(--c11a-white-60);
  max-width: 60ch;
}

/* ----------------------------------------------------------------
   21. FACULTY
---------------------------------------------------------------- */
.c11a-faculty__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.c11a-faculty-card {
  text-align: left;
}

.c11a-faculty-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--c11a-radius);
  background: linear-gradient(160deg, var(--c11a-maroon-deep), var(--c11a-black-soft));
  margin-bottom: 18px;
  border: 1px solid var(--c11a-glass-border);
}

.c11a-faculty-card h3 {
  font-family: var(--c11a-font-display);
  font-size: 19px;
  margin: 0 0 8px;
}

.c11a-faculty-card p {
  color: var(--c11a-white-60);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* ----------------------------------------------------------------
   22. SUCCESS STORIES
---------------------------------------------------------------- */
.c11a-stories__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.c11a-story-card {
  margin: 0;
  background: var(--c11a-glass-bg);
  border: 1px solid var(--c11a-glass-border);
  border-radius: var(--c11a-radius);
  padding: 28px;
}

.c11a-story-card p {
  font-family: var(--c11a-font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 16px;
}

.c11a-story-card cite {
  font-family: var(--c11a-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--c11a-gold);
  font-style: normal;
}

/* ----------------------------------------------------------------
   27. ADMISSION PROCESS
---------------------------------------------------------------- */
.c11a-admission-process__rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.c11a-admission-process__rail li {
  border-top: 2px solid var(--c11a-gold);
  padding-top: 20px;
}

.c11a-admission-process__rail span {
  display: block;
  font-family: var(--c11a-font-mono);
  color: var(--c11a-gold);
  font-size: 13px;
  margin-bottom: 10px;
}

.c11a-admission-process__rail h3 {
  font-family: var(--c11a-font-display);
  font-size: 19px;
  margin: 0 0 8px;
}

.c11a-admission-process__rail p {
  color: var(--c11a-white-60);
  font-size: 14px;
  margin: 0;
}

/* ----------------------------------------------------------------
   28. FAQ
---------------------------------------------------------------- */
.c11a-faq__list {
  border-top: 1px solid var(--c11a-white-08);
}

.c11a-faq__item {
  border-bottom: 1px solid var(--c11a-white-08);
}

.c11a-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  text-align: left;
  font-family: var(--c11a-font-display);
  font-size: 18px;
}

.c11a-faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.c11a-faq__icon::before,
.c11a-faq__icon::after {
  content: '';
  position: absolute;
  background: var(--c11a-gold);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.c11a-faq__icon::before {
  width: 14px;
  height: 1.5px;
}

.c11a-faq__icon::after {
  width: 1.5px;
  height: 14px;
  transition: transform 0.3s var(--c11a-ease);
}

.c11a-faq__question[aria-expanded="true"] .c11a-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.c11a-faq__answer {
  padding: 0 0 24px;
  max-width: 70ch;
}

.c11a-faq__answer p {
  color: var(--c11a-white-60);
  line-height: 1.65;
  margin: 0;
}

/* ----------------------------------------------------------------
   29. FINAL CTA
---------------------------------------------------------------- */
.c11a-final-cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(122, 12, 15, 0.5), transparent 60%);
}

.c11a-final-cta .c11a-eyebrow {
  text-align: center;
}

.c11a-final-cta__headline {
  font-family: var(--c11a-font-display);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.15;
  max-width: 18ch;
  margin: 0 0 20px;
}

.c11a-final-cta__sub {
  color: var(--c11a-white-60);
  font-size: 17px;
  margin: 0 0 40px;
}

/* ----------------------------------------------------------------
   30. STICKY ADMISSION BAR
---------------------------------------------------------------- */
.c11a-sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(20px, 5vw, 48px);
  background: rgba(5, 5, 5, 0.85);
  border-top: 1px solid var(--c11a-glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.c11a-sticky-bar__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.c11a-sticky-bar__text strong {
  font-family: var(--c11a-font-display);
  font-size: 15px;
}

.c11a-sticky-bar__text span {
  font-family: var(--c11a-font-mono);
  font-size: 11px;
  color: var(--c11a-white-60);
}

.c11a-sticky-bar__actions {
  display: flex;
  gap: 12px;
}

/* ----------------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------------- */
@media (max-width: 900px) {
  .c11a-timeline__rail,
  .c11a-admission-process__rail {
    grid-template-columns: repeat(2, 1fr);
  }

  .c11a-timeline__rail::before {
    display: none;
  }

  .c11a-dept-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .c11a-dash-mock {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .c11a-timeline__rail,
  .c11a-admission-process__rail {
    grid-template-columns: 1fr;
  }

  .c11a-blueprint__list li {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .c11a-sticky-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .c11a-sticky-bar__actions {
    justify-content: center;
  }
}

/* ----------------------------------------------------------------
   FOCUS VISIBILITY (accessibility)
---------------------------------------------------------------- */
.c11a-root a:focus-visible,
.c11a-root button:focus-visible,
.c11a-root [tabindex]:focus-visible {
  outline: 2px solid var(--c11a-gold);
  outline-offset: 3px;
}



/* ==========================================================
   ADMISSION SECTION
========================================================== */

.contact-wrap{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:50px;
    margin-top:55px;
    align-items:start;
}

/* FORM */

.class5-form{

    background:#111;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:42px;

}

.class5-field{

    display:flex;
    flex-direction:column;
    margin-bottom:22px;

}

.class5-field label{

    color:#fff;
    font-weight:600;
    margin-bottom:10px;

}

.class5-field input,
.class5-field textarea{

    width:100%;
    background:#1a1a1a;
    color:#fff;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:16px 18px;
    transition:.3s;

}

.class5-field textarea{

    resize:vertical;
    min-height:150px;

}

.class5-field input::placeholder,
.class5-field textarea::placeholder{

    color:#888;

}

.class5-field input:focus,
.class5-field textarea:focus{

    outline:none;
    border-color:#FDBE00;
    box-shadow:0 0 0 4px rgba(253,190,0,.12);

}

.class5-form-note{

    color:#bdbdbd;
    line-height:1.8;
    margin-bottom:25px;
    font-size:.93rem;

}

/* BUTTON */

.class5-btn{

    width:100%;
    background:#FDBE00;
    color:#000;
    border:none;
    border-radius:16px;
    padding:18px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.35s;

}

.class5-btn:hover{

    transform:translateY(-3px);
    box-shadow:0 18px 45px rgba(253,190,0,.28);

}

#formMessage{

    margin-top:18px;
    text-align:center;
    font-weight:500;

}

/* RIGHT SIDE */

.contact-info__row{

    display:flex;
    gap:18px;
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:20px;
    margin-bottom:18px;

}

.contact-info__icon{

    width:56px;
    height:56px;
    background:#FDBE00;
    color:#000;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    flex-shrink:0;

}

.contact-info__title{

    color:#fff;
    font-size:18px;
    font-weight:700;
    margin-bottom:6px;

}

.contact-info__text{

    color:#cfcfcf;
    line-height:1.7;

}

.contact-info__text a{

    color:#fff;
    text-decoration:none;

}

.contact-info__text a:hover{

    color:#FDBE00;

}

/* MAP */

.map-embed{

    overflow:hidden;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    margin-top:20px;

}

.map-embed iframe{

    width:100%;
    height:290px;
    border:none;
    display:block;

}

/* MOBILE */

@media(max-width:992px){

.contact-wrap{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.class5-form{

padding:26px;

}

.map-embed iframe{

height:220px;

}

}



/* ==========================================
THANK YOU POPUP
========================================== */

.thankyou-modal{

position:fixed;
inset:0;
display:none;
justify-content:center;
align-items:center;
background:rgba(0,0,0,.82);
backdrop-filter:blur(8px);
padding:20px;
z-index:99999;

}

.thankyou-modal.show{

display:flex;
animation:popupFade .35s ease;

}

.thankyou-box{

width:100%;
max-width:560px;
background:#111;
border-radius:24px;
padding:42px;
text-align:center;
border:1px solid rgba(253,190,0,.18);

}

.thankyou-icon{

width:90px;
height:90px;
margin:auto auto 22px;
background:#FDBE00;
color:#000;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:40px;
font-weight:700;

}

.thankyou-box h3{

color:#fff;
font-size:2rem;
margin-bottom:15px;

}

.thankyou-box p{

color:#d0d0d0;
line-height:1.8;
margin-bottom:28px;

}

.thankyou-actions{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
margin-bottom:28px;

}

.thankyou-btn{

display:flex;
justify-content:center;
align-items:center;
padding:14px;
border-radius:14px;
text-decoration:none;
font-weight:600;
color:#fff;
transition:.3s;

}

.thankyou-btn:hover{

transform:translateY(-3px);

}

.whatsapp{

background:#25D366;

}

.instagram{

background:#E4405F;

}

.facebook{

background:#1877F2;

}

.youtube{

background:#FF0000;

}

.thankyou-close{

width:100%;
background:#FDBE00;
color:#000;
border:none;
padding:16px;
border-radius:14px;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:.3s;

}

.thankyou-close:hover{

transform:translateY(-2px);

}

@keyframes popupFade{

from{

opacity:0;
transform:scale(.96);

}

to{

opacity:1;
transform:scale(1);

}

}

@media(max-width:768px){

.thankyou-box{

padding:28px 22px;

}

.thankyou-actions{

grid-template-columns:1fr;

}

.thankyou-icon{

width:72px;
height:72px;
font-size:34px;

}

.thankyou-box h3{

font-size:1.6rem;

}

}

/* ==========================================================
   EXPLORE OTHER PROGRAMS
========================================================== */

.c11-related-programs{

    margin:120px auto;
    max-width:1400px;
    padding:0 20px;

}

.c11-section-head{

    text-align:center;
    max-width:800px;
    margin:0 auto 60px;

}

.c11-eyebrow{

    color:#FDBE00;
    font-size:.9rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:14px;

}

.c11-section-head h2{

    font-size:clamp(2rem,4vw,3.4rem);
    color:#fff;
    margin-bottom:18px;
    line-height:1.2;

}

.c11-section-head p{

    color:#bdbdbd;
    line-height:1.8;
    font-size:1.05rem;

}

/* ========================= */

.c11-related-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;

}

/* ========================= */

.c11-related-card{

    position:relative;
    overflow:hidden;
    display:block;
    text-decoration:none;
    background:linear-gradient(180deg,#171717,#0d0d0d);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:35px;
    transition:.4s;

}

.c11-related-card::before{

    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#FDBE00;
    transform:scaleX(0);
    transition:.4s;

}

.c11-related-card:hover{

    transform:translateY(-8px);
    border-color:rgba(253,190,0,.35);
    box-shadow:0 25px 60px rgba(0,0,0,.45);

}

.c11-related-card:hover::before{

    transform:scaleX(1);

}

/* ========================= */

.c11-related-tag{

    display:inline-flex;
    padding:8px 16px;
    border-radius:100px;
    background:rgba(253,190,0,.12);
    color:#FDBE00;
    font-size:.82rem;
    font-weight:700;
    margin-bottom:22px;

}

.c11-related-card h3{

    color:#fff;
    font-size:1.75rem;
    margin-bottom:18px;
    line-height:1.3;

}

.c11-related-card p{

    color:#bfbfbf;
    line-height:1.8;
    margin-bottom:28px;

}

.c11-related-link{

    display:inline-flex;
    align-items:center;
    color:#FDBE00;
    font-weight:700;
    transition:.3s;

}

.c11-related-card:hover .c11-related-link{

    transform:translateX(8px);

}

/* ========================= */

@media(max-width:992px){

.c11-related-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.c11-related-programs{

margin:80px auto;

}

.c11-related-card{

padding:28px;

}

.c11-related-card h3{

font-size:1.5rem;

}

}