/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    /* Colors */
    --color-black: #000000;
    --color-yellow: #FFD700;
    --color-white: #FFFFFF;
    --color-pink: #ff9be4;
    --color-yellow-brand: #ffe001;
    
    /* Typography */
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Inter', sans-serif;
    --font-agrandir: 'Agrandir', sans-serif;
    --font-vastago: 'Vastago Grotesk', sans-serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --spacing-xxl: 6rem;
    
    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ========================================
   FONT FACES
   ======================================== */
@font-face {
    font-family: 'Agrandir';
    src: url('assets/fonts/Agrandir-Regular.woff2') format('woff2'),
         url('assets/fonts/Agrandir-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Agrandir';
    src: url('assets/fonts/Agrandir-TextBold.woff2') format('woff2'),
         url('assets/fonts/Agrandir-TextBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vastago Grotesk';
    src: url('assets/fonts/VastagoGrotesk-Regular.woff2') format('woff2'),
         url('assets/fonts/VastagoGrotesk-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vastago Grotesk';
    src: url('assets/fonts/VastagoGrotesk-Medium.woff2') format('woff2'),
         url('assets/fonts/VastagoGrotesk-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vastago Grotesk';
    src: url('assets/fonts/VastagoGrotesk-Bold.woff2') format('woff2'),
         url('assets/fonts/VastagoGrotesk-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vastago Grotesk';
    src: url('assets/fonts/VastagoGrotesk-Heavy.woff2') format('woff2'),
         url('assets/fonts/VastagoGrotesk-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   RESET & BASE STYLES
   ======================================== */
.hopclass-site * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hopclass-site {
    font-size: 16px;
    scroll-behavior: smooth;
}

.hopclass-site {
    font-family: var(--font-secondary);
    line-height: 1.6;
    color: var(--color-black);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hopclass-site img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   HERO SECTION
   ======================================== */
.hopclass-site .hero-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-black);
    background-image: url('assets/images/star.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    padding: var(--spacing-md);
}

/* Hero Container */
.hopclass-site .hero-container {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 1200px;
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-md);
    animation: fadeInUp 1s ease-out;
}

/* Logo Wrapper */
.hopclass-site .hero-logo-wrapper {
    animation: logoFloat 3s ease-in-out infinite;
}

.hopclass-site .hero-logo {
    width: clamp(200px, 30vw, 400px);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 10px 30px rgba(255, 215, 0, 0.3));
    transition: var(--transition-smooth);
}

.hero-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 15px 40px rgba(255, 215, 0, 0.5));
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablet Landscape (1024px and below) */
@media screen and (max-width: 1024px) {
    .hopclass-site .hero-section {
        padding: var(--spacing-md) var(--spacing-sm);
    }
    
    .hopclass-site .hero-container {
        padding: var(--spacing-md) var(--spacing-sm);
    }
    
    .hopclass-site .hero-logo {
        width: clamp(180px, 28vw, 350px);
    }
}

/* Tablet Portrait (768px and below) */
@media screen and (max-width: 768px) {
    :root {
        --spacing-lg: 2rem;
        --spacing-xl: 3rem;
    }
    
    .hopclass-site .hero-section {
        min-height: 100vh;
        padding: var(--spacing-sm);
    }
    
    .hopclass-site .hero-container {
        padding: var(--spacing-sm);
    }
    
    .hopclass-site .hero-logo {
        width: clamp(160px, 35vw, 280px);
    }
}

/* Mobile (480px and below) */
@media screen and (max-width: 480px) {
    :root {
        --spacing-md: 1.5rem;
        --spacing-lg: 2rem;
    }
    
    .hopclass-site .hero-section {
        padding: var(--spacing-sm) 0.75rem;
    }
    
    .hopclass-site .hero-container {
        padding: var(--spacing-sm) 0.5rem;
    }
    
    .hopclass-site .hero-logo {
        width: clamp(140px, 40vw, 220px);
    }
}

/* Small Mobile (360px and below) */
@media screen and (max-width: 360px) {
    .hopclass-site .hero-logo {
        width: 120px;
    }
}

/* ========================================
   ACCESSIBILITY & PERFORMANCE
   ======================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .hopclass-site *, .hopclass-site *::before, .hopclass-site *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .hopclass-site .hero-logo-wrapper {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hopclass-site .hero-logo {
        filter: contrast(1.2) drop-shadow(0 10px 30px rgba(255, 215, 0, 0.5));
    }
}

/* Print styles */
@media print {
    .hopclass-site .hero-section {
        min-height: auto;
        page-break-after: always;
    }
    
    .hopclass-site .hero-logo-wrapper {
        animation: none;
    }
}


/* ========================================
   SECTION 2: PARTNERSHIP HERO - COMPLETE REBUILD
   ======================================== */

/* Main Section Container */
.hopclass-site .partnership-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--color-yellow-brand);
}

/* ========================================
   PINK TOP AREA
   ======================================== */
.hopclass-site .partnership-pink-area {
    position: relative;
    background: var(--color-pink);
    padding: clamp(4rem, 8vh, 10rem) 0 clamp(8rem, 12vh, 16rem) 0;
    /* Curved bottom edge using border-radius */
    border-bottom-left-radius: 50% 15%;
    border-bottom-right-radius: 50% 15%;
    z-index: 1;
}

.hopclass-site .partnership-heading-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 3rem);
    text-align: center;
    position: relative;
    z-index: 3;
}

.hopclass-site .partnership-main-heading {
    font-family: var(--font-vastago);
    /* 38px at 1920 = ~2vw; fluid scaling down to 0.875rem on smallest screens */
    font-size: clamp(0.875rem, 2vw, 38px);
    font-weight: 900;
    color: var(--color-black);
    line-height: 1.25;
    letter-spacing: clamp(0.02em, 0.1vw, 0.12em);
    text-transform: uppercase;
    margin: 0;
    position: relative;
    z-index: 3;
}

.hopclass-site .heading-second-line {
    display: block;
    margin-top: clamp(0.5rem, 1.5vw, 3rem);
}

/* ========================================
   HANDSHAKE HERO LAYER - OVERLAPPING
   ======================================== */
.hopclass-site .handshake-hero-layer {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    /* -58% pushes arms to the top edge, closing the pixel gap */
    transform: translateY(-58%);
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

.hopclass-site .handshake-hero-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hopclass-site .handshake-hero-image {
    /* 100% at 1920; the image fills the container naturally */
    width: 100%;
    max-width: none;
    height: auto;
    display: block;
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.2));
    transform-origin: center center;
}

/* ========================================
   YELLOW BOTTOM AREA
   ======================================== */
.hopclass-site .partnership-yellow-area {
    position: relative;
    background: var(--color-yellow-brand);
    /* 416px at 1920 = ~21.67vw; bottom padding scales similarly */
    padding: 21.67vw 0 clamp(2rem, 6vw, 8rem) 0;
    z-index: 1;
}

.hopclass-site .partnership-text-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 3rem);
}

.hopclass-site .partnership-paragraph {
    font-family: var(--font-agrandir);
    font-size: clamp(0.8125rem, 1.5vw, 1.375rem);
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.75;
    margin-bottom: clamp(1rem, 2vw, 2.5rem);
    text-align: left;
}

.partnership-paragraph:last-child {
    margin-bottom: 0;
}

/* ========================================
   SECTION 2 RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablet Landscape and below (≤1023px) */
@media screen and (max-width: 1023px) {
    .hopclass-site .handshake-hero-image {
        width: 140vw; /* Arms start extending beyond viewport */
    }
    
    .hopclass-site .partnership-pink-area {
        border-bottom-left-radius: 50% 12%;
        border-bottom-right-radius: 50% 12%;
    }
    
    .hopclass-site .partnership-yellow-area {
        padding-top: 28vw; /* More room for larger image overlap */
    }
    
    .hopclass-site .partnership-paragraph {
        line-height: 1.7;
    }
}

