/* Home Page - Custom Styles */
.home-new-hero {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a192f 0%, #112240 50%, #1e3a5f 100%);
    color: white;
    padding: 4rem 2rem;
    position: relative;
    overflow: hidden;
}

.home-new-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(100, 255, 218, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(23, 233, 164, 0.1) 0%, transparent 40%);
}

.home-new-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.home-new-hero-content {
    animation: home-new-fade-in 1s ease-out;
}

@keyframes home-new-fade-in {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.home-new-hero-badge {
    margin-bottom: 2rem;
}

.home-new-badge-text {
    background: linear-gradient(90deg, #64ffda, #17e9a4);
    padding: 0.7rem 1.8rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: #0a192f;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(100, 255, 218, 0.3);
    animation: home-new-badge-pulse 2s infinite;
}

@keyframes home-new-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.home-new-hero-title {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: white;
}

.home-new-highlight {
    color: #64ffda;
    position: relative;
    display: inline-block;
}

.home-new-highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: rgba(100, 255, 218, 0.3);
    z-index: -1;
    border-radius: 4px;
}

.home-new-hero-subtitle {
    font-size: 1.3rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    opacity: 0.9;
}

.home-new-hero-stats {
    display: flex;
    gap: 3rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.home-new-stat {
    text-align: center;
}

.home-new-stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: #64ffda;
    margin-bottom: 0.5rem;
    font-family: 'Arial Black', sans-serif;
    line-height: 1;
}

.home-new-stat-label {
    font-size: 0.95rem;
    opacity: 0.8;
    font-weight: 600;
}

.home-new-hero-actions {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.home-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 2.5rem;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
}

.home-new-btn-primary {
    background: linear-gradient(90deg, #64ffda, #17e9a4);
    color: #0a192f;
    box-shadow: 0 6px 20px rgba(100, 255, 218, 0.4);
}

.home-new-btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(100, 255, 218, 0.6);
    background: linear-gradient(90deg, #17e9a4, #14cc8f);
}

.home-new-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(100, 255, 218, 0.3);
    backdrop-filter: blur(10px);
}

.home-new-btn-secondary:hover {
    background: rgba(100, 255, 218, 0.1);
    transform: translateY(-5px);
    border-color: #64ffda;
}

.home-new-hero-visual {
    position: relative;
    height: 500px;
}

.home-new-globe-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
}

.home-new-globe {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.1), rgba(100, 255, 218, 0.05));
    border: 2px solid rgba(100, 255, 218, 0.3);
    position: relative;
    animation: home-new-globe-rotate 30s infinite linear;
}

@keyframes home-new-globe-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.home-new-globe-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    border-radius: 50%;
    border: 1px solid rgba(100, 255, 218, 0.2);
}

.home-new-globe-line {
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(100, 255, 218, 0.2);
    top: 50%;
    left: 0;
}

.home-new-globe-line:nth-child(1) {
    transform: rotate(0deg);
}

.home-new-globe-line:nth-child(2) {
    transform: rotate(60deg);
}

.home-new-globe-line:nth-child(3) {
    transform: rotate(120deg);
}

.home-new-location {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #64ffda;
    animation: home-new-location-pulse 3s infinite;
}

@keyframes home-new-location-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.home-new-location i {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
}

.home-new-location span {
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
}

.home-new-location-1 {
    top: 20%;
    left: 70%;
}

.home-new-location-2 {
    top: 60%;
    left: 10%;
}

.home-new-location-3 {
    top: 80%;
    left: 60%;
}

.home-new-location-4 {
    top: 40%;
    left: 20%;
}

.home-new-certificate-preview {
    position: absolute;
    bottom: 0;
    right: 0;
}

.home-new-certificate {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 1.5rem;
    color: #0a192f;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: rotate(5deg);
    animation: home-new-certificate-float 6s infinite ease-in-out;
    width: 200px;
}

@keyframes home-new-certificate-float {
    0%, 100% { transform: rotate(5deg) translateY(0); }
    50% { transform: rotate(5deg) translateY(-15px); }
}

.home-new-certificate-content {
    text-align: center;
}

.home-new-certificate-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
    color: #0a192f;
}

.home-new-certificate-subtitle {
    font-size: 0.8rem;
    color: #1e3a5f;
    margin-bottom: 1rem;
}

.home-new-certificate-badge {
    font-size: 3rem;
    color: #64ffda;
}

.home-new-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.home-new-scroll-dots {
    display: flex;
    gap: 0.5rem;
}

.home-new-scroll-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.home-new-scroll-dot.active {
    background: #64ffda;
    transform: scale(1.2);
}

.home-new-courses {
    padding: 6rem 2rem;
    background: white;
}

.home-new-container {
    max-width: 1300px;
    margin: 0 auto;
}

.home-new-courses-header {
    text-align: center;
    margin-bottom: 5rem;
}

.home-new-section-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: #0a192f;
    line-height: 1.2;
}

.home-new-accent {
    color: #03a9f4;
}

.home-new-accent-down {
    color: #FF9800;
}


.home-new-section-subtitle {
    font-size: 1.2rem;
    color: #1e3a5f;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
}

.home-new-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-bottom: 5rem;
}

.home-new-course-card {
    background: linear-gradient(90deg, #FFC107, #ff5722c2);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.home-new-course-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.home-new-course-card-2 {
    background: linear-gradient(90deg, #8BC34A, #009688db);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.home-new-course-card-2:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.home-new-course-card-3 {
    background: linear-gradient(90deg, #03a9f4de, #607D8B);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.home-new-course-card-3:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.home-new-course-card-4 {
    background: linear-gradient(90deg, #FF9800, #607D8B);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.home-new-course-card-4:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.home-new-course-badge {
    position: absolute;
    top: 0.3rem;
    right: 1rem;
    background: #64ffda;
    color: #0a192f;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.7rem;
    z-index: 2;
}

.home-new-course-master .home-new-course-badge {
    background: linear-gradient(90deg, #FFC107, #ffc107c2);
}

.home-new-course-advanced .home-new-course-badge {
    background: #b7ec79;
}

.home-new-course-foundation .home-new-course-badge {
    background: #6bcdf9;
    color: white;
}

.home-new-course-elementary .home-new-course-badge {
    background: #ff9800e8;
    color: white;
}

.home-new-course-header {
    padding: 2.5rem 2rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.home-new-course-icon {
    font-size: 3.5rem;
    margin-bottom: 1.2rem;
}

.home-new-course-master .home-new-course-icon {
    color: #ffd166;
}

.home-new-course-advanced .home-new-course-icon {
    color: #b7ec79;
}

.home-new-course-foundation .home-new-course-icon {
    color: #6bcdf9;
}

.home-new-course-elementary .home-new-course-icon {
    color: #ff9800e8;
}

.home-new-course-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: -0.5rem;
    color: #fff;
}

.home-new-course-hours {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
}

.home-new-course-body {
    padding: 2rem;
    flex-grow: 1;
}

.home-new-course-description {
    color: #fff;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}

.home-new-course-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.home-new-course-features li {
    padding: 0.6rem 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: #fff;
    font-size: 13px;
}

.home-new-course-features li:last-child {
    border-bottom: none;
}

.home-new-course-features li i {
    color: #fff;
    font-size: 1rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.home-new-course-price {
    text-align: center;
    margin-top: auto;
}

.home-new-price-old {
    font-size: 1.2rem;
    color: #c0c0c0;
    text-decoration: line-through;
    margin-bottom: -0.7rem;
}

.home-new-price-current {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0a192f;
    margin-bottom: 0.3rem;
}

.home-new-course-master .home-new-price-current {
    color: #fff;
}

.home-new-course-advanced .home-new-price-current {
    color: #fff;
}

.home-new-course-foundation .home-new-price-current {
    color: #fff;
}

.home-new-course-elementary .home-new-price-current {
    color: #fff;
}

.home-new-price-note {
    color: #fff;
    font-size: 0.9rem;
    opacity: 0.8;
}

.home-new-course-footer {
    padding: 0 2rem 2rem;
}

.home-new-course-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    padding: 1rem;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    background: #fe710cbf;
    color: white;
    border: none;
    cursor: pointer;
}

.home-new-course-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(10, 25, 47, 0.3);
    background: #ecff3ba6;
    
}

.home-new-course-btn-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    padding: 1rem;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    background: #2bd6c68a;
    color: white;
    border: none;
    cursor: pointer;
}

.home-new-course-btn-2:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(10, 25, 47, 0.3);
    background: #ecff3ba6;
    
}

.home-new-course-btn-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    padding: 1rem;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    background: #0278d6d4;
    color: white;
    border: none;
    cursor: pointer;
}

.home-new-course-btn-3:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(10, 25, 47, 0.3);
    background: #ecff3ba6;
    
}

.home-new-course-btn-4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    padding: 1rem;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    background: #cddb44d4;
    color: white;
    border: none;
    cursor: pointer;
}

.home-new-course-btn-4:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(10, 25, 47, 0.3);
    background: #ff9800;
    
}

.home-new-courses-cta {
    background: linear-gradient(90deg, #0a192f, #112240);
    border-radius: 20px;
    padding: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    color: white;
}

.home-new-cta-content {
    flex: 1;
    min-width: 300px;
}

.home-new-cta-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: white;
}

.home-new-cta-text {
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.6;
    margin: 0;
}

.home-new-cta-action {
    flex-shrink: 0;
}

.home-new-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(90deg, #64ffda, #17e9a4);
    color: #0a192f;
    padding: 1.2rem 2.5rem;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
}

.home-new-cta-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(100, 255, 218, 0.4);
}

.home-new-specializations {
    padding: 4rem 1rem;
    background: linear-gradient(90deg, #ff980063, #8bc34aa8);
    color: white;
}

.home-new-specializations-header {
    text-align: center;
    margin-bottom: 5rem;
}

.home-new-specializations .home-new-section-title {
    color: white;
}

.home-new-specializations .home-new-section-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

.home-new-specializations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 5rem;
    margin-bottom: 5rem;
}

.home-new-specialization-card {
    background: linear-gradient(90deg, #03a9f4de, #607D8B);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(100, 255, 218, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.home-new-specialization-card:hover {
    transform: translateY(-10px);
    border-color: #FFEB3B;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.home-new-specialization-card-2 {
    background: linear-gradient(90deg, #FF9800, #607D8B);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(100, 255, 218, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.home-new-specialization-card-2:hover {
    transform: translateY(-10px);
    border-color: #FFEB3B;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.home-new-specialization-card-3 {
    background: linear-gradient(90deg, #8BC34A, #009688db);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(100, 255, 218, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.home-new-specialization-card-3:hover {
    transform: translateY(-10px);
    border-color: #FFEB3B;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.home-new-specialization-visual {
    padding: 1.2rem;
    text-align: center;
    position: relative;
}

.home-new-specialization-icon {
    font-size: 4rem;
    color: #38e4d4;
    margin-bottom: 1rem;
}

.home-new-specialization-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: #ff9800ab;
    color: #e5ebee;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.8rem;
}

.home-new-specialization-content {
    padding: 0 1.5rem 1.5rem;
}

.home-new-specialization-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: white;
}

.home-new-specialization-description {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.home-new-specialization-details {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.home-new-specialization-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    flex: 1;
    min-width: 100px;
}

.home-new-specialization-detail i {
    font-size: 1.5rem;
    color: #38e4d4;
}

.home-new-specialization-detail span {
    font-size: 0.9rem;
    font-weight: 600;
}

.home-new-specialization-price {
    text-align: center;
    margin-bottom: 1.5rem;
}

.home-new-specialization-price-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    display: block;
}

.home-new-specialization-price-note {
    font-size: 0.9rem;
    opacity: 0.8;
}

.home-new-specialization-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    padding: 1rem;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgb(3 169 244 / 69%);
    color: #fff;
    border: 1px solid #03A9F4;
}

.home-new-specialization-btn:hover {
    background: #ffc107c7;
    transform: translateY(-3px);
}

.home-new-specializations-info {
    max-width: 800px;
    margin: 0 auto;
}

.home-new-info-card {
    background: linear-gradient(90deg, #8BC34A, #ff98008a);
    border-radius: 20px;
    padding: 2.5rem;
    display: flex;
    gap: 2rem;
    align-items: center;
    border: 1px solid rgba(100, 255, 218, 0.1);
    backdrop-filter: blur(10px);
}

.home-new-info-icon {
    font-size: 3rem;
    color: #10e2ce;
    flex-shrink: 0;
}

.home-new-info-content h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: white;
}

.home-new-info-text {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
}

.home-new-certification {
    padding: 6rem 2rem;
    background: #f8f9fa;
}

.home-new-certification-header {
    text-align: center;
    margin-bottom: 5rem;
}

.home-new-certification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    margin-bottom: 5rem;
}

.home-new-certification-feature {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-align: center;
}

.home-new-certification-feature:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.home-new-feature-icon {
    margin-bottom: 1.5rem;
}

.home-new-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #64ffda, #17e9a4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #0a192f;
    font-size: 2rem;
}

.home-new-feature-content h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #0a192f;
}

.home-new-feature-text {
    color: #1e3a5f;
    line-height: 1.6;
    margin: 0;
}

.home-new-certification-showcase {
    background: linear-gradient(90deg, #2196F3, #112240);
    border-radius: 25px;
    padding: 4rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: center;
    color: white;
}

.home-new-showcase-content h3 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: white;
}

.home-new-showcase-text {
    font-size: 1.2rem;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 3rem;
}

.home-new-showcase-stats {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
}

.home-new-showcase-stat {
    text-align: center;
}

.home-new-showcase-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
}

.home-new-showcase-label {
    font-size: 0.9rem;
    opacity: 0.8;
    font-weight: 600;
}

.home-new-showcase-visual {
    position: relative;
}

.home-new-showcase-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    overflow: hidden;
    color: #0a192f;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transform: rotate(3deg);
    animation: home-new-card-tilt 10s infinite ease-in-out;
}

@keyframes home-new-card-tilt {
    0%, 100% { transform: rotate(3deg); }
    50% { transform: rotate(1deg); }
}

.home-new-card-front {
    padding: 2rem;
    background: #e7f3f8;
}

.home-new-card-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #03a9f4;
}

.home-new-card-header h4 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: #03A9F4;
}

.home-new-card-header p {
    color: #1e3a5f;
    font-size: 0.9rem;
    margin: 0;
}

.home-new-card-body {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.home-new-card-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #03a9f4bd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    flex-shrink: 0;
}

.home-new-card-info {
    flex: 1;
}

.home-new-card-info p {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.home-new-card-footer {
    text-align: center;
}

.home-new-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgb(3 169 244 / 81%);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
}

.home-new-card-badge i {
    color: #fff;
}

.home-new-testimonials {
    padding: 6rem 2rem;
    background: linear-gradient(135deg, #0a192f 0%, #112240 100%);
    color: white;
}

.home-new-testimonials-header {
    text-align: center;
    margin-bottom: 5rem;
}

.home-new-testimonials .home-new-section-title {
    color: white;
}

.home-new-testimonials .home-new-section-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

.home-new-testimonials-slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    margin-bottom: 5rem;
}

.home-new-testimonial-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2.5rem;
    border: 1px solid rgba(100, 255, 218, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.home-new-testimonial-card:hover {
    border-color: #64ffda;
    transform: translateY(-10px);
}

.home-new-testimonial-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
}

.home-new-testimonial-author {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.home-new-author-avatar {
    font-size: 3rem;
    color: #64ffda;
    flex-shrink: 0;
}

.home-new-author-info h4 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
    color: white;
}

.home-new-author-info p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.home-new-author-rating {
    color: #ffd166;
    font-size: 0.9rem;
}

.home-new-testimonials-cta {
    max-width: 800px;
    margin: 0 auto;
}

.home-new-cta-card {
    background: linear-gradient(90deg, #03A9F4, #FF9800);
    border-radius: 20px;
    padding: 3rem;
    color: #0a192f;
    text-align: center;
    box-shadow: 0 20px 50px rgba(100, 255, 218, 0.3);
}

.home-new-cta-card-content h3 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #fbfbfc;
}

.home-new-cta-card-text {
    font-size: 1.0rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    color: #fff;
    opacity: 0.9;
}

.home-new-cta-card-action {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

.home-new-cta-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: #51c6fbc4;
    color: white;
    padding: 1.2rem 2.5rem;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
}

.home-new-cta-card-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(10, 25, 47, 0.4);
    
}

.home-new-cta-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    border: 2px solid #ffeb3b54;
    padding: 1.2rem 2.5rem;
    border-radius: 10px;
}

.home-new-cta-card-link:hover {
    background: rgba(10, 25, 47, 0.1);
    transform: translateY(-5px);
}

.home-new-cta-card-btn,
.home-new-cta-card-link {
    position: relative;
    z-index: 20;
    pointer-events: auto;
}

.home-new-faq {
    padding: 6rem 2rem;
    background: #f8f9fa;
}

.home-new-faq-header {
    text-align: center;
    margin-bottom: 5rem;
}

.home-new-faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2.5rem;
    margin-bottom: 5rem;
}

@media (max-width: 1100px) {
    .home-new-faq-grid {
        grid-template-columns: 1fr;
    }
}

.home-new-faq-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.home-new-faq-item {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.home-new-faq-item:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

.home-new-faq-question {
    padding: 1.8rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.home-new-faq-question h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #676767;
    flex: 1;
}

.home-new-faq-question i {
    color: #64ffda;
    transition: transform 0.3s ease;
    margin-left: 1rem;
}

.home-new-faq-item.active .home-new-faq-question i {
    transform: rotate(180deg);
}

.home-new-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.home-new-faq-item.active .home-new-faq-answer {
    max-height: 300px;
}

.home-new-faq-answer p {
    padding: 1.8rem;
    margin: 0;
    color: #1e3a5f;
    line-height: 1.7;
}

.home-new-faq-cta {
    background: linear-gradient(90deg, #4c568e, #2196F3);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    color: white;
}

.home-new-faq-cta-content h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: white;
}

.home-new-faq-cta-text {
    font-size: 1.2rem;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.home-new-faq-cta-action {
    display: inline-block;
}

.home-new-faq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(90deg, #f1edcbcf, #ece7bf);;
    color: #f6f7f9;
    padding: 1.2rem 2.5rem;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
}

.home-new-faq-cta-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(100, 255, 218, 0.4);
}

.home-new-travel-btn {
    min-width: 420px;      /* 👈 makes it wider */
    max-width: 700px;      /* 👈 prevents it from going crazy */
    width: 100%;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 1.4rem 3.5rem;
    text-align: center;
}



.home-new-travel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;

    background: linear-gradient(90deg, #2196F3, #03A9F4);
    color: #f6f7f9;

    padding: 1.3rem 3rem;
    border-radius: 12px;

    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1.4;

    text-decoration: none;
    border: none;
    cursor: pointer;

    max-width: 90%;
    text-align: center;
    white-space: normal;   /* allows text wrapping */
}


.home-new-travel-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(100, 255, 218, 0.4);
}

@media (max-width: 768px) {
    .home-new-travel-btn {
        font-size: 1rem;
        padding: 1.1rem 2rem;
    }
}


/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .home-new-hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }
    
    .home-new-hero-stats {
        justify-content: center;
    }
    
    .home-new-hero-actions {
        justify-content: center;
    }
    
    .home-new-hero-visual {
        height: 400px;
    }
    
    .home-new-certification-showcase {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .home-new-showcase-stats {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .home-new-hero {
        padding: 3rem 1.5rem;
    }
    
    .home-new-hero-title {
        font-size: 2.5rem;
    }
    
    .home-new-section-title {
        font-size: 2.2rem;
    }
    
    .home-new-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .home-new-courses-grid {
        grid-template-columns: 1fr;
    }
    
    .home-new-specializations-grid {
        grid-template-columns: 1fr;
    }
    
    .home-new-certification-grid {
        grid-template-columns: 1fr;
    }
    
    .home-new-testimonials-slider {
        grid-template-columns: 1fr;
    }
    
    .home-new-faq-grid {
        grid-template-columns: 1fr;
    }
    
    .home-new-info-card {
        flex-direction: column;
        text-align: center;
    }
    
    .home-new-cta-card-action {
        flex-direction: column;
        align-items: center;
    }
    
    .home-new-cta-card-btn,
    .home-new-cta-card-link {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .home-new-hero-title {
        font-size: 2rem;
    }
    
    .home-new-section-title {
        font-size: 1.8rem;
    }
    
    .home-new-hero-stats {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }
    
    .home-new-stat-number {
        font-size: 2.5rem;
    }
    
    .home-new-globe-container {
        width: 250px;
        height: 250px;
    }
    
    .home-new-specialization-details {
        flex-direction: column;
        align-items: center;
    }
    
    .home-new-specialization-detail {
        min-width: 100%;
    }
    
    .home-new-faq-question h3 {
        font-size: 1.1rem;
    }
}

/* cookie-css.css - Cookie Policy Page Styling - All classes prefixed with cookie-css- */

/* Section Styling */
.cookie-css-section {
    background: linear-gradient(135deg, #fff9e6 0%, #fff5d6 100%);
    padding: 2rem 0 4rem;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

/* Header Styling */
.cookie-css-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2.5rem 2rem;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(139, 87, 42, 0.1);
    border: 2px solid #ffcc80;
    position: relative;
    overflow: hidden;
}

.cookie-css-header::before {
    content: '🍪 🍪 🍪';
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 4rem;
    opacity: 0.1;
    z-index: 0;
}

.cookie-css-header-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: cookie-css-bounce 2s infinite;
}

@keyframes cookie-css-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.cookie-css-title {
    color: #5d4037;
    font-size: 3rem;
    margin-bottom: 0.8rem;
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.cookie-css-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #ff9800, #ffb74d);
    border-radius: 2px;
}

.cookie-css-update {
    color: #8d6e63;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    background-color: #fff3e0;
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    display: inline-block;
    font-weight: 600;
}

.cookie-css-intro {
    color: #5d4037;
    font-size: 1.2rem;
    line-height: 1.7;
    max-width: 900px;
    margin: 1.5rem auto 0;
    padding: 1.5rem;
    background-color: #fff8e1;
    border-radius: 12px;
    border-left: 5px solid #ffb300;
    position: relative;
    z-index: 1;
}

/* Content Layout */
.cookie-css-content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .cookie-css-content {
        flex-direction: row;
    }
}

/* Navigation Styling */
.cookie-css-navigation {
    flex: 0 0 320px;
    background-color: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 25px rgba(139, 87, 42, 0.1);
    height: fit-content;
    position: sticky;
    top: 20px;
    border: 2px solid #ffcc80;
}

.cookie-css-nav-title {
    color: #5d4037;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #ffcc80;
}

.cookie-css-toc {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.cookie-css-toc-item {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    background-color: #fff8e1;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.cookie-css-toc-item:hover {
    background-color: #ffecb3;
    border-left: 4px solid #ff9800;
    transform: translateX(5px);
}

.cookie-css-toc-item.cookie-css-active {
    background-color: #ffe0b2;
    border-left: 4px solid #ff9800;
    font-weight: 600;
}

.cookie-css-toc-link {
    color: #5d4037;
    text-decoration: none;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    font-weight: 500;
}

.cookie-css-toc-link::before {
    content: '🍪';
    margin-right: 10px;
    font-size: 1.2rem;
}

/* Cookie Control Card */
.cookie-css-control-card {
    background: linear-gradient(135deg, #ffe0b2 0%, #ffcc80 100%);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    border: 2px solid #ffb74d;
    margin-top: 1.5rem;
}

.cookie-css-control-title {
    color: #5d4037;
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
}

.cookie-css-control-text {
    color: #8d6e63;
    margin-bottom: 1.2rem;
    font-size: 0.95rem;
}

.cookie-css-control-btn {
    background-color: #ff9800;
    color: white;
    border: none;
    padding: 0.8rem 1.8rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1.2rem;
    font-size: 1rem;
    width: 100%;
}

.cookie-css-control-btn:hover {
    background-color: #f57c00;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.3);
}

.cookie-css-status {
    background-color: white;
    border-radius: 8px;
    padding: 0.8rem;
    font-size: 0.9rem;
}

.cookie-css-status-text {
    margin: 0;
    color: #5d4037;
}

.cookie-css-status-value {
    font-weight: 600;
    color: #ff9800;
}

/* Articles Styling */
.cookie-css-articles {
    flex: 1;
    background-color: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 25px rgba(139, 87, 42, 0.1);
    border: 2px solid #ffcc80;
}

.cookie-css-article {
    margin-bottom: 3.5rem;
    scroll-margin-top: 20px;
    padding-bottom: 2.5rem;
    border-bottom: 2px dashed #ffcc80;
}

.cookie-css-article:last-of-type {
    border-bottom: none;
    margin-bottom: 1.5rem;
}

.cookie-css-article-title {
    color: #5d4037;
    font-size: 1.9rem;
    margin-bottom: 1.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #ffecb3;
    position: relative;
}

.cookie-css-article-title::before {
    content: '🍪';
    position: absolute;
    left: -40px;
    font-size: 1.5rem;
}

.cookie-css-paragraph {
    color: #6d4c41;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1.08rem;
}

/* Cookie Explanation Section */
.cookie-css-explanation {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

@media (min-width: 768px) {
    .cookie-css-explanation {
        flex-direction: row;
        align-items: center;
    }
}

.cookie-css-explanation-visual {
    flex: 1;
    display: flex;
    justify-content: center;
}

.cookie-css-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.cookie-css-image {
    font-size: 5rem;
    animation: cookie-css-rotate 20s infinite linear;
}

@keyframes cookie-css-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cookie-css-arrows {
    display: flex;
    gap: 2rem;
}

.cookie-css-arrow {
    width: 30px;
    height: 2px;
    background-color: #ff9800;
    position: relative;
}

.cookie-css-arrow::after {
    content: '';
    position: absolute;
    right: -5px;
    top: -4px;
    width: 0;
    height: 0;
    border-left: 10px solid #ff9800;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.cookie-css-text {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.cookie-css-text-item {
    background-color: #fff3e0;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #5d4037;
    font-weight: 500;
    border: 1px solid #ffcc80;
}

.cookie-css-explanation-content {
    flex: 1.5;
}

/* Reasons Grid */
.cookie-css-reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.8rem;
    margin: 2.5rem 0;
}

.cookie-css-reason-card {
    background-color: white;
    border-radius: 15px;
    padding: 1.8rem;
    text-align: center;
    border: 2px solid;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.cookie-css-reason-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.cookie-css-reason-essential {
    border-color: #4caf50;
}

.cookie-css-reason-performance {
    border-color: #2196f3;
}

.cookie-css-reason-functionality {
    border-color: #ff9800;
}

.cookie-css-reason-personalization {
    border-color: #9c27b0;
}

.cookie-css-reason-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.cookie-css-reason-title {
    color: #5d4037;
    margin: 0.5rem 0;
    font-size: 1.3rem;
}

.cookie-css-reason-text {
    color: #8d6e63;
    font-size: 1rem;
    margin-bottom: 0;
}

/* Cookie Types Container */
.cookie-css-types-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0;
}

.cookie-css-type-card {
    background-color: #fff8e1;
    border-radius: 15px;
    padding: 1.8rem;
    border: 2px solid #ffcc80;
    transition: all 0.3s ease;
}

.cookie-css-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 152, 0, 0.1);
}

.cookie-css-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

.cookie-css-type-title {
    color: #5d4037;
    margin: 0;
    font-size: 1.3rem;
}

.cookie-css-duration, .cookie-css-ownership {
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-weight: 600;
}

.cookie-css-duration {
    background-color: #e1f5fe;
    color: #0277bd;
}

.cookie-css-ownership {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.cookie-css-type-text {
    color: #6d4c41;
    margin-bottom: 1.2rem;
    font-size: 1rem;
}

.cookie-css-examples {
    background-color: white;
    padding: 1rem;
    border-radius: 10px;
    border-left: 4px solid #ff9800;
    font-size: 0.95rem;
    color: #8d6e63;
}

.cookie-css-examples-title {
    color: #5d4037;
}

/* Cookie Table */
.cookie-css-table-container {
    overflow-x: auto;
    margin: 2.5rem 0;
    border-radius: 12px;
    border: 2px solid #ffcc80;
}

.cookie-css-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.cookie-css-table-header {
    background-color: #ff9800;
}

.cookie-css-table-head {
    color: white;
    padding: 1.2rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 1.1rem;
}

.cookie-css-table-body .cookie-css-table-row {
    border-bottom: 1px solid #ffcc80;
}

.cookie-css-table-body .cookie-css-table-row:nth-child(even) {
    background-color: #fff8e1;
}

.cookie-css-table-body .cookie-css-table-row:hover {
    background-color: #ffecb3;
}

.cookie-css-table-cell {
    padding: 1rem;
    color: #5d4037;
}

.cookie-css-code {
    background-color: #fff3e0;
    padding: 0.3rem 0.6rem;
    border-radius: 5px;
    font-family: monospace;
    font-size: 0.9rem;
    color: #d84315;
}

.cookie-css-essential-badge, .cookie-css-non-essential-badge {
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.cookie-css-essential-badge {
    background-color: #c8e6c9;
    color: #2e7d32;
}

.cookie-css-non-essential-badge {
    background-color: #ffcdd2;
    color: #c62828;
}

.cookie-css-note {
    background-color: #e3f2fd;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
    border-left: 5px solid #2196f3;
}

.cookie-css-strong {
    color: #1565c0;
}

/* Control Methods */
.cookie-css-control-methods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0;
}

.cookie-css-control-method {
    background-color: #fff8e1;
    border-radius: 15px;
    padding: 1.8rem;
    border: 2px solid #ffcc80;
}

.cookie-css-control-method-title {
    color: #5d4037;
    margin-top: 0;
    margin-bottom: 1.2rem;
    font-size: 1.3rem;
}

.cookie-css-control-method-text {
    color: #6d4c41;
    margin-bottom: 1.5rem;
}

.cookie-css-browser-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.cookie-css-browser-item {
    margin-bottom: 0.8rem;
    padding: 0.8rem;
    background-color: white;
    border-radius: 8px;
}

.cookie-css-browser-link {
    color: #ff9800;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.cookie-css-browser-link::before {
    content: '🌐';
    margin-right: 10px;
}

.cookie-css-browser-link:hover {
    text-decoration: underline;
}

.cookie-css-pref-btn {
    background-color: #ff9800;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    width: 100%;
}

.cookie-css-pref-btn:hover {
    background-color: #f57c00;
}

.cookie-css-small-note {
    font-size: 0.9rem;
    color: #8d6e63;
    margin-top: 0.8rem;
    margin-bottom: 0;
}

.cookie-css-warning {
    background-color: #ffebee;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
    border-left: 5px solid #f44336;
}

.cookie-css-warning-title {
    color: #c62828;
    margin-top: 0;
    margin-bottom: 0.8rem;
}

.cookie-css-warning-text {
    color: #d32f2f;
    margin-bottom: 0;
}

/* Preference Options */
.cookie-css-preference-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0;
}

.cookie-css-preference-option {
    background-color: white;
    border-radius: 15px;
    padding: 1.8rem;
    text-align: center;
    border: 2px solid #ffcc80;
    transition: all 0.3s ease;
}

.cookie-css-preference-option:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 152, 0, 0.1);
}

.cookie-css-preference-title {
    color: #5d4037;
    margin-top: 0;
    margin-bottom: 1rem;
}

.cookie-css-preference-text {
    color: #6d4c41;
    margin-bottom: 1.5rem;
}

.cookie-css-pref-option-btn {
    background-color: #ff9800;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    width: 100%;
}

.cookie-css-pref-option-btn.cookie-css-accept-all {
    background-color: #4caf50;
}

.cookie-css-pref-option-btn.cookie-css-essential-only {
    background-color: #2196f3;
}

.cookie-css-pref-option-btn.cookie-css-customize {
    background-color: #9c27b0;
}

.cookie-css-pref-option-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Contact Details */
.cookie-css-contact-details {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0;
}

.cookie-css-contact-detail {
    background-color: #e3f2fd;
    border-radius: 15px;
    padding: 1.8rem;
}

.cookie-css-contact-title {
    color: #1565c0;
    margin-top: 0;
    margin-bottom: 1rem;
}

.cookie-css-contact-text {
    color: #0d47a1;
    margin-bottom: 0;
}

.cookie-css-contact-link {
    color: #ff9800;
    font-weight: 600;
    text-decoration: none;
}

.cookie-css-contact-link:hover {
    text-decoration: underline;
}

/* Cookie Footer */
.cookie-css-footer {
    background: linear-gradient(135deg, #ffcc80 0%, #ffb74d 100%);
    border-radius: 15px;
    padding: 2rem;
    margin-top: 3rem;
    text-align: center;
}

.cookie-css-footer-text {
    color: #5d4037;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* Cookie Control Modal */
.cookie-css-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cookie-css-modal-content {
    background-color: white;
    border-radius: 20px;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 3px solid #ff9800;
}

.cookie-css-modal-header {
    display: flex;
    align-items: center;
    padding: 1.8rem;
    border-bottom: 2px solid #ffcc80;
    background-color: #fff8e1;
    border-radius: 20px 20px 0 0;
    position: relative;
}

.cookie-css-modal-icon {
    font-size: 2.5rem;
    margin-right: 1rem;
}

.cookie-css-modal-title {
    margin: 0;
    color: #5d4037;
    font-size: 1.8rem;
}

.cookie-css-modal-close {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    background: none;
    border: none;
    color: #5d4037;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cookie-css-modal-intro {
    padding: 1.5rem 1.8rem 0;
    color: #6d4c41;
    margin-bottom: 1rem;
}

/* Cookie Categories in Modal */
.cookie-css-modal-category {
    padding: 1.5rem 1.8rem;
    border-bottom: 1px solid #ffcc80;
}

.cookie-css-modal-category:last-child {
    border-bottom: none;
}

.cookie-css-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.cookie-css-category-info {
    flex: 1;
}

.cookie-css-category-title {
    margin: 0 0 0.3rem 0;
    color: #5d4037;
    font-size: 1.3rem;
}

.cookie-css-category-desc {
    margin: 0;
    color: #8d6e63;
    font-size: 0.95rem;
}

.cookie-css-category-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cookie-css-toggle-label {
    color: #8d6e63;
    font-size: 0.9rem;
}

.cookie-css-toggle-indicator {
    width: 50px;
    height: 26px;
    background-color: #4caf50;
    border-radius: 13px;
    position: relative;
}

.cookie-css-toggle-indicator::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
}

.cookie-css-toggle-active {
    background-color: #4caf50;
}

/* Toggle Switch */
.cookie-css-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.cookie-css-toggle-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-css-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.cookie-css-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.cookie-css-toggle-checkbox:checked + .cookie-css-slider {
    background-color: #4caf50;
}

.cookie-css-toggle-checkbox:checked + .cookie-css-slider:before {
    transform: translateX(30px);
}

/* Modal Footer */
.cookie-css-modal-footer {
    display: flex;
    justify-content: space-between;
    padding: 1.8rem;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 2px solid #ffcc80;
    background-color: #fff8e1;
    border-radius: 0 0 20px 20px;
}

.cookie-css-modal-btn {
    padding: 0.8rem 1.8rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 150px;
}

.cookie-css-save-btn {
    background-color: #ff9800;
    color: white;
}

.cookie-css-save-btn:hover {
    background-color: #f57c00;
}

.cookie-css-accept-all-btn {
    background-color: #4caf50;
    color: white;
}

.cookie-css-accept-all-btn:hover {
    background-color: #388e3c;
}

.cookie-css-reject-btn {
    background-color: #f44336;
    color: white;
}

.cookie-css-reject-btn:hover {
    background-color: #d32f2f;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .cookie-css-navigation {
        position: static;
    }
    
    .cookie-css-title {
        font-size: 2.3rem;
    }
    
    .cookie-css-articles {
        padding: 1.8rem;
    }
    
    .cookie-css-article-title::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .cookie-css-articles {
        padding: 1.5rem;
    }
    
    .cookie-css-article-title {
        font-size: 1.6rem;
    }
    
    .cookie-css-title {
        font-size: 2rem;
    }
    
    .cookie-css-reasons-grid, .cookie-css-types-container, .cookie-css-control-methods, 
    .cookie-css-preference-options, .cookie-css-contact-details {
        grid-template-columns: 1fr;
    }
    
    .cookie-css-modal-footer {
        flex-direction: column;
    }
    
    .cookie-css-modal-btn {
        min-width: 100%;
    }
}

/* Print Styles */
@media print {
    .cookie-css-section {
        padding: 0;
        background-color: white;
    }
    
    .cookie-css-navigation, .cookie-css-control-btn, .cookie-css-pref-btn, 
    .cookie-css-pref-option-btn {
        display: none;
    }
    
    .cookie-css-articles {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .cookie-css-modal {
        display: none !important;
    }
}

/* terms-css.css - Terms and Conditions Page Styling - All classes prefixed with terms-css- */

/* Section Styling */
.terms-css-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2rem 0 4rem;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

/* Header Styling */
.terms-css-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2.5rem 2rem;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 2px solid #dee2e6;
    position: relative;
    overflow: hidden;
}

.terms-css-header::before {
    content: '⚖️ ⚖️ ⚖️';
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 4rem;
    opacity: 0.1;
    z-index: 0;
}

.terms-css-header-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.terms-css-title {
    color: #2c3e50;
    font-size: 3rem;
    margin-bottom: 0.8rem;
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.terms-css-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #3498db, #2c3e50);
    border-radius: 2px;
}

.terms-css-update {
    color: #7f8c8d;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    background-color: #f8f9fa;
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    display: inline-block;
    font-weight: 600;
}

.terms-css-intro {
    color: #34495e;
    font-size: 1.2rem;
    line-height: 1.7;
    max-width: 900px;
    margin: 1.5rem auto 0;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 12px;
    border-left: 5px solid #3498db;
    position: relative;
    z-index: 1;
}

/* Content Layout */
.terms-css-content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .terms-css-content {
        flex-direction: row;
    }
}

/* Navigation Styling */
.terms-css-navigation {
    flex: 0 0 320px;
    background-color: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    height: fit-content;
    position: sticky;
    top: 20px;
    border: 2px solid #dee2e6;
}

.terms-css-nav-title {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #3498db;
}

.terms-css-toc {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.terms-css-toc-item {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.terms-css-toc-item:hover {
    background-color: #e9ecef;
    border-left: 4px solid #3498db;
    transform: translateX(5px);
}

.terms-css-toc-item.terms-css-active {
    background-color: #e3f2fd;
    border-left: 4px solid #3498db;
    font-weight: 600;
}

.terms-css-toc-link {
    color: #2c3e50;
    text-decoration: none;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    font-weight: 500;
}

.terms-css-toc-link::before {
    content: '📑';
    margin-right: 10px;
    font-size: 1.2rem;
}

/* Acknowledgment Card */
.terms-css-acknowledgment-card {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    border: 2px solid #90caf9;
    margin-top: 1.5rem;
}

.terms-css-acknowledgment-title {
    color: #1565c0;
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
}

.terms-css-acknowledgment-text {
    color: #1976d2;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 500;
}

/* Articles Styling */
.terms-css-articles {
    flex: 1;
    background-color: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    border: 2px solid #dee2e6;
}

.terms-css-article {
    margin-bottom: 3.5rem;
    scroll-margin-top: 20px;
    padding-bottom: 2.5rem;
    border-bottom: 2px dashed #dee2e6;
}

.terms-css-article:last-of-type {
    border-bottom: none;
    margin-bottom: 1.5rem;
}

.terms-css-article-title {
    color: #2c3e50;
    font-size: 1.9rem;
    margin-bottom: 1.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #e9ecef;
    position: relative;
}

.terms-css-article-title::before {
    content: '📝';
    position: absolute;
    left: -40px;
    font-size: 1.5rem;
}

.terms-css-paragraph {
    color: #495057;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1.08rem;
}

.terms-css-list {
    margin: 1.2rem 0 1.8rem 1.8rem;
    padding-left: 0.5rem;
}

.terms-css-list-item {
    margin-bottom: 0.8rem;
    color: #495057;
    line-height: 1.6;
    position: relative;
    padding-left: 1.5rem;
}

.terms-css-list-item::before {
    content: '•';
    color: #3498db;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Contact Info */
.terms-css-contact-info {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    border-left: 5px solid #3498db;
}

.terms-css-contact-item {
    margin-bottom: 1rem;
    color: #495057;
    line-height: 1.6;
}

.terms-css-contact-item:last-child {
    margin-bottom: 0;
}

.terms-css-contact-label {
    color: #2c3e50;
    display: inline-block;
    min-width: 80px;
}

/* Terms Footer */
.terms-css-footer {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
    padding: 2rem;
    margin-top: 3rem;
    text-align: center;
    border: 2px solid #dee2e6;
}

.terms-css-footer-text {
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .terms-css-navigation {
        position: static;
    }
    
    .terms-css-title {
        font-size: 2.3rem;
    }
    
    .terms-css-articles {
        padding: 1.8rem;
    }
    
    .terms-css-article-title::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .terms-css-articles {
        padding: 1.5rem;
    }
    
    .terms-css-article-title {
        font-size: 1.6rem;
    }
    
    .terms-css-title {
        font-size: 2rem;
    }
}

/* Print Styles */
@media print {
    .terms-css-section {
        padding: 0;
        background-color: white;
    }
    
    .terms-css-navigation {
        display: none;
    }
    
    .terms-css-articles {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .terms-css-footer {
        border: 1px solid #ddd;
    }
}

/* privacy-css.css - Privacy Policy Page Styling - All classes prefixed with privacy-css- */

/* Section Styling */
.privacy-css-section {
    background: linear-gradient(135deg, #f5f9fc 0%, #e8f4fd 100%);
    padding: 2rem 0 4rem;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

/* Header Styling */
.privacy-css-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2.5rem 2rem;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(33, 150, 243, 0.08);
    border: 2px solid #bbdefb;
    position: relative;
    overflow: hidden;
}

.privacy-css-header::before {
    content: '🔒 🔒 🔒';
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 4rem;
    opacity: 0.1;
    z-index: 0;
}

.privacy-css-header-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: privacy-css-bounce 2s infinite;
}

@keyframes privacy-css-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.privacy-css-title {
    color: #1565c0;
    font-size: 3rem;
    margin-bottom: 0.8rem;
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.privacy-css-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #2196f3, #1565c0);
    border-radius: 2px;
}

.privacy-css-update {
    color: #546e7a;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    background-color: #e3f2fd;
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    display: inline-block;
    font-weight: 600;
}

.privacy-css-intro {
    color: #37474f;
    font-size: 1.2rem;
    line-height: 1.7;
    max-width: 900px;
    margin: 1.5rem auto 0;
    padding: 1.5rem;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.08);
    border-left: 5px solid #2196f3;
    position: relative;
    z-index: 1;
}

/* Content Layout */
.privacy-css-content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .privacy-css-content {
        flex-direction: row;
    }
}

/* Navigation Styling */
.privacy-css-navigation {
    flex: 0 0 320px;
    background-color: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    height: fit-content;
    position: sticky;
    top: 20px;
    border: 2px solid #bbdefb;
}

.privacy-css-nav-title {
    color: #1565c0;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #2196f3;
}

.privacy-css-toc {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.privacy-css-toc-item {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.privacy-css-toc-item:hover {
    background-color: #e3f2fd;
    border-left: 4px solid #2196f3;
    transform: translateX(5px);
}

.privacy-css-toc-item.privacy-css-active {
    background-color: #bbdefb;
    border-left: 4px solid #2196f3;
    font-weight: 600;
}

.privacy-css-toc-link {
    color: #37474f;
    text-decoration: none;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    font-weight: 500;
}

.privacy-css-toc-link::before {
    content: '📄';
    margin-right: 10px;
    font-size: 1.2rem;
}

/* Notice Card */
.privacy-css-notice-card {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    border: 2px solid #90caf9;
    margin-top: 1.5rem;
}

.privacy-css-notice-title {
    color: #1565c0;
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
}

.privacy-css-notice-text {
    color: #1976d2;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 500;
}

/* Articles Styling */
.privacy-css-articles {
    flex: 1;
    background-color: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    border: 2px solid #bbdefb;
}

.privacy-css-article {
    margin-bottom: 3.5rem;
    scroll-margin-top: 20px;
    padding-bottom: 2.5rem;
    border-bottom: 2px dashed #bbdefb;
}

.privacy-css-article:last-of-type {
    border-bottom: none;
    margin-bottom: 1.5rem;
}

.privacy-css-article-title {
    color: #1565c0;
    font-size: 1.9rem;
    margin-bottom: 1.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #e3f2fd;
    position: relative;
}

.privacy-css-article-title::before {
    content: '📋';
    position: absolute;
    left: -40px;
    font-size: 1.5rem;
}

.privacy-css-paragraph {
    color: #455a64;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1.08rem;
}

.privacy-css-list {
    margin: 1.2rem 0 1.8rem 1.8rem;
    padding-left: 0.5rem;
}

.privacy-css-list-item {
    margin-bottom: 0.8rem;
    color: #455a64;
    line-height: 1.6;
    position: relative;
    padding-left: 1.5rem;
}

.privacy-css-list-item::before {
    content: '•';
    color: #2196f3;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.privacy-css-strong {
    color: #1565c0;
}

/* Info Category Styling */
.privacy-css-info-category {
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-left: 4px solid #2196f3;
}

.privacy-css-info-category-title {
    color: #0d47a1;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

/* Usage Grid */
.privacy-css-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.8rem;
    margin: 2.5rem 0;
}

.privacy-css-usage-card {
    background-color: #f5f9ff;
    border-radius: 15px;
    padding: 1.8rem;
    text-align: center;
    border: 1px solid #e3f2fd;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.privacy-css-usage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(33, 150, 243, 0.1);
}

.privacy-css-usage-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.privacy-css-usage-title {
    color: #1565c0;
    margin: 0.5rem 0;
    font-size: 1.2rem;
}

.privacy-css-usage-text {
    color: #546e7a;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.privacy-css-legal-basis {
    background-color: #fff8e1;
    padding: 1.2rem;
    border-radius: 8px;
    border-left: 4px solid #ffb300;
    margin-top: 2rem;
}

/* Sharing Table */
.privacy-css-sharing-table {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    margin: 1.5rem 0;
}

.privacy-css-sharing-row {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
}

.privacy-css-sharing-row:last-child {
    border-bottom: none;
}

.privacy-css-sharing-party {
    flex: 0 0 200px;
    background-color: #f5f5f5;
    padding: 1.2rem;
    color: #1565c0;
}

.privacy-css-sharing-reason {
    flex: 1;
    padding: 1.2rem;
    color: #455a64;
}

@media (max-width: 768px) {
    .privacy-css-sharing-row {
        flex-direction: column;
    }
    
    .privacy-css-sharing-party {
        flex: none;
        border-bottom: 1px solid #e0e0e0;
    }
}

/* Security Measures */
.privacy-css-security-measures {
    background-color: #fce4ec;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    border-left: 4px solid #d81b60;
}

.privacy-css-security-title {
    color: #880e4f;
    margin-top: 0;
}

/* Rights Grid */
.privacy-css-rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.8rem;
    margin: 2.5rem 0;
}

.privacy-css-right-card {
    background-color: #e8f5e9;
    border-radius: 15px;
    padding: 1.8rem;
    border: 1px solid #c8e6c9;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.privacy-css-right-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(76, 175, 80, 0.1);
}

.privacy-css-right-title {
    color: #2e7d32;
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
}

.privacy-css-right-text {
    color: #388e3c;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.privacy-css-rights-exercise {
    background-color: #e1f5fe;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
    border-left: 5px solid #0277bd;
}

.privacy-css-rights-exercise-title {
    color: #01579b;
    margin-top: 0;
}

/* Contact Methods */
.privacy-css-contact-methods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.8rem;
    margin: 2.5rem 0;
}

.privacy-css-contact-method {
    background-color: #f3e5f5;
    border-radius: 15px;
    padding: 1.8rem;
    text-align: center;
}

.privacy-css-contact-method-title {
    color: #6a1b9a;
    margin-top: 0;
    margin-bottom: 1rem;
}

.privacy-css-contact-method-text {
    color: #8e24aa;
    margin-bottom: 0;
}

.privacy-css-contact-link {
    color: #2196f3;
    font-weight: 600;
    text-decoration: none;
}

.privacy-css-contact-link:hover {
    text-decoration: underline;
}

.privacy-css-complaint-info {
    background-color: #fff3e0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
    border-left: 5px solid #ef6c00;
}

.privacy-css-complaint-title {
    color: #e65100;
    margin-top: 0;
}

/* Privacy Footer */
.privacy-css-footer {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 15px;
    padding: 2rem;
    margin-top: 3rem;
    text-align: center;
    border: 2px solid #90caf9;
}

.privacy-css-footer-text {
    color: #1565c0;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .privacy-css-navigation {
        position: static;
    }
    
    .privacy-css-title {
        font-size: 2.3rem;
    }
    
    .privacy-css-articles {
        padding: 1.8rem;
    }
    
    .privacy-css-article-title::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .privacy-css-articles {
        padding: 1.5rem;
    }
    
    .privacy-css-article-title {
        font-size: 1.6rem;
    }
    
    .privacy-css-title {
        font-size: 2rem;
    }
    
    .privacy-css-usage-grid, .privacy-css-rights-grid, .privacy-css-contact-methods {
        grid-template-columns: 1fr;
    }
}

/* Print Styles */
@media print {
    .privacy-css-section {
        padding: 0;
        background-color: white;
    }
    
    .privacy-css-navigation {
        display: none;
    }
    
    .privacy-css-articles {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .privacy-css-footer {
        border: 1px solid #ddd;
    }
}

/* online-teaching-jobs.css - Online Teaching Jobs Page */

/* Base Styles */
.online-teaching-jobs-section {
    background: linear-gradient(180deg, #2196F3 0%, #467992 5%, #e6edf1 20%);
    color: #1e293b;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    overflow: hidden;
}

.online-teaching-jobs-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Typography */
.online-teaching-jobs-main-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.online-teaching-jobs-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
    position: relative;
}

.online-teaching-jobs-section-title::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 4rem;
    height: 0.25rem;
    background: linear-gradient(90deg, #06b6d4, #3b82f6);
    border-radius: 2px;
}

.online-teaching-jobs-section-title-vip {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: black;
    position: relative;
}

.online-teaching-jobs-section-intro {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 3rem;
    max-width: 48rem;
}

.online-teaching-jobs-section-intro-vip {
    font-size: 1.25rem;
    color: black;
    margin-bottom: 3rem;
    max-width: 48rem;
}


.online-teaching-jobs-highlight {
    color: #FFC107;
    font-weight: 600;
}

.online-teaching-jobs-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hero Section */
.online-teaching-jobs-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 6rem 0 4rem;
    min-height: 80vh;
}

.online-teaching-jobs-hero-content {
    padding-right: 2rem;
}

.online-teaching-jobs-hero-subtitle {
    font-size: 1.5rem;
    color: #cbd5e1;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.online-teaching-jobs-stats {
    display: flex;
    gap: 2rem;
    margin: 2.5rem 0;
}

.online-teaching-jobs-stat {
    text-align: center;
}

.online-teaching-jobs-stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #06b6d4;
    margin-bottom: 0.25rem;
}

.online-teaching-jobs-stat-label {
    font-size: 0.875rem;
    color: #fff;
}

.online-teaching-jobs-cta {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

/* Buttons */
.online-teaching-jobs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.online-teaching-jobs-btn-primary {
    background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(6, 182, 212, 0.3);
}

.online-teaching-jobs-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.4);
}

.online-teaching-jobs-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.online-teaching-jobs-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.online-teaching-jobs-btn-outline {
    background: transparent;
    color: #06b6d4;
    border-color: #06b6d4;
}

.online-teaching-jobs-btn-outline:hover {
    background: rgba(6, 182, 212, 0.1);
}

.online-teaching-jobs-btn-large {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
}

/* Devices Visualization */
.online-teaching-jobs-hero-visual {
    position: relative;
    height: 400px;
}

.online-teaching-jobs-devices {
    position: relative;
    width: 100%;
    height: 100%;
}

.online-teaching-jobs-laptop {
    position: absolute;
    width: 320px;
    height: 200px;
    background: #1e293b;
    border-radius: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 3;
    animation: online-teaching-jobs-float 3s ease-in-out infinite;
}

.online-teaching-jobs-laptop::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 20px;
    right: 20px;
    height: 8px;
    background: #0f172a;
    border-radius: 0 0 8px 8px;
}

.online-teaching-jobs-screen {
    width: 100%;
    height: 100%;
    background: #0f172a;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.online-teaching-jobs-video-call {
    width: 100%;
    height: 100%;
    position: relative;
}

.online-teaching-jobs-teacher,
.online-teaching-jobs-student {
    position: absolute;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 8px;
}

.online-teaching-jobs-teacher {
    width: 120px;
    height: 90px;
    top: 20px;
    left: 20px;
    animation: online-teaching-jobs-pulse 2s infinite;
}

.online-teaching-jobs-student {
    width: 100px;
    height: 75px;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    animation: online-teaching-jobs-pulse 2s infinite 0.5s;
}

.online-teaching-jobs-chat {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 140px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    backdrop-filter: blur(10px);
}

.online-teaching-jobs-message {
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    animation: online-teaching-jobs-message-slide 4s infinite;
}

.online-teaching-jobs-message-teacher {
    background: rgba(59, 130, 246, 0.3);
    color: #bfdbfe;
    animation-delay: 0s;
}

.online-teaching-jobs-message-student {
    background: rgba(16, 185, 129, 0.3);
    color: #a7f3d0;
    animation-delay: 2s;
}

.online-teaching-jobs-tablet {
    position: absolute;
    width: 180px;
    height: 394px;
    background: #334155;
    border-radius: 16px;
    top: 14%;
    left: 10%;
    transform: rotate(-15deg);
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 2;
    animation: online-teaching-jobs-float 3s ease-in-out infinite 0.5s;
}

.online-teaching-jobs-tablet-screen {
    width: 90%;
    height: 85%;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 8px;
    margin: 7.5% auto 0;
}

.online-teaching-jobs-phone {
    position: absolute;
    width: 100px;
    height: 200px;
    background: #475569;
    border-radius: 20px;
    bottom: 65%;
    right: 15%;
    transform: rotate(10deg);
    box-shadow: 
        0 10px 20px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 1;
    animation: online-teaching-jobs-float 3s ease-in-out infinite 1s;
}

.online-teaching-jobs-phone-screen {
    width: 85%;
    height: 80%;
    background: linear-gradient(135deg, #1e293b, #334155);
    border-radius: 12px;
    margin: 10% auto 0;
}

@keyframes online-teaching-jobs-float {
    0%, 100% { transform: translateY(0) rotate(var(--rotation, 0deg)); }
    50% { transform: translateY(-10px) rotate(var(--rotation, 0deg)); }
}

@keyframes online-teaching-jobs-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes online-teaching-jobs-message-slide {
    0%, 100% { transform: translateX(-10px); opacity: 0; }
    10%, 90% { transform: translateX(0); opacity: 1; }
}

/* Benefits Section */
.online-teaching-jobs-benefits {
    padding: 5rem 0;
    
}

.online-teaching-jobs-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.online-teaching-jobs-benefit-card {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.online-teaching-jobs-benefit-card-dark {
    background: linear-gradient(135deg, #03A9F4 0%, #3F51B5 100%);
    color: white;
    border: none;
}

.online-teaching-jobs-benefit-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.online-teaching-jobs-benefit-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.online-teaching-jobs-benefit-card-dark .online-teaching-jobs-benefit-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

.online-teaching-jobs-svg {
    width: 2rem;
    height: 2rem;
    fill: white;
}

.online-teaching-jobs-benefit-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.online-teaching-jobs-benefit-text {
    line-height: 1.6;
    color: #64748b;
}

.online-teaching-jobs-benefit-card-dark .online-teaching-jobs-benefit-text {
    color: #cbd5e1;
}

/* TEFL Requirements Section */
.online-teaching-jobs-tefl-requirements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 5rem 0;
    background: linear-gradient(135deg, #2196F3 0%, #3F51B5 100%);
    color: white;
    margin: 4rem 0;
    border-radius: 2rem;
    overflow: hidden;
}

.online-teaching-jobs-tefl-content {
    padding: 0 3rem;
}

.online-teaching-jobs-tefl-intro {
    font-size: 1.25rem;
    color: #cbd5e1;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.online-teaching-jobs-tefl-intro strong {
    color: white;
}

.online-teaching-jobs-requirements-list {
    margin: 2rem 0;
}

.online-teaching-jobs-requirement {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    border-left: 4px solid #06b6d4;
}

.online-teaching-jobs-requirement-check {
    color: #06b6d4;
    font-weight: bold;
    margin-right: 1rem;
    font-size: 1.25rem;
}

.online-teaching-jobs-requirement-text {
    color: #e2e8f0;
}

.online-teaching-jobs-tefl-certificate {
    margin-top: 3rem;
}

.online-teaching-jobs-certificate-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.online-teaching-jobs-certificate-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

.online-teaching-jobs-certificate-text {
    color: #cbd5e1;
    margin-bottom: 1.5rem;
}

.online-teaching-jobs-certificate-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.online-teaching-jobs-certificate-list li {
    padding: 0.5rem 0;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.online-teaching-jobs-certificate-list li:last-child {
    border-bottom: none;
}

.online-teaching-jobs-tefl-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 2rem;
}

.online-teaching-jobs-certificate-display {
    perspective: 1000px;
}

.online-teaching-jobs-certificate-paper {
    width: 400px;
    height: 370px;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    transform: perspective(1000px) rotateY(15deg) rotateX(5deg);
    animation: online-teaching-jobs-certificate-float 3s ease-in-out infinite;
}

@keyframes online-teaching-jobs-certificate-float {
    0%, 100% { transform: perspective(1000px) rotateY(15deg) rotateX(5deg) translateY(0); }
    50% { transform: perspective(1000px) rotateY(15deg) rotateX(5deg) translateY(-10px); }
}

.online-teaching-jobs-certificate-header {
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #06b6d4;
    padding-bottom: 1rem;
}

.online-teaching-jobs-certificate-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.online-teaching-jobs-certificate-subheading {
    font-size: 0.875rem;
    color: #64748b;
}

.online-teaching-jobs-certificate-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.online-teaching-jobs-certificate-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px dashed #e2e8f0;
}

.online-teaching-jobs-certificate-item:last-child {
    border-bottom: none;
}

.online-teaching-jobs-certificate-label {
    color: #64748b;
    font-weight: 600;
}

.online-teaching-jobs-certificate-value {
    color: #1e293b;
    font-weight: 700;
}

/* Platforms Grid */
.online-teaching-jobs-platforms {
    padding: 5rem 0;
}

.online-teaching-jobs-platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.online-teaching-jobs-platform-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.online-teaching-jobs-platform-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.online-teaching-jobs-platform-header {
    padding: 1.5rem;
    background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
    color: white;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.online-teaching-jobs-platform-logo {
    width: 3rem;
    height: 3rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.online-teaching-jobs-logo-vip { background: rgba(255, 107, 107, 0.9); }
.online-teaching-jobs-logo-cambly { background: rgba(59, 130, 246, 0.9); }
.online-teaching-jobs-logo-italki { background: rgba(139, 92, 246, 0.9); }
.online-teaching-jobs-logo-preply { background: rgba(236, 72, 153, 0.9); }

.online-teaching-jobs-platform-info {
    flex: 1;
}

.online-teaching-jobs-platform-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.online-teaching-jobs-platform-rating {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
}

.online-teaching-jobs-platform-details {
    padding: 1.5rem;
}

.online-teaching-jobs-platform-text {
    color: #475569;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.online-teaching-jobs-platform-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.online-teaching-jobs-platform-spec {
    text-align: center;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 0.5rem;
}

.online-teaching-jobs-platform-spec-label {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.online-teaching-jobs-platform-spec-value {
    display: block;
    font-weight: 600;
    color: #1e293b;
}

/* Setup Grid */
.online-teaching-jobs-setup {
    padding: 5rem 0;
  
}

.online-teaching-jobs-setup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.online-teaching-jobs-setup-item {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.online-teaching-jobs-setup-item:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.online-teaching-jobs-setup-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.online-teaching-jobs-setup-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1e293b;
}

.online-teaching-jobs-setup-text {
    color: #64748b;
    line-height: 1.6;
}

/* Income Section */
.online-teaching-jobs-income {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 5rem 0;
    background: #375aae;
    color: white;
    margin: 4rem 0;
    border-radius: 2rem;
}

.online-teaching-jobs-income-content {
    padding: 0 3rem;
}

.online-teaching-jobs-income-intro {
    font-size: 1.25rem;
    color: #cbd5e1;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.online-teaching-jobs-income-chart {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.online-teaching-jobs-income-level {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.online-teaching-jobs-income-bar {
    width: 0;
    height: 3rem;
    border-radius: 0.5rem;
    transition: width 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.online-teaching-jobs-income-bar-basic {
    animation: online-teaching-jobs-bar-grow 1s forwards 0.2s;
    background: linear-gradient(90deg, #10b981, #34d399);
    width: 25%;
}

.online-teaching-jobs-income-bar-standard {
    animation: online-teaching-jobs-bar-grow 1s forwards 0.4s;
    background: linear-gradient(90deg, #0ea5e9, #3b82f6);
    width: 50%;
}

.online-teaching-jobs-income-bar-specialist {
    animation: online-teaching-jobs-bar-grow 1s forwards 0.6s;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    width: 75%;
}

.online-teaching-jobs-income-bar-premium {
    animation: online-teaching-jobs-bar-grow 1s forwards 0.8s;
    background: linear-gradient(90deg, #ec4899, #f472b6);
    width: 100%;
}

@keyframes online-teaching-jobs-bar-grow {
    from { width: 0; }
    to { width: var(--target-width); }
}

.online-teaching-jobs-income-info {
    flex: 1;
}

.online-teaching-jobs-income-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: beige;
}

.online-teaching-jobs-income-range {
    color: #06b6d4;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.online-teaching-jobs-income-desc {
    color: #cbd5e1;
    font-size: 0.875rem;
}

.online-teaching-jobs-income-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 2rem;
}

.online-teaching-jobs-income-stats {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.online-teaching-jobs-income-stat {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.online-teaching-jobs-income-stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: #06b6d4;
    margin-bottom: 0.5rem;
}

.online-teaching-jobs-income-stat-label {
    color: #cbd5e1;
    line-height: 1.4;
}

/* Process Steps */
.online-teaching-jobs-process {
    padding: 5rem 0;
}

.online-teaching-jobs-process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    position: relative;
}

.online-teaching-jobs-process-step {
    display: flex;
    gap: 1.5rem;
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.online-teaching-jobs-process-step:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.online-teaching-jobs-step-number {
    font-size: 2rem;
    font-weight: 800;
    color: #06b6d4;
    background: #f0f9ff;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.online-teaching-jobs-step-content {
    flex: 1;
}

.online-teaching-jobs-step-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1e293b;
}

.online-teaching-jobs-step-text {
    color: #64748b;
    line-height: 1.6;
}

/* Specializations */
.online-teaching-jobs-specializations {
    padding: 5rem 0;
    
}

.online-teaching-jobs-specialization-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.online-teaching-jobs-specialization-card {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}

.online-teaching-jobs-specialization-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.online-teaching-jobs-specialization-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #06b6d4, #3b82f6);
}

.online-teaching-jobs-specialization-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1e293b;
}

.online-teaching-jobs-specialization-text {
    color: #64748b;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.online-teaching-jobs-specialization-rate {
    font-size: 1.5rem;
    font-weight: 700;
    color: #06b6d4;
    text-align: right;
}

/* SEO Content */
.online-teaching-jobs-seo-content {
    padding: 5rem 0;
    background: linear-gradient(135deg, #3F51B5 0%, #607D8B 100%);
    color: white;
    border-radius: 2rem;
    margin: 4rem 0;
}

.online-teaching-jobs-seo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.online-teaching-jobs-seo-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 10px;
}

.online-teaching-jobs-seo-card-2 {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-right: 10px;
}

.online-teaching-jobs-seo-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

.online-teaching-jobs-seo-text {
    color: #cbd5e1;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.online-teaching-jobs-seo-text strong {
    color: white;
}

.online-teaching-jobs-faq {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.online-teaching-jobs-faq-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: white;
}

.online-teaching-jobs-faq-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.online-teaching-jobs-faq-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.online-teaching-jobs-faq-question {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: white;
}

.online-teaching-jobs-faq-answer {
    color: #cbd5e1;
    line-height: 1.6;
}

.online-teaching-jobs-faq-answer strong {
    color: white;
}

/* Final CTA */
.online-teaching-jobs-final-cta {
    padding: 5rem 0;
    background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
    color: white;
    border-radius: 2rem;
    text-align: center;
}

.online-teaching-jobs-cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.online-teaching-jobs-cta-text {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.online-teaching-jobs-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .online-teaching-jobs-hero {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .online-teaching-jobs-hero-content {
        padding-right: 0;
    }
    
    .online-teaching-jobs-tefl-requirements,
    .online-teaching-jobs-income {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .online-teaching-jobs-tefl-content,
    .online-teaching-jobs-income-content {
        padding: 0 1.5rem;
    }
    
    .online-teaching-jobs-stats {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .online-teaching-jobs-main-title {
        font-size: 2.5rem;
    }
    
    .online-teaching-jobs-section-title {
        font-size: 2rem;
    }
    
    .online-teaching-jobs-cta,
    .online-teaching-jobs-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .online-teaching-jobs-btn {
        width: 100%;
        max-width: 300px;
    }
    
    .online-teaching-jobs-stats {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    .online-teaching-jobs-process-step {
        flex-direction: column;
        text-align: center;
    }
    
    .online-teaching-jobs-platform-specs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .online-teaching-jobs-container {
        padding: 0 1rem;
    }
    
    .online-teaching-jobs-main-title {
        font-size: 2rem;
    }
    
    .online-teaching-jobs-hero-subtitle {
        font-size: 1.25rem;
    }
    
    .online-teaching-jobs-section-title {
        font-size: 1.75rem;
    }
    
    .online-teaching-jobs-laptop,
    .online-teaching-jobs-tablet,
    .online-teaching-jobs-phone {
        transform: scale(0.8);
    }
}

/* Print Styles */
@media print {
    .online-teaching-jobs-section {
        background: white !important;
    }
    
    .online-teaching-jobs-hero-visual,
    .online-teaching-jobs-tefl-visual,
    .online-teaching-jobs-income-visual,
    .online-teaching-jobs-btn {
        display: none !important;
    }
    
    .online-teaching-jobs-main-title {
        color: #0f172a !important;
    }
    
    .online-teaching-jobs-benefit-card-dark {
        background: #f1f5f9 !important;
        color: #1e293b !important;
        border: 1px solid #e2e8f0 !important;
    }
}



.tefl-quiz-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.tefl-quiz-overlay.active {
  display: flex;
}

.tefl-quiz-popup {
  background: #fff;
  width: 90%;
  max-width: 520px;
  padding: 30px;
  border-radius: 10px;
  position: relative;
}

.quiz-close {
  position: absolute;
  top: 15px;
  right: 18px;
  font-size: 26px;
  cursor: pointer;
}

.quiz-title {
  margin-bottom: 5px;
      color: #009688;
}

.quiz-subtitle {
  margin-bottom: 20px;
  color: #666;
}

.quiz-step {
  display: none;
}

.quiz-step.active {
  display: block;
}

.quiz-step h3 {
  margin-bottom: 12px;
}

.quiz-step label {
  display: block;
  margin-bottom: 10px;
  cursor: pointer;
}

.quiz-step button {
  margin-top: 15px;
  padding: 10px 20px;
  background: #009688a8;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.quiz-result {
  display: none;
  text-align: center;
}

.quiz-result h3 {
  margin-bottom: 10px;
}

.quiz-cta {
  display: inline-block;
  margin-top: 15px;
  background: #009688;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
}

/* ===============================
   PROGRESS BAR
================================ */
.quiz-progress {
    margin-bottom: 20px;
}

#quizStepText {
    font-size: 14px;
    color: #555;
    display: block;
    margin-bottom: 6px;
}

.quiz-progress-bar {
    width: 100%;
    height: 6px;
    background: #e6e9f0;
    border-radius: 10px;
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #009688, #5b7cff);
    transition: width 0.4s ease;
}

/* ===============================
   QUIZ CARD POLISH
================================ */
.tefl-quiz-popup {
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
    animation: quizPop 0.4s ease;
}

@keyframes quizPop {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.quiz-step label {
    background: #f7f9fc;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e3e7f0;
    transition: all 0.25s ease;
}

.quiz-step label:hover {
    border-color: #1f4cff;
    background: #eef2ff;
}

.quiz-step input[type="radio"] {
    margin-right: 10px;
}

.quiz-step button {
    width: 100%;
    font-size: 15px;
    padding: 12px;
    margin-top: 20px;
}

/* ===============================
   RESULT STYLING
================================ */
.quiz-result {
    text-align: left;
}

.quiz-result h3 {
    margin-bottom: 12px;
}

.quiz-result ul {
    padding-left: 18px;
    margin-top: 10px;
}

.quiz-result li {
    margin-bottom: 6px;
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 480px) {
    .tefl-quiz-popup {
        padding: 22px;
    }
}

.newsletter-form {
    position: relative;
    display: flex;
    align-items: center;
}

.newsletter-form input {
    flex: 1;
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.newsletter-form button {
    margin-left: 8px;
    padding: 12px 16px;
    border-radius: 6px;
    border: none;
    background: #cddc3980;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}

.newsletter-form button:hover {
    background: #1638cc;
}

.newsletter-message {
    display: block;
    margin-top: 8px;
    font-size: 13px;
}

.newsletter-message.success {
    color: #1e7e34;
}

.newsletter-message.error {
    color: #d93025;
}

/* partnerships-css.css */
/* Partnerships & Referrals Page Styles */

/* Reset and Base */
.partnerships-hero,
.partnership-models,
.partner-success,
.referral-process,
.partnership-benefits,
.partnership-cta {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #374151;
    line-height: 1.6;
}

/* Color Variables */
:root {
    --ph-primary: #3b82f6;
    --ph-secondary: #10b981;
    --ph-accent: #8b5cf6;
    --ph-light: #f9fafb;
    --ph-lighter: #ffffff;
    --ph-dark: #111827;
    --ph-gray: #6b7280;
    --ph-border: #e5e7eb;
    --ph-success: #10b981;
}

/* Typography */
.ph-title,
.pm-title,
.ps-title,
.rp-title,
.pb-title,
.pc-title {
    font-weight: 700;
    line-height: 1.2;
    color: var(--ph-dark);
}

.ph-title {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.ph-highlight,
.pm-highlight,
.ps-highlight,
.rp-highlight,
.pb-highlight,
.pc-highlight {
    color: var(--ph-primary);
    position: relative;
}

.ph-highlight::after,
.pm-highlight::after,
.ps-highlight::after,
.rp-highlight::after,
.pb-highlight::after,
.pc-highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: rgba(59, 130, 246, 0.1);
    z-index: -1;
    border-radius: 4px;
}

.pm-title,
.ps-title,
.rp-title,
.pb-title,
.pc-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.ph-subtitle,
.pm-subtitle,
.ps-subtitle,
.rp-subtitle,
.pb-subtitle,
.pc-subtitle {
    font-size: 1.2rem;
    color: var(--ph-gray);
    max-width: 700px;
    margin: 0 auto;
}

/* Button Styles */
.pm-btn,
.pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.pm-btn-primary,
.pc-btn-primary {
    background-color: var(--ph-primary);
    color: white;
}

.pm-btn-primary:hover,
.pc-btn-primary:hover {
    background-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.pm-btn-outline {
    background-color: transparent;
    color: var(--ph-primary);
    border-color: var(--ph-primary);
}

.pm-btn-outline:hover {
    background-color: rgba(59, 130, 246, 0.05);
    transform: translateY(-2px);
}

.pc-btn-submit {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

/* Hero Section */
.partnerships-hero {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 5rem 2rem;
    border-radius: 0 0 40px 40px;
}

.ph-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    gap: 4rem;
}

.ph-content {
    flex: 1;
}

.ph-subtitle {
    margin-bottom: 3rem;
    text-align: left;
    font-size: 1.25rem;
}

.ph-stats {
    display: flex;
    gap: 2.5rem;
    margin: 3rem 0;
    flex-wrap: wrap;
}

.ph-stat {
    text-align: center;
}

.ph-stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ph-primary);
    margin-bottom: 0.5rem;
    font-feature-settings: "tnum";
}

.ph-stat-label {
    color: var(--ph-gray);
    font-size: 0.95rem;
    font-weight: 500;
}

.ph-visual {
    flex: 1;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ph-network-visual {
    position: relative;
    width: 400px;
    height: 400px;
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    padding: 2rem;
}

.ph-center-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--ph-primary), var(--ph-accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
    z-index: 3;
}

.ph-node {
    position: absolute;
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    z-index: 2;
}

.ph-node:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.ph-node-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--ph-secondary), var(--ph-primary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
}

.ph-node-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ph-dark);
    text-align: center;
    line-height: 1.2;
}

.ph-node-1 { top: 20%; left: 20%; }
.ph-node-2 { top: 20%; right: 20%; }
.ph-node-3 { bottom: 20%; left: 20%; }
.ph-node-4 { bottom: 20%; right: 20%; }
.ph-node-5 { top: 50%; right: 10%; transform: translateY(-50%); }

.ph-connection {
    position: absolute;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    height: 2px;
    transform-origin: left center;
    z-index: 1;
}

.ph-conn-1 {
    width: 120px;
    top: 35%;
    left: 35%;
    transform: rotate(-45deg);
    animation: ph-pulse 3s infinite;
}

.ph-conn-2 {
    width: 120px;
    top: 35%;
    left: 45%;
    transform: rotate(0deg);
    animation: ph-pulse 3s infinite 0.5s;
}

.ph-conn-3 {
    width: 120px;
    bottom: 35%;
    left: 35%;
    transform: rotate(45deg);
    animation: ph-pulse 3s infinite 1s;
}

.ph-conn-4 {
    width: 120px;
    bottom: 35%;
    left: 45%;
    transform: rotate(0deg);
    animation: ph-pulse 3s infinite 1.5s;
}

.ph-conn-5 {
    width: 140px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) rotate(-90deg);
    animation: ph-pulse 3s infinite 2s;
}

@keyframes ph-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* Partnership Models Section */
.partnership-models {
    padding: 5rem 2rem;
    background: white;
}

.pm-container {
    max-width: 1200px;
    margin: 0 auto;
}

.pm-header {
    text-align: center;
    margin-bottom: 4rem;
}

.pm-subtitle {
    margin-bottom: 0;
}

.pm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.pm-card {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--ph-border);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pm-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--ph-primary);
}

.pm-card-featured {
    border: 2px solid var(--ph-primary);
    transform: scale(1.05);
}

.pm-card-featured:hover {
    transform: scale(1.05) translateY(-8px);
}

.pm-featured-badge {
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--ph-primary);
    color: white;
    padding: 0.5rem 2.5rem;
    font-weight: 600;
    transform: rotate(45deg);
    font-size: 0.8rem;
    width: 140px;
    text-align: center;
    z-index: 2;
}

.pm-card-header {
    padding: 2.5rem 2rem 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
}

.pm-card-icon {
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--ph-primary);
    font-size: 2rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.pm-card-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--ph-dark);
}

.pm-card-badge {
    display: inline-block;
    background: rgba(59, 130, 246, 0.1);
    color: var(--ph-primary);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.pm-card-body {
    padding: 2rem;
    flex-grow: 1;
}

.pm-card-description {
    color: var(--ph-gray);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.pm-card-features {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.pm-card-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--ph-dark);
    font-size: 0.95rem;
}

.pm-card-features i {
    color: var(--ph-success);
    font-size: 1rem;
}

.pm-card-stats {
    background: #f9fafb;
    padding: 1.25rem;
    border-radius: 12px;
    margin-top: 1.5rem;
}

.pm-stat {
    text-align: center;
}

.pm-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ph-primary);
    margin-bottom: 0.3rem;
}

.pm-stat-label {
    color: var(--ph-gray);
    font-size: 0.85rem;
    font-weight: 500;
}

.pm-card-footer {
    padding: 1.5rem 2rem;
    background: #f9fafb;
    border-top: 1px solid var(--ph-border);
}

/* Success Stories Section */
.partner-success {
    padding: 5rem 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.ps-container {
    max-width: 1200px;
    margin: 0 auto;
}

.ps-header {
    text-align: center;
    margin-bottom: 4rem;
}

.ps-stories {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.ps-story {
    display: flex;
    align-items: center;
    gap: 4rem;
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.ps-story-reverse {
    flex-direction: row-reverse;
}

.ps-story-content {
    flex: 1;
}

.ps-story-quote {
    font-size: 4rem;
    color: var(--ph-primary);
    opacity: 0.1;
    line-height: 1;
    margin-bottom: 1rem;
    font-family: Georgia, serif;
}

.ps-story-text {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--ph-dark);
    margin-bottom: 2rem;
    position: relative;
}

.ps-story-author {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.ps-author-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ps-avatar-1 {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

.ps-avatar-2 {
    background: linear-gradient(135deg, #10b981, #3b82f6);
}

.ps-author-info h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--ph-dark);
}

.ps-author-info p {
    margin: 0.3rem 0;
    color: var(--ph-gray);
    font-size: 0.9rem;
}

.ps-author-stats {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.ps-stat {
    font-size: 0.9rem;
    color: var(--ph-dark);
}

.ps-stat strong {
    color: var(--ph-primary);
}

.ps-story-visual {
    flex: 1;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ps-revenue-chart {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    padding: 2rem;
    background: #f9fafb;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.ps-chart-bar {
    flex: 1;
    background: linear-gradient(to top, var(--ph-primary), var(--ph-accent));
    border-radius: 6px 6px 0 0;
    transition: height 1.5s ease;
    position: relative;
}

.ps-chart-bar::after {
    content: attr(data-value) '%';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 600;
    color: var(--ph-dark);
    font-size: 0.9rem;
}

.ps-chart-label {
    color: var(--ph-gray);
    font-size: 0.9rem;
    font-weight: 500;
}

.ps-map-visual {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
}

.ps-map-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fbbf24;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ps-dot-pulse 2s infinite;
}

.ps-map-dot::after {
    content: attr(data-location);
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ps-map-dot:hover::after {
    opacity: 1;
}

@keyframes ps-dot-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.5); }
}

.ps-map-label {
    color: var(--ph-gray);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

/* Referral Process Section */
.referral-process {
    padding: 5rem 2rem;
    background: white;
}

.rp-container {
    max-width: 1200px;
    margin: 0 auto;
}

.rp-header {
    text-align: center;
    margin-bottom: 4rem;
}

.rp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.rp-step {
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid var(--ph-border);
    text-align: center;
    transition: all 0.3s ease;
}

.rp-step:hover {
    border-color: var(--ph-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.rp-step-number {
    font-size: 3rem;
    font-weight: 800;
    color: rgba(59, 130, 246, 0.1);
    line-height: 1;
    margin-bottom: 1rem;
    font-feature-settings: "tnum";
}

.rp-step-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--ph-primary), var(--ph-accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 1.8rem;
}

.rp-step-title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--ph-dark);
}

.rp-step-description {
    color: var(--ph-gray);
    line-height: 1.6;
}

.rp-dashboard-preview {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--ph-border);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.rp-dashboard-header {
    padding: 2rem;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-bottom: 1px solid var(--ph-border);
}

.rp-dashboard-title {
    font-size: 1.3rem;
    color: var(--ph-dark);
    margin-bottom: 1.5rem;
}

.rp-dashboard-stats {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.rp-dashboard-stat {
    flex: 1;
    text-align: center;
    min-width: 150px;
}

.rp-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ph-primary);
    margin-bottom: 0.3rem;
}

.rp-stat-label {
    color: var(--ph-gray);
    font-size: 0.9rem;
    font-weight: 500;
}

.rp-dashboard-chart {
    padding: 2rem;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    height: 150px;
    background: #f9fafb;
}

.rp-chart-bar {
    flex: 1;
    background: linear-gradient(to top, var(--ph-primary), var(--ph-accent));
    border-radius: 6px 6px 0 0;
    height: 0;
    animation: rp-chart-grow 1.5s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 0.2s);
}

@keyframes rp-chart-grow {
    to { height: var(--height, 70%); }
}

/* Partnership Benefits Section */
.partnership-benefits {
    padding: 5rem 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.pb-container {
    max-width: 1200px;
    margin: 0 auto;
}

.pb-header {
    text-align: center;
    margin-bottom: 4rem;
}

.pb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.pb-benefit {
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid var(--ph-border);
    text-align: center;
    transition: all 0.3s ease;
}

.pb-benefit:hover {
    transform: translateY(-5px);
    border-color: var(--ph-primary);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.pb-benefit-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--ph-primary), var(--ph-accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 1.8rem;
}

.pb-benefit-title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--ph-dark);
}

.pb-benefit-description {
    color: var(--ph-gray);
    line-height: 1.6;
}

/* CTA Forms Section */
.partnership-cta {
    padding: 5rem 2rem;
    background: white;
}

.pc-container {
    max-width: 1000px;
    margin: 0 auto;
}

.pc-header {
    text-align: center;
    margin-bottom: 4rem;
}

.pc-tabs {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--ph-border);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    margin-bottom: 3rem;
}

.pc-tab-header {
    display: flex;
    background: #f9fafb;
    border-bottom: 1px solid var(--ph-border);
}

.pc-tab-btn {
    flex: 1;
    padding: 1.5rem;
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ph-gray);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.pc-tab-btn:hover {
    color: var(--ph-dark);
    background: rgba(59, 130, 246, 0.05);
}

.pc-tab-btn.active {
    color: var(--ph-primary);
    background: white;
}

.pc-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--ph-primary);
}

.pc-tab-content {
    padding: 3rem;
}

.pc-tab-pane {
    display: none;
}

.pc-tab-pane.active {
    display: block;
    animation: pc-fade-in 0.5s ease;
}

@keyframes pc-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pc-form-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
}

.pc-form-intro {
    padding-right: 2rem;
    border-right: 1px solid var(--ph-border);
}

.pc-form-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--ph-dark);
}

.pc-form-description {
    color: var(--ph-gray);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.pc-form-benefits {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pc-benefit {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ph-dark);
    font-size: 0.95rem;
}

.pc-benefit i {
    color: var(--ph-success);
    font-size: 1.1rem;
}

.pc-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pc-form-group {
    display: flex;
    gap: 1rem;
}

.pc-form-input,
.pc-form-select,
.pc-form-textarea {
    flex: 1;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ph-border);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--ph-dark);
    background: white;
    transition: all 0.2s ease;
}

.pc-form-input:focus,
.pc-form-select:focus,
.pc-form-textarea:focus {
    outline: none;
    border-color: var(--ph-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.pc-form-textarea {
    resize: vertical;
    min-height: 100px;
}

.pc-footer {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
}

.pc-footer-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--ph-dark);
}

.pc-footer-text {
    color: var(--ph-gray);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pc-footer-contact {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.pc-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ph-dark);
    font-weight: 500;
}

.pc-contact-item i {
    color: var(--ph-primary);
    font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .ph-container {
        flex-direction: column;
    }
    
    .ph-visual {
        width: 100%;
    }
    
    .ps-story,
    .ps-story-reverse {
        flex-direction: column;
    }
    
    .pc-form-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .pc-form-intro {
        padding-right: 0;
        border-right: none;
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--ph-border);
    }
}

@media (max-width: 992px) {
    .ph-title {
        font-size: 2.5rem;
    }
    
    .pm-title,
    .ps-title,
    .rp-title,
    .pb-title,
    .pc-title {
        font-size: 2rem;
    }
    
    .pc-tab-header {
        flex-direction: column;
    }
    
    .pc-tab-btn {
        border-bottom: 1px solid var(--ph-border);
    }
    
    .pc-tab-btn.active::after {
        bottom: 0;
        left: 0;
        width: 3px;
        height: 100%;
    }
}

@media (max-width: 768px) {
    .ph-title {
        font-size: 2rem;
    }
    
    .ph-subtitle {
        font-size: 1.1rem;
    }
    
    .ph-stats {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    
    .ph-stat {
        width: 100%;
        max-width: 200px;
    }
    
    .pm-grid {
        grid-template-columns: 1fr;
    }
    
    .pm-card-featured {
        transform: none;
    }
    
    .pm-card-featured:hover {
        transform: translateY(-8px);
    }
    
    .rp-steps {
        grid-template-columns: 1fr;
    }
    
    .pb-grid {
        grid-template-columns: 1fr;
    }
    
    .pc-form-group {
        flex-direction: column;
    }
    
    .pc-footer-contact {
        flex-direction: column;
        gap: 1.5rem;
    }
}

@media (max-width: 576px) {
    .partnerships-hero,
    .partnership-models,
    .partner-success,
    .referral-process,
    .partnership-benefits,
    .partnership-cta {
        padding: 3rem 1rem;
    }
    
    .ph-network-visual {
        width: 100%;
        height: 300px;
    }
    
    .ps-story {
        padding: 2rem;
    }
    
    .pc-tab-content {
        padding: 1.5rem;
    }
    
    .pc-footer {
        padding: 2rem;
    }
}

/* Animation for number counting */
.ph-stat-number,
.pm-stat-value,
.rp-stat-value {
    transition: all 1s ease;
}

/* Animation for chart bars */
.ps-chart-bar,
.rp-chart-bar {
    animation: bar-grow 1.5s ease-out forwards;
}

@keyframes bar-grow {
    from { height: 0; }
    to { height: var(--height, 100%); }
}

#backToTop {
    position: fixed;
    right: 22px;
    bottom: 28px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #FF9800, #ff9800d6);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(31,76,255,0.35);
    z-index: 99999;
    transition: all 0.3s ease;
}

#backToTop.show {
    opacity: 1;
    visibility: visible;
}

#backToTop:hover {
    transform: translateY(-4px);
}

.chat-float {
    position: fixed;
    bottom: 20px;
    right: 70px;
    background: #91e430;
    color: #fff;
    padding: 14px 16px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 9999;
}




/* private-tefl-new-root — light theme foundation, only prefixed classes */
.private-tefl-new-root {
  --private-tefl-new-paper: #fefcf5;
  --private-tefl-new-sand: #fff9ec;
  --private-tefl-new-terracotta: #ffddd6;
  --private-tefl-new-sage: #e1ecdd;
  --private-tefl-new-sky: #d8e8f0;
  --private-tefl-new-deep-ink: #2a3b3c;
  --private-tefl-new-warm: #f3b3a1;
  --private-tefl-new-gold: #ffe7a0;
  --private-tefl-new-font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --private-tefl-new-font-head: 'Poppins', 'Inter', sans-serif;
  
  max-width: 1440px;
  margin: 0 auto;
  padding: 2.5rem 2rem 2rem;
  background: linear-gradient(145deg, #fffdf9 0%, #fff9f5 100%);
  color: var(--private-tefl-new-deep-ink);
  font-family: var(--private-tefl-new-font-main);
  position: relative;
  isolation: isolate;
}

/* ----- hero ribbon (badges, headline, blob) ----- */
.private-tefl-new-ribbon {
  position: relative;
  background: rgb(3 169 244 / 50%);
  backdrop-filter: blur(4px);
  border-radius: 48px 48px 48px 48px;
  padding: 2.2rem 2.5rem;
  margin-bottom: 3rem;
  border: 1px solid rgba(255, 225, 200, 0.5);
  box-shadow: 0 6px 0 #ffe1d6, 0 15px 30px -10px rgba(243, 179, 161, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.private-tefl-new-ribbon-container {
  flex: 2;
  min-width: 280px;
}
.private-tefl-new-badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.2rem;
  margin-bottom: 1.5rem;
}
.private-tefl-new-badge-item {
  background: white;
  padding: 0.4rem 1rem 0.4rem 0.8rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #375a5b;
  box-shadow: 0 3px 0 #eedad2;
  border: 1px solid #ffe7db;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.private-tefl-new-badge-item i {
  color: #d47f6e;
  font-size: 0.9rem;
}
.private-tefl-new-career-headline {
  font-family: var(--private-tefl-new-font-head);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0.5rem 0 0.8rem;
  color: #1e3a3b;
}
.private-tefl-new-headline-accent {
  background: linear-gradient(145deg, #b35e4b, #9c4c3b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: underline 0.12em rgba(243, 179, 161, 0.4);
  text-underline-offset: 0.15em;
}
.private-tefl-new-trust-graphics {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 1.8rem;
}
.private-tefl-new-stat-pill {
  background: var(--private-tefl-new-gold);
  padding: 0.5rem 1.3rem;
  border-radius: 40px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2d4a4b;
  border: 1px solid #ffe1b3;
  box-shadow: 0 4px 0 #e6c99c;
  transform: translateY(0);
  transition: transform 0.15s ease, box-shadow 0.2s;
}
.private-tefl-new-stat-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #e6c99c;
}
.private-tefl-new-blob-illustration {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 30% 30%, #ffe5d9, #ffd2c4);
  border-radius: 78% 22% 70% 30% / 46% 38% 62% 54%;
  animation: private-tefl-new-floatBlob 7s infinite alternate ease-in-out;
  opacity: 0.6;
  margin-right: 1rem;
}
@keyframes private-tefl-new-floatBlob {
  0% { border-radius: 78% 22% 70% 30% / 46% 38% 62% 54%; transform: scale(0.95); }
  100% { border-radius: 42% 58% 33% 67% / 58% 43% 57% 42%; transform: scale(1.05) translateX(8px); }
}

/* ----- career pathways (graphic stack + content) ----- */
.private-tefl-new-pathways {
  margin: 5rem 0 4rem;
}
.private-tefl-new-pathway-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 2.5rem;
  align-items: center;
}
.private-tefl-new-pathway-graphic {
  background: #faf3ef;
  border-radius: 40px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 30px -10px rgba(157, 114, 99, 0.08);
  border: 1px solid #fae1d8;
}
.private-tefl-new-floating-card-stack {
  position: relative;
  min-height: 240px;
  width: 100%;
}
.private-tefl-new-card-layer {
  position: absolute;
  background: white;
  padding: 0.9rem 1.4rem;
  border-radius: 24px;
  box-shadow: 0 12px 0 #f3d2c5, 0 20px 30px rgba(166, 126, 110, 0.08);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.1rem;
  border: 2px solid #ffe6db;
  color: #365b5c;
  transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1);
}
.private-tefl-new-card-layer i {
  color: #c67361;
  font-size: 1.3rem;
}
.private-tefl-new-layer-1 { top: 0; left: 0; animation: private-tefl-new-slideFade 1s 0.1s both; }
.private-tefl-new-layer-2 { top: 50px; left: 40px; animation: private-tefl-new-slideFade 1s 0.3s both; background: #fff7e7; }
.private-tefl-new-layer-3 { top: 100px; left: 20px; animation: private-tefl-new-slideFade 1s 0.5s both; }
.private-tefl-new-layer-4 { top: 150px; left: 60px; animation: private-tefl-new-slideFade 1s 0.7s both; background: #edf3ea; }
@keyframes private-tefl-new-slideFade {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.private-tefl-new-illustration-caption {
  margin-top: 2.5rem;
  font-size: 0.95rem;
  padding: 0.8rem 1.2rem;
  background: white;
  border-radius: 60px;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  width: fit-content;
  border: 1px dashed #cbb2a8;
  color: #3d5e5e;
}
.private-tefl-new-pathway-content {
  padding-left: 1rem;
}
.private-tefl-new-section-marker {
  font-size: 0.8rem;
  letter-spacing: 4px;
  color: #b48a7a;
  font-weight: 600;
}
.private-tefl-new-pathway-content h2 {
  font-family: var(--private-tefl-new-font-head);
  font-size: 2.2rem;
  font-weight: 650;
  line-height: 1.2;
  margin: 1rem 0 1.2rem;
  color: #1f4142;
}
.private-tefl-new-highlight-underline {
  background: linear-gradient(to right, #ffe7a0 0%, #ffe7a0 100%);
  background-size: 100% 0.3em;
  background-repeat: no-repeat;
  background-position: bottom;
}
.private-tefl-new-lead-text {
  font-size: 1.1rem;
  line-height: 1.55;
  color: #3f5e5f;
  margin-bottom: 2rem;
}
.private-tefl-new-feature-cluster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.private-tefl-new-feature {
  background: white;
  padding: 0.5rem 0.8rem;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  border: 1px solid #f0dfd7;
  color: #245a5a;
}
.private-tefl-new-feature i {
  color: #d16f5a;
}

/* ----- options / pillars (four career pillars) ----- */
.private-tefl-new-options-showcase {
  margin: 6rem 0 4rem;
  position: relative;
}
.private-tefl-new-options-header {
  text-align: center;
  margin-bottom: 3rem;
}
.private-tefl-new-subhead-accent {
  font-size: 1rem;
  font-weight: 500;
  color: #b3806e;
  letter-spacing: 8px;
}
.private-tefl-new-options-header h3 {
  font-size: 2rem;
  font-family: var(--private-tefl-new-font-head);
  font-weight: 600;
  color: #2b494a;
  margin-top: 0.3rem;
  text-transform: capitalize;
}
.private-tefl-new-pillar-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  justify-content: center;
}
.private-tefl-new-pillar {
  flex: 1 1 200px;
  min-width: 210px;
  background: white;
  padding: 2rem 1.5rem;
  border-radius: 32px;
  border: 1px solid #fae0d4;
  box-shadow: 0 10px 0 #ffefe8, 0 20px 35px -12px rgba(135, 108, 94, 0.08);
  transition: all 0.25s;
}
.private-tefl-new-pillar:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 0 #fad4c8, 0 28px 35px -10px #ccafa4;
}
.private-tefl-new-pillar-icon {
  position: relative;
  font-size: 2.2rem;
  color: #c4624d;
  margin-bottom: 1.3rem;
  display: inline-block;
}
.private-tefl-new-icon-ring {
  position: absolute;
  top: -8px;
  left: -5px;
  width: 50px;
  height: 50px;
  border: 2px solid #ffddd6;
  border-radius: 50%;
  animation: private-tefl-new-pulseRing 3s infinite;
}
@keyframes private-tefl-new-pulseRing {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.3); opacity: 0; }
}
.private-tefl-new-pillar h4 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.5rem 0 0.8rem;
  color: #1f4a4c;
}
.private-tefl-new-pillar p {
  color: #476b6c;
  line-height: 1.5;
  font-size: 0.98rem;
}
.private-tefl-new-pillar-footnote {
  display: block;
  margin-top: 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #b47260;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.private-tefl-new-dotted-flow {
  height: 2px;
  background: repeating-linear-gradient(90deg, #f0c0b0 0px, #f0c0b0 8px, transparent 8px, transparent 18px);
  width: 70%;
  margin: 3rem auto 0;
}

/* ----- certification spotlight (TEFL / online course focus) ----- */
.private-tefl-new-spotlight {
  background: #03a9f442;
  border-radius: 70px 20px 70px 20px;
  padding: 2.8rem 2.5rem;
  margin: 5rem 0;
  border: 1px solid #ffdcc9;
  box-shadow: 0 20px 0 #fff2e0;
}
.private-tefl-new-spotlight-inner {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  align-items: center;
}
.private-tefl-new-spotlight-text {
  flex: 1.2;
}
.private-tefl-new-eyebrow {
  font-size: 0.8rem;
  background: #ffe6db;
  padding: 0.3rem 1rem;
  border-radius: 30px;
  color: #7c584c;
  letter-spacing: 1.5px;
  font-weight: 600;
}
.private-tefl-new-spotlight-text h5 {
  font-size: 2rem;
  font-weight: 650;
  margin: 1.2rem 0 1.2rem;
  color: #1e3a3b;
  line-height: 1.2;
}
.private-tefl-new-spotlight-text p {
  font-size: 1.1rem;
  color: #3d5b5c;
  margin-bottom: 2rem;
}
.private-tefl-new-cert-badges {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.private-tefl-new-cert-badges span {
  background: white;
  padding: 0.4rem 1.1rem;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid #edd4cb;
  color: #4a6365;
}
.private-tefl-new-spotlight-graphic {
  flex: 0.8;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.private-tefl-new-cert-symbol {
  background: linear-gradient(145deg, #ffffff, #fffbf2);
  width: 220px;
  padding: 1.6rem 0.8rem;
  border-radius: 24px 24px 24px 0;
  border: 3px solid #ffe3c9;
  position: relative;
  box-shadow: 18px 18px 0 #ffe2d1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.private-tefl-new-diploma-fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #ffccb6 transparent transparent;
}
.private-tefl-new-diploma-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.private-tefl-new-diploma-body i {
  font-size: 2.4rem;
  color: #ba7c6b;
}
.private-tefl-new-diploma-level {
  font-size: 2rem;
  font-weight: 800;
  color: #355c5e;
}
.private-tefl-new-diploma-hours {
  font-weight: 700;
  background: #fff2cf;
  padding: 0.2rem 1rem;
  border-radius: 40px;
}
.private-tefl-new-diploma-online {
  font-size: 0.9rem;
  font-weight: 600;
  color: #7d655b;
}
.private-tefl-new-diploma-seal {
  font-size: 2.8rem;
  line-height: 1;
  color: #d69381;
  margin-top: 0.2rem;
}
.private-tefl-new-graphic-note {
  margin-top: 1.8rem;
  font-style: italic;
  color: #7a706b;
}

/* ----- momentum stats (light stats bar) ----- */
.private-tefl-new-momentum {
  background: rgba(255, 248, 235, 0.7);
  border-radius: 100px 20px 100px 20px;
  padding: 2rem 1.5rem;
  margin: 3rem 0;
  border: 1px solid #fee0cd;
}
.private-tefl-new-momentum-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1.5rem;
}
.private-tefl-new-stat-block {
  text-align: center;
}
.private-tefl-new-stat-digit {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: #a35241;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.private-tefl-new-stat-label {
  font-size: 0.85rem;
  color: #3d5e5a;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.private-tefl-new-momentum-footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 2px dotted #f0cbbd;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  font-size: 1.05rem;
}
.private-tefl-new-momentum-quote {
  font-weight: 500;
  color: #3f5b53;
}
.private-tefl-new-quote-author {
  font-weight: 600;
  color: #a65846;
}

/* ----- final direction / closure visual ----- */
.private-tefl-new-direction {
  margin-top: 4rem;
  padding: 1.5rem;
  background: #03a9f442;
  border-radius: 80px 20px 80px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 1px solid #ffdabf;
}
.private-tefl-new-direction-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(255, 226, 189, 0.4) 0%, transparent 70%);
  pointer-events: none;
}
.private-tefl-new-direction-content {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.25rem;
  color: #1e4a4a;
  font-weight: 450;
  z-index: 2;
}
.private-tefl-new-direction-content i {
  font-size: 2rem;
  color: #bf7b6a;
}

/* responsive – all prefixed */
@media (max-width: 900px) {
  .private-tefl-new-pathway-grid { grid-template-columns: 1fr; }
  .private-tefl-new-career-headline { font-size: 2.2rem; }
  .private-tefl-new-spotlight-inner { flex-direction: column; }
  .private-tefl-new-root { padding: 1.5rem; }
}
@media (max-width: 550px) {
  .private-tefl-new-pillar-container { flex-direction: column; }
  .private-tefl-new-feature-cluster { grid-template-columns: 1fr; }
}


/* ================================================ */
/* ====== business-school-new.css ================= */
/* ====== ALL CLASSES PREFIXED – NO GENERIC ======= */
/* ====== COPY THIS BLOCK INTO YOUR CSS FILE ====== */
/* ================================================ */

/* ----- root container (light theme, no body) ----- */
.business-school-new-root {
  --bsn-paper: #fdfbf7;
  --bsn-cream: #fff9ee;
  --bsn-mist: #eaf0ed;
  --bsn-clay: #f0ded7;
  --bsn-navy: #1e3f4a;
  --bsn-teal: #3c6e71;
  --bsn-gold: #fae3b4;
  --bsn-coral: #f5c6b5;
  --bsn-sand: #e7d9cf;
  --bsn-font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --bsn-font-head: 'Poppins', 'Inter', sans-serif;

  max-width: 1440px;
  margin: 0 auto;
  padding: 0 2rem 3rem;
  
  color: #1e3f4a;
  font-family: var(--bsn-font-main);
  position: relative;
}

/* ----- HERO SECTION ----- */
.business-school-new-hero {
  background: linear-gradient(165deg, #fef7f2 0%, #03A9F4 100%);
  border-radius: 0 0 80px 80px;
  padding: 3rem 2rem 2rem;
  margin-bottom: 2rem;
  position: relative;
  border-bottom: 2px solid #fbe1d4;
}
.business-school-new-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: center;
}
.business-school-new-hero-content {
  max-width: 650px;
}
.business-school-new-accent-pill {
  margin-bottom: 1.5rem;
}
.business-school-new-accent-text {
  background: #e1d5cd;
  padding: 0.4rem 1.2rem;
  border-radius: 50px;
  font-size: 0.8rem;
  letter-spacing: 3px;
  font-weight: 600;
  color: #2d5559;
  border: 1px solid #f0cfc1;
}
.business-school-new-headline {
  font-family: var(--bsn-font-head);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0.5rem 0 1.5rem;
  color: #1c424a;
}
.business-school-new-headline-emphasis {
  background: linear-gradient(145deg, #2f6a6e, #235b5f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: underline 0.12em #fad5bf;
  text-underline-offset: 0.15em;
}
.business-school-new-hero-sub {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #2f5559;
  margin-bottom: 2rem;
}
.business-school-new-stats-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  background: white;
  padding: 1.2rem 1.8rem;
  border-radius: 60px;
  border: 1px solid #f3d7cd;
  box-shadow: 0 10px 0 #ffede3;
  width: fit-content;
}
.business-school-new-stat-mini-item {
  display: flex;
  flex-direction: column;
}
.business-school-new-stat-mini-num {
  font-size: 1.9rem;
  font-weight: 800;
  color: #b1614c;
  line-height: 1;
}
.business-school-new-stat-mini-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #4c6b6b;
  letter-spacing: 0.5px;
}

/* ----- HERO VISUAL (abstract school building) ----- */
.business-school-new-hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.business-school-new-building-abstract {
  position: relative;
  width: 280px;
  height: 200px;
  background: #ffece3;
  border-radius: 40px 40px 20px 20px;
  box-shadow: 20px 20px 0 #ffddd2;
  border: 2px solid white;
  margin-bottom: 1rem;
}
.business-school-new-building-layer {
  position: absolute;
  background: #fff2e7;
  border: 2px solid white;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.02);
}
.business-school-new-building-1 {
  width: 70%;
  height: 30%;
  bottom: 0;
  left: 15%;
  border-radius: 20px 20px 0 0;
}
.business-school-new-building-2 {
  width: 50%;
  height: 25%;
  bottom: 25%;
  left: 25%;
  border-radius: 16px 16px 0 0;
  background: #ffede3;
}
.business-school-new-building-3 {
  width: 30%;
  height: 20%;
  bottom: 45%;
  left: 35%;
  border-radius: 12px 12px 0 0;
}
.business-school-new-building-4 {
  width: 15%;
  height: 15%;
  bottom: 60%;
  left: 42%;
  border-radius: 8px;
  background: #fadcd2;
}
.business-school-new-building-window {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ffbca3;
  border-radius: 4px;
  border: 2px solid white;
}
.business-school-new-building-window:nth-child(5) { bottom: 15%; left: 30%; }
.business-school-new-building-window:nth-child(6) { bottom: 15%; left: 50%; }
.business-school-new-building-window:nth-child(7) { bottom: 35%; left: 40%; }
.business-school-new-building-window:nth-child(8) { bottom: 55%; left: 45%; }
.business-school-new-building-flag {
  position: absolute;
  top: -10px;
  right: 20px;
  font-size: 2.2rem;
}
.business-school-new-graduation-cap {
  position: absolute;
  bottom: -15px;
  right: -10px;
  font-size: 2.5rem;
  color: #a6685a;
  background: white;
  border-radius: 50%;
  padding: 0.4rem;
  box-shadow: 0 8px 0 #ffe0d1;
}
.business-school-new-caption {
  font-size: 0.85rem;
  color: #5a7878;
  font-weight: 600;
  letter-spacing: 1px;
}
.business-school-new-wave-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.business-school-new-wave-fill {
  fill: #ffeb3b66;
}

/* ----- BRIDGE / TRANSITION SECTION ----- */
.business-school-new-bridge {
  margin: 4rem 0 5rem;
}
.business-school-new-bridge-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: center;
}
.business-school-new-bridge-graphic {
  position: relative;
  height: 160px;
  background: #f6ede8;
  border-radius: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  border: 2px dashed #e1cbbc;
}
.business-school-new-bridge-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  padding: 0.8rem 1.2rem;
  border-radius: 40px;
  box-shadow: 0 10px 0 #ffded2;
  border: 2px solid #ffc6b5;
  z-index: 3;
}
.business-school-new-bridge-node i {
  font-size: 1.8rem;
  color: #a76352;
  margin-bottom: 0.3rem;
}
.business-school-new-bridge-node span {
  font-weight: 600;
  color: #235f5f;
}
.business-school-new-bridge-path {
  position: absolute;
  width: 60%;
  height: 4px;
  background: linear-gradient(90deg, #dbaa9b, #70a5a5);
  left: 20%;
  top: 50%;
  z-index: 1;
}
.business-school-new-bridge-arrow {
  position: absolute;
  right: 25%;
  top: 30%;
  font-size: 2rem;
  color: #3e7a7a;
  z-index: 2;
}
.business-school-new-bridge-arrow::after {
  content: "→";
  font-size: 2.8rem;
  font-weight: 300;
}
.business-school-new-bridge-content {
  padding-left: 1rem;
}
.business-school-new-section-tag {
  font-size: 0.8rem;
  letter-spacing: 5px;
  color: #b4806e;
  font-weight: 600;
}
.business-school-new-bridge-content h2 {
  font-size: 2.2rem;
  font-weight: 700;
  font-family: var(--bsn-font-head);
  margin: 0.8rem 0 1.2rem;
  color: #1f474b;
  line-height: 1.2;
}
.business-school-new-underline-soft {
  background: linear-gradient(to right, #fae3b4 0%, #fae3b4 100%);
  background-size: 100% 0.3em;
  background-repeat: no-repeat;
  background-position: bottom;
}
.business-school-new-bridge-text {
  font-size: 1.08rem;
  color: #3f6465;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.business-school-new-role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.business-school-new-role-tag {
  background: white;
  padding: 0.4rem 1.2rem;
  border-radius: 40px;
  border: 1px solid #eac7bb;
  font-size: 0.9rem;
  font-weight: 500;
  color: #2a5d5d;
  box-shadow: 0 3px 0 #efd9cf;
}

/* ----- ECOSYSTEM / SCHOOL TYPES GRID ----- */
.business-school-new-ecosystem {
  margin: 6rem 0;
  background: linear-gradient(145deg, #e9f0f1, #03A9F4);
  border-radius: 80px;
  padding: 3rem 2.5rem;
  border: 1px solid #ffe3d6;
}
.business-school-new-ecosystem-header {
  text-align: center;
  margin-bottom: 3rem;
}
.business-school-new-eyebrow {
  font-size: 0.9rem;
  background: #ffeade;
  padding: 0.3rem 1.5rem;
  border-radius: 40px;
  color: #7a5a4e;
  font-weight: 700;
  letter-spacing: 3px;
}
.business-school-new-ecosystem-header h3 {
  font-size: 2.4rem;
  font-family: var(--bsn-font-head);
  font-weight: 650;
  color: #1f494e;
  margin: 1rem 0 0.5rem;
  text-transform: capitalize;
}
.business-school-new-ecosystem-desc {
  font-size: 1.1rem;
  color: #4c7072;
  max-width: 600px;
  margin: 0 auto;
}
.business-school-new-ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.business-school-new-school-type {
  background: white;
  padding: 2rem 1.5rem;
  border-radius: 32px;
  border: 1px solid #ffd9cb;
  box-shadow: 0 12px 0 #ffefe8;
  transition: all 0.2s;
}
.business-school-new-school-type:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 0 #ffe4da;
}
.business-school-new-type-icon i {
  font-size: 2.2rem;
  color: #b36756;
  margin-bottom: 1rem;
}
.business-school-new-school-type h4 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0.5rem 0 0.8rem;
  color: #1f5356;
}
.business-school-new-school-type p {
  color: #487072;
  line-height: 1.5;
  margin-bottom: 1.2rem;
}
.business-school-new-type-footnote {
  font-size: 0.8rem;
  font-weight: 700;
  color: #b27462;
  letter-spacing: 1px;
}

/* ----- SALARY LADDER (DETAILED) ----- */
.business-school-new-ladder-section {
  background: #f6e5d0;
  border-radius: 80px 20px 80px 20px;
  padding: 3rem;
  margin: 4rem 0;
  border: 1px solid #edd6cb;
}
.business-school-new-ladder-container {
  max-width: 900px;
  margin: 0 auto;
}
.business-school-new-ladder-text h4 {
  font-size: 2rem;
  font-weight: 650;
  color: #1a4b4f;
  margin: 0.5rem 0 1rem;
}
.business-school-new-ladder-tag {
  background: #dbb7ab;
  color: #1d3b3b;
  padding: 0.2rem 1rem;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.business-school-new-ladder-visual {
  margin: 2.5rem 0 1rem;
}
.business-school-new-ladder-step {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
  background: white;
  padding: 0.8rem 1.5rem;
  border-radius: 60px;
  border: 1px solid #f3cfc0;
  flex-wrap: wrap;
}
.business-school-new-step-level {
  font-weight: 700;
  color: #9c5f51;
  min-width: 70px;
}
.business-school-new-step-title {
  font-weight: 600;
  color: #236063;
  min-width: 200px;
}
.business-school-new-step-salary {
  font-weight: 700;
  color: #1a464a;
  background: #fbead1;
  padding: 0.2rem 1rem;
  border-radius: 40px;
}
.business-school-new-step-bar {
  height: 10px;
  background: linear-gradient(90deg, #dd9783, #5f9b9b);
  border-radius: 20px;
  flex: 1;
  min-width: 120px;
}
.business-school-new-ladder-note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: #597777;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ----- UPSKILLING CARD (ADD‑ON CERTS) ----- */
.business-school-new-upskilling {
  margin: 5rem 0;
}
.business-school-new-upskilling-card {
  background: linear-gradient(90deg, #f2edeb, #03A9F4);
  border-radius: 60px 20px 60px 20px;
  padding: 2.5rem;
  border: 1px solid #ffe0bf;
  box-shadow: 0 20px 0 #ffe8da;
}
.business-school-new-upskilling-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  align-items: center;
}
.business-school-new-upskilling-pretitle {
  font-size: 0.8rem;
  font-weight: 700;
  color: #b3674f;
  letter-spacing: 2px;
}
.business-school-new-upskilling-content h5 {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0.6rem 0 1.2rem;
  color: #1c5054;
}
.business-school-new-upskilling-list {
  list-style: none;
  padding: 0;
}
.business-school-new-upskilling-list li {
  padding: 0.4rem 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.05rem;
  color: #326b6b;
}
.business-school-new-upskilling-list i {
  color: #bb6b5a;
}
.business-school-new-upskilling-graphic {
  display: flex;
  justify-content: center;
}
.business-school-new-stack-icons {
  background: white;
  padding: 2rem 1.5rem;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 2rem;
  color: #538b8b;
  border: 3px solid #fad6c8;
  box-shadow: 12px 12px 0 #ffe2d4;
}
.business-school-new-stack-text {
  font-size: 1.1rem;
  font-weight: 700;
  background: #fff1ce;
  padding: 0.3rem 1.2rem;
  border-radius: 60px;
  color: #365e5e;
}

/* ----- TESTIMONIAL (CASE STUDY) ----- */
.business-school-new-testimonial {
  background: white;
  border-radius: 100px 20px 100px 20px;
  padding: 3rem 3rem 2.5rem;
  margin: 5rem 0;
  position: relative;
  border: 1px solid #f9d2c2;
  box-shadow: 0 20px 0 #faede7;
}
.business-school-new-testimonial-quote {
  font-size: 6rem;
  color: #ebc1b2;
  position: absolute;
  top: -10px;
  left: 20px;
  font-family: serif;
}
.business-school-new-testimonial-content p {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #2b585b;
  margin-bottom: 2rem;
  font-weight: 450;
}
.business-school-new-testimonial-author {
  display: flex;
  flex-direction: column;
}
.business-school-new-author-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #184244;
}
.business-school-new-author-title {
  color: #7a6158;
}
.business-school-new-author-credential {
  color: #487473;
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

/* ----- OPERATIONS (non-teaching roles) ----- */
.business-school-new-operations {
  margin: 5rem 0;
  background: #edf3f0;
  padding: 2.5rem;
  border-radius: 70px;
}
.business-school-new-operations h6 {
  font-size: 1.7rem;
  font-weight: 600;
  margin-bottom: 2rem;
  color: #215a5a;
  text-align: center;
}
.business-school-new-ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.business-school-new-ops-item {
  background: white;
  padding: 1.4rem 1rem;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #fed6c5;
  font-weight: 600;
  color: #2b676b;
}
.business-school-new-ops-item i {
  font-size: 2rem;
  margin-bottom: 0.6rem;
  color: #b75e4c;
}
.business-school-new-ops-item small {
  font-size: 0.8rem;
  color: #6c8a8a;
  margin-top: 0.3rem;
  font-weight: 400;
}

/* ----- GLOBAL HIRING CLUSTER ----- */
.business-school-new-global {
  background: #fef4e6;
  border-radius: 90px;
  padding: 2rem 2.5rem;
  margin: 4rem 0;
  border: 2px dotted #dcb6a8;
}
.business-school-new-global-header {
  text-align: center;
}
.business-school-new-global-pin {
  font-size: 1.1rem;
  font-weight: 700;
  color: #aa6857;
  letter-spacing: 2px;
}
.business-school-new-global-cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  margin: 2rem 0 1rem;
}
.business-school-new-region {
  background: white;
  padding: 0.6rem 1.5rem;
  border-radius: 60px;
  border: 1px solid #cfa392;
  font-weight: 600;
  color: #2f6468;
  box-shadow: 0 6px 0 #ebdad2;
  transition: 0.1s;
}
.business-school-new-region:hover {
  transform: scale(1.03);
}
.business-school-new-global-note {
  text-align: center;
  font-size: 0.85rem;
  color: #6e7f7a;
}

/* ----- FINAL CALLOUT ----- */
.business-school-new-callout {
  margin-top: 5rem;
  padding: 1.8rem;
  background: #fceddf;
  border-radius: 70px 20px 70px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 1px solid #edcbbd;
}
.business-school-new-callout-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,226,204,0.4) 0%, transparent 80%);
}
.business-school-new-callout-content {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.4rem;
  color: #1d4f53;
  z-index: 3;
}
.business-school-new-callout-content i {
  font-size: 2.2rem;
  color: #b77967;
}

/* ----- RESPONSIVE (all prefixed) ----- */
@media (max-width: 1000px) {
  .business-school-new-hero-grid { grid-template-columns: 1fr; }
  .business-school-new-bridge-container { grid-template-columns: 1fr; }
  .business-school-new-headline { font-size: 2.6rem; }
}
@media (max-width: 700px) {
  .business-school-new-root { padding: 0 1rem 2rem; }
  .business-school-new-upskilling-grid { grid-template-columns: 1fr; }
  .business-school-new-ladder-step { flex-direction: column; align-items: flex-start; }
}

/* ================================================ */
/* ====== corporate-teach-new.css ================= */
/* ====== ALL CLASSES PREFIXED – NO GENERIC ======= */
/* ====== COPY THIS BLOCK INTO YOUR CSS FILE ====== */
/* ================================================ */

/* ----- root container (corporate light theme) ----- */
.corporate-teach-new-root {
  --ctn-slate: #f7f9fc;
  --ctn-charcoal: #1e3a47;
  --ctn-navy: #1d4e5a;
  --ctn-teal: #317b7b;
  --ctn-coral: #f0cfc0;
  --ctn-sand: #f5e8df;
  --ctn-gold: #ffeab5;
  --ctn-white: #ffffff;
  --ctn-font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ctn-font-head: 'Poppins', 'Inter', sans-serif;

  max-width: 1440px;
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
  background: #ffffff;
  color: #1e3a47;
  font-family: var(--ctn-font-main);
  position: relative;
}

/* ----- HERO SECTION (corporate visual) ----- */
.corporate-teach-new-hero {
  background: linear-gradient(152deg, #f5fafd 0%, #4caf50a6 100%);
  border-radius: 40px 40px 80px 80px;
  padding: 3rem 3rem 3rem;
  margin-bottom: 3rem;
  position: relative;
  border: 1px solid #e5eef0;
  box-shadow: 0 12px 0 #dee9ec;
  overflow: hidden;
}
.corporate-teach-new-hero-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 3rem;
  align-items: center;
}
.corporate-teach-new-industry-badge {
  margin-bottom: 1.5rem;
}
.corporate-teach-new-badge-text {
  background: #1d4e5a;
  color: white;
  padding: 0.4rem 1.4rem;
  border-radius: 60px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 3px;
  display: inline-block;
  border: 1px solid #3f8f93;
}
.corporate-teach-new-headline {
  font-family: var(--ctn-font-head);
  font-size: 3.2rem;
  font-weight: 750;
  line-height: 1.1;
  margin: 0.8rem 0 1.4rem;
  color: #1d3e4a;
}
.corporate-teach-new-headline-accent {
  background: linear-gradient(145deg, #1f6d75, #15535a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: underline 0.14em #bdd8db;
  text-underline-offset: 0.2em;
}
.corporate-teach-new-hero-para {
  font-size: 1.18rem;
  line-height: 1.6;
  color: #2c5a61;
  margin-bottom: 2.2rem;
}
.corporate-teach-new-roi-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  background: white;
  padding: 1.2rem 2rem;
  border-radius: 70px;
  border: 1px solid #cbe1e2;
  box-shadow: 0 10px 0 #e3eff0;
  width: fit-content;
}
.corporate-teach-new-roi-item {
  display: flex;
  flex-direction: column;
}
.corporate-teach-new-roi-number {
  font-size: 2rem;
  font-weight: 800;
  color: #17636b;
  line-height: 1;
}
.corporate-teach-new-roi-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  color: #3f6e73;
  letter-spacing: 0.8px;
}

/* ----- HERO GRAPHIC (abstract chart / briefcase) ----- */
.corporate-teach-new-hero-graphic {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.corporate-teach-new-chart-abstract {
  position: relative;
  width: 280px;
  height: 200px;
  background: #ecf3f0;
  border-radius: 30px 30px 60px 60px;
  padding: 1.8rem 1rem;
  display: flex;
  align-items: flex-end;
  gap: 0.8rem;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 18px 18px 0 #dbe7e5;
}
.corporate-teach-new-chart-bar {
  width: 40px;
  background: linear-gradient(0deg, #5f9b9b, #9ac0c0);
  border-radius: 16px 16px 8px 8px;
  border: 2px solid white;
  transition: height 0.2s;
}
.corporate-teach-new-bar-1 { height: 70px; }
.corporate-teach-new-bar-2 { height: 110px; background: #3d7e7e; }
.corporate-teach-new-bar-3 { height: 150px; background: #256565; }
.corporate-teach-new-bar-4 { height: 90px; }
.corporate-teach-new-chart-line {
  position: absolute;
  top: 40px;
  left: 30px;
  width: 80%;
  height: 3px;
  background: #ffbba3;
  border-radius: 4px;
  transform: rotate(-4deg);
  opacity: 0.6;
}
.corporate-teach-new-briefcase {
  position: absolute;
  bottom: -20px;
  right: -20px;
  font-size: 2.8rem;
  background: white;
  border-radius: 50%;
  padding: 0.5rem;
  box-shadow: 0 12px 0 #ffd7c2;
  color: #226060;
}
.corporate-teach-new-growth-arrow {
  position: absolute;
  top: -15px;
  left: -10px;
  font-size: 3rem;
}
.corporate-teach-new-graph-caption {
  margin-top: 2rem;
  font-weight: 600;
  color: #3b7477;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
}
.corporate-teach-new-slant-edge {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 30px;
  background: linear-gradient(173deg, transparent 70%, #ffffff 30%);
}

/* ----- COMPARISON: PRIVATE VS CORPORATE ----- */
.corporate-teach-new-comparison {
  margin: 5rem 0 4rem;
}
.corporate-teach-new-comp-header {
  text-align: center;
  margin-bottom: 3rem;
}
.corporate-teach-new-comp-eyebrow {
  background: #dbe9e7;
  padding: 0.3rem 1.6rem;
  border-radius: 40px;
  font-size: 0.8rem;
  letter-spacing: 4px;
  color: #1f5e63;
  font-weight: 700;
}
.corporate-teach-new-comp-header h2 {
  font-size: 2.2rem;
  font-family: var(--ctn-font-head);
  font-weight: 650;
  color: #18484e;
  margin-top: 1rem;
}
.corporate-teach-new-comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
.corporate-teach-new-comp-card {
  background: white;
  padding: 2.5rem 2rem;
  border-radius: 48px;
  border: 2px solid #f5dfd3;
  box-shadow: 0 18px 0 #ffece3;
}
.corporate-teach-new-comp-private {
  background: #fffcf2;
}
.corporate-teach-new-comp-corporate {
  background: #f3faf8;
  border-color: #c5dbd8;
  box-shadow: 0 18px 0 #d7e9e6;
  position: relative;
}
.corporate-teach-new-comp-icon i {
  font-size: 2.6rem;
  color: #517a7a;
  margin-bottom: 0.8rem;
}
.corporate-teach-new-comp-card h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1e4e54;
  margin-bottom: 1.4rem;
  text-transform: capitalize;
}
.corporate-teach-new-comp-list {
  list-style: none;
  padding: 0;
}
.corporate-teach-new-comp-list li {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.1rem;
  color: #3b6a6a;
}
.corporate-teach-new-comp-list i {
  color: #b75e4c;
  font-size: 0.9rem;
}
.corporate-teach-new-comp-list .fa-circle-check {
  color: #348181;
}
.corporate-teach-new-premium-tag {
  position: absolute;
  top: -12px;
  right: 20px;
  background: #226060;
  color: white;
  padding: 0.3rem 1.3rem;
  border-radius: 40px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
}

/* ----- CORPORATE SECTORS (industry deep dive) ----- */
.corporate-teach-new-sectors {
  margin: 6rem 0;
  background: #f9f7f2;
  border-radius: 100px 20px 100px 20px;
  padding: 3rem 2.5rem;
  border: 1px solid #f1ddd2;
}
.corporate-teach-new-sectors-intro {
  margin-bottom: 3rem;
}
.corporate-teach-new-sectors-marker {
  font-size: 0.8rem;
  color: #a67261;
  letter-spacing: 6px;
  font-weight: 700;
}
.corporate-teach-new-sectors-intro h4 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1c545c;
  margin: 0.8rem 0 1rem;
}
.corporate-teach-new-sectors-intro p {
  font-size: 1.1rem;
  color: #497477;
  max-width: 700px;
}
.corporate-teach-new-sectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.corporate-teach-new-sector-item {
  background: white;
  padding: 2rem 1.8rem;
  border-radius: 40px;
  border: 1px solid #ffdacf;
  box-shadow: 0 12px 0 #ffefea;
  transition: all 0.2s;
}
.corporate-teach-new-sector-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 0 #ffe6de;
}
.corporate-teach-new-sector-front i {
  font-size: 2.2rem;
  color: #b26755;
  margin-bottom: 0.8rem;
}
.corporate-teach-new-sector-front h5 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.5rem 0 0.6rem;
  color: #1f5b60;
}
.corporate-teach-new-sector-front p {
  color: #467a7a;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}
.corporate-teach-new-sector-rate {
  background: #faebd2;
  padding: 0.3rem 1.2rem;
  border-radius: 40px;
  font-weight: 700;
  color: #1f5858;
  display: inline-block;
  border: 1px solid #edd8c4;
}

/* ----- BRIDGE MODULES (TEFL to corporate) ----- */
.corporate-teach-new-bridge-modules {
  margin: 5rem 0;
  background: #eef5f2;
  border-radius: 70px;
  padding: 3rem 2.5rem;
}
.corporate-teach-new-modules-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}
.corporate-teach-new-modules-text {
  flex: 1.1;
}
.corporate-teach-new-modules-tag {
  background: #1a5e5e;
  color: white;
  padding: 0.2rem 1.2rem;
  border-radius: 40px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
}
.corporate-teach-new-modules-text h5 {
  font-size: 2rem;
  font-weight: 700;
  color: #1f4b4b;
  margin: 1.2rem 0 1rem;
}
.corporate-teach-new-modules-text p {
  font-size: 1.1rem;
  color: #3e6e6e;
}
.corporate-teach-new-modules-badges {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.corporate-teach-new-module-badge {
  background: white;
  padding: 0.8rem 1.4rem;
  border-radius: 60px;
  border: 1px solid #cfe0dd;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 600;
  color: #226060;
  box-shadow: 0 5px 0 #d2e3e1;
  transition: 0.1s;
}
.corporate-teach-new-module-badge i {
  color: #ba6b5a;
  font-size: 1.2rem;
}
.corporate-teach-new-module-badge:hover {
  transform: scale(1.02);
  box-shadow: 0 7px 0 #d2e3e1;
}

/* ----- CORPORATE PROGRESSION LADDER ----- */
.corporate-teach-new-progression {
  margin: 5rem 0;
}
.corporate-teach-new-progression-card {
  background: linear-gradient(165deg, #f6fbfa, #f3f6f2);
  border-radius: 80px 20px 80px 20px;
  padding: 3rem;
  border: 1px solid #cee3e0;
  box-shadow: 0 25px 0 #e1efec;
}
.corporate-teach-new-progression-flag {
  background: #2c6c6c;
  color: white;
  padding: 0.3rem 1.5rem;
  border-radius: 40px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
}
.corporate-teach-new-progression-card h6 {
  font-size: 2rem;
  font-weight: 650;
  margin: 1.4rem 0 2rem;
  color: #1a4a4a;
}
.corporate-teach-new-progression-steps {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.corporate-teach-new-step {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: white;
  padding: 1.2rem 1.8rem;
  border-radius: 80px;
  border: 1px solid #fadad0;
}
.corporate-teach-new-step-num {
  background: #1d5a5a;
  color: white;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 800;
  flex-shrink: 0;
}
.corporate-teach-new-step-content {
  display: flex;
  flex-direction: column;
}
.corporate-teach-new-step-content strong {
  font-size: 1.3rem;
  color: #174f53;
}
.corporate-teach-new-step-content span {
  color: #4b7777;
  font-size: 1rem;
}

/* ----- CASE STUDY (real trainer) ----- */
.corporate-teach-new-case {
  margin: 6rem 0;
  background: #fdf2e9;
  border-radius: 100px 20px 100px 20px;
  padding: 2.5rem;
}
.corporate-teach-new-case-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.8fr;
  gap: 2rem;
  align-items: center;
}
.corporate-teach-new-case-graphic {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.corporate-teach-new-case-icon {
  font-size: 2.8rem;
  display: flex;
  gap: 0.5rem;
  background: white;
  padding: 1.5rem;
  border-radius: 60px;
  border: 3px solid #c5d6d2;
  color: #367070;
}
.corporate-teach-new-case-line {
  width: 4px;
  height: 50px;
  background: #dbb9ae;
  margin-top: 0.5rem;
}
.corporate-teach-new-case-text {
  display: flex;
  flex-direction: column;
}
.corporate-teach-new-case-name {
  font-size: 1.9rem;
  font-weight: 800;
  color: #1a4848;
}
.corporate-teach-new-case-title {
  font-size: 1.1rem;
  color: #a9695a;
  font-weight: 600;
  margin-bottom: 1rem;
}
.corporate-teach-new-case-quote {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #3d6365;
  font-style: italic;
  margin-bottom: 0.8rem;
}
.corporate-teach-new-case-footnote {
  color: #668080;
  font-size: 0.9rem;
  font-weight: 500;
}

/* ----- CORPORATE LOGISTICS (contracts, delivery) ----- */
.corporate-teach-new-logistics {
  background: #f2f7f2;
  border-radius: 60px;
  padding: 2.5rem;
  margin: 5rem 0;
}
.corporate-teach-new-logistics-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.8rem;
  font-weight: 650;
  color: #1a5f63;
  margin-bottom: 2rem;
}
.corporate-teach-new-logistics-header i {
  color: #b47461;
}
.corporate-teach-new-logistics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}
.corporate-teach-new-log-item {
  background: white;
  padding: 1.8rem 1.5rem;
  border-radius: 40px;
  border: 1px solid #dae9e2;
}
.corporate-teach-new-log-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #20656b;
  display: block;
  margin-bottom: 1rem;
  border-bottom: 3px solid #ffdac9;
  padding-bottom: 0.3rem;
}
.corporate-teach-new-log-item ul {
  list-style: none;
  padding: 0;
}
.corporate-teach-new-log-item li {
  padding: 0.3rem 0;
  font-size: 1rem;
  color: #3f7373;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.corporate-teach-new-log-item li::before {
  content: "▹";
  color: #b77a68;
}

/* ----- GLOBAL CORPORATE HUBS ----- */
.corporate-teach-new-hubs {
  background: #f5ede4;
  border-radius: 80px;
  padding: 2rem 2rem;
  margin: 4rem 0;
  border: 2px dashed #b7bcb0;
}
.corporate-teach-new-hubs-message {
  font-size: 1.3rem;
  font-weight: 700;
  color: #286565;
  text-align: center;
  margin-bottom: 1.5rem;
}
.corporate-teach-new-hub-cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}
.corporate-teach-new-hub {
  background: white;
  padding: 0.6rem 1.8rem;
  border-radius: 60px;
  font-weight: 600;
  color: #1d5c5c;
  border: 1px solid #dba894;
  box-shadow: 0 6px 0 #eedfd7;
  transition: 0.1s;
}
.corporate-teach-new-hub:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 #eedfd7;
}

/* ----- FINAL OUTRO (corporate authority) ----- */
.corporate-teach-new-outro {
  margin-top: 5rem;
  padding: 2.2rem;
  background: #03a9f4bf;
  border-radius: 80px 20px 80px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.corporate-teach-new-outro-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 1.4rem;
  text-align: center;
}
.corporate-teach-new-outro-content i {
  font-size: 2.5rem;
  color: #ffdac9;
}
.corporate-teach-new-outro-content strong {
  background: #fce9c4;
  color: #1e4a4a;
  padding: 0.2rem 0.8rem;
  border-radius: 40px;
  font-weight: 700;
}

/* ----- RESPONSIVE (all prefixed) ----- */
@media (max-width: 1000px) {
  .corporate-teach-new-hero-layout { grid-template-columns: 1fr; }
  .corporate-teach-new-comp-grid { grid-template-columns: 1fr; }
  .corporate-teach-new-case-grid { grid-template-columns: 1fr; }
  .corporate-teach-new-headline { font-size: 2.6rem; }
}
@media (max-width: 700px) {
  .corporate-teach-new-root { padding: 0 1rem 2rem; }
  .corporate-teach-new-modules-container { flex-direction: column; }
  .corporate-teach-new-progression-card { padding: 2rem 1.5rem; }
}

.student-reviews-section {
    background: #f5f6f8;
    padding-bottom: 80px;
}

/* HERO */

.student-reviews-hero {
    padding: 90px 20px 70px;
    background: linear-gradient(135deg, #009688, #00968870);
    text-align: center;
    color: #ffffff;
}

.student-reviews-hero-title {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 20px;
    color: white;
}

.student-reviews-hero-subtitle {
    font-size: 18px;
    opacity: 0.9;
}

/* CONTAINER */

.student-reviews-container {
    max-width: 1300px;
    margin: auto;
    padding: 0 20px;
    
}

/* PAGINATION TOP RIGHT */

.student-reviews-pagination-top {
    display: flex;
    justify-content: flex-end;
    margin: 40px 0 15px 0;
    padding-right: 20px;   /* margin from right */
}

.student-reviews-pagination {
    display: flex;
    gap: 8px;
}


/* Buttons */

.student-reviews-page-btn {
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #ffffff;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s ease;
    min-width: 34px;
}

.student-reviews-page-btn:hover {
    background: #1f2c3d;
    color: #ffffff;
    border-color: #1f2c3d;
}

.student-reviews-page-btn.active {
    background: #1f2c3d;
    color: #ffffff;
    border-color: #1f2c3d;
}

.student-reviews-page-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* TABLE */

.student-reviews-table-wrapper {
    background: #ffffff;
    border-radius: 8px;
    overflow-x: auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.student-reviews-table {
    width: 100%;
    border-collapse: collapse;
}

.student-reviews-table th {
    background: linear-gradient(135deg, #009688e6, #009688);
    color: #ffffff;
    padding: 18px;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}




.student-reviews-table td {
    padding: 18px;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: 12px;
}

.student-reviews-table tbody tr:hover {
    background: #f5f5f5;
}



.txtclear {
    display: none !important;
}

.student-reviews-avatar-name::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #1f2c3d transparent;
}


.student-reviews-student {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-reviews-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.student-reviews-course-icon {
    width: 40px;
}

.student-reviews-yes {
    color: #16a34a;
    font-weight: 600;
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .student-reviews-hero-title {
        font-size: 30px;
    }

    .student-reviews-pagination-top {
        padding-right: 10px;
    }
}
/* ============================= */
/* SECTION */
/* ============================= */

.job-board-css-section {
    padding: 90px 20px;
    background: linear-gradient(180deg,#f6f9fc,#eef3f8);
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
}



/* ============================= */
/* HEADER */
/* ============================= */

.job-board-css-header {
    max-width: 1200px;
    margin: auto;
    margin-bottom: 40px;
}

.job-board-css-title {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 20px;
}

.job-board-css-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.job-board-css-page-info {
    font-size: 14px;
    color: #555;
}

.job-board-css-dropdown select {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
}

/* ============================= */
/* TABLE */
/* ============================= */

.job-board-css-table-wrapper {
    max-width: 1200px;
    margin: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    overflow: hidden;
}

.job-board-css-row {
    display: grid;
    grid-template-columns: 100px 1.8fr 1fr 140px;
    align-items: center;
    padding: 18px 25px;
    border-bottom: 1px solid #eef2f7;
    transition: 0.3s ease;
}

.job-board-css-head {
    background: linear-gradient(135deg,#03A9F4,#0ccee7);
    color: #fff;
    font-weight: 600;
}

.job-board-css-row:hover {
    background: #f7fbff;
    transform: translateY(-2px);
}

/* ============================= */
/* LOGO */
/* ============================= */

.job-board-css-logo {
    position: relative;
    cursor: pointer;
}

.job-board-css-logo img {
    max-width: 70px;
    border-radius: 8px;
    transition: 0.3s ease;
}

.job-board-css-logo:hover img {
    transform: scale(1.05);
}

/* Tooltip */

.job-board-css-tooltip {
    position: absolute;
    top: 50%;
    left: 80px;
    transform: translateY(-50%);
    background: #1f2c3d;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    width: 250px;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.job-board-css-logo:hover .job-board-css-tooltip {
    opacity: 1;
}

/* ============================= */
/* JOB TITLE */
/* ============================= */

.job-board-css-job a {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #1f2c3d;
    transition: 0.3s ease;
}

.job-board-css-job a:hover {
    color: #03A9F4;
}

/* ============================= */
/* COUNTRY */
/* ============================= */

.job-board-css-country span {
    background: #eef6ff;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 13px;
    color: #03A9F4;
    font-weight: 500;
}

/* ============================= */
/* DATE */
/* ============================= */

.job-board-css-date {
    font-size: 13px;
    color: #8c8c8c;
}

/* ============================= */
/* PAGINATION */
/* ============================= */

.job-board-css-pagination {
    max-width: 1200px;
    margin: 40px auto 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.job-board-css-page-btn {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    transition: 0.3s ease;
}

.job-board-css-page-btn:hover {
    background: #03A9F4;
    color: #fff;
}

.job-board-css-page-btn.active {
    background: #03A9F4;
    color: #fff;
}

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 900px) {

    .job-board-css-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 20px;
    }

    .job-board-css-head {
        display: none;
    }

    .job-board-css-logo img {
        max-width: 60px;
    }

}
/* ============================= */
/* JOB SAFETY SECTION */
/* ============================= */

.job-board-css-safety {
    padding: 100px 20px;
    background: linear-gradient(135deg,#fff7f7,#fef2f2);
}

.job-board-css-safety-inner {
    max-width: 1000px;
    margin: auto;
    background: #ffffff;
    padding: 50px 60px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    display: flex;
    gap: 40px;
    align-items: flex-start;
    transition: 0.4s ease;
}

.job-board-css-safety-inner:hover {
    transform: translateY(-5px);
}

/* ICON */

.job-board-css-safety-icon {
    font-size: 48px;
    background: #ffe5e5;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CONTENT */

.job-board-css-safety-content h2 {
    font-size: 26px;
    margin-bottom: 20px;
    font-weight: 700;
}

.job-board-css-safety-content p {
    font-size: 15px;
    color: #444;
    margin-bottom: 20px;
    line-height: 1.6;
}

.job-board-css-safety-content ul {
    margin-bottom: 25px;
    padding-left: 20px;
}

.job-board-css-safety-content li {
    margin-bottom: 12px;
    font-size: 14px;
    color: #555;
}

/* ALERT BOX */

.job-board-css-alert {
    background: #ffeded;
    border-left: 4px solid #ff4d4d;
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #a80000;
}

/* ============================= */
/* MOBILE RESPONSIVE */
/* ============================= */

@media (max-width: 900px) {

    .job-board-css-safety-inner {
        flex-direction: column;
        padding: 40px 25px;
    }

    .job-board-css-safety-icon {
        width: 70px;
        height: 70px;
        font-size: 36px;
    }

    .job-board-css-safety-content h2 {
        font-size: 22px;
    }

}

.emp-regis {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at 10% 30%, #f1f9fc 0%, #e6f0f5 100%);
  padding: 4rem 2rem;
  color: #1a3b4e;
  line-height: 1.5;
}

.emp-regis__container {
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 40px;
  box-shadow: 0 25px 50px -12px rgba(0,30,50,0.15), 0 2px 6px 0 rgba(0,0,0,0.02);
  padding: 2.8rem 3.2rem;
  border: 1px solid rgba(255,255,255,0.5);
}

.emp-regis__header {
  text-align: center;
  margin-bottom: 2.8rem;
  border-bottom: 2px solid rgba(164, 200, 214, 0.3);
  padding-bottom: 2rem;
}

.emp-regis__pretitle {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #2a7f8f;
  margin-bottom: 0.6rem;
}

.emp-regis__title {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: #0c4a5c;
  margin: 0 0 1.2rem 0;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(44, 130, 150, 0.1);
}

.emp-regis__intro {
  color: #2c4e5e;
  font-size: 0.98rem;
  max-width: 750px;
  margin: 0 auto;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 1.4rem 2rem;
  border-radius: 24px;
  border: 1px solid rgba(92, 167, 186, 0.2);
  text-align: left;
  line-height: 1.7;
  box-shadow: 0 4px 10px -6px rgba(0,0,0,0.02);
}

.emp-regis__section {
  margin-bottom: 2.5rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid rgba(148, 184, 194, 0.2);
}

.emp-regis__section:last-of-type {
  border-bottom: none;
  margin-bottom: 1.8rem;
}

.emp-regis__section--terms {
  background: rgba(249, 252, 253, 0.6);
  border-radius: 28px;
  padding: 1.8rem 2rem;
  border: 1px solid rgba(128, 188, 200, 0.2);
  margin-top: 0.5rem;
}

.emp-regis__section-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #155a6b;
  margin: 0 0 1.6rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid #8ec3d0;
  display: inline-block;
  letter-spacing: 0.3px;
  background: linear-gradient(to right, #155a6b, #2a7f8f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-image: linear-gradient(to right, #8ec3d0, #4fa6b8) 1;
}

.emp-regis__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 2rem;
}

.emp-regis__field {
  display: flex;
  flex-direction: column;
}

.emp-regis__field--full {
  grid-column: 1 / -1;
}

.emp-regis__label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #1f6576;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.emp-regis__required {
  color: #cd3c3c;
  margin-left: 4px;
  font-weight: 800;
  font-size: 0.9rem;
}

.emp-regis__hint {
  font-size: 0.65rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.3px;
  color: #5f7e8a;
  margin-top: 0.25rem;
  font-style: italic;
}

.emp-regis__input,
.emp-regis__textarea,
.emp-regis__select {
  width: 100%;
  padding: 0.8rem 1.2rem;
  font-size: 0.98rem;
  border: 1.5px solid #dfecf0;
  border-radius: 18px;
  background-color: white;
  transition: all 0.25s cubic-bezier(0.02, 0.8, 0.2, 1);
  box-sizing: border-box;
  font-family: inherit;
  box-shadow: 0 2px 4px rgba(0,0,0,0.01);
}

.emp-regis__textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

.emp-regis__select-wrapper {
  position: relative;
  width: 100%;
}

.emp-regis__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a7f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 1.2rem;
  padding-right: 3rem;
  cursor: pointer;
}

.emp-regis__input:focus,
.emp-regis__textarea:focus,
.emp-regis__select:focus {
  outline: none;
  border-color: #3fa3b9;
  box-shadow: 0 0 0 5px rgba(63, 163, 185, 0.08);
  background-color: #fefeff;
}

.emp-regis__input:hover,
.emp-regis__textarea:hover,
.emp-regis__select:hover {
  border-color: #8ec3d0;
  background-color: #fafeff;
}

.emp-regis__terms {
  margin-bottom: 1.8rem;
}

.emp-regis__checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.98rem;
  color: #1f4e5a;
  cursor: pointer;
}

.emp-regis__checkbox {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 6px;
  border: 2px solid #aacdd6;
  accent-color: #2a7f8f;
  cursor: pointer;
  transition: all 0.1s ease;
}

.emp-regis__checkbox-text {
  line-height: 1.5;
}

.emp-regis__link {
  color: #1a7e8c;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid rgba(42, 127, 143, 0.2);
  transition: border-color 0.2s;
}

.emp-regis__link:hover {
  border-bottom-color: #1a7e8c;
}

/* MATH CAPTCHA STYLES */
.emp-regis__captcha {
  margin-top: 0.8rem;
}

.emp-regis__captcha-box {
  background: white;
  border-radius: 20px;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgba(63, 163, 185, 0.3);
  box-shadow: 0 8px 20px -8px rgba(0,60,80,0.08);
}

.emp-regis__captcha-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.emp-regis__captcha-icon {
  font-size: 1.4rem;
}

.emp-regis__captcha-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1f6576;
}

.emp-regis__captcha-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.emp-regis__captcha-equation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(145deg, #f0f7fa, #e6f0f4);
  padding: 0.8rem 1.2rem;
  border-radius: 16px;
  border: 1px solid rgba(128, 188, 200, 0.2);
}

.emp-regis__equation {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0c4a5c;
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
}

.emp-regis__captcha-refresh {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a7f8f;
  transition: all 0.2s ease;
}

.emp-regis__captcha-refresh:hover {
  background: rgba(42, 127, 143, 0.1);
  transform: rotate(180deg);
}

.emp-regis__refresh-icon {
  font-size: 1.4rem;
}

.emp-regis__captcha-input-wrapper {
  width: 100%;
}

.emp-regis__captcha-input {
  width: 100%;
  padding: 0.9rem 1.2rem;
  font-size: 1rem;
  border: 2px solid #dfecf0;
  border-radius: 16px;
  background-color: white;
  transition: all 0.2s ease;
  box-sizing: border-box;
  font-family: inherit;
}

.emp-regis__captcha-input:focus {
  outline: none;
  border-color: #3fa3b9;
  box-shadow: 0 0 0 5px rgba(63, 163, 185, 0.08);
}

.emp-regis__captcha-input::-webkit-outer-spin-button,
.emp-regis__captcha-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.emp-regis__captcha-input[type=number] {
  -moz-appearance: textfield;
}

.emp-regis__submit {
  margin-top: 2rem;
  text-align: center;
}

.emp-regis__button {
  background: linear-gradient(135deg, #03A9F4, #0a4857);
  color: white;
  font-size: 1.08rem;
  font-weight: 600;
  padding: 1rem 2.6rem;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 15px 25px -10px rgba(12, 74, 92, 0.3);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border: 1px solid rgba(255,255,255,0.2);
}

.emp-regis__button:hover {
  background: linear-gradient(135deg, #1f7e91, #0e5b6b);
  transform: translateY(-3px);
  box-shadow: 0 22px 30px -10px rgba(12, 74, 92, 0.4);
}

.emp-regis__button:active {
  transform: translateY(0px);
  box-shadow: 0 12px 20px -8px rgba(12, 74, 92, 0.4);
}

.emp-regis__button-icon {
  font-size: 1.3rem;
  transition: transform 0.2s;
}

.emp-regis__button:hover .emp-regis__button-icon {
  transform: translateX(5px);
}

/* Responsive adjustments */
@media (max-width: 750px) {
  .emp-regis {
    padding: 2rem 1rem;
  }
  
  .emp-regis__container {
    padding: 1.8rem;
  }
  
  .emp-regis__grid {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }
  
  .emp-regis__title {
    font-size: 2rem;
  }
  
  .emp-regis__button {
    width: 100%;
    padding: 1rem 1.5rem;
  }
  
  .emp-regis__section--terms {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .emp-regis__checkbox-label {
    align-items: flex-start;
  }
  
  .emp-regis__checkbox {
    margin-top: 0.2rem;
  }
  
  .emp-regis__captcha-equation {
    flex-direction: column;
    gap: 0.8rem;
    align-items: flex-start;
  }
}

.emp-login {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(145deg, #f0f7fc 0%, #e3eef4 100%);
  padding: 3rem 2rem;
  color: #1a3b4e;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.emp-login__container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 48px;
  box-shadow: 0 30px 60px -20px rgba(0,50,70,0.2), 0 8px 20px -8px rgba(0,30,40,0.1);
  border: 1px solid rgba(255,255,255,0.6);
  overflow: hidden;
}

/* Illustration Panel */
.emp-login__illustration {
  background: linear-gradient(145deg, #03A9F4, #0a4d5c);
  padding: 3rem 2.5rem;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.emp-login__illustration::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.emp-login__illustration::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -20%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.emp-login__illustration-content {
  position: relative;
  z-index: 2;
  color: white;
}

.emp-login__illustration-icon {
  font-size: 3.5rem;
  display: block;
  margin-bottom: 1.5rem;
  animation: float 3s ease-in-out infinite;
}

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

.emp-login__illustration-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  letter-spacing: -0.5px;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.emp-login__illustration-text {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  opacity: 0.9;
  color: rgba(255,255,255,0.95);
}

.emp-login__illustration-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.emp-login__stat {
  display: flex;
  flex-direction: column;
}

.emp-login__stat-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.2rem;
  letter-spacing: -0.5px;
}

.emp-login__stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
  color: rgba(255,255,255,0.9);
}

/* Login Panel */
.emp-login__panel {
  padding: 3rem 2.5rem;
  background: white;
}

.emp-login__header {
  margin-bottom: 2.2rem;
}

.emp-login__pretitle {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #2a7f8f;
  margin-bottom: 0.5rem;
}

.emp-login__title {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #0c4a5c;
  margin: 0 0 0.3rem 0;
  text-transform: uppercase;
}

.emp-login__welcome {
  font-size: 1rem;
  color: #4f6f7a;
  margin: 0;
}

/* Form Fields */
.emp-login__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.emp-login__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.emp-login__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1f6576;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.emp-login__label-icon {
  font-size: 1rem;
}

.emp-login__input {
  width: 100%;
  padding: 0.9rem 1.2rem;
  font-size: 0.98rem;
  border: 2px solid #e2edf2;
  border-radius: 20px;
  background-color: #fafeff;
  transition: all 0.25s cubic-bezier(0.02, 0.8, 0.2, 1);
  box-sizing: border-box;
  font-family: inherit;
}

.emp-login__input:focus {
  outline: none;
  border-color: #3fa3b9;
  box-shadow: 0 0 0 5px rgba(63, 163, 185, 0.08);
  background-color: white;
}

.emp-login__input:hover {
  border-color: #8ec3d0;
  background-color: white;
}

/* Password Field with Toggle */
.emp-login__password-wrapper {
  position: relative;
  width: 100%;
}

.emp-login__input--password {
  padding-right: 3.5rem;
}

.emp-login__password-toggle {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f8a98;
  transition: all 0.2s ease;
}

.emp-login__password-toggle:hover {
  background: rgba(63, 163, 185, 0.08);
  color: #1f6576;
}

.emp-login__password-toggle-icon {
  font-size: 1.2rem;
}

/* Remember Me & Forgot Password Row */
.emp-login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.2rem 0 0.5rem;
}

.emp-login__checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: #2c5a66;
  cursor: pointer;
}

.emp-login__checkbox {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 5px;
  border: 2px solid #b6d3db;
  accent-color: #2a7f8f;
  cursor: pointer;
}

.emp-login__forgot-link {
  font-size: 0.85rem;
  color: #1a7e8c;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid rgba(42, 127, 143, 0.2);
  transition: border-color 0.2s;
  padding-bottom: 2px;
}

.emp-login__forgot-link:hover {
  border-bottom-color: #1a7e8c;
}

/* Submit Button */
.emp-login__button {
  background: linear-gradient(135deg, #03A9F4, #0a4857);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  padding: 1rem 2rem;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 15px 25px -10px rgba(12, 74, 92, 0.3);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border: 1px solid rgba(255,255,255,0.2);
  margin-top: 0.5rem;
}

.emp-login__button:hover {
  background: linear-gradient(135deg, #1f7e91, #0e5b6b);
  transform: translateY(-3px);
  box-shadow: 0 22px 30px -10px rgba(12, 74, 92, 0.4);
}

.emp-login__button:active {
  transform: translateY(0px);
}

.emp-login__button-icon {
  font-size: 1.2rem;
  transition: transform 0.2s;
}

.emp-login__button:hover .emp-login__button-icon {
  transform: translateX(5px);
}

/* New User Registration */
.emp-login__register {
  text-align: center;
  margin-top: 1.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(128, 188, 200, 0.2);
}

.emp-login__register-text {
  font-size: 0.9rem;
  color: #3d6b76;
  margin-right: 0.5rem;
}

.emp-login__register-link {
  font-size: 0.95rem;
  color: #1a7e8c;
  text-decoration: none;
  font-weight: 700;
  border-bottom: 2px solid rgba(42, 127, 143, 0.2);
  transition: border-color 0.2s;
  padding-bottom: 2px;
}

.emp-login__register-link:hover {
  border-bottom-color: #1a7e8c;
}

/* Footer Links */
.emp-login__footer {
  margin-top: 2rem;
  text-align: center;
}

.emp-login__footer-text {
  font-size: 0.75rem;
  color: #6b8a94;
  margin: 0 0 0.5rem 0;
}

.emp-login__footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.emp-login__footer-link {
  font-size: 0.75rem;
  color: #2c5a66;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.emp-login__footer-link:hover {
  color: #1a7e8c;
}

.emp-login__footer-separator {
  color: #9bb7c0;
  font-size: 0.75rem;
}

/* Responsive Design */
@media (max-width: 900px) {
  .emp-login__container {
    grid-template-columns: 1fr;
    max-width: 550px;
  }
  
  .emp-login__illustration {
    padding: 2.5rem 2rem;
  }
  
  .emp-login__illustration-title {
    font-size: 1.8rem;
  }
  
  .emp-login__panel {
    padding: 2.5rem 2rem;
  }
}

@media (max-width: 480px) {
  .emp-login {
    padding: 1.5rem 1rem;
  }
  
  .emp-login__panel {
    padding: 2rem 1.5rem;
  }
  
  .emp-login__title {
    font-size: 1.8rem;
  }
  
  .emp-login__illustration-stats {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .emp-login__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

.emp-forgot {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(135deg, #edf5f9 0%, #dee9ef 100%);
  padding: 3rem 2rem;
  color: #1a3b4e;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.emp-forgot__container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 48px;
  box-shadow: 0 30px 60px -20px rgba(0, 59, 74, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

/* Illustration Panel - Soothing Design */
.emp-forgot__illustration {
  background: linear-gradient(145deg, #03A9F4, #06414b);
  padding: 3rem 2.5rem;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.emp-forgot__illustration::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -30%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 222, 160, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.emp-forgot__illustration::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -20%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(255, 215, 150, 0.06) 0%, transparent 70%);
  border-radius: 50%;
}

.emp-forgot__illustration-content {
  position: relative;
  z-index: 2;
  color: white;
}

.emp-forgot__illustration-icon-wrapper {
  background: rgba(255, 255, 255, 0.12);
  width: 80px;
  height: 80px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.emp-forgot__illustration-icon {
  font-size: 3rem;
  animation: gentle-shake 4s ease-in-out infinite;
}

@keyframes gentle-shake {
  0%, 100% { transform: rotate(0deg); }
  5% { transform: rotate(-5deg); }
  10% { transform: rotate(5deg); }
  15% { transform: rotate(-3deg); }
  20% { transform: rotate(0deg); }
}

.emp-forgot__illustration-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 1.2rem 0;
  letter-spacing: -0.5px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.emp-forgot__illustration-text {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  opacity: 0.95;
  color: rgba(255, 255, 255, 0.95);
}

.emp-forgot__illustration-tips {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 1.5rem;
  border-radius: 24px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.emp-forgot__tip {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.emp-forgot__tip-icon {
  background: rgba(255, 255, 255, 0.2);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
}

.emp-forgot__tip-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.95);
}

/* Form Panel */
.emp-forgot__panel {
  padding: 3rem 2.8rem;
  background: white;
}

.emp-forgot__header {
  margin-bottom: 2.5rem;
}

.emp-forgot__pretitle {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #2a7f8f;
  margin-bottom: 0.6rem;
}

.emp-forgot__title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #0c4a5c;
  margin: 0 0 0.8rem 0;
  text-transform: uppercase;
}

.emp-forgot__subtitle {
  font-size: 0.98rem;
  color: #4f6f7a;
  margin: 0;
  line-height: 1.6;
}

/* Form Fields */
.emp-forgot__form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.emp-forgot__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.emp-forgot__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1f6576;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.emp-forgot__label-icon {
  font-size: 1rem;
}

.emp-forgot__input-wrapper {
  position: relative;
  width: 100%;
}

.emp-forgot__input {
  width: 100%;
  padding: 0.95rem 1.3rem;
  font-size: 1rem;
  border: 2px solid #e2edf2;
  border-radius: 24px;
  background-color: #fafeff;
  transition: all 0.25s cubic-bezier(0.02, 0.8, 0.2, 1);
  box-sizing: border-box;
  font-family: inherit;
}

.emp-forgot__input:focus {
  outline: none;
  border-color: #3fa3b9;
  box-shadow: 0 0 0 5px rgba(63, 163, 185, 0.08);
  background-color: white;
}

.emp-forgot__input:hover {
  border-color: #8ec3d0;
  background-color: white;
}

.emp-forgot__input::placeholder {
  color: #9bb7c0;
  font-weight: 300;
}

.emp-forgot__hint {
  font-size: 0.7rem;
  color: #5f8a98;
  margin-left: 0.5rem;
  font-style: italic;
}

/* Submit Button */
.emp-forgot__button {
  background: linear-gradient(145deg, #03A9F4, #06414b);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  padding: 1.1rem 2rem;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 15px 25px -10px rgba(14, 95, 107, 0.3);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 0.5rem;
}

.emp-forgot__button:hover {
  background: linear-gradient(135deg, #127a89, #0b5e6b);
  transform: translateY(-3px);
  box-shadow: 0 22px 30px -10px rgba(14, 95, 107, 0.4);
}

.emp-forgot__button:active {
  transform: translateY(0px);
  box-shadow: 0 15px 25px -10px rgba(14, 95, 107, 0.3);
}

.emp-forgot__button-icon {
  font-size: 1.2rem;
  transition: transform 0.2s;
}

.emp-forgot__button:hover .emp-forgot__button-icon {
  transform: translateX(5px) scale(1.1);
}

/* Return to Login Link */
.emp-forgot__return {
  text-align: center;
  margin: 0.5rem 0 1.5rem;
}

.emp-forgot__return-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #1a7e8c;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 30px;
  transition: all 0.2s;
}

.emp-forgot__return-link:hover {
  background: rgba(26, 126, 140, 0.06);
  gap: 0.8rem;
}

.emp-forgot__return-icon {
  font-size: 1.1rem;
  transition: transform 0.2s;
}

.emp-forgot__return-link:hover .emp-forgot__return-icon {
  transform: translateX(-3px);
}

/* Alternative Options */
.emp-forgot__alt-options {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(128, 188, 200, 0.2);
}

.emp-forgot__alt-text {
  font-size: 0.9rem;
  color: #3d6b76;
  margin-right: 0.6rem;
}

.emp-forgot__alt-link {
  font-size: 0.95rem;
  color: #1a7e8c;
  text-decoration: none;
  font-weight: 700;
  border-bottom: 2px solid rgba(42, 127, 143, 0.2);
  transition: border-color 0.2s;
  padding-bottom: 2px;
}

.emp-forgot__alt-link:hover {
  border-bottom-color: #1a7e8c;
}

/* Security Note */
.emp-forgot__security {
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  background: #f0f7fa;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid rgba(63, 163, 185, 0.2);
}

.emp-forgot__security-icon {
  font-size: 1.2rem;
}

.emp-forgot__security-text {
  font-size: 0.75rem;
  color: #1f5e6b;
  line-height: 1.5;
}

/* Success Modal */
.emp-forgot__modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 50, 60, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
}

.emp-forgot__modal--show {
  opacity: 1;
  visibility: visible;
}

.emp-forgot__modal-content {
  background: white;
  max-width: 450px;
  width: 90%;
  padding: 2.5rem;
  border-radius: 40px;
  box-shadow: 0 40px 80px -20px rgba(0, 59, 74, 0.3);
  text-align: center;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.emp-forgot__modal--show .emp-forgot__modal-content {
  transform: scale(1);
}

.emp-forgot__modal-icon {
  font-size: 3.5rem;
  margin-bottom: 1.2rem;
}

.emp-forgot__modal-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0c4a5c;
  margin: 0 0 1rem 0;
}

.emp-forgot__modal-text {
  font-size: 1rem;
  color: #2c5e6b;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.emp-forgot__modal-text strong {
  color: #0e5f6b;
  font-weight: 700;
}

.emp-forgot__modal-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.emp-forgot__modal-button {
  background: linear-gradient(135deg, #0e5f6b, #094c56);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  padding: 1rem;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.emp-forgot__modal-button:hover {
  background: linear-gradient(135deg, #127a89, #0b5e6b);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(14, 95, 107, 0.4);
}

.emp-forgot__modal-link {
  color: #1a7e8c;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem;
  border-bottom: 2px solid rgba(26, 126, 140, 0.2);
  transition: border-color 0.2s;
}

.emp-forgot__modal-link:hover {
  border-bottom-color: #1a7e8c;
}

/* Responsive Design */
@media (max-width: 900px) {
  .emp-forgot__container {
    grid-template-columns: 1fr;
    max-width: 550px;
  }
  
  .emp-forgot__illustration {
    padding: 2.5rem 2rem;
  }
  
  .emp-forgot__illustration-title {
    font-size: 1.8rem;
  }
  
  .emp-forgot__panel {
    padding: 2.5rem 2rem;
  }
}

@media (max-width: 480px) {
  .emp-forgot {
    padding: 1.5rem 1rem;
  }
  
  .emp-forgot__panel {
    padding: 2rem 1.5rem;
  }
  
  .emp-forgot__title {
    font-size: 1.6rem;
  }
  
  .emp-forgot__illustration-icon-wrapper {
    width: 60px;
    height: 60px;
  }
  
  .emp-forgot__illustration-icon {
    font-size: 2.2rem;
  }
  
  .emp-forgot__illustration-tips {
    padding: 1.2rem;
  }
  
  .emp-forgot__security {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  
  .emp-forgot__modal-content {
    padding: 2rem 1.5rem;
  }
}

/* Dark mode support - optional */
@media (prefers-color-scheme: dark) {
  .emp-forgot {
    background: linear-gradient(135deg, #0a3840, #052b31);
  }
  
  .emp-forgot__container {
    background: rgba(20, 55, 65, 0.95);
    border-color: rgba(80, 140, 150, 0.3);
  }
  
  .emp-forgot__panel {
    background: #0f404a;
  }
  
  .emp-forgot__title {
    color: #e2edf2;
  }
  
  .emp-forgot__subtitle,
  .emp-forgot__alt-text {
    color: #b8d8e0;
  }
  
  .emp-forgot__input {
    background: #1a4f5a;
    border-color: #2d6b77;
    color: white;
  }
  
  .emp-forgot__input::placeholder {
    color: #8fb6c0;
  }
}

/* ============================================================
   TEFLEN — Teach TEFL in the Middle East
   All classes prefixed: up-east-css
   Aesthetic: Luxury editorial · Islamic geometry · Desert gold
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Outfit:wght@300;400;500;600&family=Cinzel:wght@400;600;700&display=swap');

/* ---- CSS Variables ---- */
.up-east-css-page {
  --e-sand:        #F5E6C8;
  --e-sand-light:  #FBF4E5;
  --e-sand-deep:   #E8D5A8;
  --e-amber:       #C8860A;
  --e-amber-rich:  #E09B12;
  --e-gold:        #D4AF37;
  --e-gold-pale:   #F0D97A;
  --e-copper:      #A0522D;
  --e-night-mid:   #1E1005;
  --e-night-warm:  #2B1A08;
  --e-off-white:   #FAF6EE;
  --e-text-dark:   #1C100A;
  --e-text-mid:    #4A3520;
  --e-text-soft:   #7A6040;

  font-family: 'Outfit', sans-serif;
  color: var(--e-text-dark);
  background: var(--e-sand-light);
  overflow-x: hidden;
}

/* ============================================================
   HERO
   ============================================================ */
.up-east-css-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--e-night-mid);
}

.up-east-css-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(200, 134, 10, 0.18) 0%, transparent 65%), radial-gradient(ellipse 50% 80% at 10% 80%, rgba(107, 26, 26, 0.25) 0%, transparent 55%), linear-gradient(160deg, #92806b 0%, #a57753 45%, #2B1A08 100%);
}

.up-east-css-hero-geo {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.8'%3E%3Cpolygon points='60,5 73,38 108,38 80,58 91,92 60,72 29,92 40,58 12,38 47,38'/%3E%3Cpolygon points='60,18 70,42 95,42 75,57 83,82 60,67 37,82 45,57 25,42 50,42'/%3E%3Ccircle cx='60' cy='60' r='55'/%3E%3Ccircle cx='60' cy='60' r='30'/%3E%3Cline x1='60' y1='5' x2='60' y2='115'/%3E%3Cline x1='5' y1='60' x2='115' y2='60'/%3E%3Cline x1='16' y1='16' x2='104' y2='104'/%3E%3Cline x1='104' y1='16' x2='16' y2='104'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}

.up-east-css-hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(15,8,0,0.6) 100%);
  pointer-events: none;
}

.up-east-css-hero-content {
  position: relative;
  z-index: 4;
  max-width: 1320px;
  margin: 0 auto;
  padding: 70px 70px 100px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 70px;
  align-items: center;
  width: 100%;
}

.up-east-css-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
  animation: up-east-css-rise 0.9s ease both;
}

.up-east-css-eyebrow-line {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--e-gold);
}

.up-east-css-eyebrow-text {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--e-gold);
}

.up-east-css-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(48px, 5.8vw, 88px);
  font-weight: 700;
  line-height: 1.0;
  color: var(--e-sand-light);
  margin-bottom: 8px;
  animation: up-east-css-rise 1s ease 0.1s both;
}

.up-east-css-hero-title-accent {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(48px, 5.8vw, 88px);
  font-weight: 300;
  font-style: italic;
  color: var(--e-gold-pale);
  display: block;
  line-height: 1.0;
  margin-bottom: 28px;
  animation: up-east-css-rise 1s ease 0.18s both;
}

.up-east-css-hero-desc {
  font-size: 17px;
  font-weight: 300;
  color: rgba(245,230,200,0.65);
  line-height: 1.85;
  max-width: 510px;
  margin-bottom: 44px;
  animation: up-east-css-rise 1s ease 0.28s both;
}

.up-east-css-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  animation: up-east-css-rise 1s ease 0.38s both;
}

.up-east-css-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--e-gold) 0%, var(--e-amber) 100%);
  color: #e9e4e1;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 15px 34px;
  border-radius: 2px;
  text-decoration: none;
  box-shadow: 0 4px 30px rgba(212,175,55,0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.up-east-css-btn-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--e-gold-pale), var(--e-amber-rich));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.up-east-css-btn-gold:hover::before { opacity: 1; }
.up-east-css-btn-gold:hover { transform: translateY(-3px); box-shadow: 0 10px 40px rgba(212,175,55,0.45); }
.up-east-css-btn-gold span,
.up-east-css-btn-gold svg { position: relative; z-index: 1; }
.up-east-css-btn-gold svg { width: 16px; height: 16px; }

.up-east-css-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--e-sand);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 15px 34px;
  border-radius: 2px;
  border: 1px solid rgba(212,175,55,0.35);
  text-decoration: none;
  transition: all 0.3s ease;
}

.up-east-css-btn-outline:hover {
  border-color: var(--e-gold);
  background: rgba(212,175,55,0.06);
  color: var(--e-gold-pale);
}

.up-east-css-hero-stats {
  display: flex;
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid rgba(212,175,55,0.15);
  padding-top: 40px;
  animation: up-east-css-rise 1s ease 0.5s both;
}

.up-east-css-hero-stat {
  flex: 1;
  border-right: 1px solid rgba(212,175,55,0.12);
  padding-right: 32px;
  margin-right: 32px;
}

.up-east-css-hero-stat:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}

.up-east-css-hero-stat-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 46px;
  font-weight: 700;
  color: var(--e-gold-pale);
  line-height: 1;
  display: block;
}

.up-east-css-hero-stat-l {
  font-size: 11px;
  font-weight: 400;
  color: rgba(245,230,200,0.45);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-top: 5px;
}

/* Hero arch visual */
.up-east-css-hero-arch-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  animation: up-east-css-rise 1.1s ease 0.35s both;
}

.up-east-css-arch-svg-container {
  position: relative;
  width: 360px;
  height: 480px;
}

.up-east-css-arch-card {
  position: absolute;
  background: rgb(150 86 36 / 80%);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 6px;
  padding: 14px 18px;
  animation: up-east-css-float ease-in-out infinite;
  white-space: nowrap;
}

.up-east-css-arch-card:nth-child(2) { top: 8%; right: -22%; animation-duration: 5s; }
.up-east-css-arch-card:nth-child(3) { top: 50%; left: -22%; animation-duration: 4.5s; animation-delay: 0.8s; }
.up-east-css-arch-card:nth-child(4) { bottom: 5%; right: -18%; animation-duration: 6s; animation-delay: 1.5s; }

.up-east-css-arch-card-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--e-gold);
  font-weight: 600;
  margin-bottom: 4px;
  font-family: 'Cinzel', serif;
}

.up-east-css-arch-card-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--e-sand-light);
  line-height: 1.1;
}

.up-east-css-arch-card-sub {
  font-size: 11px;
  color: rgb(246 242 229 / 66%);
  margin-top: 2px;
}

/* ============================================================
   INTRODUCTION
   ============================================================ */
.up-east-css-intro {
  background: var(--e-sand-light);
  padding: 110px 70px;
  position: relative;
  overflow: hidden;
}

.up-east-css-intro::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 400px;
  height: 400px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23C8860A' stroke-width='0.8' opacity='0.12'%3E%3Cpolygon points='200,10 250,148 388,148 278,230 320,368 200,286 80,368 122,230 12,148 150,148'/%3E%3Ccircle cx='200' cy='200' r='185'/%3E%3Ccircle cx='200' cy='200' r='120'/%3E%3Ccircle cx='200' cy='200' r='55'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 400px 400px;
  pointer-events: none;
}

.up-east-css-section-wrap { max-width: 1320px; margin: 0 auto; }

.up-east-css-section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.up-east-css-section-label::before,
.up-east-css-section-label::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--e-amber);
}
.up-east-css-section-label::before { width: 30px; }
.up-east-css-section-label::after  { width: 10px; }

.up-east-css-section-label span {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--e-amber);
  font-weight: 600;
}

.up-east-css-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 3.8vw, 58px);
  font-weight: 700;
  color: var(--e-text-dark);
  line-height: 1.12;
  margin-bottom: 0;
}

.up-east-css-section-title em {
  font-style: italic;
  color: var(--e-amber);
}

.up-east-css-intro-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: start;
  margin-top: 20px;
}

.up-east-css-intro-text p {
  font-size: 16px;
  font-weight: 300;
  color: var(--e-text-mid);
  line-height: 1.9;
  margin-top: 24px;
}

.up-east-css-intro-text p strong {
  font-weight: 600;
  color: var(--e-text-dark);
}

.up-east-css-pullquote {
  border-left: 3px solid var(--e-gold);
  padding: 20px 28px;
  margin: 36px 0 0;
  background: rgba(212,175,55,0.05);
  border-radius: 0 6px 6px 0;
}

.up-east-css-pullquote p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  color: var(--e-text-dark);
  line-height: 1.55;
  margin: 0 !important;
}

.up-east-css-opp-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 80px;
}

.up-east-css-opp-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #f3d49730;
  border: 1px solid rgba(200,134,10,0.1);
  border-radius: 8px;
  padding: 24px 26px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.up-east-css-opp-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--e-gold), var(--e-amber));
  transform: scaleY(0);
  transition: transform 0.3s ease;
  transform-origin: top;
}

.up-east-css-opp-card:hover { transform: translateX(6px); border-color: rgba(200,134,10,0.25); }
.up-east-css-opp-card:hover::before { transform: scaleY(1); }

.up-east-css-opp-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(200,134,10,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.up-east-css-opp-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--e-amber);
  fill: none;
  stroke-width: 1.7;
}

.up-east-css-opp-body h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--e-amber);
  margin-bottom: 6px;
}

.up-east-css-opp-body p {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--e-text-mid);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   COUNTRY SHOWCASE (Tabbed)
   ============================================================ */
.up-east-css-countries {
  background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(200, 134, 10, 0.18) 0%, transparent 65%), radial-gradient(ellipse 50% 80% at 10% 80%, rgba(107, 26, 26, 0.25) 0%, transparent 55%), linear-gradient(160deg, #eca350 0%, #9a5724 45%, #af6a24 100%);
  padding: 110px 70px;
  position: relative;
  overflow: hidden;
}

.up-east-css-countries::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 20%, rgba(212,175,55,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 8%,  rgba(245,230,200,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 28%, rgba(212,175,55,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 14%, rgba(245,230,200,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 72%, rgba(212,175,55,0.4) 0%, transparent 100%),
    radial-gradient(2px 2px at 55% 55%, rgba(212,175,55,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 48%, rgba(245,230,200,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 60%, rgba(212,175,55,0.35) 0%, transparent 100%);
  pointer-events: none;
}

.up-east-css-countries .up-east-css-section-label::before,
.up-east-css-countries .up-east-css-section-label::after { background: var(--e-gold); }
.up-east-css-countries .up-east-css-section-label span { color: var(--e-gold-pale); }
.up-east-css-countries .up-east-css-section-title { color: var(--e-sand-light); }
.up-east-css-countries .up-east-css-section-title em { color: var(--e-gold-pale); }

.up-east-css-country-tabs {
  display: flex;
  gap: 0;
  margin: 48px 0 0;
  border-bottom: 1px solid rgba(212,175,55,0.15);
  flex-wrap: wrap;
}

.up-east-css-tab-btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(243 237 229 / 58%);
  padding: 14px 24px;
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.25s ease;
}

.up-east-css-tab-btn:hover { color: rgba(245,230,200,0.75); }

.up-east-css-tab-btn.up-east-css-active {
  color: var(--e-gold-pale);
  border-bottom-color: var(--e-gold);
}

.up-east-css-tab-panel { display: none; margin-top: 50px; }
.up-east-css-tab-panel.up-east-css-active {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 70px;
  align-items: start;
}

.up-east-css-country-visual {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.up-east-css-country-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.up-east-css-country-label-strip {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 28px 24px;
  background: linear-gradient(to top, rgba(15,8,0,0.92) 0%, transparent 100%);
}

.up-east-css-country-label-strip h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--e-sand-light);
  margin-bottom: 4px;
}

.up-east-css-country-label-strip p {
  font-size: 13px;
  color: rgba(245,230,200,0.5);
  letter-spacing: 0.08em;
}

.up-east-css-country-info p {
  font-size: 15px;
  font-weight: 300;
  color: rgba(245,230,200,0.6);
  line-height: 1.85;
  margin-bottom: 28px;
}

.up-east-css-fact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}

.up-east-css-fact {
  background: rgb(177 120 36 / 42%);
  border: 1px solid rgba(212,175,55,0.12);
  border-radius: 6px;
  padding: 16px 18px;
}

.up-east-css-fact-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--e-gold);
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  font-family: 'Cinzel', serif;
}

.up-east-css-fact-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--e-sand-light);
  line-height: 1.1;
}

.up-east-css-perk-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.up-east-css-perk-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: 300;
  color: rgba(245,230,200,0.6);
  line-height: 1.5;
}

.up-east-css-perk-dot {
  flex-shrink: 0;
  margin-top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--e-gold);
}

/* Country scene backgrounds */
.up-east-css-bg-uae    { background: linear-gradient(180deg, #9bbced 0%, #2d4a85 40% 40%, #764d1a 75%, #C8860A 100%) }
.up-east-css-bg-saudi  { background: linear-gradient(180deg, #0d1a0a 0%, #1a3010 50%, #4a3a0a 80%, #8B6914 100%); }
.up-east-css-bg-qatar  { background: linear-gradient(180deg, #0a0a20 0%, #1a1a40 50%, #3a1020 80%, #8B2252 100%); }
.up-east-css-bg-oman   { background: linear-gradient(180deg, #1a0a0a 0%, #2a1010 50%, #4a2a10 80%, #A0521E 100%); }
.up-east-css-bg-kuwait { background: linear-gradient(180deg, #0a1220 0%, #162030 50%, #3a3010 80%, #B8860B 100%); }

/* ============================================================
   SALARY SECTION
   ============================================================ */
.up-east-css-salary {
  background: var(--e-sand-light);
  padding: 110px 70px;
  position: relative;
  overflow: hidden;
}

.up-east-css-salary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-top: 20px;
}

.up-east-css-salary-table {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
}

.up-east-css-salary-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(200,134,10,0.1);
  position: relative;
}

.up-east-css-salary-row:last-child { border-bottom: none; }

.up-east-css-salary-flag {
  width: 36px;
  height: 26px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.up-east-css-salary-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--e-text-dark);
}

.up-east-css-salary-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--e-amber);
  white-space: nowrap;
  text-align: right;
}

.up-east-css-salary-note {
  font-size: 11px;
  color: var(--e-text-soft);
  letter-spacing: 0.04em;
  text-align: right;
}

.up-east-css-salary-bar-track {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 2px;
  background: rgba(200,134,10,0.08);
}

.up-east-css-salary-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--e-gold), var(--e-amber-rich));
  transform-origin: left;
  animation: up-east-css-bar 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Benefits panel */
.up-east-css-benefits-panel {
  background: #a25a23f7;
  border-radius: 10px;
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
  margin-top: 36px;
}

.up-east-css-benefits-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpolygon points='30,3 37,22 57,22 41,34 47,54 30,42 13,54 19,34 3,22 23,22' fill='none' stroke='%23D4AF37' stroke-width='0.5' opacity='0.12'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
}

.up-east-css-benefits-panel h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--e-sand-light);
  margin-bottom: 28px;
  position: relative;
}

.up-east-css-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(212,175,55,0.08);
  position: relative;
}
.up-east-css-benefit-item:last-child { border-bottom: none; }

.up-east-css-benefit-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(212,175,55,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.up-east-css-benefit-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--e-gold);
  fill: none;
  stroke-width: 2;
}

.up-east-css-benefit-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--e-sand-light);
  margin-bottom: 3px;
}

.up-east-css-benefit-desc {
  font-size: 13px;
  font-weight: 300;
  color: #b3a2a2;
  line-height: 1.5;
}

/* ============================================================
   TEFL REQUIREMENTS
   ============================================================ */
.up-east-css-requirements {
  background: var(--e-off-white);
  padding: 110px 70px;
  position: relative;
  overflow: hidden;
}

.up-east-css-requirements::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 500px;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='800' viewBox='0 0 500 800'%3E%3Cpath d='M500 0 L500 800 L100 800 Q250 600 250 400 Q250 200 400 0 Z' fill='rgba(200,134,10,0.03)'/%3E%3Cpath d='M500 0 L500 800 L200 800 Q350 600 350 400 Q350 200 450 0 Z' fill='rgba(200,134,10,0.025)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.up-east-css-req-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.up-east-css-req-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 36px;
}

.up-east-css-req-card {
  background: var(--e-sand-light);
  border: 1px solid rgba(200,134,10,0.12);
  border-radius: 8px;
  padding: 24px 22px;
  transition: all 0.3s ease;
}

.up-east-css-req-card:hover {
  border-color: rgba(200,134,10,0.3);
  box-shadow: 0 8px 28px rgba(200,134,10,0.1);
  transform: translateY(-3px);
}

.up-east-css-req-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(200,134,10,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.up-east-css-req-card-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--e-amber);
  fill: none;
  stroke-width: 1.8;
}

.up-east-css-req-card h5 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--e-amber);
  margin-bottom: 6px;
}

.up-east-css-req-card p {
  font-size: 13px;
  font-weight: 300;
  color: var(--e-text-mid);
  line-height: 1.65;
}

/* Course card */
.up-east-css-course-card {
  background: linear-gradient(160deg, #d37d38, #673618);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(212,175,55,0.1);
}

.up-east-css-course-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpolygon points='40,5 50,30 78,30 55,48 64,74 40,57 16,74 25,48 2,30 30,30' fill='none' stroke='%23D4AF37' stroke-width='0.5' opacity='0.12'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  pointer-events: none;
}

.up-east-css-course-header {
  padding: 36px 36px 28px;
  border-bottom: 1px solid rgba(212,175,55,0.1);
  position: relative;
}

.up-east-css-course-badge {
  display: inline-block;
  background: rgba(212,175,55,0.15);
  border: 1px solid rgba(212,175,55,0.3);
  color: var(--e-gold-pale);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 2px;
  margin-bottom: 16px;
  font-family: 'Cinzel', serif;
}

.up-east-css-course-header h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--e-sand-light);
  line-height: 1.2;
}

.up-east-css-course-body {
  padding: 28px 36px;
  position: relative;
}

.up-east-css-course-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(212,175,55,0.07);
  font-size: 14px;
  font-weight: 300;
  color: rgba(245,230,200,0.65);
}

.up-east-css-course-feature:last-of-type { border-bottom: none; }

.up-east-css-course-feature svg {
  width: 16px;
  height: 16px;
  stroke: var(--e-gold);
  fill: none;
  stroke-width: 2.2;
  flex-shrink: 0;
}

.up-east-css-course-footer {
  padding: 24px 36px 36px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(212,175,55,0.1);
}

.up-east-css-course-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  font-weight: 700;
  color: var(--e-gold-pale);
  line-height: 1;
}

.up-east-css-course-price-note {
  font-size: 12px;
  color: rgba(245,230,200,0.35);
  margin-top: 5px;
}

/* ============================================================
   LIFE IN THE MIDDLE EAST
   ============================================================ */
.up-east-css-life {
  background: var(--e-sand-deep);
  padding: 100px 70px;
  position: relative;
  overflow: hidden;
}

.up-east-css-life::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 30px,
    rgba(200,134,10,0.03) 30px,
    rgba(200,134,10,0.03) 31px
  );
  pointer-events: none;
}

.up-east-css-life-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 56px;
}

.up-east-css-life-lead {
  font-size: 16px;
  font-weight: 300;
  color: var(--e-text-mid);
  line-height: 1.9;
  margin-top: 20px;
}

.up-east-css-life-highlights {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 82px;
}

.up-east-css-life-highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255,255,255,0.55);
  border-radius: 6px;
  border: 1px solid rgba(200,134,10,0.12);
  transition: all 0.25s ease;
}

.up-east-css-life-highlight:hover {
  background: rgba(255,255,255,0.8);
  border-color: rgba(200,134,10,0.25);
  transform: translateX(4px);
}

.up-east-css-life-highlight-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--e-text-dark);
}

.up-east-css-life-highlight-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--e-amber);
}

/* Mosaic grid */
.up-east-css-life-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 180px 180px;
  gap: 12px;
}

.up-east-css-mosaic-item {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  cursor: default;
}

.up-east-css-mosaic-item:nth-child(1) { grid-column: span 2; }
.up-east-css-mosaic-item:nth-child(4) { grid-column: span 2; }

.up-east-css-mosaic-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.5s ease;
}

.up-east-css-mosaic-item:hover .up-east-css-mosaic-bg { transform: scale(1.07); }

.up-east-css-mosaic-label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(15,8,0,0.45);
  padding: 5px 12px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}

.up-east-css-m1 { background: linear-gradient(135deg, #0f1e3c, #c8860a 200%); }
.up-east-css-m2 { background: linear-gradient(135deg, #1a2a10, #8b6914 200%); }
.up-east-css-m3 { background: linear-gradient(135deg, #2a1a10, #8b4513 200%); }
.up-east-css-m4 { background: linear-gradient(135deg, #0a1a2a, #1a4a6a 200%); }
.up-east-css-m5 { background: linear-gradient(135deg, #1a0a2a, #6a1a8a 200%); }
.up-east-css-m6 { background: linear-gradient(135deg, #1a1a10, #4a4a10 200%); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.up-east-css-testimonials {
  background: var(--e-sand-light);
  padding: 110px 70px;
  position: relative;
}

.up-east-css-testi-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.up-east-css-testi-card {
  background: var(--e-off-white);
  border-radius: 8px;
  padding: 36px 32px;
  position: relative;
  border: 1px solid rgba(200,134,10,0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

.up-east-css-testi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--e-gold), var(--e-amber));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.up-east-css-testi-card:hover { box-shadow: 0 16px 44px rgba(200,134,10,0.1); transform: translateY(-4px); }
.up-east-css-testi-card:hover::before { transform: scaleX(1); }

.up-east-css-testi-open-quote {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 80px;
  font-style: italic;
  color: rgba(200,134,10,0.07);
  line-height: 1;
  pointer-events: none;
}

.up-east-css-testi-country-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(200,134,10,0.08);
  border-radius: 2px;
  padding: 4px 12px;
  margin-bottom: 18px;
}

.up-east-css-testi-country-tag span {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--e-amber);
  text-transform: uppercase;
}

.up-east-css-testi-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  color: var(--e-text-dark);
  line-height: 1.75;
  margin-bottom: 28px;
}

.up-east-css-testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.up-east-css-testi-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--e-amber), var(--e-gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--e-night-mid);
  flex-shrink: 0;
}

.up-east-css-testi-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--e-text-dark);
}

.up-east-css-testi-where {
  font-size: 12px;
  color: var(--e-amber);
  margin-top: 2px;
}

/* ============================================================
   CTA
   ============================================================ */
.up-east-css-cta {
  background: linear-gradient(160deg, #db843e, #4e250c);
  padding: 120px 70px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.up-east-css-cta-ornament {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  opacity: 0.04;
  pointer-events: none;
  animation: up-east-css-spin-slow 60s linear infinite;
}

.up-east-css-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(200,134,10,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.up-east-css-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
}

.up-east-css-cta-kicker {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--e-gold);
  display: block;
  margin-bottom: 28px;
}

.up-east-css-cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(42px, 5vw, 74px);
  font-weight: 700;
  color: var(--e-sand-light);
  line-height: 1.08;
}

.up-east-css-cta-title em {
  font-style: italic;
  color: var(--e-gold-pale);
  display: block;
}

.up-east-css-cta-desc {
  font-size: 17px;
  font-weight: 300;
  color: rgba(245,230,200,0.5);
  line-height: 1.85;
  max-width: 580px;
  margin: 24px auto 48px;
}

.up-east-css-cta-btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.up-east-css-cta-trust {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(212,175,55,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.up-east-css-trust-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(245,230,200,0.35);
}

.up-east-css-trust-pill svg {
  width: 18px;
  height: 18px;
  stroke: var(--e-gold);
  fill: none;
  stroke-width: 1.8;
  opacity: 0.65;
  flex-shrink: 0;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes up-east-css-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes up-east-css-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes up-east-css-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes up-east-css-spin-slow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .up-east-css-hero-content,
  .up-east-css-intro-layout,
  .up-east-css-salary-grid,
  .up-east-css-req-layout,
  .up-east-css-life-header { grid-template-columns: 1fr; gap: 50px; }
  .up-east-css-tab-panel.up-east-css-active { grid-template-columns: 1fr; }
  .up-east-css-hero-content { padding: 100px 40px 70px; }
  .up-east-css-arch-svg-container { width: 280px; height: 360px; }
  .up-east-css-arch-card { display: none; }
  .up-east-css-testi-layout { grid-template-columns: 1fr 1fr; }
  .up-east-css-life-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .up-east-css-mosaic-item:nth-child(1),
  .up-east-css-mosaic-item:nth-child(4) { grid-column: span 1; }
}

@media (max-width: 768px) {
  .up-east-css-intro, .up-east-css-countries, .up-east-css-salary,
  .up-east-css-requirements, .up-east-css-life,
  .up-east-css-testimonials, .up-east-css-cta { padding: 70px 24px; }
  .up-east-css-hero-content { padding: 90px 24px 60px; }
  .up-east-css-testi-layout { grid-template-columns: 1fr; }
  .up-east-css-req-cards { grid-template-columns: 1fr; }
  .up-east-css-fact-grid { grid-template-columns: 1fr 1fr; }
  .up-east-css-life-mosaic { grid-template-columns: 1fr 1fr; }
  .up-east-css-opp-cards { padding-top: 0; }
  .up-east-css-tab-btn { padding: 10px 14px; font-size: 10px; }
  .up-east-css-hero-stats { flex-wrap: wrap; gap: 24px; }
  .up-east-css-hero-stat { border-right: none; padding-right: 0; margin-right: 0; }
}


/* ============================================================
   TEFLEN — Teach TEFL in Europe
   All classes prefixed: new-euro-css
   Aesthetic: Sophisticated editorial travel magazine
   Fonts: Libre Baskerville (serif) + Nunito Sans (grotesque)
   Palette: Deep Navy · Warm Terracotta · Ivory · Sage · Stone
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,600;6..12,700;6..12,800&display=swap');

/* ---- CSS Variables ---- */
.new-euro-css-page {
  --en-navy:          #1B2A4A;
  --en-navy-mid:      #243660;
  --en-terra:         #C4623A;
  --en-terra-pale:    #E09070;
  --en-terra-tint:    #F5E0D8;
  --en-ivory:         #FAF7F2;
  --en-ivory-deep:    #F2EBE1;
  --en-ivory-dark:    #E6DDD0;
  --en-sage:          #6B8A68;
  --en-sage-pale:     #EBF2EA;
  --en-stone:         #8A7A68;
  --en-stone-light:   #C8BAA8;
  --en-ink:           #1A1410;
  --en-text:          #2E2820;
  --en-text-mid:      #5A5048;
  --en-text-soft:     #8A8070;
  --en-line:          rgba(26,20,16,0.09);
  --en-white:         #FFFFFF;

  font-family: 'Nunito Sans', sans-serif;
  color: var(--en-text);
  background: var(--en-ivory);
  overflow-x: hidden;
}

/* ============================================================
   HERO — Full-viewport editorial split
   ============================================================ */
.new-euro-css-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  overflow: hidden;
}

/* ---- LEFT: Content panel ---- */
.new-euro-css-hero-left {
  background: #253b6a;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 130px 72px 90px 80px;
  overflow: hidden;
  z-index: 2;
}

/* Subtle grid texture */
.new-euro-css-hero-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(196,98,58,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,98,58,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

/* Terracotta top accent bar */
.new-euro-css-hero-accent-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--en-terra), var(--en-terra-pale), transparent);
}

.new-euro-css-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  animation: new-euro-css-rise 0.8s ease both;
}

.new-euro-css-eyebrow-pip {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--en-terra);
  flex-shrink: 0;
}

.new-euro-css-eyebrow-text {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--en-terra-pale);
}

.new-euro-css-hero-h1 {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(42px, 4.4vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--en-ivory);
  margin: 0 0 6px;
  animation: new-euro-css-rise 0.9s ease 0.08s both;
}

.new-euro-css-hero-h1-em {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(42px, 4.4vw, 72px);
  font-weight: 400;
  font-style: italic;
  color: var(--en-terra-pale);
  display: block;
  line-height: 1.05;
  margin-bottom: 32px;
  animation: new-euro-css-rise 0.9s ease 0.15s both;
}

.new-euro-css-hero-desc {
  font-size: 17px;
  font-weight: 300;
  color: rgba(250,247,242,0.62);
  line-height: 1.85;
  max-width: 460px;
  margin-bottom: 44px;
  animation: new-euro-css-rise 0.9s ease 0.22s both;
}

.new-euro-css-hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  animation: new-euro-css-rise 0.9s ease 0.3s both;
}

/* Buttons */
.new-euro-css-btn-terra {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--en-terra);
  color: white;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 15px 34px;
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 22px rgba(196,98,58,0.42);
}
.new-euro-css-btn-terra:hover {
  background: #B55530;
  transform: translateY(-2px);
  box-shadow: 0 9px 30px rgba(196,98,58,0.52);
}
.new-euro-css-btn-terra svg { width: 15px; height: 15px; }

.new-euro-css-btn-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: rgba(250,247,242,0.68);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 2px;
  border: 1.5px solid rgba(250,247,242,0.2);
  text-decoration: none;
  transition: all 0.25s ease;
}
.new-euro-css-btn-ghost-light:hover {
  border-color: rgba(250,247,242,0.5);
  color: var(--en-ivory);
}

/* Hero stat strip */
.new-euro-css-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 54px;
  padding-top: 38px;
  border-top: 1px solid rgba(250,247,242,0.1);
  animation: new-euro-css-rise 0.9s ease 0.42s both;
}

.new-euro-css-hstat { padding-right: 20px; border-right: 1px solid rgba(250,247,242,0.08); }
.new-euro-css-hstat:last-child { border-right: none; padding-right: 0; padding-left: 20px; }
.new-euro-css-hstat:nth-child(2) { padding: 0 20px; }

.new-euro-css-hstat-n {
  font-family: 'Libre Baskerville', serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--en-terra-pale);
  line-height: 1;
  display: block;
}
.new-euro-css-hstat-l {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250,247,242,0.32);
  margin-top: 6px;
  display: block;
}

/* ---- RIGHT: Hero photo ---- */
.new-euro-css-hero-right {
  position: relative;
  overflow: hidden;
}

.new-euro-css-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.new-euro-css-hero-photo-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(27,42,74,0.28) 0%, transparent 45%);
}

/* Floating location caption on photo */
.new-euro-css-hero-badge {
  position: absolute;
  bottom: 44px;
  right: 36px;
  background: rgba(250,247,242,0.93);
  backdrop-filter: blur(12px);
  border-radius: 4px;
  padding: 16px 22px;
  max-width: 220px;
  animation: new-euro-css-rise 1s ease 0.55s both;
  box-shadow: 0 8px 28px rgba(27,42,74,0.18);
}

.new-euro-css-badge-loc {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--en-terra);
  margin-bottom: 5px;
}

.new-euro-css-badge-text {
  font-family: 'Libre Baskerville', serif;
  font-size: 14px;
  font-style: italic;
  color: var(--en-navy);
  line-height: 1.5;
}

/* ============================================================
   SHARED UTILITIES
   ============================================================ */
.new-euro-css-wrap { max-width: 1320px; margin: 0 auto; }

.new-euro-css-label {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}
.new-euro-css-label-bar {
  width: 30px; height: 2px;
  background: var(--en-terra);
  flex-shrink: 0;
  border-radius: 2px;
}
.new-euro-css-label-text {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--en-terra);
}

.new-euro-css-section-h {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(30px, 3.2vw, 52px);
  font-weight: 700;
  line-height: 1.12;
  color: var(--en-navy);
  letter-spacing: -0.01em;
}
.new-euro-css-section-h em { font-style: italic; color: var(--en-terra); }

/* ============================================================
   INTRO SECTION
   ============================================================ */
.new-euro-css-intro {
  background: var(--en-ivory-deep);
  padding: 100px 80px;
  position: relative;
  overflow: hidden;
}

.new-euro-css-intro::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--en-terra) 40%, transparent 100%);
}

/* Decorative large circle bg element */
.new-euro-css-intro::after {
  content: '';
  position: absolute;
  bottom: -180px; right: -180px;
  width: 520px; height: 520px;
  border-radius: 50%;
  border: 70px solid rgba(196,98,58,0.05);
  pointer-events: none;
}

.new-euro-css-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: start;
  margin-top: 16px;
}

.new-euro-css-intro-text p {
  font-size: 16px;
  font-weight: 300;
  color: var(--en-text-mid);
  line-height: 1.9;
  margin-top: 22px;
}
.new-euro-css-intro-text p strong {
  font-weight: 700;
  color: var(--en-text);
}

/* Editorial pull quote */
.new-euro-css-pullquote {
  border-left: 3px solid var(--en-terra);
  padding: 18px 26px;
  margin: 34px 0 0;
  background: var(--en-ivory);
  border-radius: 0 4px 4px 0;
}
.new-euro-css-pullquote p {
  font-family: 'Libre Baskerville', serif;
  font-size: 20px;
  font-style: italic;
  color: var(--en-navy);
  line-height: 1.6;
  margin: 0 !important;
}

/* Right: 2×2 stat cards */
.new-euro-css-intro-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 76px;
}

.new-euro-css-stat-card {
  background: var(--en-white);
  border-radius: 6px;
  padding: 28px 24px;
  border: 1px solid var(--en-line);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.new-euro-css-stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--en-terra);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.new-euro-css-stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(27,42,74,0.09); }
.new-euro-css-stat-card:hover::after { transform: scaleX(1); }

.new-euro-css-stat-n {
  font-family: 'Libre Baskerville', serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--en-terra);
  line-height: 1;
  display: block;
}
.new-euro-css-stat-l {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--en-text-soft);
  margin-top: 8px;
  display: block;
}
.new-euro-css-stat-sub {
  font-size: 13px;
  font-weight: 300;
  color: var(--en-text-mid);
  line-height: 1.5;
  margin-top: 10px;
}

/* ============================================================
   COUNTRY PHOTO GRID
   ============================================================ */
.new-euro-css-countries {
  background: var(--en-ivory);
  padding: 100px 80px;
}

.new-euro-css-countries-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 52px;
}

.new-euro-css-countries-lead {
  font-size: 16px;
  font-weight: 300;
  color: var(--en-text-mid);
  line-height: 1.85;
  margin-top: 18px;
}

/* Asymmetric photo grid using real images */
.new-euro-css-photo-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 320px 260px;
  gap: 12px;
}

.new-euro-css-photo-card               { grid-column: span 3; }
.new-euro-css-photo-card:nth-child(1)  { grid-column: span 5; grid-row: span 2; }
.new-euro-css-photo-card:nth-child(2)  { grid-column: span 4; }
.new-euro-css-photo-card:nth-child(3)  { grid-column: span 3; }
.new-euro-css-photo-card:nth-child(4)  { grid-column: span 3; }
.new-euro-css-photo-card:nth-child(5)  { grid-column: span 4; }

.new-euro-css-photo-card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}

.new-euro-css-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.new-euro-css-photo-card:hover img { transform: scale(1.06); }

.new-euro-css-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27,42,74,0.78) 0%, rgba(27,42,74,0.04) 55%);
  transition: background 0.4s ease;
}
.new-euro-css-photo-card:hover .new-euro-css-photo-overlay {
  background: linear-gradient(to top, rgba(196,98,58,0.72) 0%, rgba(27,42,74,0.1) 60%);
}

.new-euro-css-photo-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 22px 20px 18px;
}

.new-euro-css-photo-name {
  font-family: 'Libre Baskerville', serif;
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin-bottom: 3px;
}
.new-euro-css-photo-card:nth-child(1) .new-euro-css-photo-name { font-size: 26px; }

.new-euro-css-photo-sub {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.05em;
}

.new-euro-css-photo-pill {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--en-terra);
  color: white;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
}

/* ============================================================
   COUNTRY DEEP DIVES — Photo + content alternating rows
   ============================================================ */
.new-euro-css-deep {
  background: #253b6a;
  padding: 100px 80px;
  position: relative;
  overflow: hidden;
}

.new-euro-css-deep::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(250,247,242,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,247,242,0.018) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.new-euro-css-deep .new-euro-css-label-bar  { background: var(--en-terra-pale); }
.new-euro-css-deep .new-euro-css-label-text { color: var(--en-terra-pale); }
.new-euro-css-deep .new-euro-css-section-h  { color: var(--en-ivory); }
.new-euro-css-deep .new-euro-css-section-h em { color: var(--en-terra-pale); }

.new-euro-css-rows { margin-top: 56px; display: flex; flex-direction: column; gap: 10px; }

.new-euro-css-country-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 8px;
  overflow: hidden;
  min-height: 300px;
}
/* Alternate photo side */
.new-euro-css-country-row:nth-child(even) .new-euro-css-row-photo { order: 2; }
.new-euro-css-country-row:nth-child(even) .new-euro-css-row-content { order: 1; }

.new-euro-css-row-photo {
  position: relative;
  overflow: hidden;
  min-height: 300px;
}
.new-euro-css-row-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
.new-euro-css-country-row:hover .new-euro-css-row-photo img { transform: scale(1.04); }

.new-euro-css-row-content {
  background: rgba(250,247,242,0.035);
  border: 1px solid rgba(250,247,242,0.055);
  padding: 42px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background 0.3s ease;
}
.new-euro-css-country-row:hover .new-euro-css-row-content { background: rgba(196,98,58,0.07); }

.new-euro-css-row-flag {
  width: 50px; height: 34px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.new-euro-css-row-flag img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.new-euro-css-row-country {
  font-family: 'Libre Baskerville', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--en-ivory);
  margin-bottom: 10px;
}

.new-euro-css-row-desc {
  font-size: 14px;
  font-weight: 300;
  color: rgba(250,247,242,0.55);
  line-height: 1.82;
  margin-bottom: 26px;
  max-width: 400px;
}

.new-euro-css-row-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.new-euro-css-row-fact {
  background: rgba(250,247,242,0.05);
  border: 1px solid rgba(250,247,242,0.08);
  border-radius: 4px;
  padding: 12px 14px;
}
.new-euro-css-fact-k {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--en-terra-pale);
  margin-bottom: 5px;
  display: block;
}
.new-euro-css-fact-v {
  font-family: 'Libre Baskerville', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--en-ivory);
  line-height: 1.2;
}

/* ============================================================
   SALARY TABLE
   ============================================================ */
.new-euro-css-salary {
  background: var(--en-ivory-deep);
  padding: 100px 80px;
  position: relative;
  overflow: hidden;
}

.new-euro-css-salary::after {
  content: '€';
  position: absolute;
  bottom: -50px; right: -10px;
  font-family: 'Libre Baskerville', serif;
  font-size: 340px;
  font-weight: 700;
  color: rgba(27,42,74,0.03);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.new-euro-css-salary-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 70px;
  align-items: start;
  margin-top: 14px;
}

/* Elegant comparison table */
.new-euro-css-table {
  margin-top: 38px;
  width: 100%;
  border-collapse: collapse;
}
.new-euro-css-table thead tr {
  border-bottom: 2px solid var(--en-navy);
}
.new-euro-css-table th {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--en-text-soft);
  padding: 0 0 14px;
  text-align: left;
}
.new-euro-css-table th:last-child { text-align: right; }

.new-euro-css-table tbody tr {
  border-bottom: 1px solid var(--en-line);
  transition: background 0.2s ease;
}
.new-euro-css-table tbody tr:last-child { border-bottom: none; }
.new-euro-css-table tbody tr:hover { background: rgba(196,98,58,0.04); }

.new-euro-css-table td { padding: 18px 0; font-size: 14px; color: var(--en-text); vertical-align: middle; }
.new-euro-css-table td:last-child {
  text-align: right;
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--en-terra);
}

.new-euro-css-tbl-flag-cell {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}
.new-euro-css-tbl-flag {
  width: 34px; height: 24px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.14);
}
.new-euro-css-tbl-flag img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.new-euro-css-tbl-country { font-weight: 700; color: var(--en-navy); }

.new-euro-css-tbl-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.new-euro-css-badge-low  { background: var(--en-sage-pale); color: var(--en-sage); }
.new-euro-css-badge-mid  { background: var(--en-terra-tint); color: var(--en-terra); }

/* Benefits panel */
.new-euro-css-benefits {
  background: #253b6a;
  border-radius: 8px;
  padding: 40px 36px;
  margin-top: 38px;
  position: relative;
  overflow: hidden;
}
.new-euro-css-benefits::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--en-terra), var(--en-terra-pale));
}
.new-euro-css-benefits h4 {
  font-family: 'Libre Baskerville', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--en-ivory);
  margin-bottom: 24px;
}

.new-euro-css-ben-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(250,247,242,0.07);
}
.new-euro-css-ben-item:last-child { border-bottom: none; }

.new-euro-css-ben-ico {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(196,98,58,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.new-euro-css-ben-ico svg {
  width: 16px; height: 16px;
  stroke: var(--en-terra-pale);
  fill: none;
  stroke-width: 2;
}
.new-euro-css-ben-title { font-size: 13px; font-weight: 700; color: var(--en-ivory); margin-bottom: 3px; }
.new-euro-css-ben-desc  { font-size: 12px; font-weight: 300; color: rgba(250,247,242,0.42); line-height: 1.5; }

/* ============================================================
   REQUIREMENTS + COURSE CARD
   ============================================================ */
.new-euro-css-requirements {
  background: var(--en-ivory);
  padding: 100px 80px;
  position: relative;
  overflow: hidden;
}
.new-euro-css-requirements::before {
  content: '';
  position: absolute;
  top: -160px; right: -160px;
  width: 540px; height: 540px;
  border-radius: 50%;
  border: 80px solid rgba(196,98,58,0.045);
  pointer-events: none;
}

.new-euro-css-req-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Numbered requirements list */
.new-euro-css-req-list { margin-top: 36px; }

.new-euro-css-req-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--en-line);
}
.new-euro-css-req-item:last-child { border-bottom: none; }

.new-euro-css-req-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--en-navy);
  color: white;
  font-family: 'Libre Baskerville', serif;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.new-euro-css-req-h {
  font-family: 'Libre Baskerville', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--en-navy);
  margin-bottom: 6px;
}
.new-euro-css-req-p {
  font-size: 14px;
  font-weight: 300;
  color: var(--en-text-mid);
  line-height: 1.72;
}

/* Course card — uses a photo header */
.new-euro-css-course-card {
  background: #253b6a;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(27,42,74,0.22);
}
.new-euro-css-course-photo {
  width: 100%;
  height: 210px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.new-euro-css-course-body {
  padding: 36px;
  position: relative;
}
.new-euro-css-course-body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--en-terra), var(--en-terra-pale));
}
.new-euro-css-course-badge-label {
  display: inline-block;
  background: rgba(196,98,58,0.14);
  border: 1px solid rgba(196,98,58,0.28);
  color: var(--en-terra-pale);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
  margin-bottom: 14px;
}
.new-euro-css-course-body h3 {
  font-family: 'Libre Baskerville', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--en-ivory);
  line-height: 1.25;
  margin-bottom: 22px;
}
.new-euro-css-course-feat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(250,247,242,0.06);
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(250,247,242,0.65);
  line-height: 1.5;
}
.new-euro-css-course-feat:last-of-type { border-bottom: none; }
.new-euro-css-course-feat svg {
  width: 14px; height: 14px;
  stroke: var(--en-terra-pale);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0;
  margin-top: 2px;
}
.new-euro-css-course-footer {
  padding: 22px 36px 32px;
  border-top: 1px solid rgba(250,247,242,0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.new-euro-css-course-price {
  font-family: 'Libre Baskerville', serif;
  font-size: 50px;
  font-weight: 700;
  color: var(--en-terra-pale);
  line-height: 1;
}
.new-euro-css-course-price-note {
  font-size: 11px;
  font-weight: 300;
  color: rgba(250,247,242,0.32);
  margin-top: 5px;
  letter-spacing: 0.06em;
}

/* ============================================================
   LIFE IN EUROPE — Photo editorial strip
   ============================================================ */
.new-euro-css-life {
  background: var(--en-ivory-deep);
  padding: 100px 0 0;
 
}

.new-euro-css-life-top {
  padding: 0 80px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  max-width: 1320px;
  margin: 0 auto;
}
.new-euro-css-life-lead {
  font-size: 16px;
  font-weight: 300;
  color: var(--en-text-mid);
  line-height: 1.9;
  margin-top: 18px;
}

/* Highlight rows right */
.new-euro-css-life-highlights { padding-top: 78px; }
.new-euro-css-life-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: var(--en-white);
  border-radius: 5px;
  border: 1px solid var(--en-line);
  margin-bottom: 10px;
  transition: all 0.25s ease;
}
.new-euro-css-life-row:last-child { margin-bottom: 0; }
.new-euro-css-life-row:hover {
  border-color: rgba(196,98,58,0.25);
  transform: translateX(4px);
}
.new-euro-css-life-row-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--en-text);
  display: flex;
  align-items: center;
  gap: 12px;
}
.new-euro-css-life-row-label svg {
  width: 16px; height: 16px;
  stroke: var(--en-terra);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}
.new-euro-css-life-row-val {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--en-terra);
}

/* Horizontal photo scroll strip */
.new-euro-css-strip {
  display: flex;
  gap: 10px;
  padding: 0 80px;
  overflow-x: auto;
  scrollbar-width: none;
}
.new-euro-css-strip::-webkit-scrollbar { display: none; }

.new-euro-css-strip-item {
  flex-shrink: 0;
  width: 290px;
  height: 380px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.new-euro-css-strip-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
.new-euro-css-strip-item:hover img { transform: scale(1.05); }

.new-euro-css-strip-label {
  position: absolute;
  bottom: 15px; left: 15px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: white;
  background: rgba(27,42,74,0.52);
  padding: 5px 12px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}

/* Stats strip at bottom */
.new-euro-css-life-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 40px;
  background: var(--en-line);
}
.new-euro-css-life-stat {
  background: var(--en-ivory-deep);
  padding: 32px 24px;
  text-align: center;
  transition: background 0.25s ease;
}
.new-euro-css-life-stat:hover { background: var(--en-white); }
.new-euro-css-life-stat-n {
  font-family: 'Libre Baskerville', serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--en-terra);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}
.new-euro-css-life-stat-l {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--en-text-soft);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.new-euro-css-testimonials {
  background: var(--en-ivory);
  padding: 100px 80px;
}

.new-euro-css-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 54px;
}

.new-euro-css-testi {
  background: var(--en-white);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--en-line);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}
.new-euro-css-testi:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(27,42,74,0.1);
}

.new-euro-css-testi-img {
  width: 100%; height: 188px;
  object-fit: cover;
  object-position: center;
  display: block;
  flex-shrink: 0;
}

.new-euro-css-testi-body {
  padding: 26px 24px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.new-euro-css-testi-tag {
  display: inline-flex;
  background: var(--en-terra-tint);
  color: var(--en-terra);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
  margin-bottom: 14px;
  align-self: flex-start;
}

.new-euro-css-testi-stars {
  display: flex; gap: 3px; margin-bottom: 13px;
}
.new-euro-css-testi-stars svg { width: 14px; height: 14px; fill: var(--en-terra); }

.new-euro-css-testi-quote {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px;
  font-style: italic;
  color: var(--en-text);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 20px;
}

.new-euro-css-testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--en-line);
  margin-top: auto;
}
.new-euro-css-testi-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--en-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Libre Baskerville', serif;
  font-size: 14px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.new-euro-css-testi-name { font-size: 13px; font-weight: 700; color: var(--en-navy); }
.new-euro-css-testi-role { font-size: 12px; font-weight: 300; color: var(--en-text-soft); margin-top: 2px; }

/* ============================================================
   CTA — Full-bleed editorial image background
   ============================================================ */
.new-euro-css-cta {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.new-euro-css-cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.new-euro-css-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgb(48 74 128 / 95%) 46%, rgba(27, 42, 74, 0.55) 100%);
}

.new-euro-css-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 100px 80px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
}

.new-euro-css-cta-left .new-euro-css-label-bar  { background: var(--en-terra-pale); }
.new-euro-css-cta-left .new-euro-css-label-text { color: var(--en-terra-pale); }

.new-euro-css-cta-h {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(36px, 4vw, 64px);
  font-weight: 700;
  color: var(--en-ivory);
  line-height: 1.08;
  margin: 18px 0 20px;
}
.new-euro-css-cta-h em { font-style: italic; color: var(--en-terra-pale); }

.new-euro-css-cta-desc {
  font-size: 17px;
  font-weight: 300;
  color: rgba(250,247,242,0.62);
  line-height: 1.85;
  max-width: 480px;
}

/* Right: frosted glass card */
.new-euro-css-cta-card {
  background: rgba(250,247,242,0.07);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(250,247,242,0.14);
  border-radius: 8px;
  padding: 42px 38px;
}
.new-euro-css-cta-card h4 {
  font-family: 'Libre Baskerville', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--en-ivory);
  margin-bottom: 24px;
}

.new-euro-css-cta-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.new-euro-css-cta-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: 300;
  color: rgba(250,247,242,0.7);
  line-height: 1.5;
}
.new-euro-css-cta-checklist li svg {
  width: 16px; height: 16px;
  stroke: var(--en-terra-pale);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0;
  margin-top: 2px;
}

.new-euro-css-cta-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(250,247,242,0.1);
  flex-wrap: wrap;
}
.new-euro-css-cta-price {
  font-family: 'Libre Baskerville', serif;
  font-size: 46px;
  font-weight: 700;
  color: var(--en-terra-pale);
  line-height: 1;
}
.new-euro-css-cta-price-note {
  font-size: 11px;
  font-weight: 300;
  color: rgba(250,247,242,0.3);
  margin-top: 4px;
}

.new-euro-css-cta-btns { display: flex; flex-direction: column; gap: 10px; }

.new-euro-css-btn-ivory {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--en-ivory);
  color: var(--en-navy);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 18px rgba(0,0,0,0.16);
}
.new-euro-css-btn-ivory:hover { background: white; transform: translateY(-2px); box-shadow: 0 9px 28px rgba(0,0,0,0.22); }
.new-euro-css-btn-ivory svg { width: 14px; height: 14px; }

.new-euro-css-btn-ghost-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: rgba(250,247,242,0.65);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 2px;
  border: 1.5px solid rgba(250,247,242,0.2);
  text-decoration: none;
  transition: all 0.25s ease;
}
.new-euro-css-btn-ghost-cta:hover { border-color: rgba(250,247,242,0.5); color: var(--en-ivory); }

/* Trust bar */
.new-euro-css-trust {
  background: var(--en-navy);
  padding: 26px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(250,247,242,0.06);
}
.new-euro-css-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250,247,242,0.32);
}
.new-euro-css-trust-item svg {
  width: 16px; height: 16px;
  stroke: var(--en-terra-pale);
  fill: none;
  stroke-width: 1.8;
  opacity: 0.6;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes new-euro-css-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .new-euro-css-hero { grid-template-columns: 1fr; min-height: auto; }
  .new-euro-css-hero-right { height: 52vh; }
  .new-euro-css-hero-left { padding: 80px 40px 60px; }
  .new-euro-css-intro-grid,
  .new-euro-css-salary-grid,
  .new-euro-css-req-grid,
  .new-euro-css-cta-inner { grid-template-columns: 1fr; gap: 50px; }
  .new-euro-css-countries-header { grid-template-columns: 1fr; }
  .new-euro-css-photo-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .new-euro-css-photo-card:nth-child(1) { grid-column: span 2; grid-row: span 1; height: 290px; }
  .new-euro-css-photo-card { height: 220px; }
  .new-euro-css-country-row { grid-template-columns: 1fr; }
  .new-euro-css-row-photo { height: 260px; }
  .new-euro-css-country-row:nth-child(even) .new-euro-css-row-photo { order: 0; }
  .new-euro-css-country-row:nth-child(even) .new-euro-css-row-content { order: 0; }
  .new-euro-css-testi-grid { grid-template-columns: 1fr 1fr; }
  .new-euro-css-life-top { grid-template-columns: 1fr; padding: 0 40px 50px; }
  .new-euro-css-life-highlights { padding-top: 0; }
  .new-euro-css-life-stats { grid-template-columns: repeat(2, 1fr); }
  .new-euro-css-strip { padding: 0 40px; }
  .new-euro-css-intro-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .new-euro-css-intro,
  .new-euro-css-countries,
  .new-euro-css-deep,
  .new-euro-css-salary,
  .new-euro-css-requirements,
  .new-euro-css-testimonials { padding: 70px 24px; }
  .new-euro-css-hero-left { padding: 70px 24px 50px; }
  .new-euro-css-photo-grid { grid-template-columns: 1fr; }
  .new-euro-css-photo-card,
  .new-euro-css-photo-card:nth-child(1) { grid-column: span 1; height: 240px; }
  .new-euro-css-testi-grid { grid-template-columns: 1fr; }
  .new-euro-css-hero-stats { grid-template-columns: repeat(3, 1fr); }
  .new-euro-css-hstat,
  .new-euro-css-hstat:last-child,
  .new-euro-css-hstat:nth-child(2) { padding: 0 10px; border: none; }
  .new-euro-css-row-facts { grid-template-columns: 1fr 1fr; }
  .new-euro-css-intro-cards { grid-template-columns: 1fr; }
  .new-euro-css-trust { padding: 24px; gap: 20px; }
  .new-euro-css-cta-inner { padding: 70px 24px; }
  .new-euro-css-strip { padding: 0 24px; }
  .new-euro-css-life-top { padding: 0 24px 48px; }
  .new-euro-css-life-stats { padding: 0; }
}

/* ============================================================
   TEFL ASIA PAGE - CSS
   All classes prefixed: new-asia1-css (using new-asia1- selector prefix)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
.new-asia1-hero,
.new-asia1-why,
.new-asia1-countries,
.new-asia1-course,
.new-asia1-testimonials,
.new-asia1-cta {
  --clr-primary: #E84B3C;
  --clr-primary-light: #FF6B5B;
  --clr-primary-dark: #C0392B;
  --clr-accent: #F5A623;
  --clr-gold: #D4A843;
  --clr-dark: #1A1210;
  --clr-dark-2: #2D1F1A;
  --clr-mid: #4A3728;
  --clr-text: #3D2B1F;
  --clr-text-light: #7A6055;
  --clr-cream: #FBF7F2;
  --clr-warm-white: #FFF9F4;
  --clr-border: #E8D5C8;
  --ff-display: 'Fraunces', Georgia, serif;
  --ff-body: 'DM Sans', system-ui, sans-serif;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --shadow-sm: 0 2px 12px rgba(60,20,10,0.08);
  --shadow-md: 0 8px 32px rgba(60,20,10,0.12);
  --shadow-lg: 0 20px 60px rgba(60,20,10,0.18);
  --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-family: var(--ff-body);
  color: var(--clr-text);
  box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }

/* ── SHARED UTILITIES ────────────────────────────────────────── */
.new-asia1-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.new-asia1-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232,75,60,0.10);
  color: var(--clr-primary);
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  border: 1px solid rgba(232,75,60,0.18);
  margin-bottom: 20px;
}

.new-asia1-tag--light {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}

.new-asia1-section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 64px;
}

.new-asia1-section-title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  color: #ff9800;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.new-asia1-section-title--light {
  color: #fff;
}

.new-asia1-section-sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--clr-text-light);
  margin: 0;
}

.new-asia1-section-sub--light {
  color: rgba(255,255,255,0.75);
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.new-asia1-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ff9800;
  color: #fff;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 600;
  padding: 16px 30px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(232,75,60,0.35);
}

.new-asia1-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  opacity: 0;
  transition: var(--transition);
}

.new-asia1-btn-primary:hover {
  background: var(--clr-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(232,75,60,0.45);
}

.new-asia1-btn-primary:hover::before { opacity: 1; }

.new-asia1-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--clr-dark);
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 500;
  padding: 16px 24px;
  text-decoration: none;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
}

.new-asia1-btn-ghost:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: rgba(232,75,60,0.04);
}

/* ── HERO ─────────────────────────────────────────────────────── */
.new-asia1-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--clr-warm-white);
}

.new-asia1-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(232,75,60,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 10% 30%, rgba(245,166,35,0.06) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23E84B3C' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.new-asia1-hero-overlay { display: none; }

.new-asia1-floating-shapes { position: absolute; inset: 0; pointer-events: none; }

.new-asia1-shape {
  position: absolute;
  border-radius: 50%;
  animation: new-asia1-float 8s ease-in-out infinite;
}

.new-asia1-shape-1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(232,75,60,0.08), transparent 70%);
  top: -100px; right: -50px;
  animation-delay: 0s;
}

.new-asia1-shape-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(245,166,35,0.08), transparent 70%);
  bottom: 50px; left: 10%;
  animation-delay: -3s;
}

.new-asia1-shape-3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(232,75,60,0.06), transparent 70%);
  top: 40%; right: 20%;
  animation-delay: -5s;
}

@keyframes new-asia1-float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-30px) scale(1.05); }
}

.new-asia1-hero-content {
  position: relative;
  z-index: 2;
  flex: 0 0 52%;
  padding: 100px 40px 100px 60px;
  max-width: 680px;
  animation: new-asia1-fade-up 0.9s ease both;
}

@keyframes new-asia1-fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.new-asia1-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232,75,60,0.08);
  color: #ff9800e8;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
  border: 1px solid rgba(232,75,60,0.15);
  animation: new-asia1-fade-up 0.9s 0.1s ease both;
}

.new-asia1-hero-title {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--clr-dark);
  margin: 0 0 24px;
  letter-spacing: -0.03em;
  animation: new-asia1-fade-up 0.9s 0.2s ease both;
}

.new-asia1-gradient-text {
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  font-style: italic;
}

.new-asia1-hero-subtitle {
  font-size: 17px;
  line-height: 1.75;
  color: var(--clr-text-light);
  max-width: 520px;
  margin: 0 0 36px;
  animation: new-asia1-fade-up 0.9s 0.3s ease both;
}

.new-asia1-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 52px;
  animation: new-asia1-fade-up 0.9s 0.4s ease both;
}

.new-asia1-hero-stats {
  display: flex;
  align-items: center;
  gap: 28px;
  animation: new-asia1-fade-up 0.9s 0.5s ease both;
}

.new-asia1-stat { text-align: left; }

.new-asia1-stat-num {
  display: block;
  font-family: var(--ff-display);
  font-size: 2rem;
  font-weight: 700;
  color:#ff9800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.new-asia1-stat-label {
  display: block;
  font-size: 12px;
  color: var(--clr-text-light);
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.new-asia1-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--clr-border);
}

/* HERO VISUAL */
.new-asia1-hero-visual {
  position: relative;
  z-index: 2;
  flex: 0 0 48%;
  padding: 80px 60px 80px 0;
  display: flex;
  align-items: center;
  gap: 20px;
  animation: new-asia1-fade-up 0.9s 0.3s ease both;
}

.new-asia1-img-frame {
  flex: 0 0 78%;
  position: relative;
}

.new-asia1-img-frame::before {
  content: '';
  position: absolute;
  top: -16px;
  left: -16px;
  right: 16px;
  bottom: 16px;
  border: 2px solid rgba(232,75,60,0.2);
  border-radius: var(--radius-lg);
  z-index: 0;
}

.new-asia1-hero-img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-lg);
}

.new-asia1-img-badge {
  position: absolute;
  bottom: 28px;
  left: -28px;
  z-index: 3;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-md);
  color: var(--clr-primary);
  min-width: 220px;
  animation: new-asia1-badge-pulse 3s ease-in-out infinite;
}

@keyframes new-asia1-badge-pulse {
  0%, 100% { transform: translateY(0); box-shadow: var(--shadow-md); }
  50% { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(60,20,10,0.18); }
}

.new-asia1-img-badge strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-dark);
}

.new-asia1-img-badge span {
  display: block;
  font-size: 11px;
  color: var(--clr-text-light);
}

.new-asia1-img-secondary {
  flex: 1;
  margin-top: 80px;
}

.new-asia1-hero-img2 {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  box-shadow: var(--shadow-md);
}

/* ── WHY ASIA ─────────────────────────────────────────────────── */
.new-asia1-why {
  background: var(--clr-cream);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.new-asia1-why::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23E84B3C' fill-opacity='0.025'%3E%3Cpath d='M0 0h80v80H0z'/%3E%3Cpath d='M40 10L10 40h20v30h20V40h20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.new-asia1-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.new-asia1-why-card {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  transition: var(--transition);
  overflow: hidden;
}

.new-asia1-why-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.new-asia1-why-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.new-asia1-why-card:hover::after { transform: scaleX(1); }

.new-asia1-why-icon {
  width: 56px; height: 56px;
  background: rgba(232,75,60,0.08);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff9800;
  margin-bottom: 20px;
  transition: var(--transition);
}

.new-asia1-why-card:hover .new-asia1-why-icon {
  background: var(--clr-primary);
  color: #fff;
}

.new-asia1-why-card h3 {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--clr-dark);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.new-asia1-why-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--clr-text-light);
  margin: 0;
}

/* ── COUNTRIES ────────────────────────────────────────────────── */
.new-asia1-countries {
  background: linear-gradient(128deg, #d4b179, #9f650e);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.new-asia1-countries::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(232,75,60,0.12), transparent),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(245,166,35,0.08), transparent);
  pointer-events: none;
}

.new-asia1-countries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.new-asia1-country-card {
  background: rgb(154 111 49);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  backdrop-filter: blur(4px);
}

.new-asia1-country-card:hover {
  transform: translateY(-8px);
  border-color: rgba(232,75,60,0.4);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(232,75,60,0.2);
}

.new-asia1-country-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.new-asia1-country-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
  filter: brightness(0.85);
}

.new-asia1-country-card:hover .new-asia1-country-img-wrap img {
  transform: scale(1.08);
}

.new-asia1-country-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,10,8,0.8) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.new-asia1-country-label {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.new-asia1-country-body {
  padding: 22px 24px 26px;
}

.new-asia1-country-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.new-asia1-country-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #ffeb3b99;
}

.new-asia1-country-body p {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

/* ── COURSE SECTION ────────────────────────────────────────────── */
.new-asia1-course {
  background: var(--clr-warm-white);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.new-asia1-course::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 45%;
  background: linear-gradient(135deg, rgba(232,75,60,0.04) 0%, rgba(245,166,35,0.06) 100%);
  clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
}

.new-asia1-course-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.new-asia1-course-visual { position: relative; }

.new-asia1-course-img-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: visible;
}

.new-asia1-course-img-wrap img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
  box-shadow: var(--shadow-lg);
}

.new-asia1-course-cert {
  position: absolute;
  bottom: -24px;
  right: -24px;
  background: #ff9800;
  color: #fff;
  border-radius: var(--radius-md);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 40px rgba(232,75,60,0.4);
  min-width: 220px;
  animation: new-asia1-badge-pulse 3s 1s ease-in-out infinite;
}

.new-asia1-course-cert strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

.new-asia1-course-cert span {
  display: block;
  font-size: 11px;
  opacity: 0.8;
  margin-top: 3px;
}

.new-asia1-course-content .new-asia1-tag { margin-bottom: 16px; }
.new-asia1-course-content .new-asia1-section-title { text-align: left; }

.new-asia1-course-desc {
  font-size: 16px;
  line-height: 1.75;
  color: var(--clr-text-light);
  margin: 0 0 36px;
}

.new-asia1-course-features { margin-bottom: 40px; }

.new-asia1-feature-item {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--clr-border);
}

.new-asia1-feature-item:last-child { border-bottom: none; }

.new-asia1-feature-check {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: rgba(232,75,60,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary);
  margin-top: 2px;
}

.new-asia1-feature-item strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--clr-dark);
  margin-bottom: 4px;
}

.new-asia1-feature-item p {
  font-size: 13.5px;
  color: var(--clr-text-light);
  line-height: 1.6;
  margin: 0;
}

/* ── TESTIMONIALS ────────────────────────────────────────────── */
.new-asia1-testimonials {
  background: var(--clr-cream);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.new-asia1-testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23E84B3C' fill-opacity='0.025' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.new-asia1-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.new-asia1-testimonial-card {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: var(--transition);
}

.new-asia1-testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(232,75,60,0.2);
}

.new-asia1-testimonial-card--featured {
  background: var(--clr-dark);
  border-color: transparent;
  margin-top: -20px;
}

.new-asia1-testimonial-card--featured .new-asia1-testimonial-text {
  color: rgba(255,255,255,0.8);
}

.new-asia1-testimonial-card--featured .new-asia1-testimonial-author strong {
  color: #fff;
}

.new-asia1-testimonial-card--featured .new-asia1-testimonial-author span {
  color: rgba(255,255,255,0.5);
}

.new-asia1-testimonial-stars {
  display: flex;
  gap: 4px;
  color: var(--clr-accent);
  margin-bottom: 20px;
}

.new-asia1-testimonial-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--clr-text-light);
  margin: 0 0 28px;
  font-style: italic;
}

.new-asia1-testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.new-asia1-testimonial-author img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--clr-border);
}

.new-asia1-testimonial-author strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-dark);
}

.new-asia1-testimonial-author span {
  display: block;
  font-size: 12px;
  color: var(--clr-text-light);
  margin-top: 2px;
}

/* ── CTA SECTION ─────────────────────────────────────────────── */
.new-asia1-cta {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
}

.new-asia1-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.new-asia1-cta-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.new-asia1-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(20,8,6,0.88) 0%,
    rgba(20,8,6,0.75) 40%,
    rgba(20,8,6,0.60) 100%
  );
}

.new-asia1-cta-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
}

.new-asia1-cta-inner {
  max-width: 680px;
}

.new-asia1-cta-inner h2 {
  font-family: var(--ff-display);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.new-asia1-cta-inner p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
  margin: 0 0 40px;
  max-width: 560px;
}

.new-asia1-cta-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.new-asia1-btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ff9800;
  color: #fff;
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 600;
  padding: 18px 34px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 4px 24px rgba(232,75,60,0.5);
}

.new-asia1-btn-cta:hover {
  background: #fff;
  color: var(--clr-primary);
  transform: translateY(-2px);
}

.new-asia1-btn-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 500;
  padding: 18px 30px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.25);
  transition: var(--transition);
  backdrop-filter: blur(8px);
}

.new-asia1-btn-cta-ghost:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
}

.new-asia1-cta-trust {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.new-asia1-cta-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}

.new-asia1-cta-trust svg { color: var(--clr-accent); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .new-asia1-why-grid { grid-template-columns: repeat(2, 1fr); }
  .new-asia1-countries-grid { grid-template-columns: repeat(2, 1fr); }
  .new-asia1-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .new-asia1-testimonial-card--featured { margin-top: 0; }
  .new-asia1-course-inner { grid-template-columns: 1fr; gap: 60px; }
  .new-asia1-course::after { display: none; }
}

@media (max-width: 900px) {
  .new-asia1-hero {
    flex-direction: column;
    min-height: auto;
  }

  .new-asia1-hero-content {
    flex: none;
    max-width: 100%;
    padding: 80px 32px 40px;
    text-align: center;
  }

  .new-asia1-hero-actions { justify-content: center; }
  .new-asia1-hero-stats { justify-content: center; }
  .new-asia1-eyebrow { margin: 0 auto 28px; }
  .new-asia1-hero-subtitle { margin: 0 auto 36px; }

  .new-asia1-hero-visual {
    flex: none;
    width: 100%;
    padding: 0 32px 80px;
    justify-content: center;
  }

  .new-asia1-img-secondary { display: none; }
  .new-asia1-img-frame { flex: 0 0 100%; }
  .new-asia1-hero-img { height: 380px; }

  .new-asia1-img-badge { left: 20px; }
}

@media (max-width: 768px) {
  .new-asia1-why-grid { grid-template-columns: 1fr; }
  .new-asia1-countries-grid { grid-template-columns: 1fr; }
  .new-asia1-testimonials-grid { grid-template-columns: 1fr; }
  .new-asia1-section-header { margin-bottom: 48px; }

  .new-asia1-why,
  .new-asia1-countries,
  .new-asia1-course,
  .new-asia1-testimonials { padding: 80px 0; }

  .new-asia1-cta-inner h2 { font-size: 2rem; }
}

@media (max-width: 500px) {
  .new-asia1-container { padding: 0 20px; }
  .new-asia1-hero-stats { flex-direction: column; gap: 16px; }
  .new-asia1-stat-divider { display: none; }
  .new-asia1-why-card,
  .new-asia1-testimonial-card { padding: 28px 24px; }
  .new-asia1-cta-actions { flex-direction: column; }
  .new-asia1-btn-cta, .new-asia1-btn-cta-ghost { text-align: center; justify-content: center; }
}

/* ============================================================
   TEFL TEACHING IN LATIN AMERICA — CSS
   All classes prefixed: new-latin1-
   Aesthetic: Bold editorial magazine · Tropical jungle palette
   Fonts: Playfair Display (display) + DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap');

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
.new-latin1-hero,
.new-latin1-why,
.new-latin1-countries,
.new-latin1-course,
.new-latin1-testimonials,
.new-latin1-cta {
  --clr-jungle:        #1B4332;
  --clr-jungle-mid:    #2D6A4F;
  --clr-jungle-light:  #40916C;
  --clr-saffron:       #F4A623;
  --clr-saffron-light: #FBBF24;
  --clr-terracotta:    #C0392B;
  --clr-sand:          #FDF6EC;
  --clr-sand-deep:     #F5EDDD;
  --clr-dark:          #0F1F18;
  --clr-text:          #1C3829;
  --clr-text-mid:      #3D6050;
  --clr-text-light:    #6B8F7E;
  --clr-border:        #D4E8DD;
  --clr-cream:         #FEFCF8;
  --ff-display:        'Playfair Display', Georgia, serif;
  --ff-body:           'DM Sans', system-ui, sans-serif;
  --radius-sm:         6px;
  --radius-md:         14px;
  --radius-lg:         22px;
  --radius-xl:         32px;
  --shadow-sm:         0 2px 10px rgba(15,31,24,0.08);
  --shadow-md:         0 8px 32px rgba(15,31,24,0.14);
  --shadow-lg:         0 20px 64px rgba(15,31,24,0.2);
  --ease:              cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition:        0.38s var(--ease);
  font-family: var(--ff-body);
  color: var(--clr-text);
  box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }

/* ── SHARED ──────────────────────────────────────────────────── */
.new-latin1-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 36px;
}

.new-latin1-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-jungle-light);
  padding: 6px 0;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--clr-saffron);
}

.new-latin1-label--light {
  color: rgba(255,255,255,0.7);
  border-bottom-color: var(--clr-saffron);
}

.new-latin1-section-heading {
  font-family: var(--ff-display);
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 900;
  line-height: 1.08;
  color: #166946;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.new-latin1-section-heading--light {
  color: #fff;
}

/* ── BUTTONS ──────────────────────────────────────────────────── */
.new-latin1-btn-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #166946;
  color: #fff;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 600;
  padding: 16px 30px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  box-shadow: 0 4px 18px rgba(27,67,50,0.35);
}

.new-latin1-btn-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--clr-jungle-mid);
  transform: translateX(-101%);
  transition: transform 0.4s var(--ease);
}

.new-latin1-btn-main:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(27,67,50,0.45); }
.new-latin1-btn-main:hover::before { transform: translateX(0); }
.new-latin1-btn-main svg, .new-latin1-btn-main span { position: relative; z-index: 1; }

.new-latin1-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--clr-jungle);
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 600;
  padding: 15px 26px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--clr-jungle);
  text-decoration: none;
  transition: var(--transition);
}

.new-latin1-btn-outline:hover {
  background: #166946;
  color: #fff;
}

/* ── HERO ─────────────────────────────────────────────────────── */
.new-latin1-hero {
  background: var(--clr-sand);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.new-latin1-hero-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 70% 80% at 90% 50%, rgba(27,67,50,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 20%, rgba(244,166,35,0.08) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 0 L52 26 L26 52 L0 26 Z' fill='none' stroke='%231B4332' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E");
  background-size: auto, auto, 52px 52px;
}

.new-latin1-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 1300px;
  margin: 0 auto;
  padding: 50px 36px 80px;
  width: 100%;
  gap: 60px;
}

.new-latin1-hero-left {
  flex: 0 0 50%;
  animation: new-latin1-rise 0.9s ease both;
}

@keyframes new-latin1-rise {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

.new-latin1-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-saffron);
  margin-bottom: 28px;
  animation: new-latin1-rise 0.9s 0.05s ease both;
}

.new-latin1-hero-kicker svg { color: var(--clr-jungle-light); }

.new-latin1-hero-title {
  font-family: var(--ff-display);
  font-size: clamp(3.4rem, 7vw, 6.5rem);
  font-weight: 900;
  line-height: 1.0;
  color: #ff9800eb;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
  animation: new-latin1-rise 0.9s 0.1s ease both;
}

.new-latin1-hero-title-em {
  display: block;
  color: #166946;
  font-style: italic;
  position: relative;
}

.new-latin1-hero-title-em::after {
  content: '';
  display: block;
  height: 6px;
  background: var(--clr-saffron);
  border-radius: 3px;
  width: 80px;
  margin-top: 16px;
}

.new-latin1-hero-desc {
  font-size: 17px;
  line-height: 1.75;
  color: var(--clr-text-mid);
  max-width: 480px;
  margin-bottom: 40px;
  animation: new-latin1-rise 0.9s 0.2s ease both;
}

.new-latin1-hero-cta-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
  animation: new-latin1-rise 0.9s 0.3s ease both;
}

.new-latin1-hero-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  animation: new-latin1-rise 0.9s 0.4s ease both;
}

.new-latin1-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text-mid);
}

.new-latin1-trust-item svg { color: var(--clr-jungle-light); flex-shrink: 0; }

.new-latin1-trust-sep {
  width: 1px;
  height: 28px;
  background: var(--clr-border);
}

/* HERO RIGHT / IMAGE STACK */
.new-latin1-hero-right {
  flex: 1;
  position: relative;
  animation: new-latin1-rise 0.9s 0.2s ease both;
}

.new-latin1-hero-img-stack {
  position: relative;
  height: 580px;
}

.new-latin1-hero-img-main {
  position: absolute;
  top: 0; left: 0;
  width: 80%;
  height: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.new-latin1-hero-img-main img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 8s ease;
}

.new-latin1-hero-img-main:hover img { transform: scale(1.04); }

.new-latin1-hero-img-accent {
  position: absolute;
  bottom: 40px;
  right: 0;
  width: 48%;
  height: 260px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 4px solid #fff;
  animation: new-latin1-float-card 6s ease-in-out infinite;
}

@keyframes new-latin1-float-card {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.new-latin1-hero-img-accent img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.new-latin1-hero-badge {
  position: absolute;
  top: 24px;
  right: -10px;
  width: 110px;
  height: 110px;
  animation: new-latin1-spin-badge 20s linear infinite;
}

@keyframes new-latin1-spin-badge {
  to { transform: rotate(360deg); }
}

.new-latin1-badge-svg {
  width: 100%;
  height: 100%;
  color: var(--clr-jungle);
}

.new-latin1-badge-center {
  position: absolute;
  inset: 26px;
  background: var(--clr-saffron);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  animation: new-latin1-spin-badge 20s linear infinite reverse;
}

.new-latin1-hero-stat-pill {
  position: absolute;
  bottom: 20px;
  left: -10px;
  background: #166946;
  color: #fff;
  border-radius: 100px;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  animation: new-latin1-float-card 6s 2s ease-in-out infinite;
}

.new-latin1-hero-stat-pill strong {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
  color: var(--clr-saffron);
}

.new-latin1-hero-stat-pill span {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
}

.new-latin1-hero-scroll-hint {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-text-light);
  animation: new-latin1-bounce 2s ease-in-out infinite;
}

@keyframes new-latin1-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ── WHY SECTION ──────────────────────────────────────────────── */
.new-latin1-why {
  background: var(--clr-cream);
  padding: 0 0 120px;
  position: relative;
  overflow: hidden;
}

/* Scrolling tape / marquee */
.new-latin1-why-tape {
  background: #166946;
  color: rgba(255,255,255,0.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 14px 0;
  margin-bottom: 80px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.new-latin1-why-tape::before {
  content: attr(class);
  display: none;
}

/* Animate the tape text by making it a repeating element */
.new-latin1-why-tape {
  display: flex;
  animation: new-latin1-tape-scroll 18s linear infinite;
}

@keyframes new-latin1-tape-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Double the text content via CSS for seamless loop */
.new-latin1-why-tape::after {
  content: 'WHY LATIN AMERICA · TEFL JOBS · TEACH ENGLISH ABROAD · ONLINE TEFL COURSE · TEFL CERTIFICATION · ';
  flex-shrink: 0;
  padding-left: 0;
}

.new-latin1-why-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.new-latin1-why-intro {
  font-size: 16px;
  line-height: 1.75;
  color: var(--clr-text-mid);
  margin-bottom: 48px;
  max-width: 420px;
}

.new-latin1-why-numbers {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.new-latin1-number-block {
  padding: 24px 0;
  border-bottom: 1px solid var(--clr-border);
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.new-latin1-number-block:first-child { border-top: 1px solid var(--clr-border); }

.new-latin1-number {
  font-family: var(--ff-display);
  font-size: 2.8rem;
  font-weight: 900;
  color: #166946;
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -0.03em;
}

.new-latin1-number-desc {
  font-size: 14px;
  color: var(--clr-text-mid);
  line-height: 1.5;
}

.new-latin1-why-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.new-latin1-why-card {
  background: var(--clr-sand-deep);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  border: 1px solid transparent;
}

.new-latin1-why-card--offset { margin-top: 28px; }

.new-latin1-why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--clr-saffron);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.new-latin1-why-card:hover {
  background: #fff;
  border-color: var(--clr-border);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.new-latin1-why-card:hover::before { transform: scaleX(1); }

.new-latin1-why-card-icon {
  width: 50px; height: 50px;
  background: #166946;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-saffron);
  margin-bottom: 18px;
  transition: var(--transition);
}

.new-latin1-why-card:hover .new-latin1-why-card-icon {
  background: var(--clr-saffron);
  color: var(--clr-jungle);
}

.new-latin1-why-card h3 {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 10px;
}

.new-latin1-why-card p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--clr-text-mid);
}

/* ── COUNTRIES ────────────────────────────────────────────────── */
.new-latin1-countries {
  background: #28624a;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.new-latin1-countries::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L55 30L30 55L5 30Z' fill='none' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 60% at 20% 30%, rgba(244,166,35,0.08), transparent 60%),
    radial-gradient(ellipse 50% 80% at 80% 70%, rgba(64,145,108,0.12), transparent 60%);
  background-size: 60px 60px, auto, auto;
}

.new-latin1-countries-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 72px;
}

.new-latin1-countries-sub {
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}

.new-latin1-countries-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.new-latin1-country {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background var(--transition);
}

.new-latin1-country:last-child { border-bottom: none; }
.new-latin1-country:hover { background: rgba(255,255,255,0.02); }

.new-latin1-country--flip .new-latin1-country-photo { order: 2; }
.new-latin1-country--flip .new-latin1-country-info  { order: 1; }

.new-latin1-country-photo {
  position: relative;
  overflow: hidden;
}

.new-latin1-country-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
  filter: brightness(0.82) saturate(1.1);
}

.new-latin1-country:hover .new-latin1-country-photo img { transform: scale(1.06); }

.new-latin1-country-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, var(--clr-jungle) 100%);
}

.new-latin1-country--flip .new-latin1-country-photo-overlay {
  background: linear-gradient(to left, transparent 60%, var(--clr-jungle) 100%);
}

.new-latin1-country-info {
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.new-latin1-country-number {
  font-family: var(--ff-display);
  font-size: 5rem;
  font-weight: 900;
  color: rgba(255,255,255,0.06);
  line-height: 1;
  position: absolute;
  top: 28px;
  right: 36px;
  letter-spacing: -0.04em;
}

.new-latin1-country-name {
  font-family: var(--ff-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1;
}

.new-latin1-country-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.new-latin1-country-chips span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--clr-saffron);
  border: 1px solid rgba(244,166,35,0.3);
  border-radius: 100px;
  padding: 4px 12px;
  background: rgba(244,166,35,0.08);
}

.new-latin1-country-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  margin-bottom: 24px;
}

.new-latin1-country-highlights {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.new-latin1-ch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
}

.new-latin1-ch-item svg { color: var(--clr-saffron); flex-shrink: 0; }

/* ── COURSE SECTION ───────────────────────────────────────────── */
.new-latin1-course {
  background: var(--clr-sand);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.new-latin1-course-diagonal {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 46%;
  background: var(--clr-sand-deep);
  clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
}

.new-latin1-course-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.new-latin1-course-desc {
  font-size: 16px;
  line-height: 1.75;
  color: var(--clr-text-mid);
  margin-bottom: 44px;
}

.new-latin1-course-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 44px;
}

.new-latin1-step {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid var(--clr-border);
  transition: var(--transition);
}

.new-latin1-step:first-child { border-top: 1px solid var(--clr-border); }

.new-latin1-step:hover { padding-left: 8px; }

.new-latin1-step-num {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--clr-saffron);
  flex-shrink: 0;
  width: 28px;
  padding-top: 3px;
}

.new-latin1-step-body strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 6px;
}

.new-latin1-step-body p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--clr-text-mid);
}

/* COURSE IMAGE */
.new-latin1-course-img-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: visible;
}

.new-latin1-course-img-wrap > img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
  box-shadow: var(--shadow-lg);
}

.new-latin1-course-img-card {
  position: absolute;
  bottom: -24px;
  left: -24px;
  background: #166946;
  color: #fff;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 40px rgba(27,67,50,0.4);
  min-width: 230px;
  animation: new-latin1-float-card 5s ease-in-out infinite;
}

.new-latin1-course-img-card svg { color: var(--clr-saffron); flex-shrink: 0; }

.new-latin1-course-img-card strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

.new-latin1-course-img-card span {
  display: block;
  font-size: 11px;
  opacity: 0.7;
  margin-top: 3px;
}

.new-latin1-course-img-stat {
  position: absolute;
  top: 24px;
  right: -20px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-md);
  animation: new-latin1-float-card 5s 2s ease-in-out infinite;
}

.new-latin1-course-img-num {
  font-family: var(--ff-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--clr-jungle);
  line-height: 1;
}

.new-latin1-mini-stars {
  display: flex;
  gap: 2px;
  color: var(--clr-saffron);
  margin-bottom: 4px;
}

.new-latin1-course-img-stat span {
  font-size: 11px;
  color: var(--clr-text-light);
  font-weight: 500;
}

/* ── TESTIMONIALS ─────────────────────────────────────────────── */
.new-latin1-testimonials {
  background: var(--clr-sand-deep);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.new-latin1-testimonials::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,67,50,0.08), transparent 70%);
  pointer-events: none;
}

.new-latin1-testimonials-head {
  margin-bottom: 64px;
}

.new-latin1-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.new-latin1-testi {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--clr-border);
}

.new-latin1-testi:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.new-latin1-testi--dark {
  background: var(--clr-jungle);
  border-color: transparent;
}

.new-latin1-testi--dark .new-latin1-testi-body p {
  color: rgba(255,255,255,0.7);
}

.new-latin1-testi--dark .new-latin1-testi-author strong {
  color: #fff;
}

.new-latin1-testi--dark .new-latin1-testi-author span {
  color: rgba(255,255,255,0.45);
}

.new-latin1-testi--dark .new-latin1-testi-quote-mark {
  color: var(--clr-saffron);
}

.new-latin1-testi-img {
  height: 180px;
  overflow: hidden;
  position: relative;
}

.new-latin1-testi-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: brightness(0.9);
}

.new-latin1-testi-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(15,31,24,0.4));
}

.new-latin1-testi--dark .new-latin1-testi-img::after {
  background: linear-gradient(to bottom, transparent 40%, var(--clr-jungle));
}

.new-latin1-testi-body {
  padding: 28px 28px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.new-latin1-testi-quote-mark {
  color: var(--clr-jungle-light);
  margin-bottom: 12px;
}

.new-latin1-testi-body p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--clr-text-mid);
  font-style: italic;
  flex: 1;
  margin-bottom: 24px;
}

.new-latin1-testi-author strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-dark);
}

.new-latin1-testi-author span {
  display: block;
  font-size: 12px;
  color: var(--clr-text-light);
  margin-top: 3px;
}

/* ── CTA ──────────────────────────────────────────────────────── */
.new-latin1-cta {
  position: relative;
  overflow: hidden;
  min-height: 580px;
  display: flex;
  align-items: center;
}

.new-latin1-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.new-latin1-cta-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.15);
}

.new-latin1-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(11, 32, 22, 0.92) 0%,
    rgba(11, 32, 22, 0.78) 45%,
    rgba(11, 32, 22, 0.55) 100%
  );
}

.new-latin1-cta-geo-pattern {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L55 30L30 55L5 30Z' fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

.new-latin1-cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 80px;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.new-latin1-cta-heading {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.new-latin1-cta-text p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  max-width: 540px;
}

.new-latin1-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
  min-width: 260px;
}

.new-latin1-btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--clr-saffron);
  color: #ffffff;
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 700;
  padding: 18px 30px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 6px 24px rgba(244,166,35,0.5);
  white-space: nowrap;
}

.new-latin1-btn-cta:hover {
  background: var(--clr-saffron-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(244,166,35,0.6);
}

.new-latin1-btn-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 600;
  padding: 16px 28px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255,255,255,0.2);
  text-decoration: none;
  transition: var(--transition);
  backdrop-filter: blur(6px);
}

.new-latin1-btn-cta-ghost:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.4);
}

.new-latin1-cta-micro-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.new-latin1-cta-micro-trust span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

.new-latin1-cta-micro-trust svg { color: var(--clr-saffron); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .new-latin1-why-layout { grid-template-columns: 1fr; gap: 60px; }
  .new-latin1-why-numbers { flex-direction: row; flex-wrap: wrap; }
  .new-latin1-number-block { flex: 1; min-width: 160px; }
  .new-latin1-course-layout { grid-template-columns: 1fr; gap: 60px; }
  .new-latin1-course-diagonal { display: none; }
  .new-latin1-cta-inner { grid-template-columns: 1fr; gap: 48px; }
  .new-latin1-cta-actions { flex-direction: row; flex-wrap: wrap; min-width: auto; }
  .new-latin1-cta-micro-trust { flex-direction: row; flex-wrap: wrap; gap: 16px; }
}

@media (max-width: 900px) {
  .new-latin1-hero-inner { flex-direction: column; padding: 80px 36px 60px; gap: 48px; }
  .new-latin1-hero-left { flex: none; }
  .new-latin1-hero-right { width: 100%; }
  .new-latin1-hero-img-stack { height: 420px; }
  .new-latin1-hero-badge { display: none; }
  .new-latin1-why-cards { grid-template-columns: 1fr; }
  .new-latin1-why-card--offset { margin-top: 0; }
  .new-latin1-country { grid-template-columns: 1fr; min-height: auto; }
  .new-latin1-country-photo { height: 280px; }
  .new-latin1-country--flip .new-latin1-country-photo { order: 0; }
  .new-latin1-country--flip .new-latin1-country-info  { order: 0; }
  .new-latin1-country-photo-overlay,
  .new-latin1-country--flip .new-latin1-country-photo-overlay {
    background: linear-gradient(to top, var(--clr-jungle) 0%, transparent 60%);
  }
  .new-latin1-testi-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .new-latin1-container { padding: 0 20px; }
  .new-latin1-hero-title { font-size: clamp(2.8rem, 12vw, 4rem); }
  .new-latin1-hero-img-accent { display: none; }
  .new-latin1-hero-img-stack { height: 320px; }
  .new-latin1-hero-img-main { width: 100%; }
  .new-latin1-hero-stat-pill { left: 10px; bottom: 10px; }
  .new-latin1-why, .new-latin1-course, .new-latin1-testimonials { padding: 80px 0; }
  .new-latin1-country-info { padding: 36px 24px; }
  .new-latin1-hero-cta-row { flex-direction: column; align-items: flex-start; }
  .new-latin1-btn-main, .new-latin1-btn-outline { width: 100%; justify-content: center; }
  .new-latin1-cta-actions { flex-direction: column; }
  .new-latin1-btn-cta, .new-latin1-btn-cta-ghost { justify-content: center; }
}


/* ============================================================
   TRAVEL & TEACH — CSS
   All classes prefixed: Travel1-new-
   Aesthetic: Luxury travel editorial · Navy/gold/cream
   Fonts: Cormorant Garamond (display) + Outfit (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ── TOKENS ──────────────────────────────────────────────────── */
.Travel1-new-hero,
.Travel1-new-intro,
.Travel1-new-destinations,
.Travel1-new-how,
.Travel1-new-testi,
.Travel1-new-cta {
  --t1-navy:        #0A1628;
  --t1-navy-mid:    #112240;
  --t1-navy-light:  #1C3461;
  --t1-gold:        #C9A84C;
  --t1-gold-light:  #E8C97A;
  --t1-gold-pale:   #F5E6C0;
  --t1-cream:       #FDFAF4;
  --t1-cream-deep:  #F5EDD9;
  --t1-text:        #1A2540;
  --t1-text-mid:    #3D5070;
  --t1-text-light:  #7A8BA8;
  --t1-border:      #DDE5F0;
  --t1-white:       #FFFFFF;

  /* Region accent colours */
  --t1-asia:        #C0392B;
  --t1-europe:      #2471A3;
  --t1-latam:       #1B7A4F;
  --t1-middleeast:  #B7860B;
  --t1-africa:      #A04000;

  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'Outfit', system-ui, sans-serif;
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --shadow-sm:  0 2px 12px rgba(10,22,40,0.08);
  --shadow-md:  0 8px 32px rgba(10,22,40,0.14);
  --shadow-lg:  0 20px 64px rgba(10,22,40,0.22);
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tr:         0.36s var(--ease);
  font-family: var(--ff-body);
  color: var(--t1-text);
  box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }

/* ── SHARED ──────────────────────────────────────────────────── */
.Travel1-new-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 36px;
}

.Travel1-new-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t1-gold);
  margin-bottom: 16px;
}

.Travel1-new-label::before,
.Travel1-new-label::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--t1-gold);
  opacity: 0.6;
}

.Travel1-new-label--light { color: rgba(255,255,255,0.7); }
.Travel1-new-label--light::before,
.Travel1-new-label--light::after { background: rgba(255,255,255,0.4); }

.Travel1-new-label--center { display: flex; justify-content: center; }

.Travel1-new-section-title {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: #ff9800e0;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.Travel1-new-section-title--light  { color: #fff; }
.Travel1-new-section-title--center { text-align: center; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.Travel1-new-btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--t1-gold);
  color: var(--t1-navy);
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: var(--tr);
  box-shadow: 0 4px 20px rgba(201,168,76,0.4);
  letter-spacing: 0.02em;
}

.Travel1-new-btn-hero:hover {
  background: var(--t1-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201,168,76,0.5);
}

.Travel1-new-btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.9);
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 500;
  padding: 15px 24px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255,255,255,0.3);
  text-decoration: none;
  transition: var(--tr);
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.06);
}

.Travel1-new-btn-hero-ghost:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.6);
}

.Travel1-new-btn-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--t1-navy);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: var(--tr);
  letter-spacing: 0.03em;
}

.Travel1-new-btn-main:hover {
  background: var(--t1-navy-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.Travel1-new-btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--t1-gold);
  color: var(--t1-navy);
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 700;
  padding: 18px 36px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: var(--tr);
  box-shadow: 0 6px 24px rgba(201,168,76,0.35);
  letter-spacing: 0.02em;
}

.Travel1-new-btn-cta:hover {
  background: var(--t1-gold-light);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(201,168,76,0.5);
}

.Travel1-new-btn-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.8);
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 500;
  padding: 17px 28px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255,255,255,0.25);
  text-decoration: none;
  transition: var(--tr);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
}

.Travel1-new-btn-cta-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

/* ── HERO ─────────────────────────────────────────────────────── */
.Travel1-new-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.Travel1-new-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.Travel1-new-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) brightness(0.75);
  animation: Travel1NewHeroZoom 20s ease-in-out infinite alternate;
}

@keyframes Travel1NewHeroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

.Travel1-new-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(10,22,40,0.82) 0%,
    rgba(10,22,40,0.65) 45%,
    rgba(10,22,40,0.45) 100%
  );
}

.Travel1-new-hero-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}

.Travel1-new-hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 60px;
  margin: auto 0;
  padding-top: 120px;
  padding-bottom: 80px;
  animation: Travel1NewRise 1s ease both;
}

@keyframes Travel1NewRise {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}

.Travel1-new-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t1-gold);
  margin-bottom: 28px;
  padding: 8px 20px;
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 100px;
  background: rgba(201,168,76,0.08);
  backdrop-filter: blur(8px);
  width: fit-content;
  animation: Travel1NewRise 1s 0.1s ease both;
}

.Travel1-new-hero-title {
  font-family: var(--ff-display);
  font-size: clamp(4rem, 8vw, 7.5rem);
  font-weight: 700;
  line-height: 1.0;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  animation: Travel1NewRise 1s 0.15s ease both;
}

.Travel1-new-hero-title-em {
  display: block;
  color: var(--t1-gold-light);
  font-style: italic;
}

.Travel1-new-hero-subtitle {
  font-size: 18px;
  line-height: 1.75;
  color: rgba(255,255,255,0.72);
  max-width: 620px;
  margin-bottom: 44px;
  font-weight: 300;
  animation: Travel1NewRise 1s 0.25s ease both;
}

.Travel1-new-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 64px;
  animation: Travel1NewRise 1s 0.35s ease both;
}

.Travel1-new-hero-stats {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  animation: Travel1NewRise 1s 0.45s ease both;
}

.Travel1-new-hstat { text-align: left; }

.Travel1-new-hstat-n {
  display: block;
  font-family: var(--ff-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--t1-gold-light);
  line-height: 1;
  letter-spacing: -0.02em;
}

.Travel1-new-hstat-l {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}

.Travel1-new-hstat-div {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,0.12);
}

.Travel1-new-hero-scroll {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 36px;
  color: rgba(255,255,255,0.4);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: Travel1NewBounce 2s ease-in-out infinite;
}

@keyframes Travel1NewBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

.Travel1-new-scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.4));
}

/* ── INTRO TICKER ────────────────────────────────────────────── */
.Travel1-new-intro {
  background: var(--t1-cream);
  padding-bottom: 120px;
  overflow: hidden;
}

.Travel1-new-intro-ticker {
  background: linear-gradient(174deg, #284c49, #7a4e0bd9);
  overflow: hidden;
  padding: 0;
  margin-bottom: 80px;
}

.Travel1-new-ticker-track {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  animation: Travel1NewTicker 30s linear infinite;
  white-space: nowrap;
  width: max-content;
}

@keyframes Travel1NewTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.Travel1-new-ticker-track span {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}

.Travel1-new-tick-dot {
  color: var(--t1-gold) !important;
  font-size: 8px !important;
  letter-spacing: 0 !important;
}

.Travel1-new-intro-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}

.Travel1-new-intro-body p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--t1-text-mid);
  margin-bottom: 20px;
}

.Travel1-new-intro-body p:last-of-type { margin-bottom: 36px; }

.Travel1-new-intro-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.Travel1-new-ibadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #ff9800f0;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1.5px solid var(--t1-border);
  background: #fff;
  transition: var(--tr);
}

.Travel1-new-ibadge svg { color: var(--t1-gold); }

.Travel1-new-ibadge:hover {
  border-color: var(--t1-gold);
  background: var(--t1-gold-pale);
  transform: translateY(-2px);
}

/* ── DESTINATIONS ─────────────────────────────────────────────── */
.Travel1-new-destinations {
  background: var(--t1-cream-deep);
  padding: 80px 0 120px;
  position: relative;
}

.Travel1-new-destinations::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='%230A1628' fill-opacity='0.04'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  pointer-events: none;
}

.Travel1-new-dest-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.Travel1-new-dest-sub {
  font-size: 16px;
  color: var(--t1-text-mid);
  line-height: 1.7;
  margin-top: 8px;
}

/* ── FILTER TABS ─────────────────────────────────────────────── */
.Travel1-new-filters {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.Travel1-new-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--t1-text-mid);
  padding: 10px 22px;
  border-radius: 100px;
  border: 1.5px solid var(--t1-border);
  background: #fff;
  cursor: pointer;
  transition: var(--tr);
  outline: none;
  letter-spacing: 0.02em;
}

.Travel1-new-filter svg { color: var(--t1-text-light); transition: var(--tr); }

.Travel1-new-filter:hover {
  border-color: var(--t1-navy);
  color: var(--t1-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.Travel1-new-filter--active {
  background: var(--t1-navy);
  color: #fff;
  border-color: var(--t1-navy);
  box-shadow: 0 4px 16px rgba(10,22,40,0.25);
}

.Travel1-new-filter--active svg { color: var(--t1-gold-light); }

/* ── DESTINATION GRID ────────────────────────────────────────── */
.Travel1-new-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}

@keyframes Travel1NewFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.Travel1-new-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--t1-border);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
  animation: Travel1NewFadeIn 0.5s ease both;
}

.Travel1-new-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/* Featured cards span 2 columns */
.Travel1-new-card--featured {
  grid-column: span 2;
}

.Travel1-new-card--featured .Travel1-new-card-img {
  height: 280px;
}

.Travel1-new-card-img {
  position: relative;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}

.Travel1-new-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
  filter: brightness(0.88) saturate(1.1);
}

.Travel1-new-card:hover .Travel1-new-card-img img {
  transform: scale(1.08);
}

.Travel1-new-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,22,40,0.7) 0%, transparent 55%);
}

.Travel1-new-card-region-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(10,22,40,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.2);
}

/* Region accent colouring for region tag */
.Travel1-new-card--asia .Travel1-new-card-region-tag         { background: rgba(192,57,43,0.7); }
.Travel1-new-card--europe .Travel1-new-card-region-tag       { background: rgba(36,113,163,0.7); }
.Travel1-new-card--latam .Travel1-new-card-region-tag        { background: rgba(27,122,79,0.7); }
.Travel1-new-card--middleeast .Travel1-new-card-region-tag   { background: rgba(183,134,11,0.7); }
.Travel1-new-card--africa .Travel1-new-card-region-tag       { background: rgba(160,64,0,0.7); }

.Travel1-new-card-top-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t1-navy);
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--t1-gold);
  display: flex;
  align-items: center;
  gap: 4px;
}

.Travel1-new-card-top-badge--gold {
  background: linear-gradient(135deg, var(--t1-gold), var(--t1-gold-light));
}

.Travel1-new-card-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.Travel1-new-card-country {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--t1-navy);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.Travel1-new-card-city {
  font-size: 12px;
  color: var(--t1-text-light);
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.Travel1-new-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.Travel1-new-card-salary {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--t1-gold);
}

.Travel1-new-card-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--t1-border);
  display: inline-block;
}

.Travel1-new-card-req {
  font-size: 11.5px;
  color: var(--t1-text-light);
  font-weight: 500;
}

.Travel1-new-card-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--t1-text-mid);
  margin-bottom: 16px;
  flex: 1;
}

.Travel1-new-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.Travel1-new-card-tags span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--t1-navy);
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--t1-cream-deep);
  border: 1px solid var(--t1-border);
  letter-spacing: 0.03em;
}

.Travel1-new-dest-cta {
  text-align: center;
  margin-top: 56px;
  padding: 48px;
  background: linear-gradient(135deg, #FF9800 0%, #3F51B5 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.Travel1-new-dest-cta p {
  font-size: 17px;
  color: rgba(255,255,255,0.8);
  font-weight: 300;
  text-align: left;
  margin: 0;
  flex: 1;
  min-width: 260px;
}

.Travel1-new-dest-cta .Travel1-new-btn-main {
  background: var(--t1-gold);
  color: var(--t1-navy);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(201,168,76,0.35);
}

.Travel1-new-dest-cta .Travel1-new-btn-main:hover {
  background: var(--t1-gold-light);
}

/* ── HOW IT WORKS ─────────────────────────────────────────────── */
.Travel1-new-how {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  display: flex;
  align-items: center;
}

.Travel1-new-how-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.Travel1-new-how-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.35) saturate(0.8);
}

.Travel1-new-how-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgb(76 175 80 / 64%) 0%, rgba(10, 22, 40, 0.78) 50%, rgba(10, 22, 40, 0.6) 100%);
}

.Travel1-new-how-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.Travel1-new-how-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.Travel1-new-how-step {
  display: flex;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: var(--tr);
  cursor: default;
}

.Travel1-new-how-step:first-child { border-top: 1px solid rgba(255,255,255,0.07); }
.Travel1-new-how-step:hover { padding-left: 10px; }

.Travel1-new-how-step-num {
  font-family: var(--ff-display);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--t1-gold);
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.6;
  letter-spacing: -0.03em;
  width: 54px;
}

.Travel1-new-how-step:hover .Travel1-new-how-step-num { opacity: 1; }

.Travel1-new-how-step-body strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.Travel1-new-how-step-body p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
}

/* ── TESTIMONIALS ─────────────────────────────────────────────── */
.Travel1-new-testi {
  background: var(--t1-cream);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.Travel1-new-testi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--t1-navy), var(--t1-gold), var(--t1-navy));
}

.Travel1-new-testi-header {
  text-align: center;
  margin-bottom: 64px;
}

.Travel1-new-testi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.Travel1-new-tcard {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--t1-border);
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: var(--tr);
  box-shadow: var(--shadow-sm);
}

.Travel1-new-tcard:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.Travel1-new-tcard--dark {
  background: var(--t1-navy);
  border-color: transparent;
}

.Travel1-new-tcard-img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.Travel1-new-tcard-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: brightness(0.8) saturate(1.1);
  transition: transform 0.6s ease;
}

.Travel1-new-tcard:hover .Travel1-new-tcard-img-wrap img {
  transform: scale(1.05);
}

.Travel1-new-tcard-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,22,40,0.6) 0%, transparent 55%);
}

.Travel1-new-tcard--dark .Travel1-new-tcard-img-overlay {
  background: linear-gradient(to top, var(--t1-navy) 0%, rgba(10,22,40,0.4) 55%);
}

.Travel1-new-tcard-flag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.Travel1-new-tcard-body {
  padding: 28px 28px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.Travel1-new-tcard-stars {
  display: flex;
  gap: 3px;
  color: var(--t1-gold);
  margin-bottom: 16px;
}

.Travel1-new-tcard-body p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--t1-text-mid);
  font-style: italic;
  flex: 1;
  margin-bottom: 24px;
}

.Travel1-new-tcard--dark .Travel1-new-tcard-body p {
  color: rgba(255,255,255,0.65);
}

.Travel1-new-tcard-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.Travel1-new-tcard-author img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--t1-gold);
}

.Travel1-new-tcard-author strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--t1-navy);
}

.Travel1-new-tcard--dark .Travel1-new-tcard-author strong { color: #fff; }

.Travel1-new-tcard-author span {
  display: block;
  font-size: 12px;
  color: var(--t1-text-light);
}

.Travel1-new-tcard--dark .Travel1-new-tcard-author span { color: rgba(255,255,255,0.45); }

/* ── CTA ─────────────────────────────────────────────────────── */
.Travel1-new-cta {
  background: #885a15;
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}

.Travel1-new-cta-bg-grid {
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'%3E%3Cpath d='M0 0h60v60H0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(28,52,97,0.6), transparent);
}

.Travel1-new-cta-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.Travel1-new-cta-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(201,168,76,0.1), transparent 70%);
  top: -150px; right: -100px;
  animation: Travel1NewOrbPulse 8s ease-in-out infinite;
}

.Travel1-new-cta-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(36,113,163,0.1), transparent 70%);
  bottom: -100px; left: -80px;
  animation: Travel1NewOrbPulse 8s 3s ease-in-out infinite;
}

@keyframes Travel1NewOrbPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.15); opacity: 0.7; }
}

.Travel1-new-cta-inner {
  position: relative;
  z-index: 2;
}

.Travel1-new-cta-content {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.Travel1-new-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(201,168,76,0.12);
  color: var(--t1-gold);
  margin: 0 auto 28px;
  border: 1px solid rgba(201,168,76,0.25);
  animation: Travel1NewOrbPulse 4s ease-in-out infinite;
}

.Travel1-new-cta-title {
  font-family: var(--ff-display);
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  font-style: italic;
}

.Travel1-new-cta-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: 44px;
}

.Travel1-new-cta-btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.Travel1-new-cta-trust-row {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.Travel1-new-cta-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.Travel1-new-cta-trust-row svg { color: var(--t1-gold); opacity: 0.7; }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .Travel1-new-grid { grid-template-columns: repeat(3, 1fr); }
  .Travel1-new-card--featured { grid-column: span 2; }
}

@media (max-width: 1000px) {
  .Travel1-new-intro-layout { grid-template-columns: 1fr; gap: 48px; }
  .Travel1-new-how-inner { grid-template-columns: 1fr; gap: 48px; }
  .Travel1-new-testi-row { grid-template-columns: 1fr 1fr; }
  .Travel1-new-grid { grid-template-columns: repeat(2, 1fr); }
  .Travel1-new-card--featured { grid-column: span 2; }
}

@media (max-width: 768px) {
  .Travel1-new-hero-content { padding: 120px 28px 60px; }
  .Travel1-new-hero-title { font-size: clamp(3rem, 12vw, 5rem); }
  .Travel1-new-hero-stats { gap: 20px; }
  .Travel1-new-hstat-div { display: none; }
  .Travel1-new-container { padding: 0 24px; }
  .Travel1-new-testi-row { grid-template-columns: 1fr; }
  .Travel1-new-dest-cta { flex-direction: column; text-align: center; }
  .Travel1-new-dest-cta p { text-align: center; }
  .Travel1-new-cta-btns { flex-direction: column; align-items: center; }
}

@media (max-width: 600px) {
  .Travel1-new-grid {
    grid-template-columns: 1fr;
  }
  .Travel1-new-card--featured {
    grid-column: span 1;
  }
  .Travel1-new-card--featured .Travel1-new-card-img {
    height: 220px;
  }
  .Travel1-new-filters { gap: 6px; }
  .Travel1-new-filter { font-size: 12px; padding: 8px 16px; }
  .Travel1-new-hero-actions { flex-direction: column; align-items: flex-start; }
  .Travel1-new-btn-hero, .Travel1-new-btn-hero-ghost { width: 100%; justify-content: center; }
}

/* ============================================================
   TEFL CORPORATE TRAINING — CSS
   All classes prefixed: Corpo1-new-
   Aesthetic: Sharp business · Charcoal + Electric Teal + White
   Fonts: Syne (geometric display) + Lora (refined serif body)
   Completely distinct from Asia, Latin America, Travel pages
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ── TOKENS ──────────────────────────────────────────────────── */
.Corpo1-new-hero,
.Corpo1-new-what,
.Corpo1-new-roles,
.Corpo1-new-industries,
.Corpo1-new-skills,
.Corpo1-new-salary,
.Corpo1-new-start,
.Corpo1-new-cta {
  --c-dark:        #0D1117;
  --c-dark-2:      #161B22;
  --c-dark-3:      #21262D;
  --c-charcoal:    #2D333B;
  --c-teal:        #00B4D8;
  --c-teal-dark:   #0096B7;
  --c-teal-pale:   #E0F7FA;
  --c-teal-glow:   rgba(0,180,216,0.15);
  --c-white:       #FFFFFF;
  --c-off-white:   #F6F8FA;
  --c-light:       #EAEEF2;
  --c-border:      #D0D7DE;
  --c-border-dark: rgba(255,255,255,0.08);
  --c-text:        #1C2128;
  --c-text-mid:    #444C56;
  --c-text-light:  #768390;
  --c-sky:         #58A6FF;
  --c-amber:       #F0883E;
  --c-green:       #3FB950;

  --ff-display: 'Syne', system-ui, sans-serif;
  --ff-body:    'Lora', Georgia, serif;

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  --shadow-sm:  0 1px 8px rgba(13,17,23,0.08);
  --shadow-md:  0 6px 24px rgba(13,17,23,0.12);
  --shadow-lg:  0 16px 56px rgba(13,17,23,0.18);
  --shadow-teal: 0 6px 28px rgba(0,180,216,0.3);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tr:   0.32s var(--ease);

  font-family: var(--ff-body);
  color: var(--c-text);
  box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }

/* ── SHARED ──────────────────────────────────────────────────── */
.Corpo1-new-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.Corpo1-new-section-label {
  font-family: var(--ff-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-teal);
  margin-bottom: 14px;
  display: block;
}

.Corpo1-new-section-label--light  { color: rgba(0,180,216,0.8); }
.Corpo1-new-section-label--center { text-align: center; }

.Corpo1-new-section-title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-dark);
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.Corpo1-new-section-title--light  { color: var(--c-white); }
.Corpo1-new-section-title--center { text-align: center; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.Corpo1-new-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-teal);
  color: var(--c-dark);
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 14px 28px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: var(--tr);
  box-shadow: var(--shadow-teal);
}

.Corpo1-new-btn-primary:hover {
  background: var(--c-teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(0,180,216,0.4);
}

.Corpo1-new-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--c-dark);
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 13px 24px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: var(--tr);
}

.Corpo1-new-btn-outline:hover {
  border-color: var(--c-teal);
  color: var(--c-teal);
  background: var(--c-teal-pale);
}

.Corpo1-new-btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-teal);
  color: var(--c-dark);
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 16px 34px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: var(--tr);
  box-shadow: var(--shadow-teal);
}

.Corpo1-new-btn-cta:hover {
  background: #fff;
  color: var(--c-dark);
  box-shadow: 0 12px 40px rgba(255,255,255,0.15);
  transform: translateY(-2px);
}

.Corpo1-new-btn-ghost-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 600;
  padding: 15px 26px;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: var(--tr);
}

.Corpo1-new-btn-ghost-cta:hover {
  border-color: rgba(255,255,255,0.45);
  color: #fff;
  background: rgba(255,255,255,0.06);
}

/* ── HERO ─────────────────────────────────────────────────────── */
.Corpo1-new-hero {
  background: var(--c-off-white);
  padding: 100px 0 0;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.Corpo1-new-hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--c-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.35;
}

.Corpo1-new-hero-accent-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-teal) 0%, var(--c-sky) 50%, var(--c-teal) 100%);
  background-size: 200% 100%;
  animation: Corpo1NewBarSlide 4s linear infinite;
}

@keyframes Corpo1NewBarSlide {
  from { background-position: 0% 0%; }
  to   { background-position: 200% 0%; }
}

.Corpo1-new-hero-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
  padding-bottom: 80px;
}

.Corpo1-new-hero-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-light);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

.Corpo1-new-bc-sep { opacity: 0.4; }

.Corpo1-new-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-teal);
  border: 1px solid var(--c-teal);
  border-radius: var(--radius-xs);
  padding: 5px 14px;
  margin-bottom: 24px;
  background: var(--c-teal-pale);
  width: fit-content;
}

.Corpo1-new-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-teal);
  animation: Corpo1NewPulse 2s ease-in-out infinite;
}

@keyframes Corpo1NewPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

.Corpo1-new-hero-title {
  font-family: var(--ff-display);
  font-size: clamp(3.2rem, 6.5vw, 6rem);
  font-weight: 800;
  line-height: 1.0;
  color: var(--c-dark);
  letter-spacing: -0.04em;
  margin-bottom: 24px;
  animation: Corpo1NewRise 0.8s ease both;
}

@keyframes Corpo1NewRise {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.Corpo1-new-hero-title-teal {
  color: var(--c-teal);
  display: block;
  -webkit-text-stroke: 0;
}

.Corpo1-new-hero-desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-text-mid);
  max-width: 480px;
  margin-bottom: 36px;
  animation: Corpo1NewRise 0.8s 0.1s ease both;
}

.Corpo1-new-hero-metrics {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 36px;
  padding: 24px 28px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  width: fit-content;
  animation: Corpo1NewRise 0.8s 0.15s ease both;
}

.Corpo1-new-metric { text-align: center; }

.Corpo1-new-metric-val {
  font-family: var(--ff-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--c-dark);
  letter-spacing: -0.03em;
  line-height: 1;
}

.Corpo1-new-metric-unit {
  font-family: var(--ff-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-teal);
  margin-left: 2px;
}

.Corpo1-new-metric-label {
  display: block;
  font-family: var(--ff-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-light);
  margin-top: 4px;
}

.Corpo1-new-metric-line {
  width: 1px;
  height: 40px;
  background: var(--c-border);
}

.Corpo1-new-hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  animation: Corpo1NewRise 0.8s 0.25s ease both;
}

/* HERO RIGHT */
.Corpo1-new-hero-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: visible;
}

.Corpo1-new-hero-img-wrap > img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  filter: brightness(0.95) saturate(0.9);
}

.Corpo1-new-hero-img-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(0,180,216,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.Corpo1-new-hero-float-card {
  position: absolute;
  background: var(--c-white);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--c-border);
  min-width: 220px;
}

.Corpo1-new-hero-float-1 {
  top: 28px;
  left: -28px;
  animation: Corpo1NewFloat 5s ease-in-out infinite;
}

.Corpo1-new-hero-float-2 {
  bottom: 80px;
  left: -28px;
  animation: Corpo1NewFloat 5s 2s ease-in-out infinite;
}

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

.Corpo1-new-fc-icon {
  width: 38px; height: 38px;
  background: var(--c-off-white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-mid);
  flex-shrink: 0;
}

.Corpo1-new-fc-icon--teal {
  background: var(--c-teal-pale);
  color: var(--c-teal);
}

.Corpo1-new-hero-float-card strong {
  display: block;
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--c-dark);
}

.Corpo1-new-hero-float-card span {
  display: block;
  font-size: 11px;
  color: var(--c-text-light);
  font-family: var(--ff-display);
  margin-top: 2px;
}

/* HERO CHART */
.Corpo1-new-hero-chart {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--c-dark);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-lg);
  min-width: 200px;
}

.Corpo1-new-chart-label {
  font-family: var(--ff-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 14px;
}

.Corpo1-new-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 60px;
}

.Corpo1-new-cbar {
  flex: 1;
  background: rgba(255,255,255,0.12);
  border-radius: 2px 2px 0 0;
  height: var(--h);
  transition: background var(--tr);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  animation: Corpo1NewBarGrow 1s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 0.1s);
}

.Corpo1-new-cbar:nth-child(1) { --i: 1; }
.Corpo1-new-cbar:nth-child(2) { --i: 2; }
.Corpo1-new-cbar:nth-child(3) { --i: 3; }
.Corpo1-new-cbar:nth-child(4) { --i: 4; }
.Corpo1-new-cbar:nth-child(5) { --i: 5; }

@keyframes Corpo1NewBarGrow {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}

.Corpo1-new-cbar--active { background: var(--c-teal); }

.Corpo1-new-cbar span {
  position: absolute;
  bottom: -18px;
  font-family: var(--ff-display);
  font-size: 8px;
  color: rgba(255,255,255,0.35);
  font-weight: 600;
  white-space: nowrap;
}

.Corpo1-new-chart-unit {
  font-family: var(--ff-display);
  font-size: 8px;
  color: rgba(255,255,255,0.25);
  margin-top: 24px;
  letter-spacing: 0.06em;
}

/* ── WHAT IS CORPORATE TEFL ──────────────────────────────────── */
.Corpo1-new-what {
  background: var(--c-white);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.Corpo1-new-what-diagonal {
  position: absolute;
  top: 0; right: 0;
  width: 40%;
  height: 100%;
  background: var(--c-off-white);
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
}

.Corpo1-new-what-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.Corpo1-new-what-img {
  position: relative;
}

.Corpo1-new-what-img > img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  box-shadow: var(--shadow-lg);
  filter: saturate(0.85);
}

.Corpo1-new-what-img-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--c-teal);
  color: var(--c-dark);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-teal);
  min-width: 240px;
}

.Corpo1-new-what-img-badge strong {
  display: block;
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 800;
}

.Corpo1-new-what-img-badge span {
  display: block;
  font-family: var(--ff-display);
  font-size: 10px;
  opacity: 0.75;
  margin-top: 3px;
}

.Corpo1-new-what-lead {
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-dark);
  font-weight: 500;
  margin-bottom: 20px;
  font-family: var(--ff-body);
  font-style: italic;
}

.Corpo1-new-what-body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-text-mid);
  margin-bottom: 36px;
}

.Corpo1-new-what-highlights {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.Corpo1-new-wh-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-light);
  transition: var(--tr);
}

.Corpo1-new-wh-item:first-child { border-top: 1px solid var(--c-light); }
.Corpo1-new-wh-item:hover { padding-left: 8px; }

.Corpo1-new-wh-icon {
  width: 42px; height: 42px;
  background: var(--c-teal-pale);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-teal);
  flex-shrink: 0;
  transition: var(--tr);
}

.Corpo1-new-wh-item:hover .Corpo1-new-wh-icon {
  background: var(--c-teal);
  color: var(--c-dark);
}

.Corpo1-new-wh-item strong {
  display: block;
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-dark);
  margin-bottom: 4px;
}

.Corpo1-new-wh-item p {
  font-size: 13.5px;
  color: var(--c-text-mid);
  line-height: 1.65;
  margin: 0;
}

/* ── CAREER ROLES ────────────────────────────────────────────── */
.Corpo1-new-roles {
  background: var(--c-off-white);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.Corpo1-new-roles::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--c-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.25;
}

.Corpo1-new-roles-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 60px;
  position: relative;
  z-index: 2;
}

.Corpo1-new-roles-sub {
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-text-mid);
  margin-top: 6px;
}

.Corpo1-new-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}

.Corpo1-new-role-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  position: relative;
  transition: var(--tr);
  overflow: hidden;
}

.Corpo1-new-role-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr);
}

.Corpo1-new-role-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.Corpo1-new-role-card:hover::before { transform: scaleX(1); }

.Corpo1-new-role-card--featured {
  background: #1c9388;
  border-color: transparent;
  grid-column: span 1;
}

.Corpo1-new-role-card--featured::before {
  background: var(--c-teal);
  transform: scaleX(1);
}

.Corpo1-new-role-card--featured h3 { color: var(--c-white); }
.Corpo1-new-role-card--featured .Corpo1-new-role-desc { color: rgba(255,255,255,0.6); }
.Corpo1-new-role-card--featured .Corpo1-new-rd-item { color: rgba(255,255,255,0.55); }

.Corpo1-new-role-num {
  font-family: var(--ff-display);
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--c-light);
  line-height: 1;
  position: absolute;
  top: 16px;
  right: 20px;
  letter-spacing: -0.04em;
  pointer-events: none;
}

.Corpo1-new-role-card--featured .Corpo1-new-role-num {
  color: rgba(255,255,255,0.05);
}

.Corpo1-new-role-icon {
  width: 52px; height: 52px;
  background: var(--c-teal-pale);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-teal);
  margin-bottom: 20px;
  transition: var(--tr);
}

.Corpo1-new-role-card:hover .Corpo1-new-role-icon,
.Corpo1-new-role-card--featured .Corpo1-new-role-icon {
  background: var(--c-teal);
  color: var(--c-dark);
}

.Corpo1-new-role-card h3 {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--c-dark);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.Corpo1-new-role-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--c-text-mid);
  margin-bottom: 20px;
}

.Corpo1-new-role-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--c-light);
  padding-top: 16px;
  margin-bottom: 20px;
}

.Corpo1-new-role-card--featured .Corpo1-new-role-details {
  border-top-color: rgba(255,255,255,0.08);
}

.Corpo1-new-rd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-display);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--c-text-mid);
}

.Corpo1-new-rd-item svg { color: var(--c-teal); flex-shrink: 0; }

.Corpo1-new-role-tag {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-mid);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  background: var(--c-off-white);
}

.Corpo1-new-role-tag--teal {
  color: var(--c-teal);
  border-color: var(--c-teal);
  background: var(--c-teal-pale);
}

.Corpo1-new-role-tag--sky {
  color: var(--c-sky);
  border-color: rgba(88,166,255,0.35);
  background: rgba(88,166,255,0.08);
}

/* ── INDUSTRIES ───────────────────────────────────────────────── */
.Corpo1-new-industries {
  background: #1c293c;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.Corpo1-new-industries-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(0,180,216,0.08), transparent),
    radial-gradient(ellipse 50% 70% at 10% 80%, rgba(88,166,255,0.06), transparent),
    url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='1' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E");
  background-size: auto, auto, 50px 50px;
}

.Corpo1-new-ind-header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 64px;
  position: relative;
  z-index: 2;
}

.Corpo1-new-ind-sub {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  margin-top: 8px;
}

.Corpo1-new-ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}

.Corpo1-new-ind-card {
  background: var(--c-dark-2);
  border: 1px solid var(--c-border-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--tr);
}

.Corpo1-new-ind-card:hover {
  border-color: rgba(0,180,216,0.35);
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,180,216,0.15);
}

.Corpo1-new-ind-img {
  height: 180px;
  overflow: hidden;
  position: relative;
}

.Corpo1-new-ind-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.7) saturate(0.8);
  transition: transform 0.6s var(--ease);
}

.Corpo1-new-ind-card:hover .Corpo1-new-ind-img img { transform: scale(1.08); }

.Corpo1-new-ind-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--c-dark-2) 0%, transparent 60%);
}

.Corpo1-new-ind-body {
  padding: 22px 24px 26px;
}

.Corpo1-new-ind-icon {
  width: 40px; height: 40px;
  background: var(--c-teal-glow);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-teal);
  margin-bottom: 14px;
  transition: var(--tr);
}

.Corpo1-new-ind-card:hover .Corpo1-new-ind-icon {
  background: var(--c-teal);
  color: var(--c-dark);
}

.Corpo1-new-ind-body h3 {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-white);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.Corpo1-new-ind-body p {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
  margin-bottom: 16px;
}

.Corpo1-new-ind-rate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--c-teal);
}

/* ── SKILLS / CURRICULUM ──────────────────────────────────────── */
.Corpo1-new-skills {
  background: var(--c-white);
  padding: 120px 0;
}

.Corpo1-new-skills-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
}

.Corpo1-new-skills-intro {
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-text-mid);
  margin-bottom: 36px;
}

.Corpo1-new-skill-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.Corpo1-new-skill-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--c-light);
  transition: var(--tr);
}

.Corpo1-new-skill-item:first-child { border-top: 1px solid var(--c-light); }
.Corpo1-new-skill-item:hover { padding-left: 10px; }

.Corpo1-new-skill-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.Corpo1-new-skill-icon {
  width: 36px; height: 36px;
  background: var(--c-teal-pale);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-teal);
  flex-shrink: 0;
  transition: var(--tr);
}

.Corpo1-new-skill-item:hover .Corpo1-new-skill-icon {
  background: var(--c-teal);
  color: var(--c-dark);
}

.Corpo1-new-skill-header strong {
  font-family: var(--ff-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--c-dark);
  flex: 1;
}

.Corpo1-new-skill-hrs {
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--c-teal);
  background: var(--c-teal-pale);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}

.Corpo1-new-skill-item p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-text-mid);
  margin-bottom: 14px;
}

.Corpo1-new-skill-bar {
  height: 4px;
  background: var(--c-light);
  border-radius: 2px;
  overflow: hidden;
}

.Corpo1-new-skill-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-teal), var(--c-sky));
  border-radius: 2px;
  width: var(--w);
  animation: Corpo1NewBarFill 1.2s var(--ease) both;
}

@keyframes Corpo1NewBarFill {
  from { width: 0%; }
  to   { width: var(--w); }
}

/* ── SALARY TABLE ─────────────────────────────────────────────── */
.Corpo1-new-salary {
  background: var(--c-off-white);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.Corpo1-new-salary::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--c-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.2;
}

.Corpo1-new-salary-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 52px;
  position: relative;
  z-index: 2;
}

.Corpo1-new-salary-sub {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--c-text-mid);
  margin-top: 8px;
}

.Corpo1-new-salary-table-wrap {
  position: relative;
  z-index: 2;
}

.Corpo1-new-salary-table {
  background: var(--c-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.Corpo1-new-st-header {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1.2fr 1.2fr 1.4fr;
  gap: 0;
  padding: 14px 24px;
  background: var(--c-dark);
  font-family: var(--ff-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.Corpo1-new-st-row {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1.2fr 1.2fr 1.4fr;
  gap: 0;
  padding: 18px 24px;
  border-bottom: 1px solid var(--c-light);
  align-items: center;
  transition: var(--tr);
}

.Corpo1-new-st-row:last-child { border-bottom: none; }

.Corpo1-new-st-row:hover { background: var(--c-off-white); }

.Corpo1-new-st-row--highlight {
  background: linear-gradient(90deg, rgba(0,180,216,0.04), transparent);
  border-left: 3px solid var(--c-teal);
}

.Corpo1-new-st-row--highlight:hover { background: linear-gradient(90deg, rgba(0,180,216,0.08), transparent); }

.Corpo1-new-st-role {
  display: flex;
  align-items: center;
  gap: 10px;
}

.Corpo1-new-st-role span {
  font-family: var(--ff-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-dark);
}

.Corpo1-new-st-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-border);
  flex-shrink: 0;
}

.Corpo1-new-st-dot--teal { background: var(--c-teal); }

.Corpo1-new-st-badge {
  font-family: var(--ff-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-teal);
  border: 1px solid var(--c-teal);
  border-radius: var(--radius-xs);
  padding: 2px 8px;
  background: var(--c-teal-pale);
}

.Corpo1-new-st-rate {
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--c-teal);
}

.Corpo1-new-st-annual {
  font-family: var(--ff-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-dark);
}

.Corpo1-new-st-loc {
  font-family: var(--ff-display);
  font-size: 11.5px;
  color: var(--c-text-light);
}

.Corpo1-new-st-growth {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.Corpo1-new-growth-bar {
  height: 5px;
  background: var(--c-light);
  border-radius: 3px;
  overflow: hidden;
}

.Corpo1-new-growth-bar div {
  height: 100%;
  background: linear-gradient(90deg, var(--c-teal), var(--c-sky));
  border-radius: 3px;
}

.Corpo1-new-st-row:not(.Corpo1-new-st-row--highlight) .Corpo1-new-growth-bar div {
  background: var(--c-border);
}

.Corpo1-new-st-growth span {
  font-family: var(--ff-display);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--c-text-light);
}

.Corpo1-new-salary-note {
  font-size: 12px;
  color: var(--c-text-light);
  font-style: italic;
  margin-top: 16px;
  text-align: right;
}

/* ── HOW TO START ─────────────────────────────────────────────── */
.Corpo1-new-start {
  background: var(--c-white);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.Corpo1-new-start-bg {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 42%;
  background: var(--c-off-white);
  clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.Corpo1-new-start-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 2;
}

.Corpo1-new-start-left img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
  display: block;
  box-shadow: var(--shadow-md);
  margin-bottom: 28px;
  filter: saturate(0.85) brightness(0.95);
}

.Corpo1-new-start-quote {
  background: #087c8b;
  border-radius: var(--radius-md);
  padding: 28px;
  position: relative;
}

.Corpo1-new-start-quote p {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255,255,255,0.75);
  font-style: italic;
  margin-bottom: 18px;
}

.Corpo1-new-start-quote-author strong {
  display: block;
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-white);
}

.Corpo1-new-start-quote-author span {
  display: block;
  font-family: var(--ff-display);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 3px;
}

.Corpo1-new-start-intro {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--c-text-mid);
  margin-bottom: 40px;
}

.Corpo1-new-start-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.Corpo1-new-ss {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--c-light);
  transition: var(--tr);
}

.Corpo1-new-ss:first-child { border-top: 1px solid var(--c-light); }
.Corpo1-new-ss:hover { padding-left: 8px; }

.Corpo1-new-ss-num {
  width: 36px; height: 36px;
  background: var(--c-teal);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--c-dark);
  flex-shrink: 0;
  margin-top: 2px;
}

.Corpo1-new-ss-body strong {
  display: block;
  font-family: var(--ff-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--c-dark);
  margin-bottom: 6px;
}

.Corpo1-new-ss-body p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--c-text-mid);
  margin: 0;
}

/* ── CTA ─────────────────────────────────────────────────────── */
.Corpo1-new-cta {
  background: #233652;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.Corpo1-new-cta-accent-left {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: linear-gradient(to bottom, transparent, var(--c-teal), transparent);
}

.Corpo1-new-cta-accent-right {
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,216,0.08), transparent 65%);
  pointer-events: none;
}

.Corpo1-new-cta-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.Corpo1-new-cta-title {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  font-weight: 800;
  color: var(--c-white);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
}

.Corpo1-new-cta-desc {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 36px;
}

.Corpo1-new-cta-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.Corpo1-new-cta-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.Corpo1-new-cta-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff-display);
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.Corpo1-new-cta-trust svg { color: var(--c-teal); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .Corpo1-new-hero-layout    { grid-template-columns: 1fr; }
  .Corpo1-new-hero-right     { display: none; }
  .Corpo1-new-what-layout    { grid-template-columns: 1fr; }
  .Corpo1-new-what-img       { display: none; }
  .Corpo1-new-what-diagonal  { display: none; }
  .Corpo1-new-roles-grid     { grid-template-columns: repeat(2, 1fr); }
  .Corpo1-new-ind-grid       { grid-template-columns: repeat(2, 1fr); }
  .Corpo1-new-skills-layout  { grid-template-columns: 1fr; gap: 56px; }
  .Corpo1-new-start-layout   { grid-template-columns: 1fr; }
  .Corpo1-new-start-bg       { display: none; }
  .Corpo1-new-cta-inner      { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  .Corpo1-new-container { padding: 0 24px; }
  .Corpo1-new-roles-grid { grid-template-columns: 1fr; }
  .Corpo1-new-ind-grid { grid-template-columns: 1fr; }
  .Corpo1-new-st-header,
  .Corpo1-new-st-row {
    grid-template-columns: 1.8fr 1fr 1.2fr;
  }
  .Corpo1-new-st-loc,
  .Corpo1-new-st-growth { display: none; }
  .Corpo1-new-hero-metrics { flex-wrap: wrap; gap: 20px; }
  .Corpo1-new-metric-line { display: none; }
  .Corpo1-new-cta-btns { flex-direction: column; }
  .Corpo1-new-btn-cta,
  .Corpo1-new-btn-ghost-cta { justify-content: center; }
}

@media (max-width: 500px) {
  .Corpo1-new-hero-title { font-size: clamp(2.8rem, 12vw, 4rem); }
  .Corpo1-new-st-header,
  .Corpo1-new-st-row { grid-template-columns: 1fr 1fr; }
  .Corpo1-new-st-annual { display: none; }
  .Corpo1-new-hero-actions { flex-direction: column; }
  .Corpo1-new-btn-primary,
  .Corpo1-new-btn-outline { width: 100%; justify-content: center; }
}

/* ==========================================================
   pri1-new.css  |  TEFL Private Tutoring Page
   All selectors scoped under .new-asia1-css to avoid conflicts
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&family=Playfair+Display:ital,wght@0,700;1,600&display=swap');

/* ---------- TOKENS ---------- */
.new-asia1-css {
  --pri1-gold: #C9A84C;
  --pri1-gold-light: #E8C97A;
  --pri1-gold-pale: #FDF6E8;
  --pri1-ink: #1A1510;
  --pri1-ink-mid: #3D2F1A;
  --pri1-ink-soft: #6B5744;
  --pri1-cream: #FDFAF4;
  --pri1-warm-white: #F9F5EE;
  --pri1-sage: #8BA888;
  --pri1-terracotta: #C4714A;
  --pri1-sky: #5B8FA8;
  --pri1-border: rgba(201, 168, 76, 0.25);
  --pri1-shadow: 0 20px 60px rgba(26,21,16,0.12);
  --pri1-ff-serif: 'Cormorant Garamond', Georgia, serif;
  --pri1-ff-display: 'Playfair Display', Georgia, serif;
  --pri1-ff-body: 'DM Sans', sans-serif;
  --pri1-radius: 4px;
  --pri1-transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.new-asia1-css * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.new-asia1-css,
.new-asia1-css p,
.new-asia1-css span,
.new-asia1-css li {
  font-family: var(--pri1-ff-body);
  color: var(--pri1-ink);
  line-height: 1.7;
}

/* ---------- TYPOGRAPHY HELPERS ---------- */
.new-asia1-css .pri1-eyebrow {
  font-family: var(--pri1-ff-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pri1-gold);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.new-asia1-css .pri1-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--pri1-gold);
}
.new-asia1-css .pri1-eyebrow-center {
  justify-content: center;
}
.new-asia1-css .pri1-eyebrow-center::before { display: none; }
.new-asia1-css .pri1-eyebrow-light { color: var(--pri1-gold-light); }
.new-asia1-css .pri1-eyebrow-light::before { background: var(--pri1-gold-light); }

.new-asia1-css .pri1-section-title {
  font-family: var(--pri1-ff-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--pri1-ink);
  line-height: 1.2;
  margin-bottom: 20px;
}
.new-asia1-css .pri1-section-title em {
  font-style: italic;
  color: var(--pri1-terracotta);
}
.new-asia1-css .pri1-title-center { text-align: center; }
.new-asia1-css .pri1-title-light { color: #fff; }

.new-asia1-css .pri1-body-text {
  font-size: 1.05rem;
  color: var(--pri1-ink-soft);
  margin-bottom: 18px;
  max-width: 580px;
}

/* ---------- BUTTONS ---------- */
.new-asia1-css .pri1-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  background: var(--pri1-gold);
  color: var(--pri1-ink);
  font-family: var(--pri1-ff-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: var(--pri1-radius);
  transition: background var(--pri1-transition), transform var(--pri1-transition), box-shadow var(--pri1-transition);
  box-shadow: 0 4px 20px rgba(201,168,76,0.35);
}
.new-asia1-css .pri1-btn-primary:hover {
  background: var(--pri1-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(201,168,76,0.45);
}

/* ================================================
   HERO
   ================================================ */
.new-asia1-css.pri1-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.new-asia1-css .pri1-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  animation: pri1-hero-zoom 18s ease-in-out infinite alternate;
}
@keyframes pri1-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

.new-asia1-css .pri1-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(26,21,16,0.82) 0%,
    rgba(26,21,16,0.55) 55%,
    rgba(26,21,16,0.15) 100%
  );
  z-index: 1;
}

.new-asia1-css .pri1-hero-bg-pattern {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A84C' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.8;
}

.new-asia1-css .pri1-hero-content {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 60px 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.new-asia1-css .pri1-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,168,76,0.18);
  border: 1px solid rgba(201,168,76,0.45);
  color: var(--pri1-gold-light);
  font-size: 0.7rem;
  font-family: var(--pri1-ff-body);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 30px;
  backdrop-filter: blur(6px);
  animation: pri1-fade-up 0.8s ease both;
}

.new-asia1-css .pri1-hero-title {
  font-family: var(--pri1-ff-display);
  font-size: clamp(2.8rem, 6.5vw, 5.2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 28px;
  animation: pri1-fade-up 0.9s 0.15s ease both;
}
.new-asia1-css .pri1-hero-title em {
  font-style: italic;
  color: var(--pri1-gold-light);
}

.new-asia1-css .pri1-hero-sub {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.82);
  max-width: 520px;
  margin-bottom: 42px;
  line-height: 1.75;
  animation: pri1-fade-up 0.9s 0.28s ease both;
}
.new-asia1-css .pri1-hero-sub strong { color: var(--pri1-gold-light); }

.new-asia1-css .pri1-hero-content .pri1-btn-primary {
  animation: pri1-fade-up 0.9s 0.42s ease both;
}

.new-asia1-css .pri1-scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 60px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.5);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--pri1-ff-body);
}
.new-asia1-css .pri1-scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
  animation: pri1-scroll-pulse 2s infinite;
}
@keyframes pri1-scroll-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes pri1-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================
   INTRO STRIP
   ================================================ */
.new-asia1-css.pri1-intro-strip {
  background: var(--pri1-ink);
  padding: 0;
}
.new-asia1-css .pri1-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}
.new-asia1-css .pri1-strip-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 38px 20px;
  text-align: center;
  transition: background var(--pri1-transition);
}
.new-asia1-css .pri1-strip-stat:hover { background: rgba(201,168,76,0.08); }
.new-asia1-css .pri1-stat-num {
  font-family: var(--pri1-ff-display);
  font-size: 2.2rem;
  font-style: italic;
  color: var(--pri1-gold);
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}
.new-asia1-css .pri1-stat-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.new-asia1-css .pri1-strip-divider {
  width: 1px;
  background: rgba(255,255,255,0.1);
  margin: 20px 0;
}

/* ================================================
   WHY PRIVATE TUTORING
   ================================================ */
.new-asia1-css.pri1-why {
  background: var(--pri1-cream);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
.new-asia1-css.pri1-why::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(201,168,76,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.new-asia1-css .pri1-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.new-asia1-css .pri1-why-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
}

.new-asia1-css .pri1-why-feat {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.new-asia1-css .pri1-feat-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--pri1-gold-pale);
  border: 1px solid var(--pri1-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pri1-gold);
  transition: background var(--pri1-transition), color var(--pri1-transition);
}
.new-asia1-css .pri1-why-feat:hover .pri1-feat-icon {
  background: var(--pri1-gold);
  color: #fff;
}
.new-asia1-css .pri1-why-feat strong {
  display: block;
  font-family: var(--pri1-ff-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--pri1-ink);
  margin-bottom: 4px;
}
.new-asia1-css .pri1-why-feat p {
  font-size: 0.85rem;
  color: var(--pri1-ink-soft);
  line-height: 1.6;
}

/* IMG STACK */
.new-asia1-css .pri1-img-stack {
  position: relative;
}
.new-asia1-css .pri1-stack-main {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: var(--pri1-shadow);
  display: block;
}
.new-asia1-css .pri1-stack-accent {
  position: absolute;
  bottom: -40px;
  left: -50px;
  width: 200px;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
  border: 6px solid var(--pri1-cream);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  animation: pri1-float 5s ease-in-out infinite;
}
@keyframes pri1-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.new-asia1-css .pri1-stack-badge {
  position: absolute;
  top: 30px;
  right: -24px;
  background: var(--pri1-gold);
  color: var(--pri1-ink);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--pri1-ff-body);
  padding: 10px 18px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(201,168,76,0.4);
}

/* ================================================
   MODES
   ================================================ */
.new-asia1-css.pri1-modes {
  background: var(--pri1-warm-white);
  padding: 110px 0;
  position: relative;
}
.new-asia1-css.pri1-modes::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C9A84C' fill-opacity='0.04'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0L80 12v2L54 40h-2zm4 0L80 16v2L58 40h-2zm4 0L80 20v2L62 40h-2zm4 0L80 24v2L66 40h-2zm4 0L80 28v2L70 40h-2zm4 0L80 32v2L74 40h-2zm4 0L80 36v2L78 40h-2z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.new-asia1-css .pri1-modes-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  position: relative;
  z-index: 1;
}

.new-asia1-css .pri1-modes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 60px;
}

.new-asia1-css .pri1-mode-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(26,21,16,0.07);
  transition: transform var(--pri1-transition), box-shadow var(--pri1-transition);
  border: 1px solid rgba(201,168,76,0.12);
}
.new-asia1-css .pri1-mode-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(26,21,16,0.15);
}

.new-asia1-css .pri1-mode-img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.new-asia1-css .pri1-mode-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.new-asia1-css .pri1-mode-card:hover .pri1-mode-img-wrap img {
  transform: scale(1.06);
}
.new-asia1-css .pri1-mode-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,21,16,0.35), transparent 60%);
}

.new-asia1-css .pri1-mode-body {
  padding: 28px;
}
.new-asia1-css .pri1-mode-icon {
  width: 48px;
  height: 48px;
  background: var(--pri1-gold-pale);
  border: 1.5px solid var(--pri1-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pri1-gold);
  margin-bottom: 16px;
  transition: background var(--pri1-transition), color var(--pri1-transition);
}
.new-asia1-css .pri1-mode-card:hover .pri1-mode-icon {
  background: var(--pri1-gold);
  color: #fff;
}

.new-asia1-css .pri1-mode-body h3 {
  font-family: var(--pri1-ff-serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--pri1-ink);
  margin-bottom: 12px;
}
.new-asia1-css .pri1-mode-body p {
  font-size: 0.9rem;
  color: var(--pri1-ink-soft);
  margin-bottom: 20px;
}

.new-asia1-css .pri1-mode-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.new-asia1-css .pri1-mode-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--pri1-ink-mid);
}
.new-asia1-css .pri1-mode-list li svg {
  color: var(--pri1-sage);
  min-width: 14px;
}

/* ================================================
   STUDENTS
   ================================================ */
.new-asia1-css.pri1-students {
  background: #342414;
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
.new-asia1-css.pri1-students::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='%23C9A84C' stroke-width='0.5' fill='none' stroke-opacity='0.08'/%3E%3Ccircle cx='50' cy='50' r='25' stroke='%23C9A84C' stroke-width='0.5' fill='none' stroke-opacity='0.05'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.new-asia1-css .pri1-students-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  position: relative;
  z-index: 1;
}
.new-asia1-css .pri1-students-header {
  text-align: center;
  margin-bottom: 60px;
}
.new-asia1-css .pri1-students-lead {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.65);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.75;
}

.new-asia1-css .pri1-students-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.new-asia1-css .pri1-student-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: 8px;
  padding: 32px 28px;
  transition: background var(--pri1-transition), border-color var(--pri1-transition), transform var(--pri1-transition);
  position: relative;
  overflow: hidden;
}
.new-asia1-css .pri1-student-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--pri1-gold);
  transition: height 0.4s ease;
  border-radius: 4px;
}
.new-asia1-css .pri1-student-card:hover {
  background: rgba(201,168,76,0.07);
  border-color: rgba(201,168,76,0.35);
  transform: translateY(-5px);
}
.new-asia1-css .pri1-student-card:hover::after { height: 100%; }

.new-asia1-css .pri1-sc-icon {
  color: var(--pri1-gold);
  margin-bottom: 16px;
  opacity: 0.85;
}
.new-asia1-css .pri1-student-card h4 {
  font-family: var(--pri1-ff-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
}
.new-asia1-css .pri1-student-card p {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  margin-bottom: 16px;
}
.new-asia1-css .pri1-sc-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pri1-gold);
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.25);
  padding: 4px 12px;
  border-radius: 100px;
}

/* ================================================
   PLATFORMS
   ================================================ */
.new-asia1-css.pri1-platforms {
  background: var(--pri1-cream);
  padding: 110px 0;
}
.new-asia1-css .pri1-platforms-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

.new-asia1-css .pri1-plat-visual { position: relative; }
.new-asia1-css .pri1-plat-img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--pri1-shadow);
  display: block;
}
.new-asia1-css .pri1-plat-card-float {
  position: absolute;
  bottom: 40px;
  right: -36px;
  background: #fff;
  border-radius: 8px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 40px rgba(26,21,16,0.15);
  border: 1px solid var(--pri1-border);
  max-width: 240px;
  animation: pri1-float 6s ease-in-out infinite;
}
.new-asia1-css .pri1-plat-card-float svg { color: var(--pri1-sage); min-width: 22px; }
.new-asia1-css .pri1-plat-card-float strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--pri1-ink);
  margin-bottom: 2px;
}
.new-asia1-css .pri1-plat-card-float span { font-size: 0.76rem; color: var(--pri1-ink-soft); }

.new-asia1-css .pri1-platform-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 36px;
}
.new-asia1-css .pri1-plat-item {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid var(--pri1-border);
  transition: padding-left var(--pri1-transition);
  cursor: default;
}
.new-asia1-css .pri1-plat-item:first-child { border-top: 1px solid var(--pri1-border); }
.new-asia1-css .pri1-plat-item:hover { padding-left: 12px; }
.new-asia1-css .pri1-plat-num {
  font-family: var(--pri1-ff-display);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--pri1-gold);
  opacity: 0.5;
  line-height: 1;
  min-width: 36px;
}
.new-asia1-css .pri1-plat-item:hover .pri1-plat-num { opacity: 1; }
.new-asia1-css .pri1-plat-info strong {
  display: block;
  font-family: var(--pri1-ff-body);
  font-weight: 500;
  color: var(--pri1-ink);
  margin-bottom: 4px;
  font-size: 1rem;
}
.new-asia1-css .pri1-plat-info p { font-size: 0.88rem; color: var(--pri1-ink-soft); }

/* ================================================
   INCOME
   ================================================ */
.new-asia1-css.pri1-income {
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
.new-asia1-css .pri1-income-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, #FDF6E8 0%, #F5EDD6 40%, #EDE0C4 100%);
  background-image:
    linear-gradient(135deg, #FDF6E8 0%, #F5EDD6 40%, #EDE0C4 100%),
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C9A84C' fill-opacity='0.07'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

.new-asia1-css .pri1-income-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 60px;
  position: relative;
  z-index: 1;
  text-align: center;
}
.new-asia1-css .pri1-income-lead {
  font-size: 1.05rem;
  color: var(--pri1-ink-soft);
  max-width: 600px;
  margin: 0 auto 56px;
}

.new-asia1-css .pri1-income-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.new-asia1-css .pri1-income-tier {
  background: #fff;
  border-radius: 8px;
  padding: 36px 28px;
  box-shadow: 0 4px 24px rgba(26,21,16,0.08);
  text-align: left;
  transition: transform var(--pri1-transition), box-shadow var(--pri1-transition);
  border: 1px solid rgba(201,168,76,0.12);
  position: relative;
  overflow: hidden;
}
.new-asia1-css .pri1-income-tier:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(26,21,16,0.14);
}
.new-asia1-css .pri1-tier-expert {
  border-color: rgba(201,168,76,0.4);
}
.new-asia1-css .pri1-tier-expert::before {
  content: 'Most Lucrative';
  position: absolute;
  top: 14px;
  right: -28px;
  background: var(--pri1-gold);
  color: var(--pri1-ink);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 36px;
  transform: rotate(35deg);
}

.new-asia1-css .pri1-tier-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pri1-ink-soft);
  margin-bottom: 8px;
}
.new-asia1-css .pri1-tier-range {
  font-family: var(--pri1-ff-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--pri1-ink);
  line-height: 1;
  margin-bottom: 14px;
}
.new-asia1-css .pri1-tier-range span {
  font-size: 1rem;
  color: var(--pri1-ink-soft);
  font-family: var(--pri1-ff-body);
  font-weight: 300;
}
.new-asia1-css .pri1-income-tier p {
  font-size: 0.85rem;
  color: var(--pri1-ink-soft);
  margin-bottom: 20px;
  line-height: 1.65;
}
.new-asia1-css .pri1-tier-bar {
  height: 4px;
  background: rgba(201,168,76,0.15);
  border-radius: 100px;
  overflow: hidden;
}
.new-asia1-css .pri1-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--pri1-gold), var(--pri1-gold-light));
  border-radius: 100px;
  width: 0;
  transition: width 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.new-asia1-css .pri1-income-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--pri1-ink-soft);
  background: rgba(201,168,76,0.1);
  border: 1px solid var(--pri1-border);
  padding: 14px 18px;
  border-radius: 6px;
  text-align: left;
  line-height: 1.6;
}
.new-asia1-css .pri1-income-note svg { min-width: 16px; color: var(--pri1-gold); margin-top: 2px; }

/* ================================================
   STEPS
   ================================================ */
.new-asia1-css.pri1-steps {
  background: var(--pri1-warm-white);
  padding: 110px 0;
}
.new-asia1-css .pri1-steps-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;
}
.new-asia1-css .pri1-steps-header {
  text-align: center;
  margin-bottom: 70px;
}
.new-asia1-css .pri1-steps-lead {
  font-size: 1rem;
  color: var(--pri1-ink-soft);
  max-width: 520px;
  margin: 0 auto;
}

.new-asia1-css .pri1-steps-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.new-asia1-css .pri1-step {
  display: flex;
  gap: 0;
  position: relative;
}

.new-asia1-css .pri1-step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 60px;
  padding-right: 40px;
}
.new-asia1-css .pri1-step-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pri1-gold);
  color: var(--pri1-ink);
  font-family: var(--pri1-ff-display);
  font-size: 1.2rem;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(201,168,76,0.4);
  flex-shrink: 0;
}
.new-asia1-css .pri1-step-line {
  flex: 1;
  width: 2px;
  background: linear-gradient(to bottom, var(--pri1-gold), transparent);
  opacity: 0.35;
  margin: 8px 0;
  min-height: 40px;
}

.new-asia1-css .pri1-step-content {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 30px;
  align-items: center;
  padding: 0 0 50px 0;
  flex: 1;
}
.new-asia1-css .pri1-step:last-child .pri1-step-content { padding-bottom: 0; }

.new-asia1-css .pri1-step-content img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transition: transform var(--pri1-transition);
}
.new-asia1-css .pri1-step:hover .pri1-step-content img { transform: scale(1.02); }

.new-asia1-css .pri1-step-text h4 {
  font-family: var(--pri1-ff-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--pri1-ink);
  margin-bottom: 10px;
}
.new-asia1-css .pri1-step-text p {
  font-size: 0.92rem;
  color: var(--pri1-ink-soft);
  max-width: 520px;
  line-height: 1.7;
}

/* ================================================
   QUOTE SECTION
   ================================================ */
.new-asia1-css.pri1-quote-section {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.new-asia1-css .pri1-quote-bg {
  position: absolute;
  inset: 0;
}
.new-asia1-css .pri1-quote-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.new-asia1-css .pri1-quote-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,21,16,0.88), rgba(61,47,26,0.75));
}

.new-asia1-css .pri1-quote-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  padding: 80px 60px;
  text-align: center;
}
.new-asia1-css .pri1-quote-mark {
  color: var(--pri1-gold);
  opacity: 0.35;
  margin-bottom: 24px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 48px;
}
.new-asia1-css .pri1-quote-content blockquote {
  font-family: var(--pri1-ff-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-style: italic;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 28px;
}
.new-asia1-css .pri1-quote-content cite {
  font-size: 0.82rem;
  color: var(--pri1-gold-light);
  letter-spacing: 0.05em;
  font-style: normal;
}

/* ================================================
   SKILLS
   ================================================ */
.new-asia1-css.pri1-skills {
  background: var(--pri1-cream);
  padding: 110px 0;
}
.new-asia1-css .pri1-skills-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.new-asia1-css .pri1-skills-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 32px;
}
.new-asia1-css .pri1-skill-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.new-asia1-css .pri1-skill-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--pri1-ink-mid);
  display: flex;
  justify-content: space-between;
}
.new-asia1-css .pri1-skill-bar-wrap {
  height: 5px;
  background: rgba(201,168,76,0.15);
  border-radius: 100px;
  overflow: hidden;
}
.new-asia1-css .pri1-skill-bar {
  height: 100%;
  background: linear-gradient(to right, var(--pri1-terracotta), var(--pri1-gold));
  border-radius: 100px;
  width: 0;
  transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.new-asia1-css.pri1-skills.animated .pri1-skill-bar {
  width: attr(data-width);
}

.new-asia1-css .pri1-skills-note {
  font-size: 0.8rem;
  color: var(--pri1-ink-soft);
  margin-top: 20px;
  padding: 12px 16px;
  background: var(--pri1-gold-pale);
  border-left: 3px solid var(--pri1-gold);
  border-radius: 0 4px 4px 0;
}

.new-asia1-css .pri1-skills-img-wrap {
  position: relative;
}
.new-asia1-css .pri1-skills-img-wrap img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  box-shadow: var(--pri1-shadow);
  display: block;
}
.new-asia1-css .pri1-skills-badge-float {
  position: absolute;
  bottom: -22px;
  left: 30px;
  background: var(--pri1-ink);
  color: #fff;
  font-size: 0.78rem;
  font-family: var(--pri1-ff-body);
  padding: 12px 20px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(26,21,16,0.3);
}
.new-asia1-css .pri1-skills-badge-float svg { color: var(--pri1-sage); }

/* ================================================
   FAQ
   ================================================ */
.new-asia1-css.pri1-faq {
  background: var(--pri1-warm-white);
  padding: 110px 0;
}
.new-asia1-css .pri1-faq-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;
}
.new-asia1-css .pri1-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 60px;
}
.new-asia1-css .pri1-faq-item {
  background: #fff;
  border: 1px solid var(--pri1-border);
  border-radius: 8px;
  padding: 28px;
  transition: border-color var(--pri1-transition), box-shadow var(--pri1-transition), transform var(--pri1-transition);
  cursor: default;
}
.new-asia1-css .pri1-faq-item.pri1-faq-active,
.new-asia1-css .pri1-faq-item:hover {
  border-color: rgba(201,168,76,0.45);
  box-shadow: 0 8px 32px rgba(26,21,16,0.08);
  transform: translateY(-3px);
}
.new-asia1-css .pri1-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--pri1-ff-body);
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--pri1-ink);
  margin-bottom: 12px;
  line-height: 1.4;
}
.new-asia1-css .pri1-faq-q svg { color: var(--pri1-gold); min-width: 18px; margin-top: 1px; }
.new-asia1-css .pri1-faq-item p {
  font-size: 0.88rem;
  color: var(--pri1-ink-soft);
  line-height: 1.7;
  padding-left: 28px;
}

/* ================================================
   CTA
   ================================================ */
.new-asia1-css.pri1-cta {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  background: #423425;
}
.new-asia1-css .pri1-cta-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(201,168,76,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(196,113,74,0.1) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C9A84C' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.new-asia1-css .pri1-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 60px;
  text-align: center;
}
.new-asia1-css .pri1-cta-icon {
  width: 80px;
  height: 80px;
  background: rgba(201,168,76,0.12);
  border: 1.5px solid rgba(201,168,76,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pri1-gold);
  margin: 0 auto 32px;
  animation: pri1-pulse 3s ease-in-out infinite;
}
@keyframes pri1-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.3); }
  50% { box-shadow: 0 0 0 18px rgba(201,168,76,0); }
}

.new-asia1-css .pri1-cta-title {
  font-family: var(--pri1-ff-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 20px;
}
.new-asia1-css .pri1-cta-title em {
  font-style: italic;
  color: var(--pri1-gold-light);
}
.new-asia1-css .pri1-cta-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 50px;
  line-height: 1.75;
}

.new-asia1-css .pri1-cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.new-asia1-css .pri1-btn-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 40px;
  background: var(--pri1-gold);
  color: var(--pri1-ink);
  font-family: var(--pri1-ff-body);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--pri1-radius);
  letter-spacing: 0.03em;
  transition: background var(--pri1-transition), transform var(--pri1-transition), box-shadow var(--pri1-transition);
  box-shadow: 0 6px 28px rgba(201,168,76,0.4);
}
.new-asia1-css .pri1-btn-cta-primary:hover {
  background: var(--pri1-gold-light);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(201,168,76,0.5);
}
.new-asia1-css .pri1-btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-family: var(--pri1-ff-body);
  font-size: 0.95rem;
  font-weight: 400;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: var(--pri1-radius);
  transition: border-color var(--pri1-transition), color var(--pri1-transition), transform var(--pri1-transition);
}
.new-asia1-css .pri1-btn-cta-secondary:hover {
  border-color: rgba(201,168,76,0.6);
  color: var(--pri1-gold-light);
  transform: translateY(-3px);
}

.new-asia1-css .pri1-cta-trust {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.new-asia1-css .pri1-cta-trust span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
}
.new-asia1-css .pri1-cta-trust span svg { color: var(--pri1-gold); opacity: 0.7; }

/* ================================================
   ANIMATE SKILL BARS VIA JS
   ================================================ */
.new-asia1-css .pri1-skill-bar[data-width] {
  width: 0 !important;
}
.new-asia1-css .pri1-skills-animated .pri1-skill-bar {
  width: attr(data-width) !important;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
  .new-asia1-css .pri1-section-inner,
  .new-asia1-css .pri1-platforms-inner,
  .new-asia1-css .pri1-skills-inner {
    grid-template-columns: 1fr;
    gap: 50px;
    padding: 0 40px;
  }
  .new-asia1-css .pri1-modes-grid,
  .new-asia1-css .pri1-students-grid,
  .new-asia1-css .pri1-income-grid {
    grid-template-columns: 1fr;
  }
  .new-asia1-css .pri1-faq-grid { grid-template-columns: 1fr; }
  .new-asia1-css .pri1-stack-accent { display: none; }
  .new-asia1-css .pri1-stack-badge { right: 10px; }
  .new-asia1-css .pri1-plat-card-float { right: 0; }
  .new-asia1-css .pri1-modes-inner,
  .new-asia1-css .pri1-steps-inner,
  .new-asia1-css .pri1-faq-inner,
  .new-asia1-css .pri1-income-inner,
  .new-asia1-css .pri1-students-inner,
  .new-asia1-css .pri1-modes-inner { padding: 0 40px; }
  .new-asia1-css .pri1-hero-content { padding: 120px 40px 100px; }
}

@media (max-width: 680px) {
  .new-asia1-css .pri1-hero-content { padding: 100px 24px 80px; }
  .new-asia1-css .pri1-hero-title { font-size: 2.4rem; }
  .new-asia1-css .pri1-section-inner,
  .new-asia1-css .pri1-platforms-inner,
  .new-asia1-css .pri1-skills-inner,
  .new-asia1-css .pri1-modes-inner,
  .new-asia1-css .pri1-steps-inner,
  .new-asia1-css .pri1-faq-inner,
  .new-asia1-css .pri1-income-inner,
  .new-asia1-css .pri1-students-inner { padding: 0 24px; }
  .new-asia1-css.pri1-why,
  .new-asia1-css.pri1-modes,
  .new-asia1-css.pri1-students,
  .new-asia1-css.pri1-platforms,
  .new-asia1-css.pri1-income,
  .new-asia1-css.pri1-steps,
  .new-asia1-css.pri1-skills,
  .new-asia1-css.pri1-faq,
  .new-asia1-css.pri1-cta { padding: 70px 0; }
  .new-asia1-css .pri1-why-features { grid-template-columns: 1fr; }
  .new-asia1-css .pri1-strip-inner { flex-wrap: wrap; }
  .new-asia1-css .pri1-strip-stat { width: 50%; }
  .new-asia1-css .pri1-strip-divider { display: none; }
  .new-asia1-css .pri1-step-content { grid-template-columns: 1fr; }
  .new-asia1-css .pri1-step-content img { width: 100%; }
  .new-asia1-css .pri1-cta-inner { padding: 0 24px; }
  .new-asia1-css .pri1-quote-content { padding: 60px 30px; }
  .new-asia1-css .pri1-cta-trust { gap: 16px; }
  .new-asia1-css .pri1-scroll-hint { display: none; }
}

/* ==========================================================
   lang-sch.css  |  TEFL Language Schools Career Pathway Page
   All selectors scoped under .ls-scope
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Lora:ital,wght@0,400;0,600;1,400&family=Outfit:wght@300;400;500&display=swap');

/* ---- TOKENS ---- */
.ls-scope {
  --ls-teal:       #1A7A6A;
  --ls-teal-dark:  #0F4F43;
  --ls-teal-mid:   #22A08A;
  --ls-teal-light: #E6F5F2;
  --ls-teal-pale:  #F0FAF8;
  --ls-navy:       #0D1F2D;
  --ls-navy-mid:   #1E3A4F;
  --ls-slate:      #3D5A6B;
  --ls-amber:      #E8A435;
  --ls-amber-pale: #FEF5E4;
  --ls-white:      #FFFFFF;
  --ls-off-white:  #F7FAFA;
  --ls-mist:       #EEF4F3;
  --ls-ink:        #0D1F2D;
  --ls-ink-soft:   #4A6472;
  --ls-border:     rgba(26,122,106,0.18);
  --ls-shadow-sm:  0 4px 16px rgba(13,31,45,0.08);
  --ls-shadow-md:  0 12px 40px rgba(13,31,45,0.12);
  --ls-shadow-lg:  0 24px 64px rgba(13,31,45,0.18);
  --ls-ff-head:    'Syne', sans-serif;
  --ls-ff-serif:   'Lora', Georgia, serif;
  --ls-ff-body:    'Outfit', sans-serif;
  --ls-r:          3px;
  --ls-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ls-trans:      0.32s var(--ls-ease);
}

.ls-scope * { box-sizing: border-box; margin: 0; padding: 0; }

.ls-scope,
.ls-scope p,
.ls-scope li,
.ls-scope span {
  font-family: var(--ls-ff-body);
  color: var(--ls-ink);
  line-height: 1.72;
}

/* ---- SHARED ---- */
.ls-scope .ls-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ls-ff-head);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ls-teal-mid);
  margin-bottom: 16px;
}
.ls-scope .ls-label-light { color: rgba(255,255,255,0.55); }
.ls-scope .ls-label-line {
  display: inline-block;
  width: 36px;
  height: 2px;
  background: var(--ls-teal-mid);
  flex-shrink: 0;
}
.ls-scope .ls-line-light { background: rgba(255,255,255,0.4); }

.ls-scope .ls-section-h2 {
  font-family: var(--ls-ff-head);
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--ls-ink);
  margin-bottom: 22px;
  letter-spacing: -0.02em;
}
.ls-scope .ls-section-h2 em {
  font-style: normal;
  font-family: var(--ls-ff-serif);
  font-weight: 400;
  color: var(--ls-teal);
}
.ls-scope .ls-h2-light { color: #009688; }
.ls-scope .ls-h2-light em { color: #7FD4C3; }

.ls-scope .ls-body {
  font-size: 1rem;
  color: var(--ls-ink-soft);
  margin-bottom: 18px;
  max-width: 600px;
  line-height: 1.78;
}

/* ---- FADE IN ANIMATION ---- */
.ls-scope .ls-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s var(--ls-ease), transform 0.65s var(--ls-ease);
}
.ls-scope .ls-fade-in.ls-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================
   HERO
   ========================================================== */
.ls-scope.ls-hero {
  position: relative;
  min-height: 100vh;
  background: var(--ls-navy);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ls-scope .ls-hero-media {
  position: absolute;
  inset: 0;
}
.ls-scope .ls-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  animation: ls-hero-pan 20s ease-in-out infinite alternate;
}
@keyframes ls-hero-pan {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.07) translateX(-2%); }
}
.ls-scope .ls-hero-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
  pointer-events: none;
  opacity: 0.6;
}
.ls-scope .ls-hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(13,31,45,0.92) 0%, rgba(13,31,45,0.65) 55%, rgba(13,31,45,0.25) 100%),
    linear-gradient(to top, rgba(13,31,45,0.8) 0%, transparent 50%);
}

.ls-scope .ls-hero-layout {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px 90px;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 80px;
  align-items: flex-end;
  padding-top: 160px;
}

.ls-scope .ls-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ls-ff-head);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ls-teal-mid);
  background: rgba(26,122,106,0.15);
  border: 1px solid rgba(26,122,106,0.35);
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 26px;
  backdrop-filter: blur(6px);
  animation: ls-fade-up 0.8s ease both;
}

.ls-scope .ls-hero-h1 {
  font-family: var(--ls-ff-head);
  font-size: clamp(3.2rem, 7vw, 6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.0;
  letter-spacing: -0.03em;
  animation: ls-fade-up 0.9s 0.15s ease both;
}
.ls-scope .ls-hero-h1 em {
  display: block;
  font-style: italic;
  font-family: var(--ls-ff-serif);
  font-weight: 400;
  color: #7FD4C3;
  letter-spacing: -0.01em;
}

.ls-scope .ls-hero-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 6px;
}
.ls-scope .ls-hero-deck {
  font-family: var(--ls-ff-body);
  font-size: 1.08rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.78;
  margin-bottom: 32px;
  max-width: 480px;
  animation: ls-fade-up 0.9s 0.25s ease both;
}
.ls-scope .ls-hero-deck strong { color: #7FD4C3; }

.ls-scope .ls-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ls-teal);
  color: #fff;
  font-family: var(--ls-ff-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 100px;
  margin-bottom: 44px;
  transition: background var(--ls-trans), transform var(--ls-trans), box-shadow var(--ls-trans);
  box-shadow: 0 6px 24px rgba(26,122,106,0.4);
  width: fit-content;
  animation: ls-fade-up 0.9s 0.35s ease both;
}
.ls-scope .ls-cta-pill:hover {
  background: var(--ls-teal-mid);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 32px rgba(26,122,106,0.5);
}

.ls-scope .ls-hero-stats {
  display: flex;
  align-items: center;
  gap: 28px;
  animation: ls-fade-up 0.9s 0.45s ease both;
}
.ls-scope .ls-hstat {
  display: flex;
  flex-direction: column;
}
.ls-scope .ls-hstat strong {
  font-family: var(--ls-ff-head);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 3px;
}
.ls-scope .ls-hstat span {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ls-scope .ls-hstat-div {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.15);
}

.ls-scope .ls-hero-scroll {
  position: absolute;
  bottom: 0;
  right: 70px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 40px;
}
.ls-scope .ls-hero-scroll span {
  font-family: var(--ls-ff-head);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  writing-mode: vertical-rl;
}
.ls-scope .ls-scroll-track {
  width: 2px;
  height: 60px;
  background: rgba(255,255,255,0.12);
  border-radius: 100px;
  overflow: hidden;
}
.ls-scope .ls-scroll-thumb {
  width: 100%;
  height: 40%;
  background: var(--ls-teal-mid);
  border-radius: 100px;
  animation: ls-scroll-thumb 2.2s ease-in-out infinite;
}
@keyframes ls-scroll-thumb {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(350%); opacity: 0; }
}

@keyframes ls-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   WHAT IS A LANGUAGE SCHOOL
   ========================================================== */
.ls-scope.ls-what {
  background: var(--ls-off-white);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.ls-scope.ls-what::after {
  content: '';
  position: absolute;
  right: -80px;
  top: 60px;
  width: 300px;
  height: 300px;
  border: 1.5px solid var(--ls-border);
  border-radius: 50%;
  pointer-events: none;
}
.ls-scope.ls-what::before {
  content: '';
  position: absolute;
  right: -20px;
  top: 120px;
  width: 180px;
  height: 180px;
  border: 1.5px solid var(--ls-border);
  border-radius: 50%;
  pointer-events: none;
}

.ls-scope .ls-what-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

.ls-scope .ls-what-visual { position: relative; }

.ls-scope .ls-what-img-wrap { position: relative; }
.ls-scope .ls-what-main-img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  box-shadow: var(--ls-shadow-lg);
}

.ls-scope .ls-what-accent-block {
  position: absolute;
  bottom: -30px;
  right: -40px;
  background: var(--ls-teal);
  color: #fff;
  padding: 28px 28px 24px;
  border-radius: 6px;
  width: 180px;
  box-shadow: 0 12px 36px rgba(26,122,106,0.35);
}
.ls-scope .ls-accent-number {
  font-family: var(--ls-ff-head);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  margin-bottom: 8px;
}
.ls-scope .ls-accent-number span {
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.7;
  color: #fff;
}
.ls-scope .ls-accent-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}

.ls-scope .ls-what-floating-img {
  position: absolute;
  top: 40px;
  left: -50px;
  width: 160px;
  height: 130px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--ls-shadow-md);
  border: 4px solid var(--ls-off-white);
  animation: ls-float 7s ease-in-out infinite;
}
.ls-scope .ls-what-floating-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes ls-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ==========================================================
   ADVANTAGES
   ========================================================== */
.ls-scope.ls-advantages {
  background: #203f57;
  padding: 120px 0;
  position: relative;
}
.ls-scope .ls-advantages-bg {
  
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
}
.ls-scope .ls-diag-top {
  position: absolute;
  top: -79px;
  left: 0;
  width: 100%;
  height: 80px;
  display: block;
}
.ls-scope .ls-diag-bottom {
  position: absolute;
  bottom: -79px;
  left: 0;
  width: 100%;
  height: 80px;
  display: block;
}
.ls-scope.ls-advantages::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 80% 20%, rgba(26,122,106,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(26,122,106,0.1) 0%, transparent 40%);
  pointer-events: none;
}

.ls-scope .ls-advantages-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px;
  position: relative;
  z-index: 1;
}
.ls-scope .ls-adv-header {
  margin-bottom: 60px;
}
.ls-scope .ls-adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ls-scope .ls-adv-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 36px 30px;
  transition: background var(--ls-trans), border-color var(--ls-trans), transform var(--ls-trans);
  position: relative;
  overflow: hidden;
}
.ls-scope .ls-adv-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--ls-teal), var(--ls-teal-mid));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ls-ease);
}
.ls-scope .ls-adv-card:hover {
  background: rgba(26,122,106,0.1);
  border-color: rgba(26,122,106,0.3);
  transform: translateY(-5px);
}
.ls-scope .ls-adv-card:hover::after { transform: scaleX(1); }

.ls-scope .ls-adv-icon {
  width: 50px;
  height: 50px;
  background: rgba(26,122,106,0.2);
  border: 1px solid rgba(26,122,106,0.35);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7FD4C3;
  margin-bottom: 20px;
  transition: background var(--ls-trans), color var(--ls-trans);
}
.ls-scope .ls-adv-card:hover .ls-adv-icon {
  background: var(--ls-teal);
  color: #fff;
}
.ls-scope .ls-adv-card h3 {
  font-family: var(--ls-ff-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.ls-scope .ls-adv-card p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
}

/* ==========================================================
   TYPES
   ========================================================== */
.ls-scope.ls-types {
  background: var(--ls-white);
  padding: 120px 0 100px;
}
.ls-scope .ls-types-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px;
}
.ls-scope .ls-types-header {
  max-width: 700px;
  margin-bottom: 70px;
}
.ls-scope .ls-types-intro {
  font-size: 1rem;
  color: var(--ls-ink-soft);
  line-height: 1.75;
}

.ls-scope .ls-types-showcase {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ls-scope .ls-type-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 420px;
  overflow: hidden;
  border-bottom: 1px solid var(--ls-mist);
}
.ls-scope .ls-type-feature:first-child { border-top: 1px solid var(--ls-mist); }
.ls-scope .ls-type-reverse { direction: rtl; }
.ls-scope .ls-type-reverse > * { direction: ltr; }

.ls-scope .ls-type-img {
  position: relative;
  overflow: hidden;
}
.ls-scope .ls-type-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ls-ease);
  display: block;
}
.ls-scope .ls-type-feature:hover .ls-type-img img { transform: scale(1.05); }
.ls-scope .ls-type-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, rgba(13,31,45,0.2));
}
.ls-scope .ls-type-tag {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--ls-amber);
  color: var(--ls-ink);
  font-family: var(--ls-ff-head);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
}

.ls-scope .ls-type-body {
  padding: 52px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ls-white);
  transition: background var(--ls-trans);
}
.ls-scope .ls-type-feature:hover .ls-type-body { background: var(--ls-teal-pale); }

.ls-scope .ls-type-num {
  font-family: var(--ls-ff-head);
  font-size: 4rem;
  font-weight: 800;
  color: var(--ls-teal-light);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.04em;
  transition: color var(--ls-trans);
}
.ls-scope .ls-type-feature:hover .ls-type-num { color: rgba(26,122,106,0.25); }
.ls-scope .ls-type-body h3 {
  font-family: var(--ls-ff-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ls-ink);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.ls-scope .ls-type-body p {
  font-size: 0.92rem;
  color: var(--ls-ink-soft);
  margin-bottom: 22px;
  line-height: 1.72;
}
.ls-scope .ls-type-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.ls-scope .ls-td {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--ls-slate);
  line-height: 1.4;
}
.ls-scope .ls-td svg { color: var(--ls-teal); margin-top: 1px; min-width: 14px; }

/* ==========================================================
   DESTINATIONS
   ========================================================== */
.ls-scope.ls-destinations {
  background: #203f57;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.ls-scope.ls-destinations::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Ccircle cx='40' cy='40' r='38' stroke='%231A7A6A' stroke-width='0.5' stroke-opacity='0.12'/%3E%3Cline x1='0' y1='40' x2='80' y2='40' stroke='%231A7A6A' stroke-width='0.3' stroke-opacity='0.08'/%3E%3Cline x1='40' y1='0' x2='40' y2='80' stroke='%231A7A6A' stroke-width='0.3' stroke-opacity='0.08'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
  pointer-events: none;
}

.ls-scope .ls-destinations-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px;
  position: relative;
  z-index: 1;
}
.ls-scope .ls-dest-header {
  margin-bottom: 60px;
}
.ls-scope .ls-dest-intro {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  max-width: 600px;
  line-height: 1.75;
}

.ls-scope .ls-dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ls-scope .ls-dest-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  overflow: hidden;
  transition: transform var(--ls-trans), box-shadow var(--ls-trans), border-color var(--ls-trans);
}
.ls-scope .ls-dest-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  border-color: rgba(26,122,106,0.35);
}

.ls-scope .ls-dest-photo-wrap {
  height: 200px;
  overflow: hidden;
}
.ls-scope .ls-dest-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ls-ease);
  display: block;
}
.ls-scope .ls-dest-card:hover .ls-dest-photo-wrap img { transform: scale(1.08); }

.ls-scope .ls-dest-info {
  padding: 22px 22px 24px;
}
.ls-scope .ls-dest-region {
  font-family: var(--ls-ff-head);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ls-teal-mid);
  margin-bottom: 6px;
}
.ls-scope .ls-dest-info h4 {
  font-family: var(--ls-ff-head);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.ls-scope .ls-dest-info p {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 16px;
}
.ls-scope .ls-dest-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ls-scope .ls-dest-tags span {
  font-family: var(--ls-ff-head);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 4px 10px;
  border-radius: 100px;
}

/* ==========================================================
   SALARY
   ========================================================== */
.ls-scope.ls-salary {
  background: var(--ls-teal-pale);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.ls-scope.ls-salary::before {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(26,122,106,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.ls-scope .ls-salary-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}

.ls-scope .ls-benefit-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 36px;
}
.ls-scope .ls-benefit {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid var(--ls-border);
  transition: box-shadow var(--ls-trans), transform var(--ls-trans);
}
.ls-scope .ls-benefit:hover {
  box-shadow: var(--ls-shadow-sm);
  transform: translateX(6px);
}
.ls-scope .ls-benefit-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--ls-teal-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ls-teal);
}
.ls-scope .ls-benefit-text strong {
  display: block;
  font-family: var(--ls-ff-head);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ls-ink);
  margin-bottom: 4px;
}
.ls-scope .ls-benefit-text p {
  font-size: 0.84rem;
  color: var(--ls-ink-soft);
  line-height: 1.65;
}

.ls-scope .ls-salary-visual { position: relative; }
.ls-scope .ls-sal-img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 8px;
  box-shadow: var(--ls-shadow-lg);
  display: block;
}
.ls-scope .ls-sal-badge-1 {
  position: absolute;
  bottom: -24px;
  left: 20px;
  background: var(--ls-teal);
  color: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 10px 32px rgba(26,122,106,0.35);
  max-width: 300px;
}
.ls-scope .ls-sal-badge-1 svg { min-width: 22px; }
.ls-scope .ls-sal-badge-1 strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.ls-scope .ls-sal-badge-1 span { font-size: 0.75rem; color: rgba(255,255,255,0.7); }

.ls-scope .ls-salary-bands {
  margin-top: 60px;
}
.ls-scope .ls-salary-bands h4 {
  font-family: var(--ls-ff-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ls-ink);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.ls-scope .ls-band {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.ls-scope .ls-band-label {
  font-family: var(--ls-ff-head);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ls-ink-soft);
  width: 100px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ls-scope .ls-band-bar-wrap {
  flex: 1;
  height: 34px;
  background: rgba(26,122,106,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.ls-scope .ls-band-bar {
  height: 100%;
  background: linear-gradient(to right, var(--ls-teal), var(--ls-teal-mid));
  border-radius: 4px;
  width: 0;
  transition: width 1.2s var(--ls-ease);
  display: flex;
  align-items: center;
  padding: 0 12px;
  min-width: 60px;
}
.ls-scope .ls-band-bar span {
  font-family: var(--ls-ff-head);
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.ls-scope .ls-band-note {
  font-size: 0.78rem;
  color: var(--ls-ink-soft);
  margin-top: 16px;
  line-height: 1.65;
  font-style: italic;
}

/* ==========================================================
   CAREER LADDER
   ========================================================== */
.ls-scope.ls-ladder {
  background: #0a5647;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.ls-scope .ls-ladder-bg { position: absolute; inset: 0; pointer-events: none; }
.ls-scope .ls-ladder-geo {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.05);
}
.ls-scope .ls-geo-1 { width: 600px; height: 600px; top: -200px; right: -200px; }
.ls-scope .ls-geo-2 { width: 400px; height: 400px; bottom: -150px; left: -100px; }

.ls-scope .ls-ladder-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px;
  position: relative;
  z-index: 1;
}
.ls-scope .ls-ladder-header { margin-bottom: 70px; }
.ls-scope .ls-ladder-intro {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  max-width: 560px;
  line-height: 1.75;
}

.ls-scope .ls-ladder-steps {
  position: relative;
  padding-left: 36px;
  border-left: 2px solid rgba(127,212,195,0.2);
}

.ls-scope .ls-rung {
  position: relative;
  display: grid;
  grid-template-columns: 0.2fr auto;
  gap: 50px;
  padding: 0 0 60px 50px;
  align-items: start;
}
.ls-scope .ls-rung-last { padding-bottom: 0; }

.ls-scope .ls-rung-dot {
  position: absolute;
  left: -7px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ls-teal-mid);
  border: 3px solid var(--ls-teal-dark);
  box-shadow: 0 0 0 3px rgba(34,160,138,0.3);
  translate: -36px 0;
}
.ls-scope .ls-rung-dot-2 { background: #5FBFB0; }
.ls-scope .ls-rung-dot-3 { background: var(--ls-amber); box-shadow: 0 0 0 3px rgba(232,164,53,0.3); }
.ls-scope .ls-rung-dot-4 { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.2); }

.ls-scope .ls-rung-content {}
.ls-scope .ls-rung-meta {
  font-family: var(--ls-ff-head);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(127,212,195,0.7);
  margin-bottom: 8px;
}
.ls-scope .ls-rung-content h4 {
  font-family: var(--ls-ff-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.ls-scope .ls-rung-content p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  max-width: 480px;
  line-height: 1.72;
  margin-bottom: 14px;
}
.ls-scope .ls-rung-req {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ls-ff-head);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ls-teal-mid);
  background: rgba(26,122,106,0.18);
  border: 1px solid rgba(26,122,106,0.3);
  padding: 6px 14px;
  border-radius: 100px;
}

.ls-scope .ls-rung-img {
  width: 200px;
  height: 160px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--ls-shadow-md);
}
.ls-scope .ls-rung-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ls-ease);
}
.ls-scope .ls-rung:hover .ls-rung-img img { transform: scale(1.08); }

/* ==========================================================
   HOW TO GET HIRED
   ========================================================== */
.ls-scope.ls-hired {
  background: var(--ls-off-white);
  padding: 120px 0;
}
.ls-scope .ls-hired-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px;
}
.ls-scope .ls-hired-header { margin-bottom: 60px; }

.ls-scope .ls-hired-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.ls-scope .ls-hired-steps-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ls-scope .ls-hired-step {
  display: flex;
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(26,122,106,0.1);
  align-items: flex-start;
  transition: padding-left var(--ls-trans);
}
.ls-scope .ls-hired-step:first-child { padding-top: 0; }
.ls-scope .ls-hired-step:hover { padding-left: 10px; }
.ls-scope .ls-hs-badge {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--ls-teal);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ls-ff-head);
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
}
.ls-scope .ls-hs-body h4 {
  font-family: var(--ls-ff-head);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ls-ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.ls-scope .ls-hs-body p {
  font-size: 0.87rem;
  color: var(--ls-ink-soft);
  line-height: 1.7;
}

.ls-scope .ls-hired-img-col { position: relative; }
.ls-scope .ls-hired-img-main {
  width: 100%;
  height: 360px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--ls-shadow-lg);
}
.ls-scope .ls-hired-img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ls-scope .ls-hired-img-accent {
  position: absolute;
  bottom: -40px;
  right: -30px;
  width: 180px;
  height: 140px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--ls-shadow-md);
  border: 5px solid var(--ls-off-white);
  animation: ls-float 8s ease-in-out infinite;
}
.ls-scope .ls-hired-img-accent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ls-scope .ls-hired-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--ls-teal-light);
  border: 1px solid var(--ls-border);
  border-left: 4px solid var(--ls-teal);
  border-radius: 0 6px 6px 0;
  padding: 20px 20px 20px 18px;
  margin-top: 80px;
}
.ls-scope .ls-hired-callout svg { color: var(--ls-teal); min-width: 22px; margin-top: 1px; }
.ls-scope .ls-hired-callout p {
  font-size: 0.87rem;
  color: var(--ls-teal-dark);
  line-height: 1.65;
  font-weight: 400;
}

/* ==========================================================
   FAQ
   ========================================================== */
.ls-scope.ls-faq {
  background: var(--ls-navy-mid);
  padding: 120px 0;
}
.ls-scope .ls-faq-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px;
}
.ls-scope .ls-faq-header { margin-bottom: 60px; }
.ls-scope .ls-faq-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ls-scope .ls-faq-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ls-scope .ls-faq-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color var(--ls-trans);
}
.ls-scope .ls-faq-item.ls-open { border-color: rgba(26,122,106,0.4); }

.ls-scope .ls-faq-q {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  text-align: left;
}
.ls-scope .ls-faq-q span {
  font-family: var(--ls-ff-head);
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  line-height: 1.45;
}
.ls-scope .ls-faq-chevron {
  color: var(--ls-teal-mid);
  flex-shrink: 0;
  transition: transform 0.3s var(--ls-ease);
}
.ls-scope .ls-faq-item.ls-open .ls-faq-chevron { transform: rotate(180deg); }

.ls-scope .ls-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ls-ease), padding 0.3s;
  padding: 0 22px;
}
.ls-scope .ls-faq-item.ls-open .ls-faq-a {
  max-height: 240px;
  padding: 0 22px 20px;
}
.ls-scope .ls-faq-a p {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.72;
}

/* ==========================================================
   CTA
   ========================================================== */
.ls-scope.ls-cta {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ls-scope .ls-cta-media {
  position: absolute;
  inset: 0;
}
.ls-scope .ls-cta-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.ls-scope .ls-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(13,31,45,0.92) 0%,
    rgba(15,79,67,0.82) 50%,
    rgba(13,31,45,0.7) 100%
  );
}

.ls-scope .ls-cta-content {
  position: relative;
  z-index: 1;
  width: 100%;
}
.ls-scope .ls-cta-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 70px;
}
.ls-scope .ls-cta-kicker {
  font-family: var(--ls-ff-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ls-teal-mid);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ls-scope .ls-cta-kicker::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--ls-teal-mid);
}

.ls-scope .ls-cta-h2 {
  font-family: var(--ls-ff-head);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  max-width: 720px;
  margin-bottom: 22px;
  letter-spacing: -0.02em;
}
.ls-scope .ls-cta-h2 em {
  font-style: italic;
  font-family: var(--ls-ff-serif);
  font-weight: 400;
  color: #7FD4C3;
}
.ls-scope .ls-cta-body {
  font-size: 1.02rem;
  color: rgba(255,255,255,0.65);
  max-width: 580px;
  margin-bottom: 40px;
  line-height: 1.78;
}
.ls-scope .ls-cta-body strong { color: #7FD4C3; }

.ls-scope .ls-cta-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.ls-scope .ls-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  background: var(--ls-teal);
  color: #fff;
  font-family: var(--ls-ff-head);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 4px;
  transition: background var(--ls-trans), transform var(--ls-trans), box-shadow var(--ls-trans);
  box-shadow: 0 6px 24px rgba(26,122,106,0.4);
}
.ls-scope .ls-btn-primary:hover {
  background: var(--ls-teal-mid);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(26,122,106,0.5);
}
.ls-scope .ls-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  font-family: var(--ls-ff-head);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  backdrop-filter: blur(6px);
  transition: border-color var(--ls-trans), color var(--ls-trans), background var(--ls-trans), transform var(--ls-trans);
}
.ls-scope .ls-btn-secondary:hover {
  border-color: rgba(127,212,195,0.5);
  color: #7FD4C3;
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

.ls-scope .ls-cta-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 36px;
}
.ls-scope .ls-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ls-ff-head);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
}
.ls-scope .ls-trust-item svg { color: var(--ls-teal-mid); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1100px) {
  .ls-scope .ls-hero-layout,
  .ls-scope .ls-what-inner,
  .ls-scope .ls-salary-inner,
  .ls-scope .ls-hired-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .ls-scope .ls-advantages-inner,
  .ls-scope .ls-destinations-inner,
  .ls-scope .ls-ladder-inner,
  .ls-scope .ls-types-inner,
  .ls-scope .ls-hired-inner,
  .ls-scope .ls-faq-inner,
  .ls-scope .ls-cta-inner { padding: 0 40px; }
  .ls-scope .ls-adv-grid { grid-template-columns: 1fr 1fr; }
  .ls-scope .ls-dest-grid { grid-template-columns: 1fr 1fr; }
  .ls-scope .ls-faq-cols { grid-template-columns: 1fr; }
  .ls-scope .ls-hero-layout { padding: 140px 40px 80px; }
  .ls-scope .ls-hero-scroll { right: 40px; }
  .ls-scope .ls-type-feature { grid-template-columns: 1fr; min-height: auto; }
  .ls-scope .ls-type-reverse { direction: ltr; }
  .ls-scope .ls-type-img { height: 280px; }
  .ls-scope .ls-what-floating-img { display: none; }
  .ls-scope .ls-what-accent-block { right: 20px; }
  .ls-scope .ls-rung { grid-template-columns: 1fr; }
  .ls-scope .ls-rung-img { width: 100%; height: 200px; }
}

@media (max-width: 700px) {
  .ls-scope .ls-adv-grid { grid-template-columns: 1fr; }
  .ls-scope .ls-dest-grid { grid-template-columns: 1fr; }
  .ls-scope .ls-hero-h1 { font-size: 3rem; }
  .ls-scope .ls-hero-stats { flex-direction: column; gap: 16px; }
  .ls-scope .ls-hstat-div { display: none; }
  .ls-scope .ls-advantages-inner,
  .ls-scope .ls-destinations-inner,
  .ls-scope .ls-ladder-inner,
  .ls-scope .ls-types-inner,
  .ls-scope .ls-hired-inner,
  .ls-scope .ls-faq-inner,
  .ls-scope .ls-cta-inner,
  .ls-scope .ls-salary-inner { padding: 0 24px; }
  .ls-scope .ls-hero-layout { padding: 120px 24px 70px; }
  .ls-scope.ls-what,
  .ls-scope.ls-advantages,
  .ls-scope.ls-types,
  .ls-scope.ls-destinations,
  .ls-scope.ls-salary,
  .ls-scope.ls-ladder,
  .ls-scope.ls-hired,
  .ls-scope.ls-faq { padding: 70px 0; }
  .ls-scope .ls-hero-scroll { display: none; }
  .ls-scope .ls-type-body { padding: 30px 28px; }
  .ls-scope .ls-cta-btns { flex-direction: column; }
  .ls-scope .ls-hired-img-accent { display: none; }
  .ls-scope .ls-sal-badge-1 { position: static; margin-top: 16px; max-width: 100%; }
}

/* ==========================================================
   online1-new.css  |  TEFL Online Teaching Career Pathway
   Scoped under .ot-wrap  |  Tech-forward, digital-native aesthetic
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;1,9..144,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---- TOKENS ---- */
.ot-wrap {
  --ot-indigo:      #4338CA;
  --ot-indigo-dark: #1E1B5E;
  --ot-indigo-mid:  #6366F1;
  --ot-indigo-soft: #EEF2FF;
  --ot-indigo-pale: #F5F3FF;
  --ot-violet:      #7C3AED;
  --ot-violet-mid:  #A78BFA;
  --ot-coral:       #F05252;
  --ot-coral-soft:  #FEF2F2;
  --ot-gold:        #F59E0B;
  --ot-gold-pale:   #FFFBEB;
  --ot-green:       #10B981;
  --ot-ink:         #0F0F1A;
  --ot-ink-mid:     #1E1B4B;
  --ot-ink-soft:    #4B5563;
  --ot-slate:       #6B7280;
  --ot-white:       #FFFFFF;
  --ot-off-white:   #FAFAFA;
  --ot-mist:        #F3F4F6;
  --ot-border:      rgba(99,102,241,0.15);
  --ot-border-dark: rgba(99,102,241,0.3);
  --ot-shadow-sm:   0 2px 12px rgba(67,56,202,0.1);
  --ot-shadow-md:   0 8px 32px rgba(67,56,202,0.15);
  --ot-shadow-lg:   0 20px 60px rgba(67,56,202,0.2);
  --ot-glow:        0 0 60px rgba(99,102,241,0.25);
  --ot-ff-head:     'Space Grotesk', sans-serif;
  --ot-ff-serif:    'Fraunces', Georgia, serif;
  --ot-ff-mono:     'JetBrains Mono', monospace;
  --ot-r:           6px;
  --ot-ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ot-trans:       0.3s var(--ot-ease);
}

.ot-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.ot-wrap, .ot-wrap p, .ot-wrap span, .ot-wrap li {
  font-family: var(--ot-ff-head);
  color: #f6f4ed82;
  line-height: 1.7;
}

/* ---- SHARED UTILITIES ---- */
.ot-wrap .ot-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ot-ff-mono);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ot-indigo-mid);
  margin-bottom: 14px;
}
.ot-wrap .ot-sl-light { color: rgba(165,168,255,0.7); }
.ot-wrap .ot-sl-line {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--ot-indigo-mid);
  flex-shrink: 0;
}
.ot-wrap .ot-sl-line-light { background: rgba(165,168,255,0.5); }

.ot-wrap .ot-section-h2 {
  font-family: var(--ot-ff-head);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  color: var(--ot-ink);
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
}
.ot-wrap .ot-section-h2 em {
  font-style: italic;
  font-family: var(--ot-ff-serif);
  font-weight: 400;
  color: var(--ot-indigo);
}
.ot-wrap .ot-h2-light { color: #fff; }
.ot-wrap .ot-h2-light em { color: var(--ot-violet-mid); }

.ot-wrap .ot-body-text {
  font-size: 1rem;
  color: var(--ot-ink-soft);
  margin-bottom: 18px;
  line-height: 1.78;
}

/* ---- ENTRANCE ANIMATIONS ---- */
.ot-wrap .ot-anim {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s var(--ot-ease), transform 0.55s var(--ot-ease);
}
.ot-wrap .ot-anim.ot-in {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================
   HERO
   ========================================================== */
.ot-wrap.ot-hero {
  background: #1e1e49;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
}

/* --- Animated grid background --- */
.ot-wrap .ot-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ot-wrap .ot-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}
.ot-wrap .ot-grid-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.ot-wrap .ot-glow-1 {
  width: 600px;
  height: 600px;
  background: rgba(99,102,241,0.2);
  top: -200px;
  left: -100px;
  animation: ot-glow-drift 12s ease-in-out infinite alternate;
}
.ot-wrap .ot-glow-2 {
  width: 400px;
  height: 400px;
  background: rgba(124,58,237,0.15);
  bottom: 0;
  left: 30%;
  animation: ot-glow-drift 16s 2s ease-in-out infinite alternate;
}
.ot-wrap .ot-glow-3 {
  width: 300px;
  height: 300px;
  background: rgba(240,82,82,0.1);
  top: 20%;
  right: 5%;
  animation: ot-glow-drift 10s 4s ease-in-out infinite alternate;
}
@keyframes ot-glow-drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px, 20px) scale(1.1); }
}

/* --- Floating UI cards --- */
.ot-wrap .ot-hero-floats {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.ot-wrap .ot-float-card {
  position: absolute;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  animation: ot-float-drift 6s ease-in-out infinite;
}
.ot-wrap .ot-fc-label {
  display: block;
  font-size: 0.62rem;
  font-family: var(--ot-ff-mono);
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.ot-wrap .ot-fc-val {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
}
.ot-wrap .ot-val-big {
  font-size: 1.1rem;
  color: #A5F3C8;
}
.ot-wrap .ot-fc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ot-wrap .ot-dot-green {
  background: var(--ot-green);
  box-shadow: 0 0 8px rgba(16,185,129,0.6);
  animation: ot-blink 2s infinite;
}
.ot-wrap .ot-dot-coral {
  background: var(--ot-coral);
  box-shadow: 0 0 8px rgba(240,82,82,0.6);
}
.ot-wrap .ot-fc-stars { display: flex; gap: 2px; color: var(--ot-gold); }
.ot-wrap .ot-fc-content { display: flex; flex-direction: column; }

.ot-wrap .ot-fc-1 { top: 32%; left: 42%; animation-delay: 0s; animation-duration: 7s; }
.ot-wrap .ot-fc-2 { top: 16%; left: 28%; animation-delay: 1.5s; animation-duration: 8s; }
.ot-wrap .ot-fc-3 { bottom: 24%; left: 35%; animation-delay: 0.8s; animation-duration: 9s; }
.ot-wrap .ot-fc-4 { bottom: 48%; left: 42%; animation-delay: 2s; animation-duration: 7.5s; }

@keyframes ot-float-drift {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes ot-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* --- Hero inner layout --- */
.ot-wrap .ot-hero-inner {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 60px 80px 70px;
}

.ot-wrap .ot-hero-eyebrow {
  margin-bottom: 32px;
  animation: ot-fade-up 0.8s ease both;
}
.ot-wrap .ot-mono-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ot-ff-mono);
  font-size: 0.68rem;
  color: rgba(165,168,255,0.7);
  letter-spacing: 0.12em;
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.25);
  padding: 8px 16px;
  border-radius: 4px;
}
.ot-wrap .ot-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ot-indigo-mid);
  box-shadow: 0 0 8px rgba(99,102,241,0.8);
  animation: ot-blink 2s infinite;
}

.ot-wrap .ot-hero-h1 {
  font-family: var(--ot-ff-head);
  font-size: clamp(3.2rem, 6vw, 5.4rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 0;
  animation: ot-fade-up 0.9s 0.12s ease both;
}
.ot-wrap .ot-hero-h1 em {
  font-style: italic;
  font-family: var(--ot-ff-serif);
  font-weight: 400;
  color: var(--ot-violet-mid);
  display: block;
}
.ot-wrap .ot-h1-sub {
  display: block;
  color: rgba(255,255,255,0.35);
  font-size: 0.6em;
  font-weight: 400;
  font-family: var(--ot-ff-mono);
  letter-spacing: 0.05em;
  margin-top: -115px;
}

.ot-wrap .ot-hero-right-col {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 60px 80px 70px;
  position: relative;
  z-index: 3;
}

/* Restructure: hero-inner and hero-right-col are side by side */
.ot-wrap.ot-hero {
  display: grid;
  grid-template-columns: 55% 45%;
}
.ot-wrap .ot-hero-inner {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 120px 50px 100px 70px;
}
.ot-wrap .ot-hero-right-col {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 20px 0 10px;
  position: relative;
  z-index: 3;
}

.ot-wrap .ot-hero-deck {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.78;
  margin-bottom: 32px;
  animation: ot-fade-up 0.9s 0.24s ease both;
}
.ot-wrap .ot-hero-deck strong { color: var(--ot-violet-mid); }

.ot-wrap .ot-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  animation: ot-fade-up 0.9s 0.34s ease both;
}
.ot-wrap .ot-btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  background: linear-gradient(135deg, var(--ot-indigo) 0%, var(--ot-violet) 100%);
  color: #fff;
  font-family: var(--ot-ff-head);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--ot-r);
  transition: transform var(--ot-trans), box-shadow var(--ot-trans), opacity var(--ot-trans);
  box-shadow: 0 6px 24px rgba(99,102,241,0.4);
}
.ot-wrap .ot-btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(99,102,241,0.55);
}
.ot-wrap .ot-btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-family: var(--ot-ff-head);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: var(--ot-r);
  transition: border-color var(--ot-trans), color var(--ot-trans);
}
.ot-wrap .ot-btn-hero-ghost:hover {
  border-color: rgba(165,140,255,0.5);
  color: var(--ot-violet-mid);
}

/* Ticker */
.ot-wrap .ot-hero-ticker {
  animation: ot-fade-up 0.9s 0.44s ease both;
}
.ot-wrap .ot-ticker-label {
  font-family: var(--ot-ff-mono);
  font-size: 0.6rem;
  color: rgb(230 240 245 / 62%);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ot-wrap .ot-ticker-track {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 10px;
}
.ot-wrap .ot-ticker-inner {
  display: flex;
  gap: 20px;
  white-space: nowrap;
  animation: ot-ticker 20s linear infinite;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  font-family: var(--ot-ff-mono);
}
.ot-wrap .ot-ticker-sep { opacity: 0.25; }
@keyframes ot-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Hero photo panel */
.ot-wrap .ot-hero-image-panel {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  overflow: hidden;
}
.ot-wrap .ot-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  animation: ot-hero-scale 20s ease-in-out infinite alternate;
}
@keyframes ot-hero-scale {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.ot-wrap .ot-hero-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(15,15,26,0.85) 0%, rgba(15,15,26,0.3) 40%, rgba(15,15,26,0) 100%);
}

@keyframes ot-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   METRICS STRIP
   ========================================================== */
.ot-wrap.ot-metrics {
  background: var(--ot-indigo-dark);
  padding: 0;
}
.ot-wrap .ot-metrics-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}
.ot-wrap .ot-metric {
  flex: 1;
  padding: 36px 24px;
  text-align: center;
  transition: background var(--ot-trans);
  cursor: default;
}
.ot-wrap .ot-metric:hover { background: rgba(99,102,241,0.12); }
.ot-wrap .ot-metric-val {
  font-family: var(--ot-ff-head);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ot-violet-mid);
  line-height: 1;
  margin-bottom: 7px;
  letter-spacing: -0.03em;
}
.ot-wrap .ot-metric-val span {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(165,140,255,0.7);
}
.ot-wrap .ot-metric-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  font-family: var(--ot-ff-mono);
  letter-spacing: 0.06em;
}
.ot-wrap .ot-metric-div {
  width: 1px;
  background: rgba(99,102,241,0.2);
  margin: 16px 0;
}

/* ==========================================================
   WHY ONLINE TEACHING
   ========================================================== */
.ot-wrap.ot-why {
  background: var(--ot-off-white);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.ot-wrap.ot-why::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 95% 10%, rgba(99,102,241,0.06) 0%, transparent 40%);
  pointer-events: none;
}

.ot-wrap .ot-why-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px;
}
.ot-wrap .ot-why-header {
  max-width: 640px;
  margin-bottom: 64px;
}

.ot-wrap .ot-why-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}

/* Image stack */
.ot-wrap .ot-why-img-stack { position: relative; }
.ot-wrap .ot-why-main-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  box-shadow: var(--ot-shadow-lg);
}
.ot-wrap .ot-why-stat-overlay {
  position: absolute;
  bottom: 30px;
  left: 30px;
  background: linear-gradient(135deg, var(--ot-indigo), var(--ot-violet));
  color: #fff;
  border-radius: 10px;
  padding: 20px 24px;
  max-width: 220px;
}
.ot-wrap .ot-wso-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.04em;
}
.ot-wrap .ot-wso-text {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}
.ot-wrap .ot-why-sec-img {
  position: absolute;
  top: -28px;
  right: -36px;
  width: 160px;
  height: 130px;
  object-fit: cover;
  border-radius: 10px;
  border: 4px solid var(--ot-off-white);
  box-shadow: var(--ot-shadow-md);
  animation: ot-float-gentle 7s ease-in-out infinite;
}
@keyframes ot-float-gentle {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Why cards */
.ot-wrap .ot-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
.ot-wrap .ot-why-card {
  background: var(--ot-white);
  border: 1px solid rgba(99,102,241,0.1);
  border-radius: 8px;
  padding: 22px 20px;
  transition: border-color var(--ot-trans), box-shadow var(--ot-trans), transform var(--ot-trans);
  position: relative;
  overflow: hidden;
}
.ot-wrap .ot-why-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0) 0%, rgba(99,102,241,0.04) 100%);
  opacity: 0;
  transition: opacity var(--ot-trans);
}
.ot-wrap .ot-why-card:hover {
  border-color: rgba(99,102,241,0.3);
  box-shadow: var(--ot-shadow-sm);
  transform: translateY(-4px);
}
.ot-wrap .ot-why-card:hover::before { opacity: 1; }
.ot-wrap .ot-wc-icon {
  width: 42px;
  height: 42px;
  background: var(--ot-indigo-soft);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ot-indigo);
  margin-bottom: 14px;
  transition: background var(--ot-trans), color var(--ot-trans);
}
.ot-wrap .ot-why-card:hover .ot-wc-icon {
  background: var(--ot-indigo);
  color: #fff;
}
.ot-wrap .ot-why-card strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ot-ink);
  margin-bottom: 6px;
}
.ot-wrap .ot-why-card p {
  font-size: 0.83rem;
  color: var(--ot-ink-soft);
  line-height: 1.65;
}

/* ==========================================================
   PLATFORMS
   ========================================================== */
.ot-wrap.ot-platforms {
  background: #1e1e49;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.ot-wrap .ot-platforms-bg {
  position: absolute;
  inset: 0;
}
.ot-wrap .ot-plat-glow {
  position: absolute;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 60%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ot-wrap .ot-platforms-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px;
  position: relative;
  z-index: 1;
}
.ot-wrap .ot-plat-header {
  margin-bottom: 60px;
}
.ot-wrap .ot-plat-intro {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  max-width: 580px;
  line-height: 1.75;
}
.ot-wrap .ot-plat-intro strong { color: var(--ot-violet-mid); }

.ot-wrap .ot-plat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ot-wrap .ot-plat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: 10px;
  overflow: hidden;
  transition: transform var(--ot-trans), border-color var(--ot-trans), box-shadow var(--ot-trans);
  display: flex;
  flex-direction: column;
}
.ot-wrap .ot-plat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(99,102,241,0.4);
  box-shadow: 0 12px 40px rgba(99,102,241,0.15);
}

.ot-wrap .ot-plat-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 18px 0;
}
.ot-wrap .ot-pc-icon {
  width: 46px;
  height: 46px;
  background: rgba(99,102,241,0.15);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ot-violet-mid);
  transition: background var(--ot-trans), color var(--ot-trans);
}
.ot-wrap .ot-plat-card:hover .ot-pc-icon {
  background: var(--ot-indigo);
  color: #fff;
}
.ot-wrap .ot-pc-badge {
  font-family: var(--ot-ff-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ot-green);
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.25);
  padding: 4px 10px;
  border-radius: 100px;
}
.ot-wrap .ot-badge-coral { color: var(--ot-coral); background: rgba(240,82,82,0.1); border-color: rgba(240,82,82,0.2); }
.ot-wrap .ot-badge-gold  { color: var(--ot-gold);  background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); }
.ot-wrap .ot-badge-violet{ color: var(--ot-violet-mid); background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.2); }

.ot-wrap .ot-plat-card-img {
  height: 160px;
  overflow: hidden;
  margin: 16px 0;
  position: relative;
}
.ot-wrap .ot-plat-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ot-ease);
}
.ot-wrap .ot-plat-card:hover .ot-plat-card-img img { transform: scale(1.06); }

.ot-wrap .ot-plat-card-body {
  padding: 0 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ot-wrap .ot-plat-card-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.ot-wrap .ot-plat-card-body p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 16px;
  flex: 1;
}
.ot-wrap .ot-pc-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.ot-wrap .ot-pcm-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
}
.ot-wrap .ot-pcm-item svg { color: var(--ot-green); min-width: 13px; }
.ot-wrap .ot-pc-platforms-list {
  font-family: var(--ot-ff-mono);
  font-size: 0.65rem;
  color: rgba(165,140,255,0.6);
  border-top: 1px solid rgba(99,102,241,0.15);
  padding-top: 12px;
  letter-spacing: 0.04em;
}

/* ==========================================================
   NICHES
   ========================================================== */
.ot-wrap.ot-niches {
  background: var(--ot-white);
  padding: 120px 0;
}
.ot-wrap .ot-niches-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 90px;
  align-items: start;
}
.ot-wrap .ot-niches-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 36px;
  box-shadow: var(--ot-shadow-md);
  display: block;
}

.ot-wrap .ot-niches-right {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ot-wrap .ot-niche-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 22px;
  padding: 28px 0;
  border-bottom: 1px solid var(--ot-mist);
  align-items: flex-start;
  transition: padding-left var(--ot-trans), background var(--ot-trans);
  border-radius: 8px;
  padding-left: 0;
}
.ot-wrap .ot-niche-row:first-child { padding-top: 0; }
.ot-wrap .ot-niche-row:hover { padding-left: 14px; }
.ot-wrap .ot-niche-num {
  font-family: var(--ot-ff-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ot-indigo-mid);
  opacity: 0.5;
  padding-top: 3px;
  transition: opacity var(--ot-trans);
}
.ot-wrap .ot-niche-row:hover .ot-niche-num { opacity: 1; }
.ot-wrap .ot-niche-content h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ot-ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.ot-wrap .ot-niche-content p {
  font-size: 0.87rem;
  color: var(--ot-ink-soft);
  line-height: 1.7;
  margin-bottom: 12px;
}
.ot-wrap .ot-niche-rate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ot-indigo-soft);
  border-radius: 100px;
  padding: 5px 14px;
}
.ot-wrap .ot-rate-label {
  font-family: var(--ot-ff-mono);
  font-size: 0.6rem;
  color: var(--ot-indigo-mid);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ot-wrap .ot-rate-val {
  font-family: var(--ot-ff-head);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ot-indigo);
}

/* ==========================================================
   SETUP
   ========================================================== */
.ot-wrap.ot-setup {
  background: #1e1e49;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.ot-wrap .ot-setup-bg {
  position: absolute;
  inset: 0;
}
.ot-wrap .ot-setup-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ot-wrap .ot-setup-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(124,58,237,0.2);
  filter: blur(80px);
  top: -100px;
  right: -100px;
  pointer-events: none;
}

.ot-wrap .ot-setup-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px;
  position: relative;
  z-index: 1;
}
.ot-wrap .ot-setup-header { margin-bottom: 60px; }
.ot-wrap .ot-setup-intro {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  max-width: 560px;
  line-height: 1.75;
}

.ot-wrap .ot-setup-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.ot-wrap .ot-setup-col-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.ot-wrap .ot-setup-col-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ot-wrap .ot-icon-yes { background: rgba(16,185,129,0.15); color: var(--ot-green); border: 1px solid rgba(16,185,129,0.3); }
.ot-wrap .ot-icon-no  { background: rgba(240,82,82,0.12); color: var(--ot-coral); border: 1px solid rgba(240,82,82,0.25); }
.ot-wrap .ot-setup-col-head h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.ot-wrap .ot-setup-list { display: flex; flex-direction: column; gap: 0; }
.ot-wrap .ot-si-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(99,102,241,0.1);
  align-items: flex-start;
}
.ot-wrap .ot-si-num {
  font-family: var(--ot-ff-mono);
  font-size: 0.65rem;
  color: rgba(165,140,255,0.5);
  padding-top: 2px;
}
.ot-wrap .ot-si-body strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-bottom: 4px;
}
.ot-wrap .ot-si-body p {
  font-size: 0.81rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.65;
}

.ot-wrap .ot-dont-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 30px;
}
.ot-wrap .ot-dont-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(240,82,82,0.05);
  border: 1px solid rgba(240,82,82,0.1);
  border-radius: 8px;
  padding: 14px;
  transition: border-color var(--ot-trans);
}
.ot-wrap .ot-dont-item:hover { border-color: rgba(240,82,82,0.25); }
.ot-wrap .ot-dont-item svg { color: var(--ot-coral); min-width: 16px; margin-top: 1px; }
.ot-wrap .ot-dont-item strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  margin-bottom: 3px;
}
.ot-wrap .ot-dont-item p {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.55;
}

.ot-wrap .ot-setup-img-wrap { position: relative; }
.ot-wrap .ot-setup-img-wrap img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  border: 1px solid rgba(99,102,241,0.2);
}
.ot-wrap .ot-setup-img-badge {
  position: absolute;
  bottom: -16px;
  right: 20px;
  background: linear-gradient(135deg, var(--ot-indigo), var(--ot-violet));
  color: #fff;
  font-family: var(--ot-ff-mono);
  font-size: 0.7rem;
  padding: 10px 18px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(99,102,241,0.4);
}

/* ==========================================================
   INCOME JOURNEY
   ========================================================== */
.ot-wrap.ot-income {
  background: var(--ot-off-white);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.ot-wrap.ot-income::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 5% 80%, rgba(99,102,241,0.06) 0%, transparent 40%);
  pointer-events: none;
}
.ot-wrap .ot-income-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 70px;
}
.ot-wrap .ot-income-header {
  max-width: 680px;
  margin-bottom: 70px;
}

.ot-wrap .ot-income-timeline {
  position: relative;
}
.ot-wrap .ot-income-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(99,102,241,0.12);
  transform: translateX(-50%);
}
.ot-wrap .ot-income-track-fill {
  width: 100%;
  height: 0;
  background: linear-gradient(to bottom, var(--ot-indigo), var(--ot-violet));
  transition: height 1.8s var(--ot-ease);
}

.ot-wrap .ot-it-item {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 36px;
  margin-bottom: 70px;
  align-items: center;
}
.ot-wrap .ot-it-item:last-child { margin-bottom: 0; }
.ot-wrap .ot-it-flip {
  /* flip: img | node | content */
}

.ot-wrap .ot-it-node {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ot-wrap .ot-it-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ot-indigo-mid);
  border: 3px solid var(--ot-off-white);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.25), var(--ot-glow);
  position: relative;
  z-index: 1;
}
.ot-wrap .ot-dot-coral  { background: var(--ot-coral);  box-shadow: 0 0 0 4px rgba(240,82,82,0.2); }
.ot-wrap .ot-dot-gold   { background: var(--ot-gold);   box-shadow: 0 0 0 4px rgba(245,158,11,0.2); }
.ot-wrap .ot-dot-violet { background: var(--ot-violet); box-shadow: 0 0 0 4px rgba(124,58,237,0.25), 0 0 30px rgba(124,58,237,0.3); }

.ot-wrap .ot-it-content {
  background: var(--ot-white);
  border: 1px solid rgba(99,102,241,0.12);
  border-radius: 10px;
  padding: 28px;
  box-shadow: var(--ot-shadow-sm);
  transition: box-shadow var(--ot-trans), transform var(--ot-trans);
}
.ot-wrap .ot-it-content:hover {
  box-shadow: var(--ot-shadow-md);
  transform: translateY(-3px);
}
.ot-wrap .ot-it-month {
  font-family: var(--ot-ff-mono);
  font-size: 0.65rem;
  color: var(--ot-indigo-mid);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ot-wrap .ot-it-content h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ot-ink);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.ot-wrap .ot-it-content p {
  font-size: 0.85rem;
  color: var(--ot-ink-soft);
  line-height: 1.7;
  margin-bottom: 16px;
}
.ot-wrap .ot-it-earning {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ot-indigo-soft);
  border-radius: 6px;
  padding: 10px 14px;
}
.ot-wrap .ot-ite-label {
  font-family: var(--ot-ff-mono);
  font-size: 0.6rem;
  color: var(--ot-indigo-mid);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ot-wrap .ot-ite-val {
  font-family: var(--ot-ff-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ot-indigo);
}
.ot-wrap .ot-ite-highlight {
  background: linear-gradient(135deg, var(--ot-indigo-soft), rgba(124,58,237,0.1));
}
.ot-wrap .ot-ite-highlight .ot-ite-val { color: var(--ot-violet); }

.ot-wrap .ot-it-img {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--ot-shadow-md);
}
.ot-wrap .ot-it-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ot-ease);
}
.ot-wrap .ot-it-item:hover .ot-it-img img { transform: scale(1.06); }

/* For flipped items: img on left, content on right */
.ot-wrap .ot-it-flip .ot-it-img { grid-column: 1; }
.ot-wrap .ot-it-flip .ot-it-node { grid-column: 2; }
.ot-wrap .ot-it-flip .ot-it-content { grid-column: 3; }

/* For normal items: content on left, node middle, img right */
.ot-wrap .ot-it-item:not(.ot-it-flip) .ot-it-content { grid-column: 1; }
.ot-wrap .ot-it-item:not(.ot-it-flip) .ot-it-node { grid-column: 2; }
.ot-wrap .ot-it-item:not(.ot-it-flip) .ot-it-img { grid-column: 3; }

/* ==========================================================
   TOOLS
   ========================================================== */
.ot-wrap.ot-tools {
  background: #1e1e49;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.ot-wrap .ot-tools-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ot-wrap .ot-tools-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
}
.ot-wrap .ot-tools-glow-left {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(99,102,241,0.18);
  filter: blur(80px);
  left: -100px;
  top: 50%;
  transform: translateY(-50%);
}
.ot-wrap .ot-tools-glow-right {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(124,58,237,0.12);
  filter: blur(60px);
  right: -60px;
  bottom: 60px;
}

.ot-wrap .ot-tools-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px;
  position: relative;
  z-index: 1;
}
.ot-wrap .ot-tools-header { margin-bottom: 60px; }
.ot-wrap .ot-tools-intro {
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
  max-width: 520px;
  line-height: 1.75;
}

.ot-wrap .ot-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ot-wrap .ot-tool-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(99,102,241,0.15);
  border-radius: 10px;
  padding: 28px 26px;
  transition: background var(--ot-trans), border-color var(--ot-trans), transform var(--ot-trans);
  position: relative;
  overflow: hidden;
}
.ot-wrap .ot-tool-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--ot-indigo), var(--ot-violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ot-ease);
}
.ot-wrap .ot-tool-card:hover {
  background: rgba(99,102,241,0.07);
  border-color: rgba(99,102,241,0.3);
  transform: translateY(-5px);
}
.ot-wrap .ot-tool-card:hover::before { transform: scaleX(1); }
.ot-wrap .ot-tool-icon {
  width: 48px;
  height: 48px;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ot-violet-mid);
  margin-bottom: 18px;
  transition: background var(--ot-trans), color var(--ot-trans);
}
.ot-wrap .ot-tool-card:hover .ot-tool-icon {
  background: var(--ot-indigo);
  color: #fff;
}
.ot-wrap .ot-tool-card h4 {
  font-size: 0.98rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.ot-wrap .ot-tool-card p {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 16px;
}
.ot-wrap .ot-tool-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ot-wrap .ot-tool-tags span {
  font-family: var(--ot-ff-mono);
  font-size: 0.62rem;
  color: rgba(165,140,255,0.7);
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.2);
  padding: 4px 10px;
  border-radius: 4px;
}

/* ==========================================================
   TESTIMONIAL
   ========================================================== */
.ot-wrap.ot-testimonial {
  background: var(--ot-white);
  padding: 120px 0;
}
.ot-wrap .ot-testi-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 70px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: center;
}
.ot-wrap .ot-testi-img-wrap {
  position: relative;
}
.ot-wrap .ot-testi-img-wrap img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 12px;
  display: block;
  box-shadow: var(--ot-shadow-lg);
}
.ot-wrap .ot-testi-img-deco {
  position: absolute;
  inset: -12px;
  border: 2px solid rgba(99,102,241,0.2);
  border-radius: 16px;
  z-index: -1;
}

.ot-wrap .ot-testi-quote-mark {
  color: var(--ot-indigo-mid);
  opacity: 0.3;
  margin-bottom: 24px;
  display: block;
}
.ot-wrap .ot-testi-quote {
  font-family: var(--ot-ff-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 400;
  font-style: italic;
  color: var(--ot-ink);
  line-height: 1.6;
  margin-bottom: 36px;
}

.ot-wrap .ot-testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}
.ot-wrap .ot-testi-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(99,102,241,0.3);
}
.ot-wrap .ot-testi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ot-wrap .ot-testi-author strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ot-ink);
}
.ot-wrap .ot-testi-author span {
  font-size: 0.78rem;
  color: var(--ot-slate);
  font-family: var(--ot-ff-mono);
}

.ot-wrap .ot-testi-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 24px;
  background: var(--ot-indigo-soft);
  border-radius: 10px;
  border: 1px solid var(--ot-border);
}
.ot-wrap .ot-ts-item {
  display: flex;
  flex-direction: column;
}
.ot-wrap .ot-ts-item strong {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ot-indigo);
  line-height: 1;
  margin-bottom: 3px;
  letter-spacing: -0.03em;
}
.ot-wrap .ot-ts-item span {
  font-size: 0.72rem;
  color: var(--ot-ink-soft);
  font-family: var(--ot-ff-mono);
}
.ot-wrap .ot-ts-sep {
  width: 1px;
  height: 36px;
  background: var(--ot-border-dark);
}

/* ==========================================================
   FAQ
   ========================================================== */
.ot-wrap.ot-faq {
  background: var(--ot-indigo-pale);
  padding: 120px 0;
}
.ot-wrap .ot-faq-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 70px;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 80px;
  align-items: start;
}
.ot-wrap .ot-faq-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 32px;
  display: block;
  box-shadow: var(--ot-shadow-md);
  border: 1px solid var(--ot-border);
}

.ot-wrap .ot-faq-list { display: flex; flex-direction: column; gap: 8px; }
.ot-wrap .ot-faq-item {
  background: var(--ot-white);
  border: 1px solid var(--ot-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color var(--ot-trans), box-shadow var(--ot-trans);
}
.ot-wrap .ot-faq-item.ot-open {
  border-color: var(--ot-border-dark);
  box-shadow: var(--ot-shadow-sm);
}
.ot-wrap .ot-faq-btn {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  text-align: left;
}
.ot-wrap .ot-faq-btn span {
  font-family: var(--ot-ff-head);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ot-ink);
  line-height: 1.45;
}
.ot-wrap .ot-faq-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--ot-indigo-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ot-indigo);
  transition: background var(--ot-trans), transform var(--ot-trans);
}
.ot-wrap .ot-faq-item.ot-open .ot-faq-icon {
  background: var(--ot-indigo);
  color: #fff;
  transform: rotate(45deg);
}
.ot-wrap .ot-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ot-ease);
  padding: 0 20px;
}
.ot-wrap .ot-faq-item.ot-open .ot-faq-answer {
  max-height: 200px;
  padding-bottom: 18px;
}
.ot-wrap .ot-faq-answer p {
  font-size: 0.87rem;
  color: var(--ot-ink-soft);
  line-height: 1.72;
}

/* ==========================================================
   CTA
   ========================================================== */
.ot-wrap.ot-cta {
  background: #1e1e49;
  padding: 140px 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.ot-wrap .ot-cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ot-wrap .ot-cta-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.07) 1px, transparent 1px);
  background-size: 60px 60px;
}
.ot-wrap .ot-cta-glow-left {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: rgba(99,102,241,0.2);
  filter: blur(100px);
  left: -200px;
  top: 50%;
  transform: translateY(-50%);
}
.ot-wrap .ot-cta-glow-right {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(124,58,237,0.18);
  filter: blur(80px);
  right: -150px;
  top: 50%;
  transform: translateY(-50%);
}

/* Animated rings */
.ot-wrap .ot-cta-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(99,102,241,0.15);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ot-ring-expand 4s ease-out infinite;
}
.ot-wrap .ot-cta-ring-1 { width: 400px; height: 400px; animation-delay: 0s; }
.ot-wrap .ot-cta-ring-2 { width: 700px; height: 700px; animation-delay: 1.3s; }
.ot-wrap .ot-cta-ring-3 { width: 1000px; height: 1000px; animation-delay: 2.6s; }
@keyframes ot-ring-expand {
  0%   { opacity: 0.4; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.1); }
}

.ot-wrap .ot-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 60px;
}
.ot-wrap .ot-cta-mono-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ot-ff-mono);
  font-size: 0.67rem;
  color: rgba(165,140,255,0.6);
  letter-spacing: 0.14em;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.2);
  padding: 8px 16px;
  border-radius: 4px;
  margin-bottom: 32px;
}
.ot-wrap .ot-cta-h2 {
  font-family: var(--ot-ff-head);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.ot-wrap .ot-cta-h2 em {
  font-style: italic;
  font-family: var(--ot-ff-serif);
  font-weight: 400;
  color: var(--ot-violet-mid);
}
.ot-wrap .ot-cta-body {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.78;
  margin-bottom: 44px;
}
.ot-wrap .ot-cta-body strong { color: var(--ot-violet-mid); }

.ot-wrap .ot-cta-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.ot-wrap .ot-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 38px;
  background: linear-gradient(135deg, var(--ot-indigo) 0%, var(--ot-violet) 100%);
  color: #fff;
  font-family: var(--ot-ff-head);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--ot-r);
  box-shadow: 0 8px 32px rgba(99,102,241,0.45);
  transition: transform var(--ot-trans), box-shadow var(--ot-trans);
}
.ot-wrap .ot-cta-btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 44px rgba(99,102,241,0.55);
}
.ot-wrap .ot-cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 32px;
  background: transparent;
  color: rgba(255,255,255,0.75);
  font-family: var(--ot-ff-head);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: var(--ot-r);
  transition: border-color var(--ot-trans), color var(--ot-trans), background var(--ot-trans);
}
.ot-wrap .ot-cta-btn-secondary:hover {
  border-color: rgba(165,140,255,0.5);
  color: var(--ot-violet-mid);
  background: rgba(99,102,241,0.06);
}

.ot-wrap .ot-cta-trust {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.ot-wrap .ot-cta-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ot-ff-mono);
  font-size: 0.65rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.08em;
}
.ot-wrap .ot-cta-trust-item svg { color: var(--ot-indigo-mid); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1100px) {
  .ot-wrap.ot-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .ot-wrap .ot-hero-inner {
    grid-column: 1;
    grid-row: 2;
    padding: 60px 40px 60px;
  }
  .ot-wrap .ot-hero-right-col {
    grid-column: 1;
    grid-row: 3;
    padding: 0 40px 80px;
  }
  .ot-wrap .ot-hero-image-panel {
    grid-column: 1;
    grid-row: 1;
    height: 50vh;
  }
  .ot-wrap .ot-hero-img-overlay {
    background: linear-gradient(to bottom, rgba(15,15,26,0) 0%, rgba(15,15,26,0.9) 100%);
  }
  .ot-wrap .ot-hero-floats { display: none; }
  .ot-wrap .ot-why-inner,
  .ot-wrap .ot-niches-inner,
  .ot-wrap .ot-setup-inner,
  .ot-wrap .ot-income-inner,
  .ot-wrap .ot-tools-inner,
  .ot-wrap .ot-testi-inner,
  .ot-wrap .ot-faq-inner,
  .ot-wrap .ot-platforms-inner,
  .ot-wrap .ot-cta-inner { padding: 0 40px; }
  .ot-wrap .ot-why-layout,
  .ot-wrap .ot-testi-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .ot-wrap .ot-niches-inner { grid-template-columns: 1fr; }
  .ot-wrap .ot-setup-cols { grid-template-columns: 1fr; }
  .ot-wrap .ot-faq-inner { grid-template-columns: 1fr; }
  .ot-wrap .ot-plat-cards { grid-template-columns: 1fr 1fr; }
  .ot-wrap .ot-tools-grid { grid-template-columns: 1fr 1fr; }
  .ot-wrap .ot-why-sec-img { display: none; }
  .ot-wrap .ot-income-track { display: none; }
  .ot-wrap .ot-it-item {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ot-wrap .ot-it-flip .ot-it-img,
  .ot-wrap .ot-it-item:not(.ot-it-flip) .ot-it-img { grid-column: 1; order: -1; }
  .ot-wrap .ot-it-node { display: none; }
  .ot-wrap .ot-it-item:not(.ot-it-flip) .ot-it-content,
  .ot-wrap .ot-it-flip .ot-it-content { grid-column: 1; }
}

@media (max-width: 700px) {
  .ot-wrap .ot-hero-inner { padding: 50px 24px 40px; }
  .ot-wrap .ot-hero-right-col { padding: 0 24px 60px; }
  .ot-wrap .ot-hero-h1 { font-size: 2.8rem; }
  .ot-wrap .ot-plat-cards { grid-template-columns: 1fr; }
  .ot-wrap .ot-tools-grid { grid-template-columns: 1fr; }
  .ot-wrap .ot-dont-grid { grid-template-columns: 1fr; }
  .ot-wrap .ot-why-grid { grid-template-columns: 1fr; }
  .ot-wrap .ot-metrics-inner { flex-wrap: wrap; }
  .ot-wrap .ot-metric { width: 50%; }
  .ot-wrap .ot-metric-div { display: none; }
  .ot-wrap .ot-testi-stats { flex-direction: column; gap: 16px; }
  .ot-wrap .ot-ts-sep { display: none; }
  .ot-wrap .ot-hero-actions { flex-direction: column; align-items: flex-start; }
  .ot-wrap .ot-cta-inner { padding: 0 24px; }
  .ot-wrap .ot-why-inner,
  .ot-wrap .ot-niches-inner,
  .ot-wrap .ot-setup-inner,
  .ot-wrap .ot-income-inner,
  .ot-wrap .ot-tools-inner,
  .ot-wrap .ot-testi-inner,
  .ot-wrap .ot-faq-inner,
  .ot-wrap .ot-platforms-inner { padding: 0 24px; }
  .ot-wrap.ot-why,
  .ot-wrap.ot-platforms,
  .ot-wrap.ot-niches,
  .ot-wrap.ot-setup,
  .ot-wrap.ot-income,
  .ot-wrap.ot-tools,
  .ot-wrap.ot-testimonial,
  .ot-wrap.ot-faq,
  .ot-wrap.ot-cta { padding: 70px 0; }
}

/* ============================================================
   TEACH ENGLISH ABROAD — Complete Stylesheet
   Prefix: abroad1-up-
   Aesthetic: Warm sun-drenched editorial magazine
   Palette: Ivory + Amber/Terracotta + Sage green
   Fonts: Bebas Neue (condensed display) + DM Serif Display (elegant) + Nunito (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=Nunito:wght@300;400;500;600;700;800&display=swap');

/* ── DESIGN TOKENS ────────────────────────────────────────────── */
.abroad1-up-hero,
.abroad1-up-intro,
.abroad1-up-dest,
.abroad1-up-reqs,
.abroad1-up-pos,
.abroad1-up-salary,
.abroad1-up-pathway,
.abroad1-up-stories,
.abroad1-up-cta {
  --a-ivory:       #FAF7F2;
  --a-ivory-deep:  #F2ECE1;
  --a-amber:       #D4762A;
  --a-amber-light: #E8974F;
  --a-amber-pale:  #FDF0E3;
  --a-terra:       #B85C38;
  --a-sage:        #6B8F71;
  --a-sage-light:  #8FAE95;
  --a-sage-pale:   #EAF1EB;
  --a-dark:        #1C1A17;
  --a-dark-2:      #2D2A24;
  --a-text:        #2E2A24;
  --a-text-mid:    #5C5347;
  --a-text-light:  #9A8E82;
  --a-border:      #E2D9CC;
  --a-border-light:#EDE6DC;
  --a-white:       #FFFFFF;

  --ff-display:    'Bebas Neue', Impact, sans-serif;
  --ff-serif:      'DM Serif Display', Georgia, serif;
  --ff-body:       'Nunito', system-ui, sans-serif;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --shadow-sm:    0 2px 12px rgba(28,26,23,.07);
  --shadow-md:    0 8px 32px rgba(28,26,23,.12);
  --shadow-lg:    0 20px 64px rgba(28,26,23,.18);
  --shadow-amber: 0 6px 28px rgba(212,118,42,.35);

  --ease:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tr:    0.36s var(--ease);

  font-family: var(--ff-body);
  color: var(--a-text);
  box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }

/* ── SHARED UTILITIES ─────────────────────────────────────────── */
.abroad1-up-container {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

.abroad1-up-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--a-amber);
  margin-bottom: 16px;
}
.abroad1-up-kicker::before,
.abroad1-up-kicker::after {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--a-amber);
  opacity: .6;
}
.abroad1-up-kicker--center { display: flex; justify-content: center; text-align: center; }
.abroad1-up-kicker--light  { color: rgba(255,255,255,.8); }
.abroad1-up-kicker--light::before,
.abroad1-up-kicker--light::after { background: rgba(255,255,255,.5); }

.abroad1-up-section-h2 {
  font-family: var(--ff-serif);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 400;
  line-height: 1.12;
  color: #ff9800;
  margin-bottom: 20px;
  letter-spacing: -.01em;
}
.abroad1-up-section-h2 em { font-style: italic; color: var(--a-amber); }
.abroad1-up-section-h2--center { text-align: center; }
.abroad1-up-section-h2--light  { color: #fff; }

.abroad1-up-sec-header { text-align: center; margin-bottom: 64px; }
.abroad1-up-sec-header--light .abroad1-up-section-h2 { color: #fff; }

.abroad1-up-sec-sub {
  font-size: 17px;
  line-height: 1.8;
  color: var(--a-text-mid);
  max-width: 620px;
  margin: 0 auto;
}
.abroad1-up-sec-sub--light { color: rgba(255,255,255,.65); }

/* ── BUTTONS ──────────────────────────────────────────────────── */
.abroad1-up-btn-primary,
.abroad1-up-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--a-amber);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 16px 32px;
  border-radius: var(--r-xs);
  text-decoration: none;
  transition: var(--tr);
  box-shadow: var(--shadow-amber);
}
.abroad1-up-btn-primary:hover,
.abroad1-up-cta-btn-primary:hover {
  background: var(--a-terra);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(212,118,42,.45);
}

.abroad1-up-cta-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255,255,255,.85);
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 700;
  padding: 15px 28px;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: var(--r-xs);
  text-decoration: none;
  transition: var(--tr);
  backdrop-filter: blur(6px);
}
.abroad1-up-cta-btn-ghost:hover {
  border-color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* ── HERO ─────────────────────────────────────────────────────── */
.abroad1-up-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.abroad1-up-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.abroad1-up-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  animation: abroad1upZoom 22s ease-in-out infinite alternate;
}
@keyframes abroad1upZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

.abroad1-up-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(28,26,23,.15) 0%,
    rgba(28,26,23,.35) 35%,
    rgba(28,26,23,.75) 75%,
    rgba(28,26,23,.9) 100%
  );
}
.abroad1-up-hero-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Decorative arc */
.abroad1-up-hero-arc {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  width: 100%;
  height: 100px;
  color: var(--a-ivory);
  z-index: 2;
  pointer-events: none;
}

.abroad1-up-hero-inner {
  position: relative;
  z-index: 3;
  padding-bottom: 120px;
  padding-top: 80px;
  animation: abroad1upRise .9s ease both;
}
@keyframes abroad1upRise {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}

.abroad1-up-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffffffb0;
  background: rgb(224 172 96);
  border: 1px solid rgba(212,118,42,.35);
  border-radius: 100px;
  padding: 7px 20px;
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
  animation: abroad1upRise .9s .1s ease both;
}

.abroad1-up-hero-h1 {
  font-family: var(--ff-display);
  font-size: clamp(5rem, 11vw, 10rem);
  line-height: .95;
  color: #fff;
  letter-spacing: .03em;
  margin-bottom: 28px;
  animation: abroad1upRise .9s .15s ease both;
}
.abroad1-up-hero-h1 em {
  font-style: normal;
  color: var(--a-amber-light);
  display: block;
  font-family: var(--ff-serif);
  font-size: clamp(4rem, 9vw, 8.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.abroad1-up-hero-sub {
  font-size: 18px;
  line-height: 1.75;
  color: rgba(255,255,255,.75);
  max-width: 580px;
  margin-bottom: 40px;
  font-weight: 300;
  animation: abroad1upRise .9s .22s ease both;
}

.abroad1-up-hero-anchors {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 52px;
  animation: abroad1upRise .9s .3s ease both;
}

.abroad1-up-anchor-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.25);
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 100px;
  text-decoration: none;
  transition: var(--tr);
  letter-spacing: .03em;
}
.abroad1-up-anchor-btn:hover {
  background: rgba(212,118,42,.3);
  border-color: var(--a-amber-light);
  color: #fff;
}

.abroad1-up-hero-stats {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  animation: abroad1upRise .9s .38s ease both;
}
.abroad1-up-hstat strong {
  display: block;
  font-family: var(--ff-display);
  font-size: 2rem;
  color: var(--a-amber-light);
  line-height: 1;
  letter-spacing: .03em;
}
.abroad1-up-hstat span {
  display: block;
  font-size: 10.5px;
  color: rgba(255,255,255,.5);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 4px;
}
.abroad1-up-hstat-sep {
  width: 1px; height: 40px;
  background: rgba(255,255,255,.15);
}

/* ── INTRO ────────────────────────────────────────────────────── */
.abroad1-up-intro {
  background: var(--a-ivory);
  padding-bottom: 100px;
  overflow: hidden;
}

/* MARQUEE */
.abroad1-up-marquee {
  background: #443d32;
  overflow: hidden;
  padding: 0;
  margin-bottom: 72px;
}
.abroad1-up-marquee-track {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  width: max-content;
  animation: abroad1upMarquee 32s linear infinite;
  white-space: nowrap;
}
@keyframes abroad1upMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.abroad1-up-marquee-track span {
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  flex-shrink: 0;
}
.abroad1-up-mq-dot {
  color: var(--a-amber) !important;
  font-size: 7px !important;
  letter-spacing: 0 !important;
}

.abroad1-up-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}

.abroad1-up-intro-right p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--a-text-mid);
  margin-bottom: 22px;
}
.abroad1-up-intro-right p:first-of-type {
  font-size: 18px;
  color: var(--a-text);
  font-weight: 600;
  line-height: 1.7;
  border-left: 3px solid var(--a-amber);
  padding-left: 20px;
  margin-bottom: 28px;
}

.abroad1-up-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.abroad1-up-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--a-text);
  border: 1.5px solid var(--a-border);
  border-radius: var(--r-xs);
  padding: 8px 16px;
  background: #fff;
  transition: var(--tr);
}
.abroad1-up-trust-chip svg { color: var(--a-amber); }
.abroad1-up-trust-chip:hover {
  border-color: var(--a-amber);
  background: var(--a-amber-pale);
  transform: translateY(-2px);
}

/* ── DESTINATIONS ─────────────────────────────────────────────── */
.abroad1-up-dest {
  background: var(--a-ivory-deep);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.abroad1-up-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--a-border) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .55;
  pointer-events: none;
}

/* BENTO featured layout */
.abroad1-up-bento {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
  margin-bottom: 40px;
}
.abroad1-up-bento-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--a-white);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  transition: var(--tr);
}
.abroad1-up-bento-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.abroad1-up-bento-tall { grid-row: span 2; }

.abroad1-up-bento-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.abroad1-up-bento-stack .abroad1-up-bento-card { flex: 1; }

.abroad1-up-bento-card > img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  filter: saturate(0.95) brightness(0.95);
  transition: transform .6s var(--ease);
}
.abroad1-up-bento-tall > img { height: 340px; }
.abroad1-up-bento-card:hover > img { transform: scale(1.05); }

.abroad1-up-bento-info {
  padding: 22px 26px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.abroad1-up-bento-region {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--a-amber);
  margin-bottom: 8px;
}

.abroad1-up-bento-card h3 {
  font-family: var(--ff-serif);
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--a-dark);
  line-height: 1;
  margin-bottom: 6px;
}
.abroad1-up-bento-salary {
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 800;
  color: var(--a-amber);
  margin-bottom: 10px;
}
.abroad1-up-bento-salary em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--a-text-light); }
.abroad1-up-bento-salary--gold { color: #B8860B; }

.abroad1-up-bento-card p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--a-text-mid);
  margin-bottom: 14px;
  flex: 1;
}

.abroad1-up-bento-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.abroad1-up-bento-tags span {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--a-text);
  border: 1px solid var(--a-border);
  border-radius: 100px;
  padding: 3px 12px;
  background: var(--a-ivory);
  letter-spacing: .03em;
}

.abroad1-up-bento-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--a-amber);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.abroad1-up-bento-badge--gold { color: #8B6914; }
.abroad1-up-bento-gold .abroad1-up-bento-badge--gold svg { color: #B8860B; }

/* DESTINATION SECONDARY GRID */
.abroad1-up-dest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.abroad1-up-dc {
  background: var(--a-white);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--a-border-light);
  box-shadow: var(--shadow-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
}
.abroad1-up-dc:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.abroad1-up-dc-img {
  position: relative;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
}
.abroad1-up-dc-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) brightness(0.9);
  transition: transform .6s var(--ease);
}
.abroad1-up-dc:hover .abroad1-up-dc-img img { transform: scale(1.08); }

.abroad1-up-dc-reg {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--ff-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(28,26,23,.55);
  backdrop-filter: blur(6px);
  border-radius: 100px;
  padding: 3px 12px;
  border: 1px solid rgba(255,255,255,.15);
}

.abroad1-up-dc-body { padding: 18px 18px 22px; flex: 1; display: flex; flex-direction: column; }

.abroad1-up-dc-body h4 {
  font-family: var(--ff-serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--a-dark);
  margin-bottom: 4px;
}

.abroad1-up-dc-sal {
  font-family: var(--ff-body);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--a-amber);
  margin-bottom: 10px;
}
.abroad1-up-dc-sal small { font-weight: 400; font-size: 11px; color: var(--a-text-light); }

.abroad1-up-dc-body p {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--a-text-mid);
  flex: 1;
  margin-bottom: 14px;
}

.abroad1-up-dc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.abroad1-up-dc-chips span {
  font-size: 10px;
  font-weight: 700;
  color: var(--a-text-mid);
  border: 1px solid var(--a-border);
  border-radius: 100px;
  padding: 2px 10px;
  background: var(--a-ivory);
}

/* ── REQUIREMENTS ─────────────────────────────────────────────── */
.abroad1-up-reqs {
  background: var(--a-ivory);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.abroad1-up-reqs-pattern {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg stroke='%23D4762A' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M0 0h60v60H0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
}

.abroad1-up-reqs-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}

.abroad1-up-reqs-photo-wrap {
  position: relative;
  margin-bottom: 28px;
}
.abroad1-up-reqs-photo-wrap > img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--r-lg);
  display: block;
  box-shadow: var(--shadow-lg);
  filter: saturate(0.85);
}

.abroad1-up-reqs-photo-card {
  position: absolute;
  bottom: -20px; right: -20px;
  background: var(--a-amber);
  color: #fff;
  border-radius: var(--r-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-amber);
  min-width: 220px;
}
.abroad1-up-reqs-photo-card strong { display: block; font-size: 13px; font-weight: 800; }
.abroad1-up-reqs-photo-card span  { display: block; font-size: 11px; opacity: .8; margin-top: 2px; }

.abroad1-up-docs-list h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 800;
  color: var(--a-dark);
  margin-bottom: 16px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.abroad1-up-docs-list h4 svg { color: var(--a-amber); }

.abroad1-up-docs { list-style: none; display: flex; flex-direction: column; gap: 0; }
.abroad1-up-docs li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--a-text-mid);
  padding: 12px 0;
  border-bottom: 1px solid var(--a-border-light);
  transition: var(--tr);
  cursor: default;
}
.abroad1-up-docs li:first-child { border-top: 1px solid var(--a-border-light); }
.abroad1-up-docs li:hover { color: var(--a-text); padding-left: 6px; }
.abroad1-up-docs li svg { color: var(--a-sage); flex-shrink: 0; }

/* REQUIREMENTS TABLE */
.abroad1-up-req-table {
  background: var(--a-white);
  border-radius: var(--r-md);
  border: 1px solid var(--a-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
}
.abroad1-up-req-table-head {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  padding: 14px 20px;
  background: var(--a-dark);
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  gap: 0;
}
.abroad1-up-req-row {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  padding: 14px 20px;
  border-bottom: 1px solid var(--a-border-light);
  align-items: center;
  gap: 0;
  transition: background var(--tr);
}
.abroad1-up-req-row:last-child { border-bottom: none; }
.abroad1-up-req-row:hover { background: var(--a-amber-pale); }

.abroad1-up-req-region {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--a-text);
}
.abroad1-up-req-region svg { color: var(--a-amber); }

.abroad1-up-pill-yes,
.abroad1-up-pill-pref,
.abroad1-up-pill-no {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}
.abroad1-up-pill-yes  { color: var(--a-sage); background: var(--a-sage-pale); }
.abroad1-up-pill-pref { color: #8B6914; background: #FEF9E7; }
.abroad1-up-pill-no   { color: var(--a-text-light); background: var(--a-ivory-deep); }

/* INFO GRID */
.abroad1-up-req-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.abroad1-up-req-info-box {
  background: var(--a-white);
  border: 1px solid var(--a-border);
  border-radius: var(--r-md);
  padding: 20px;
  transition: var(--tr);
}
.abroad1-up-req-info-box:hover {
  border-color: var(--a-amber);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}
.abroad1-up-rib-icon {
  width: 40px; height: 40px;
  background: var(--a-amber-pale);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--a-amber);
  margin-bottom: 12px;
}
.abroad1-up-req-info-box h5 {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 800;
  color: var(--a-dark);
  margin-bottom: 8px;
  letter-spacing: .01em;
}
.abroad1-up-req-info-box p {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--a-text-mid);
}

/* ── POSITION TYPES ───────────────────────────────────────────── */
.abroad1-up-pos {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}
.abroad1-up-pos-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.abroad1-up-pos-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.32) saturate(.7);
}
.abroad1-up-pos-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(135 102 54 / 92%) 0%, rgb(65 54 38 / 85%) 100%);
}
.abroad1-up-pos-inner {
  position: relative;
  z-index: 2;
}

.abroad1-up-pos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.abroad1-up-pos-card {
  background: rgb(255 152 0 / 14%);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  border-radius: var(--r-lg);
  padding: 30px 26px;
  transition: var(--tr);
  display: flex;
  flex-direction: column;
}
.abroad1-up-pos-card:hover {
  background: rgb(255 152 0 / 14%);
  border-color: rgba(212,118,42,.4);
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(212,118,42,.2);
}

.abroad1-up-pos-card--highlight {
  background: rgba(212,118,42,.12);
  border-color: rgba(212,118,42,.35);
}

.abroad1-up-pos-card-icon {
  width: 54px; height: 54px;
  background: rgba(212,118,42,.2);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--a-amber-light);
  margin-bottom: 18px;
  transition: var(--tr);
}
.abroad1-up-pos-card:hover .abroad1-up-pos-card-icon {
  background: var(--a-amber);
  color: #fff;
}

.abroad1-up-pos-label {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 8px;
}

.abroad1-up-pos-card h3 {
  font-family: var(--ff-body);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.3;
}

.abroad1-up-pos-card p {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.58);
  margin-bottom: 20px;
  flex: 1;
}

.abroad1-up-pos-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 16px;
  margin-bottom: 18px;
}
.abroad1-up-pos-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
}
.abroad1-up-pos-meta-row svg { color: var(--a-amber-light); flex-shrink: 0; }

.abroad1-up-pos-countries {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.abroad1-up-pos-countries span {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 100px;
  padding: 3px 11px;
  background: rgba(255,255,255,.05);
}

/* ── SALARY ───────────────────────────────────────────────────── */
.abroad1-up-salary {
  background: var(--a-ivory);
  padding: 100px 0;
  overflow: hidden;
}

.abroad1-up-sal-regions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.abroad1-up-sal-region {
  background: var(--a-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--a-border);
  box-shadow: var(--shadow-sm);
  transition: var(--tr);
  display: flex;
  flex-direction: column;
}
.abroad1-up-sal-region:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--a-amber);
}

.abroad1-up-sal-region-img {
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
}
.abroad1-up-sal-region-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.9);
  transition: transform .6s var(--ease);
}
.abroad1-up-sal-region:hover .abroad1-up-sal-region-img img { transform: scale(1.06); }

.abroad1-up-sal-region-body { padding: 24px 26px 28px; flex: 1; }
.abroad1-up-sal-region-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.abroad1-up-sal-region-head h3 {
  font-family: var(--ff-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--a-dark);
  flex: 1;
}

.abroad1-up-sal-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--a-amber);
  border: 1px solid var(--a-amber);
  background: var(--a-amber-pale);
  border-radius: var(--r-xs);
  padding: 4px 10px;
  white-space: nowrap;
}
.abroad1-up-sal-badge--gold {
  color: #8B6914;
  border-color: #C9A84C;
  background: #FEF9E7;
}

.abroad1-up-sal-region-note {
  font-size: 13px;
  color: var(--a-text-light);
  line-height: 1.6;
  margin-bottom: 20px;
}

.abroad1-up-sal-bars { display: flex; flex-direction: column; gap: 12px; }
.abroad1-up-sal-bar-row {
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  align-items: center;
  gap: 12px;
}
.abroad1-up-sal-bar-row > span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--a-text);
  white-space: nowrap;
}
.abroad1-up-sal-bar-row > strong {
  font-size: 12px;
  font-weight: 800;
  color: var(--a-amber);
  text-align: right;
  white-space: nowrap;
}
.abroad1-up-sal-bar-track {
  height: 6px;
  background: var(--a-border-light);
  border-radius: 3px;
  overflow: hidden;
}
.abroad1-up-sal-bar-fill {
  height: 100%;
  width: var(--pct);
  background: linear-gradient(90deg, var(--a-amber), var(--a-amber-light));
  border-radius: 3px;
  animation: abroad1upBarFill 1.2s var(--ease) both;
}
@keyframes abroad1upBarFill {
  from { width: 0; }
  to   { width: var(--pct); }
}

/* ── TEFL PATHWAY ─────────────────────────────────────────────── */
.abroad1-up-pathway {
  background: var(--a-ivory-deep);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.abroad1-up-pathway-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--a-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--a-border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .3;
  pointer-events: none;
}

.abroad1-up-pathway-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 2;
}

/* Photo group */
.abroad1-up-pw-photo-group {
  position: relative;
}
.abroad1-up-pw-main {
  width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--r-lg);
  display: block;
  box-shadow: var(--shadow-lg);
  filter: saturate(0.88);
}
.abroad1-up-pw-accent {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: var(--r-md);
  position: absolute;
  bottom: -20px; right: -20px;
  border: 5px solid var(--a-ivory-deep);
  box-shadow: var(--shadow-md);
  display: block;
}
.abroad1-up-pw-cert {
  position: absolute;
  top: 24px; left: -20px;
  background: var(--a-amber);
  color: #fff;
  border-radius: var(--r-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-amber);
  animation: abroad1upFloat 5s ease-in-out infinite;
}
@keyframes abroad1upFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.abroad1-up-pw-cert strong { display: block; font-size: 13px; font-weight: 800; }
.abroad1-up-pw-cert span  { display: block; font-size: 11px; opacity: .8; margin-top: 2px; }

/* Steps */
.abroad1-up-pw-intro {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--a-text-mid);
  margin-bottom: 36px;
}

.abroad1-up-steps { display: flex; flex-direction: column; gap: 0; margin-bottom: 40px; }
.abroad1-up-step {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--a-border);
  transition: var(--tr);
}
.abroad1-up-step:first-child { border-top: 1px solid var(--a-border); }
.abroad1-up-step:hover { padding-left: 8px; }

.abroad1-up-step-num {
  font-family: var(--ff-display);
  font-size: 2.4rem;
  color: var(--a-amber);
  line-height: 1;
  letter-spacing: .04em;
  min-width: 48px;
  opacity: .7;
  transition: var(--tr);
}
.abroad1-up-step:hover .abroad1-up-step-num { opacity: 1; }

.abroad1-up-step-body strong {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #ff9800;
  margin-bottom: 6px;
}
.abroad1-up-step-body p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--a-text-mid);
}

/* ── STORIES ──────────────────────────────────────────────────── */
.abroad1-up-stories {
  background: var(--a-ivory);
  padding: 100px 0;
  overflow: hidden;
}

.abroad1-up-stories-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 24px;
  align-items: start;
}

.abroad1-up-story {
  background: var(--a-white);
  border: 1px solid var(--a-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--tr);
}
.abroad1-up-story:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--a-amber-light);
}
.abroad1-up-story--feature {
  transform: translateY(-16px);
  box-shadow: var(--shadow-md);
  border-color: var(--a-amber);
  border-width: 2px;
}
.abroad1-up-story--feature:hover { transform: translateY(-22px); }

.abroad1-up-story-photo {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.abroad1-up-story--feature .abroad1-up-story-photo { height: 280px; }
.abroad1-up-story-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  filter: saturate(0.85) brightness(0.88);
  transition: transform .6s var(--ease);
}
.abroad1-up-story:hover .abroad1-up-story-photo img { transform: scale(1.05); }

.abroad1-up-story-location-tag {
  position: absolute;
  bottom: 14px; left: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(28,26,23,.6);
  backdrop-filter: blur(6px);
  border-radius: 100px;
  padding: 5px 14px;
  border: 1px solid rgba(255,255,255,.15);
}

.abroad1-up-story-body { padding: 24px 24px 28px; }

.abroad1-up-story-stars {
  display: flex;
  gap: 3px;
  color: var(--a-amber);
  margin-bottom: 14px;
}

.abroad1-up-story-body blockquote {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--a-text-mid);
  font-style: italic;
  quotes: none;
  margin-bottom: 20px;
  border: none;
  padding: 0;
}

.abroad1-up-story-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.abroad1-up-story-author img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--a-amber-light);
}
.abroad1-up-story-author strong { display: block; font-size: 14px; font-weight: 800; color: var(--a-dark); }
.abroad1-up-story-author span   { display: block; font-size: 11.5px; color: var(--a-text-light); margin-top: 2px; }

/* ── CTA ──────────────────────────────────────────────────────── */
.abroad1-up-cta {
  position: relative;
  padding: 140px 0;
  overflow: hidden;
}
.abroad1-up-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.abroad1-up-cta-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.35) saturate(.7);
}
.abroad1-up-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(162 87 30 / 88%) 0%, rgb(101 63 16 / 82%) 100%);
}

.abroad1-up-cta-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 80px;
}

.abroad1-up-cta-globe {
  flex-shrink: 0;
  width: 280px;
  color: var(--a-amber-light);
  animation: abroad1upSpin 40s linear infinite;
  opacity: .45;
}
@keyframes abroad1upSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.abroad1-up-cta-content { flex: 1; }

.abroad1-up-cta-eyebrow {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--a-amber-light);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.abroad1-up-cta-eyebrow::before, .abroad1-up-cta-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background: var(--a-amber-light);
  opacity: .5;
}

.abroad1-up-cta-h2 {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: .95;
  color: #fff;
  letter-spacing: .03em;
  margin-bottom: 24px;
}
.abroad1-up-cta-h2 em {
  font-style: normal;
  font-family: var(--ff-serif);
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  font-style: italic;
  font-weight: 400;
  color: var(--a-amber-light);
  display: block;
  line-height: 1.05;
  letter-spacing: 0;
}

.abroad1-up-cta-sub {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255,255,255,.62);
  max-width: 540px;
  font-weight: 300;
  margin-bottom: 40px;
}

.abroad1-up-cta-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.abroad1-up-cta-trust {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.abroad1-up-cta-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(255,255,255,.42);
  font-weight: 600;
  letter-spacing: .04em;
}
.abroad1-up-cta-trust svg { color: var(--a-amber-light); opacity: .8; }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .abroad1-up-dest-grid { grid-template-columns: repeat(3, 1fr); }
  .abroad1-up-pos-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .abroad1-up-bento            { grid-template-columns: 1fr; }
  .abroad1-up-bento-tall       { grid-row: auto; }
  .abroad1-up-bento-stack      { flex-direction: row; gap: 20px; }
  .abroad1-up-intro-grid        { grid-template-columns: 1fr; gap: 48px; }
  .abroad1-up-reqs-layout       { grid-template-columns: 1fr; }
  .abroad1-up-reqs-left         { display: none; }
  .abroad1-up-pathway-grid      { grid-template-columns: 1fr; gap: 60px; }
  .abroad1-up-pw-left           { display: none; }
  .abroad1-up-sal-regions       { grid-template-columns: 1fr 1fr; }
  .abroad1-up-stories-grid      { grid-template-columns: 1fr 1fr; }
  .abroad1-up-story--feature    { transform: none; }
  .abroad1-up-cta-globe         { display: none; }
  .abroad1-up-cta-inner         { flex-direction: column; gap: 0; }
}

@media (max-width: 768px) {
  .abroad1-up-container { padding: 0 24px; }
  .abroad1-up-dest-grid { grid-template-columns: repeat(2, 1fr); }
  .abroad1-up-pos-grid  { grid-template-columns: 1fr; }
  .abroad1-up-sal-regions { grid-template-columns: 1fr; }
  .abroad1-up-stories-grid { grid-template-columns: 1fr; }
  .abroad1-up-story--feature { transform: none; }
  .abroad1-up-bento-stack { flex-direction: column; }
  .abroad1-up-req-info-grid { grid-template-columns: 1fr; }
  .abroad1-up-hero-stats { gap: 20px; }
  .abroad1-up-hstat-sep { display: none; }
  .abroad1-up-req-table-head,
  .abroad1-up-req-row {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
  .abroad1-up-req-table-head span:nth-child(4),
  .abroad1-up-req-table-head span:nth-child(5),
  .abroad1-up-req-row > div:nth-child(4),
  .abroad1-up-req-row > div:nth-child(5) { display: none; }
  .abroad1-up-sal-bar-row { grid-template-columns: 70px 1fr 80px; }
  .abroad1-up-cta-btns { flex-direction: column; }
  .abroad1-up-cta-btn-primary,
  .abroad1-up-cta-btn-ghost { justify-content: center; }
}

@media (max-width: 560px) {
  .abroad1-up-dest-grid { grid-template-columns: 1fr; }
  .abroad1-up-hero-anchors { gap: 8px; }
  .abroad1-up-anchor-btn { font-size: 12px; padding: 9px 16px; }
  .abroad1-up-hero-h1 { font-size: clamp(4rem, 14vw, 5.5rem); }
  .abroad1-up-hero-h1 em { font-size: clamp(3.2rem, 12vw, 4.5rem); }
}

/* ============================================================
   Mas-up1.css — Master 150-Hour TEFL Course Page Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap');

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --mas-gold:        #C9922A;
  --mas-gold-light:  #E8B84B;
  --mas-gold-pale:   #FAF0DC;
  --mas-navy:        #0D1B2A;
  --mas-navy-mid:    #1A3050;
  --mas-teal:        #0E6B72;
  --mas-teal-light:  #13939D;
  --mas-cream:       #FDFAF4;
  --mas-warm-white:  #FFF9EF;
  --mas-text-dark:   #1C1C1C;
  --mas-text-mid:    #4A4A4A;
  --mas-text-light:  #7A7A7A;
  --mas-border:      rgba(201,146,42,0.18);
  --mas-shadow:      0 20px 60px rgba(13,27,42,0.12);
  --mas-shadow-gold: 0 8px 32px rgba(201,146,42,0.22);
  --mas-r-lg:        20px;
  --mas-r-xl:        36px;
}

/* ── Reset helpers ──────────────────────────────────────────── */
.mas-page *, .mas-page *::before, .mas-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.mas-page {
  font-family: 'DM Sans', sans-serif;
  color: var(--mas-text-dark);
  background: var(--mas-cream);
  overflow-x: hidden;
  line-height: 1.65;
}
.mas-page a { text-decoration: none; color: inherit; }
.mas-page ul { list-style: none; }
.mas-page img { display: block; max-width: 100%; }

/* ── Container ──────────────────────────────────────────────── */
.mas-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Button styles ──────────────────────────────────────────── */
.mas-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--mas-gold) 0%, #E8A220 100%);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 15px 36px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 28px rgba(201,146,42,0.35);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.mas-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(201,146,42,0.5);
}
.mas-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--mas-gold);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 14px 32px;
  border-radius: 50px;
  border: 2px solid var(--mas-gold);
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.mas-btn-secondary:hover {
  background: var(--mas-gold);
  color: #fff;
  transform: translateY(-2px);
}
.mas-btn-white {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--mas-navy);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 15px 36px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.mas-btn-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* ═══════════════════════════════════════════════════════════════
   1. HERO SECTION
═══════════════════════════════════════════════════════════════ */
.mas-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--mas-navy);
}

.mas-hero__bg-image {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=1800&q=80');
  background-size: cover;
  background-position: center 30%;
  opacity: 0.28;
  transform: scale(1.05);
  animation: mas-hero-zoom 18s ease-in-out infinite alternate;
}
@keyframes mas-hero-zoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.12); }
}

.mas-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(13,27,42,0.97) 0%,
    rgba(13,27,42,0.85) 40%,
    rgba(14,107,114,0.45) 80%,
    rgba(201,146,42,0.15) 100%);
}

/* Geometric decorative lines */
.mas-hero__grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,146,42,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,146,42,0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.mas-hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 120px 0 100px;
}

.mas-hero__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: center;
}

.mas-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(201,146,42,0.15);
  border: 1px solid rgba(201,146,42,0.4);
  border-radius: 50px;
  padding: 8px 20px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fbc87d;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 28px;
  animation: mas-fade-up 0.7s ease both;
}
.mas-hero__eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mas-gold);
  animation: mas-pulse 2s ease infinite;
}
@keyframes mas-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

.mas-hero__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 28px;
  animation: mas-fade-up 0.8s 0.15s ease both;
}
.mas-hero__title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--mas-gold-light), var(--mas-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mas-hero__subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.75);
  max-width: 560px;
  margin-bottom: 40px;
  line-height: 1.75;
  animation: mas-fade-up 0.8s 0.25s ease both;
}

.mas-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
  animation: mas-fade-up 0.8s 0.35s ease both;
}

.mas-hero__stats {
  display: flex;
  gap: 40px;
  animation: mas-fade-up 0.8s 0.45s ease both;
}
.mas-hero__stat {
  display: flex;
  flex-direction: column;
}
.mas-hero__stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: #f2b55b;
  line-height: 1;
}
.mas-hero__stat-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* Hero card */
.mas-hero__card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--mas-r-xl);
  padding: 40px 36px;
  animation: mas-fade-up 0.9s 0.35s ease both;
  position: relative;
  overflow: hidden;
}
.mas-hero__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mas-gold), var(--mas-teal-light), var(--mas-gold));
  background-size: 200% 100%;
  animation: mas-shimmer 3s linear infinite;
}
@keyframes mas-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.mas-hero__card-badge {
  background: linear-gradient(135deg, var(--mas-gold), #E8A220);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 20px;
}

.mas-hero__card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: #e69824ed;
  margin-bottom: 8px;
}

.mas-hero__card-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 28px;
}

.mas-hero__card-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
}
.mas-hero__price-new {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--mas-gold-light);
}
.mas-hero__price-old {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.35);
  text-decoration: line-through;
}

.mas-hero__card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.mas-hero__card-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
}
.mas-hero__card-check {
  width: 20px; height: 20px;
  flex-shrink: 0;
  background: rgba(201,146,42,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mas-hero__card-check svg { width: 10px; height: 10px; }

.mas-hero__card-note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
  margin-top: 14px;
}

/* Scroll indicator */
.mas-hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.4);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: mas-fade-up 1s 0.8s ease both;
}
.mas-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(201,146,42,0.6), transparent);
  animation: mas-scroll-line 1.5s ease-in-out infinite;
}
@keyframes mas-scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes mas-fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   2. TRUST BAR
═══════════════════════════════════════════════════════════════ */
.mas-trust {
  background: var(--mas-navy-mid);
  padding: 0;
  overflow: hidden;
}
.mas-trust__inner {
  display: flex;
  align-items: stretch;
  border-left: 1px solid rgba(255,255,255,0.06);
}
.mas-trust__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 28px;
  border-right: 1px solid rgba(255,255,255,0.06);
  transition: background 0.3s;
}
.mas-trust__item:hover {
  background: rgba(255,255,255,0.04);
}
.mas-trust__icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  background: rgba(201,146,42,0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mas-trust__icon svg { width: 20px; height: 20px; color: var(--mas-gold); }
.mas-trust__label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.3;
}
.mas-trust__label strong {
  display: block;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════
   3. WHY CHOOSE — Feature Grid
═══════════════════════════════════════════════════════════════ */
.mas-why {
  padding: 110px 0;
  background: var(--mas-warm-white);
  position: relative;
}

/* Background: subtle diagonal lines */
.mas-why::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(201,146,42,0.035) 40px,
    rgba(201,146,42,0.035) 41px
  );
  pointer-events: none;
}

.mas-section-header {
  text-align: center;
  margin-bottom: 64px;
  position: relative;
}
.mas-section-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mas-gold);
  margin-bottom: 14px;
}
.mas-section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--mas-navy);
  line-height: 1.15;
  margin-bottom: 18px;
}
.mas-section-title em {
  font-style: italic;
  color: var(--mas-gold);
}
.mas-section-desc {
  font-size: 1.05rem;
  color: var(--mas-text-mid);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.75;
}
.mas-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--mas-gold), var(--mas-teal));
  margin: 20px auto 0;
  border-radius: 2px;
}

.mas-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}

.mas-feature-card {
  background: #fff;
  border-radius: var(--mas-r-lg);
  padding: 36px 30px;
  border: 1px solid rgba(201,146,42,0.1);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.mas-feature-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--mas-gold), var(--mas-teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.mas-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mas-shadow), 0 0 0 1px rgba(201,146,42,0.15);
}
.mas-feature-card:hover::after { transform: scaleX(1); }

.mas-feature-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: var(--mas-gold-pale);
  transition: all 0.3s ease;
}
.mas-feature-card:hover .mas-feature-icon {
  background: var(--mas-gold);
}
.mas-feature-icon svg { width: 26px; height: 26px; color: var(--mas-gold); transition: color 0.3s; }
.mas-feature-card:hover .mas-feature-icon svg { color: #fff; }

.mas-feature-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--mas-navy);
  margin-bottom: 10px;
}
.mas-feature-desc {
  font-size: 0.9rem;
  color: var(--mas-text-mid);
  line-height: 1.7;
  margin-bottom: 18px;
}
.mas-feature-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--mas-text-mid);
  padding: 4px 0;
}
.mas-feature-list li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mas-gold);
  flex-shrink: 0;
}

/* Stats strip */
.mas-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: linear-gradient(135deg, #315882 0%, var(--mas-navy-mid) 100%);
  border-radius: var(--mas-r-xl);
  overflow: hidden;
  margin-top: 60px;
  box-shadow: var(--mas-shadow);
}
.mas-stat-item {
  padding: 44px 32px;
  text-align: center;
  position: relative;
  transition: background 0.3s;
}
.mas-stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: rgba(255,255,255,0.08);
}
.mas-stat-item:hover { background: rgba(201,146,42,0.08); }
.mas-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--mas-gold-light);
  line-height: 1;
  margin-bottom: 8px;
}
.mas-stat-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════════════════════════
   4. CURRICULUM SECTION
═══════════════════════════════════════════════════════════════ */
.mas-curriculum {
  padding: 110px 0;
  background: var(--mas-cream);
  position: relative;
  overflow: hidden;
}

/* Organic blob accent */
.mas-curriculum::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -180px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(14,107,114,0.07) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.mas-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.mas-module-card {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: #fff;
  border-radius: var(--mas-r-lg);
  padding: 28px;
  border: 1px solid rgba(201,146,42,0.1);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}
.mas-module-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--mas-gold), var(--mas-teal));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s ease;
}
.mas-module-card:hover {
  box-shadow: var(--mas-shadow);
  transform: translateX(4px);
}
.mas-module-card:hover::before { transform: scaleY(1); }

.mas-module-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: rgba(201,146,42,0.15);
  line-height: 1;
  flex-shrink: 0;
  width: 50px;
  transition: color 0.3s;
}
.mas-module-card:hover .mas-module-num { color: rgba(201,146,42,0.35); }

.mas-module-content { flex: 1; }
.mas-module-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mas-teal);
  background: rgba(14,107,114,0.08);
  padding: 3px 10px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 8px;
}
.mas-module-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mas-navy);
  margin-bottom: 8px;
  line-height: 1.3;
}
.mas-module-desc {
  font-size: 0.85rem;
  color: var(--mas-text-mid);
  line-height: 1.6;
  margin-bottom: 14px;
}
.mas-module-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mas-topic-pill {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--mas-text-mid);
  background: var(--mas-gold-pale);
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid rgba(201,146,42,0.2);
}
.mas-module-hours {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mas-gold);
  white-space: nowrap;
}

/* Curriculum CTA */
.mas-curriculum__cta {
  text-align: center;
  margin-top: 48px;
}

/* ═══════════════════════════════════════════════════════════════
   5. HOW IT WORKS
═══════════════════════════════════════════════════════════════ */
.mas-process {
  padding: 110px 0;
  background: #f9efe191;
  position: relative;
  overflow: hidden;
}

.mas-process__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 50%, rgba(201,146,42,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 50%, rgba(14,107,114,0.06) 0%, transparent 50%);
  pointer-events: none;
}

.mas-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: 64px;
}

/* Connector line */
.mas-steps::before {
  content: '';
  position: absolute;
  top: 52px;
  left: calc(12.5% + 0px);
  right: calc(12.5%);
  height: 2px;
  background: linear-gradient(90deg, var(--mas-gold), var(--mas-teal), var(--mas-gold));
  z-index: 0;
}

.mas-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.mas-step__bubble {
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 2px solid var(--mas-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  position: relative;
  transition: all 0.4s ease;
  box-shadow: 0 8px 30px rgba(201,146,42,0.12);
}
.mas-step:hover .mas-step__bubble {
  background: var(--mas-navy);
  border-color: var(--mas-gold);
  transform: scale(1.1);
  box-shadow: var(--mas-shadow-gold);
}
.mas-step__bubble svg { width: 36px; height: 36px; color: var(--mas-gold); transition: color 0.3s; }
.mas-step:hover .mas-step__bubble svg { color: var(--mas-gold-light); }

.mas-step__num {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 28px; height: 28px;
  background: var(--mas-gold);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mas-step__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mas-navy);
  margin-bottom: 10px;
}
.mas-step__desc {
  font-size: 0.85rem;
  color: var(--mas-text-mid);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════
   6. DESTINATIONS
═══════════════════════════════════════════════════════════════ */
.mas-destinations {
  padding: 110px 0;
  background: #fefefe;
  overflow: hidden;
}

.mas-dest-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 64px;
}
.mas-dest-intro__text p {
  font-size: 1rem;
  color: var(--mas-text-mid);
  line-height: 1.8;
  margin-top: 20px;
}

.mas-dest-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.mas-dest-badge {
  background: var(--mas-gold-pale);
  border: 1px solid rgba(201,146,42,0.25);
  color: var(--mas-navy);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mas-dest-badge svg { width: 14px; height: 14px; color: var(--mas-gold); }

/* Destination image grid */
.mas-dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mas-dest-card {
  border-radius: var(--mas-r-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  cursor: pointer;
}
.mas-dest-card:first-child {
  grid-row: span 2;
  aspect-ratio: auto;
}

.mas-dest-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.mas-dest-card:hover .mas-dest-card__img {
  transform: scale(1.08);
}

.mas-dest-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,27,42,0.88) 0%, rgba(13,27,42,0.1) 55%, transparent 100%);
  transition: opacity 0.3s;
}

.mas-dest-card__info {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: 24px;
  transform: translateY(10px);
  transition: transform 0.3s ease;
}
.mas-dest-card:hover .mas-dest-card__info { transform: translateY(0); }

.mas-dest-card__country {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.mas-dest-card__salary {
  font-size: 0.82rem;
  color: var(--mas-gold-light);
  font-weight: 600;
}
.mas-dest-card__desc {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  margin-top: 6px;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.3s 0.1s;
}
.mas-dest-card:hover .mas-dest-card__desc { opacity: 1; }

.mas-dest-intro__visual {
  position: relative;
}
.mas-dest-intro__img {
  border-radius: var(--mas-r-xl);
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  box-shadow: var(--mas-shadow);
}
.mas-dest-intro__float {
  position: absolute;
  bottom: -20px;
  left: -20px;
  background: #fff;
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(201,146,42,0.15);
}
.mas-dest-intro__float-icon {
  width: 48px; height: 48px;
  background: var(--mas-gold-pale);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mas-dest-intro__float-icon svg { width: 24px; height: 24px; color: var(--mas-gold); }
.mas-dest-intro__float-text strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--mas-navy);
}
.mas-dest-intro__float-text span {
  font-size: 0.78rem;
  color: var(--mas-text-light);
}

/* ═══════════════════════════════════════════════════════════════
   7. CERTIFICATE SECTION
═══════════════════════════════════════════════════════════════ */
.mas-certificate {
  padding: 110px 0;
  background: linear-gradient(160deg, var(--mas-navy) 0%, var(--mas-navy-mid) 50%, #0a2235 100%);
  position: relative;
  overflow: hidden;
}

.mas-certificate::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(201,146,42,0.12) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(14,107,114,0.12) 0%, transparent 40%),
    repeating-linear-gradient(
      45deg,
      transparent, transparent 60px,
      rgba(255,255,255,0.015) 60px, rgba(255,255,255,0.015) 61px
    );
  pointer-events: none;
}

.mas-cert-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
}

.mas-cert-info { color: #fff; }
.mas-cert-info .mas-section-eyebrow { color: var(--mas-gold-light); }
.mas-cert-info .mas-section-title { color: #fff; text-align: left; }
.mas-cert-info .mas-divider { margin: 20px 0; }
.mas-cert-info .mas-section-desc { color: rgba(255,255,255,0.65); text-align: left; margin: 0; }

.mas-cert-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 36px 0;
}
.mas-cert-feat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 20px;
  transition: all 0.3s;
}
.mas-cert-feat:hover {
  background: rgba(201,146,42,0.08);
  border-color: rgba(201,146,42,0.25);
}
.mas-cert-feat svg { width: 22px; height: 22px; color: var(--mas-gold); margin-bottom: 10px; }
.mas-cert-feat strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.mas-cert-feat span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}

/* Certificate mockup */
.mas-cert-mockup {
  position: relative;
  perspective: 1000px;
}
.mas-cert-card {
  background: linear-gradient(145deg, #fff 0%, #fdf8ee 100%);
  border-radius: 20px;
  padding: 44px 40px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,146,42,0.3);
  position: relative;
  overflow: hidden;
  animation: mas-cert-float 5s ease-in-out infinite;
}
@keyframes mas-cert-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%       { transform: translateY(-12px) rotate(0.5deg); }
}
.mas-cert-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 8px solid transparent;
  background: linear-gradient(#fdf8ee, #fdf8ee) padding-box,
              linear-gradient(135deg, var(--mas-gold), var(--mas-teal), var(--mas-gold)) border-box;
  border-radius: 20px;
  pointer-events: none;
}
.mas-cert-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 7rem;
  font-weight: 700;
  color: rgba(201,146,42,0.06);
  white-space: nowrap;
  pointer-events: none;
}
.mas-cert-header {
  text-align: center;
  margin-bottom: 24px;
}
.mas-cert-logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mas-navy);
  letter-spacing: 0.05em;
}
.mas-cert-accred {
  font-size: 0.7rem;
  color: var(--mas-gold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 2px;
}
.mas-cert-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mas-gold), transparent);
  margin: 16px 0;
}
.mas-cert-body { text-align: center; }
.mas-cert-subtitle {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--mas-text-light);
  margin-bottom: 8px;
}
.mas-cert-main-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--mas-navy);
  margin-bottom: 20px;
}
.mas-cert-awarded {
  font-size: 0.78rem;
  color: var(--mas-text-light);
  margin-bottom: 8px;
}
.mas-cert-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-style: italic;
  font-weight: 600;
  color: var(--mas-navy);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201,146,42,0.3);
}
.mas-cert-desc {
  font-size: 0.77rem;
  color: var(--mas-text-mid);
  line-height: 1.6;
  margin-bottom: 20px;
}
.mas-cert-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--mas-text-light);
}
.mas-cert-footer span { display: flex; flex-direction: column; gap: 2px; }
.mas-cert-footer strong { color: var(--mas-navy); font-size: 0.75rem; }
.mas-cert-seal {
  position: absolute;
  bottom: 36px;
  right: 36px;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mas-gold), #E8A220);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(201,146,42,0.4);
  animation: mas-seal-spin 20s linear infinite;
}
@keyframes mas-seal-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.mas-cert-seal-inner {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8A220, var(--mas-gold));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mas-seal-spin 20s linear infinite reverse;
}
.mas-cert-seal-inner svg { width: 26px; height: 26px; color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   8. PRICING SECTION
═══════════════════════════════════════════════════════════════ */
.mas-pricing {
  padding: 110px 0;
  background: var(--mas-warm-white);
  position: relative;
  overflow: hidden;
}
.mas-pricing::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 100%, rgba(14,107,114,0.06) 0%, transparent 55%);
  pointer-events: none;
}

.mas-pricing__inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: start;
  position: relative;
}

.mas-pricing__card {
  background: var(--mas-navy);
  border-radius: var(--mas-r-xl);
  overflow: hidden;
  box-shadow: var(--mas-shadow);
  position: relative;
}
.mas-pricing__card-top {
  padding: 44px 40px 36px;
  background: linear-gradient(135deg, var(--mas-navy) 0%, var(--mas-navy-mid) 100%);
  position: relative;
  overflow: hidden;
}
.mas-pricing__card-top::after {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(201,146,42,0.08);
}
.mas-pricing__popular {
  background: var(--mas-gold);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 20px;
}
.mas-pricing__name {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.mas-pricing__tagline {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
}
.mas-pricing__amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.mas-pricing__currency { font-size: 1.4rem; color: var(--mas-gold-light); font-weight: 600; }
.mas-pricing__price {
  font-family: 'Playfair Display', serif;
  font-size: 3.6rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.mas-pricing__old {
  font-size: 1rem;
  color: rgba(255,255,255,0.3);
  text-decoration: line-through;
}
.mas-pricing__save {
  font-size: 0.8rem;
  color: var(--mas-gold-light);
  font-weight: 600;
  margin-bottom: 28px;
}

.mas-pricing__card-body {
  padding: 32px 40px 40px;
  background: rgba(255,255,255,0.03);
}
.mas-pricing__includes-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 18px;
}
.mas-pricing__items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}
.mas-pricing__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.82);
}
.mas-pricing__tick {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(201,146,42,0.15);
  border: 1px solid rgba(201,146,42,0.3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.mas-pricing__tick svg { width: 11px; height: 11px; color: var(--mas-gold); }
.mas-pricing__security {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  margin-top: 16px;
}
.mas-pricing__security svg { width: 14px; height: 14px; color: rgba(255,255,255,0.3); }

/* Benefits column */
.mas-pricing__benefits-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--mas-navy);
  margin-bottom: 10px;
  line-height: 1.3;
}
.mas-pricing__benefits-sub {
  font-size: 0.95rem;
  color: var(--mas-text-mid);
  margin-bottom: 32px;
  line-height: 1.7;
}
.mas-benefit-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mas-benefit-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(201,146,42,0.1);
}
.mas-benefit-item:last-child { border-bottom: none; }
.mas-benefit-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--mas-gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mas-benefit-icon svg { width: 20px; height: 20px; color: var(--mas-gold); }
.mas-benefit-text strong {
  display: block;
  font-weight: 600;
  color: var(--mas-navy);
  font-size: 0.92rem;
  margin-bottom: 3px;
}
.mas-benefit-text span {
  font-size: 0.82rem;
  color: var(--mas-text-mid);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════
   9. TESTIMONIALS
═══════════════════════════════════════════════════════════════ */
.mas-testimonials {
  padding: 110px 0;
  background: var(--mas-cream);
  overflow: hidden;
  position: relative;
}

.mas-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.mas-review-card {
  background: #fff;
  border-radius: var(--mas-r-lg);
  padding: 32px 28px;
  border: 1px solid rgba(201,146,42,0.1);
  transition: all 0.35s ease;
  position: relative;
}
.mas-review-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--mas-shadow);
}
.mas-review-card:nth-child(2) {
  background: var(--mas-navy);
  border-color: transparent;
}
.mas-review-card:nth-child(2) .mas-review-text { color: rgba(255,255,255,0.75); }
.mas-review-card:nth-child(2) .mas-reviewer-name { color: #fff; }
.mas-review-card:nth-child(2) .mas-reviewer-role { color: rgba(255,255,255,0.45); }

.mas-review-quote-icon {
  width: 40px; height: 40px;
  background: var(--mas-gold-pale);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.mas-review-card:nth-child(2) .mas-review-quote-icon {
  background: rgba(201,146,42,0.12);
}
.mas-review-quote-icon svg { width: 20px; height: 20px; color: var(--mas-gold); }

.mas-review-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}
.mas-review-stars svg { width: 16px; height: 16px; color: var(--mas-gold); fill: var(--mas-gold); }

.mas-review-text {
  font-size: 0.9rem;
  color: var(--mas-text-mid);
  line-height: 1.75;
  margin-bottom: 22px;
  font-style: italic;
}

.mas-reviewer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mas-reviewer-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(201,146,42,0.2);
}
.mas-reviewer-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--mas-navy);
}
.mas-reviewer-role {
  font-size: 0.75rem;
  color: var(--mas-text-light);
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   10. CTA BANNER
═══════════════════════════════════════════════════════════════ */
.mas-cta {
  padding: 110px 0;
  background: linear-gradient(135deg, var(--mas-teal) 0%, var(--mas-navy-mid) 50%, var(--mas-navy) 100%);
  position: relative;
  overflow: hidden;
}
.mas-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(201,146,42,0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(255,255,255,0.05) 0%, transparent 40%),
    repeating-linear-gradient(
      -60deg,
      transparent, transparent 80px,
      rgba(255,255,255,0.025) 80px, rgba(255,255,255,0.025) 81px
    );
  pointer-events: none;
}
.mas-cta__inner {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.mas-cta__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--mas-gold-light);
  font-weight: 700;
  margin-bottom: 20px;
}
.mas-cta__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 22px;
}
.mas-cta__title em {
  font-style: italic;
  color: var(--mas-gold-light);
}
.mas-cta__subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 44px;
  line-height: 1.75;
}
.mas-cta__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.mas-cta__note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  margin-top: 22px;
}
.mas-cta__trust {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.mas-cta__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}
.mas-cta__trust-item svg { width: 16px; height: 16px; color: var(--mas-gold-light); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .mas-hero__inner { grid-template-columns: 1fr; }
  .mas-hero__card { display: none; }
  .mas-features { grid-template-columns: repeat(2, 1fr); }
  .mas-dest-intro { grid-template-columns: 1fr; gap: 40px; }
  .mas-cert-inner { grid-template-columns: 1fr; }
  .mas-pricing__inner { grid-template-columns: 1fr; }
  .mas-pricing__card { order: 2; }
  .mas-steps::before { display: none; }
  .mas-steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

@media (max-width: 768px) {
  .mas-features { grid-template-columns: 1fr; }
  .mas-modules-grid { grid-template-columns: 1fr; }
  .mas-dest-grid { grid-template-columns: repeat(2, 1fr); }
  .mas-dest-card:first-child { grid-row: auto; }
  .mas-reviews-grid { grid-template-columns: 1fr; }
  .mas-stats-strip { grid-template-columns: repeat(2, 1fr); }
  .mas-trust__inner { flex-direction: column; }
  .mas-steps { grid-template-columns: 1fr; }
  .mas-cert-features { grid-template-columns: 1fr; }
}

/* ============================================================
   adv-up1.css — Advanced 120-Hour TEFL Course Page Styles
   Editorial / Magazine aesthetic — teal, coral, warm white
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Mono:wght@300;400;500&display=swap');

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --adv-teal:        #0A7C6E;
  --adv-teal-dark:   #065E53;
  --adv-teal-light:  #12A898;
  --adv-teal-pale:   #E6F5F3;
  --adv-coral:       #E8634A;
  --adv-coral-light: #F0876F;
  --adv-coral-pale:  #FDF0ED;
  --adv-amber:       #E8A520;
  --adv-amber-pale:  #FDF5E0;
  --adv-ink:         #141414;
  --adv-ink-mid:     #3A3A3A;
  --adv-ink-light:   #6B6B6B;
  --adv-paper:       #FAFAF7;
  --adv-paper-warm:  #F5F3EE;
  --adv-paper-white: #FFFFFF;
  --adv-rule:        rgba(10,124,110,0.12);
  --adv-shadow-sm:   0 4px 16px rgba(10,124,110,0.10);
  --adv-shadow-md:   0 12px 40px rgba(14,14,14,0.10);
  --adv-shadow-lg:   0 24px 64px rgba(14,14,14,0.14);
  --adv-r-sm:        10px;
  --adv-r-md:        18px;
  --adv-r-lg:        28px;
  --adv-r-xl:        40px;
}

/* ── Scoped reset ───────────────────────────────────────────── */
.adv-page *, .adv-page *::before, .adv-page *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.adv-page {
  font-family: 'Lora', Georgia, serif;
  color: var(--adv-ink);
  background: var(--adv-paper);
  overflow-x: hidden;
  line-height: 1.7;
}
.adv-page a { text-decoration: none; color: inherit; }
.adv-page ul { list-style: none; }
.adv-page img { display: block; max-width: 100%; }

/* ── Container ──────────────────────────────────────────────── */
.adv-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Buttons ────────────────────────────────────────────────── */
.adv-btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: #07594f;
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 15px 34px;
  border-radius: 4px;
  border: none; cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 24px rgba(10,124,110,0.28);
}
.adv-btn-primary:hover {
  background: var(--adv-teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(10,124,110,0.38);
}
.adv-btn-primary svg { width: 15px; height: 15px; }

.adv-btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent;
  color: var(--adv-teal);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 4px;
  border: 2px solid var(--adv-teal);
  cursor: pointer;
  transition: all 0.3s ease;
}
.adv-btn-outline:hover {
  background: var(--adv-teal);
  color: #fff;
  transform: translateY(-2px);
}
.adv-btn-outline svg { width: 15px; height: 15px; }

.adv-btn-coral {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--adv-teal);
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 15px 34px;
  border-radius: 4px;
  border: none; cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 24px rgba(232,99,74,0.28);
}
.adv-btn-coral:hover {
  background: #d0573e;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(232,99,74,0.38);
}
.adv-btn-coral svg { width: 15px; height: 15px; }

/* ── Section helpers ────────────────────────────────────────── */
.adv-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--adv-teal);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.adv-label::before {
  content: '';
  display: block;
  width: 28px; height: 2px;
  background: var(--adv-teal);
  flex-shrink: 0;
}
.adv-label--coral { color: var(--adv-coral); }
.adv-label--coral::before { background: var(--adv-coral); }
.adv-label--white { color: rgba(255,255,255,0.65); }
.adv-label--white::before { background: rgba(255,255,255,0.4); }

.adv-heading-xl {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.adv-heading-lg {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.adv-heading-md {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}
.adv-em { color: var(--adv-teal); }
.adv-em-coral { color: var(--adv-teal) }

.adv-body {
  font-size: 1rem;
  color: var(--adv-ink-mid);
  line-height: 1.8;
}

/* ── Dot grid pattern utility ───────────────────────────────── */
.adv-dot-bg {
  background-image: radial-gradient(circle, rgba(10,124,110,0.12) 1px, transparent 1px);
  background-size: 28px 28px;
}
.adv-stripe-bg {
  background-image: repeating-linear-gradient(
    -55deg,
    transparent, transparent 30px,
    rgba(10,124,110,0.04) 30px, rgba(10,124,110,0.04) 31px
  );
}

/* ═══════════════════════════════════════════════════════════════
   1. HERO
═══════════════════════════════════════════════════════════════ */
.adv-hero {
  position: relative;
  background: var(--adv-paper-warm);
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Background mosaic of images */
.adv-hero__mosaic {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 48%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}
.adv-hero__mosaic-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 8s ease;
}
.adv-hero__mosaic-img:hover { transform: scale(1.04); }
.adv-hero__mosaic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--adv-paper-warm) 0%, rgba(245,243,238,0.6) 30%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}
.adv-hero__mosaic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--adv-paper-warm) 0%, transparent 12%, transparent 88%, var(--adv-paper-warm) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Dot-grid left accent */
.adv-hero__dot-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 55%;
  background-image: radial-gradient(circle, rgba(10,124,110,0.09) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

/* Large decorative letter */
.adv-hero__bg-letter {
  position: absolute;
  left: -40px; bottom: -60px;
  font-family: 'Syne', sans-serif;
  font-size: 22rem;
  font-weight: 800;
  color: rgba(10,124,110,0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
}

.adv-hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 120px 0 100px;
}

.adv-hero__inner {
  max-width: 580px;
}

.adv-hero__tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--adv-teal-pale);
  border: 1px solid rgba(10,124,110,0.2);
  color: var(--adv-teal-dark);
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 2px;
  margin-bottom: 24px;
  animation: adv-fade-in 0.7s ease both;
}
.adv-hero__tag-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--adv-teal);
  animation: adv-blink 2.5s ease infinite;
}
@keyframes adv-blink {
  0%, 100% { opacity: 1; } 50% { opacity: 0.3; }
}

.adv-hero__title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--adv-ink);
  margin-bottom: 28px;
  animation: adv-fade-in 0.8s 0.1s ease both;
}
.adv-hero__title-accent {
  color: var(--adv-teal);
  display: block;
  font-style: italic;
  font-family: 'Lora', serif;
  font-size: 0.85em;
  font-weight: 700;
}

.adv-hero__desc {
  font-size: 1.05rem;
  color: var(--adv-ink-mid);
  max-width: 480px;
  line-height: 1.8;
  margin-bottom: 36px;
  animation: adv-fade-in 0.8s 0.2s ease both;
}

.adv-hero__actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 52px;
  animation: adv-fade-in 0.8s 0.3s ease both;
}

.adv-hero__meta {
  display: flex; gap: 32px; flex-wrap: wrap;
  animation: adv-fade-in 0.8s 0.4s ease both;
  padding-top: 32px;
  border-top: 1px solid var(--adv-rule);
}
.adv-hero__meta-item {
  display: flex; flex-direction: column;
}
.adv-hero__meta-val {
  font-family: 'Syne', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--adv-teal);
  line-height: 1;
}
.adv-hero__meta-key {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--adv-ink-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

/* Floating pill badges on hero */
.adv-hero__badges {
  position: absolute;
  right: 3%;
  bottom: 60px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: adv-fade-in 1s 0.6s ease both;
}
.adv-hero__badge {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(10,124,110,0.12);
  border-radius: var(--adv-r-sm);
  padding: 12px 18px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--adv-shadow-sm);
  font-size: 0.82rem;
}
.adv-hero__badge svg { width: 18px; height: 18px; color: var(--adv-teal); flex-shrink: 0; }
.adv-hero__badge-text { font-family: 'Syne', sans-serif; font-weight: 600; color: var(--adv-ink); font-size: 0.8rem; }
.adv-hero__badge-sub { font-size: 0.7rem; color: var(--adv-ink-light); line-height: 1.3; }

@keyframes adv-fade-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   2. TICKER / MARQUEE
═══════════════════════════════════════════════════════════════ */
.adv-ticker {
  background: var(--adv-teal);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
}
.adv-ticker__track {
  display: flex;
  gap: 0;
  animation: adv-scroll-left 30s linear infinite;
  white-space: nowrap;
}
@keyframes adv-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.adv-ticker__item {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Syne', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding: 0 36px;
  flex-shrink: 0;
}
.adv-ticker__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   3. ABOUT / OVERVIEW
═══════════════════════════════════════════════════════════════ */
.adv-overview {
  padding: 100px 0;
  background: var(--adv-paper);
  position: relative;
}

.adv-overview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.adv-overview__image-stack {
  position: relative;
}
.adv-overview__img-main {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--adv-r-md);
  box-shadow: var(--adv-shadow-lg);
  position: relative;
  z-index: 2;
}
.adv-overview__img-accent {
  position: absolute;
  width: 52%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--adv-r-md);
  bottom: -32px;
  right: -32px;
  z-index: 3;
  border: 5px solid var(--adv-paper);
  box-shadow: var(--adv-shadow-md);
}
.adv-overview__img-bg {
  position: absolute;
  inset: -20px -20px 40px 20px;
  background-color: var(--adv-teal-pale);
  border-radius: var(--adv-r-md);
  z-index: 1;
}
.adv-overview__img-badge {
  position: absolute;
  top: -20px;
  left: 20px;
  z-index: 4;
  background: var(--adv-coral);
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 2px;
}

.adv-overview__text .adv-body { margin: 20px 0 32px; }

.adv-overview__checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 36px;
}
.adv-checklist-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.88rem;
  color: var(--adv-ink-mid);
  line-height: 1.5;
}
.adv-checklist-item__icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--adv-teal-pale);
  border: 1px solid rgba(10,124,110,0.2);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.adv-checklist-item__icon svg { width: 10px; height: 10px; color: var(--adv-teal); }

/* ═══════════════════════════════════════════════════════════════
   4. COURSE HIGHLIGHTS STRIP
═══════════════════════════════════════════════════════════════ */
.adv-highlights {
  background: var(--adv-teal-dark);
  padding: 0;
  position: relative;
  overflow: hidden;
}
.adv-highlights::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 50%, rgba(255,255,255,0.06) 0%, transparent 40%),
    radial-gradient(circle at 90% 50%, rgba(18,168,152,0.18) 0%, transparent 40%);
  pointer-events: none;
}
.adv-highlights__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.adv-highlight-item {
  padding: 44px 28px;
  border-right: 1px solid rgba(255,255,255,0.07);
  transition: background 0.3s;
  position: relative;
}
.adv-highlight-item:last-child { border-right: none; }
.adv-highlight-item:hover { background: rgba(255,255,255,0.04); }

.adv-highlight-item__icon {
  width: 48px; height: 48px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.adv-highlight-item__icon svg { width: 22px; height: 22px; color: var(--adv-teal-light); }

.adv-highlight-item__num {
  font-family: 'Syne', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
}
.adv-highlight-item__label {
  font-family: 'Lora', serif;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   5. WHY CHOOSE — Feature cards
═══════════════════════════════════════════════════════════════ */
.adv-features {
  padding: 100px 0;
  background: var(--adv-paper-warm);
  position: relative;
  overflow: hidden;
}
.adv-features::after {
  content: '';
  position: absolute;
  right: -100px; top: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,99,74,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.adv-features__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 60px;
}
.adv-features__header-cta { text-align: right; }
.adv-features__header-cta p {
  font-size: 0.9rem;
  color: var(--adv-ink-light);
  margin-bottom: 16px;
  font-style: italic;
}

.adv-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.adv-feature {
  background: var(--adv-paper-white);
  border-radius: var(--adv-r-md);
  padding: 32px 28px;
  border: 1px solid rgba(10,124,110,0.08);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}
.adv-feature::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--adv-teal), var(--adv-teal-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.adv-feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--adv-shadow-md);
  border-color: rgba(10,124,110,0.15);
}
.adv-feature:hover::before { transform: scaleX(1); }

.adv-feature__num {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--adv-teal);
  letter-spacing: 0.12em;
  margin-bottom: 16px;
  opacity: 0.7;
}
.adv-feature__icon {
  width: 50px; height: 50px;
  background: var(--adv-teal-pale);
  border-radius: var(--adv-r-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  transition: all 0.3s;
}
.adv-feature:hover .adv-feature__icon { background: var(--adv-teal); }
.adv-feature__icon svg { width: 22px; height: 22px; color: var(--adv-teal); transition: color 0.3s; }
.adv-feature:hover .adv-feature__icon svg { color: #fff; }

.adv-feature__title {
  font-family: 'Syne', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--adv-ink);
  margin-bottom: 10px;
}
.adv-feature__desc {
  font-size: 0.875rem;
  color: var(--adv-ink-mid);
  line-height: 1.7;
  margin-bottom: 16px;
}
.adv-feature__tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.adv-feature__tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  color: var(--adv-teal-dark);
  background: var(--adv-teal-pale);
  padding: 3px 10px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   6. CURRICULUM — 6 Modules
═══════════════════════════════════════════════════════════════ */
.adv-curriculum {
  padding: 100px 0;
  background: var(--adv-paper);
  position: relative;
}

.adv-curriculum__intro {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
  align-items: start;
  margin-bottom: 64px;
}
.adv-curriculum__sidebar {
  background: var(--adv-teal);
  border-radius: var(--adv-r-md);
  padding: 36px 32px;
  color: #fff;
  position: sticky;
  top: 20px;
}
.adv-curriculum__sidebar-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}
.adv-curriculum__total {
  display: flex; flex-direction: column; gap: 12px;
}
.adv-curriculum__total-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
}
.adv-curriculum__total-item:last-child { border-bottom: none; }
.adv-curriculum__total-item strong { color: #fff; font-family: 'Syne', sans-serif; font-weight: 700; }

/* Module list */
.adv-modules {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adv-module {
  background: var(--adv-paper-white);
  border: 1px solid rgba(10,124,110,0.1);
  border-radius: var(--adv-r-md);
  overflow: hidden;
  transition: all 0.3s ease;
}
.adv-module:hover {
  border-color: rgba(10,124,110,0.2);
  box-shadow: var(--adv-shadow-sm);
  transform: translateX(4px);
}

.adv-module__header {
  display: flex; align-items: center; gap: 20px;
  padding: 24px 28px;
}
.adv-module__num-badge {
  width: 48px; height: 48px;
  border-radius: var(--adv-r-sm);
  background: var(--adv-teal-pale);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--adv-teal-dark);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  border: 1px solid rgba(10,124,110,0.15);
  transition: all 0.3s;
}
.adv-module:hover .adv-module__num-badge {
  background: var(--adv-teal);
  color: #fff;
  border-color: transparent;
}
.adv-module__info { flex: 1; }
.adv-module__tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--adv-ink-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.adv-module__title {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--adv-ink);
  line-height: 1.3;
}
.adv-module__hours {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--adv-teal);
  background: var(--adv-teal-pale);
  padding: 5px 12px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.adv-module__body {
  padding: 0 28px 24px;
  padding-left: calc(28px + 48px + 20px);
}
.adv-module__desc {
  font-size: 0.875rem;
  color: var(--adv-ink-mid);
  line-height: 1.7;
  margin-bottom: 14px;
}
.adv-module__outcomes {
  display: flex; flex-wrap: wrap; gap: 7px;
}
.adv-module__outcome {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem;
  color: var(--adv-ink-mid);
  background: var(--adv-paper-warm);
  padding: 5px 12px;
  border-radius: 30px;
  border: 1px solid var(--adv-rule);
}
.adv-module__outcome svg { width: 11px; height: 11px; color: var(--adv-teal); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   7. HOW IT WORKS
═══════════════════════════════════════════════════════════════ */
.adv-process {
  padding: 100px 0;
  background: var(--adv-paper-warm);
  position: relative;
  overflow: hidden;
}
.adv-process::before {
  content: '';
  position: absolute;
  bottom: -200px; left: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,124,110,0.07) 0%, transparent 65%);
  pointer-events: none;
}

.adv-process__header { text-align: center; margin-bottom: 64px; }
.adv-process__header .adv-label { justify-content: center; }
.adv-process__header .adv-label::before { display: none; }

.adv-process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
}
/* Connecting dashed line */
.adv-process__steps::after {
  content: '';
  position: absolute;
  top: 30px;
  left: calc(12.5%);
  right: calc(12.5%);
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--adv-teal) 0px, var(--adv-teal) 8px,
    transparent 8px, transparent 16px
  );
  opacity: 0.3;
  z-index: 0;
}

.adv-process__step {
  text-align: center;
  position: relative;
  z-index: 1;
}
.adv-process__step-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--adv-paper-white);
  border: 2px solid var(--adv-rule);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  transition: all 0.35s ease;
  box-shadow: var(--adv-shadow-sm);
  position: relative;
}
.adv-process__step:hover .adv-process__step-icon {
  background: var(--adv-teal);
  border-color: var(--adv-teal);
  transform: scale(1.12);
  box-shadow: 0 8px 28px rgba(10,124,110,0.3);
}
.adv-process__step-icon svg { width: 24px; height: 24px; color: var(--adv-teal); transition: color 0.3s; }
.adv-process__step:hover .adv-process__step-icon svg { color: #fff; }

.adv-process__step-num {
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  background: var(--adv-coral);
  color: #fff;
  border-radius: 50%;
  font-family: 'Syne', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.adv-process__step-title {
  font-family: 'Syne', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--adv-ink);
  margin-bottom: 8px;
}
.adv-process__step-desc {
  font-size: 0.83rem;
  color: var(--adv-ink-light);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════
   8. DESTINATIONS
═══════════════════════════════════════════════════════════════ */
.adv-destinations {
  padding: 100px 0;
  background: var(--adv-paper);
  overflow: hidden;
}

.adv-destinations__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 56px;
}
.adv-destinations__header-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.adv-dest-stat {
  background: var(--adv-teal-pale);
  border-radius: var(--adv-r-sm);
  padding: 24px 20px;
  border: 1px solid rgba(10,124,110,0.1);
  transition: all 0.3s;
}
.adv-dest-stat:hover { background: var(--adv-teal); }
.adv-dest-stat:hover .adv-dest-stat__num,
.adv-dest-stat:hover .adv-dest-stat__label { color: #fff; }
.adv-dest-stat__num {
  font-family: 'Syne', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--adv-teal-dark);
  line-height: 1;
  margin-bottom: 4px;
}
.adv-dest-stat__label {
  font-size: 0.8rem;
  color: var(--adv-ink-mid);
  line-height: 1.4;
}

/* Photo reel */
.adv-destinations__photos {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-rows: 260px;
  gap: 12px;
}
.adv-dest-photo {
  border-radius: var(--adv-r-sm);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.adv-dest-photo:first-child { grid-row: span 2; }
.adv-destinations__photos {
  grid-template-rows: 180px 180px;
}

.adv-dest-photo__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.adv-dest-photo:hover .adv-dest-photo__img { transform: scale(1.08); }

.adv-dest-photo__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,94,83,0.85) 0%, transparent 55%);
  transition: opacity 0.3s;
}
.adv-dest-photo__info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 18px;
}
.adv-dest-photo__country {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.adv-dest-photo__salary {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
}

/* ═══════════════════════════════════════════════════════════════
   9. CERTIFICATE
═══════════════════════════════════════════════════════════════ */
.adv-certificate {
  padding: 100px 0;
  background: #065e53e3;
  position: relative;
  overflow: hidden;
}
.adv-certificate::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(18,168,152,0.18) 0%, transparent 45%),
    radial-gradient(circle at 10% 80%, rgba(255,255,255,0.04) 0%, transparent 40%);
  pointer-events: none;
}
.adv-certificate::after {
  content: 'TEFL';
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Syne', sans-serif;
  font-size: 18rem;
  font-weight: 800;
  color: rgba(255,255,255,0.025);
  pointer-events: none;
  line-height: 1;
}

.adv-certificate__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.adv-certificate__text { color: #fff; }
.adv-certificate__text .adv-heading-lg { color: #fff; margin: 12px 0 20px; }
.adv-certificate__text .adv-body { color: rgba(255,255,255,0.65); margin-bottom: 32px; }

.adv-cert-props {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 36px;
}
.adv-cert-prop {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--adv-r-sm);
  padding: 18px;
  transition: all 0.3s;
}
.adv-cert-prop:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.adv-cert-prop svg { width: 20px; height: 20px; color: var(--adv-teal-light); margin-bottom: 8px; }
.adv-cert-prop strong {
  display: block; font-family: 'Syne', sans-serif;
  font-size: 0.85rem; color: #fff; margin-bottom: 3px;
}
.adv-cert-prop span { font-size: 0.75rem; color: rgba(255,255,255,0.5); line-height: 1.4; }

/* Certificate mockup — warm editorial style */
.adv-cert-mockup {
  perspective: 1000px;
}
.adv-cert-card {
  background: var(--adv-paper-white);
  border-radius: var(--adv-r-md);
  padding: 40px 36px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
  animation: adv-cert-rock 6s ease-in-out infinite;
}
@keyframes adv-cert-rock {
  0%, 100% { transform: perspective(800px) rotateY(-2deg) rotateX(1deg) translateY(0); }
  50%       { transform: perspective(800px) rotateY(2deg)  rotateX(-1deg) translateY(-10px); }
}
/* Top coloured band */
.adv-cert-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--adv-teal) 0%, var(--adv-teal-light) 50%, var(--adv-coral) 100%);
}
.adv-cert-logo-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.adv-cert-logo-name {
  font-family: 'Syne', sans-serif;
  font-size: 1.3rem; font-weight: 800;
  color: var(--adv-teal-dark);
  letter-spacing: 0.04em;
}
.adv-cert-accred-pill {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem; font-weight: 500;
  color: var(--adv-teal);
  background: var(--adv-teal-pale);
  border: 1px solid rgba(10,124,110,0.2);
  padding: 5px 10px; border-radius: 2px;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.adv-cert-rule { height: 1px; background: linear-gradient(90deg, var(--adv-teal-light), rgba(10,124,110,0.1)); margin: 16px 0; }
.adv-cert-body { text-align: center; }
.adv-cert-presents {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--adv-ink-light);
  margin-bottom: 8px;
}
.adv-cert-course-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.3rem; font-weight: 800;
  color: var(--adv-ink);
  margin-bottom: 18px;
}
.adv-cert-awarded-to {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--adv-ink-light);
  margin-bottom: 6px;
}
.adv-cert-name {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1.9rem; font-weight: 600;
  color: var(--adv-teal-dark);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(10,124,110,0.25);
}
.adv-cert-description {
  font-size: 0.75rem; color: var(--adv-ink-mid); line-height: 1.6; margin-bottom: 22px;
}
.adv-cert-footer-row {
  display: flex; justify-content: space-between;
  font-size: 0.7rem; color: var(--adv-ink-light);
}
.adv-cert-footer-row span { display: flex; flex-direction: column; gap: 2px; }
.adv-cert-footer-row strong { color: var(--adv-ink); font-size: 0.72rem; font-family: 'Syne', sans-serif; }

/* Stamp */
.adv-cert-stamp {
  position: absolute;
  bottom: 343px; right: 28px;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--adv-teal) 0%, var(--adv-teal-light) 100%);
  display: flex; align-items: center; justify-content: center;
  animation: adv-spin 25s linear infinite;
  box-shadow: 0 4px 16px rgba(10,124,110,0.35);
}
@keyframes adv-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.adv-cert-stamp-inner {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--adv-teal-light) 0%, var(--adv-teal) 100%);
  display: flex; align-items: center; justify-content: center;
  animation: adv-spin 25s linear infinite reverse;
}
.adv-cert-stamp-inner svg { width: 26px; height: 26px; color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   10. PRICING
═══════════════════════════════════════════════════════════════ */
.adv-pricing {
  padding: 100px 0;
  background: var(--adv-paper);
  position: relative;
}

.adv-pricing__layout {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 60px;
  align-items: start;
}

.adv-pricing__card {
  background: #215751eb;
  border-radius: var(--adv-r-lg);
  overflow: hidden;
  box-shadow: var(--adv-shadow-lg);
  position: relative;
}
/* Top gradient stripe */
.adv-pricing__card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--adv-teal-light), var(--adv-coral));
}

.adv-pricing__card-head {
  padding: 44px 40px 32px;
  background: linear-gradient(160deg, #009688 0%, #000000 100%);
  position: relative; overflow: hidden;
}
.adv-pricing__card-head::after {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(10,124,110,0.08);
}
.adv-pricing__badge {
  background: var(--adv-coral);
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 2px;
  display: inline-block; margin-bottom: 18px;
}
.adv-pricing__course-name {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem; font-weight: 800;
  color: #fff; margin-bottom: 4px;
}
.adv-pricing__course-sub {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 24px; font-style: italic;
}
.adv-pricing__price-row {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
}
.adv-pricing__price {
  font-family: 'Syne', sans-serif;
  font-size: 3.4rem; font-weight: 800;
  color: #fff; line-height: 1;
}
.adv-pricing__price-sym { font-size: 1.6rem; color: var(--adv-teal-light); font-weight: 600; }
.adv-pricing__price-old {
  font-size: 1rem; color: rgba(255,255,255,0.28);
  text-decoration: line-through;
}
.adv-pricing__price-save {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem; color: var(--adv-teal-light);
  margin-bottom: 28px;
}

.adv-pricing__card-body { padding: 28px 40px 40px; }
.adv-pricing__includes-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 16px;
}
.adv-pricing__list {
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px;
}
.adv-pricing__item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.875rem; color: rgba(255,255,255,0.78);
}
.adv-pricing__check {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(10,124,110,0.18);
  border: 1px solid rgba(18,168,152,0.3);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.adv-pricing__check svg { width: 10px; height: 10px; color: var(--adv-teal-light); }
.adv-pricing__secure {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem; color: rgba(255,255,255,0.28);
  margin-top: 16px;
}
.adv-pricing__secure svg { width: 14px; height: 14px; color: rgba(255,255,255,0.25); }

/* Benefits column */
.adv-pricing__benefits { }
.adv-pricing__benefits .adv-heading-md { margin: 12px 0 10px; }
.adv-pricing__benefits-sub {
  font-size: 0.9rem; color: var(--adv-ink-mid); line-height: 1.75; margin-bottom: 32px;
}
.adv-benefit-rows {
  display: flex; flex-direction: column; gap: 16px;
}
.adv-benefit-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--adv-rule);
}
.adv-benefit-row:last-child { border-bottom: none; }
.adv-benefit-row__icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: var(--adv-r-sm);
  background: var(--adv-teal-pale);
  display: flex; align-items: center; justify-content: center;
}
.adv-benefit-row__icon svg { width: 18px; height: 18px; color: var(--adv-teal); }
.adv-benefit-row strong { display: block; font-family: 'Syne', sans-serif; font-size: 0.88rem; font-weight: 700; color: var(--adv-ink); margin-bottom: 3px; }
.adv-benefit-row span { font-size: 0.8rem; color: var(--adv-ink-mid); line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════════
   11. TESTIMONIALS
═══════════════════════════════════════════════════════════════ */
.adv-testimonials {
  padding: 100px 0;
  background: var(--adv-paper-warm);
  position: relative; overflow: hidden;
}
.adv-testimonials::before {
  content: '"';
  position: absolute; top: -60px; left: -20px;
  font-family: 'Lora', serif; font-size: 28rem;
  color: rgba(10,124,110,0.04); line-height: 1;
  pointer-events: none;
}

.adv-testimonials__header { text-align: center; margin-bottom: 56px; }
.adv-testimonials__header .adv-label { justify-content: center; }
.adv-testimonials__header .adv-label::before { display: none; }

.adv-reviews-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.adv-review {
  background: var(--adv-paper-white);
  border-radius: var(--adv-r-md);
  padding: 30px 26px;
  border: 1px solid rgba(10,124,110,0.08);
  transition: all 0.35s ease;
  position: relative; overflow: hidden;
}
.adv-review:hover {
  transform: translateY(-4px);
  box-shadow: var(--adv-shadow-md);
}
.adv-review:nth-child(2) {
  background: var(--adv-teal-dark);
  border: none;
}
.adv-review:nth-child(2) .adv-review__quote-icon { background: rgba(255,255,255,0.08); }
.adv-review:nth-child(2) .adv-review__quote-icon svg { color: var(--adv-teal-light); }
.adv-review:nth-child(2) .adv-review__stars svg { color: var(--adv-amber); fill: var(--adv-amber); }
.adv-review:nth-child(2) .adv-review__text { color: rgba(255,255,255,0.72); }
.adv-review:nth-child(2) .adv-review__name { color: #fff; }
.adv-review:nth-child(2) .adv-review__role { color: rgba(255,255,255,0.4); }

.adv-review__quote-icon {
  width: 38px; height: 38px;
  background: var(--adv-teal-pale);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.adv-review__quote-icon svg { width: 18px; height: 18px; color: var(--adv-teal); }

.adv-review__stars {
  display: flex; gap: 3px; margin-bottom: 12px;
}
.adv-review__stars svg {
  width: 14px; height: 14px;
  color: var(--adv-amber);
  fill: var(--adv-amber);
}

.adv-review__text {
  font-size: 0.875rem; color: var(--adv-ink-mid);
  line-height: 1.8; font-style: italic; margin-bottom: 20px;
}
.adv-reviewer {
  display: flex; align-items: center; gap: 10px;
}
.adv-reviewer__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(10,124,110,0.15);
}
.adv-review__name {
  font-family: 'Syne', sans-serif;
  font-weight: 700; font-size: 0.85rem; color: var(--adv-ink);
}
.adv-review__role { font-size: 0.73rem; color: var(--adv-ink-light); margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════
   12. CTA BANNER
═══════════════════════════════════════════════════════════════ */
.adv-cta {
  padding: 100px 0;
  position: relative; overflow: hidden;
  background: var(--adv-paper-warm);
}
.adv-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at 30% 50%, rgba(10,124,110,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 50%, rgba(232,99,74,0.06) 0%, transparent 50%),
    repeating-linear-gradient(
      90deg,
      transparent, transparent 80px,
      rgba(10,124,110,0.025) 80px, rgba(10,124,110,0.025) 81px
    );
  pointer-events: none;
}

.adv-cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.adv-cta__image {
  border-radius: var(--adv-r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
}
.adv-cta__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.adv-cta__image:hover .adv-cta__img { transform: scale(1.04); }
.adv-cta__image::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--adv-r-lg);
  border: 3px solid transparent;
  
}


.adv-cta__text .adv-heading-lg { margin: 12px 0 20px; }
.adv-cta__text .adv-body { margin-bottom: 32px; }
.adv-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.adv-cta__trust {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding-top: 28px;
  border-top: 1px solid var(--adv-rule);
}
.adv-cta__trust-item {
  display: flex; align-items: center; gap: 7px;
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--adv-ink-light);
}
.adv-cta__trust-item svg { width: 15px; height: 15px; color: var(--adv-teal); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .adv-hero__mosaic { width: 42%; }
  .adv-hero__badges { display: none; }
  .adv-overview__grid { grid-template-columns: 1fr; gap: 48px; }
  .adv-overview__image-stack { order: -1; }
  .adv-features__header { grid-template-columns: 1fr; }
  .adv-features__header-cta { text-align: left; }
  .adv-curriculum__intro { grid-template-columns: 1fr; }
  .adv-curriculum__sidebar { position: static; }
  .adv-destinations__header { grid-template-columns: 1fr; }
  .adv-certificate__inner { grid-template-columns: 1fr; }
  .adv-pricing__layout { grid-template-columns: 1fr; }
  .adv-pricing__card { order: 2; }
  .adv-cta__inner { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .adv-hero__mosaic { display: none; }
  .adv-hero__bg-letter { font-size: 12rem; }
  .adv-features__grid { grid-template-columns: 1fr; }
  .adv-highlights__inner { grid-template-columns: repeat(2, 1fr); }
  .adv-process__steps { grid-template-columns: repeat(2, 1fr); }
  .adv-process__steps::after { display: none; }
  .adv-destinations__photos { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .adv-dest-photo:first-child { grid-row: auto; }
  .adv-reviews-row { grid-template-columns: 1fr; }
  .adv-cert-props { grid-template-columns: 1fr; }
  .adv-overview__checklist { grid-template-columns: 1fr; }
}

/* ============================================================
   iarc-up1.css — IARC Accreditation Page Styles
   Aesthetic: Architectural / Geometric — Forest Green + Gold + Warm White
   Fonts: Fraunces (display serif) + Plus Jakarta Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&family=Inconsolata:wght@400;500;600&display=swap');

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  --iarc-green:       #1B4332;
  --iarc-green-mid:   #2D6A4F;
  --iarc-green-light: #52B788;
  --iarc-green-pale:  #D8F3DC;
  --iarc-green-mist:  #F0FAF3;
  --iarc-gold:        #B08B3A;
  --iarc-gold-light:  #D4A853;
  --iarc-gold-pale:   #FBF4E3;
  --iarc-gold-bright: #E8C06A;
  --iarc-ink:         #111A16;
  --iarc-ink-mid:     #3D5247;
  --iarc-ink-light:   #6B7F74;
  --iarc-paper:       #F9FAF7;
  --iarc-paper-warm:  #F5F6EE;
  --iarc-white:       #FFFFFF;
  --iarc-rule:        rgba(27,67,50,0.1);
  --iarc-rule-gold:   rgba(176,139,58,0.2);
  --iarc-shadow-sm:   0 2px 12px rgba(27,67,50,0.08);
  --iarc-shadow-md:   0 10px 36px rgba(27,67,50,0.11);
  --iarc-shadow-lg:   0 24px 64px rgba(17,26,22,0.14);
  --iarc-r-sm:        6px;
  --iarc-r-md:        16px;
  --iarc-r-lg:        28px;
  --iarc-r-xl:        44px;
}

/* ── Scoped reset ───────────────────────────────────────────── */
.iarc-page *, .iarc-page *::before, .iarc-page *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.iarc-page {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--iarc-ink);
  background: var(--iarc-paper);
  overflow-x: hidden;
  line-height: 1.7;
}
.iarc-page a { text-decoration: none; color: inherit; }
.iarc-page ul { list-style: none; }
.iarc-page img { display: block; max-width: 100%; }

/* ── Container ──────────────────────────────────────────────── */
.iarc-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Buttons ────────────────────────────────────────────────── */
.iarc-btn-green {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, #3a9a3d, #3F51B5);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 15px 36px;
  border-radius: var(--iarc-r-sm);
  border: none; cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 24px rgba(27,67,50,0.28);
}
.iarc-btn-green:hover {
  background: var(--iarc-green-mid);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(27,67,50,0.36);
}
.iarc-btn-green svg { width: 15px; height: 15px; }

.iarc-btn-outline-green {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent;
  color: var(--iarc-green);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 14px 34px;
  border-radius: var(--iarc-r-sm);
  border: 2px solid var(--iarc-green);
  cursor: pointer;
  transition: all 0.3s ease;
}
.iarc-btn-outline-green:hover {
  background: var(--iarc-green);
  color: #fff;
  transform: translateY(-2px);
}
.iarc-btn-outline-green svg { width: 15px; height: 15px; }

.iarc-btn-gold {
  display: inline-flex; align-items: center; gap: 10px;
  background: #0a5b54a1;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 15px 36px;
  border-radius: var(--iarc-r-sm);
  border: none; cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 24px rgba(176,139,58,0.3);
}
.iarc-btn-gold:hover {
  background: #9a7930;
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(176,139,58,0.4);
}
.iarc-btn-gold svg { width: 15px; height: 15px; }

.iarc-btn-white {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff;
  color: var(--iarc-green);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 15px 36px;
  border-radius: var(--iarc-r-sm);
  border: none; cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.iarc-btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
}
.iarc-btn-white svg { width: 15px; height: 15px; }

/* ── Section label ──────────────────────────────────────────── */
.iarc-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--iarc-green-mid);
  margin-bottom: 16px;
}
.iarc-label::after {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: var(--iarc-green-mid);
}
.iarc-label--gold { color: var(--iarc-gold); }
.iarc-label--gold::after { background: var(--iarc-gold); }
.iarc-label--white { color: rgba(255,255,255,0.6); }
.iarc-label--white::after { background: rgba(255,255,255,0.4); }
.iarc-label--light { color: var(--iarc-green-light); }
.iarc-label--light::after { background: var(--iarc-green-light); }

/* ── Typography helpers ─────────────────────────────────────── */
.iarc-h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(3rem, 6.5vw, 5.2rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.iarc-h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #d38410d4;
}
.iarc-h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 700;
  line-height: 1.25;
}
.iarc-em { color: var(--iarc-green-mid); font-style: italic; }
.iarc-em-gold { color: var(--iarc-gold); }
.iarc-lead {
  font-size: 1.08rem;
  color: var(--iarc-ink-mid);
  line-height: 1.82;
}

/* ── Background patterns ────────────────────────────────────── */
.iarc-hex-bg {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0-8l20-11.5V26.5L28 15 8 26.5V46.5L28 58z' fill='none' stroke='%231B4332' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 100px;
}
.iarc-grid-bg {
  background-image:
    linear-gradient(rgba(27,67,50,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,67,50,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.iarc-dots-bg {
  background-image: radial-gradient(circle, rgba(27,67,50,0.1) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ═══════════════════════════════════════════════════════════════
   1. HERO SECTION
═══════════════════════════════════════════════════════════════ */
.iarc-hero {
  position: relative;
  background: var(--iarc-green);
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Layered geometric background */
.iarc-hero__geo {
  position: absolute; inset: 0;
  pointer-events: none;
}
/* Large circle top-right */
.iarc-hero__geo::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 700px; height: 700px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.05);
  background: radial-gradient(circle, rgba(82,183,136,0.1) 0%, transparent 65%);
}
/* Small circle bottom-left */
.iarc-hero__geo::after {
  content: '';
  position: absolute;
  bottom: -120px; left: -120px;
  width: 400px; height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(176,139,58,0.12);
  background: radial-gradient(circle, rgba(176,139,58,0.07) 0%, transparent 65%);
}

/* Grid overlay */
.iarc-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Photo panel */
.iarc-hero__photo-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 44%;
  overflow: hidden;
}
.iarc-hero__photo-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--iarc-green) 0%, rgba(27,67,50,0.5) 40%, transparent 70%);
  z-index: 2;
  pointer-events: none;
}
.iarc-hero__photo-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--iarc-green) 0%, transparent 10%, transparent 90%, var(--iarc-green) 100%);
  z-index: 2;
  pointer-events: none;
}
.iarc-hero__bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transform: scale(1.04);
  animation: iarc-hero-drift 14s ease-in-out infinite alternate;
}
@keyframes iarc-hero-drift {
  from { transform: scale(1.04) translateX(0); }
  to   { transform: scale(1.08) translateX(-12px); }
}

/* Gold diagonal accent strip */
.iarc-hero__strip {
  position: absolute;
  top: 0; bottom: 0;
  right: 44%;
  width: 4px;
  background: linear-gradient(to bottom, transparent 5%, var(--iarc-gold) 30%, var(--iarc-gold-bright) 70%, transparent 95%);
  z-index: 5;
  opacity: 0.6;
}

/* Content */
.iarc-hero__content {
  position: relative; z-index: 10;
  width: 100%;
  padding: 110px 0 100px;
}
.iarc-hero__inner { max-width: 620px; }

.iarc-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(176,139,58,0.15);
  border: 1px solid rgba(176,139,58,0.3);
  color: var(--iarc-gold-bright);
  font-family: 'Inconsolata', monospace;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 2px;
  margin-bottom: 24px;
  animation: iarc-rise 0.7s ease both;
}
.iarc-hero__eyebrow-pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--iarc-gold-bright);
  animation: iarc-pulse 2.2s ease infinite;
}
@keyframes iarc-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(0.6)} }

.iarc-hero__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 28px;
  animation: iarc-rise 0.8s 0.1s ease both;
}
.iarc-hero__title-em {
  display: block;
  font-style: italic;
  color: var(--iarc-gold-bright);
  font-weight: 700;
}

.iarc-hero__desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.82;
  max-width: 500px;
  margin-bottom: 38px;
  animation: iarc-rise 0.8s 0.2s ease both;
}

.iarc-hero__actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 52px;
  animation: iarc-rise 0.8s 0.3s ease both;
}

/* Credential chips */
.iarc-hero__creds {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  animation: iarc-rise 0.8s 0.4s ease both;
}
.iarc-hero__cred {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 9px 14px;
  font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.8);
  transition: all 0.3s;
}
.iarc-hero__cred:hover { background: rgba(255,255,255,0.1); border-color: rgba(176,139,58,0.3); }
.iarc-hero__cred svg { width: 15px; height: 15px; color: var(--iarc-gold-bright); flex-shrink: 0; }

@keyframes iarc-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll cue */
.iarc-hero__scroll-cue {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.3);
  font-family: 'Inconsolata', monospace;
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  animation: iarc-rise 1s 0.8s ease both;
}
.iarc-hero__scroll-mouse {
  width: 22px; height: 34px;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 11px;
  position: relative;
}
.iarc-hero__scroll-mouse::after {
  content: '';
  position: absolute;
  top: 6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 6px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  animation: iarc-scroll-dot 1.6s ease-in-out infinite;
}
@keyframes iarc-scroll-dot {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  80%      { transform: translateX(-50%) translateY(10px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   2. STAT RIBBON
═══════════════════════════════════════════════════════════════ */
.iarc-ribbon {
  background: linear-gradient(174deg, #284c49, #7a4e0bd9);
  border-top: 1px solid var(--iarc-rule-gold);
  border-bottom: 1px solid var(--iarc-rule-gold);
  padding: 0;
}
.iarc-ribbon__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.iarc-ribbon__item {
  display: flex; align-items: center; gap: 16px;
  padding: 28px 32px;
  border-right: 1px solid var(--iarc-rule-gold);
  transition: background 0.3s;
  cursor: default;
}
.iarc-ribbon__item:last-child { border-right: none; }
.iarc-ribbon__item:hover { background: rgba(176,139,58,0.06); }
.iarc-ribbon__icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: rgba(176,139,58,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.iarc-ribbon__icon svg { width: 20px; height: 20px; color: var(--iarc-gold); }
.iarc-ribbon__num {
  font-family: 'Fraunces', serif;
  font-size: 1.8rem; font-weight: 700;
  color: #009688;
  line-height: 1;
}
.iarc-ribbon__label {
  font-size: 0.78rem; color: #98aaa0;
  line-height: 1.4; margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   3. WHAT IS IARC — Split editorial
═══════════════════════════════════════════════════════════════ */
.iarc-intro {
  padding: 100px 0;
  background: var(--iarc-white);
  position: relative;
  overflow: hidden;
}
.iarc-intro::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,67,50,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.iarc-intro__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.iarc-intro__text .iarc-lead { margin: 20px 0 24px; }
.iarc-intro__text p + p { margin-top: 16px; }

.iarc-intro__principles {
  display: flex; flex-direction: column; gap: 16px;
  margin: 32px 0;
}
.iarc-principle {
  display: flex; gap: 16px;
  padding: 18px 20px;
  background: var(--iarc-green-mist);
  border-radius: var(--iarc-r-sm);
  border-left: 3px solid var(--iarc-green-light);
  transition: all 0.3s;
}
.iarc-principle:hover {
  background: var(--iarc-green-pale);
  border-left-color: var(--iarc-green);
}
.iarc-principle__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 6px;
  background: rgba(27,67,50,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.iarc-principle__icon svg { width: 17px; height: 17px; color: var(--iarc-green); }
.iarc-principle strong {
  display: block;
  font-size: 0.9rem; font-weight: 700;
  color: var(--iarc-green);
  margin-bottom: 3px;
}
.iarc-principle span { font-size: 0.83rem; color: var(--iarc-ink-mid); line-height: 1.6; }

/* Photo collage */
.iarc-intro__visual {
  position: relative;
}
.iarc-intro__img-main {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--iarc-r-md);
  box-shadow: var(--iarc-shadow-lg);
}
.iarc-intro__img-float {
  position: absolute;
  top: 15px;
    right: 60px;
    width: 17%;
  aspect-ratio: 4/3;
  object-fit: cover;
  
  box-shadow: var(--iarc-shadow-md);
  z-index: 2;
}
.iarc-intro__badge-float {
  position: absolute;
  top: -18px; left: -18px;
  z-index: 3;
  background: linear-gradient(90deg, #3a9a3d, #3F51B5);
  color: #fff;
  font-family: 'Fraunces', serif;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 2px;
  display: flex; align-items: center; gap: 7px;
}
.iarc-intro__badge-float svg { width: 13px; height: 13px; color: var(--iarc-gold-bright); }

/* ═══════════════════════════════════════════════════════════════
   4. ACCREDITATION STANDARDS — Framework
═══════════════════════════════════════════════════════════════ */
.iarc-standards {
  padding: 100px 0;
  background: var(--iarc-paper-warm);
  position: relative;
  overflow: hidden;
}
.iarc-standards::after {
  content: 'IARC';
  position: absolute;
  right: -40px; bottom: -60px;
  font-family: 'Fraunces', serif;
  font-size: 18rem; font-weight: 900;
  color: rgba(27,67,50,0.03);
  line-height: 1; pointer-events: none;
  letter-spacing: -0.04em;
}

.iarc-standards__header { text-align: center; margin-bottom: 64px; }
.iarc-standards__header .iarc-h2 { margin: 10px 0 16px; }
.iarc-standards__header .iarc-lead { max-width: 580px; margin: 0 auto; }

.iarc-standards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.iarc-standard-card {
  background: var(--iarc-white);
  border-radius: var(--iarc-r-md);
  padding: 34px 28px;
  border: 1px solid var(--iarc-rule);
  transition: all 0.38s ease;
  position: relative;
  overflow: hidden;
}
.iarc-standard-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--iarc-green), var(--iarc-green-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.38s ease;
}
.iarc-standard-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--iarc-shadow-md);
  border-color: rgba(27,67,50,0.15);
}
.iarc-standard-card:hover::before { transform: scaleX(1); }

.iarc-standard-card__number {
  font-family: 'Fraunces', serif;
  font-size: 3.5rem; font-weight: 900;
  color: rgba(27,67,50,0.07);
  line-height: 1;
  margin-bottom: 10px;
  transition: color 0.3s;
}
.iarc-standard-card:hover .iarc-standard-card__number { color: rgba(27,67,50,0.12); }

.iarc-standard-card__icon {
  width: 52px; height: 52px;
  border-radius: 10px;
  background: var(--iarc-green-mist);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  transition: all 0.3s;
}
.iarc-standard-card:hover .iarc-standard-card__icon { background: var(--iarc-green); }
.iarc-standard-card__icon svg { width: 24px; height: 24px; color: var(--iarc-green); transition: color 0.3s; }
.iarc-standard-card:hover .iarc-standard-card__icon svg { color: #fff; }

.iarc-standard-card__title {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem; font-weight: 700;
  color: var(--iarc-green);
  margin-bottom: 10px;
  line-height: 1.3;
}
.iarc-standard-card__desc {
  font-size: 0.875rem;
  color: var(--iarc-ink-mid);
  line-height: 1.72;
}

/* ═══════════════════════════════════════════════════════════════
   5. WHY IARC MATTERS — For TEFL Students
═══════════════════════════════════════════════════════════════ */
.iarc-why {
  padding: 100px 0;
  background: #f7f8f6;
  position: relative;
}

.iarc-why__layout {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 80px;
  align-items: center;
}

.iarc-why__image-wrap {
  position: relative;
}
.iarc-why__img-bg-block {
  position: absolute;
  top: 20px; left: 20px; bottom: -20px; right: -20px;
  background: var(--iarc-green-mist);
  border-radius: var(--iarc-r-md);
  border: 1px solid var(--iarc-rule);
  z-index: 1;
}
.iarc-why__img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--iarc-r-md);
  box-shadow: var(--iarc-shadow-lg);
  position: relative; z-index: 2;
}
.iarc-why__img-card {
  position: absolute;
  z-index: 3;
  right: -40px; bottom: 40px;
  background: var(--iarc-white);
  border-radius: var(--iarc-r-sm);
  padding: 18px 22px;
  box-shadow: var(--iarc-shadow-md);
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--iarc-rule);
  min-width: 220px;
}
.iarc-why__img-card-icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--iarc-green-pale);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.iarc-why__img-card-icon svg { width: 22px; height: 22px; color: var(--iarc-green); }
.iarc-why__img-card-text strong { display: block; font-size: 1rem; font-weight: 700; color: var(--iarc-green); }
.iarc-why__img-card-text span { font-size: 0.75rem; color: var(--iarc-ink-light); line-height: 1.3; }

.iarc-why__content .iarc-h2 { margin: 10px 0 18px; }
.iarc-why__content .iarc-lead { margin-bottom: 32px; }

.iarc-why__list {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 36px;
}
.iarc-why__item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--iarc-r-sm);
  border: 1px solid var(--iarc-rule);
  background: var(--iarc-paper);
  transition: all 0.3s;
}
.iarc-why__item:hover {
  background: var(--iarc-green-mist);
  border-color: rgba(27,67,50,0.15);
  transform: translateX(4px);
}
.iarc-why__item-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 6px;
  background: var(--iarc-green-mist);
  display: flex; align-items: center; justify-content: center;
}
.iarc-why__item:hover .iarc-why__item-icon { background: var(--iarc-green-pale); }
.iarc-why__item-icon svg { width: 17px; height: 17px; color: var(--iarc-green); }
.iarc-why__item strong { display: block; font-size: 0.88rem; font-weight: 700; color: var(--iarc-ink); margin-bottom: 3px; }
.iarc-why__item span { font-size: 0.8rem; color: var(--iarc-ink-mid); line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════════
   6. FRAMEWORK FOR EXCELLENCE — Timeline style
═══════════════════════════════════════════════════════════════ */
.iarc-framework {
  padding: 100px 0;
  background: var(--iarc-green);
  position: relative;
  overflow: hidden;
}
.iarc-framework::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(82,183,136,0.14) 0%, transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(176,139,58,0.1) 0%, transparent 45%),
    repeating-linear-gradient(
      45deg,
      transparent, transparent 60px,
      rgba(255,255,255,0.015) 60px, rgba(255,255,255,0.015) 61px
    );
  pointer-events: none;
}

.iarc-framework__header { text-align: center; margin-bottom: 64px; }
.iarc-framework__header .iarc-h2 { color: #fff; margin: 10px 0 16px; }
.iarc-framework__header .iarc-lead { color: rgba(255,255,255,0.65); max-width: 560px; margin: 0 auto; }

.iarc-framework__pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}
/* Connector bar */
.iarc-framework__pillars::before {
  content: '';
  position: absolute;
  top: 30px;
  left: calc(12.5%);
  right: calc(12.5%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176,139,58,0.4), rgba(82,183,136,0.4), rgba(176,139,58,0.4), transparent);
  z-index: 0;
}

.iarc-pillar {
  position: relative; z-index: 1;
  text-align: center;
}
.iarc-pillar__bubble {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(176,139,58,0.35);
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  transition: all 0.4s ease;
  position: relative;
}
.iarc-pillar:hover .iarc-pillar__bubble {
  background: var(--iarc-gold);
  border-color: var(--iarc-gold);
  transform: scale(1.12);
  box-shadow: 0 8px 28px rgba(176,139,58,0.4);
}
.iarc-pillar__bubble svg { width: 24px; height: 24px; color: var(--iarc-gold-bright); transition: color 0.3s; }
.iarc-pillar:hover .iarc-pillar__bubble svg { color: #fff; }

.iarc-pillar__step {
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--iarc-green-light);
  color: #fff;
  font-family: 'Inconsolata', monospace;
  font-size: 0.65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.iarc-pillar__title {
  font-family: 'Fraunces', serif;
  font-size: 1rem; font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.iarc-pillar__desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.58);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════
   7. WHAT IARC ACCREDITATION MEANS FOR YOU
═══════════════════════════════════════════════════════════════ */
.iarc-benefits {
  padding: 100px 0;
  background: var(--iarc-paper);
  position: relative; overflow: hidden;
}
.iarc-benefits::before {
  content: '';
  position: absolute;
  left: -100px; top: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176,139,58,0.05) 0%, transparent 65%);
  pointer-events: none;
}

.iarc-benefits__header { text-align: center; margin-bottom: 64px; }
.iarc-benefits__header .iarc-h2 { margin: 10px 0 16px; }
.iarc-benefits__header .iarc-lead { max-width: 560px; margin: 0 auto; }

.iarc-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 60px;
}

.iarc-benefit {
  padding: 30px 26px;
  border-radius: var(--iarc-r-md);
  background: var(--iarc-white);
  border: 1px solid var(--iarc-rule);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}
.iarc-benefit::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--iarc-green), var(--iarc-green-light));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s ease;
}
.iarc-benefit:hover {
  box-shadow: var(--iarc-shadow-md);
  transform: translateY(-5px);
  border-color: rgba(27,67,50,0.15);
}
.iarc-benefit:hover::after { transform: scaleY(1); }

.iarc-benefit__icon {
  width: 50px; height: 50px;
  border-radius: 10px;
  background: var(--iarc-green-mist);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  transition: all 0.3s;
}
.iarc-benefit:hover .iarc-benefit__icon { background: var(--iarc-green); }
.iarc-benefit__icon svg { width: 22px; height: 22px; color: var(--iarc-green); transition: color 0.3s; }
.iarc-benefit:hover .iarc-benefit__icon svg { color: #fff; }

.iarc-benefit__title {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--iarc-ink);
  margin-bottom: 10px;
}
.iarc-benefit__desc {
  font-size: 0.86rem;
  color: var(--iarc-ink-mid);
  line-height: 1.72;
}

/* Comparison strip */
.iarc-compare {
  background: linear-gradient(135deg, var(--iarc-green) 0%, var(--iarc-green-mid) 100%);
  border-radius: var(--iarc-r-lg);
  padding: 48px 52px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: start;
  overflow: hidden;
  position: relative;
}
.iarc-compare::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 10% 50%, rgba(82,183,136,0.12) 0%, transparent 45%),
    radial-gradient(circle at 90% 50%, rgba(176,139,58,0.1) 0%, transparent 45%);
  pointer-events: none;
}

.iarc-compare__col { position: relative; z-index: 1; }
.iarc-compare__col-title {
  font-family: 'Fraunces', serif;
  font-size: 1rem; font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.iarc-compare__col--with .iarc-compare__col-title { color: var(--iarc-gold-bright); }
.iarc-compare__col--without .iarc-compare__col-title { color: rgba(255,255,255,0.4); }

.iarc-compare__items { display: flex; flex-direction: column; gap: 10px; }
.iarc-compare__item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.85rem; line-height: 1.6;
}
.iarc-compare__col--with .iarc-compare__item { color: rgba(255,255,255,0.82); }
.iarc-compare__col--without .iarc-compare__item { color: rgba(255,255,255,0.38); }
.iarc-compare__col--with .iarc-compare__item svg { color: var(--iarc-green-light); width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.iarc-compare__col--without .iarc-compare__item svg { color: rgba(255,255,255,0.22); width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

.iarc-compare__divider {
  display: flex; align-items: center; justify-content: center;
  padding-top: 32px;
  position: relative; z-index: 1;
}
.iarc-compare__vs {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 0.8rem; font-weight: 700;
  color: rgba(255,255,255,0.5);
}

/* ═══════════════════════════════════════════════════════════════
   8. ABOUT TEFLEN'S ACCREDITATION
═══════════════════════════════════════════════════════════════ */
.iarc-teflen {
  padding: 100px 0;
  background: var(--iarc-white);
  position: relative; overflow: hidden;
}

.iarc-teflen__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.iarc-teflen__content .iarc-h2 { margin: 10px 0 20px; }
.iarc-teflen__content .iarc-lead { margin-bottom: 24px; }

.iarc-teflen__points {
  display: flex; flex-direction: column; gap: 16px;
  margin: 28px 0 36px;
}
.iarc-teflen-point {
  display: flex; gap: 14px;
  padding: 18px 20px;
  background: var(--iarc-gold-pale);
  border-radius: var(--iarc-r-sm);
  border-left: 3px solid var(--iarc-gold);
  transition: all 0.3s;
}
.iarc-teflen-point:hover {
  background: #f5ead1;
  border-left-color: var(--iarc-gold-light);
}
.iarc-teflen-point__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 6px;
  background: rgba(176,139,58,0.12);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.iarc-teflen-point__icon svg { width: 17px; height: 17px; color: var(--iarc-gold); }
.iarc-teflen-point strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--iarc-gold); margin-bottom: 3px; }
.iarc-teflen-point span { font-size: 0.82rem; color: var(--iarc-ink-mid); line-height: 1.6; }

.iarc-teflen__visual {
  position: relative;
}
.iarc-teflen__img-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}
.iarc-teflen__img-stack img {
  border-radius: var(--iarc-r-sm);
  width: 100%;
  object-fit: cover;
}
.iarc-teflen__img-stack img:first-child {
  grid-row: span 2;
  aspect-ratio: 2/3;
}
.iarc-teflen__img-stack img:not(:first-child) { aspect-ratio: 3/2; }

/* Gold border accent card overlay */
.iarc-teflen__cert-badge {
  position: absolute;
  bottom: -24px; left: -24px;
  z-index: 3;
  background: var(--iarc-white);
  border-radius: var(--iarc-r-sm);
  padding: 20px 22px;
  box-shadow: var(--iarc-shadow-md);
  border: 1px solid var(--iarc-rule-gold);
  display: flex; align-items: center; gap: 14px;
}
.iarc-teflen__cert-badge-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--iarc-gold), var(--iarc-gold-light));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.iarc-teflen__cert-badge-icon svg { width: 26px; height: 26px; color: #fff; }
.iarc-teflen__cert-badge-text strong { display: block; font-size: 0.95rem; font-weight: 700; color: var(--iarc-ink); }
.iarc-teflen__cert-badge-text span { font-size: 0.75rem; color: var(--iarc-ink-light); }

/* ═══════════════════════════════════════════════════════════════
   9. IARC HISTORY TIMELINE
═══════════════════════════════════════════════════════════════ */
.iarc-timeline {
  padding: 100px 0;
  background: var(--iarc-paper-warm);
  position: relative; overflow: hidden;
}
.iarc-timeline::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent 3%, var(--iarc-rule) 15%, var(--iarc-rule) 85%, transparent 97%);
  pointer-events: none;
}

.iarc-timeline__header { text-align: center; margin-bottom: 64px; }
.iarc-timeline__header .iarc-h2 { margin: 10px 0 16px; }

.iarc-timeline__items {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 840px;
  margin: 0 auto;
}
.iarc-tl-item {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 0;
  align-items: start;
}
.iarc-tl-item:nth-child(even) .iarc-tl-item__content { grid-column: 1; grid-row: 1; }
.iarc-tl-item:nth-child(even) .iarc-tl-item__dot { grid-column: 2; grid-row: 1; }
.iarc-tl-item:nth-child(even) .iarc-tl-item__empty { grid-column: 3; }
.iarc-tl-item:nth-child(odd)  .iarc-tl-item__empty   { grid-column: 1; }
.iarc-tl-item:nth-child(odd)  .iarc-tl-item__dot     { grid-column: 2; }
.iarc-tl-item:nth-child(odd)  .iarc-tl-item__content { grid-column: 3; }

.iarc-tl-item__dot {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 20px 0;
}
.iarc-tl-item__dot-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--iarc-white);
  border: 2px solid var(--iarc-green-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s;
  box-shadow: var(--iarc-shadow-sm);
}
.iarc-tl-item:hover .iarc-tl-item__dot-circle {
  background: var(--iarc-green);
  border-color: var(--iarc-green);
}
.iarc-tl-item__dot-circle svg { width: 18px; height: 18px; color: var(--iarc-green); transition: color 0.3s; }
.iarc-tl-item:hover .iarc-tl-item__dot-circle svg { color: #fff; }

.iarc-tl-item__content {
  padding: 20px 28px 28px;
}
.iarc-tl-item__year {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem; font-weight: 900;
  color: var(--iarc-green);
  line-height: 1;
  margin-bottom: 4px;
}
.iarc-tl-item__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem; font-weight: 700;
  color: var(--iarc-ink);
  margin-bottom: 8px;
}
.iarc-tl-item__desc {
  font-size: 0.83rem;
  color: var(--iarc-ink-mid);
  line-height: 1.7;
  background: var(--iarc-white);
  padding: 14px 16px;
  border-radius: var(--iarc-r-sm);
  border: 1px solid var(--iarc-rule);
}
.iarc-tl-item__empty { min-height: 1px; }

/* ═══════════════════════════════════════════════════════════════
   10. VERIFICATION SECTION
═══════════════════════════════════════════════════════════════ */
.iarc-verify {
  padding: 100px 0;
  background: #f8f3f3;
}

.iarc-verify__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.iarc-verify__content .iarc-h2 { margin: 10px 0 18px; }
.iarc-verify__content .iarc-lead { margin-bottom: 28px; }

.iarc-verify__steps {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 36px;
}
.iarc-verify__step {
  display: flex; gap: 16px;
}
.iarc-verify__step-num {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, #3a9a3d, #3F51B5);
  color: #fff;
  font-family: 'Fraunces', serif;
  font-size: 0.85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.iarc-verify__step strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--iarc-ink); margin-bottom: 3px; }
.iarc-verify__step span { font-size: 0.82rem; color: var(--iarc-ink-mid); line-height: 1.6; }

/* Certificate card visual */
.iarc-verify__cert {
  background: linear-gradient(145deg, var(--iarc-white) 0%, #f8faf8 100%);
  border-radius: var(--iarc-r-md);
  padding: 42px 38px;
  box-shadow: var(--iarc-shadow-lg);
  border: 1px solid var(--iarc-rule);
  position: relative;
  overflow: hidden;
  animation: iarc-cert-bob 7s ease-in-out infinite;
}
@keyframes iarc-cert-bob {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50%       { transform: translateY(-10px) rotate(0.5deg); }
}
/* Top bar */
.iarc-verify__cert::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--iarc-green) 0%, var(--iarc-green-light) 50%, var(--iarc-gold) 100%);
}
.iarc-cert__header-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.iarc-cert__org {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem; font-weight: 900;
  color: var(--iarc-green);
  letter-spacing: 0.03em;
}
.iarc-cert__iarc-badge {
  background: var(--iarc-green-pale);
  color: var(--iarc-green);
  font-family: 'Inconsolata', monospace;
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 2px;
  border: 1px solid rgba(27,67,50,0.15);
}
.iarc-cert__rule { height: 1px; background: linear-gradient(90deg, var(--iarc-green-light), rgba(27,67,50,0.1)); margin: 14px 0; }
.iarc-cert__body { text-align: center; }
.iarc-cert__pre {
  font-family: 'Inconsolata', monospace;
  font-size: 0.65rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--iarc-ink-light);
  margin-bottom: 8px;
}
.iarc-cert__course-name {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem; font-weight: 900;
  color: var(--iarc-ink); margin-bottom: 16px;
}
.iarc-cert__awarded-label {
  font-size: 0.72rem; color: var(--iarc-ink-light); margin-bottom: 6px;
  font-family: 'Inconsolata', monospace; letter-spacing: 0.1em; text-transform: uppercase;
}
.iarc-cert__name {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.8rem; font-weight: 700;
  color: var(--iarc-green);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(27,67,50,0.2);
}
.iarc-cert__desc {
  font-size: 0.75rem; color: var(--iarc-ink-mid); line-height: 1.65; margin-bottom: 20px;
}
.iarc-cert__footer {
  display: flex; justify-content: space-between;
  font-size: 0.7rem; color: var(--iarc-ink-light);
}
.iarc-cert__footer-col { display: flex; flex-direction: column; gap: 2px; }
.iarc-cert__footer-col strong { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.72rem; color: var(--iarc-ink); }

/* Seal */
.iarc-cert__seal {
  position: absolute;
  top: 175px; right: 28px;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--iarc-green) 0%, var(--iarc-green-mid) 100%);
  display: flex; align-items: center; justify-content: center;
  animation: iarc-spin 20s linear infinite;
  box-shadow: 0 4px 16px rgba(27,67,50,0.35);
}
@keyframes iarc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.iarc-cert__seal-inner {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--iarc-green-mid) 0%, var(--iarc-green) 100%);
  display: flex; align-items: center; justify-content: center;
  animation: iarc-spin 20s linear infinite reverse;
}
.iarc-cert__seal-inner svg { width: 24px; height: 24px; color: var(--iarc-gold-bright); }

/* ═══════════════════════════════════════════════════════════════
   11. FAQS
═══════════════════════════════════════════════════════════════ */
.iarc-faq {
  padding: 100px 0;
  background: #fdfdfd;
  position: relative; overflow: hidden;
}

.iarc-faq__inner {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  align-items: start;
}

.iarc-faq__sidebar .iarc-h2 { margin: 10px 0 20px; }
.iarc-faq__sidebar .iarc-lead { margin-bottom: 28px; }

.iarc-faq__list {
  display: flex; flex-direction: column; gap: 12px;
}
.iarc-faq-item {
  background: var(--iarc-white);
  border-radius: var(--iarc-r-sm);
  border: 1px solid var(--iarc-rule);
  overflow: hidden;
  transition: all 0.3s;
}
.iarc-faq-item:hover { border-color: rgba(27,67,50,0.2); box-shadow: var(--iarc-shadow-sm); }

.iarc-faq-item__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  font-weight: 600; font-size: 0.9rem;
  color: var(--iarc-ink);
  user-select: none;
}
.iarc-faq-item__q svg { width: 18px; height: 18px; color: var(--iarc-green-mid); flex-shrink: 0; }
.iarc-faq-item__a {
  padding: 0 22px 18px;
  font-size: 0.85rem;
  color: var(--iarc-ink-mid);
  line-height: 1.75;
  border-top: 1px solid var(--iarc-rule);
  padding-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   12. CTA
═══════════════════════════════════════════════════════════════ */
.iarc-cta {
  padding: 100px 0;
  background:linear-gradient(90deg, #3a9a3d, #3F51B5);
  position: relative; overflow: hidden;
}
.iarc-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at 25% 60%, rgba(82,183,136,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(176,139,58,0.12) 0%, transparent 45%),
    repeating-linear-gradient(
      -60deg,
      transparent, transparent 80px,
      rgba(255,255,255,0.018) 80px, rgba(255,255,255,0.018) 81px
    );
  pointer-events: none;
}

.iarc-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative; z-index: 1;
}

.iarc-cta__text .iarc-h2 { color: #fff; margin: 10px 0 18px; }
.iarc-cta__text .iarc-lead { color: rgba(255,255,255,0.65); margin-bottom: 32px; }
.iarc-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.iarc-cta__trust {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.iarc-cta__trust-item {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.72rem; letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.iarc-cta__trust-item svg { width: 15px; height: 15px; color: var(--iarc-green-light); flex-shrink: 0; }

/* CTA image */
.iarc-cta__visual { border-radius: var(--iarc-r-lg); overflow: hidden; position: relative; }
.iarc-cta__img {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.iarc-cta__visual:hover .iarc-cta__img { transform: scale(1.04); }
.iarc-cta__visual::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--iarc-r-lg);
  border: 3px solid transparent;
  
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .iarc-intro__layout,
  .iarc-why__layout,
  .iarc-teflen__inner,
  .iarc-verify__inner,
  .iarc-cta__inner { grid-template-columns: 1fr; gap: 48px; }
  .iarc-hero__photo-panel { display: none; }
  .iarc-hero__strip { display: none; }
  .iarc-ribbon__inner { grid-template-columns: repeat(2, 1fr); }
  .iarc-framework__pillars { grid-template-columns: repeat(2, 1fr); }
  .iarc-framework__pillars::before { display: none; }
  .iarc-why__image-wrap { order: -1; }
  .iarc-faq__inner { grid-template-columns: 1fr; }
  .iarc-why__img-card { right: 0; }
}

@media (max-width: 768px) {
  .iarc-standards-grid,
  .iarc-benefits__grid { grid-template-columns: 1fr; }
  .iarc-ribbon__inner { grid-template-columns: 1fr 1fr; }
  .iarc-compare { grid-template-columns: 1fr; }
  .iarc-compare__divider { display: none; }
  .iarc-teflen__img-stack { grid-template-columns: 1fr; }
  .iarc-teflen__img-stack img:first-child { grid-row: auto; aspect-ratio: 3/2; }
  .iarc-timeline::before { left: 28px; }
  .iarc-tl-item { grid-template-columns: 40px 1fr; }
  .iarc-tl-item__dot { grid-column: 1; }
  .iarc-tl-item__content { grid-column: 2; }
  .iarc-tl-item__empty { display: none; }
  .iarc-tl-item:nth-child(even) .iarc-tl-item__content,
  .iarc-tl-item:nth-child(even) .iarc-tl-item__dot,
  .iarc-tl-item:nth-child(even) .iarc-tl-item__empty { grid-column: auto; grid-row: auto; }
}

/* =============================================
   TEFL FAQ Section — faq-up1
   Fonts: Playfair Display + DM Sans
   Aesthetic: Editorial / Warm Travel Magazine
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,600;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* ---- CSS Variables ---- */
.tefl-faq-section {
  --tfq-cream: #FAF7F2;
  --tfq-sand: #F2EBE0;
  --tfq-warm-mid: #E8DDD0;
  --tfq-terracotta: #C4623A;
  --tfq-terra-dark: #A64E2A;
  --tfq-terra-light: #E07F5A;
  --tfq-forest: #2D4A3E;
  --tfq-forest-light: #3D6355;
  --tfq-gold: #C49A2E;
  --tfq-gold-light: #E8C060;
  --tfq-ink: #1C1A18;
  --tfq-ink-light: #3D3A35;
  --tfq-muted: #7A7065;
  --tfq-border: #E0D5C8;
  --tfq-white: #FFFFFF;

  --tfq-font-display: 'Playfair Display', Georgia, serif;
  --tfq-font-body: 'DM Sans', system-ui, sans-serif;

  --tfq-radius: 16px;
  --tfq-radius-sm: 10px;
  --tfq-shadow: 0 4px 24px rgba(28, 26, 24, 0.08);
  --tfq-shadow-md: 0 8px 40px rgba(28, 26, 24, 0.12);

  font-family: var(--tfq-font-body);
  background: var(--tfq-cream);
  color: var(--tfq-ink);
  overflow: hidden;
}

/* =============================================
   HERO BAND
   ============================================= */
.tfq-hero-band {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 0;
  min-height: 480px;
  position: relative;
  background: var(--tfq-forest);
  overflow: hidden;
}

.tfq-hero-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.tfq-hero-inner {
  padding: 60px 56px 60px 60px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.tfq-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(196, 98, 58, 0.25);
  background: rgba(196, 98, 58, 0.25);
    border: 1px solid #FF9800;
  font-family: var(--tfq-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 100px;
  width: fit-content;
  animation: tfqFadeUp 0.6s ease both;
      color: cadetblue;
}

.tfq-hero-title {
  font-family: var(--tfq-font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--tfq-white);
  margin: 0;
  animation: tfqFadeUp 0.7s 0.1s ease both;
}

.tfq-hero-title em {
  font-style: italic;
  color: #FF9800;
}

.tfq-hero-sub {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  max-width: 520px;
  margin: 0;
  font-weight: 300;
  animation: tfqFadeUp 0.7s 0.2s ease both;
}

.tfq-hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
  animation: tfqFadeUp 0.7s 0.3s ease both;
}

.tfq-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tfq-stat-num {
  font-family: var(--tfq-font-display);
  font-size: 26px;
  font-weight: 700;
  color: #FF9800;
  line-height: 1;
}

.tfq-stat-label {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.tfq-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.15);
}

.tfq-hero-img-wrap {
  position: relative;
  overflow: hidden;
  animation: tfqFadeLeft 0.8s 0.2s ease both;
}

.tfq-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9);
  transition: transform 6s ease;
}

.tfq-hero-img-wrap:hover .tfq-hero-img {
  transform: scale(1.04);
}

.tfq-img-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(28, 26, 24, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--tfq-white);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tfq-img-badge svg {
  color: var(--tfq-gold-light);
}

/* =============================================
   FILTER BAR
   ============================================= */
.tfq-filter-bar {
  background: var(--tfq-white);
  border-bottom: 1px solid var(--tfq-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(28,26,24,0.06);
}

.tfq-filter-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 14px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.tfq-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tfq-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.tfq-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tfq-pill {
  font-family: var(--tfq-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--tfq-ink-light);
  background: var(--tfq-cream);
  border: 1.5px solid var(--tfq-border);
  padding: 7px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tfq-pill:hover {
  border-color: var(--tfq-terracotta);
  color: var(--tfq-terracotta);
  background: rgba(196, 98, 58, 0.06);
}

.tfq-pill.active {
  background: var(--tfq-terracotta);
  border-color: var(--tfq-terracotta);
  color: var(--tfq-white);
}

/* =============================================
   MAIN GRID
   ============================================= */
.tfq-main {
  max-width: 1260px;
  margin: 0 auto;
  padding: 60px 40px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}

/* =============================================
   CATEGORY LABELS
   ============================================= */
.tfq-cat-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tfq-font-display);
  font-size: 20px;
  font-weight: 700;
  color:#FF9800;
  margin: 40px 0 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--tfq-terracotta);
  width: fit-content;
}

.tfq-cat-label:first-child {
  margin-top: 0;
}

.tfq-cat-label svg {
  color: var(--tfq-terracotta);
  flex-shrink: 0;
}

/* =============================================
   FAQ ACCORDION
   ============================================= */
.tfq-accordion-col {
  display: flex;
  flex-direction: column;
}

.tfq-item {
  border: 1.5px solid var(--tfq-border);
  border-radius: var(--tfq-radius-sm);
  margin-bottom: 10px;
  background: var(--tfq-white);
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.tfq-item:hover {
  box-shadow: var(--tfq-shadow);
  border-color: var(--tfq-warm-mid);
}

.tfq-item.open {
  border-color: var(--tfq-terracotta);
  box-shadow: 0 4px 20px rgba(196, 98, 58, 0.1);
}

.tfq-q {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-family: var(--tfq-font-body);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--tfq-ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.tfq-q:hover {
  background: var(--tfq-cream);
}

.tfq-item.open .tfq-q {
  background: var(--tfq-sand);
  color: var(--tfq-terra-dark);
}

.tfq-icon {
  flex-shrink: 0;
  color: var(--tfq-terracotta);
  transition: transform 0.3s ease;
  display: flex;
}

.tfq-item.open .tfq-icon {
  transform: rotate(180deg);
}

.tfq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tfq-item.open .tfq-a {
  max-height: 800px;
}

.tfq-a > * {
  padding: 0 24px;
}

.tfq-a p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--tfq-ink-light);
  margin: 0 0 16px;
}

.tfq-a p:first-child {
  padding-top: 8px;
}

.tfq-a p:last-child {
  padding-bottom: 24px;
  margin-bottom: 0;
}

/* Highlight box */
.tfq-highlight {
  background: linear-gradient(135deg, rgba(196, 98, 58, 0.08), rgba(196, 98, 58, 0.04));
  border-left: 3px solid var(--tfq-terracotta);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px !important;
  margin: 0 24px 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--tfq-ink-light);
  line-height: 1.6;
}

.tfq-highlight svg {
  color: var(--tfq-terracotta);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Table */
.tfq-table-wrap {
  padding: 0 24px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.tfq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  border-radius: 8px;
  overflow: hidden;
}

.tfq-table thead tr {
  background: var(--tfq-forest);
  color: var(--tfq-white);
}

.tfq-table th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 12px;
  text-transform: uppercase;
}

.tfq-table tbody tr {
  border-bottom: 1px solid var(--tfq-border);
  transition: background 0.15s;
}

.tfq-table tbody tr:nth-child(even) {
  background: var(--tfq-cream);
}

.tfq-table tbody tr:hover {
  background: var(--tfq-sand);
}

.tfq-table td {
  padding: 10px 14px;
  color: var(--tfq-ink-light);
}

/* Salary cards grid */
.tfq-salary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 24px;
  margin-bottom: 16px;
}

.tfq-salary-card {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

.tfq-salary-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.tfq-salary-card:hover img {
  transform: scale(1.06);
}

.tfq-salary-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0) 100%);
  padding: 28px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tfq-salary-info strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--tfq-white);
}

.tfq-salary-info span {
  font-size: 11px;
  color: rgba(255,255,255,0.8);
}

/* =============================================
   SIDEBAR
   ============================================= */
.tfq-sidebar {
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tfq-sidebar-card {
  background: var(--tfq-white);
  border-radius: var(--tfq-radius);
  border: 1.5px solid var(--tfq-border);
  overflow: hidden;
  box-shadow: var(--tfq-shadow);
}

/* CTA Card */
.tfq-cta-img-wrap {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.tfq-cta-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tfq-cta-img-wrap:hover img {
  transform: scale(1.04);
}

.tfq-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(45,74,62,0.3), rgba(45,74,62,0.75));
  display: flex;
  align-items: flex-end;
  padding: 16px 20px;
}

.tfq-cta-overlay span {
  font-family: var(--tfq-font-display);
  font-size: 18px;
  font-style: italic;
  color: var(--tfq-white);
}

.tfq-cta-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tfq-cta-body h3 {
  font-family: var(--tfq-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--tfq-ink);
  margin: 0;
  line-height: 1.3;
}

.tfq-cta-body > p {
  font-size: 13.5px;
  color: var(--tfq-muted);
  line-height: 1.6;
  margin: 0;
}

.tfq-cta-list {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tfq-cta-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--tfq-ink-light);
  font-weight: 500;
}

.tfq-cta-list li svg {
  color: var(--tfq-forest);
  flex-shrink: 0;
}

/* Buttons */
.tfq-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--tfq-terracotta);
  color: var(--tfq-white);
  font-family: var(--tfq-font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 22px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
  margin-top: 4px;
}

.tfq-btn-primary:hover {
  background: var(--tfq-terra-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(196, 98, 58, 0.35);
}

.tfq-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid var(--tfq-forest);
  color: var(--tfq-forest);
  font-family: var(--tfq-font-body);
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  width: 100%;
  justify-content: center;
}

.tfq-btn-outline:hover {
  background: var(--tfq-forest);
  color: var(--tfq-white);
}

/* Quick Facts Card */
.tfq-quick-facts {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--tfq-cream);
}

.tfq-sb-title {
  font-family: var(--tfq-font-display);
  font-size: 17px;
  font-weight: 700;
  color: #FF9800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tfq-sb-title svg {
  color: var(--tfq-terracotta);
}

.tfq-fact {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tfq-fact-icon {
  width: 40px;
  height: 40px;
  background: var(--tfq-white);
  border: 1.5px solid var(--tfq-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--tfq-terracotta);
}

.tfq-fact > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tfq-fact strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--tfq-ink);
}

.tfq-fact span {
  font-size: 12px;
  color: var(--tfq-muted);
}

/* Download Card */
.tfq-download-card {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(135deg, #F7F3EE, #EDE5DA);
}

.tfq-dl-icon {
  width: 48px;
  height: 48px;
  background: var(--tfq-forest);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tfq-white);
}

.tfq-download-card h4 {
  font-family: var(--tfq-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--tfq-ink);
  margin: 0;
}

.tfq-download-card p {
  font-size: 13px;
  color: var(--tfq-muted);
  margin: 0;
  line-height: 1.6;
}

/* Testimonial Card */
.tfq-testimonial-card {
  padding: 24px;
  background: var(--tfq-forest);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tfq-stars {
  display: flex;
  gap: 3px;
}

.tfq-testimonial-card blockquote {
  font-family: var(--tfq-font-display);
  font-style: italic;
  font-size: 15px;
  color: rgba(255,255,255,0.9);
  margin: 0;
  line-height: 1.65;
  border-left: 3px solid var(--tfq-terra-light);
  padding-left: 14px;
}

.tfq-testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tfq-testi-author img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.2);
}

.tfq-testi-author strong {
  display: block;
  font-size: 13.5px;
  color: var(--tfq-white);
  font-weight: 600;
}

.tfq-testi-author span {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

/* =============================================
   BOTTOM CTA BAND
   ============================================= */
.tfq-bottom-band {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.tfq-band-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.8);
}

.tfq-band-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(45,74,62,0.92) 0%, rgba(28,26,24,0.7) 100%);
}

.tfq-band-content {
  position: relative;
  z-index: 1;
  max-width: 1260px;
  margin: 0 auto;
  padding: 60px 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.tfq-band-text h2 {
  font-family: var(--tfq-font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--tfq-white);
  margin: 0 0 10px;
  line-height: 1.2;
}

.tfq-band-text p {
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  margin: 0;
  max-width: 480px;
  line-height: 1.7;
}

.tfq-band-actions {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.tfq-btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tfq-white);
  color: var(--tfq-forest);
  font-family: var(--tfq-font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.tfq-btn-white:hover {
  background: var(--tfq-cream);
  transform: translateY(-1px);
}

.tfq-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: var(--tfq-white);
  font-family: var(--tfq-font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.tfq-btn-ghost:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

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

@keyframes tfqFadeLeft {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Staggered accordion entrance */
.tfq-item {
  animation: tfqFadeUp 0.5s ease both;
}

.tfq-item:nth-child(2)  { animation-delay: 0.05s; }
.tfq-item:nth-child(3)  { animation-delay: 0.10s; }
.tfq-item:nth-child(4)  { animation-delay: 0.15s; }
.tfq-item:nth-child(5)  { animation-delay: 0.20s; }
.tfq-item:nth-child(6)  { animation-delay: 0.25s; }
.tfq-item:nth-child(7)  { animation-delay: 0.30s; }
.tfq-item:nth-child(8)  { animation-delay: 0.35s; }

/* =============================================
   FILTER LOGIC (JS-assisted, uses .hidden class)
   ============================================= */
.tfq-item.tfq-hidden,
.tfq-cat-label.tfq-hidden {
  display: none;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1100px) {
  .tfq-hero-band {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .tfq-hero-img-wrap {
    height: 300px;
  }

  .tfq-hero-inner {
    padding: 48px 40px;
  }

  .tfq-main {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .tfq-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .tfq-cta-card {
    grid-column: 1 / -1;
  }

  .tfq-band-content {
    flex-direction: column;
    text-align: center;
  }

  .tfq-band-actions {
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .tfq-hero-inner {
    padding: 36px 24px;
  }

  .tfq-hero-stats {
    flex-wrap: wrap;
    gap: 16px;
  }

  .tfq-filter-inner {
    padding: 12px 20px;
  }

  .tfq-main {
    padding: 40px 20px;
  }

  .tfq-sidebar {
    grid-template-columns: 1fr;
  }

  .tfq-salary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tfq-band-content {
    padding: 48px 24px;
  }

  .tfq-band-actions {
    flex-direction: column;
    width: 100%;
  }

  .tfq-btn-white,
  .tfq-btn-ghost {
    justify-content: center;
  }
}

/* =============================================
   JAVASCRIPT (inline scroll behaviour)
   ============================================= */

   /*
 * hmo-tef1.css
 * TEFL Homepage — Bold Editorial Aesthetic
 * Fonts: Fraunces (display) + Plus Jakarta Sans (body)
 * Palette: Deep forest + warm sand + electric amber
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* ─────────────────────── TOKENS ─────────────────────── */
.ht1-hero, .ht1-trust, .ht1-courses, .ht1-spec, .ht1-why,
.ht1-dest, .ht1-proof, .ht1-cta {
  --ink:       #0f1a14;
  --ink-mid:   #3a4d41;
  --ink-muted: #7a9085;
  --forest:    #1a7a6e;
  --forest-dk: #0f5549;
  --forest-lt: #e6f4f2;
  --sand:      #f5ede0;
  --sand-dk:   #ecdcc8;
  --amber:     #e8901a;
  --amber-dk:  #b96d0d;
  --amber-lt:  #fdf2e0;
  --white:     #ffffff;
  --off-white: #fbf8f4;
  --border:    rgba(26,122,110,.13);
  --r:         14px;
  --r-lg:      24px;
  --r-xl:      36px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-sizing: border-box;
}
.ht1-hero *, .ht1-trust *, .ht1-courses *, .ht1-spec *, .ht1-why *,
.ht1-dest *, .ht1-proof *, .ht1-cta * { box-sizing: border-box; margin: 0; padding: 0; }

/* ─────────────────────── LAYOUT ─────────────────────── */
.ht1-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ─────────────────────── SHARED ATOMS ─────────────────────── */
.ht1-tag {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--forest);
  background: var(--forest-lt);
  border: 1px solid rgba(26,122,110,.2);
  border-radius: 100px;
  padding: 5px 14px;
}
.ht1-tag--light {
  background: rgba(255,255,255,.15);
  color: #fff;
  border-color: rgba(255,255,255,.3);
}

.ht1-h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 900;
  color: #09743dbd;
  line-height: 1.1;
}
.ht1-h2 em { font-style: italic; color: #ff9800e0; font-weight: 700; }
.ht1-h2--light { color: #fff; }
.ht1-h2--light em { color: #a8e0d9; }

/* ─────────────────────── BUTTONS ─────────────────────── */
.ht1-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 100px;
  padding: 13px 26px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .22s ease;
  white-space: nowrap;
  
}
.ht1-btn--hero {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
  font-size: 1rem;
  padding: 16px 36px;
  box-shadow: 0 4px 28px rgba(232,144,26,.38);
}
.ht1-btn--hero:hover { background: var(--amber-dk); transform: translateY(-2px); box-shadow: 0 8px 36px rgba(232,144,26,.45); }

.ht1-btn--ghost {
  background: transparent;
  color: var(--forest);
  border-color: var(--forest);
}
.ht1-btn--ghost:hover { background: var(--forest); color: #fff; transform: translateY(-2px); }

.ht1-btn--card {
  background: var(--forest-lt);
  color: var(--forest);
  border-color: var(--border);
  font-size: .85rem;
  padding: 11px 20px;
}
.ht1-btn--card:hover { background: var(--forest); color: #fff; border-color: var(--forest); }

.ht1-btn--hero-card {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
  font-size: .9rem;
  padding: 13px 24px;
  box-shadow: 0 4px 20px rgba(232,144,26,.35);
}
.ht1-btn--hero-card:hover { background: var(--amber-dk); transform: translateY(-2px); }

.ht1-btn--spec {
  background: var(--forest);
  color: #fff;
  border-color: var(--forest);
  font-size: .9rem;
}
.ht1-btn--spec:hover { background: var(--forest-dk); transform: translateY(-2px); }

.ht1-btn--cta-main {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
  font-size: 1.05rem;
  padding: 18px 40px;
  box-shadow: 0 6px 32px rgba(232,144,26,.4);
}
.ht1-btn--cta-main:hover { background: var(--amber-dk); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(232,144,26,.5); }

/* ═══════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */
.ht1-hero {
  position: relative;
  min-height: 100vh;
  background: #244f37;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* Canvas layers */
.ht1-hero__canvas { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.ht1-hero__canvas-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

.ht1-hero__canvas-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}
.ht1-hero__canvas-glow--a {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(26,122,110,.35), transparent 70%);
  top: -120px; right: -60px;
  animation: ht1-pulse 9s ease-in-out infinite alternate;
}
.ht1-hero__canvas-glow--b {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(232,144,26,.18), transparent 70%);
  bottom: 80px; left: -80px;
  animation: ht1-pulse 12s 2s ease-in-out infinite alternate-reverse;
}
.ht1-hero__canvas-glow--c {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(26,122,110,.15), transparent 70%);
  top: 40%; left: 38%;
  animation: ht1-pulse 7s 1s ease-in-out infinite alternate;
}
@keyframes ht1-pulse {
  from { transform: scale(1); opacity:.8; }
  to   { transform: scale(1.25) translate(20px,-20px); opacity:1; }
}

/* Photo panel — right side diagonal clip */
.ht1-hero__photo-panel {
  position: absolute;
  top: 0; right: 0;
  width: 52%;
  height: 100%;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 1;
}
.ht1-hero__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.7);
}
.ht1-hero__photo-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--ink) 0%, transparent 35%, rgba(15,26,20,.5) 100%);
}

/* Vertical rotated label */
.ht1-hero__vert-text {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  white-space: nowrap;
  z-index: 2;
}

/* Hero content */
.ht1-hero .ht1-wrap {
  position: relative;
  z-index: 3;
  padding-bottom: 80px;
  padding-top: 70px;
}
.ht1-hero__body { max-width: 620px; }

.ht1-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 28px;
  animation: ht1-fadeUp .7s ease both;
}
.ht1-hero__eyebrow-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--amber);
  animation: ht1-blink 2s ease infinite;
}
@keyframes ht1-blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }

/* THE HEADLINE — massive editorial type */
.ht1-hero__h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(4.5rem, 10vw, 9.5rem);
  line-height: .95;
  color: #fff;
  margin-bottom: 40px;
  letter-spacing: -.02em;
}
.ht1-hero__h1-row { display: block; }
.ht1-hero__h1-row--outline {
  -webkit-text-stroke: 2px rgba(255,255,255,.45);
  color: transparent;
  animation: ht1-fadeUp .7s .1s ease both;
}
.ht1-hero__h1-row--fill {
  color: #fff;
  animation: ht1-fadeUp .7s .18s ease both;
}
.ht1-hero__h1-row--italic {
  font-style: italic;
  color: var(--amber);
  font-weight: 400;
  animation: ht1-fadeUp .7s .26s ease both;
}

/* sub + CTA */
.ht1-hero__foot {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  animation: ht1-fadeUp .7s .35s ease both;
}
.ht1-hero__sub {
  font-size: 1rem;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  max-width: 320px;
}
.ht1-hero__sub strong { color: rgba(255,255,255,.9); font-weight: 600; }

/* Stats */
.ht1-hero__stats {
  display: flex;
  align-items: center;
  gap: 20px;
  animation: ht1-fadeUp .7s .44s ease both;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 28px;
}
.ht1-hero__stat { display: flex; flex-direction: column; gap: 2px; }
.ht1-hero__stat strong {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--amber);
  line-height: 1;
}
.ht1-hero__stat span {
  font-size: .72rem;
  font-weight: 500;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.ht1-hero__stat-sep { width: 1px; height: 36px; background: rgba(255,255,255,.1); }

/* Scroll cue */
.ht1-hero__scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 4;
}
.ht1-hero__scroll-track {
  width: 40px; height: 1px;
  background: rgba(255,255,255,.2);
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}
.ht1-hero__scroll-thumb {
  height: 100%;
  width: 40%;
  background: var(--amber);
  border-radius: 1px;
  animation: ht1-scrollThumb 2.5s ease-in-out infinite;
}
@keyframes ht1-scrollThumb {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.ht1-hero__scroll-cue span {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}

@keyframes ht1-fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════
   TRUST STRIP
═══════════════════════════════════════════════════════ */
.ht1-trust {
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.ht1-trust__inner {
  display: flex;
  align-items: center;
  gap: 36px;
  padding-top: 22px;
  padding-bottom: 22px;
  flex-wrap: wrap;
}
.ht1-trust__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.ht1-trust__items {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ht1-trust__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-mid);
}
.ht1-trust__divider { width: 1px; height: 22px; background: var(--border); }

/* ═══════════════════════════════════════════════════════
   COURSES
═══════════════════════════════════════════════════════ */
.ht1-courses {
  background: #f6f0e7;
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}
.ht1-courses::before {
  content: '';
  position: absolute;
  right: -200px; top: -200px;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,122,110,.06), transparent 70%);
  pointer-events: none;
}

/* Intro split */
.ht1-courses__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 60px;
}
.ht1-courses__intro-left .ht1-tag { margin-bottom: 16px; }
.ht1-courses__intro-right p {
  font-size: 1rem;
  color: var(--ink-mid);
  line-height: 1.75;
  margin-bottom: 20px;
}
.ht1-courses__intro-right strong { color: var(--forest); font-weight: 600; }

/* Course card grid */
.ht1-courses__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 12px 60px rgba(15,26,20,.1);
  margin-bottom: 32px;
}

.ht1-ccard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  transition: all .3s ease;
  background: var(--white);
}

.ht1-ccard-1 {
  position: relative;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  transition: all .3s ease;
  background: var(--forest-lt);
}

.ht1-ccard-2 {
  position: relative;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  transition: all .3s ease;
  background: #b1e8b2;
}

.ht1-ccard:last-child { border-right: none; }

/* Reveal animation */
.ht1-ccard[data-reveal] { opacity: 0; transform: translateY(20px); }
.ht1-ccard[data-reveal].ht1--in {
  opacity: 1; transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease, background .3s ease, box-shadow .3s ease;
}
.ht1-ccard:nth-child(2)[data-reveal].ht1--in { transition-delay: .08s; }
.ht1-ccard:nth-child(3)[data-reveal].ht1--in { transition-delay: .16s; }
.ht1-ccard:nth-child(4)[data-reveal].ht1--in { transition-delay: .24s; }

.ht1-ccard:hover { background: #ede1d1; z-index: 2; box-shadow: 0 20px 60px rgba(26,122,110,.15); }
.ht1-ccard-1:hover { background: #ede1d1; z-index: 2; box-shadow: 0 20px 60px rgba(26,122,110,.15); }
.ht1-ccard-2:hover { background: #ede1d1; z-index: 2; box-shadow: 0 20px 60px rgba(26,122,110,.15); }
.ht1-ccard--hero { background: var(--forest); border-right-color: rgba(255,255,255,.1); }
.ht1-ccard--hero:hover { background: #4CAF50; box-shadow: 0 24px 70px rgba(15,85,73,.4); }

/* ribbon */
.ht1-ccard__ribbon {
  position: absolute;
  top: 0; right: 0;
  background: var(--amber);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 14px 5px 18px;
  border-bottom-left-radius: 10px;
  z-index: 2;
}

/* Number */
.ht1-ccard__num {
  font-family: 'Fraunces', serif;
  font-size: 3rem;
  font-weight: 900;
  color: rgba(26,122,110,.08);
  padding: 20px 22px 0;
  line-height: 1;
  transition: color .3s;
}
.ht1-ccard--hero .ht1-ccard__num { color: rgba(255,255,255,.12); }
.ht1-ccard:hover .ht1-ccard__num { color: rgba(26,122,110,.15); }

/* Bar accent */
.ht1-ccard__bar {
  width: 32px; height: 3px;
  background: var(--amber);
  border-radius: 3px;
  margin: 12px 22px 0;
  transition: width .3s ease;
}
.ht1-ccard:hover .ht1-ccard__bar { width: 56px; }

.ht1-ccard__body { flex: 1; padding: 16px 22px 20px; }

.ht1-ccard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ht1-ccard__badge {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--forest);
  background: var(--forest-lt);
  border-radius: 100px;
  padding: 3px 10px;
}
.ht1-ccard--hero .ht1-ccard__badge { background: rgba(255,255,255,.18); color: #fff; }
.ht1-ccard__hours {
  font-size: .75rem;
  font-weight: 700;
  color: var(--amber);
}

.ht1-ccard__body h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 10px;
}
.ht1-ccard--hero .ht1-ccard__body h3 { color: #fff; }

.ht1-ccard__body > p {
  font-size: .83rem;
  color: var(--ink-muted);
  line-height: 1.65;
  margin-bottom: 16px;
}
.ht1-ccard--hero .ht1-ccard__body > p { color: rgba(255,255,255,.75); }

.ht1-ccard__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ht1-ccard__features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .8rem;
  color: var(--ink-mid);
  line-height: 1.4;
}
.ht1-ccard--hero .ht1-ccard__features li { color: rgba(255,255,255,.8); }
.ht1-ccard__features li svg { flex-shrink: 0; stroke: var(--forest); margin-top: 2px; }
.ht1-ccard--hero .ht1-ccard__features li svg { stroke: var(--amber); }

.ht1-ccard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 22px;
  border-top: 1px solid var(--border);
  gap: 12px;
}
.ht1-ccard--hero .ht1-ccard__foot { border-top-color: rgba(255,255,255,.12); }

.ht1-ccard__price s {
  display: block;
  font-size: .78rem;
  color: var(--ink-muted);
  text-decoration: line-through;
}
.ht1-ccard--hero .ht1-ccard__price s { color: rgba(255,255,255,.4); }
.ht1-ccard__price strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: #09675e;
  line-height: 1;
}
.ht1-ccard--hero .ht1-ccard__price strong { color: #fff; }

/* Quiz nudge */
.ht1-courses__quiz-nudge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  flex-wrap: wrap;
  width: fit-content;
  margin: 0 auto;
}
.ht1-courses__quiz-nudge svg { stroke: var(--forest); flex-shrink: 0; }
.ht1-courses__quiz-nudge span { font-size: .9rem; color: var(--ink-mid); }
.ht1-courses__quiz-nudge strong { color: var(--forest); }
.ht1-courses__quiz-nudge a {
  font-size: .9rem;
  font-weight: 700;
  color: var(--amber);
  text-decoration: none;
}
.ht1-courses__quiz-nudge a:hover { text-decoration: underline; color: #08786d;}


/* ═══════════════════════════════════════════════════════
   SPECIALIZATIONS
═══════════════════════════════════════════════════════ */
.ht1-spec {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
}
.ht1-spec__backdrop {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #0f1a14 0%, #1a3d33 50%, #0f1a14 100%);
  z-index: 0;
}
.ht1-spec__backdrop::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
  background-size: 48px 48px;
}
.ht1-spec .ht1-wrap { position: relative; z-index: 1; }

.ht1-spec__header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 72px;
}
.ht1-spec__header .ht1-tag { margin-bottom: 14px; }
.ht1-spec__header-sub {
  font-size: 1rem;
  color: rgba(255,255,255,.6);
  line-height: 1.75;
  max-width: 480px;
}

.ht1-spec__panels { display: flex; flex-direction: column; gap: 60px; }

/* Panel layout: alternating image + text */
.ht1-spanel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.ht1-spanel--rev { direction: rtl; }
.ht1-spanel--rev > * { direction: ltr; }

.ht1-spanel[data-reveal] { opacity: 0; transform: translateX(-30px); }
.ht1-spanel--rev[data-reveal] { transform: translateX(30px); }
.ht1-spanel[data-reveal].ht1--in {
  opacity: 1; transform: translateX(0);
  transition: opacity .6s ease, transform .6s ease;
}

/* Image column */
.ht1-spanel__img-col { position: relative; }
.ht1-spanel__img-frame {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
}
.ht1-spanel__img-frame img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s ease;
}
.ht1-spanel:hover .ht1-spanel__img-frame img { transform: scale(1.05); }

.ht1-spanel__earn-chip {
  position: absolute;
  bottom: -16px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--amber);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 100px;
  box-shadow: 0 8px 28px rgba(232,144,26,.4);
  white-space: nowrap;
}
.ht1-spanel__earn-chip--teal { background: var(--forest); box-shadow: 0 8px 28px rgba(26,122,110,.4); }
.ht1-spanel__earn-chip--amber { background: #c4581c; box-shadow: 0 8px 28px rgba(196,88,28,.4); }

/* Info column */
.ht1-spanel__icon {
  width: 52px; height: 52px;
  background: rgba(26,122,110,.2);
  border: 1px solid rgba(26,122,110,.35);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6cd9cc;
  margin-bottom: 20px;
}
.ht1-spanel__info h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.75rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 14px;
}
.ht1-spanel__info p {
  font-size: .95rem;
  color: rgba(255,255,255,.65);
  line-height: 1.75;
  margin-bottom: 22px;
}
.ht1-spanel__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.ht1-spanel__pills span {
  font-size: .75rem;
  font-weight: 600;
  color: #6cd9cc;
  background: rgba(26,122,110,.2);
  border: 1px solid rgba(26,122,110,.3);
  border-radius: 100px;
  padding: 4px 12px;
}
.ht1-spanel__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.ht1-spanel__price-row strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--amber);
  line-height: 1;
}
.ht1-spanel__price-row small {
  display: block;
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════
   WHY US — BENTO GRID
═══════════════════════════════════════════════════════ */
.ht1-why {
  background: #e6f3d847;
  padding: 110px 0;
}
.ht1-why__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-bottom: 60px;
}

/* BENTO */
.ht1-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
}

.ht1-bento__tile {
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 32px;
  transition: transform .28s ease, box-shadow .28s ease;
}
.ht1-bento__tile:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(15,26,20,.12); }

/* Photo tile — spans 2 cols, 2 rows */
.ht1-bento__tile--photo {
  grid-column: span 2;
  grid-row: span 2;
  padding: 0;
  position: relative;
  min-height: 420px;
}
.ht1-bento__tile--photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ht1-bento__photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,26,20,.88) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
}
.ht1-bento__photo-quote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(255,255,255,.95);
  line-height: 1.5;
  margin-bottom: 8px;
}
.ht1-bento__photo-overlay span {
  font-size: .8rem;
  font-weight: 600;
  color: var(--amber);
  letter-spacing: .04em;
}

/* Feature tiles */
.ht1-bento__tile--feature {
  background: #60ab63f7;
  border: 1px solid var(--border);
}
.ht1-bento__tile--teal { background: #14665bc2; border-color: var(--forest); }
.ht1-bento__tile--amber { background: #6c0303a3; border-color: rgba(232,144,26,.2); }
.ht1-bento__tile--dark { background: #066691db; border-color: var(--ink); }

.ht1-bento__feature-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.ht1-bento__tile--feature .ht1-bento__feature-icon { background: var(--forest-lt); color: var(--forest); }
.ht1-bento__tile--teal .ht1-bento__feature-icon { background: rgba(255,255,255,.15); color: #fff; }
.ht1-bento__tile--amber .ht1-bento__feature-icon { background: rgb(216 150 54); color: #009688b5; }
.ht1-bento__tile--dark .ht1-bento__feature-icon { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }

.ht1-bento__tile h4 {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #f1e045f2;
  margin-bottom: 8px;
}
.ht1-bento__tile--teal h4 { color: #fff; }
.ht1-bento__tile--dark h4 { color: rgba(255,255,255,.95); }
.ht1-bento__tile p {
  font-size: .83rem;
  color: #f0f1f1eb;
  line-height: 1.65;
}
.ht1-bento__tile--teal p { color: rgba(255,255,255,.7); }
.ht1-bento__tile--dark p { color: rgba(255,255,255,.55); }

/* Big stat tile */
.ht1-bento__tile--stat {
  background: #ff980085;
  border: 1px solid var(--sand-dk);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.ht1-bento__big-num {
  font-family: 'Fraunces', serif;
  font-size: 4rem;
  font-weight: 900;
  color: var(--forest);
  line-height: 1;
}
.ht1-bento__big-num em { font-style: normal; font-size: 2.5rem; color: var(--amber); }
.ht1-bento__tile--stat > p { font-size: .85rem; color: var(--ink-mid); line-height: 1.6; }

/* Salary tile */
.ht1-bento__tile--salary {
  background: #e4c18794;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ht1-bento__salary-range {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--forest);
}
.ht1-bento__salary-bar {
  flex: 1;
  height: 8px;
  background: var(--forest-lt);
  border-radius: 8px;
  overflow: hidden;
}
.ht1-bento__salary-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--forest), var(--amber));
  border-radius: 8px;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.ht1-bento__tile--salary > p { font-size: .82rem; color: var(--ink-mid); line-height: 1.55; }
.ht1-bento__tile--salary > small { font-size: .72rem; color: #555c59; }

/* ═══════════════════════════════════════════════════════
   DESTINATIONS
═══════════════════════════════════════════════════════ */
.ht1-dest {
  background: #f5ede08a;
  padding: 110px 0;
}
.ht1-dest__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-bottom: 60px;
}

.ht1-dest__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 44px;
}

.ht1-dest__card {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 4px 20px rgba(15,26,20,.07);
  border: 1px solid var(--border);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ht1-dest__card[data-reveal] { opacity: 0; transform: translateY(28px); }
.ht1-dest__card[data-reveal].ht1--in {
  opacity: 1; transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease, box-shadow .3s ease;
}
.ht1-dest__card:nth-child(2)[data-reveal].ht1--in { transition-delay: .1s; }
.ht1-dest__card:nth-child(3)[data-reveal].ht1--in { transition-delay: .2s; }
.ht1-dest__card:nth-child(4)[data-reveal].ht1--in { transition-delay: .3s; }
.ht1-dest__card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(15,26,20,.14); }

.ht1-dest__img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.ht1-dest__img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s ease;
}
.ht1-dest__card:hover .ht1-dest__img-wrap img { transform: scale(1.08); }
.ht1-dest__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,26,20,.7) 0%, transparent 55%);
}
.ht1-dest__name {
  position: absolute;
  bottom: 14px; left: 18px;
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
}
.ht1-dest__info { padding: 18px 20px 20px; }
.ht1-dest__info p {
  font-size: .84rem;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}
.ht1-dest__salary { font-size: .88rem; color: var(--ink-mid); }
.ht1-dest__salary strong { color: var(--forest); font-weight: 700; }
.ht1-dest__footer { text-align: center; }

/* ═══════════════════════════════════════════════════════
   SOCIAL PROOF
═══════════════════════════════════════════════════════ */
.ht1-proof {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
}
.ht1-proof__bg {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, #8bc34ad6 0%, #496d80 60%, #FF9800 100%);
}
.ht1-proof__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.ht1-proof .ht1-wrap { position: relative; z-index: 1; }

.ht1-proof__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 24px;
  align-items: start;
}

.ht1-proof__card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  padding: 32px;
  backdrop-filter: blur(10px);
  transition: transform .3s ease, background .3s ease;
}
.ht1-proof__card[data-reveal] { opacity: 0; transform: translateY(24px); }
.ht1-proof__card[data-reveal].ht1--in {
  opacity: 1; transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease, background .3s ease;
}
.ht1-proof__card:nth-child(2)[data-reveal].ht1--in { transition-delay: .1s; }
.ht1-proof__card:nth-child(3)[data-reveal].ht1--in { transition-delay: .2s; }
.ht1-proof__card:hover { background: rgba(255,255,255,.1); transform: translateY(-5px); }
.ht1-proof__card--featured {
  background: var(--forest);
  border-color: var(--forest);
  padding: 40px 32px;
}
.ht1-proof__card--featured:hover { background: var(--forest-dk); }

.ht1-proof__stars {
  display: flex;
  gap: 3px;
  color: var(--amber);
  margin-bottom: 18px;
}
.ht1-proof__card > p {
  font-size: .9rem;
  color: rgba(255,255,255,.75);
  line-height: 1.75;
  margin-bottom: 24px;
  position: relative;
}
.ht1-proof__card > p::before {
  content: '\201C';
  font-family: 'Fraunces', serif;
  font-size: 4rem;
  line-height: .8;
  color: rgba(255,255,255,.08);
  position: absolute;
  top: -6px;
  left: -6px;
}

.ht1-proof__author { display: flex; align-items: center; gap: 12px; }
.ht1-proof__author img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.2);
}
.ht1-proof__author strong { display: block; font-size: .88rem; font-weight: 700; color: #fff; }
.ht1-proof__author span { display: block; font-size: .75rem; color: rgba(255,255,255,.5); }

/* ═══════════════════════════════════════════════════════
   CTA
═══════════════════════════════════════════════════════ */
.ht1-cta {
  position: relative;
  background: #e9dcbb52;
  padding: 110px 0;
  overflow: hidden;
}
.ht1-cta__bg-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 80% 50%, rgba(26,122,110,.08), transparent),
    radial-gradient(ellipse 40% 70% at 20% 80%, rgba(232,144,26,.06), transparent);
  pointer-events: none;
}
.ht1-cta .ht1-wrap { position: relative; z-index: 1; }

.ht1-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.ht1-cta__large-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 24px;
}
.ht1-cta__large-text span {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  color: #ff9800e0;
  line-height: 1.05;
}
.ht1-cta__accent { font-style: italic; color: var(--forest) !important; }
.ht1-cta__left > p {
  font-size: 1rem;
  color: var(--ink-mid);
  line-height: 1.75;
  margin-bottom: 28px;
}
.ht1-cta__left strong { color: var(--forest); font-weight: 600; }

.ht1-cta__checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 36px;
}
.ht1-cta__checks span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-mid);
}
.ht1-cta__checks span svg { stroke: var(--forest); flex-shrink: 0; }

/* Certificate visual */
.ht1-cta__cert-wrap { position: relative; display: flex; justify-content: center; }
.ht1-cta__cert {
  width: 100%;
  max-width: 360px;
  background: #f1f0e9d1;
  border-radius: var(--r-xl);
  padding: 36px 32px;
  box-shadow: 0 24px 80px rgba(15,26,20,.15);
  border: 2px solid var(--forest);
  position: relative;
  overflow: hidden;
  animation: ht1-certFloat 6s ease-in-out infinite;
}
.ht1-cta__cert::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(26,122,110,.15);
  border-radius: 20px;
  pointer-events: none;
}
.ht1-cta__cert::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--forest), var(--amber));
}
@keyframes ht1-certFloat {
  0%,100% { transform: translateY(0) rotate(-.8deg); }
  50% { transform: translateY(-14px) rotate(.8deg); }
}

.ht1-cta__cert-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.ht1-cta__cert-top div span {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ht1-cta__cert-top div strong {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: #236e64e3;
}
.ht1-cta__cert-seal { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ht1-cta__cert-seal-text span {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--amber);
  line-height: 1;
}
.ht1-cta__cert-seal-text small {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted);
}
.ht1-cta__cert-name {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 6px;
}
.ht1-cta__cert-footer { font-size: .75rem; color: var(--ink-muted); font-weight: 500; }

/* Floating chips */
.ht1-cta__chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 10px 16px;
  font-size: .82rem;
  font-weight: 600;
  color: #236e64e3;
  box-shadow: 0 4px 20px rgba(15,26,20,.1);
  white-space: nowrap;
}
.ht1-cta__chip svg { color: var(--amber); flex-shrink: 0; }
.ht1-cta__chip--1 { top: -16px; right: -20px; }
.ht1-cta__chip--2 { bottom: 20px; right: -28px; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .ht1-courses__grid { grid-template-columns: repeat(2, 1fr); }
  .ht1-bento { grid-template-columns: repeat(2, 1fr); }
  .ht1-bento__tile--photo { grid-column: span 2; grid-row: span 1; min-height: 300px; }
  .ht1-dest__strip { grid-template-columns: repeat(2, 1fr); }
  .ht1-proof__grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .ht1-spec__header { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .ht1-hero__photo-panel { display: none; }
  .ht1-hero .ht1-wrap { padding-bottom: 60px; padding-top: 110px; }
  .ht1-courses__intro { grid-template-columns: 1fr; gap: 24px; }
  .ht1-spanel, .ht1-spanel--rev { grid-template-columns: 1fr; direction: ltr; gap: 36px; }
  .ht1-cta__inner { grid-template-columns: 1fr; gap: 60px; }
  .ht1-cta__right { display: flex; justify-content: center; }
}

@media (max-width: 640px) {
  .ht1-wrap { padding: 0 20px; }
  .ht1-hero__h1 { font-size: clamp(3.5rem, 14vw, 5.5rem); }
  .ht1-hero__foot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ht1-hero__stats { flex-wrap: wrap; gap: 16px; }
  .ht1-courses__grid { grid-template-columns: 1fr; border-radius: var(--r); }
  .ht1-ccard { border-right: none; border-bottom: 1px solid var(--border); }
  .ht1-ccard:last-child { border-bottom: none; }
  .ht1-bento { grid-template-columns: 1fr; }
  .ht1-bento__tile--photo { grid-column: span 1; }
  .ht1-dest__strip { grid-template-columns: 1fr; }
  .ht1-cta__checks { grid-template-columns: 1fr; }
  .ht1-cta__chip { display: none; }
  .ht1-hero, .ht1-courses, .ht1-spec, .ht1-why,
  .ht1-dest, .ht1-proof, .ht1-cta { padding-top: 72px; padding-bottom: 72px; }
}

/* ============================================================
   SPECIALIZED TEFL COURSES SECTION — crs-up1
   Horizontal card layout with pricing. All selectors namespaced.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

.crs-up1-section {
  --crs-gold:    #c8973a;
  --crs-coral:   #d95f3b;
  --crs-blue:    #2e7fc1;
  --crs-ink:     #18182b;
  --crs-body:    #3c3c58;
  --crs-muted:   #6a6a85;
  --crs-cream:   #f7f4ef;
  --crs-white:   #ffffff;
  --crs-border:  rgba(24,24,43,0.09);
  --crs-r:       18px;
  --crs-display: 'Cormorant Garamond', Georgia, serif;
  --crs-sans:    'Plus Jakarta Sans', sans-serif;
}

/* ── Section Shell ── */
.crs-up1-section {
  position: relative;
  padding: 110px 0 90px;
  background-color: var(--crs-cream);
  background-image:
    radial-gradient(ellipse 70% 50% at 15% 15%, rgba(200,151,58,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 55% 70% at 88% 85%, rgba(46,127,193,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(217,95,59,0.05) 0%, transparent 70%);
  overflow: hidden;
  font-family: var(--crs-sans);
}

/* ── Dot Pattern ── */
.crs-up1-bg-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── Orbs ── */
.crs-up1-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
  animation: crs-up1-drift 14s ease-in-out infinite;
}
.crs-up1-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(200,151,58,0.14) 0%, transparent 70%);
  top: -120px; left: -160px;
  animation-duration: 16s;
}
.crs-up1-orb-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(46,127,193,0.11) 0%, transparent 70%);
  bottom: -60px; right: -100px;
  animation-duration: 11s;
  animation-delay: -5s;
}

@keyframes crs-up1-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(15px,-18px) scale(1.04); }
  70%     { transform: translate(-8px,10px) scale(0.97); }
}

/* ── Container ── */
.crs-up1-container {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Header ── */
.crs-up1-header {
  text-align: center;
  margin-bottom: 60px;
  animation: crs-up1-up 0.65s ease both;
}
@keyframes crs-up1-up {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

.crs-up1-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crs-gold);
  margin-bottom: 18px;
}
.crs-up1-eyebrow svg {
  width: 11px; height: 11px;
  flex-shrink: 0;
}
.crs-up1-eyebrow-line {
  display: block;
  width: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--crs-gold));
}
.crs-up1-eyebrow-line:last-child {
  background: linear-gradient(90deg, var(--crs-gold), transparent);
}

.crs-up1-title {
  font-family: var(--crs-display);
  font-size: clamp(38px, 5.5vw, 62px);
  font-weight: 700;
  line-height: 1.1;
  color: #09743dbd;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.crs-up1-title em {
  font-style: italic;
  color: #ff9800e0;
}

.crs-up1-tagline {
  font-size: 15px;
  color: var(--crs-muted);
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ── Horizontal Stack ── */
.crs-up1-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Card Base ── */
.crs-up1-card {
  position: relative;
  display: grid;
  grid-template-columns: 360px 1fr;
  background: var(--crs-white);
  border-radius: var(--crs-r);
  overflow: hidden;
  border: 1px solid var(--crs-border);
  box-shadow: 0 2px 20px rgba(24,24,43,0.06);
  transition: transform 0.38s cubic-bezier(.25,.46,.45,.94),
              box-shadow 0.38s cubic-bezier(.25,.46,.45,.94);
  animation: crs-up1-up 0.65s ease both;
}
.crs-up1-card:nth-child(1) { animation-delay: 0.1s; }
.crs-up1-card:nth-child(2) { animation-delay: 0.22s; }
.crs-up1-card:nth-child(3) { animation-delay: 0.34s; }

.crs-up1-card:hover {
  transform: translateY(-6px) translateX(2px);
  box-shadow: 0 18px 52px rgba(24,24,43,0.13);
}

/* Featured card */
.crs-up1-card-featured {
  border-color: rgba(217,95,59,0.22);
  box-shadow: 0 4px 28px rgba(217,95,59,0.1);
}
.crs-up1-card-featured:hover {
  box-shadow: 0 22px 60px rgba(217,95,59,0.18);
}

/* ── Popular Badge ── */
.crs-up1-popular-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #d95f3b, #b83f1e);
  color: #fff;
  font-family: var(--crs-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(217,95,59,0.4);
}
.crs-up1-popular-badge svg {
  width: 10px; height: 10px;
}

/* ── Card Media (left panel) ── */
.crs-up1-card-media {
  position: relative;
  overflow: hidden;
  min-height: 280px;
}
.crs-up1-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(.25,.46,.45,.94);
}
.crs-up1-card:hover .crs-up1-card-img { transform: scale(1.06); }

.crs-up1-card-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    120deg,
    rgba(24,24,43,0.48) 0%,
    rgba(24,24,43,0.12) 60%,
    transparent 100%
  );
}

/* ── Media Label (bottom-left of image) ── */
.crs-up1-media-label {
  position: absolute;
  bottom: 18px; left: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
}
.crs-up1-media-label svg {
  width: 13px; height: 13px; flex-shrink: 0;
}

/* ── Price Tag (top-right of image) ── */
.crs-up1-price-tag {
  position: absolute;
  top: 18px; right: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: rgba(24,24,43,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 10px 14px;
  line-height: 1;
}
.crs-up1-price-was {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-decoration: line-through;
  font-weight: 400;
  margin-bottom: 3px;
}
.crs-up1-price-now {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  font-family: var(--crs-sans);
}
.crs-up1-price-tag-featured .crs-up1-price-now { color: #f89c7b; }

/* ── Card Body (right panel) ── */
.crs-up1-card-body {
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

/* ── Card Top Row ── */
.crs-up1-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── Tag ── */
.crs-up1-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
}
.crs-up1-tag-be { background: rgba(200,151,58,0.12); color: #009688d6; }
.crs-up1-tag-yl { background: rgba(217,95,59,0.1);  color: #ff9800e6; }
.crs-up1-tag-ot { background: rgba(46,127,193,0.1); color: #009688d6; }

/* ── Pills ── */
.crs-up1-card-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.crs-up1-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--crs-muted);
  background: rgba(24,24,43,0.05);
  border: 1px solid rgba(24,24,43,0.07);
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
.crs-up1-pill svg { width: 12px; height: 12px; }
.crs-up1-pill-online {
  background: rgba(46,127,193,0.08);
  border-color: rgba(46,127,193,0.15);
  color: var(--crs-blue);
}

/* ── Title ── */
.crs-up1-card-title {
  font-family: var(--crs-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #009688;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ── Features ── */
.crs-up1-features {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.crs-up1-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--crs-body);
  font-weight: 400;
  line-height: 1.5;
}
.crs-up1-features li svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.crs-up1-card-be .crs-up1-features li svg { color: var(--crs-gold); }
.crs-up1-card-yl .crs-up1-features li svg { color: var(--crs-coral); }
.crs-up1-card-ot .crs-up1-features li svg { color: var(--crs-blue); }

/* ── Card Footer ── */
.crs-up1-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--crs-border);
  flex-wrap: wrap;
}

/* ── Price Block ── */
.crs-up1-price-block {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.crs-up1-fp-was {
  font-size: 13px;
  color: var(--crs-muted);
  text-decoration: line-through;
  font-weight: 400;
}
.crs-up1-fp-now {
  font-size: 30px;
  font-weight: 700;
  color: #009688d6;
  font-family: var(--crs-sans);
  line-height: 1;
}
.crs-up1-fp-featured { color: #ff9800e6; }
.crs-up1-fp-save {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(24,24,43,0.06);
  color: #009688d6;
}
.crs-up1-fp-save-yl {
  background: rgba(217,95,59,0.1);
  color: #ff9800e6;
}

/* ── CTA Buttons ── */
.crs-up1-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 10px;
  font-family: var(--crs-sans);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.crs-up1-cta svg {
  width: 17px; height: 17px;
  transition: transform 0.3s ease;
}
.crs-up1-cta:hover svg { transform: translateX(4px); }

.crs-up1-cta-be {
  background: #009688d6; color: var(--crs-white);
}
.crs-up1-cta-be:hover {
  background: var(--crs-gold);
  box-shadow: 0 8px 22px rgba(200,151,58,0.35);
}
.crs-up1-cta-yl {
  background: linear-gradient(135deg, #FF9800, #ff9800f0);
  color: var(--crs-white);
  box-shadow: 0 6px 20px rgba(217,95,59,0.3);
}
.crs-up1-cta-yl:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(217,95,59,0.42);
}
.crs-up1-cta-ot {
  background: #009688d6; color: var(--crs-white);
}
.crs-up1-cta-ot:hover {
  background: var(--crs-blue);
  box-shadow: 0 8px 22px rgba(46,127,193,0.35);
}

/* ── Left-side accent bar ── */
.crs-up1-card-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  transition: width 0.4s ease;
  border-radius: var(--crs-r) 0 0 var(--crs-r);
  pointer-events: none;
}
.crs-up1-card:hover .crs-up1-card-accent { width: 4px; }
.crs-up1-accent-be { background: var(--crs-gold); }
.crs-up1-accent-yl { background: var(--crs-coral); }
.crs-up1-accent-ot { background: var(--crs-blue); }

/* ── Trust Strip ── */
.crs-up1-trust-strip {
  margin-top: 56px;
  display: flex;
  align-items: center;
  background: var(--crs-white);
  border-radius: 14px;
  border: 1px solid var(--crs-border);
  box-shadow: 0 2px 16px rgba(24,24,43,0.05);
  overflow: hidden;
  flex-wrap: wrap;
  animation: crs-up1-up 0.65s 0.45s ease both;
}
.crs-up1-trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--crs-body);
  padding: 18px 26px;
  flex: 1;
  justify-content: center;
  min-width: 180px;
}
.crs-up1-trust-item svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--crs-gold);
}
.crs-up1-trust-divider {
  width: 1px; height: 36px;
  background: var(--crs-border);
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .crs-up1-card {
    grid-template-columns: 280px 1fr;
  }
  .crs-up1-card-body { padding: 24px 28px; }
}

@media (max-width: 720px) {
  .crs-up1-section { padding: 80px 0 70px; }
  .crs-up1-card {
    grid-template-columns: 1fr;
  }
  .crs-up1-card-media { min-height: 220px; }
  .crs-up1-card-img-overlay {
    background: linear-gradient(to bottom, transparent 40%, rgba(24,24,43,0.5) 100%);
  }
  .crs-up1-card:hover { transform: translateY(-5px); }
  .crs-up1-trust-strip { flex-direction: column; align-items: stretch; }
  .crs-up1-trust-divider { width: 100%; height: 1px; }
  .crs-up1-trust-item { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .crs-up1-card-body { padding: 20px 20px 24px; }
  .crs-up1-card-footer { flex-direction: column; align-items: flex-start; gap: 14px; }
  .crs-up1-cta { width: 100%; justify-content: center; }
  .crs-up1-card-top { flex-direction: column; align-items: flex-start; }
}