/* Riyasat Premium — main stylesheet (generated from approved premium homepage) */
  html {
    scroll-behavior: smooth;
  }

  /* ============================================================
     DESIGN TOKENS — type scale, spacing rhythm, elevation.
     Palette is unchanged; only its *distribution* changes.
     ============================================================ */
  .yatharth-page-wrapper {
    --font-display: 'Plus Jakarta Sans', 'Noto Sans Devanagari', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Noto Sans Devanagari', 'Segoe UI', sans-serif;

    /* 8pt spacing scale */
    --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
    --s-5: 48px;  --s-6: 64px;  --s-7: 96px;

    /* Elevation — soft, layered, never a hard border */
    --e-1: 0 1px 2px rgba(16, 12, 10, 0.04), 0 2px 8px rgba(16, 12, 10, 0.04);
    --e-2: 0 2px 4px rgba(16, 12, 10, 0.04), 0 8px 24px rgba(16, 12, 10, 0.07);
    --e-3: 0 8px 16px rgba(16, 12, 10, 0.06), 0 24px 48px rgba(16, 12, 10, 0.10);

    --hairline: #ece8e4;
    --ink: #14100E;
    --ink-soft: #5C5550;
  }

  /* Reset and base styles for the wrapper */
  .yatharth-page-wrapper {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    color: var(--ink-soft);
    background-color: #FFFFFF;
    scroll-behavior: smooth;
  }

  .yatharth-page-wrapper * {
    box-sizing: border-box;
  }

  .yatharth-page-wrapper img {
    max-width: 100%;
  }

  /* --- SCROLLING NOTIFICATION BAR (seamless ticker) --- */
  .scrolling-bar-container {
    /* dark overlay keeps white text >= 4.5:1 over the brand gradient */
    background:
      linear-gradient(rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)),
      linear-gradient(90deg, #FF515A 0%, #FF8C2B 50%, #FA4651 100%);
    color: #FFFFFF;
    padding: 12px 0;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
    z-index: 20;
  }

  .scrolling-content {
    display: flex;
    width: max-content;
    animation: scroll-left 30s linear infinite;
    font-weight: 700;
    font-size: 17px;
  }

  .scrolling-bar-container:hover .scrolling-content,
  .scrolling-bar-container:focus-within .scrolling-content {
    animation-play-state: paused;
  }

  .scrolling-content .scroll-item {
    display: inline-flex;
    align-items: center;
    padding-right: 60px;
    gap: 10px;
  }

  .scrolling-bar-container .banner-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin: 0 10px;
    padding: 10px 0;
  }

  .ticker-paused .scrolling-content {
    animation-play-state: paused;
  }

  .scrolling-bar-container .banner-link:hover,
  .scrolling-bar-container .banner-link:focus-visible {
    text-decoration: underline;
  }

  .scrolling-bar-container svg {
    fill: #FFFFFF;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    flex-shrink: 0;
  }

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

  /* --- HERO SECTION --- */
  .hero-main-content {
    background-color: #f9f9f9;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
  }

  .hero-carousel-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    aspect-ratio: 1920 / 500;
    touch-action: pan-y;
  }

  .carousel-track-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #f9f9f9;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.8s ease-in-out;
  }

  .carousel-slide picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .carousel-slide.active {
    opacity: 1;
    z-index: 2;
  }

  /* Smaller, quieter arrows (owner feedback: previous ones were too big).
     The ::before pseudo keeps a 44px invisible tap target for fingers. */
  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20, 16, 14, 0.35);
    backdrop-filter: blur(4px);
    color: white;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
  }

  .carousel-btn::before {
    content: '';
    position: absolute;
    inset: -8px;
  }

  .carousel-btn:hover,
  .carousel-btn:focus-visible {
    background: rgba(231, 29, 57, 0.92);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
  }

  .prev-btn { left: 20px; }
  .next-btn { right: 20px; }

  .carousel-pause {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.55);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-pause:hover,
  .carousel-pause:focus-visible {
    background: rgba(17, 17, 17, 0.8);
  }

  /* --- SECTION HEADER HELPERS --- */
  .global-section-title {
    font-family: var(--font-display);
    letter-spacing: -0.025em;
    text-align: center;
    font-size: clamp(1.5rem, 4.5vw, 2.2rem);
    color: #111111;
    font-weight: 800;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 12px;
  }

  .global-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #FA4651;
    border-radius: 2px;
  }

  .section-intro-text {
    max-width: 1200px;
    margin: -20px auto 40px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
  }

  /* --- INTRO / STATS SECTION --- */
  .stats-section {
    background-color: #FFFFFF;
    padding: var(--s-7) 20px var(--s-5);
  }

  .stats-layout {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 50px;
    align-items: center;
  }

  .stats-text-side {
    flex: 1;
  }

  .stats-quote-highlight {
    font-family: var(--font-display);
    letter-spacing: -0.03em;
    font-size: clamp(1.55rem, 4.8vw, 2.6rem);
    font-weight: 800;
    color: #e71d39;
    line-height: 1.35;
    margin: 0 0 20px 0;
    position: relative;
    padding-left: 15px;
    border-left: 4px solid #FF8C2B;
  }

  .ias-stats-description {
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
    margin: 0;
  }

  /* --- ENQUIRY FORM SECTION --- */
  .enquiry-section {
    padding: 40px 20px;
    background-color: #FFFFFF;
    scroll-margin-top: 90px;
  }

  .enquiry-gradient-box {
    max-width: 1200px;
    margin: 0 auto;
    background:
      linear-gradient(rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)),
      linear-gradient(135deg, #FF515A 0%, #FF8C2B 100%);
    border-radius: 16px;
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: center;
    box-shadow: 0 10px 30px rgba(255, 81, 90, 0.2);
  }

  .enquiry-text h2 {
    font-family: var(--font-display);
    letter-spacing: -0.025em;
    color: #FFFFFF;
    font-size: clamp(1.5rem, 4.5vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 15px 0;
    line-height: 1.3;
  }

  .enquiry-text p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 30px 0;
  }

  .enquiry-badges {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
  }

  .enquiry-badge-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 700;
  }

  .enquiry-badge-item svg {
    width: 16px;
    height: 16px;
    fill: #FFFFFF;
    flex-shrink: 0;
  }

  .enquiry-direct {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
  }

  .enquiry-direct a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 20px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
  }

  .enquiry-direct a:active { transform: scale(0.97); }

  .enquiry-direct svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    flex-shrink: 0;
  }

  .enquiry-call-link {
    background: #FFFFFF;
    color: #e71d39;
  }

  .enquiry-call-link:hover,
  .enquiry-call-link:focus-visible { background: #fff0f1; }

  .enquiry-wa-link {
    background: #15803D;
    color: #FFFFFF;
  }

  .enquiry-wa-link:hover,
  .enquiry-wa-link:focus-visible { background: #116531; }

  .enquiry-forminator-container {
    width: 100%;
  }

  /* Clipped just past the Zoho Submit button (~424px) so the form's footer/blank
     does not leave empty space below the button — same fix as the popup iframe. */
  .enquiry-forminator-container iframe {
    height: 470px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background: #fff;
  }

  /* --- WHY CHOOSE SECTION --- */
  .why-choose-section {
    padding: var(--s-7) 20px;
    background-color: #FFFFFF;
  }

  .features-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .feature-box {
    width: calc(25% - 15px);
    box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: var(--s-4) var(--s-3);
    text-align: center;
    box-shadow: var(--e-1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .feature-box:hover {
    transform: translateY(-6px);
    box-shadow: var(--e-2);
    border-color: rgba(255, 140, 43, 0.45);
  }

  .feature-icon-wrapper {
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, rgba(255,140,43,0.14), rgba(250,70,81,0.10));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: #FA4651;
  }

  .feature-icon-wrapper svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
  }

  .feature-title {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111111;
    line-height: 1.4;
  }

  /* --- COURSES SECTION --- */
  .courses-section {
    scroll-margin-top: 90px;
    padding: var(--s-7) 20px;
    background-color: #FFFFFF;
  }

  .courses-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .course-card {
    background-color: #FFFFFF;
    border-radius: 16px;
    border: 1px solid var(--hairline);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--e-1);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .course-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--e-3);
  }

  .course-card.popular {
    border: 2px solid #e71d39;
  }

  .course-card.popular::after {
    content: 'Most Popular';
    position: absolute;
    top: 12px;
    right: 12px;
    background: #e71d39;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 20px;
    z-index: 2;
  }

  .course-banner-placeholder {
    height: 210px;
    background-color: #f5f5f5;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .course-banner-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .course-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
  }

  .course-card-title {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    font-size: 1.25rem;
    font-weight: 800;
    color: #111111;
    margin: 0 0 25px 0;
    line-height: 1.4;
    min-height: 54px;
  }


  .course-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: auto;
  }

  .course-btn-view {
    background-color: transparent;
    border: 1px solid #cccccc;
    color: #555555;
    padding: 12px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
  }

  .course-btn-view:hover,
  .course-btn-view:focus-visible {
    background-color: #f9f9f9;
    border-color: #999999;
  }

  .course-btn-enroll {
    background-color: #e71d39;
    border: 1px solid #e71d39;
    color: #FFFFFF;
    padding: 12px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
  }

  .course-btn-enroll:hover,
  .course-btn-enroll:focus-visible {
    background-color: #c8102e;
  }

  .course-btn-whatsapp {
    background-color: #15803D;
    border: 1px solid #15803D;
    color: #FFFFFF;
    padding: 12px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color 0.2s ease;
  }

  .course-btn-whatsapp svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
  }

  .course-btn-whatsapp:hover,
  .course-btn-whatsapp:focus-visible {
    background-color: #116531;
  }

  /* --- RESULTS SECTION (EDITORIAL LAYOUT) --- */
  .why-join-section {
    background-color: #fcfcfc;
    padding: 80px 0;
    border-top: 1px solid #eee;
  }

  .inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .editorial-main-title {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    text-align: center;
    font-size: clamp(1.4rem, 4.8vw, 2.25rem);
    font-weight: 900;
    color: #222;
    margin-bottom: 40px;
    text-transform: uppercase;
  }

  .editorial-main-title span {
    color: #e71d39;
    position: relative;
    display: inline-block;
  }

  .editorial-main-title span::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: rgba(255, 200, 5, 0.55);
    z-index: -1;
  }

  .results-intro-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
    margin: 0 0 40px;
  }

  .results-horizontal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
    gap: 25px;
  }

  .h-profile-card {
    display: flex;
    background: #fff;
    border: 1px solid var(--hairline);
    border-left: 4px solid #e71d39;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--e-1);
    transition: all 0.3s ease;
  }

  .h-profile-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--e-2);
    border-left-color: #FF8C2B;
  }

  .h-profile-img-wrap {
    flex: 0 0 180px;
    background: #f4f4f4;
  }

  .h-profile-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .h-profile-content {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .h-profile-name {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin: 0 0 5px;
  }

  .h-profile-rank {
    font-size: 14px;
    font-weight: 700;
    color: #C8102E;
    margin: 0 0 10px;
    background: rgba(255, 200, 5, 0.18);
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    align-self: flex-start;
  }

  .h-profile-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 15px;
  }

  .h-profile-links {
    display: flex;
    gap: 15px;
    margin-top: auto;
    flex-wrap: wrap;
  }

  .h-profile-links a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #444;
    text-decoration: none;
    transition: color 0.3s;
    padding: 6px 0;
  }

  .h-profile-links a:hover,
  .h-profile-links a:focus-visible {
    color: #e71d39;
  }

  @media (max-width: 600px) {
    /* 44px tap targets with a visible boundary — these two links sit close together */
    .h-profile-links { gap: 12px; }
    .h-profile-links a {
      min-height: 44px;
      padding: 10px 12px;
      background: #f7f7f7;
      border-radius: 8px;
    }
  }

  .h-profile-links svg {
    width: 14px;
    height: 14px;
    fill: #e71d39;
    flex-shrink: 0;
  }

  /* --- RESULT COUNTERS (signature element) ---------------------
     The same numbers that were buried in the results paragraph,
     given room to breathe and counted up on scroll. ------------- */
  .stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
    max-width: 1200px;
    margin: 0 auto var(--s-6);
  }

  .stat-tile {
    background: #FFFFFF;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: var(--s-4) var(--s-2);
    text-align: center;
    box-shadow: var(--e-1);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  }

  .stat-tile:hover {
    transform: translateY(-5px);
    box-shadow: var(--e-2);
  }

  .stat-value {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #e71d39 0%, #FF8C2B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
  }

  .stat-label {
    margin-top: var(--s-1);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  @media (max-width: 700px) {
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
  }

  /* --- SCROLL PROGRESS BAR --- */
  .read-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    z-index: 9999;
    background: linear-gradient(90deg, #e71d39, #FF8C2B);
    transition: width 0.1s linear;
    pointer-events: none;
  }

  /* --- CTA SHEEN SWEEP --- */
  .course-btn-whatsapp,
  .mobile-cta-primary,
  .enquiry-wa-link {
    position: relative;
    overflow: hidden;
  }

  .course-btn-whatsapp::after,
  .mobile-cta-primary::after,
  .enquiry-wa-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    animation: riSheen 4.5s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes riSheen {
    0%, 62%  { left: -120%; }
    82%,100% { left: 130%; }
  }

  /* --- KEN BURNS on card imagery --- */
  .course-banner-placeholder img,
  .testimonial-image-card img {
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .course-card:hover .course-banner-placeholder img,
  .testimonial-image-card:hover img {
    transform: scale(1.055);
  }

  /* --- HERO HEADLINE: word-by-word rise --- */
  .ri-js .word-rise > span {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.7em);
    animation: riWordRise 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  @keyframes riWordRise {
    to { opacity: 1; transform: none; }
  }

  /* --- TESTIMONIALS SECTION --- */
  .testimonials-section {
    padding: 60px 0;
    background-color: #FFFFFF !important;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
  }

  .testimonials-header-row {
    max-width: 1200px;
    margin: 0 auto 30px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 15px;
  }

  .testimonials-header-text {
    flex: 1 1 640px;
  }

  .testimonials-header-row .global-section-title {
    margin-bottom: 18px;
    padding-bottom: 12px;
    text-align: left;
  }

  .testimonials-header-row .global-section-title::after {
    left: 0;
    transform: none;
    width: 60px;
  }

  .testimonials-header-row p {
    font-size: 1.02rem;
    line-height: 1.7;
    color: #555;
    margin: 0;
  }

  .testimonials-nav-controls {
    display: flex;
    gap: 12px;
  }

  .test-nav-btn {
    background: rgba(231, 29, 57, 0.9);
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  }

  .test-nav-btn:hover,
  .test-nav-btn:focus-visible {
    background: #ffff05;
    color: #e71d39;
    transform: scale(1.08);
  }

  .testimonials-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 10px 0 20px;
    padding-left: calc((100vw - 1200px) / 2 + 20px);
    background-color: #FFFFFF;
    touch-action: pan-y;
  }

  @media (max-width: 1240px) {
    .testimonials-marquee-wrapper {
      padding-left: 20px;
    }
  }

  .testimonials-marquee-track {
    display: flex;
    gap: 25px;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    width: max-content;
    will-change: transform;
  }

  .testimonial-image-card {
    width: 380px;
    height: auto;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
  }

  .testimonial-image-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(250, 70, 81, 0.08);
  }

  .testimonial-image-card img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
  }

  /* --- FAQ SECTION --- */
  .faq-section {
    scroll-margin-top: 90px;
    padding: var(--s-7) 20px;
    background-color: #FFFFFF;
  }

  /* Anchored card so the accordion reads centered, not drifting (owner feedback) */
  .faq-wrapper {
    max-width: 850px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid var(--hairline);
    border-radius: 18px;
    padding: var(--s-2) var(--s-4);
    box-shadow: var(--e-1);
  }

  .faq-box:last-child {
    border-bottom: none;
  }

  @media (max-width: 600px) {
    .faq-wrapper { padding: 4px var(--s-2); }
  }

  .faq-box {
    border-bottom: 1px solid #eeeeee;
  }

  .faq-trigger {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
    width: 100%;
    background: none;
    border: none;
    padding: 22px 16px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111111;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.3s ease, color 0.3s ease;
    line-height: 1.4;
    font-family: inherit;
  }

  .faq-trigger:hover,
  .faq-trigger:focus-visible {
    background-color: #fcfcfc;
    color: #e71d39;
  }

  .faq-plus-icon {
    font-size: 1.3rem;
    color: #767676;
    font-weight: 400;
    transition: color 0.3s ease;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .faq-trigger:hover .faq-plus-icon {
    color: #e71d39;
  }

  .faq-content {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.3s ease-out, visibility 0s linear 0.3s;
  }

  .faq-content.open {
    visibility: visible;
    transition: max-height 0.3s ease-out;
  }

  .faq-content p {
    margin: 0;
    padding: 0 16px 22px 16px;
    color: #555555;
    line-height: 1.6;
    font-size: 1rem;
  }

  /* --- STICKY MOBILE CTA BAR --- */
  .mobile-cta-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 10px 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: #ffffff;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12);
  }

  .mobile-cta-bar a {
    text-decoration: none;
    text-align: center;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 12px 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
  }

  .mobile-cta-bar svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex-shrink: 0;
  }

  .mobile-cta-call {
    color: #e71d39;
    border: 2px solid #e71d39;
    background: #fff;
  }

  .mobile-cta-whatsapp {
    color: #fff;
    background: #15803D;
    border: 2px solid #15803D;
  }

  .mobile-cta-primary {
    color: #fff;
    background: #e71d39;
    border: 2px solid #e71d39;
  }

  /* --- RESPONSIVE ADJUSTMENTS --- */
  @media (max-width: 1024px) {
    .stats-layout { flex-direction: column; gap: 35px; }
    .enquiry-gradient-box { grid-template-columns: 1fr; gap: 30px; }
    .feature-box { width: calc(50% - 10px); }
    .courses-grid { grid-template-columns: repeat(2, 1fr); }
    .results-horizontal-grid { grid-template-columns: 1fr; }
    /* desktop 1920x500 banners are still served in this band — keep the box the same shape */
    .hero-carousel-container { aspect-ratio: 1920 / 500; }
  }

  /* RULE (single source of truth for CTA reachability):
     <= 1120px  -> sticky 3-button bar visible, .wa-float hidden.
     >= 1121px  -> header Contact CTA visible, .wa-float visible, bar hidden.
     1120px is exactly where .header-cta switches to display:none, so there is
     no viewport without a Call/WhatsApp/Enquiry path and the two WhatsApp
     entry points never coexist. */
  @media (max-width: 1120px) {
    .mobile-cta-bar { display: grid; }
    /* Spacer goes on <body> so the theme footer clears the bar too, and it scales
       with the real bar height + notch inset instead of a guessed 76px. */
    body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
    .yatharth-page-wrapper { padding-bottom: 0; }
    /* the sticky bar already carries WhatsApp — no floating bubble on phones */
    .wa-float { display: none; }
  }

  @media (max-width: 600px) {
    .hero-carousel-container { aspect-ratio: 1920 / 1080; }

    .scrolling-content { font-size: 15px; }

    .carousel-btn {
      width: 32px;
      height: 32px;
      font-size: 13px;
    }
    .prev-btn { left: 6px; }
    .next-btn { right: 6px; }

    .stats-section { padding: 42px 16px; }
    .stats-quote-highlight { padding-left: 12px; }

    .enquiry-section { padding: 24px 12px; }
    .enquiry-gradient-box { padding: 26px 18px; border-radius: 14px; }
    .enquiry-forminator-container iframe { height: 500px; }

    .why-choose-section,
    .courses-section,
    .faq-section { padding: 42px 16px; }
    .why-join-section { padding: 52px 0; }

    .feature-box { width: calc(50% - 10px); padding: 18px 12px; }
    .feature-title { font-size: 0.92rem; }

    .courses-grid { grid-template-columns: 1fr; }
    .course-card-title { min-height: 0; }
    .course-banner-placeholder { height: auto; aspect-ratio: 16 / 10; }

    .h-profile-card { flex-direction: column; }
    .h-profile-img-wrap { flex: 0 0 auto; height: 300px; }
    .h-profile-img-wrap img { object-fit: contain; background: #ffffff; object-position: top; }
    .h-profile-content { padding: 20px 18px; }

    .testimonial-image-card { width: min(82vw, 320px); }
    .test-nav-btn { width: 44px; height: 44px; font-size: 16px; }

    /* FAQ stays fully readable on mobile — no shrunken text */
    .faq-trigger {
      font-size: 1rem;
      padding: 16px 12px;
      min-height: 48px;
    }
    .faq-plus-icon { font-size: 1.2rem; }
    .faq-content p {
      font-size: 0.95rem;
      padding: 0 12px 18px 12px;
    }
  }

  /* ============================================================
     ANIMATION SYSTEM
     Scroll reveals + entrance + micro-interactions.
     Everything degrades to "visible" if JS never runs.
     ============================================================ */

  /* Elements only hide when JS is confirmed alive (html.ri-js) */
  .ri-js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

  .ri-js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* Staggered children (course cards, feature boxes, topper cards) */
  .ri-js [data-stagger] > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ri-js [data-stagger].is-in > * {
    opacity: 1;
    transform: none;
  }

  .ri-js [data-stagger].is-in > *:nth-child(1) { transition-delay: 0.05s; }
  .ri-js [data-stagger].is-in > *:nth-child(2) { transition-delay: 0.12s; }
  .ri-js [data-stagger].is-in > *:nth-child(3) { transition-delay: 0.19s; }
  .ri-js [data-stagger].is-in > *:nth-child(4) { transition-delay: 0.26s; }
  .ri-js [data-stagger].is-in > *:nth-child(5) { transition-delay: 0.33s; }
  .ri-js [data-stagger].is-in > *:nth-child(6) { transition-delay: 0.40s; }
  .ri-js [data-stagger].is-in > *:nth-child(n+7) { transition-delay: 0.45s; }

  /* Hero entrance on page load */
  @keyframes riFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }

  /* Gated on .ri-js like every other reveal, and 'forwards' only — the hero is the
     LCP element, so it must never start at opacity 0 if the animation is stripped. */
  .ri-js .hero-main-content {
    animation: riFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  /* Section titles: the underline rule draws itself in */
  .ri-js .global-section-title::after {
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  .ri-js .global-section-title.is-in::after {
    transform: translateX(-50%) scaleX(1);
  }

  /* Testimonials heading is left-aligned (no translateX) — restate so the reveal
     transform doesn't drag its underline 30px out of place. */
  .ri-js .testimonials-header-row .global-section-title::after {
    transform: scaleX(0);
    transform-origin: left;
  }

  .ri-js .testimonials-header-row .global-section-title.is-in::after {
    transform: scaleX(1);
  }

  /* Attention pulse on the primary CTA — drives enquiries */
  @keyframes riPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 29, 57, 0.45); }
    50%      { box-shadow: 0 0 0 12px rgba(231, 29, 57, 0); }
  }

  /* Floating WhatsApp bubble (desktop + tablet; mobile uses the bar) */
  .wa-float {
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 9985;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: riWaPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
  }

  @keyframes riWaPop {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
  }

  .wa-float svg {
    width: 30px;
    height: 30px;
    fill: #FFFFFF;
  }

  .wa-float:hover,
  .wa-float:focus-visible {
    transform: scale(1.09);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.55);
  }

  .wa-float::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.55);
    animation: riRipple 2.4s ease-out infinite;
  }

  @keyframes riRipple {
    0%   { transform: scale(1);   opacity: 0.75; }
    100% { transform: scale(1.7); opacity: 0; }
  }

  /* Must sit AFTER .wa-float's display:flex to win the cascade.
     Up to 1120px the sticky bar already carries WhatsApp (see the rule
     documented at the .mobile-cta-bar breakpoint). */
  @media (max-width: 1120px) {
    .wa-float { display: none; }
  }

  /* Card lift refinements */
  .course-card,
  .feature-box,
  .h-profile-card {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
  }

  .course-btn-enroll,
  .course-btn-whatsapp,
  .mobile-cta-bar a {
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  }

  .course-btn-enroll:active,
  .course-btn-whatsapp:active,
  .mobile-cta-bar a:active {
    transform: scale(0.97);
  }

  /* --- REDUCED MOTION --- */
  @media (prefers-reduced-motion: reduce) {
    /* Reveals must never leave content stuck invisible */
    .ri-js [data-reveal],
    .ri-js [data-stagger] > * {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .ri-js .global-section-title::after { transform: translateX(-50%) scaleX(1); transition: none; }
    .ri-js .testimonials-header-row .global-section-title::after { transform: scaleX(1); }
    .ri-js .hero-main-content { animation: none; }
    .wa-float, .wa-float::after { animation: none; }
    .course-btn-whatsapp::after,
    .mobile-cta-primary::after,
    .enquiry-wa-link::after { animation: none; display: none; }
    .ri-js .word-rise > span { opacity: 1; transform: none; animation: none; }
    .course-card:hover .course-banner-placeholder img,
    .testimonial-image-card:hover img { transform: none; }
    .read-progress { display: none; }
    .scrolling-content { animation: none; }
    /* frozen ticker becomes a plain scrollable strip so all 6 links stay reachable */
    .scrolling-bar-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .scroll-item[aria-hidden="true"] { display: none; }
    .carousel-slide,
    .testimonials-marquee-track,
    .course-card, .feature-box,
    .h-profile-card, .testimonial-image-card,
    #upsc-popup-box { transition: none; }
  }

  /* --- SIDE PANEL POPUP --- */
  /* The popup sits outside .yatharth-page-wrapper, so it needs its own box-sizing */
  #upsc-popup-overlay,
  #upsc-popup-overlay * {
    box-sizing: border-box;
  }

  /* STAGE 1 of the lead funnel — the enquiry form as a SIDE slider that comes in
     from the right at 15s. (Stage 2 is the centred #lg-modal at 40s; stage 3 is the
     exit-intent #lg-sticky.) Kept a side panel deliberately: it does not black out
     the article the way a centre modal does, so the reader can keep reading while it
     is up. On phones it becomes a bottom sheet — see the max-width:767px block. */
  #upsc-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2147483000; /* above header & any page chrome */
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  #upsc-popup-overlay.show {
    display: block;
    opacity: 1;
  }

  #upsc-popup-box {
    background: #ffffff;
    padding: 40px 35px;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(105%);
    width: 100%;
    max-width: min(420px, 94vw);
    height: 100vh;
    height: 100dvh;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
    text-align: left;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }

  #upsc-popup-overlay.show #upsc-popup-box {
    transform: translateX(0);
  }

  #upsc-popup-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 30px;
    font-weight: 300;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e5e0db;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    z-index: 5;
    color: #444;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
  }

  #upsc-popup-close:hover,
  #upsc-popup-close:focus-visible {
    color: #e71d39;
  }

  .upsc-popup-logo {
    max-width: 150px;
    height: auto;
    display: block;
    margin: 0 0 24px 0;
    border-radius: 8px;
  }

  .upsc-popup-heading {
    font-size: 1.45rem;
    font-weight: 800;
    color: #111111;
    margin: 0 0 18px;
    line-height: 1.3;
  }

  /* Contextual course copy + the low-friction CTA row above the form.
     Styled HERE and not in leadgen.css deliberately: the panel is printed on
     every view by footer.php, whereas leadgen.css is enqueued only on single
     posts. Relying on the .ca-btn rules in current-affairs.css would leave these
     as bare blue links on the homepage. The classes are self-sufficient. */
  .upsc-popup-pitch {
    font-size: 15px;
    line-height: 1.6;
    color: #444444;
    margin: 0 0 14px;
  }

  .upsc-popup-link {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 700;
  }

  .upsc-popup-link a {
    color: #e71d39;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .upsc-popup-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
  }

  .upsc-popup-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 44px minimum target, both axes. */
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .upsc-popup-row a svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex: none;
  }

  .upsc-popup-row .ca-btn--call {
    background: #e71d39;
    color: #ffffff;
  }

  .upsc-popup-row .ca-btn--wa {
    background: #ffffff;
    color: #111111;
    border-color: #d4d4d4;
  }

  .upsc-popup-row .ca-btn--wa:hover,
  .upsc-popup-row .ca-btn--wa:focus-visible {
    background: #f4f4f4;
  }

  @media (prefers-reduced-motion: reduce) {
    .upsc-popup-row a { transition: none; }
  }

  /* The Zoho form's Submit sits ~424px down; everything below it in the form page
     is Zoho footer/branding/whitespace. Clipping the iframe just past Submit is what
     removes the big blank area under the button (#12.3). */
  #upsc-popup-box iframe {
    height: 470px;
    width: 100%;
    border: none;
  }

  @media (max-width: 600px) {
    #upsc-popup-box { padding: 30px 20px; }
  }

  /* --- POPUP ON A PHONE: BOTTOM SHEET, NOT A FULL-COVER PANEL ---

     The panel used to be suppressed entirely below 768px, on the reasoning that
     a 100dvh side panel on a 375px screen simply IS the article — it covers the
     thing the reader came for and the only way out is a close button. That
     reasoning was right about the panel and wrong about the conclusion: the fix
     is a panel that does not cover the article, not no panel at all. Suppressing
     it was costing every lead from the majority of the site's traffic.

     So below 768px it becomes a bottom sheet:
       - anchored to the bottom edge, rising rather than sliding in from the side;
       - capped at 70vh, so at least 30% of the article stays visible and the
         reader can see they are still on the page they chose;
       - the overlay above it is a tap target that closes (the controller already
         closes on a click landing on the overlay itself), which is the gesture
         people actually reach for before hunting for an X;
       - the close button keeps its 44px box and is pinned inside the sheet;
       - the Zoho iframe is shortened so the form's first fields sit above the
         fold of the sheet instead of below it.
     Escape and the browser back-equivalent are handled by the controller and are
     unchanged. Body scroll is locked only while the sheet is open. */
  @media (max-width: 767px) {
    /* Bottom sheet, not a right slider: the box pins itself to the bottom edge and
       rises from below. Taller than before (90vh) so the whole enquiry form — up to
       and including its Submit button — sits above the fold and the reader never has
       to scroll the sheet to send it (#12 mobile-popup fix). */
    #upsc-popup-box {
      top: auto;
      bottom: 0;
      right: 0;
      left: 0;
      width: 100%;
      max-width: none;
      height: auto;
      max-height: 90vh;
      max-height: 90dvh;
      padding: 20px 18px calc(16px + env(safe-area-inset-bottom, 0px));
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.22);
      transform: translateY(100%);
      /* The sheet scrolls; the page behind it must not scroll with it. */
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    #upsc-popup-overlay.show #upsc-popup-box {
      transform: translateY(0);
    }

    /* Stays reachable while the sheet's own content scrolls under it. */
    #upsc-popup-close {
      position: sticky;
      top: 0;
      float: right;
      margin: -6px -4px 0 0;
      background: rgba(255, 255, 255, 0.92);
      border-radius: 50%;
    }

    .upsc-popup-logo { max-height: 34px; }

    .upsc-popup-heading {
      font-size: 1.05rem;
      line-height: 1.35;
      padding-right: 44px;
    }

    /* Single-column on a phone, so the form runs a little taller than on desktop —
       enough to show every field and the Submit button with no inner scroll, and
       still clipping the Zoho footer blank below it (#12.3). The sheet is height:auto
       so it hugs this and never leaves empty space under the button. */
    #upsc-popup-box iframe { height: 500px; }
  }

  /* prefers-reduced-motion: present the sheet in place rather than sliding it
     up. The controller adds .show synchronously in that case, so the two cannot
     disagree about the first frame. */
  @media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    #upsc-popup-box {
      transition: none;
      transform: translateY(0);
    }
  }