/* Tablet Portrait (≤767px) */
@media screen and (max-width: 767px) {
    .hopclass-site .handshake-hero-image {
        width: 180vw; /* Arms extend fully to edges */
    }
    
    .hopclass-site .partnership-pink-area {
        border-bottom-left-radius: 50% 10%;
        border-bottom-right-radius: 50% 10%;
    }
    
    .hopclass-site .partnership-yellow-area {
        padding-top: 38vw;
    }
    
    .hopclass-site .partnership-main-heading {
        font-size: clamp(1.1rem, 5vw, 2rem);
        line-height: 1.3;
        letter-spacing: 0.12em;
    }
    
    .hopclass-site .partnership-paragraph {
        line-height: 1.65;
    }
}

/* Mobile Large (≤599px) */
@media screen and (max-width: 599px) {
    .hopclass-site .handshake-hero-image {
        width: 120vw; /* Arms fill viewport with slight overflow */
    }

    .hopclass-site .partnership-pink-area {
        padding: clamp(3rem, 8vw, 5rem) 0 clamp(14rem, 38vw, 20rem) 0;
        border-bottom-left-radius: 50% 8%;
        border-bottom-right-radius: 50% 8%;
    }

    .hopclass-site .handshake-hero-layer {
        transform: translateY(-50%);
    }

    .hopclass-site .partnership-yellow-area {
        padding-top: clamp(8rem, 28vw, 14rem);
    }

    .hopclass-site .partnership-main-heading {
        font-size: clamp(1rem, 5.5vw, 1.8rem);
        line-height: 1.35;
        letter-spacing: 0.14em;
    }

    .hopclass-site .partnership-heading-wrapper, .hopclass-site .partnership-text-wrapper {
        padding: 0 clamp(1.25rem, 5vw, 2rem);
    }

    .hopclass-site .partnership-paragraph {
        line-height: 1.6;
    }
}

/* Mobile Medium (≤479px) */
@media screen and (max-width: 479px) {
    .hopclass-site .handshake-hero-image {
        width: 130vw;
    }

    .hopclass-site .partnership-pink-area {
        padding: clamp(3rem, 8vw, 4rem) 0 clamp(15rem, 42vw, 22rem) 0;
        border-bottom-left-radius: 50% 7%;
        border-bottom-right-radius: 50% 7%;
    }

    .hopclass-site .partnership-yellow-area {
        padding-top: clamp(9rem, 32vw, 15rem);
    }

    .hopclass-site .partnership-main-heading {
        font-size: clamp(1rem, 6vw, 1.6rem);
        letter-spacing: 0.15em;
    }

    .hopclass-site .partnership-paragraph {
        line-height: 1.55;
    }
}

/* Mobile Small (≤399px) */
@media screen and (max-width: 399px) {
    .hopclass-site .handshake-hero-image {
        width: 140vw;
    }

    .hopclass-site .partnership-pink-area {
        padding: clamp(2.5rem, 8vw, 4rem) 0 clamp(16rem, 46vw, 22rem) 0;
        border-bottom-left-radius: 50% 6%;
        border-bottom-right-radius: 50% 6%;
    }

    .hopclass-site .partnership-yellow-area {
        padding-top: clamp(10rem, 36vw, 16rem);
    }

    .hopclass-site .partnership-paragraph {
        line-height: 1.5;
    }
}

/* Mobile Extra Small (<360px) */
@media screen and (max-width: 359px) {
    .hopclass-site .handshake-hero-image {
        width: 150vw;
    }

    .hopclass-site .partnership-pink-area {
        padding-bottom: clamp(17rem, 50vw, 22rem);
    }

    .hopclass-site .partnership-yellow-area {
        padding-top: clamp(11rem, 40vw, 17rem);
    }

    .hopclass-site .partnership-paragraph {
        line-height: 1.45;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .hopclass-site .handshake-hero-image {
        filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.15));
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .hopclass-site .partnership-main-heading {
        font-weight: 800;
    }
    
    .hopclass-site .handshake-hero-image {
        filter: contrast(1.1) drop-shadow(0 15px 40px rgba(0, 0, 0, 0.3));
    }
}

/* ========================================
   SECTION 3: THE ORGANISATION BEHIND HOPCLASS
   ======================================== */

/* --- Main Section Container --- */
.hopclass-site .org-section {
    position: relative;
    width: 100%;
    background-color: #1B3FE0;
    overflow: hidden;
    padding: 0;
}

/* --- Heading Area --- */
.hopclass-site .org-heading-area {
    position: relative;
    width: 100%;
    padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 4rem) clamp(2rem, 4vw, 4rem);
    z-index: 2;
}

.hopclass-site .org-heading-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.hopclass-site .org-main-heading {
    font-family: var(--font-vastago);
    font-size: clamp(1.25rem, 2.4vw, 2.5rem);
    font-weight: 900;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: clamp(0.02em, 0.06vw, 0.06em);
    line-height: 1.2;
    margin: 0;
}

/* --- Blocks Container --- */
.hopclass-site .org-blocks-container {
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(1rem, 2vw, 2rem) 0 clamp(3rem, 6vw, 7rem) 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
}

/* --- Individual Block --- */
.hopclass-site .org-block {
    position: relative;
    width: 50%;
    min-height: clamp(350px, 40vw, 550px);
}

/* Left block sits HIGHER */
.hopclass-site .org-block--left {
    margin-top: 0;
    align-self: flex-start;
}

/* Right block sits LOWER */
.hopclass-site .org-block--right {
    margin-top: clamp(4rem, 8vw, 10rem);
    align-self: flex-start;
}

/* --- Block Background (yellow shape images) --- */
.hopclass-site .org-block-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

/* --- Block Content (overlays the bg) --- */
.hopclass-site .org-block-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    height: 100%;
    padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3.5vw, 3.5rem);
}

/* Left block: text on left, logo on right */
/* Extra right padding keeps content inside the solid yellow area, away from the chevron cutout */
.hopclass-site .org-block-content--left {
    flex-direction: row;
    padding-right: clamp(5rem, 18vw, 14rem);
}

/* Right block: logo on left, text on right */
/* Extra left padding keeps content inside the solid yellow area, away from the chevron cutout */
.hopclass-site .org-block-content--right {
    flex-direction: row;
    padding-left: clamp(5rem, 18vw, 14rem);
}

/* --- Block Text --- */
.hopclass-site .org-block-text {
    flex: 1;
    min-width: 0;
}

.hopclass-site .org-block-heading {
    font-family: var(--font-vastago);
    font-size: clamp(0.85rem, 1.4vw, 1.35rem);
    font-weight: 900;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: clamp(0.04em, 0.1vw, 0.14em);
    line-height: 1.4;
    margin-bottom: clamp(1rem, 2vw, 2rem);
}

.hopclass-site .org-block-paragraph {
    font-family: var(--font-agrandir);
    font-size: clamp(0.75rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.7;
    margin-bottom: clamp(0.5rem, 1vw, 1rem);
}

.org-block-paragraph:last-child {
    margin-bottom: 0;
}

.hopclass-site .org-block-paragraph--stats {
    font-weight: 700;
    font-family: var(--font-agrandir);
}

/* --- Block Logo --- */
.hopclass-site .org-block-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(120px, 14vw, 220px);
}

.hopclass-site .org-logo-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* --- Scroll Reveal Animation --- */
.hopclass-site .org-block {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hopclass-site .org-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hopclass-site .org-block--right {
    transition-delay: 0.2s;
}

/* ========================================
   SECTION 3 - RESPONSIVE BREAKPOINTS
   ======================================== */

/* Ultra-wide (1800px+) */
@media screen and (min-width: 1800px) {
    .hopclass-site .org-block {
        min-height: 580px;
    }

    .hopclass-site .org-main-heading {
        font-size: 2.5rem;
    }
}

/* Large Desktop (1400px - 1799px) */
@media screen and (min-width: 1400px) and (max-width: 1799px) {
}

/* Desktop (1200px - 1399px) */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .hopclass-site .org-block {
        min-height: clamp(320px, 35vw, 480px);
    }

    .hopclass-site .org-block-content {
        padding: clamp(1.75rem, 3.5vw, 3.5rem) clamp(1.25rem, 3vw, 3rem);
    }

    .hopclass-site .org-block-content--left {
        padding-right: clamp(4rem, 15vw, 11rem);
    }

    .hopclass-site .org-block-content--right {
        padding-left: clamp(4rem, 15vw, 11rem);
    }
}

/* Tablet Landscape (1024px - 1199px) */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    .hopclass-site .org-block {
        min-height: clamp(300px, 34vw, 440px);
    }

    .hopclass-site .org-block--right {
        margin-top: clamp(3rem, 6vw, 7rem);
    }

    .hopclass-site .org-block-content {
        padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2.5vw, 2.5rem);
    }

    .hopclass-site .org-block-content--left {
        padding-right: clamp(3.5rem, 14vw, 9rem);
    }

    .hopclass-site .org-block-content--right {
        padding-left: clamp(3.5rem, 14vw, 9rem);
    }

    .hopclass-site .org-block-logo {
        width: clamp(100px, 12vw, 180px);
    }
}

/* Tablet Portrait (768px - 1023px) */
@media screen and (max-width: 1023px) {
    .hopclass-site .org-blocks-container {
        flex-direction: column;
        align-items: center;
        gap: clamp(1.5rem, 4vw, 3rem);
        padding: clamp(1rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
    }

    .hopclass-site .org-block {
        width: 85%;
        min-height: clamp(280px, 40vw, 400px);
    }

    .hopclass-site .org-block--left {
        align-self: flex-start;
    }

    .hopclass-site .org-block--right {
        margin-top: 0;
        align-self: flex-end;
    }

    .hopclass-site .org-block-content {
        padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
    }

    /* Padding scaled to chevron tip cutout (~22-25% of bg image width) */
    .hopclass-site .org-block-content--left {
        padding-right: 22%;
    }

    .hopclass-site .org-block-content--right {
        padding-left: 22%;
    }

    .hopclass-site .org-block-logo {
        width: clamp(110px, 15vw, 190px);
    }

    .hopclass-site .org-block-heading {
        font-size: clamp(0.9rem, 1.8vw, 1.4rem);
    }

    .hopclass-site .org-block-paragraph {
        font-size: clamp(0.8rem, 1.4vw, 1.05rem);
    }

    .hopclass-site .org-main-heading {
        font-size: clamp(1.5rem, 4vw, 2.75rem);
    }
}

/* Tablet Small (600px - 767px) */
@media screen and (max-width: 767px) {
    .hopclass-site .org-block {
        width: 92%;
        min-height: clamp(220px, 48vw, 360px);
    }

    /* Keep row layout — design 3 mobile shows text + logo side-by-side */
    .hopclass-site .org-block-content {
        flex-direction: row;
        text-align: left;
        gap: clamp(0.5rem, 2vw, 1.25rem);
        padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2.25rem);
    }

    .hopclass-site .org-block-content--left {
        padding-right: 24%;
    }

    .hopclass-site .org-block-content--right {
        padding-left: 24%;
    }

    .hopclass-site .org-block-logo {
        width: clamp(72px, 14vw, 130px);
        order: 0;
    }

    .hopclass-site .org-block-heading {
        font-size: clamp(0.85rem, 2.2vw, 1.15rem);
        margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
    }

    .hopclass-site .org-block-paragraph {
        font-size: clamp(0.7rem, 1.6vw, 0.9rem);
        line-height: 1.55;
        margin-bottom: clamp(0.35rem, 0.8vw, 0.6rem);
    }

    .hopclass-site .org-heading-area {
        padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
    }

    .hopclass-site .org-main-heading {
        font-size: clamp(1.3rem, 4.5vw, 2.25rem);
    }
}

/* Mobile Large (480px - 599px) */
@media screen and (max-width: 599px) {
    .hopclass-site .org-block {
        width: 96%;
        min-height: clamp(180px, 46vw, 260px);
    }

    .hopclass-site .org-block--left, .hopclass-site .org-block--right {
        align-self: center;
    }

    .hopclass-site .org-block-content {
        flex-direction: row;
        text-align: left;
        gap: clamp(0.5rem, 2vw, 1rem);
        padding: clamp(1.25rem, 3.5vw, 2rem) clamp(1rem, 3vw, 1.75rem);
    }

    .hopclass-site .org-block-content--left {
        padding-right: 26%;
    }

    .hopclass-site .org-block-content--right {
        padding-left: 26%;
    }

    .hopclass-site .org-block-logo {
        width: clamp(60px, 16vw, 110px);
    }

    .hopclass-site .org-block-heading {
        font-size: clamp(0.75rem, 2.6vw, 1rem);
        margin-bottom: clamp(0.4rem, 1.2vw, 0.75rem);
        line-height: 1.3;
    }

    .hopclass-site .org-block-paragraph {
        font-size: clamp(0.6rem, 2vw, 0.8rem);
        line-height: 1.5;
        margin-bottom: clamp(0.3rem, 0.8vw, 0.5rem);
    }

    .hopclass-site .org-heading-area {
        padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem) clamp(1rem, 2.5vw, 2rem);
    }

    .hopclass-site .org-main-heading {
        font-size: clamp(1.1rem, 5vw, 1.8rem);
    }

    .hopclass-site .org-blocks-container {
        padding: clamp(0.5rem, 2vw, 1.5rem) clamp(0.5rem, 2vw, 1rem) clamp(2rem, 5vw, 4rem);
    }
}

/* Mobile Medium (400px - 479px) */
@media screen and (max-width: 479px) {
    .hopclass-site .org-block {
        width: 98%;
        min-height: clamp(160px, 48vw, 220px);
    }

    .hopclass-site .org-block-content {
        padding: clamp(1rem, 3vw, 1.5rem) clamp(0.75rem, 2.5vw, 1.25rem);
        gap: clamp(0.4rem, 1.5vw, 0.75rem);
    }

    .hopclass-site .org-block-content--left {
        padding-right: 27%;
    }

    .hopclass-site .org-block-content--right {
        padding-left: 27%;
    }

    .hopclass-site .org-block-logo {
        width: clamp(52px, 16vw, 90px);
    }

    .hopclass-site .org-block-heading {
        font-size: clamp(0.7rem, 2.8vw, 0.95rem);
        margin-bottom: clamp(0.3rem, 1vw, 0.6rem);
    }

    .hopclass-site .org-block-paragraph {
        font-size: clamp(0.55rem, 2.1vw, 0.75rem);
        line-height: 1.45;
        margin-bottom: clamp(0.25rem, 0.7vw, 0.4rem);
    }

    .hopclass-site .org-main-heading {
        font-size: clamp(1rem, 5.5vw, 1.5rem);
        letter-spacing: 0.06em;
    }
}