/* ============================================================
   SITE CHROME — header, nav, footer, modal (theme-level)
   ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #14100E;
  color: #fff;
  padding: 10px 16px;
  z-index: 100000;
}
.skip-link:focus { left: 8px; top: 8px; }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9998;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid #ece8e4;
}

/* Blur lives on an overlay: backdrop-filter on the header itself makes it a
   containing block and collapses the fixed mobile nav panel (P0). */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(10px);
}

/* WP admin bar offset for logged-in users. Above 600px the admin bar is
   position:fixed and fills the offset, so the header sits below it. */
body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* At <=600px WordPress switches the admin bar to position:absolute, so it scrolls
   AWAY with the page. Keeping the 46px offset then leaves a 46px gap at the top of
   the viewport once scrolled — the article text shows through it, between the header
   and the read-progress bar. So drop the offset here: the header pins to top:0, the
   admin bar sits over it initially and scrolls off, and no gap is ever exposed.
   Only affects logged-in admins; logged-out visitors never carry .admin-bar. */
@media (max-width: 600px) { body.admin-bar .site-header { top: 0; } }
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  height: 72px;
}
.header-spacer { height: 72px; }
.header-logo img { height: 44px; width: auto; display: block; border-radius: 6px; }

.main-nav { margin-left: auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav-list > li { position: relative; }
.nav-list a, .nav-parent {
  font-family: 'Plus Jakarta Sans', 'Noto Sans Devanagari', sans-serif;
  font-size: 0.88rem; font-weight: 600; color: #14100E;
  text-decoration: none; background: none; border: none; cursor: pointer;
  padding: 10px 11px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px;
}
.nav-parent::after { content: '▾'; font-size: 0.7em; opacity: 0.55; }
.nav-list a:hover, .nav-parent:hover, .nav-list a:focus-visible, .nav-parent:focus-visible { background: #FFF1EC; color: #e71d39; }
/* Sections with a real hub page use <a class="nav-parent"> + this chevron button, so the
   anchor can navigate while the chevron opens the submenu. On desktop the dropdown opens on
   hover/focus-within, so the chevron is redundant and hidden. */
.nav-toggle { display: none; background: none; border: 0; padding: 0; cursor: pointer; }
.nav-portal { color: #e71d39 !important; }

.dropdown {
  list-style: none; margin: 0; padding: 8px;
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: #fff; border: 1px solid #ece8e4; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16,12,10,0.12);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 30;
}
.nav-wide .dropdown { max-height: 60vh; overflow-y: auto; }
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown.open > .dropdown {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.dropdown a { display: block; padding: 9px 12px; font-weight: 500; }

/* Nested submenu — Secure > Secure Prelims > (English / Hindi). Desktop: flies out
   to the right of its parent row. Mobile rules below flip it to an inline accordion. */
.dropdown .has-sub { position: relative; }
.sub-parent {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px; font-weight: 500; font: inherit; color: inherit;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.sub-parent::after { content: '\203A'; font-size: 1.05em; opacity: 0.55; }
.sub-parent:hover, .sub-parent:focus-visible { background: #FFF1EC; color: #e71d39; }
.subdropdown {
  list-style: none; margin: 0; padding: 8px;
  position: absolute; top: -8px; left: 100%; min-width: 240px;
  background: #fff; border: 1px solid #ece8e4; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16,12,10,0.12);
  opacity: 0; visibility: hidden; transform: translateX(6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 31;
}
.has-sub:hover > .subdropdown,
.has-sub:focus-within > .subdropdown,
.has-sub.open > .subdropdown {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.subdropdown a { display: block; padding: 9px 12px; font-weight: 500; }

.header-cta {
  border: none; cursor: pointer;
  /* dark overlay keeps white label >= 4.5:1 across the whole gradient
     (orange end #FF8C2B alone is only ~2.3:1) — brand hues unchanged */
  background:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    linear-gradient(135deg, #e71d39 0%, #FF8C2B 100%);
  color: #fff; font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 0.88rem;
  padding: 11px 20px; border-radius: 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.header-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(231,29,57,0.3); }

.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 10px; }
.hamburger span { display: block; width: 22px; height: 2px; background: #14100E; margin: 5px 0; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }

@media (max-width: 1120px) {
  .hamburger { display: block; }
  .main-nav {
    position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
    background: #fff; overflow-y: auto; padding: 12px 16px 90px;
    transform: translateX(100%);
    /* visibility keeps the off-screen panel out of the tab order; delayed so the slide-out still plays */
    visibility: hidden;
    transition: transform .3s cubic-bezier(0.22,1,0.36,1), visibility 0s linear .3s;
  }
  .main-nav.open {
    transform: none;
    visibility: visible;
    transition: transform .3s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0s;
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a, .nav-parent { width: 100%; padding: 14px 10px; font-size: 1rem; justify-content: space-between; }
  /* Hub sections: the anchor navigates, the chevron opens. Both need a 44px target, so the
     row becomes a flex pair and the anchor's own ▾ is dropped to avoid two chevrons. */
  .has-dropdown.has-hub { display: flex; flex-wrap: wrap; align-items: center; }
  .has-dropdown > a.nav-parent { flex: 1; width: auto; }
  .has-dropdown > a.nav-parent::after { content: none; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; min-height: 44px; flex: 0 0 44px; border-radius: 8px; color: #14100E;
  }
  .nav-toggle::after { content: '▾'; font-size: 0.85rem; opacity: 0.55; transition: transform .18s ease; }
  .nav-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  .nav-toggle:hover, .nav-toggle:focus-visible { background: #FFF1EC; color: #e71d39; }
  .has-dropdown > .dropdown { flex: 1 0 100%; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-left: 2px solid #FFE3D8;
    border-radius: 0; margin-left: 10px; display: none;
  }
  .has-dropdown.open > .dropdown { display: block; }
  /* Nested submenu becomes an inline accordion on mobile (no right-hand flyout). */
  .sub-parent { min-height: 44px; }
  .subdropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-left: 2px solid #FFE3D8;
    border-radius: 0; margin-left: 10px; min-width: 0; display: none;
  }
  .has-sub.open > .subdropdown { display: block; }
  .header-cta { display: none; }
  body.nav-open { overflow: hidden; }
  .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Footer */
.site-footer { background: #14100E; color: #D8D2CC; margin-top: 64px; }
.footer-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 32px;
  padding: 56px 20px 40px;
}
.footer-brand p { font-size: 0.92rem; line-height: 1.65; margin: 14px 0 0; }
.footer-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0 0 9px; font-size: 0.92rem; }
.footer-col a { color: #D8D2CC; text-decoration: none; }
.footer-col a:hover, .footer-col a:focus-visible { color: #FF8C2B; }
.footer-address { line-height: 1.6; }
.footer-social { display: flex; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.footer-social a {
  color: #fff; text-decoration: none; font-size: 0.85rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.25); padding: 7px 14px; border-radius: 20px;
}
.footer-social a:hover { border-color: #FF8C2B; color: #FF8C2B; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); text-align: center; padding: 18px 20px; font-size: 0.85rem; }
.footer-bottom p { margin: 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; padding-top: 40px; } }

/* Contact modal */
.contact-modal { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: center; justify-content: center; }
.contact-modal[hidden] { display: none; }
.contact-modal-backdrop { position: absolute; inset: 0; background: rgba(16,12,10,0.55); }
.contact-modal-box {
  position: relative; background: #fff; border-radius: 20px;
  padding: 32px 28px; width: min(400px, 92vw);
  box-shadow: 0 24px 64px rgba(16,12,10,0.25);
  text-align: center;
}
.contact-modal-box h2 { font-family: 'Plus Jakarta Sans', sans-serif; margin: 0 0 6px; letter-spacing: -0.02em; color: #14100E; }
.contact-modal-box > p { margin: 0 0 20px; color: #5C5550; }
.contact-modal-box a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; margin: 10px 0; border-radius: 12px;
  font-weight: 700; text-decoration: none;
}
.contact-modal-box svg { width: 17px; height: 17px; fill: currentColor; }
.contact-modal-call { background: #fff; color: #e71d39; border: 2px solid #e71d39; }
.contact-modal-wa { background: #15803D; color: #fff; }
.contact-modal-enquiry { background: #e71d39; color: #fff; }
.contact-modal-close {
  position: absolute; top: 10px; right: 14px; width: 44px; height: 44px;
  background: none; border: none; font-size: 26px; color: #767676; cursor: pointer;
}

/* ============================================================
   JOURNEY PATH — Prelims → Mains → Interview (signature)
   Path draws itself on scroll (GSAP ScrollTrigger); fully drawn
   by default so no-JS / reduced-motion users see the complete art.
   ============================================================ */
.journey-strip { max-width: 1100px; margin: 0 auto; padding: 8px 20px 56px; }
.journey-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Stage taglines live in this HTML label row below the arc, on ALL screens:
   the inline SVG <text> can't fit the longer Prelims/Mains/Interview taglines
   without overlapping, so the SVG keeps only the arc + stage names and the row
   below carries the full taglines. */
.journey-svg .jp-sub { display: none; }
.journey-labels {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 10px;
}
.journey-labels > div { flex: 1; text-align: center; }
.journey-labels b {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 800; color: #14100E; letter-spacing: -0.01em; margin-bottom: 3px;
}
.journey-labels span { font-size: 0.82rem; color: #5C5550; line-height: 1.4; display: block; }
@media (max-width: 600px) {
  .journey-svg .jp-label { display: none; }
  .journey-labels { gap: 8px; margin-top: 4px; }
  .journey-labels b { font-size: 0.9rem; }
  .journey-labels span { font-size: 0.7rem; }
}
.journey-svg .jp-line { stroke: url(#jp-grad); stroke-width: 3; fill: none; stroke-linecap: round; }
.journey-svg .jp-dot { fill: #fff; stroke: #e71d39; stroke-width: 3; }
.journey-svg .jp-label {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 17px;
  fill: #14100E; letter-spacing: -0.01em;
}
.journey-svg .jp-sub { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11.5px; fill: #5C5550; }
.journey-svg .jp-flag { fill: #FF8C2B; }

/* ============================================================
   GENERATED POST TILE — the no-image case, made deliberate.

   87.7% of the corpus has no image of any kind (measured against the
   live REST API), so this is not a rare edge case that can look like a
   missing asset — it is what most cards render. It has to read as a
   design decision.

   Drawn entirely in CSS: no network request, no runtime image
   generation, works offline, and costs nothing at 448 posts. The
   section colour arrives as --tile-ink / --tile-accent on the element
   from riyasat_post_media_context(), so sections stay visually distinct
   in a grid instead of collapsing into one pink wash.

   Consumed by .ra-card-media (archive.php, home.php) and .rs-rel-media
   (single.php), which own their own sizing; this only paints the inside.
   ============================================================ */
.yatharth-page-wrapper .riyasat-tile {
  --tile-ink: #e71d39;
  --tile-accent: #FF8C2B;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  padding: var(--s-2);
  overflow: hidden;
  text-decoration: none;
  background:
    radial-gradient(130% 130% at 12% 0%, color-mix(in srgb, var(--tile-accent) 26%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--tile-ink) 10%, #fff) 0%, color-mix(in srgb, var(--tile-accent) 13%, #fff) 100%);
}

/* Hairline rule echoing the section colour — the detail that separates
   "generated tile" from "empty box". */
.yatharth-page-wrapper .riyasat-tile::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tile-ink), var(--tile-accent));
}

/* Oversized ghost glyph, bled off the top-right corner so it reads as a
   graphic device rather than as text that failed to centre. */
.yatharth-page-wrapper .riyasat-tile-mark {
  position: absolute;
  top: -0.28em;
  right: 0.04em;
  font-family: var(--font-display);
  font-size: 6.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--tile-ink);
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}

.yatharth-page-wrapper .riyasat-tile-label {
  position: relative;
  z-index: 1;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tile-ink);
  /* Long section names must not wrap into the glyph. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Devanagari has taller ascenders and no uppercase — forcing caps on it
   produces no visual change but does break some renderers' shaping. */
.yatharth-page-wrapper .riyasat-tile-label[lang="hi"] {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.8rem;
}

.yatharth-page-wrapper .riyasat-tile:hover .riyasat-tile-mark {
  opacity: 0.22;
  transition: opacity 0.3s ease;
}

/* color-mix is unsupported on older Safari/Firefox, where the gradients
   above collapse to transparent and the tile renders white-on-white.
   This restores a legible branded tile using plain colour stops. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .yatharth-page-wrapper .riyasat-tile {
    background: linear-gradient(135deg, #fff4ec 0%, #ffe9e6 100%);
  }
}

@media (max-width: 480px) {
  .yatharth-page-wrapper .riyasat-tile-mark { font-size: 4.6rem; }
  .yatharth-page-wrapper .riyasat-tile { padding: var(--s-1); }
}

@media (prefers-reduced-motion: reduce) {
  .yatharth-page-wrapper .riyasat-tile:hover .riyasat-tile-mark {
    transition: none;
    opacity: 0.16;
  }
}

/* Google Ads compliance disclaimer — quiet but legible. Deliberately not
   hidden behind a toggle or shrunk to unreadable: a disclaimer a reviewer
   cannot find is a disclaimer that is not there. */
.footer-disclaimer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #B9B2AC;
  font-size: 0.82rem;
  line-height: 1.65;
}
.footer-disclaimer p { margin: 0 0 10px; }
.footer-disclaimer p:last-child { margin-bottom: 0; }
.footer-disclaimer strong { color: #D8D2CC; }