/* Mobile Small (<400px) */
@media screen and (max-width: 399px) {
    .hopclass-site .org-block-content {
        padding: 0.75rem 0.625rem;
        gap: 0.4rem;
    }

    .hopclass-site .org-block-content--left {
        padding-right: 28%;
    }

    .hopclass-site .org-block-content--right {
        padding-left: 28%;
    }

    .hopclass-site .org-block-logo {
        width: 50px;
    }

    .hopclass-site .org-block-heading {
        font-size: 0.7rem;
        margin-bottom: 0.3rem;
    }

    .hopclass-site .org-block-paragraph {
        font-size: 0.55rem;
        line-height: 1.4;
        margin-bottom: 0.25rem;
    }

    .hopclass-site .org-main-heading {
        font-size: 0.95rem;
        letter-spacing: 0.04em;
    }

    .hopclass-site .org-heading-area {
        padding: 1.5rem 0.75rem 1rem;
    }

    .hopclass-site .org-blocks-container {
        padding: 0.5rem 0.5rem 2rem;
        gap: 1rem;
    }
}

/* Section 3 - Accessibility */
@media (prefers-reduced-motion: reduce) {
    .hopclass-site .org-block {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .hopclass-site .org-main-heading {
        font-weight: 800;
    }

    .hopclass-site .org-block-heading {
        font-weight: 800;
    }
}

/* ========================================
   SECTION 4: WHAT WE ARE PROPOSING
   ======================================== */

/* --- Main Section Container --- */
.hopclass-site .proposal-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* --- Yellow Background --- */
.hopclass-site .proposal-yellow-bg {
    position: relative;
    width: 100%;
    background-color: var(--color-yellow-brand);
    padding: clamp(2rem, 4vw, 5rem) 0 0 0;
}

/* --- Black Dome Container --- */
.hopclass-site .proposal-dome {
    position: relative;
    width: 100%;
    background-color: var(--color-black);
    border-top-left-radius: 50% clamp(6rem, 18vw, 22rem);
    border-top-right-radius: 50% clamp(6rem, 18vw, 22rem);
    padding: clamp(5rem, 10vw, 12rem) clamp(2rem, 6vw, 8rem) clamp(4rem, 8vw, 8rem);
    overflow: hidden;
}

/* --- Heading Area --- */
.hopclass-site .proposal-heading-area {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.hopclass-site .proposal-main-heading {
    font-family: var(--font-vastago);
    font-size: clamp(1.5rem, 3vw, 3rem);
    font-weight: 900;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: clamp(0.02em, 0.05vw, 0.05em);
    line-height: 1.2;
    margin: 0 0 clamp(1rem, 2.5vw, 2.5rem) 0;
}

.hopclass-site .proposal-subheading {
    font-family: var(--font-vastago);
    font-size: clamp(0.75rem, 1.5vw, 1.25rem);
    font-weight: 400;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: clamp(0.08em, 0.2vw, 0.28em);
    line-height: 1.7;
    margin: 0;
    opacity: 0.9;
}

/* --- Cards Container --- */
.hopclass-site .proposal-cards {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 1100px;
    margin: 0 auto;
}

/* --- Individual Card --- */
.hopclass-site .proposal-card {
    background-color: var(--color-yellow-brand);
    border-radius: clamp(1.5rem, 3vw, 3rem);
    padding: clamp(1.5rem, 3.5vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
    position: relative;
    /* Scroll animation */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.hopclass-site .proposal-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger card animations */
.proposal-card:nth-child(2) {
    transition-delay: 0.15s;
}

.proposal-card:nth-child(3) {
    transition-delay: 0.3s;
}

/* --- Card Label Row --- */
.hopclass-site .proposal-card-label {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 0.8vw, 0.75rem);
    margin-bottom: clamp(0.4rem, 0.8vw, 0.75rem);
}

.hopclass-site .proposal-label-text {
    font-family: var(--font-vastago);
    font-size: clamp(0.7rem, 1.1vw, 1rem);
    font-weight: 900;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: clamp(0.1em, 0.25vw, 0.3em);
}

.hopclass-site .proposal-label-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(1.25rem, 1.8vw, 1.75rem);
    height: clamp(1.25rem, 1.8vw, 1.75rem);
    background-color: var(--color-black);
    color: var(--color-yellow-brand);
    border-radius: 50%;
    font-family: var(--font-vastago);
    font-size: clamp(0.6rem, 0.9vw, 0.85rem);
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
}

/* --- Card Title --- */
.hopclass-site .proposal-card-title {
    font-family: var(--font-vastago);
    font-size: clamp(0.85rem, 1.4vw, 1.3rem);
    font-weight: 900;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: clamp(0.03em, 0.08vw, 0.1em);
    line-height: 1.3;
    margin: 0 0 clamp(0.75rem, 1.5vw, 1.5rem) 0;
}

/* --- Card Body --- */
.hopclass-site .proposal-card-body {
    font-family: var(--font-agrandir);
    font-size: clamp(0.8rem, 1.2vw, 1.1rem);
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.7;
    margin: 0 0 clamp(0.75rem, 1.5vw, 1.5rem) 0;
}

/* --- Card Ending Statement --- */
.hopclass-site .proposal-card-ending {
    font-family: var(--font-vastago);
    font-size: clamp(0.8rem, 1.2vw, 1.1rem);
    font-weight: 900;
    color: var(--color-black);
    line-height: 1.5;
    margin: 0;
}

/* ========================================
   SECTION 4 - RESPONSIVE BREAKPOINTS
   ======================================== */

/* Ultra-wide (1800px+) */
@media screen and (min-width: 1800px) {
    .hopclass-site .proposal-dome {
        border-top-left-radius: 50% 20rem;
        border-top-right-radius: 50% 20rem;
        padding-top: 13rem;
    }

    .hopclass-site .proposal-cards {
        max-width: 1200px;
    }

    .hopclass-site .proposal-main-heading {
        font-size: 3rem;
    }
}

/* Large Desktop (1400px - 1799px) */
@media screen and (min-width: 1400px) and (max-width: 1799px) {
    .hopclass-site .proposal-dome {
        padding-top: clamp(9rem, 10vw, 12rem);
    }

    .hopclass-site .proposal-cards {
        max-width: 1100px;
    }
}

/* Desktop (1200px - 1399px) */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .hopclass-site .proposal-dome {
        padding-top: clamp(8rem, 9vw, 11rem);
    }

    .hopclass-site .proposal-cards {
        max-width: 1000px;
    }
}

/* Tablet Landscape (1024px - 1199px) */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    .hopclass-site .proposal-dome {
        border-top-left-radius: 50% clamp(5rem, 14vw, 16rem);
        border-top-right-radius: 50% clamp(5rem, 14vw, 16rem);
        padding-top: clamp(6rem, 8vw, 10rem);
    }

    .hopclass-site .proposal-cards {
        max-width: 900px;
    }
}

/* Tablet Portrait (768px - 1023px) */
@media screen and (max-width: 1023px) {
    .hopclass-site .proposal-dome {
        border-top-left-radius: 50% clamp(4rem, 12vw, 14rem);
        border-top-right-radius: 50% clamp(4rem, 12vw, 14rem);
        padding: clamp(5rem, 8vw, 8rem) clamp(1.5rem, 4vw, 4rem) clamp(3rem, 6vw, 6rem);
    }

    .hopclass-site .proposal-cards {
        max-width: 700px;
    }

    .hopclass-site .proposal-main-heading {
        font-size: clamp(1.4rem, 4vw, 2.5rem);
    }

    .hopclass-site .proposal-subheading {
        font-size: clamp(0.7rem, 1.6vw, 1.1rem);
    }
}

/* Tablet Small (600px - 767px) */
@media screen and (max-width: 767px) {
    .hopclass-site .proposal-yellow-bg {
        padding-top: clamp(1.5rem, 3vw, 3rem);
    }

    .hopclass-site .proposal-dome {
        border-top-left-radius: 50% clamp(3rem, 10vw, 10rem);
        border-top-right-radius: 50% clamp(3rem, 10vw, 10rem);
        padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 3.5vw, 3rem) clamp(2.5rem, 5vw, 5rem);
    }

    .hopclass-site .proposal-cards {
        max-width: 100%;
    }

    .hopclass-site .proposal-main-heading {
        font-size: clamp(1.25rem, 4.5vw, 2rem);
    }

    .hopclass-site .proposal-subheading {
        font-size: clamp(0.65rem, 1.8vw, 0.95rem);
        letter-spacing: 0.12em;
    }

    .hopclass-site .proposal-heading-area {
        margin-bottom: clamp(2rem, 4vw, 3.5rem);
    }

    .hopclass-site .proposal-card {
        padding: clamp(1.25rem, 3.5vw, 2.5rem) clamp(1.25rem, 3.5vw, 2.5rem);
        border-radius: clamp(1.25rem, 2.5vw, 2rem);
    }
}

/* Mobile Large (480px - 599px) */
@media screen and (max-width: 599px) {
    .hopclass-site .proposal-yellow-bg {
        padding-top: clamp(1rem, 2.5vw, 2rem);
    }

    .hopclass-site .proposal-dome {
        border-top-left-radius: 50% clamp(2.5rem, 8vw, 8rem);
        border-top-right-radius: 50% clamp(2.5rem, 8vw, 8rem);
        padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 3vw, 2.5rem) clamp(2rem, 4vw, 4rem);
    }

    .hopclass-site .proposal-main-heading {
        font-size: clamp(1.1rem, 5vw, 1.75rem);
    }

    .hopclass-site .proposal-subheading {
        font-size: clamp(0.6rem, 2vw, 0.85rem);
        letter-spacing: 0.08em;
    }

    .hopclass-site .proposal-card {
        padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
        border-radius: clamp(1rem, 2.5vw, 1.75rem);
    }

    .hopclass-site .proposal-card-title {
        font-size: clamp(0.8rem, 2.5vw, 1.1rem);
    }

    .hopclass-site .proposal-card-body {
        font-size: clamp(0.75rem, 2.2vw, 0.95rem);
        line-height: 1.6;
    }

    .hopclass-site .proposal-card-ending {
        font-size: clamp(0.75rem, 2.2vw, 0.95rem);
    }

    .hopclass-site .proposal-cards {
        gap: clamp(1rem, 2.5vw, 1.75rem);
    }
}

/* Mobile Medium (400px - 479px) */
@media screen and (max-width: 479px) {
    .hopclass-site .proposal-dome {
        border-top-left-radius: 50% clamp(2rem, 7vw, 6rem);
        border-top-right-radius: 50% clamp(2rem, 7vw, 6rem);
        padding: clamp(3rem, 6vw, 5rem) clamp(0.75rem, 2.5vw, 1.5rem) clamp(1.5rem, 3.5vw, 3rem);
    }

    .hopclass-site .proposal-main-heading {
        font-size: clamp(1rem, 5.5vw, 1.5rem);
    }

    .hopclass-site .proposal-subheading {
        font-size: clamp(0.55rem, 2.2vw, 0.75rem);
        letter-spacing: 0.06em;
    }

    .hopclass-site .proposal-card {
        padding: clamp(0.875rem, 3vw, 1.5rem) clamp(0.875rem, 3vw, 1.5rem);
        border-radius: clamp(0.875rem, 2vw, 1.5rem);
    }

    .hopclass-site .proposal-card-title {
        font-size: clamp(0.75rem, 3vw, 1rem);
    }

    .hopclass-site .proposal-card-body {
        font-size: clamp(0.7rem, 2.5vw, 0.875rem);
        line-height: 1.55;
    }

    .hopclass-site .proposal-card-ending {
        font-size: clamp(0.7rem, 2.5vw, 0.875rem);
    }

    .hopclass-site .proposal-label-text {
        font-size: clamp(0.6rem, 2vw, 0.8rem);
    }

    .hopclass-site .proposal-label-badge {
        width: 1.1rem;
        height: 1.1rem;
        font-size: 0.55rem;
    }
}

/* Mobile Small (<400px) */
@media screen and (max-width: 399px) {
    .hopclass-site .proposal-dome {
        border-top-left-radius: 50% 2rem;
        border-top-right-radius: 50% 2rem;
        padding: 3.5rem 0.625rem 1.5rem;
    }

    .hopclass-site .proposal-main-heading {
        font-size: 0.95rem;
    }

    .hopclass-site .proposal-subheading {
        font-size: 0.5rem;
        letter-spacing: 0.04em;
    }

    .hopclass-site .proposal-card {
        padding: 0.75rem;
        border-radius: 0.75rem;
    }

    .hopclass-site .proposal-card-title {
        font-size: 0.7rem;
    }

    .hopclass-site .proposal-card-body, .hopclass-site .proposal-card-ending {
        font-size: 0.65rem;
        line-height: 1.5;
    }

    .hopclass-site .proposal-cards {
        gap: 0.875rem;
    }

    .hopclass-site .proposal-heading-area {
        margin-bottom: 1.5rem;
    }
}

/* Section 4 - Accessibility */
@media (prefers-reduced-motion: reduce) {
    .hopclass-site .proposal-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .hopclass-site .proposal-main-heading {
        font-weight: 800;
    }

    .hopclass-site .proposal-card-title {
        font-weight: 800;
    }

    .hopclass-site .proposal-card {
        border: 2px solid var(--color-black);
    }
}

/* ========================================
   SECTION 5: WHAT INDIAN STUDENTS BRING
   ======================================== */

/* --- Main Section Container --- */
.hopclass-site .indian-section {
    position: relative;
    width: 100%;
    background-color: var(--color-yellow-brand);
    overflow: hidden;
}

/* --- Content Area --- */
.hopclass-site .indian-content-area {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 4vw, 5rem) clamp(2.5rem, 5vw, 5rem);
}

/* --- Main Heading --- */
.hopclass-site .indian-heading-wrapper {
    text-align: center;
    margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}

.hopclass-site .indian-main-heading {
    font-family: var(--font-vastago);
    font-size: clamp(1.25rem, 2.3vw, 2.4rem);
    font-weight: 900;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: clamp(0.02em, 0.04vw, 0.04em);
    line-height: 1.2;
    margin: 0;
}

/* --- Divider Line --- */
.hopclass-site .indian-divider {
    width: clamp(120px, 18vw, 260px);
    height: 3px;
    background-color: var(--color-black);
    margin: 0 auto clamp(1.5rem, 2.5vw, 2.5rem);
}

/* --- Intro Paragraph --- */
.hopclass-site .indian-intro-wrapper {
    max-width: 1100px;
    margin: 0 auto clamp(2rem, 4vw, 4rem);
}

.hopclass-site .indian-intro-text {
    font-family: var(--font-agrandir);
    font-size: clamp(0.8rem, 1.2vw, 1.1rem);
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.75;
    text-align: left;
    margin: 0;
}

/* --- Cards Container --- */
.hopclass-site .indian-cards-container {
    display: flex;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: stretch;
}

/* --- Individual Card --- */
.hopclass-site .indian-card {
    flex: 1;
    background-color: #ff9be4;
    border-radius: clamp(1.25rem, 2.5vw, 2rem);
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 3rem);
    /* Scroll animation */
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.hopclass-site .indian-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger second card */
.indian-card:nth-child(2) {
    transition-delay: 0.15s;
}

/* --- Card Title --- */
.hopclass-site .indian-card-title {
    font-family: var(--font-vastago);
    font-size: clamp(0.85rem, 1.3vw, 1.2rem);
    font-weight: 900;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: clamp(0.03em, 0.08vw, 0.1em);
    line-height: 1.3;
    margin: 0 0 clamp(0.75rem, 1.5vw, 1.5rem) 0;
}

/* --- Card List --- */
.hopclass-site .indian-card-list {
    list-style: disc;
    padding-left: clamp(1rem, 1.5vw, 1.5rem);
    margin: 0;
}

.hopclass-site .indian-card-list li {
    font-family: var(--font-agrandir);
    font-size: clamp(0.78rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.65;
    margin-bottom: clamp(0.4rem, 0.8vw, 0.75rem);
}

.indian-card-list li:last-child {
    margin-bottom: 0;
}

/* --- Monuments Skyline --- */
.hopclass-site .indian-skyline-wrapper {
    position: relative;
    width: 100%;
    line-height: 0;
    height: clamp(10rem, 22vw, 24rem);
    overflow: hidden;
    margin-top: clamp(1.5rem, 3vw, 3rem);
}

.hopclass-site .indian-skyline-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
}

/* ========================================
   SECTION 5 - RESPONSIVE BREAKPOINTS
   ======================================== */

/* Ultra-wide (1800px+) */
@media screen and (min-width: 1800px) {
    .hopclass-site .indian-content-area {
        max-width: 1500px;
    }

    .hopclass-site .indian-main-heading {
        font-size: 2.4rem;
    }

    .hopclass-site .indian-intro-wrapper {
        max-width: 1200px;
    }
}

/* Large Desktop (1400px - 1799px) */
@media screen and (min-width: 1400px) and (max-width: 1799px) {
    .hopclass-site .indian-content-area {
        max-width: 1400px;
    }
}

/* Desktop (1200px - 1399px) */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .hopclass-site .indian-content-area {
        max-width: 1200px;
    }
}

/* Tablet Landscape (1024px - 1199px) */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    .hopclass-site .indian-content-area {
        max-width: 1000px;
    }

    .hopclass-site .indian-card {
        padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 3vw, 2.5rem);
    }
}

/* Tablet Portrait (768px - 1023px) */
@media screen and (max-width: 1023px) {
    .hopclass-site .indian-main-heading {
        font-size: clamp(1.3rem, 3.5vw, 2.5rem);
    }

    .hopclass-site .indian-intro-text {
        font-size: clamp(0.78rem, 1.4vw, 1rem);
    }

    .hopclass-site .indian-card {
        padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.5rem);
    }
}

/* Tablet Small (600px - 767px) */
@media screen and (max-width: 767px) {
    .hopclass-site .indian-cards-container {
        flex-direction: column;
        gap: clamp(1rem, 3vw, 2rem);
    }

    .hopclass-site .indian-main-heading {
        font-size: clamp(1.2rem, 4.5vw, 2rem);
    }

    .hopclass-site .indian-intro-text {
        font-size: clamp(0.78rem, 2vw, 1rem);
    }

    .hopclass-site .indian-content-area {
        padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem);
    }

    .hopclass-site .indian-card {
        padding: clamp(1.25rem, 3.5vw, 2.5rem) clamp(1.25rem, 3.5vw, 2.5rem);
    }

    .hopclass-site .indian-skyline-wrapper {
        margin-top: clamp(1.5rem, 3vw, 3rem);
    }
}

/* Mobile Large (480px - 599px) */
@media screen and (max-width: 599px) {
    .hopclass-site .indian-main-heading {
        font-size: clamp(1.05rem, 5vw, 1.7rem);
    }

    .hopclass-site .indian-divider {
        width: clamp(80px, 20vw, 160px);
        height: 2px;
    }

    .hopclass-site .indian-intro-text {
        font-size: clamp(0.75rem, 2.5vw, 0.95rem);
    }

    .hopclass-site .indian-card-title {
        font-size: clamp(0.8rem, 2.5vw, 1.05rem);
    }

    .hopclass-site .indian-card-list li {
        font-size: clamp(0.72rem, 2.2vw, 0.9rem);
    }
}

/* Mobile Medium (400px - 479px) */
@media screen and (max-width: 479px) {
    .hopclass-site .indian-content-area {
        padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 3vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
    }

    .hopclass-site .indian-main-heading {
        font-size: clamp(0.95rem, 5.5vw, 1.5rem);
    }

    .hopclass-site .indian-intro-text {
        font-size: clamp(0.7rem, 2.8vw, 0.9rem);
        line-height: 1.65;
    }

    .hopclass-site .indian-card {
        padding: clamp(1rem, 3vw, 1.5rem);
        border-radius: clamp(1rem, 2.5vw, 1.5rem);
    }

    .hopclass-site .indian-card-title {
        font-size: clamp(0.75rem, 3vw, 1rem);
    }

    .hopclass-site .indian-card-list li {
        font-size: clamp(0.68rem, 2.5vw, 0.85rem);
        line-height: 1.55;
    }
}

/* Mobile Small (<400px) */
@media screen and (max-width: 399px) {
    .hopclass-site .indian-content-area {
        padding: 1.5rem 0.75rem 1.25rem;
    }

    .hopclass-site .indian-main-heading {
        font-size: 0.9rem;
    }

    .hopclass-site .indian-divider {
        width: 70px;
        height: 2px;
    }

    .hopclass-site .indian-intro-text {
        font-size: 0.65rem;
    }

    .hopclass-site .indian-card {
        padding: 0.875rem;
        border-radius: 0.875rem;
    }

    .hopclass-site .indian-card-title {
        font-size: 0.7rem;
    }

    .hopclass-site .indian-card-list li {
        font-size: 0.63rem;
        line-height: 1.5;
    }

    .hopclass-site .indian-skyline-wrapper {
        margin-top: 1rem;
    }
}

/* Section 5 - Accessibility */
@media (prefers-reduced-motion: reduce) {
    .hopclass-site .indian-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .hopclass-site .indian-main-heading {
        font-weight: 800;
    }

    .hopclass-site .indian-card-title {
        font-weight: 800;
    }

    .hopclass-site .indian-card {
        border: 2px solid var(--color-black);
    }
}

/* ========================================
   SECTION 6: WHAT YOUR STUDENTS GET
   ======================================== */

.hopclass-site .get-section {
    position: relative;
    width: 100%;
    background-color: var(--color-yellow-brand);
    overflow: hidden;
    padding-bottom: clamp(4rem, 8vw, 8rem);
}

/* --- Orange Oval Area --- */
.hopclass-site .get-dome-container {
    position: relative;
    width: 100%;
    /* Container height dynamically scales with the oval's bottom edge */
    height: 30.4vw;
    display: flex;
    justify-content: center;
    background-color: transparent;
}

.hopclass-site .get-orange-oval {
    position: absolute;
    /* Derived strictly from user's 1920px fix: width 1828px (95.2vw) */
    width: 95.2vw;
    /* height 1530px (79.7vw) */
    height: 79.7vw;
    background-color: #fa5604;
    border-radius: 50%;
    
    /* top -947px (-49.3vw) */
    top: -49.3vw;
    left: 50%;
    transform: translateX(-50%);
    
    overflow: hidden;
}

.hopclass-site .get-kids-img {
    position: absolute;
    /* Pushes students firmly to the bottom of the oval so they are clipped naturally */
    bottom: -1%;
    left: 50%;
    transform: translateX(-50%);
    /* Sized proportionally so height fits within the 30.4vw visible oval */
    width: 48vw;
    height: auto;
    display: block;
}

/* --- Content Area --- */
.hopclass-site .get-content-area {
    position: relative;
    max-width: 1200px;
    margin: clamp(3rem, 6vw, 6rem) auto 0;
    padding: 0 clamp(1.5rem, 4vw, 5rem);
    text-align: center;
}

.hopclass-site .get-main-heading {
    font-family: var(--font-vastago);
    font-size: clamp(1.25rem, 2.4vw, 2.5rem);
    font-weight: 900;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: clamp(0.02em, 0.04vw, 0.04em);
    line-height: 1.2;
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

.hopclass-site .get-intro-text {
    font-family: var(--font-agrandir);
    font-size: clamp(0.85rem, 1.4vw, 1.2rem);
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto clamp(3rem, 6vw, 5rem);
}

/* --- Blue Pill Banner --- */
.hopclass-site .get-blue-pill {
    background-color: #0433ff;
    border-radius: 999px;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
    max-width: 1000px;
    margin: 0 auto;
}

.hopclass-site .get-pill-large {
    font-family: var(--font-vastago);
    font-size: clamp(0.9rem, 1.8vw, 1.5rem);
    font-weight: 900;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: clamp(0.05em, 0.1vw, 0.15em);
    line-height: 1.4;
    margin: 0 0 clamp(0.5rem, 1vw, 1rem);
}

.hopclass-site .get-pill-small {
    font-family: var(--font-agrandir);
    font-size: clamp(0.7rem, 1.1vw, 0.95rem);
    font-weight: 400;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: clamp(0.05em, 0.1vw, 0.15em);
    line-height: 1.5;
    margin: 0;
}

/* ========================================
   SECTION 6 - RESPONSIVE BREAKPOINTS
   ======================================== */

@media screen and (min-width: 1800px) {
    .hopclass-site .get-orange-oval {
        width: 1828px;
        height: 1530px;
        top: -947px;
    }
    .hopclass-site .get-dome-container {
        height: 583px; /* 1530 - 947 = 583 */
    }
    .hopclass-site .get-kids-img {
        width: 900px;
    }
}

@media screen and (max-width: 1023px) {
    .hopclass-site .get-orange-oval {
        width: 110vw; /* Wider on tablet to not feel too squished */
        height: 90vw;
        top: -50vw;
    }
    .hopclass-site .get-dome-container {
        height: 40vw; /* 90 - 50 = 40 */
    }
    .hopclass-site .get-kids-img {
        width: 60vw;
    }
    .hopclass-site .get-blue-pill {
        border-radius: clamp(1.5rem, 4vw, 3rem);
    }
}

@media screen and (max-width: 767px) {
    .hopclass-site .get-orange-oval {
        width: 130vw; /* Let it stretch slightly wider on smaller screens */
        height: 100vw;
        top: -50vw;
        border-radius: 50%;
    }
    .hopclass-site .get-dome-container {
        height: 50vw; /* 100 - 50 = 50 */
    }
    .hopclass-site .get-kids-img {
        width: 75vw;
    }
    .hopclass-site .get-blue-pill {
        padding: clamp(1.5rem, 4vw, 2rem) clamp(1.25rem, 3.5vw, 2rem);
        border-radius: 1.5rem;
    }
}

@media screen and (max-width: 479px) {
    .hopclass-site .get-orange-oval {
        width: 150vw;
        height: 110vw;
        top: -55vw;
    }
    .hopclass-site .get-dome-container {
        height: 55vw; /* 110 - 55 = 55 */
    }
    .hopclass-site .get-kids-img {
        width: 85vw;
    }
}

/* ========================================
   SECTION 7: THE SCOONEWS ADVANTAGE
   ======================================== */

.hopclass-site .adv-section {
    position: relative;
    width: 100%;
    background-color: #ff9be4; /* Pink background */
    display: flex;
    justify-content: center;
}

/* Giant Yellow Geometric Slab */
.hopclass-site .adv-yellow-slab {
    width: 100%;
    background-color: var(--color-yellow-brand);
    /* Creates the angled left/right edges revealing pink */
    clip-path: polygon(18% 0%, 82% 0%, 100% 100%, 0% 100%);
    display: flex;
    justify-content: center;
    padding: clamp(6rem, 10vw, 10rem) clamp(1.5rem, 5vw, 4rem) clamp(5rem, 8vw, 8rem);
}

.hopclass-site .adv-content-wrapper {
    width: 100%;
    max-width: 1000px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Typography */
.hopclass-site .adv-main-heading {
    font-family: var(--font-vastago);
    font-size: clamp(1.4rem, 2.8vw, 2.75rem);
    font-weight: 900;
    color: var(--color-black);
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: clamp(0.02em, 0.04vw, 0.04em);
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

.hopclass-site .adv-divider {
    width: clamp(140px, 22vw, 320px);
    height: clamp(3px, 0.4vw, 6px);
    background-color: var(--color-black);
    margin: 0 auto clamp(2rem, 4vw, 3.5rem);
}

.hopclass-site .adv-intro-text {
    font-family: var(--font-agrandir);
    font-size: clamp(0.9rem, 1.5vw, 1.3rem);
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.5;
    max-width: 850px;
    margin: 0 auto clamp(3rem, 5vw, 4.5rem);
}

/* Black Pill Cards */
.hopclass-site .adv-cards-container {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
    width: 100%;
    margin-bottom: clamp(3rem, 5vw, 5rem);
}

.hopclass-site .adv-card {
    background-color: var(--color-black);
    border-radius: 999px; /* Pill shape */
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 6vw, 4.5rem);
    text-align: left; /* Text inside card is left-aligned */
    width: 100%;
    /* Subtle hover effect for dynamic feel */
    transition: transform 0.3s ease;
}

.adv-card:hover {
    transform: translateY(-5px);
}

.hopclass-site .adv-card-text {
    color: var(--color-white);
    font-family: var(--font-agrandir);
    font-size: clamp(0.85rem, 1.3vw, 1.15rem);
    line-height: 1.5;
    margin: 0;
    position: relative;
    padding-left: clamp(1.2rem, 2vw, 1.5rem); /* Space for bullet */
}

.hopclass-site .adv-card-bullet {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2em;
    line-height: 1.2;
}

.hopclass-site .adv-card-lead {
    font-family: var(--font-vastago);
    font-weight: 900;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
}

/* Outro Text */
.hopclass-site .adv-outro-text {
    font-family: var(--font-agrandir);
    font-size: clamp(0.9rem, 1.4vw, 1.2rem);
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.6;
    max-width: 850px;
    margin: 0 auto;
}

/* ========================================
   SECTION 7: RESPONSIVE BREAKPOINTS
   ======================================== */

@media screen and (max-width: 1023px) {
    .hopclass-site .adv-yellow-slab {
        /* Widen top edge to ensure content fits */
        clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
    }
}

@media screen and (max-width: 767px) {
    .hopclass-site .adv-yellow-slab {
        /* Even less aggressive angle for mobile readability */
        clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
        padding: clamp(4rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem) clamp(3rem, 6vw, 5rem);
    }
    
    .hopclass-site .adv-card {
        border-radius: 1.5rem; /* Fallback from extreme pill on narrow screens */
        padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2rem);
    }
    
    .hopclass-site .adv-card-text {
        padding-left: 1rem;
    }
}

@media screen and (max-width: 479px) {
    .hopclass-site .adv-yellow-slab {
        /* Just subtle angle on very small screens to maximize space */
        clip-path: polygon(2% 0%, 98% 0%, 100% 100%, 0% 100%);
    }
}

/* ========================================
   SECTION 8: SAFETY AND STRUCTURE
   ======================================== */

.hopclass-site .safety-section {
    background-color: var(--color-yellow-brand);
    padding: clamp(5rem, 8vw, 8rem) clamp(1.5rem, 5vw, 4rem);
    display: flex;
    justify-content: center;
}

.hopclass-site .safety-content-wrapper {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hopclass-site .safety-main-heading {
    font-family: var(--font-vastago);
    font-size: clamp(1.4rem, 2.4vw, 2.4rem);
    font-weight: 900;
    color: var(--color-black);
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: clamp(0.02em, 0.04vw, 0.04em);
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}

.hopclass-site .safety-divider {
    width: clamp(100px, 15vw, 200px);
    height: clamp(3px, 0.4vw, 5px);
    background-color: var(--color-black);
    margin: 0 auto clamp(2rem, 3vw, 3rem);
}

.hopclass-site .safety-intro-text {
    font-family: var(--font-agrandir);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.5;
    max-width: 900px;
    margin: 0 auto clamp(3rem, 5vw, 5rem);
}

.hopclass-site .safety-cards-container {
    display: flex;
    flex-direction: row;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    width: 100%;
}

.hopclass-site .safety-card {
    background-color: var(--color-black);
    border-radius: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(2rem, 4vw, 3rem);
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.hopclass-site .safety-card-title {
    font-family: var(--font-vastago);
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    font-weight: 900;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

.hopclass-site .safety-card-list {
    list-style: disc;
    padding-left: clamp(1.5rem, 2vw, 2rem);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 1.5vw, 1.5rem);
}

.hopclass-site .safety-card-list li {
    font-family: var(--font-agrandir);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.5;
}

/* ========================================
   SECTION 9: HOW TO BEGIN
   ======================================== */

.hopclass-site .begin-section {
    background-color: #fa5604; /* Orange background */
    padding: clamp(5rem, 8vw, 8rem) clamp(1.5rem, 5vw, 4rem);
    display: flex;
    justify-content: center;
}

.hopclass-site .begin-content-wrapper {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hopclass-site .begin-main-heading {
    font-family: var(--font-vastago);
    font-size: clamp(1.6rem, 3vw, 2.75rem);
    font-weight: 900;
    color: var(--color-white);
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: clamp(0.02em, 0.04vw, 0.04em);
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}

.hopclass-site .begin-divider {
    width: clamp(120px, 18vw, 250px);
    height: clamp(3px, 0.4vw, 5px);
    background-color: var(--color-white);
    margin: 0 auto clamp(2rem, 3vw, 3rem);
}

.hopclass-site .begin-intro-text {
    font-family: var(--font-agrandir);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.6;
    margin: 0 auto clamp(3rem, 5vw, 4.5rem);
}

.hopclass-site .begin-yellow-pill {
    background-color: var(--color-yellow-brand);
    border-radius: 999px; /* Pill shape */
    padding: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 6rem);
    width: auto;
    display: inline-block;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.begin-yellow-pill:hover {
    transform: translateY(-5px);
}

.hopclass-site .begin-yellow-pill p {
    font-family: var(--font-vastago);
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 900;
    color: var(--color-black);
    text-transform: uppercase;
    line-height: 1.4;
    margin: 0;
}

/* ========================================
   SECTION 8 & 9: RESPONSIVE BREAKPOINTS
   ======================================== */

@media screen and (max-width: 767px) {
    .hopclass-site .safety-cards-container {
        flex-direction: column;
    }
    
    .hopclass-site .begin-yellow-pill {
        border-radius: 2rem; /* Reduce extreme pill shape on mobile */
        width: 100%;
        padding: clamp(1.5rem, 5vw, 2rem) clamp(1.5rem, 5vw, 2rem);
    }
}

/* ========================================
   SECTION 10: CONTACT / SPEAK TO US
   ======================================== */

.hopclass-site .contact-section {
    background-color: var(--color-black); /* Deep black outer background */
    padding: 0 clamp(1.5rem, 5vw, 4rem); /* Removed top/bottom padding to fix layout */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Contains the flower asset cleanly */
}

.hopclass-site .contact-flower-container {
    position: relative;
    /* Massive scaling: dominates the composition, leaving black only as framing */
    width: min(92vw, 1600px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.hopclass-site .contact-flower-img {
    width: 100%;
    /* Allow the image to stretch into an organic, horizontal slab shape if needed */
    height: auto;
    display: block;
    object-fit: fill; 
    /* By scaling the width significantly larger, the natural silhouette becomes wider and flatter */
}

.hopclass-site .contact-content-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%; /* Keep text comfortably inside the flower's solid yellow area */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 4vw, 4rem); /* Dramatic increase in vertical breathing room */
}

.hopclass-site .contact-heading {
    font-family: var(--font-vastago);
    font-size: clamp(1.75rem, 3.2vw, 3rem);
    font-weight: 900;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: clamp(0.02em, 0.04vw, 0.04em);
    margin: 0;
}

.hopclass-site .contact-divider {
    width: clamp(180px, 30vw, 400px);
    height: clamp(3px, 0.4vw, 6px);
    background-color: var(--color-black);
    margin: 0;
}

.hopclass-site .contact-person-info {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 1rem); /* Rhythm between name/role */
    margin: 0;
}

.hopclass-site .contact-name {
    font-family: var(--font-vastago);
    font-weight: 900;
    font-size: clamp(1.4rem, 2.8vw, 2.2rem);
    color: var(--color-black);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.02em;
}

.hopclass-site .contact-role, .hopclass-site .contact-company {
    font-family: var(--font-agrandir);
    font-weight: 400;
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    color: var(--color-black);
    text-transform: uppercase;
    margin: 0;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.hopclass-site .contact-email {
    font-family: var(--font-vastago);
    font-weight: 900;
    font-size: clamp(1.4rem, 2.8vw, 2.2rem);
    color: var(--color-black);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.02em;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.contact-email:hover {
    opacity: 0.7;
}

/* ========================================
   SECTION 10: RESPONSIVE BREAKPOINTS
   ======================================== */

@media screen and (max-width: 767px) {
    .hopclass-site .contact-section {
        /* Vertical padding so heading/email aren't clipped at section edges */
        padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 4vw, 2rem);
    }

    .hopclass-site .contact-flower-container {
        width: 110vw;
        max-width: 110vw;
    }

    /* Narrow overlay so text stays inside the flower's central yellow column,
       clear of the scalloped edge cutouts */
    .hopclass-site .contact-content-overlay {
        width: 70%;
        gap: clamp(1.25rem, 4vw, 2.5rem);
    }

    .hopclass-site .contact-heading {
        font-size: clamp(1.5rem, 6vw, 2.25rem);
    }

    .hopclass-site .contact-divider {
        width: clamp(120px, 32vw, 220px);
    }

    .hopclass-site .contact-name, .hopclass-site .contact-email {
        font-size: clamp(1rem, 4.2vw, 1.5rem);
    }

    .hopclass-site .contact-role, .hopclass-site .contact-company {
        font-size: clamp(0.85rem, 3.4vw, 1.2rem);
    }
}

@media screen and (max-width: 479px) {
    .hopclass-site .contact-section {
        padding: clamp(2.5rem, 9vw, 4rem) clamp(0.75rem, 3vw, 1.5rem);
    }

    .hopclass-site .contact-flower-container {
        width: 115vw;
        max-width: 115vw;
    }

    .hopclass-site .contact-content-overlay {
        width: 68%;
        gap: clamp(1rem, 3.5vw, 2rem);
    }

    .hopclass-site .contact-heading {
        font-size: clamp(1.25rem, 6.5vw, 1.85rem);
    }

    .hopclass-site .contact-name, .hopclass-site .contact-email {
        font-size: clamp(0.9rem, 4.5vw, 1.25rem);
    }

    .hopclass-site .contact-role, .hopclass-site .contact-company {
        font-size: clamp(0.75rem, 3.6vw, 1.05rem);
    }
}